/* ============================================================
   FCL Landing — page styles on top of design system tokens.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--navy);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* Tweakable variables (overridden by the tweaks panel via inline style on :root) */
:root {
  --t-accent: var(--acid);
  --t-accent-deep: var(--acid-deep);
  --t-scribble: 1;
  --t-section-pad: clamp(80px, 10vw, 160px);
}

/* ============================================================
   PAGE NAV (hairline editorial bar)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(24px, 4vw, 64px);
  background: rgba(236,233,223,0.86);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--cream-dark);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.nav.dark { background: rgba(23,36,63,0.86); border-bottom-color: rgba(236,233,223,0.15); color: var(--cream); }
.nav__brand { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.nav__brand b { font-weight: 700; }
.nav__brand .bracket { color: var(--t-accent); font-weight: 700; }
.nav__links { display: flex; gap: clamp(20px, 3vw, 48px); }
.nav__links a { border: none; color: inherit; opacity: 0.8; }
.nav__links a:hover { opacity: 1; }
.nav__cta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--navy); color: var(--cream);
  padding: 10px 18px; border: 1px solid var(--navy);
  cursor: pointer; font-family: var(--font-body); font-weight: 600;
}
.nav.dark .nav__cta { background: var(--t-accent); color: var(--navy); border-color: var(--t-accent); }
.nav__cta:hover { background: var(--navy-90); }

/* ============================================================
   FOLIO — the [ FCL ] publication mark
   ============================================================ */
.folio {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: inherit;
}
.folio::before { content: "["; color: var(--t-accent); font-weight: 700; }
.folio::after  { content: "]"; color: var(--t-accent); font-weight: 700; }
.folio--hide { display: none !important; }

/* Section-top folio bar (eyebrow + meta) */
.section-folio {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-70);
  padding: 0 0 clamp(40px, 6vw, 80px);
}
.section-folio--inverse { color: rgba(236,233,223,0.6); }
.section-folio .num { font-feature-settings: "tnum"; }

/* Editorial section divider — hairline rule between adjacent navy sections */
.section-divider {
  border: 0;
  height: 1px;
  background: rgba(236,233,223,0.25);
  margin: 0 0 clamp(56px, 7vw, 96px);
  width: 100%;
}
.section--cream .section-divider,
.section--white .section-divider { background: var(--navy-20); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section {
  position: relative;
  padding: var(--t-section-pad) clamp(24px, 5vw, 96px);
}
/* Collapse padding between adjacent navy sections (Business → Diagnóstico) */
#business { padding-bottom: clamp(32px, 3vw, 48px) !important; }
#diagnostico { padding-top: clamp(24px, 2.5vw, 40px); }

.section--navy  { background: var(--navy);  color: var(--cream); }
.section--cream { background: var(--cream); color: var(--navy);  }
.section--acid  { background: var(--t-accent); color: var(--navy); }
.section--white { background: var(--white); color: var(--navy);  }

.container { max-width: 1440px; margin: 0 auto; }
.container--narrow { max-width: 1080px; margin: 0 auto; }
.container--wide   { max-width: 1680px; margin: 0 auto; }

/* ============================================================
   DISPLAY TYPE HELPERS
   ============================================================ */
.display-caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-size: clamp(48px, 7.4vw, 132px);
  text-wrap: balance;
}
.display-statement {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-size: clamp(38px, 5vw, 84px);
  text-wrap: balance;
}
.display-med {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-size: clamp(30px, 3.6vw, 60px);
  text-wrap: balance;
}
.editorial-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.005em;
}
.lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--navy-70);
  max-width: 56ch;
}
.section--navy .lede { color: rgba(236,233,223,0.75); }
.micro {
  font-family: var(--font-body); font-size: 12px; line-height: 1.5;
  color: var(--navy-50); letter-spacing: 0.01em;
}
.section--navy .micro { color: rgba(236,233,223,0.55); }
.eyebrow-tag {
  display: inline-block;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy-70);
}
.section--navy .eyebrow-tag { color: rgba(236,233,223,0.65); }
.section--acid .eyebrow-tag { color: var(--navy); }

/* ============================================================
   BUTTONS — navy-led, structural
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; width: max-content;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 28px; border: 1px solid var(--navy);
  background: var(--navy); color: var(--cream);
  cursor: pointer; border-radius: 0;
  transition: background var(--dur-2) var(--ease-out);
}
.btn:hover { background: var(--navy-90); }
.btn--cream { background: var(--cream); color: var(--navy); border-color: var(--navy); }
.btn--acid { background: var(--t-accent); color: var(--navy); border-color: var(--navy); }
.btn--acid:hover { background: var(--acid-deep); }
.btn--cream:hover { background: var(--white); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--cream); }
.section--navy .btn--ghost:hover { color: var(--navy); }
.btn__arrow {
  display: inline-block; transform: translateY(1px);
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translate(2px, -1px); }

/* ============================================================
   MARKER LAYER — handwritten / acid annotations
   Visibility scales with --t-scribble (0 = hidden, 1 = standard)
   ============================================================ */
.mark-wrap { position: relative; display: inline-block; }
.mark-svg {
  position: absolute; pointer-events: none;
  opacity: calc(var(--t-scribble) * 1);
  transition: opacity var(--dur-3) var(--ease-out);
}

/* circle around a word — wraps content in an inline-block */
.mark-circle {
  position: relative; display: inline-block; padding: 0 0.18em 0.05em 0.18em;
}
.mark-circle > svg {
  position: absolute; inset: -8% -2% -8% -2%; width: 104%; height: 116%;
  pointer-events: none; overflow: visible;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-circle > svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* highlighter swipe behind text */
.mark-highlight {
  background-image: linear-gradient(120deg, transparent 1%, var(--t-accent) 1.5%, var(--t-accent) 97%, transparent 99%);
  background-repeat: no-repeat;
  background-size: 100% 66%;
  background-position: 0 78%;
  padding: 0 0.12em 0.05em 0.12em;
  color: var(--navy);
  opacity: calc(0.4 + 0.6 * var(--t-scribble));
}
.mark-highlight--full {
  background-size: 100% 88%;
  background-position: 0 100%;
}

/* underline squiggle */
.mark-underline {
  position: relative; display: inline-block; padding-bottom: 0.18em;
  color: var(--t-accent);
}
.mark-underline--blue { color: var(--blue-med); }
/* On acid backgrounds, marked text must stay navy or it vanishes. */
.section--acid .mark-underline,
.section--acid .mark-underline--blue { color: var(--navy); }
.mark-underline > svg {
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; height: 12px; overflow: visible;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-underline > svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.mark-underline--blue > svg path { stroke: var(--blue-med); }

/* arrow — inline indicator */
.mark-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1em; flex-shrink: 0;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-arrow svg { width: 100%; height: 100%; overflow: visible; }
.mark-arrow svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* X mark */
.mark-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex-shrink: 0;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-x svg { width: 100%; height: 100%; overflow: visible; }
.mark-x svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* big scribble loop — anchors a spread */
.mark-loop {
  position: absolute; pointer-events: none;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-loop svg { width: 100%; height: 100%; overflow: visible; }
.mark-loop svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark-loop--blue svg path { stroke: var(--blue-med); }
.mark-loop--navy svg path { stroke: var(--navy); }

/* corner brackets framing a region */
.bracket-region { position: relative; }
.bracket-region::before,
.bracket-region::after,
.bracket-region > .bracket-tl,
.bracket-region > .bracket-br {
  /* the ::before/::after pair already give us 2 corners; we add tl + br pseudo via spans for all 4 */
}
.bracket-corner {
  position: absolute; width: clamp(22px, 2.2vw, 36px); height: clamp(22px, 2.2vw, 36px);
  border: 2px solid var(--navy); pointer-events: none;
}
.bracket-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket-corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bracket-corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bracket-corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.bracket-corner--inverse { border-color: var(--cream); }
.bracket-corner--accent  { border-color: var(--t-accent); }
.bracket-corner--blue    { border-color: var(--blue-med); }

/* Strikethrough scribble for "before" text */
.mark-strike { position: relative; display: inline-block; }
.mark-strike > svg {
  position: absolute; left: -2%; right: -2%; top: 45%;
  width: 104%; height: 12px; overflow: visible;
  opacity: calc(var(--t-scribble) * 1);
}
.mark-strike > svg path { stroke: var(--t-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* ============================================================
   IMAGE SLOTS — wrapper that respects photo mode
   ============================================================ */
.photo {
  position: relative; overflow: hidden;
  background: var(--navy-20);
  border: 0;
}
.photo image-slot {
  display: block; width: 100%; height: 100%;
}
.photo--bracket { padding: 0; }
body[data-photo-mode="hidden"] .photo { display: none; }
body[data-photo-mode="hidden"] .photo-replacement { display: block !important; }
.photo-replacement { display: none; }

/* mocked editorial placeholder — gradient + grain */
body[data-photo-mode="mocked"] .photo image-slot { display: none; }
body[data-photo-mode="mocked"] .photo {
  background:
    radial-gradient(80% 60% at 30% 30%, rgba(255,255,255,0.06), transparent 70%),
    linear-gradient(160deg, #2a2622 0%, #3d342a 38%, #5a4a37 70%, #1c1815 100%);
}
body[data-photo-mode="mocked"] .photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.34 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4; mix-blend-mode: overlay; pointer-events: none;
}
body[data-photo-mode="mocked"] .photo::after {
  content: attr(data-placeholder);
  position: absolute; left: 24px; bottom: 24px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   HAIRLINE LIST — diagnostic checklist / founder questions
   ============================================================ */
.hairline-list { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.hairline-list > li {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--navy-20);
}
.section--navy .hairline-list > li { border-top-color: rgba(236,233,223,0.18); }
.hairline-list > li:last-child { border-bottom: 1px solid var(--navy-20); }
.section--navy .hairline-list > li:last-child { border-bottom-color: rgba(236,233,223,0.18); }
.hairline-list .marker { display: flex; align-items: flex-start; padding-top: 4px; }
.hairline-list .body { font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; }

/* Hero creative-starts list — editorial enumeration inside the hero lede */
.hero-creative-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 0;
  max-width: 44ch;
}
.hero-creative-list > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--navy-20);
}
.hero-creative-list > li:last-child { border-bottom: 1px solid var(--navy-20); }
.hero-creative-list__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--navy-70);
  line-height: 1;
}
.hero-creative-list__item {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.01em;
}

/* Numbered editorial list (07 Who is this for) */
.editorial-grid {
  display: grid; gap: clamp(24px, 3vw, 64px);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) {
  .editorial-grid { grid-template-columns: 1fr; }
}
.editorial-grid > .item { padding-top: 24px; border-top: 1px solid var(--navy); }
.editorial-grid > .item .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.5vw, 72px); letter-spacing: -0.02em;
  line-height: 1; color: var(--navy);
}
.editorial-grid > .item .label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-70); margin-top: 18px;
}
.editorial-grid > .item h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15;
  margin: 10px 0 16px 0;
}
.editorial-grid > .item p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--navy-70); margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy); color: rgba(236,233,223,0.7);
  padding: clamp(40px, 4vw, 64px) clamp(24px, 5vw, 96px) 32px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.08em;
}
.footer__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
  border-top: 1px solid rgba(236,233,223,0.15);
  padding-top: 32px;
}
.footer__wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.02em;
  line-height: 0.95; color: var(--cream);
  text-transform: uppercase;
}
.footer__wordmark .dot { color: var(--t-accent); }
.footer__logo {
  display: block;
  height: clamp(96px, 11vw, 168px);
  width: auto;
  max-width: 100%;
}
.footer__links { display: flex; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; }
.footer__links a { color: rgba(236,233,223,0.75); border: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }
.footer__links a:hover { color: var(--t-accent); }
.footer__meta { font-size: 11px; opacity: 0.5; margin-top: 32px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============================================================
   DIAGNOSTIC MODAL
   ============================================================ */
.diag-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(23,36,63,0.86);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  animation: diag-fade 360ms var(--ease-edit);
}
@keyframes diag-fade { from { opacity: 0; } to { opacity: 1; } }
.diag-card {
  width: 100%; max-width: 880px;
  background: var(--cream); color: var(--navy);
  position: relative;
  border: 1px solid var(--navy);
  display: grid; grid-template-rows: auto 1fr auto;
  max-height: min(720px, 90vh);
  animation: diag-rise 420ms var(--ease-edit);
}
@keyframes diag-rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.diag-head {
  padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--navy-20);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.diag-head__progress {
  display: flex; gap: 6px; align-items: center;
}
.diag-head__brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy);
}
.diag-head__logo {
  display: block;
  height: 22px; width: auto;
  flex-shrink: 0;
}
.diag-head__sep {
  color: var(--navy-50);
  letter-spacing: 0;
}
.diag-head__progress span {
  width: 32px; height: 2px; background: var(--navy-20);
}
.diag-head__progress span.on { background: var(--t-accent); }
.diag-close {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em;
  color: var(--navy-70); text-transform: uppercase; padding: 0;
}
.diag-close:hover { color: var(--navy); }
.diag-body { padding: clamp(32px, 4vw, 64px); overflow-y: auto; }
.diag-foot {
  padding: 20px 32px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--navy-20);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy-70);
}
.diag-body h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px 0; text-wrap: balance;
}
.diag-body .lede { margin-bottom: 36px; }
.diag-options { display: grid; gap: 14px; grid-template-columns: 1fr; }
.diag-option {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 16px; align-items: center;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--navy-20);
  cursor: pointer; text-align: left;
  font-family: var(--font-body);
  transition: all var(--dur-2) var(--ease-out);
}
.diag-option:hover { border-color: var(--navy); }
.diag-option.selected { border-color: var(--navy); background: var(--cream); }
.diag-option .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: var(--navy);
}
.diag-option .title { font-weight: 600; font-size: 15px; color: var(--navy); }
.diag-option .desc { font-size: 13px; color: var(--navy-70); margin-top: 4px; line-height: 1.45; }
.diag-option .check {
  width: 22px; height: 22px; border: 1px solid var(--navy-20);
  display: flex; align-items: center; justify-content: center;
  color: var(--t-accent); font-weight: 700;
}
.diag-option.selected .check { background: var(--t-accent); border-color: var(--navy); color: var(--navy); }

.diag-result {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 720px) { .diag-result { grid-template-columns: 1fr; } }
.diag-result__left h2 { margin-bottom: 20px; }
.diag-result__pillar {
  padding: 18px 0; border-top: 1px solid var(--navy-20);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
}
.diag-result__pillar:last-child { border-bottom: 1px solid var(--navy-20); }
.diag-result__pillar .label { font-family: var(--font-body); font-size: 14px; }
.diag-result__pillar .score {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; color: var(--navy);
}
.diag-result__right {
  background: var(--navy); color: var(--cream);
  padding: 32px;
  position: relative;
}
.diag-result__right .tag {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(236,233,223,0.6); margin-bottom: 24px;
}
.diag-result__right h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1.1; margin: 0 0 16px 0;
}
.diag-result__right p { font-size: 14px; line-height: 1.55; color: rgba(236,233,223,0.85); margin: 0 0 28px 0; }
.diag-email {
  display: grid; grid-template-columns: 1fr auto; gap: 0;
  border: 1px solid rgba(236,233,223,0.3);
}
.diag-email input {
  background: transparent; border: none; outline: none;
  padding: 14px 16px; font-family: var(--font-body); font-size: 14px;
  color: var(--cream);
}
.diag-email input::placeholder { color: rgba(236,233,223,0.5); }
.diag-email button {
  background: var(--t-accent); color: var(--navy); border: none;
  padding: 0 22px; font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  cursor: pointer;
}
.diag-email button:hover { background: var(--t-accent-deep); }

.diag-nav {
  display: flex; gap: 10px;
}
.diag-nav button {
  background: none; border: 1px solid var(--navy);
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  padding: 12px 20px; cursor: pointer;
  color: var(--navy);
}
.diag-nav button.primary { background: var(--navy); color: var(--cream); }
.diag-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.diag-nav button.primary:hover:not(:disabled) { background: var(--navy-90); }

/* Diagnostic — shared eyebrow, question number, screens */
.diag-eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy-50); margin: 0 0 18px 0;
}
.diag-body h2 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--navy);
}
.diag-qnum {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.72em; line-height: 1;
  color: var(--t-accent, var(--navy));
  margin-right: 14px;
  letter-spacing: 0.02em;
  vertical-align: 0.18em;
}

/* Intro screen */
.diag-intro__logo {
  display: block;
  width: auto;
  height: clamp(64px, 7vw, 96px);
  margin-bottom: 28px;
}
.diag-intro .diag-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.diag-eyebrow__dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--t-accent, var(--acid, #D7EC33));
  border-radius: 50%;
  flex-shrink: 0;
}
.diag-intro h2 { max-width: 22ch; }
.diag-intro h2 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--navy);
  background-image: linear-gradient(transparent 62%, var(--t-accent, var(--acid, #D7EC33)) 62%, var(--t-accent, var(--acid, #D7EC33)) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
}
.diag-intro__meta {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--navy-20);
  border-bottom: 1px solid var(--navy-20);
}
@media (max-width: 640px) {
  .diag-intro__meta { grid-template-columns: 1fr; }
  .diag-intro__meta li + li { border-left: 0; border-top: 1px solid var(--navy-20); }
}
.diag-intro__meta li {
  padding: 22px 24px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  color: var(--navy-70);
  letter-spacing: 0.02em;
}
.diag-intro__meta li + li {
  border-left: 1px solid var(--navy-20);
}
.diag-intro__meta li > span:first-child {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1;
  color: var(--t-accent, var(--acid, #D7EC33));
  -webkit-text-stroke: 0;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* Question — single choice (radio style) */
.diag-option--single {
  grid-template-columns: 28px 1fr;
  align-items: start;
  padding: 18px 20px;
}
.diag-option--single .radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--navy-50);
  display: inline-block; margin-top: 2px;
  position: relative;
  transition: border-color var(--dur-2) var(--ease-out);
}
.diag-option--single:hover .radio { border-color: var(--navy); }
.diag-option--single.selected { border-color: var(--navy); }
.diag-option--single.selected .radio {
  border-color: var(--navy);
  background: radial-gradient(circle, var(--navy) 0 5px, transparent 6px);
}
.diag-option--single .title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; line-height: 1.45; color: var(--navy);
}

/* Open question */
.diag-open { margin-top: 8px; }
.diag-open textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--navy-20);
  border-radius: 0;
  padding: 18px 20px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--navy);
  resize: vertical;
  min-height: 140px;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
.diag-open textarea:focus { border-color: var(--navy); }
.diag-open textarea::placeholder { color: var(--navy-50); }
.diag-open__note {
  margin-top: 18px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.55;
  color: var(--navy-70);
  max-width: 52ch;
}

/* Contact form */
.diag-contact h2 { max-width: 22ch; }
.diag-contact h2 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--navy);
  background-image: linear-gradient(transparent 62%, var(--t-accent, var(--acid, #D7EC33)) 62%, var(--t-accent, var(--acid, #D7EC33)) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 2px;
}
.diag-contact .lede strong {
  font-weight: 600;
  color: #788CE3;
}
.diag-contact__copy {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.diag-contact__copy .lede { margin: 0; }
.diag-contact__copy .lede:nth-child(1) {
  font-family: var(--font-serif); font-style: italic;
  color: var(--navy);
}
.diag-contact .diag-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.diag-field__dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--t-accent, var(--acid, #D7EC33));
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.diag-form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 640px) { .diag-form { grid-template-columns: 1fr; } }
.diag-field {
  display: flex; flex-direction: column; gap: 8px;
}
.diag-field span {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-70);
}
.diag-field input {
  background: var(--white);
  border: 1px solid var(--navy-20);
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--navy);
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
.diag-field input:focus { border-color: var(--navy); }
.diag-contact__fine {
  margin-top: 24px;
  font-family: var(--font-body); font-size: 12px; line-height: 1.5;
  color: var(--navy-50);
  max-width: 52ch;
}

/* Confirm */
.diag-confirm h2 { max-width: 20ch; }
.diag-confirm__sign {
  margin-top: 32px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-50);
}

/* ============================================================
   EDITORIAL GRID — navy variant (sections like 07 on navy ground)
   ============================================================ */
.section--navy .editorial-grid > .item { border-top: 1px solid rgba(236,233,223,0.3); }
.section--navy .editorial-grid > .item .num { color: var(--cream); }
.section--navy .editorial-grid > .item .label { color: rgba(236,233,223,0.6); }
.section--navy .editorial-grid > .item h3 { color: var(--cream); }
.section--navy .editorial-grid > .item p { color: rgba(236,233,223,0.7); }

/* ============================================================
   ANTES / DESPUÉS — section 05 contrast cards
   ============================================================ */
.ba-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}
.ba-card {
  padding: clamp(28px, 3.5vw, 56px);
  min-height: clamp(320px, 36vw, 440px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.ba-card--before {
  background: var(--cream-dark);
  border: 1px solid var(--navy-20);
  color: var(--navy);
}
.ba-card--before::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.15  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.5;
}
.ba-card--after {
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--navy);
}
.ba-badge {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative; z-index: 2;
}
.ba-badge .num {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em;
}
.ba-badge--before .num {
  border: 1.5px solid var(--navy); color: var(--navy); background: transparent;
}
.ba-badge--after .num {
  background: var(--t-accent); color: var(--navy);
}
.ba-badge .eyebrow {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; margin: 0; line-height: 1.2;
}
.ba-badge--before .eyebrow { color: var(--navy-50); }
.ba-badge--after .eyebrow { color: rgba(236,233,223,0.6); }
.ba-badge .state {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.01em;
  margin: 4px 0 0 0; display: inline-flex; align-items: center; gap: 8px;
}
.ba-badge--after .state .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--t-accent);
}
.ba-quote {
  position: relative; z-index: 2;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.9vw, 28px); line-height: 1.32;
}
.ba-card--before .ba-quote { color: var(--navy-70); }
.ba-card--after  .ba-quote { color: var(--cream); }

.ba-scribble {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: var(--cream);
  border: 1.5px solid var(--navy);
  padding: 8px 20px;
  font-family: var(--font-mark); font-weight: 600;
  color: var(--navy);
  font-size: clamp(22px, 2.4vw, 32px);
  z-index: 5;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--navy);
  pointer-events: none;
}
@media (max-width: 720px) {
  .ba-grid { grid-template-columns: 1fr; }
  .ba-scribble { display: none; }
}

/* ============================================================
   SECTION 01 — HERO QUESTIONS (full-bleed acid strip)
   ============================================================ */
.hero-questions-strip {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--acid);
  color: var(--navy);
  margin-top: clamp(40px, 5vw, 80px);
}
.hero-questions-strip__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 128px) clamp(24px, 5vw, 96px);
}
.hero-questions-strip__intro {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.024em;
  color: var(--navy);
  margin: 0 0 clamp(40px, 5vw, 72px) 0;
  max-width: 18ch;
}
.hero-questions-strip__intro em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.hero-questions-list > li {
  border-top-color: rgba(23, 36, 63, 0.3) !important;
  padding-block: clamp(20px, 2vw, 32px);
}
.hero-questions-list > li:last-child {
  border-bottom-color: rgba(23, 36, 63, 0.3) !important;
}
.hero-questions-list .body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.35;
  color: var(--navy);
}
.hero-questions-list .marker svg path {
  stroke: var(--navy) !important;
}

/* ============================================================
   SECTION 03 — PARA QUIÉN (4-card editorial grid on cream)
   ============================================================ */
.who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--navy);
  border-left: 1px solid var(--navy);
}
.who-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  background: var(--cream);
  position: relative;
  min-height: clamp(220px, 22vw, 320px);
}
.who-card__num {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--navy-50);
}
.who-card__body {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  align-self: end;
}
.who-card__body .mark-arrow {
  margin-top: 6px;
}
.who-card__body p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

/* ============================================================
   SECTION 05 — CTA FORM (embedded inside the final CTA card)
   ============================================================ */
.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(16px, 1.5vw, 24px);
  max-width: 760px;
  margin: 0 auto;
  align-items: end;
  text-align: left;
}
.cta-form__field {
  display: grid;
  gap: 6px;
}
.cta-form__field > span {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}
.cta-form__field > input {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  padding: 12px 0;
  outline: none;
  border-radius: 0;
}
.cta-form__field > input::placeholder {
  opacity: 0.45;
}
.cta-form__field > input:focus {
  border-bottom-color: var(--navy);
}
.cta-form__submit {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 18px 28px;
  cursor: pointer;
  border: 1.5px solid currentColor;
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
  white-space: nowrap;
  transition: background 200ms var(--ease-out);
}
.cta-form__submit:hover { background: var(--navy-90); }
.cta-form__submit .btn__arrow { margin-left: 8px; display: inline-block; }

/* Variant: on acid background — invert form trim */
.cta-form--on-acid .cta-form__field > input { color: var(--navy); }
.cta-form--on-acid .cta-form__field > input::placeholder { color: var(--navy); opacity: 0.45; }
.cta-form--on-acid .cta-form__field > span { color: var(--navy); }
.cta-form--on-acid .cta-form__submit {
  background: var(--navy); color: var(--cream); border-color: var(--navy);
}

/* Variant: on navy background */
.cta-form--on-navy .cta-form__field > input { color: var(--cream); border-bottom-color: rgba(236,233,223,0.4); }
.cta-form--on-navy .cta-form__field > input::placeholder { color: rgba(236,233,223,0.45); }
.cta-form--on-navy .cta-form__field > input:focus { border-bottom-color: var(--t-accent); }
.cta-form--on-navy .cta-form__field > span { color: rgba(236,233,223,0.65); }
.cta-form--on-navy .cta-form__submit {
  background: var(--t-accent); color: var(--navy); border-color: var(--t-accent);
}
.cta-form--on-navy .cta-form__submit:hover { background: var(--acid-deep); }

/* Variant: on cream background — already default; just tighten */
.cta-form--on-cream .cta-form__field > input { color: var(--navy); }
.cta-form--on-cream .cta-form__field > span { color: var(--navy-70); }

/* Submitted state */
.cta-form--done {
  display: block;
  text-align: center;
  padding: clamp(24px, 3vw, 40px) 0;
}
.cta-form__done-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 36px);
  margin: 0 0 8px 0;
}
.cta-form__done-body {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin: 0;
}

/* ============================================================
   SECTION 03 — REENCUADRE (legacy — kept for reference; section removed)
   ============================================================ */
.s03-beat {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) 1.68fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.s03-beat--bordered {
  padding-top: clamp(36px, 4.5vw, 64px);
  border-top: 1px solid var(--navy-20);
}
.s03-beat > .eyebrow-tag {
  margin-top: 6px;
  text-wrap: balance;
}
/* The "trap" — struck-through display words. Acid stroke does the rejecting. */
.s03-trap-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--navy-50);
  text-decoration: line-through;
  text-decoration-color: var(--acid-deep);
  text-decoration-thickness: clamp(3px, 0.35vw, 6px);
  text-decoration-skip-ink: none;
  text-underline-offset: 0;
}
/* The real-problem list — bigger than hairline-list body, but still scannable */
.s03-real-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.s03-real-list > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: baseline;
  padding-block: clamp(16px, 1.6vw, 24px);
  border-top: 1px solid var(--navy-20);
}
.s03-real-list > li:first-child { border-top: 0; padding-top: 0; }
.s03-real-list .marker {
  display: flex; align-items: center;
  padding-top: 4px;
}
.s03-real-list .body {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.s03-real-list .body em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy-70);
}

/* ============================================================
   SECTION 02 — EDITORIAL LAYOUT (full-bleed acid strip + pullquote)
   ============================================================ */
/* Full-bleed acid strip — breaks out of container and section padding */
.s02-acid-strip {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--acid);
  color: var(--navy);
}
.s02-acid-strip__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) clamp(24px, 5vw, 96px);
}
/* Hairline list overrides when on acid background */
.s02-acid-list > li {
  border-top-color: rgba(23, 36, 63, 0.25) !important;
  padding-block: clamp(14px, 1.4vw, 22px);
}
.s02-acid-list > li:last-child {
  border-bottom-color: rgba(23, 36, 63, 0.25) !important;
}
.s02-acid-list .marker svg,
.s02-acid-list .marker svg path {
  color: var(--navy);
  stroke: var(--navy) !important;
}

/* Pull-quote bracket frame for the closing line */
.s02-pullquote {
  background: rgba(236, 233, 223, 0.03);
}
.photo-overlay-card {
  position: absolute;
  right: clamp(-72px, -4vw, -28px);
  bottom: clamp(24px, 3vw, 48px);
  width: clamp(280px, 28vw, 380px);
  background: var(--cream);
  border: 1.5px solid var(--navy);
  padding: clamp(20px, 1.8vw, 28px) clamp(22px, 2vw, 32px);
  box-shadow: 8px 8px 0 var(--navy);
  z-index: 3;
}
.photo-overlay-card__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--navy);
}
.photo-overlay-card__body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================
   LOGO STAMP — section 10 editorial logo card
   ============================================================ */
.logo-stamp {
  display: inline-block;
  background: var(--cream);
  border: 1.5px solid var(--navy);
  padding: clamp(28px, 3vw, 44px) clamp(40px, 4.5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
  box-shadow: 8px 8px 0 var(--navy);
  position: relative;
}
.logo-stamp img {
  display: block;
  height: clamp(72px, 9vw, 132px);
  width: auto;
  max-width: 100%;
}

/* ============================================================
   TWEAK-DRIVEN VISIBILITY
   ============================================================ */
body[data-show-folio="no"] .folio,
body[data-show-folio="no"] .section-folio { display: none; }
body[data-show-brackets="no"] .bracket-corner { display: none; }

/* ============================================================
   RESPONSIVE NUDGES
   ============================================================ */
@media (max-width: 880px) {
  .nav__links { display: none; }
}
@media (max-width: 980px) {
  /* Collapse all 2-col grids on tablet */
  section [style*="grid-template-columns: 1fr auto 1fr"],
  section [style*="grid-template-columns: 1.15fr 0.85fr"],
  section [style*="grid-template-columns: 1fr 1.2fr"],
  section [style*="grid-template-columns: 1.1fr 0.9fr"],
  section [style*="grid-template-columns: 1.2fr 1fr"],
  section [style*="grid-template-columns: 1fr 0.9fr"],
  section [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .display-statement { font-size: clamp(32px, 7vw, 56px) !important; }
  .display-caps { font-size: clamp(40px, 9vw, 80px) !important; }
}

/* ============================================================
   SECTION 01 — Closing line (after questions strip)
   ============================================================ */
.hero-closing {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(24px, 3vw, 48px);
}
.hero-closing__photo {
  position: relative;
  padding: clamp(16px, 2vw, 32px);
  overflow: visible;
}
.hero-closing__photo .photo {
  aspect-ratio: 4/5;
  width: 100%;
  position: relative;
  overflow: visible;
}
.hero-closing__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0;
  max-width: 30ch;
}
.hero-closing__text em {
  font-style: italic;
  color: var(--navy-70);
}
@media (max-width: 880px) {
  .hero-closing { grid-template-columns: 1fr; }
  .hero-closing__text { max-width: none; }
}

/* ============================================================
   SECTION 02 — eyebrow lede + companion paragraph
   ============================================================ */
.s02-eyebrow-lede {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(236,233,223,0.78);
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 64ch;
}

/* Section 02 — give underlines and highlights more breathing room
   so they don't sit flush against letters (hard to read on navy). */
.section--navy .mark-underline {
  padding-top: 0.18em;
  padding-bottom: 0.36em;
}
.section--navy .mark-underline > svg {
  bottom: -6px;
}
.section--navy .mark-highlight {
  padding: 0.18em 0.2em 0.22em;
  background-size: 100% 78%;
  background-position: 0 92%;
}

/* Section 02 — "Creamos FCL" handwritten marker + looped arrow */
.s02-creamos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
}
.s02-creamos__marker {
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: 0.95;
  color: var(--t-accent);
  letter-spacing: -0.005em;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.s02-creamos__arrow {
  width: clamp(140px, 14vw, 220px);
  height: auto;
  margin-top: -8px;
  margin-left: clamp(40px, 6vw, 80px);
  overflow: visible;
}
.s02-creamos__arrow path {
  stroke: var(--t-accent);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.55 + 0.45 * var(--t-scribble));
}

/* Section 02 — companion column rebuild */
.s02-companion__marker {
  display: block;
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1;
  color: var(--t-accent);
  transform: rotate(-2deg);
  transform-origin: left center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.s02-companion__lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.32;
  color: var(--cream);
  margin: 0 0 clamp(32px, 4vw, 52px);
  max-width: 36ch;
  letter-spacing: -0.005em;
}
.s02-companion__lead em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.s02-pillars {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(236,233,223,0.25);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.s02-pillar {
  padding: clamp(20px, 2.5vw, 32px) 0;
  border-bottom: 1px solid rgba(236,233,223,0.25);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: baseline;
}
@media (max-width: 640px) {
  .s02-pillar { grid-template-columns: 1fr; gap: 10px; }
}
.s02-pillar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0;
}
.s02-pillar__title .mark-highlight {
  color: var(--navy);
}
.s02-pillar__body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(236,233,223,0.82);
  margin: 0;
}
.s02-companion__close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.3;
  color: var(--cream);
  margin: 0;
  max-width: 42ch;
  letter-spacing: -0.005em;
}
.s02-companion__close em {
  font-style: italic;
  color: var(--cream);
}

/* ============================================================
   SECTION 02b — DIAGNOSTIC LAUNCH (3 stage cards)
   ============================================================ */
.diag-launch-bridge {
  position: relative;
  background: var(--acid);
  color: var(--navy);
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(28px, 3.6vw, 64px);
  row-gap: clamp(20px, 2vw, 32px);
  align-items: start;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px);
  margin: 0 0 clamp(80px, 10vw, 128px);
  max-width: 100%;
  width: 100%;
}
.diag-launch-bridge__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 14vw, 200px);
  line-height: 0.65;
  color: var(--navy);
  margin: 0;
  align-self: start;
  grid-row: 1;
  grid-column: 1;
  user-select: none;
}
.diag-launch-bridge__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0;
  grid-row: 1;
  grid-column: 2;
  padding-top: clamp(20px, 2.4vw, 36px);
  text-wrap: balance;
}
.diag-launch-bridge__body em {
  font-style: italic;
  font-family: var(--font-serif);
  background: var(--navy);
  color: var(--acid);
  padding: 0.04em 0.28em 0.08em;
  margin: 0 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.diag-launch-bridge__credit {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(10px, 1.2vw, 18px);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--navy);
  text-align: right;
  padding-top: clamp(28px, 3.2vw, 48px);
  white-space: nowrap;
}
.diag-launch-bridge__rule {
  display: block;
  width: clamp(40px, 5vw, 72px);
  height: 2px;
  background: var(--navy);
  flex-shrink: 0;
}
.diag-launch-bridge__logo {
  display: block;
  width: clamp(56px, 5vw, 80px);
  height: auto;
  margin-bottom: clamp(4px, 0.6vw, 8px);
}
@media (max-width: 880px) {
  .diag-launch-bridge {
    grid-template-columns: auto 1fr;
  }
  .diag-launch-bridge__credit {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    align-self: start;
    text-align: left;
    padding-top: 0;
  }
}
.diag-launch-header {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(72px, 9vw, 120px);
}
.diag-launch-header__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.4;
  color: var(--navy-70);
  max-width: 40ch;
  margin: 0;
}
.diag-launch-header__right {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
  padding-bottom: clamp(8px, 1vw, 16px);
}
.diag-launch-header__rule {
  display: block;
  width: clamp(48px, 6vw, 80px);
  height: 2px;
  background: var(--navy);
}
/* Section--navy overrides */
.section--navy .diag-launch-header__rule { background: var(--cream); }
.section--navy .diag-launch-header__lede { color: rgba(236,233,223,0.78); }
.section--navy .diag-launch-choice__rule { background: rgba(236,233,223,0.4); }
.section--navy .diag-launch-choice__count { color: rgba(236,233,223,0.65); }
.section--navy .diag-stage-loop .mark-loop--navy svg path { stroke: var(--cream); }
@media (max-width: 880px) {
  .diag-launch-header { grid-template-columns: 1fr; }
}

.diag-launch-choice {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.diag-launch-choice__rule {
  flex: 1;
  height: 1px;
  background: var(--navy);
}
.diag-launch-choice__count {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-70);
}

.diag-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 880px) {
  .diag-stage-grid { grid-template-columns: 1fr; }
}

.diag-stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--r-0);
  padding: clamp(28px, 3vw, 44px);
  cursor: pointer;
  font: inherit;
  color: var(--navy);
  gap: clamp(24px, 2.5vw, 36px);
  min-height: clamp(340px, 32vw, 440px);
  transition: background 280ms var(--ease-edit), transform 280ms var(--ease-edit), box-shadow 280ms var(--ease-edit);
}
.diag-stage-card:hover {
  background: var(--t-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.diag-stage-card:active {
  transform: translateY(-1px);
}
.diag-stage-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.diag-stage-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.diag-stage-card__arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 240ms var(--ease-edit), transform 240ms var(--ease-edit);
}
.diag-stage-card__arrow svg { width: 40px; height: 22px; }
.diag-stage-card__arrow svg path { stroke: var(--navy) !important; }
.diag-stage-card:hover .diag-stage-card__arrow {
  opacity: 1;
  transform: translateX(0);
}
.diag-stage-card__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.diag-stage-card__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 36px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0;
}
.diag-stage-card__sub {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-70);
  margin: 0;
}
.diag-stage-card__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.4;
  color: var(--navy);
  margin: 8px 0 0;
}
.diag-stage-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--navy);
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 2vw, 24px);
  border-radius: var(--r-pill);
  transition: background 240ms var(--ease-edit);
  margin-top: clamp(12px, 1.4vw, 20px);
}
.diag-stage-card__cta-arrow {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  transition: transform 240ms var(--ease-edit);
}
.diag-stage-card:hover .diag-stage-card__cta {
  background: var(--navy-90);
}
.diag-stage-card:hover .diag-stage-card__cta-arrow {
  transform: translateX(4px);
}

/* ============================================================
   HERO CLOSING — arrow pointing UP to questions
   ============================================================ */
.hero-closing__text-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 40px);
}
.hero-closing__arrow-up {
  width: clamp(100px, 9vw, 150px);
  height: clamp(220px, 22vw, 360px);
  overflow: visible;
  flex-shrink: 0;
  margin-top: clamp(-120px, -14vw, -200px);
  margin-left: clamp(24px, 4vw, 64px);
}
.hero-closing__arrow-up path {
  stroke: var(--t-accent);
  stroke-width: 3.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.6 + 0.4 * var(--t-scribble));
}
@media (max-width: 880px) {
  .hero-closing__arrow-up { display: none; }
}

/* ============================================================
   SECTION 02 — companion close wrap (loop next to closing line)
   ============================================================ */
.s02-companion__close-wrap {
  position: relative;
  margin-top: clamp(28px, 3vw, 40px);
}

/* ============================================================
   SECTION 02b — diagnostic stage loop (below cards)
   ============================================================ */
.diag-stage-loop {
  position: relative;
  display: flex;
  justify-content: center;
}
.diag-stage-loop .mark-loop {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

/* ============================================================
   SECTION 03 — PARA QUIÉN ES (3 layout variants)
   ============================================================ */
.who-editorial {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) {
  .who-editorial { grid-template-columns: 1fr; }
}
.who-editorial__photo {
  position: relative;
  padding: clamp(16px, 2vw, 32px);
}
.who-editorial__photo .photo {
  position: relative;
  width: 100%;
}
.who-editorial__headline {
  margin: 0 0 clamp(40px, 5vw, 64px);
  max-width: 18ch;
}
.who-editorial__loop-arrow {
  display: block;
  width: clamp(100px, 9vw, 140px);
  height: clamp(130px, 12vw, 180px);
  margin: clamp(-24px, -2vw, -16px) 0 clamp(28px, 3vw, 40px) clamp(8px, 1vw, 16px);
  overflow: visible;
}
.who-editorial__loop-arrow path {
  stroke: var(--t-accent);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.6 + 0.4 * var(--t-scribble));
}
.who-editorial__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.who-editorial__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--navy-20);
}
.who-editorial__item:last-child {
  border-bottom: 1px solid var(--navy-20);
}
.who-editorial__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.04em;
  color: var(--navy-70);
  line-height: 1;
}
.who-editorial__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Variant B — manifesto */
.who-manifesto__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 clamp(56px, 7vw, 96px);
}
.who-manifesto__headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--navy-70);
}
.who-manifesto__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 1000px) { .who-manifesto__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .who-manifesto__grid { grid-template-columns: 1fr; } }
.who-manifesto__item {
  padding-top: clamp(24px, 2.5vw, 36px);
  border-top: 2px solid var(--navy);
}
.who-manifesto__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.who-manifesto__short {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 10px;
}
.who-manifesto__body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: var(--navy-70);
  margin: 0;
}

/* Section 03 closing */
.who-closing {
  margin-top: clamp(80px, 10vw, 140px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
  padding-top: 0;
  border-top: none;
}
.who-closing__rule {
  display: block;
  width: clamp(48px, 5vw, 72px);
  height: 2px;
  background: var(--navy);
  margin-top: clamp(28px, 3vw, 44px);
  flex-shrink: 0;
}
.who-closing__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--navy);
  max-width: 22ch;
  margin: 0;
}
@media (max-width: 720px) {
  .who-closing { grid-template-columns: 1fr; }
  .who-closing__rule { margin-top: 0; }
  .who-closing__text br { display: none; }
}

/* ============================================================
   SECTION 04 — "Recibirás claridad sobre" handwritten marker
   ============================================================ */
.s04-recibiras-marker {
  display: block;
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  color: var(--t-accent);
  transform: rotate(-2deg);
  transform-origin: left center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* ============================================================
   BRAND WORDMARK — HTML/CSS lockup, themeable
   ============================================================ */
.wordmark-lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 1 / 1;
  padding: calc(var(--wm-base) * 0.42) calc(var(--wm-base) * 0.32);
  padding: clamp(18px, 2vw, 32px) clamp(22px, 2.4vw, 40px);
  --wm-fg: var(--navy);
  --wm-accent: var(--t-accent);
  --wm-bracket: var(--navy);
}
.wordmark-lockup--navy   { --wm-fg: var(--navy);     --wm-accent: var(--t-accent); --wm-bracket: var(--t-accent); }
.wordmark-lockup--blue   { --wm-fg: var(--blue-med); --wm-accent: var(--blue-med); --wm-bracket: var(--blue-med); }
.wordmark-lockup--cream  { --wm-fg: var(--cream);    --wm-accent: var(--t-accent); --wm-bracket: var(--t-accent); }

.wordmark-lockup__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.86;
  font-family: "Open Sauce One", "Open Sauce Sans", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--wm-fg);
}
.wordmark-lockup__top,
.wordmark-lockup__bottom {
  font-size: calc(var(--wm-base) * 0.32);
  letter-spacing: 0.02em;
}
.wordmark-lockup__mid {
  font-size: var(--wm-base);
  text-transform: lowercase;
  color: var(--wm-accent);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.wordmark-lockup__dot {
  color: var(--wm-accent);
}

.wordmark-lockup--sm { --wm-base: clamp(28px, 3vw, 44px); }
.wordmark-lockup--md { --wm-base: clamp(40px, 4.5vw, 72px); }
.wordmark-lockup--lg { --wm-base: clamp(64px, 7vw, 120px); }

.wordmark-lockup__corner {
  position: absolute;
  width: clamp(22px, 2.4vw, 36px);
  height: clamp(22px, 2.4vw, 36px);
  border: 2px solid var(--wm-bracket);
  pointer-events: none;
}
.wordmark-lockup__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.wordmark-lockup__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.wordmark-lockup__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.wordmark-lockup__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ============================================================
   SECTION 05 — FINAL CTA (acid hero + cream community)
   ============================================================ */
.cta-acid {
  position: relative;
  overflow: hidden;
}
.cta-wordmark {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.cta-wordmark__img {
  display: block;
  width: clamp(120px, 11vw, 180px);
  height: auto;
}

.cta-primary-button {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  background: var(--navy);
  color: var(--cream);
  border: 0;
  border-radius: var(--r-pill);
  padding: clamp(20px, 2.2vw, 28px) clamp(32px, 3.5vw, 48px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 240ms var(--ease-edit), transform 240ms var(--ease-edit), box-shadow 240ms var(--ease-edit);
  box-shadow: 0 1px 0 var(--navy-90);
}
.cta-primary-button:hover {
  background: var(--navy-90);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 36, 63, 0.18);
}
.cta-primary-button:active {
  transform: translateY(0);
}
.cta-primary-button__arrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  transition: transform 240ms var(--ease-edit);
}
.cta-primary-button:hover .cta-primary-button__arrow {
  transform: translateX(6px);
}
.cta-primary-button__note {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  color: var(--navy-70);
  margin: clamp(18px, 2vw, 24px) auto 0;
  letter-spacing: 0.02em;
}

/* Community sub-block — cream panel inside acid section */
.community-block {
  background: var(--cream);
  color: var(--navy);
  padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 96px);
  border-top: 1px solid var(--navy);
}
.community-block__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) {
  .community-block__grid { grid-template-columns: 1fr; }
}
.community-block__photo {
  position: relative;
  padding: clamp(16px, 2vw, 32px);
}
.community-block__photo .photo {
  aspect-ratio: 4/5;
  width: 100%;
  position: relative;
}
.community-block__copy {
  text-align: left;
}
.community-block__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: clamp(16px, 2vw, 24px) 0 clamp(20px, 2.4vw, 32px);
  max-width: 18ch;
}
.community-block__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--navy-70);
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 38ch;
}

.community-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 520px;
}
@media (max-width: 540px) {
  .community-form { grid-template-columns: 1fr; }
}
.community-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.community-form__field span {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-70);
}
.community-form__field input {
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--r-2);
  padding: 14px 16px;
  color: var(--navy);
  transition: border-color 200ms var(--ease-edit);
}
.community-form__field input:focus {
  outline: none;
  border-color: var(--blue-med);
  box-shadow: 0 0 0 3px rgba(120, 140, 227, 0.18);
}
.community-form__submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--navy);
  color: var(--cream);
  border: 0;
  border-radius: var(--r-pill);
  padding: 16px 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 240ms var(--ease-edit);
  margin-top: 8px;
}
.community-form__submit:hover {
  background: var(--navy-90);
}
.community-form__submit-arrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  transition: transform 240ms var(--ease-edit);
}
.community-form__submit:hover .community-form__submit-arrow {
  transform: translateX(4px);
}
.community-form--done {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--navy);
  background: var(--white);
  border-radius: var(--r-2);
  max-width: 520px;
}
.community-form__done-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--navy);
  margin: 0 0 8px;
}
.community-form__done-body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy-70);
  margin: 0;
}

/* ============================================================
   FOOTER — simplified
   ============================================================ */
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  padding-bottom: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: flex-start;
}
.footer__brand-img {
  display: block;
  width: clamp(160px, 14vw, 210px);
  height: auto;
  margin: 0;
}
.footer__brand-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--cream);
  max-width: 30ch;
  line-height: 1.35;
  margin: 0;
}
.footer__col-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 233, 223, 0.55);
  margin: 0 0 20px;
}
.footer__contact,
.footer__social {
  display: grid;
  gap: 20px;
  align-content: start;
}