/* ============================================================================
   APRIL — LONDON FOUNDER CONCEPT
   ----------------------------------------------------------------------------
   A different job from the current site. The current site explains April to
   anyone who lands on it. This one has a single reader — a founder in London,
   probably on a phone, probably between two other things — and a single job:
   get them to text Fin before they close the tab.

   So the art direction is not "beautiful essay". It is "diligence document
   that happens to be beautiful": near-black ink, real paper for the artefact,
   monospaced numbers everywhere, and one action repeated until it is the only
   thing left to do.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* ------------------------------------------------------------------ tokens
   Two themes, one instrument. Light is paper; dark is the same page with the
   lights off. Everything below is expressed as a token so a theme switch is
   a variable swap and never a second stylesheet. */
:root,
[data-theme='light'] {
  --ink: #f4f2ee;
  --surface: #fcfbf9;
  --surface-2: #eceae4;
  --surface-3: #e3e0d8;
  --paper: #fdfcfa;
  --paper-ink: #16181c;

  --text: #16181c;
  --muted: #5d5f66;
  --dim: #8b8b8b;

  --accent: #14367e;
  --accent-deep: #0f2a68;
  --accent-soft: rgba(20, 54, 126, 0.06);
  --on-accent: #fcfbf9;
  --gold: #7a5f19;
  --gold-soft: rgba(122, 95, 25, 0.07);
  --wa: #146b45;
  --wa-hi: #10583a;

  --border: rgba(28, 26, 22, 0.12);
  --border-hi: rgba(28, 26, 22, 0.26);
  --shadow: 0 1px 2px rgba(24, 22, 18, 0.04), 0 24px 50px -26px rgba(24, 22, 18, 0.22);
  --header-bg: rgba(244, 242, 238, 0.82);
  color-scheme: light;
}

[data-theme='dark'] {
  --ink: #07080a;
  --surface: #0e1014;
  --surface-2: #14171d;
  --surface-3: #191d24;
  --paper: #f2f0eb;
  --paper-ink: #14161a;

  --text: #edeff3;
  --muted: #8d949f;
  --dim: #5f666f;

  --accent: #86a5ff;
  --accent-deep: #2c4fa8;
  --accent-soft: rgba(134, 165, 255, 0.1);
  --on-accent: #06121f;
  --gold: #c9a961;
  --gold-soft: rgba(201, 169, 97, 0.07);
  --wa: #22a35f;
  --wa-hi: #27b96c;

  --border: rgba(232, 235, 240, 0.1);
  --border-hi: rgba(232, 235, 240, 0.2);
  --shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.95);
  --header-bg: rgba(7, 8, 10, 0.78);
  color-scheme: dark;
}

:root {
  --font-display: 'Helvetica Neue', HelveticaNeue, 'Switzer', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', HelveticaNeue, 'Switzer', Helvetica, Arial, sans-serif;
  --font-mono: 'Helvetica Neue', HelveticaNeue, 'Switzer', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shell: 74rem;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(3.5rem, 7vw, 6rem);

  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-lg: 1.1rem;

  /* aliases so the vault gate, lifted from the main stylesheet, needs no edit */
  --text-muted: var(--muted);
  --border-strong: var(--border-hi);
  --accent-hover: var(--accent-deep);
  --wa-hover: var(--wa-hi);
  --r-pill: 980px;
  --space-4: 1rem;
  --space-5: 1.25rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.shell {
  width: min(100% - var(--pad) * 2, var(--shell));
  margin-inline: auto;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------- mono kicker */
.k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.k--dim {
  color: var(--dim);
}

.k--gold {
  color: var(--gold);
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}

.btn--wa {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
  font-weight: 700;
  padding: 1rem 1.75rem;
  font-size: var(--text-base);
}

.btn--wa:hover {
  background: var(--wa-hi);
  border-color: var(--wa-hi);
  color: #fff;
}

.btn--lg {
  padding: 1.15rem 2rem;
  font-size: var(--text-lg);
}

.btn svg {
  flex: none;
}

/* ============================================================== HEADER */
.hd {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.hd__in {
  display: flex;
  align-items: center;
  gap: var(--pad);
  height: 62px;
}

.hd__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: none;
}

.hd__mark {
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url('../assets/april-mark.svg') center / contain no-repeat;
  mask: url('../assets/april-mark.svg') center / contain no-repeat;
}

.hd__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0.02em;
}

.hd__by {
  font-size: var(--text-xs);
  color: var(--dim);
  padding-left: 0.65rem;
  border-left: 1px solid var(--border);
}

.hd__cap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-hi);
  box-shadow: 0 0 0 0 rgba(39, 185, 108, 0.6);
  animation: pulse 2.6s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(39, 185, 108, 0);
  }
}

.hd__cta {
  flex: none;
  padding: 0.6rem 1.1rem;
  font-size: var(--text-sm);
}

@media (max-width: 860px) {
  .hd__cap,
  .hd__by {
    display: none;
  }
  .hd__cta {
    margin-left: auto;
  }
}

/* ============================================================== HERO */
.hero {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) 0 var(--sec);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  translate: -50% 0;
  width: 120vw;
  height: 90vh;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(134, 165, 255, 0.11),
    transparent 62%
  );
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__in {
    grid-template-columns: 1fr;
  }
}

/* the audience badge — the single most important line on the page */
.aud {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 100px;
  background: rgba(201, 169, 97, 0.07);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  margin: var(--pad) 0 0;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero__lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.62;
  color: var(--muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.7rem;
}

.btn--sample {
  border-style: dashed;
}

.sec-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.sec-head-row .sec-head {
  flex: 1 1 32rem;
}

.arte__sample-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: #0b1d3a;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  flex: 0 0 auto;
  margin-top: 0.3rem;
  transition: transform 0.25s ease, background 0.25s ease;
}

.arte__sample-btn:hover {
  background: #14367e;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .arte__sample-btn {
    margin-top: 0;
  }
}

.hero__micro {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--dim);
}

/* the price card, sitting beside the headline */
.pcard {
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
}

.pcard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.pcard h2 {
  font-size: 1.5rem;
  line-height: 1.15;
}

.pcard__flag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 100px;
  padding: 0.24rem 0.6rem;
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.pcard__now {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.pcard__was {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--dim);
}

.pcard__unit {
  font-size: var(--text-sm);
  color: var(--muted);
}

.pcard ul {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.pcard li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 0.65rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}

.pcard li svg {
  margin-top: 0.32rem;
  color: var(--accent);
}

.pcard li b {
  color: var(--text);
  font-weight: 500;
}

.pcard__foot {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}

.pcard__foot .btn {
  width: 100%;
}

.pcard__note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  text-align: center;
}

/* --------------------------------------------------------- the proof strip */
.strip {
  border-block: 1px solid var(--border);
  background: var(--surface);
}

.strip__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip__i {
  padding: clamp(1.1rem, 3vw, 1.8rem) var(--pad);
  border-left: 1px solid var(--border);
}

.strip__i:first-child {
  border-left: 0;
}

.strip__n {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.strip__l {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 0.2rem;
}

@media (max-width: 720px) {
  .strip__in {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip__i:nth-child(3) {
    border-left: 0;
  }
  .strip__i:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

/* ============================================================== SECTIONS */
section.blk {
  padding-block: var(--sec);
}

.sec-head {
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.sec-head h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.sec-head p {
  margin-top: 1.1rem;
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: 1.6;
}

/* -------------------------------------------------- the four rooms (pain) */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.room {
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: background 0.3s var(--ease);
}

.room:hover {
  background: var(--surface-2);
}

.room__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--dim);
  letter-spacing: 0.1em;
}

.room h3 {
  margin-top: 0.8rem;
  hyphens: none;
  font-size: 1.2rem;
  line-height: 1.2;
}

.room p {
  margin-top: 0.7rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

.room__ans {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: var(--text-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ============================================== THE ARTEFACT (paper pages) */
.arte {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  perspective: 1400px;
}

@media (max-width: 880px) {
  .pages {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
  }
}

.pg {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  aspect-ratio: 1 / 1.414;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8);
  font-size: 0.62rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  transform: rotateY(6deg) rotateX(1.5deg);
  transition: transform 0.5s var(--ease);
}

.pg:nth-child(2) {
  transform: rotateY(0deg) translateY(-14px);
}

.pg:nth-child(3) {
  transform: rotateY(-6deg) rotateX(1.5deg);
}

.pg:hover {
  transform: rotateY(0) translateY(-20px);
}

.pg__hd {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8880;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(20, 22, 26, 0.14);
}

.pg h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 0;
}

.pg__sub {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 0.45rem;
}

/* redacted body copy: real structure, no invented client content */
.rd {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.3rem;
}

.rd span {
  height: 4px;
  border-radius: 2px;
  background: rgba(20, 22, 26, 0.17);
}

.rd span:nth-child(3n) {
  width: 88%;
}

.rd span:nth-child(4n) {
  width: 72%;
}

.rd--tight span {
  height: 3px;
}

/* a real-looking data block, numbers withheld */
.pgdata {
  margin-top: 0.9rem;
  border: 1px solid rgba(20, 22, 26, 0.16);
  border-radius: 3px;
  overflow: hidden;
}

.pgrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.34rem 0.5rem;
  border-bottom: 1px solid rgba(20, 22, 26, 0.1);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
}

.pgrow:last-child {
  border-bottom: 0;
}

.pgrow b {
  font-weight: 500;
  color: #3a3d43;
}

.pgbar {
  width: 46px;
  height: 4px;
  background: rgba(20, 22, 26, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.pgbar i {
  display: block;
  height: 100%;
  background: var(--accent-deep);
}

.blurred {
  filter: blur(3.4px);
  user-select: none;
}

.pg__foot {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(20, 22, 26, 0.14);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b8880;
}

.arte__note {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--dim);
}

/* ============================================================== HOW (3 steps) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  counter-reset: s;
}

@media (max-width: 800px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  position: relative;
  padding-top: 1.6rem;
  border-top: 2px solid var(--border-hi);
}

.step::before {
  counter-increment: s;
  content: '0' counter(s);
  position: absolute;
  top: -0.1rem;
  left: 0;
  translate: 0 -100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-bottom: 0.5rem;
}

.step h3 {
  font-size: 1.3rem;
}

.step p {
  margin-top: 0.7rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}

.step__t {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* ============================================================== THE TWO */
.two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 760px) {
  .two {
    grid-template-columns: 1fr;
  }
}

.who {
  display: flex;
  gap: 1.1rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.who img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  filter: grayscale(1) contrast(1.06);
}

.who__n {
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.15;
}

.who__t {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.3rem;
}

.who__d {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.65rem;
  line-height: 1.55;
}

.who .btn {
  margin-top: 0.9rem;
  padding: 0.6rem 1.1rem;
  font-size: var(--text-xs);
}

/* ============================================================== OBJECTIONS */
.objs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--border);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.obj {
  background: var(--surface);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}

.obj h3 {
  font-size: 1.02rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.obj p {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* -------------------------------------------------------- quote placeholder */
.qslot {
  border: 1px dashed var(--border-hi);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(232, 235, 240, 0.018) 12px,
    rgba(232, 235, 240, 0.018) 24px
  );
  text-align: center;
}

.qslot__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.qslot p {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--dim);
  line-height: 1.35;
}

.qslot small {
  display: block;
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--dim);
  line-height: 1.6;
}

/* ============================================================== CLOSE */
.close {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 9rem);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(134, 165, 255, 0.14),
    transparent 60%
  );
  pointer-events: none;
}

.close h2 {
  position: relative;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  max-width: 30rem;
  margin-inline: auto;
}

.close__p {
  position: relative;
  margin: 1.2rem auto 0;
  max-width: 32rem;
  color: var(--muted);
  font-size: var(--text-lg);
}

/* the actual message they will send — removes all thinking */
.msg {
  position: relative;
  margin: 2rem auto 0;
  max-width: 30rem;
  text-align: left;
  background: #075e4b;
  color: #eaf7f0;
  border-radius: 16px 16px 16px 4px;
  padding: 0.9rem 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7);
}

.msg__k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(234, 247, 240, 0.6);
  margin-bottom: 0.4rem;
}

.close .btn--wa {
  position: relative;
  margin-top: 1.6rem;
}

.close__micro {
  position: relative;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* ============================================================== OTHER TWO */
.alt {
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--surface);
}

.alt__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.alt p {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 40rem;
}

.alt b {
  color: var(--text);
  font-weight: 500;
}

/* ============================================================== FOOTER */
.ft {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 7rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--dim);
}

.ft__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
}

.ft a {
  color: var(--muted);
  text-decoration: none;
}

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

.ft__legal {
  margin-top: 1.6rem;
  max-width: 52rem;
  line-height: 1.7;
}

/* ============================================== STICKY MOBILE ACTION BAR */
.bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.bar__p {
  line-height: 1.15;
}

.bar__n {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
}

.bar__l {
  font-size: 0.62rem;
  color: var(--muted);
}

.bar .btn--wa {
  margin-left: auto;
  padding: 0.8rem 1.3rem;
  font-size: var(--text-sm);
}

@media (max-width: 860px) {
  .bar {
    display: flex;
  }
}

/* ============================================================== REVEAL */
.rv {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s var(--ease), translate 0.8s var(--ease);
}

.rv.on {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    translate: 0;
    transition: none;
  }
  .pg {
    transform: none;
  }
  .dot {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

.bar__n s {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--dim);
  margin-left: 0.1rem;
}

/* ============================================================================
   SHARED CHROME
   Lifted from the main stylesheet so the front page, the explainer and the two
   founder pages all carry the same brand mark, the same theme switch and the
   same vault door as the rest of the site.
   ========================================================================== */
.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);
}

.hd__tools { display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-hi); transform: scale(1.06); }
.theme-btn { position: relative; }
.theme-btn__moon { transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
.theme-btn__sun { position: absolute; inset: 0; margin: auto; transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
[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); }

.vault-btn {
  opacity: 0.4;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.vault-btn:hover, .vault-btn:focus-visible, .vault-btn.is-on {
  opacity: 1; color: var(--accent); border-color: var(--accent);
}
body.is-admin .vault-btn { display: none; }

.btn--solid {
  background: var(--accent); border-color: transparent;
  color: var(--on-accent); font-weight: 500;
}
.btn--solid:hover {
  background: var(--accent-deep); color: var(--on-accent);
  transform: translateY(-1px); border-color: transparent;
}
.btn--sm { padding: 0.5rem 0.95rem; font-size: var(--text-sm); }
.btn[aria-disabled='true'] { opacity: 0.42; pointer-events: none; }
.btn.is-waiting { opacity: 0.62; cursor: progress; }

/* ---- the vault gate ---- */
.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: var(--shadow);
  opacity: 0; transform: translateY(-8px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}
.gate.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: 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(--muted); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.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);
}
.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;
}

/* ============================================================================
   BACK BUTTON — every page that opens on top of the site can be closed again
   ========================================================================== */
.back {
  position: sticky; top: 0; z-index: 90;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.back__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem var(--pad);
}
.back__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 1px solid var(--border-hi); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-size: var(--text-sm); text-decoration: none;
  transition: all 0.22s var(--ease);
}
.back__btn:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-2px); }
.back__ttl {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}

/* ============================================================================
   THE OTHER TWO REPORTS — present, findable, and quiet, at the very bottom
   ========================================================================== */
.others { padding: var(--sec) 0; border-top: 1px solid var(--border); background: var(--surface-2); }
.others__hd { max-width: 44rem; margin-bottom: 2.2rem; }
.others__hd h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.5rem 0 0.6rem; }
.others__hd p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.oths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .oths { grid-template-columns: 1fr; } }
.oth {
  padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); transition: border-color 0.25s var(--ease);
}
.oth:hover { border-color: var(--border-hi); }
.oth__n { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.oth h3 { margin: 0.45rem 0 0.15rem; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.oth__max { margin: 0 0 0.85rem; color: var(--accent); font-size: var(--text-sm); font-style: italic; }
.oth__price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.2rem; }
.oth__price .tier__now { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: -0.02em; }
.oth__price .tier__was { color: var(--dim); font-family: var(--font-mono); font-size: var(--text-sm); }
.oth__price .tier__pages { color: var(--muted); font-size: var(--text-sm); }
.oth__d { margin: 0.6rem 0 1.1rem; color: var(--muted); font-size: var(--text-sm); }
.oth__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================================
   FOUNDER PAGES — the portrait is the point, so it gets the room
   ========================================================================== */
.bio { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--sec); }
.bio__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 860px) { .bio__grid { grid-template-columns: 1fr; } }
.bio__figure { margin: 0; position: sticky; top: 5rem; }
@media (max-width: 860px) { .bio__figure { position: static; } }
.bio__img {
  width: 100%; height: auto; display: block;
  border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-2); box-shadow: var(--shadow);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.bio__cap {
  margin: 0.8rem 0 0; font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.bio__role {
  display: inline-block; margin: 0 0 0.7rem;
  padding: 0.3rem 0.75rem; border: 1px solid var(--gold);
  border-radius: var(--r-pill); background: var(--gold-soft);
  color: var(--gold); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
}
.bio h1 {
  margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -0.02em;
}
.bio__title { margin: 0 0 1.6rem; color: var(--muted); font-size: var(--text-lg); }
.bio__body > p { margin: 0 0 1.15rem; max-width: 38rem; line-height: 1.72; }
.bio__body > p:first-of-type {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5; color: var(--text);
}
.bio__rule { height: 1px; border: 0; background: var(--border); margin: 1.8rem 0; }
.bio__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.bio__quiet {
  margin: 1.2rem 0 0; padding: 1rem 1.15rem;
  border-left: 2px solid var(--border-hi); color: var(--dim); font-size: var(--text-sm);
}

/* ============================================================================
   INSIDE APRIL — the explainer. Pictures first, words only where a picture
   cannot carry the point. Everything animates in both directions, because a
   reader who scrolls back up should see it happen again.
   ========================================================================== */
.ix-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 var(--sec); position: relative; overflow: hidden; }
.ix-hero h1 {
  margin: 0.7rem 0 0.9rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.03; letter-spacing: -0.025em;
  max-width: 22ch;
}
.ix-hero h1 em { font-style: italic; color: var(--accent); }
.ix-hero__lede { margin: 0; max-width: 34rem; color: var(--muted); font-size: var(--text-lg); }

.ix { padding: var(--sec) 0; border-top: 1px solid var(--border); }
.ix:nth-of-type(even) { background: var(--surface-2); }
.ix__hd { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ix__hd h2 {
  margin: 0.55rem 0 0.7rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em;
}
.ix__hd p { margin: 0; color: var(--muted); font-size: var(--text-lg); }
.ix__note {
  margin: 1.6rem 0 0; font-size: var(--text-sm); color: var(--dim); max-width: 42rem;
}
.ix__note a { color: var(--accent); }

/* ---- the flow: thirteen in, twenty-four out ---- */
.flow {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center; gap: clamp(0.5rem, 2vw, 1.4rem);
  padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
}
@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; justify-items: center; gap: 0.4rem; }
  .flow__wire { transform: rotate(90deg); height: 46px !important; width: 46px !important; }
}
.flow__end { text-align: center; }
.flow__end b {
  display: block; font-family: var(--font-mono); font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 500; letter-spacing: -0.03em; color: var(--text);
}
.flow__end span { font-size: var(--text-sm); color: var(--muted); }
.flow__wire { width: 100%; height: 34px; overflow: visible; }
.flow__wire path { stroke: var(--border-hi); stroke-width: 1.5; fill: none; }
.flow__wire .flow__pulse {
  stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 14 210; opacity: 0;
}
.on .flow__wire .flow__pulse { animation: flowrun 2.1s linear infinite; opacity: 1; }
@keyframes flowrun { from { stroke-dashoffset: 224; } to { stroke-dashoffset: 0; } }
.flow__core {
  display: grid; place-items: center; gap: 0.15rem;
  width: clamp(92px, 16vw, 120px); height: clamp(92px, 16vw, 120px);
  border: 1px solid var(--accent); border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.flow__core .mark { width: 30px; height: 30px; }
.flow__core span {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.on .flow__core { animation: corebreath 3.4s var(--ease) infinite; }
@keyframes corebreath {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

/* ---- chatbot versus April ---- */
.vs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }
.vs__panel {
  padding: 1.3rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
}
.vs__panel--good { border-color: var(--accent); }
.vs__k {
  margin: 0 0 0.15rem; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.vs__t { margin: 0 0 1rem; font-size: var(--text-lg); }
.vs__plot { width: 100%; height: auto; display: block; }
.vs__plot .ax { stroke: var(--border); stroke-width: 1; }
.vs__plot .dot { fill: var(--muted); opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.vs__panel--good .vs__plot .dot { fill: var(--accent); }
.on .vs__plot .dot { opacity: 1; transform: translateY(0); }
.vs__plot .line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 320; stroke-dashoffset: 320; }
.on .vs__plot .line { transition: stroke-dashoffset 1.1s 0.3s var(--ease); stroke-dashoffset: 0; }
.vs__cap { margin: 0.9rem 0 0; font-size: var(--text-sm); color: var(--muted); }
.vs__cap b { color: var(--text); font-weight: 500; }

/* ---- the body ---- */
.body2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .body2 { grid-template-columns: 1fr; } }
.fig { width: 100%; max-width: 260px; margin: 0 auto; display: block; height: auto; }
.fig .sil { fill: var(--surface-3); stroke: var(--border-hi); stroke-width: 1.2; }
.fig .hot { fill: var(--accent); opacity: 0; transition: opacity 0.5s var(--ease); }
.fig .ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; }
.on .fig .hot { opacity: 1; }
.on .fig .ring { animation: ringpulse 2.6s var(--ease) infinite; }
@keyframes ringpulse {
  0% { r: 5; opacity: 0.75; }
  70% { r: 20; opacity: 0; }
  100% { r: 20; opacity: 0; }
}
.on .fig .hot--1, .on .fig .ring--1 { animation-delay: 0s; transition-delay: 0.05s; }
.on .fig .hot--2, .on .fig .ring--2 { animation-delay: 0.5s; transition-delay: 0.25s; }
.on .fig .hot--3, .on .fig .ring--3 { animation-delay: 1s; transition-delay: 0.45s; }
.on .fig .hot--4, .on .fig .ring--4 { animation-delay: 1.5s; transition-delay: 0.65s; }
.on .fig .hot--5, .on .fig .ring--5 { animation-delay: 2s; transition-delay: 0.85s; }

.parts { display: grid; gap: 0.5rem; }
.part {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
  opacity: 0; transform: translateX(14px);
  transition: opacity 0.55s var(--ease), transform 0.6s var(--ease);
}
.on .part { opacity: 1; transform: translateX(0); }
.on .part:nth-child(1) { transition-delay: 0.05s; }
.on .part:nth-child(2) { transition-delay: 0.17s; }
.on .part:nth-child(3) { transition-delay: 0.29s; }
.on .part:nth-child(4) { transition-delay: 0.41s; }
.on .part:nth-child(5) { transition-delay: 0.53s; }
.part__n {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--font-mono); font-size: 0.68rem;
}
.part b { display: block; font-weight: 500; letter-spacing: -0.01em; }
.part span { color: var(--muted); font-size: var(--text-sm); }

/* ---- the donut ---- */
.donut { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 720px) { .donut { grid-template-columns: 1fr; justify-items: center; } }
.donut svg { width: clamp(200px, 30vw, 264px); height: auto; transform: rotate(-90deg); }
.donut circle {
  fill: none; stroke-width: 22; stroke-linecap: butt;
  stroke-dasharray: 0 999; transition: stroke-dasharray 1.2s var(--ease);
}
.donut .trk { stroke: var(--border); stroke-dasharray: none; }
.legend { display: grid; gap: 0.55rem; }
.leg {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 0.8rem; align-items: center;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.on .leg { opacity: 1; transform: translateY(0); }
.on .leg:nth-child(1) { transition-delay: 0.1s; }
.on .leg:nth-child(2) { transition-delay: 0.2s; }
.on .leg:nth-child(3) { transition-delay: 0.3s; }
.on .leg:nth-child(4) { transition-delay: 0.4s; }
.on .leg:nth-child(5) { transition-delay: 0.5s; }
.leg i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.leg b { font-weight: 400; }
.leg span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }

/* ---- eighteen constants ---- */
.consts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 0.55rem; max-width: 46rem; }
.cst {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--dim);
  opacity: 0; transform: scale(0.86);
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.on .cst { opacity: 1; transform: scale(1); }
.on .cst.lit { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---- counters ---- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.numi {
  padding: 1.3rem 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.numi b {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.03em; color: var(--text);
}
.numi span { font-size: var(--text-sm); color: var(--muted); }

/* ---- the gauge ---- */
.gauge2 { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 720px) { .gauge2 { grid-template-columns: 1fr; justify-items: center; } }
.gauge2 svg { width: clamp(220px, 32vw, 300px); height: auto; }
.gauge2 .gtrk { fill: none; stroke: var(--border); stroke-width: 16; stroke-linecap: round; }
.gauge2 .garc {
  fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 251; stroke-dashoffset: 251;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.on .gauge2 .garc { stroke-dashoffset: 8; }
.gauge2 .gnum {
  fill: var(--text); font-family: var(--font-mono); font-size: 30px;
  text-anchor: middle; letter-spacing: -1px;
}
.gauge2 .gsub { fill: var(--dim); font-family: var(--font-mono); font-size: 10px; text-anchor: middle; letter-spacing: 1.6px; }
.rule2 { display: grid; gap: 0.7rem; }
.rule2 p { margin: 0; }
.silent {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem;
  padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.silent__bar { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.silent__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.3s 0.2s var(--ease); }
.on .silent__bar i { width: 55%; }
.silent small { color: var(--dim); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.06em; }

/* ---- price comparison ---- */
.cmp { display: grid; gap: 0.75rem; max-width: 52rem; }
.cmpr { display: grid; grid-template-columns: minmax(0, 15rem) 1fr auto; gap: 1rem; align-items: center; }
@media (max-width: 640px) { .cmpr { grid-template-columns: 1fr auto; } .cmpr .cmpbar { grid-column: 1 / -1; order: 3; } }
.cmpr__l { font-size: var(--text-sm); color: var(--muted); }
.cmpbar { height: 26px; border-radius: 6px; background: var(--border); overflow: hidden; }
.cmpbar i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: var(--surface-3); transition: width 1.1s var(--ease);
}
.on .cmpbar i { width: var(--w); }
.on .cmpr:nth-child(1) .cmpbar i { transition-delay: 0.05s; }
.on .cmpr:nth-child(2) .cmpbar i { transition-delay: 0.15s; }
.on .cmpr:nth-child(3) .cmpbar i { transition-delay: 0.25s; }
.on .cmpr:nth-child(4) .cmpbar i { transition-delay: 0.35s; }
.on .cmpr:nth-child(5) .cmpbar i { transition-delay: 0.45s; }
.cmpr__v { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.cmpr--us .cmpr__l { color: var(--text); font-weight: 500; }
.cmpr--us .cmpbar i { background: var(--accent); }
.cmpr--us .cmpr__v { color: var(--accent); }

/* ---- April's own words ---- */
.says { display: grid; gap: 1rem; }
.say {
  padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--border);
  border-radius: 18px; background: var(--surface);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.on .say { opacity: 1; transform: translateY(0); }
.on .say:nth-child(2) { transition-delay: 0.14s; }
.on .say:nth-child(3) { transition-delay: 0.28s; }
.say p {
  margin: 0 0 0.7rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.34; letter-spacing: -0.015em;
}
.say cite {
  font-family: var(--font-mono); font-size: var(--text-xs); font-style: normal;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}

/* One founder's page carries no writing yet. Rather than print an apology for
   the empty half, the portrait takes the whole column and the page is simply
   short. It will widen back to two columns the day there is text for it. */
.bio--solo .bio__grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
.bio--solo .bio__figure { position: static; }
.bio--solo .bio__body { text-align: center; }
.bio--solo .bio__foot { justify-content: center; }

/* --- founder pages, second pass ------------------------------------------
   The earlier .bio rules promoted the first paragraph to display type. On
   these pages the first paragraph is the small mono eyebrow, so that has to
   be handed back, and the lede promoted explicitly instead. */
.bio__body > p.k:first-of-type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bio__body > p.bio__lede {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 1.6rem;
}
.bio__figure figcaption {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.25rem;
}
.bio__figure figcaption b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.bio__figure figcaption span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.6;
}
/* The one line on the page that is allowed to raise its voice. */
.bio__pull {
  margin: 2rem 0 0 !important;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--border-hi);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* --- explainer, second pass ----------------------------------------------
   Three corrections after looking at it on a real screen. */

/* The footnotes were too faint to be read at all, which defeats the point of
   putting the sources there. */
.ix__note { color: var(--muted); font-size: var(--text-base); line-height: 1.65; }
.ix__note a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* The comparison bars were filled darker than their own track, so each bar
   read as a hole rather than a quantity. The fill now sits above the track. */
.cmpbar { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.cmpbar i { background: var(--dim); }

/* Two of the five ring segments were the same value as the background. These
   two tokens exist only to keep all five readable in both themes. */
:root, [data-theme='light'] { --seg-4: #7c7f86; --seg-5: #b9b6ad; }
[data-theme='dark'] { --seg-4: #9aa3ae; --seg-5: #59616b; }

/* --- founder pages, third pass ------------------------------------------- */
/* The headline sat directly on top of the standfirst with no air between. */
.bio h1 { margin-bottom: 0.9rem; }
/* On the single-column page the caption has to agree with everything else. */
.bio--solo .bio__figure figcaption { text-align: center; }
.bio--solo .bio__lede { max-width: 27rem; margin-inline: auto; }

/* A dashed border and grey type say "placeholder". Once there is a real line
   in this block it has to stop apologising for itself: solid edge, full
   contrast, larger. The dashed empty state stays in the file for the day the
   client quotes arrive and this reverts. */
.qslot--filled {
  border-style: solid;
  border-color: var(--border);
  background: var(--surface-2);
}
.qslot--filled p:not(.qslot__k) {
  color: var(--text);
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  letter-spacing: -0.015em;
  max-width: 30rem;
  margin-inline: auto;
}
/* The gold eyebrow was being overridden by the broader `.qslot p` colour. */
.qslot p.qslot__k { color: var(--gold); }
/* Wide enough that the line does not break mid-sentence on a desktop. */
.qslot--filled p:not(.qslot__k) { max-width: 40rem; }
/* On a narrow screen the line broke after "We", which throws the rhythm away.
   Break it at the full stop instead, where the sentence already breaks. */
@media (max-width: 560px) { .qslot__br { display: block; height: 0; } }

/* --- founder portraits, corrected ----------------------------------------
   The earlier rules were written for an <img class="bio__img">, but the markup
   wraps the photo in a div of that name. The inner <img> therefore had no CSS
   at all, took its width and height straight from the HTML attributes, and was
   stretched to 1100px tall with object-fit:fill — both founders came out tall
   and narrow. The wrapper no longer dictates a shape; the photograph keeps its
   own proportions and simply fills the column. */
.bio__img {
  aspect-ratio: auto;
  object-fit: initial;
  overflow: hidden;
  padding: 0;
  height: auto;
}
.bio__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
/* Big means a wider column, not a taller box. */
.bio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .bio__grid { grid-template-columns: 1fr; } }
.bio--solo .bio__grid { max-width: 32rem; }
/* Fin's page has no text beside the photograph, so the photograph gets more. */
.bio--solo .bio__grid { max-width: 36rem; }
/* The centred standfirst was still sitting off-axis because the earlier
   .bio__body > p.bio__lede rule reset its left margin. */
.bio--solo .bio__body > p.bio__lede { margin-inline: auto; }

/* --- portraits: uniform scale, capped ------------------------------------
   Both photographs are vertical. Filling the whole column made them tower
   over the page. They now scale as a single unit — same proportions, capped
   at a size that reads as a large photograph rather than a wall. */
.bio__img { max-width: 26rem; margin-inline: 0; }
.bio--solo .bio__img { margin-inline: auto; }
.bio--solo .bio__grid { max-width: 30rem; }
.bio__figure figcaption { max-width: 26rem; }
.bio--solo .bio__figure figcaption { max-width: none; }
@media (max-width: 860px) {
  .bio__img { max-width: 22rem; margin-inline: auto; }
  .bio__figure figcaption { max-width: none; text-align: center; }
}

/* The artefact section now carries its own way in to the explainer. */
.arte__cta {
  margin-top: clamp(1.5rem, 3.5vw, 2.2rem);
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   THE FOUNDER EVALUATION PAGE (report.html)
   Three chart shapes that do not exist elsewhere: vertical columns for length,
   labelled horizontal bars for the division of the pages, and a full-circle
   dial for the turnaround. Everything animates off the same .rv/.on reveal
   the rest of the site uses, so nothing needs its own script.
   ========================================================================== */

/* ---- 01 · length, as columns ---- */
.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: end;
  max-width: 52rem;
}
.col { display: grid; justify-items: center; text-align: center; min-width: 0; }
.col__bar {
  width: 100%;
  max-width: 8.5rem;
  height: clamp(180px, 26vw, 280px);
  border-radius: 12px 12px 4px 4px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.col__bar i {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 10px 10px 3px 3px;
  background: var(--dim);
  transition: height 1.2s var(--ease);
}
.on .col__bar i { height: var(--h); }
.on .col:nth-child(1) .col__bar i { transition-delay: 0.05s; }
.on .col:nth-child(2) .col__bar i { transition-delay: 0.18s; }
.on .col:nth-child(3) .col__bar i { transition-delay: 0.31s; }
.col--us .col__bar i { background: var(--accent); }
.col__v {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 0.85rem;
  line-height: 1;
}
.col--us .col__v { color: var(--accent); }
.col__l {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.35;
  max-width: 11rem;
}
.col--us .col__l { color: var(--text); font-weight: 500; }
.col__p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 0.35rem;
}

/* ---- 02 · where the pages go ---- */
.rparts { display: grid; gap: clamp(1.15rem, 3vw, 1.75rem); max-width: 54rem; }
.rpart { min-width: 0; }
.rpart__top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}
.rpart__top b {
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.rpart__top span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.rpart__bar {
  height: 14px;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.rpart__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 7px;
  background: var(--c, var(--accent));
  transition: width 1.15s var(--ease);
}
.on .rpart__bar i { width: var(--w); }
.on .rpart:nth-child(1) .rpart__bar i { transition-delay: 0.05s; }
.on .rpart:nth-child(2) .rpart__bar i { transition-delay: 0.16s; }
.on .rpart:nth-child(3) .rpart__bar i { transition-delay: 0.27s; }
.on .rpart:nth-child(4) .rpart__bar i { transition-delay: 0.38s; }
.on .rpart:nth-child(5) .rpart__bar i { transition-delay: 0.49s; }
.rpart > p {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
  max-width: 44rem;
}

/* ---- 03 · turnaround dial ---- */
.dial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
@media (max-width: 780px) {
  .dial { grid-template-columns: 1fr; justify-items: center; }
}
.dial svg { width: clamp(210px, 30vw, 280px); height: auto; }
.dial .dtrk { fill: none; stroke: var(--border); stroke-width: 14; }
.dial .darc {
  fill: none;
  stroke: var(--gold);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 490;
  stroke-dashoffset: 490;
  transition: stroke-dashoffset 1.7s var(--ease);
}
.dial.on .darc, .on .dial .darc { stroke-dashoffset: 24; }
.dial .dnum {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 44px;
  text-anchor: middle;
  letter-spacing: -2px;
}
.dial .dsub {
  fill: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
  text-anchor: middle;
  letter-spacing: 2.4px;
}
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: tl; }
.tl li {
  counter-increment: tl;
  position: relative;
  padding: 0 0 1.35rem 2.75rem;
  min-width: 0;
}
.tl li::before {
  content: counter(tl);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  display: grid;
  place-items: center;
}
.tl li::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  top: 1.75rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--border);
}
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::after { display: none; }
.tl li b {
  display: block;
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.tl li span {
  display: block;
  margin-top: 0.28rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}
/* Two ways out of the artefact section now, so they wrap on a phone. */
.arte__cta { flex-wrap: wrap; gap: 0.75rem; }

/* The reveal class lands on .gauge2 itself, so a descendant selector never
   matched and the gauge arc stayed at zero. Same for the suppression bar. */
.gauge2.on .garc, .on .gauge2 .garc { stroke-dashoffset: 8; }
.gauge2.on .silent__bar i, .on .silent__bar i { width: 55%; }

/* ---- the vault door: an eye, and a character count ----
   Forty-seven characters of key, pasted from somewhere else, with a space that
   came along for the ride. The eye lets you look at what is in the box and the
   count tells you how long it is, so a bad paste is visible instead of just
   being refused. */
.gate__field { position: relative; }
.gate__field .gate__key { padding-right: 2.6rem; }
.gate__eye {
  position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--dim); cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.gate__eye:hover { color: var(--text); background: var(--surface); }
.gate__eye.is-on { color: var(--accent); }
.gate__count {
  min-height: 1.1em; margin: 0.35rem 0 0;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em;
  color: var(--dim); text-align: center;
}
.gate__count.is-fixed { color: var(--gold); }

/* ============================================================================
   TYPE SYSTEM — Helvetica Neue
   One family, three voices. Bold (700) for anything that names or counts:
   headlines, prices, figures. Light (300) for anything you read: ledes, body
   paragraphs, quotes. Medium (500–600) for the small labels that have to stay
   legible at 11–12px, where Light would vanish. Sizes step up a notch so the
   light weight keeps its readability.
   ========================================================================== */
:root {
  --text-xs: 0.74rem;
  --text-sm: 0.88rem;
  --text-base: 1.0625rem;
  --text-lg: 1.15rem;
}
body { font-weight: 300; line-height: 1.58; letter-spacing: 0; }
strong, b { font-weight: 700; }

/* --- what names: bold, tight ------------------------------------------- */
h1, h2, h3,
.pg h4, .who__n, .oth h3, .others__hd h2, .bio h1, .ix-hero h1, .ix__hd h2,
.hd__name, .bio__figure figcaption b {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
h3, .pg h4, .who__n, .oth h3, .bio__figure figcaption b { letter-spacing: -0.02em; line-height: 1.15; }
h1 em, h2 em, .ix-hero h1 em, .bio h1 em {
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}
.hd__name { letter-spacing: -0.01em; font-size: 1.1rem; }
.obj h3 { font-weight: 700; letter-spacing: -0.015em; }

/* --- what counts: bold figures, even-width digits ----------------------- */
.pcard__now, .strip__n, .flow__end b, .numi b, .col__v, .oth__price .tier__now,
.bar__n, .dial .dnum, .gauge2 .gnum, .room__n, .part__n, .tl li::before {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pcard__was, .oth__price .tier__was { font-weight: 400; letter-spacing: -0.01em; }
.room__n, .part__n, .tl li::before { letter-spacing: 0.02em; font-weight: 600; }

/* --- what you read: light, roomy ---------------------------------------- */
.qslot p, .say p, .bio__body > p:first-of-type, .bio__body > p.bio__lede, .bio__pull {
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
.room__ans, .step__t, .gate__key, .leg span, .cst, .cmpr__v { font-weight: 400; letter-spacing: 0; }

/* --- small labels: medium, spaced, never light --------------------------- */
.k, .aud, .pcard__flag, .pg__hd, .pg__sub, .pg__foot, .step::before, .who__t, .qslot__k,
.msg__k, .back__ttl, .oth__n, .bio__cap, .bio__role, .flow__core span, .vs__k, .say cite,
.bio__body > p.k:first-of-type, .bio__figure figcaption span, .col__p, .rpart__top span,
.rpart__top span, .dial .dsub, .gauge2 .gsub {
  font-weight: 600;
  letter-spacing: 0.12em;
}
.hd__cap, .hero__micro, .pcard__note, .arte__note, .close__micro, .silent small, .gate__count, .pgrow {
  font-weight: 400;
  letter-spacing: 0.01em;
}
.hero__micro, .pcard__note, .arte__note, .close__micro { font-size: var(--text-sm); color: var(--muted); }
.btn { font-weight: 600; letter-spacing: -0.005em; }

/* ============================================================================
   PHONE LAYOUT
   On a laptop the page is a set of rooms side by side. On a phone the same
   rooms stacked into one thirteen-screen scroll. The fix is not smaller type;
   it is fewer things on screen at once. Card sets become one-at-a-time swipes,
   the objections fold to their question, the price card folds to its price.
   ========================================================================== */
.pcard__more, .dots { display: none; }

@media (max-width: 720px) {
  :root {
    --sec: 2.75rem;
    --pad: 1.15rem;
  }

  /* --- hero: headline, one paragraph, one green button ------------------ */
  .hero { padding-top: 1.4rem; padding-bottom: 2rem; }
  .hero__in { gap: 1.6rem; }
  .aud { font-size: 0.66rem; padding: 0.34rem 0.75rem 0.34rem 0.6rem; letter-spacing: 0.1em; }
  .hero h1 {
    font-size: 2.35rem;
    line-height: 1.02;
    margin-top: 1rem;
  }
  .hero__lede {
    font-size: 1.02rem;
    line-height: 1.5;
    margin-top: 0.9rem;
  }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.3rem; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__cta .btn:not(.btn--wa) {
    background: transparent;
    border-color: var(--border-hi);
    color: var(--text);
    padding-block: 0.8rem;
  }
  .hero__micro { margin-top: 0.8rem; font-size: 0.8rem; }

  /* --- price card: folds to the price; the list opens on tap ------------ */
  .pcard { padding: 1.15rem 1.15rem 1rem; }
  .pcard h2 { font-size: 1.15rem; }
  .pcard__now { font-size: 2.2rem; }
  .pcard__unit { font-size: 0.86rem; }
  .pcard ul {
    display: none;
    margin-top: 0.4rem;
  }
  .pcard.is-open ul { display: block; }
  .pcard__more {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .pcard__more::after {
    content: '';
    flex: none;
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s var(--ease);
  }
  .pcard.is-open .pcard__more::after { transform: rotate(-135deg) translateY(-2px); }
  .pcard.is-open .pcard__more { border-bottom: 0; }
  .pcard__foot { margin-top: 0.9rem; }
  .pcard__foot .btn { padding-block: 0.85rem; }

  /* --- the four numbers: one tight row of two ---------------------------- */
  .strip__i { padding: 0.9rem 0.9rem; }
  .strip__n { font-size: 1.25rem; }
  .strip__l { font-size: 0.74rem; }

  /* --- section heads ------------------------------------------------------ */
  .sec-head { margin-bottom: 1.3rem; }
  .sec-head h2 { font-size: 1.8rem; margin-top: 0.6rem; }
  .sec-head p { font-size: 0.98rem; margin-top: 0.7rem; line-height: 1.5; }
  .others__hd h2, .ix__hd h2 { font-size: 1.7rem; }

  /* --- card sets become a one-at-a-time swipe ---------------------------- */
  .rooms, .two, .oths, .pages {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 0.4rem;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    max-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    perspective: none;
  }
  .rooms::-webkit-scrollbar, .two::-webkit-scrollbar, .oths::-webkit-scrollbar, .pages::-webkit-scrollbar { display: none; }
  .rooms > *, .two > *, .oths > *, .pages > * {
    flex: 0 0 min(80vw, 20rem);
    scroll-snap-align: start;
  }
  .room, .who, .oth {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.15rem 1.15rem 1.2rem;
  }
  .room h3, .who__n, .oth h3 { font-size: 1.12rem; }
  .room p, .who p, .oth p { font-size: 0.92rem; line-height: 1.5; }
  .room__ans { font-size: 0.82rem; }
  .pg, .pg:nth-child(2), .pg:nth-child(3) { transform: none; }
  .pages > .pg { flex-basis: min(74vw, 18rem); }

  .dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 0.9rem;
  }
  .dots button {
    width: 6px; height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border-hi);
    cursor: pointer;
  }
  .dots button.is-on { background: var(--text); width: 18px; border-radius: 3px; }

  /* --- three steps: a tight list ------------------------------------------ */
  .steps { gap: 1rem; }
  .step { padding-top: 0.9rem; }
  .step::before { position: static; translate: none; display: block; padding-bottom: 0.35rem; }
  .step h3 { font-size: 1.08rem; }
  .step p { font-size: 0.92rem; line-height: 1.5; }

  /* --- the objections fold to their question ----------------------------- */
  .objs { display: block; background: transparent; border: 0; border-radius: 0; }
  .obj {
    border-top: 1px solid var(--border);
    padding: 0.95rem 0;
    background: transparent;
  }
  .obj:last-child { border-bottom: 1px solid var(--border); }
  .obj h3 {
    position: relative;
    padding-right: 1.8rem;
    font-size: 1rem;
    cursor: pointer;
  }
  .obj h3::after {
    content: '';
    position: absolute;
    right: 0.4rem; top: 0.35em;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
  }
  .obj.is-open h3::after { transform: rotate(-135deg) translateY(4px); }
  .obj p { display: none; font-size: 0.92rem; }
  .obj.is-open p { display: block; margin-top: 0.7rem; }

  /* --- the close ---------------------------------------------------------- */
  .close .msg { padding: 1.2rem; }
  .msg h2 { font-size: 1.55rem; }
  .qslot p, .say p { font-size: 1.05rem; }
}

/* ============================================================================
   THE FOLDER — client reports
   A small folder sits top-centre of the header and inside The Artefact. Click
   either and it grows into the large one on reports.html.
   ========================================================================== */
.hd__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.hd__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--pad); min-width: 0; }
.hd__cap { margin-left: 0; white-space: nowrap; }
.hd__folder {
  display: block;
  width: 52px;
  padding: 4px;
  border-radius: 10px;
  line-height: 0;
  transition: transform 0.35s var(--ease), background 0.25s var(--ease);
}
.hd__folder img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18)); }
.hd__folder:hover { transform: translateY(-1px) scale(1.08); background: var(--surface-2); }
.hd__folder:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1240px) { .hd__cap { display: none; } }
@media (max-width: 860px) {
  .hd__in { grid-template-columns: auto auto auto; justify-content: space-between; }
  .hd__folder { width: 44px; }
  .hd__right { gap: 0.5rem; }
}

.fold {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.fold:hover { border-color: var(--border-hi); background: var(--surface-2); }
.fold__icon { display: block; line-height: 0; transition: transform 0.5s var(--ease); }
.fold__icon img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22));
  transition: transform 0.5s var(--ease);
}
.fold:hover .fold__icon { transform: translateY(-3px); }
.fold__text { display: grid; gap: 0.45rem; }
.fold__ttl { font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; }
.fold__sub { color: var(--muted); font-size: var(--text-base); max-width: 38rem; }
.fold__go { margin-top: 0.3rem; font-weight: 600; color: var(--accent); font-size: var(--text-sm); }
@media (max-width: 720px) {
  .fold { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 0.6rem; padding: 1.3rem 1.1rem 1.4rem; }
  .fold__icon { width: 52vw; max-width: 15rem; }
  .fold__sub { font-size: 0.92rem; }
}

/* the flight */
.folder-veil {
  position: fixed; inset: 0; z-index: 400;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.folder-veil.is-on { opacity: 1; }
.folder-ghost {
  position: fixed; z-index: 401;
  transition: left 0.7s var(--ease), top 0.7s var(--ease), width 0.7s var(--ease), height 0.7s var(--ease);
  pointer-events: none;
}

/* --- reports.html ------------------------------------------------------- */
.rr-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; position: relative; overflow: hidden; }
.rr-hero__in { display: grid; justify-items: center; }
.rr-icon {
  width: min(62vw, 420px);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 0;
  transform: scale(1.06);
  transition: transform 1.1s var(--ease);
}
.rr-icon.is-in { transform: scale(1); }
.rr-icon img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.3)); }
[data-theme='dark'] .rr-hero::before {
  content: ''; position: absolute; left: 50%; top: 10%; translate: -50% 0;
  width: 60vw; height: 40vh;
  background: radial-gradient(ellipse at center, rgba(232, 235, 240, 0.09), transparent 65%);
  pointer-events: none;
}
.rr-hero h1 { margin: 0.6rem 0 0.9rem; font-size: clamp(2.1rem, 5.4vw, 3.6rem); max-width: 18ch; }
.rr-hero h1 em { color: var(--accent); }
.rr-lede { margin: 0; max-width: 36rem; color: var(--muted); font-size: var(--text-lg); line-height: 1.55; }

.rr-up { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.rr-in .rr-up { opacity: 1; transform: none; }
.rr-in .rr-hero .k { transition-delay: 0.1s; }
.rr-in .rr-hero h1 { transition-delay: 0.18s; }
.rr-in .rr-lede { transition-delay: 0.26s; }
.rr-in .rr-facts { transition-delay: 0.36s; }
.rr-in .rr-open { transition-delay: 0.46s; }

.rr-facts { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.rr-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.rr-fact { background: var(--surface); padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.rr-fact h3 { margin-top: 0.6rem; font-size: 1.12rem; }
.rr-fact p:not(.k) { margin-top: 0.55rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
@media (max-width: 860px) { .rr-facts__grid { grid-template-columns: 1fr; } }

.rr-open { padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--sec); }
.rr-open__in { display: grid; justify-items: center; }
.rr-form {
  width: min(100%, 34rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1rem;
}
.rr-form h2 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; color: var(--text); }
.rr-field { display: grid; gap: 0.4rem; }
.rr-field__l { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; }
.rr-field__count { font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.rr-field__count.is-full { color: var(--wa); }
.rr-field__wrap { position: relative; display: block; }
.rr-field__i {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: var(--ink);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.rr-field__i::placeholder { color: var(--dim); font-weight: 300; }
.rr-field__i:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rr-field__i--code { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.rr-field__wrap .rr-field__i { padding-right: 4.2rem; }
.rr-field__eye {
  position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer;
}
.rr-field__eye:hover { color: var(--text); border-color: var(--border-hi); }
.rr-form__go { width: 100%; justify-content: center; margin-top: 0.3rem; }
.rr-form__go[aria-disabled='true'] { opacity: 0.5; }
.rr-form__note { margin: 0; text-align: center; color: var(--dim); font-size: var(--text-sm); line-height: 1.5; }
.rr-form__note.is-warn { color: var(--gold); }
@media (max-width: 720px) {
  .rr-icon { width: 66vw; }
  .rr-hero h1 { font-size: 2.1rem; }
  .rr-form { padding: 1.2rem; border-radius: 18px; }
}

/* --- client reports: always white, always light, Helvetica Neue ----------- */
.rr-page {
  --ink: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --header-bg: rgba(255, 255, 255, 0.86);
  --text: #16181c;
  --muted: #5d5f66;
  --dim: #8b8f98;
  --border: rgba(22, 24, 28, 0.1);
  --border-hi: rgba(22, 24, 28, 0.2);
  --shadow: 0 18px 50px rgba(22, 24, 28, 0.06);
  background: #ffffff;
  color: var(--text);
  font-family: 'Helvetica Neue', HelveticaNeue, 'Switzer', Helvetica, Arial, sans-serif;
}
.rr-page .back { background: var(--header-bg); }
.rr-page .back__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.rr-page .back__btn { justify-self: start; }
.rr-page .back__ttl { grid-column: 2; text-align: center; justify-self: center; }
.rr-page .back__spacer { grid-column: 3; width: auto; height: 34px; }
.rr-page .ft { background: #ffffff; }

.rr-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.rr-page .rr-hero::before { display: none; }
.rr-icon { width: min(60vw, 250px); margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.rr-icon img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.26)) drop-shadow(0 18px 32px rgba(11, 29, 58, 0.2)); }
.rr-hero h1 { margin: 0.8rem 0 1.1rem; }
.rr-hero h1 em { color: #14367e; }
.rr-lede { max-width: 34rem; line-height: 1.6; }

.rr-facts { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.rr-facts__grid {
  gap: clamp(1rem, 2vw, 1.5rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.rr-fact {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 28px;
  corner-shape: squircle;
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.rr-fact h3 { margin-top: 0.8rem; font-size: 1.2rem; }
.rr-fact p:not(.k) { margin-top: 0.7rem; font-size: var(--text-base); line-height: 1.6; font-weight: 300; }

.rr-open { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.rr-form {
  width: min(100%, 36rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--border);
  border-radius: 34px;
  corner-shape: squircle;
  background: #ffffff;
  gap: 1.35rem;
}
.rr-form h2 { margin-bottom: 0.4rem; font-size: 1.2rem; line-height: 1.4; font-weight: 400; }
.rr-field { gap: 0.5rem; }
.rr-field__l { font-size: var(--text-sm); font-weight: 700; }
.rr-field__i {
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  corner-shape: squircle;
  background: #ffffff;
  border-color: var(--border-hi);
  font-weight: 400;
}
.rr-field__i:focus { border-color: #14367e; box-shadow: 0 0 0 3px rgba(20, 54, 126, 0.08); }
.rr-field__hint { display: block; color: var(--dim); font-size: var(--text-xs); font-weight: 400; line-height: 1.45; }
.rr-field__eye { border-radius: 10px; corner-shape: squircle; background: #ffffff; }
.rr-form__go { margin-top: 0.6rem; padding-top: 1rem; padding-bottom: 1rem; border-radius: 18px; corner-shape: squircle; }
.rr-form__note { margin-top: 0.2rem; font-weight: 400; }
@media (max-width: 720px) {
  .rr-hero { padding-top: 2.4rem; }
  .rr-icon { width: 68vw; margin-bottom: 1.8rem; }
  .rr-lede { font-size: 1.05rem; }
  .rr-fact { border-radius: 24px; padding: 1.4rem 1.3rem; }
  .rr-form { padding: 1.5rem 1.25rem 1.6rem; border-radius: 28px; gap: 1.15rem; }
}

/* the folder card on the front page is white in both themes, squircle */
.fold {
  background: #ffffff;
  color: #16181c;
  border-color: rgba(22, 24, 28, 0.1);
  border-radius: 30px;
  corner-shape: squircle;
}
.fold:hover { background: #ffffff; border-color: rgba(22, 24, 28, 0.24); }
.fold .k { color: #14367e; }
.fold__sub { color: #5d5f66; }
.fold__go { color: #14367e; }
.fold__icon img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0 14px 24px rgba(11, 29, 58, 0.2)); }
.hd__folder img { filter: none; } /* a CSS shadow here punches a pale square through the frosted header */

/* the flight lands on a white page, so the veil is white */
.folder-veil { background: #ffffff; }

/* --- THE FOLDER, rebuilt from the Figma layers (node 215:1776) ---------------
   Four vector layers positioned exactly as in the file (478 x 328 box), and a
   real frosted flap: Figma's background blur 24 = CSS backdrop-filter blur(12px)
   over #4A8DF0 at 20%. Papers lift on hover / focus / while the folder flies. */
.fld { position: relative; display: block; width: 100%; aspect-ratio: 478 / 328; line-height: 0; }
.fld .fld__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fld img { position: absolute; display: block; height: auto; max-width: none; filter: none; }
.fld .fld__back { left: 5.858%; top: 6.402%; width: 87.866%; }
.fld .fld__p { transform-origin: 50% 100%; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.fld .fld__p--r { left: 35.27%; top: 9.32%; width: 47.49%; transition-delay: 0.1s; }
.fld .fld__p--m { left: 28.88%; top: 6.015%; width: 42.05%; transition-delay: 0.05s; }
.fld .fld__p--l { left: 16.935%; top: 0; width: 49.58%; }
.fld { container-type: inline-size; }
.fld .fld__flap {
  position: absolute; left: 0.80%; top: 24.39%; width: 98.12%; height: 75.61%;
  overflow: hidden;
  clip-path: url(#fldFlapClip);
  -webkit-clip-path: url(#fldFlapClip);
}
/* the frosted glass: the same three papers again, blurred, under a 20% tint of the folder blue */
.fld .fld__flap img { filter: blur(2.5cqw) !important; }
.fld .fld__flap .fld__p--r { left: 35.13%; top: -19.93%; width: 48.40%; }
.fld .fld__flap .fld__p--m { left: 28.62%; top: -24.30%; width: 42.86%; }
.fld .fld__flap .fld__p--l { left: 16.44%; top: -32.26%; width: 50.53%; }
.fld .fld__flap::after { content: ""; position: absolute; inset: 0; background: rgba(74, 141, 240, 0.2); }
/* the papers come out a little */
[data-folder]:hover .fld__p--l, [data-folder]:focus-visible .fld__p--l, .fld:hover .fld__p--l, .fld.is-open .fld__p--l { transform: translate(-3%, -9%) rotate(-4deg); }
[data-folder]:hover .fld__p--m, [data-folder]:focus-visible .fld__p--m, .fld:hover .fld__p--m, .fld.is-open .fld__p--m { transform: translate(0, -12%); }
[data-folder]:hover .fld__p--r, [data-folder]:focus-visible .fld__p--r, .fld:hover .fld__p--r, .fld.is-open .fld__p--r { transform: translate(3%, -8%) rotate(4deg); }
@media (prefers-reduced-motion: reduce) { .fld__p { transition: none; } }
/* soft ground shadow so the folder sits on a white card (not in the frosted header) */
.fold__icon .fld__back, .rr-icon .fld__back, .folder-ghost .fld__back { filter: drop-shadow(0 14px 24px rgba(11, 29, 58, 0.18)); }
.fold__icon .fld__p, .rr-icon .fld__p, .folder-ghost .fld__p { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16)); }
.fold:hover .fold__icon img { transform: none; }
.folder-ghost { aspect-ratio: 478 / 328; }
.fld.folder-ghost { position: fixed; z-index: 401; }

/* sample report button on the client reports page */
.rr-sample { margin: 1.9rem 0 0; }
.rr-sample__btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.15rem 2.2rem; border-radius: 999px; background: #0b1d3a; color: #fff; font-weight: 600; text-decoration: none; font-size: var(--text-lg); box-shadow: 0 8px 20px rgba(11, 29, 58, 0.28); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.rr-sample__btn:hover { background: #14367e; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11, 29, 58, 0.34); }
@media (max-width: 640px) { .rr-sample { margin-top: 1.4rem; } }