/* ---------- Self-hosted fonts (30 sep 2026) ----------
   Fraunces (opsz 9..144, wght 300..600, plus italic 300..500) and Inter (wght 400..500), served from
   assets/fonts instead of Google Fonts, so no visitor data goes to Google. The files are the exact variable
   woff2 files Google served for the same request, so rendering is identical. Both families are SIL Open Font
   License 1.1. Only the latin and latin-ext subsets are included (English and Spanish); the unicode-range
   values are Google's, so the browser downloads only the subsets a page actually uses. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FinanzaX web, static visual prototype (EN root). Source of truth: docs/FinanzaX-Web-Doc00.md
   Contrast measured 27 sep 2026: gold #C8992A on #0C0C0F = 7.48:1 (text OK); on #F2EDE4 = 2.24:1 (never text on ivory).
   #0E7C4A never used as text (3.72:1 on black, FXD §2); green text uses #3FB27A (7.31:1 on black). */

@view-transition { navigation: auto; }

:root {
  --ink: #0C0C0F;
  --ink-2: #131318;
  --ink-3: #1A1A22;
  --ivory: #F2EDE4;
  --ivory-dim: rgba(242, 237, 228, .62);
  --ivory-faint: rgba(242, 237, 228, .38); /* decorative or large text only (3.19:1): never small text */
  /* Single accessible colour for ALL small text: notices, fine print, form errors, notes, labels (TICKET-018).
     .55 on #0C0C0F = 5.52:1, on #131318 cards = 5.46:1 (WCAG AA 4.5:1). */
  --text-small: rgba(242, 237, 228, .55);
  /* Same role on ivory sections: #0C0C0F at .64 on #F2EDE4 = 5.62:1. */
  --text-small-on-ivory: rgba(12, 12, 15, .64);
  --line: rgba(242, 237, 228, .10);
  --line-strong: rgba(242, 237, 228, .18);
  --gold: #C8992A;
  --emerald: #0E7C4A;
  --green-text: #3FB27A;
  --ink-on-ivory: #0C0C0F;
  --ink-on-ivory-dim: var(--text-small-on-ivory);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 200ms;
  --t-mid: 320ms;
  --t-slow: 400ms;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem; /* TICKET-065: follows the reader's browser text size */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.serif, h1, h2, h3, .display {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
}
.display { font-size: clamp(3rem, 9.2vw, 8.4rem); line-height: .98; letter-spacing: -.035em; font-weight: 350; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 350; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.06; font-weight: 350; }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; font-weight: 400; }
h1 em, h2 em, .display em { font-style: italic; font-weight: 300; }
p { margin: 0; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ivory-dim); max-width: 34em; line-height: 1.7; }
.body-dim { color: var(--ivory-dim); }
.eyebrow {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: var(--text-small); display: inline-flex; align-items: center; gap: .8em;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); }
.eyebrow.no-rule::before { display: none; }
.gold { color: var(--gold); }
.green { color: var(--green-text); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--gold); --fg: var(--ink);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .92em 1.5em; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-size: .94rem; font-weight: 500; letter-spacing: .005em;
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--t-mid) var(--ease); }
.btn:hover { box-shadow: 0 10px 30px -12px rgba(200, 153, 42, .55); transform: translateY(-1px); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-ghost { --bg: transparent; --fg: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ivory-dim); }
.btn-sm { padding: .62em 1.1em; font-size: .84rem; }
.link-arrow { display: inline-flex; gap: .5em; align-items: center; font-size: .94rem; color: var(--ivory); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color var(--t-mid) var(--ease); }
.link-arrow:hover { border-color: var(--gold); }
.link-arrow .arrow { transition: transform var(--t-mid) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), backdrop-filter var(--t-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.mega-open { background: rgba(12, 12, 15, .97) !important; }
.site-header.is-scrolled, .site-header.mega-open {
  background: rgba(12, 12, 15, .72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; view-transition-name: fx-brand; }
.brand img { width: 26px; height: auto; }
.brand span { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -.01em; font-variation-settings: "SOFT" 0, "WONK" 0; }
.primary-nav { position: relative; display: flex; gap: 2px; margin-left: 14px; }
.nav-pill {
  position: absolute; top: 50%; left: 0; height: 34px; width: 0;
  transform: translate3d(var(--x, 0), -50%, 0); width: var(--w, 0);
  background: rgba(242, 237, 228, .07); border-radius: 999px; opacity: 0;
  transition: transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
  pointer-events: none;
}
.primary-nav.has-pill .nav-pill { opacity: 1; }
.nav-item { position: relative; z-index: 1; font-size: .86rem; color: var(--ivory-dim); padding: 7px 14px; border-radius: 999px; transition: color var(--t-fast) var(--ease); }
.nav-item:hover, .nav-item.is-active, .nav-item[aria-expanded="true"] { color: var(--ivory); }
.nav-item.is-current::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 8px; font-size: .74rem; letter-spacing: .14em; color: var(--text-small); }
.lang a[aria-current="true"] { color: var(--ivory); }
.lang .soon { cursor: default; position: relative; }
.lang .soon:hover::after {
  content: attr(data-tip); position: absolute; top: 150%; right: -10px; white-space: nowrap;
  background: var(--ink-3); color: var(--ivory-dim); letter-spacing: .02em; font-size: .72rem;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
}
.index-btn { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-dim); transition: color var(--t-fast) var(--ease); }
.index-btn:hover { color: var(--ivory); }
.index-btn .bars { width: 18px; height: 8px; position: relative; }
.index-btn .bars::before, .index-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform var(--t-mid) var(--ease), right var(--t-mid) var(--ease); }
.index-btn .bars::before { top: 0; }
.index-btn .bars::after { bottom: 0; right: 6px; }
.index-btn:hover .bars::after { right: 0; }

/* ---------- Mega menu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden; height: 0;
  transition: height var(--t-slow) var(--ease);
}
.mega-panel {
  position: absolute; inset: 0 0 auto 0; padding: 40px 0 48px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mega-panel.is-open { opacity: 1; transform: none; pointer-events: auto; transition-delay: 60ms; }
.mega-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.mega-copy .eyebrow { margin-bottom: 18px; }
.mega-copy h3 { font-size: 2rem; margin-bottom: 12px; }
.mega-copy p { color: var(--ivory-dim); max-width: 26em; margin-bottom: 22px; }
.mega-links { display: grid; gap: 10px; }
.mega-links a { color: var(--ivory-dim); font-size: .92rem; transition: color var(--t-fast) var(--ease); }
.mega-links a:hover { color: var(--ivory); }
.mega-visual { border: 1px solid var(--line); border-radius: 18px; height: 210px; background: var(--ink-2); position: relative; overflow: hidden; display: grid; place-items: center; }
.mega-visual .soon-tag { position: absolute; top: 14px; right: 14px; }

/* ---------- Index overlay (expandable menu) ---------- */
.index-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--ink);
  clip-path: circle(0 at calc(100% - 60px) 34px);
  transition: clip-path 520ms var(--ease), visibility 0s linear 520ms;
  visibility: hidden; overflow-y: auto;
}
.index-overlay.is-open { clip-path: circle(150% at calc(100% - 60px) 34px); visibility: visible; transition: clip-path 620ms var(--ease), visibility 0s; }
.index-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.index-close { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-dim); display: inline-flex; gap: 10px; align-items: center; }
.index-close:hover { color: var(--ivory); }
.index-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; padding: 5vh 0 8vh; }
.index-list { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.index-list li { border-top: 1px solid var(--line); }
.index-list li:last-child { border-bottom: 1px solid var(--line); }
.index-list a {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 12px;
  padding: 14px 0; font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.1;
  color: var(--ivory-faint); letter-spacing: -.02em; font-variation-settings: "SOFT" 0, "WONK" 0;
  transition: color var(--t-mid) var(--ease), padding var(--t-mid) var(--ease);
  opacity: 0; transform: translateY(14px);
}
.index-overlay.is-open .index-list a { opacity: 1; transform: none; transition: color var(--t-mid) var(--ease), padding var(--t-mid) var(--ease), opacity 500ms var(--ease) calc(160ms + var(--i) * 50ms), transform 500ms var(--ease) calc(160ms + var(--i) * 50ms); }
.index-list a .n { font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; color: var(--text-small); }
.index-list a .tag { font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-small); }
.index-list a:hover, .index-list a:focus-visible { color: var(--ivory); padding-left: 10px; }
.index-list a:hover .n { color: var(--gold); }
.index-aside { align-self: end; }
.index-preview { min-height: 7.5em; }
.index-preview h4 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 8px; }
.index-preview p { color: var(--ivory-dim); }
.index-foot { margin-top: 40px; font-size: .82rem; color: var(--text-small); display: grid; gap: 6px; }

/* ---------- Tags / badges ---------- */
.soon-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--ivory-dim); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
}
.soon-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.sample-tag { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-small); border: 1px dashed var(--line-strong); padding: 5px 10px; border-radius: 999px; }
.verified {
  display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .04em;
  color: var(--green-text); padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(14, 124, 74, .14); border: 1px solid rgba(14, 124, 74, .45);
}
.verified svg { width: 14px; height: 14px; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: clamp(110px, 16vh, 190px) 0; }
.section-tight { padding: clamp(80px, 11vh, 120px) 0; }
.section-head { display: grid; gap: 22px; margin-bottom: clamp(56px, 8vh, 88px); max-width: 780px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.ivory { background: var(--ivory); color: var(--ink-on-ivory); }
.ivory .lead, .ivory .body-dim { color: var(--ink-on-ivory-dim); }
.ivory .eyebrow { color: var(--ink-on-ivory-dim); }
.ivory .soon-tag { color: var(--ink-on-ivory-dim); border-color: rgba(12, 12, 15, .18); }
.ivory .btn-ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(12, 12, 15, .25); }
.ivory .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ivory .link-arrow { color: var(--ink); border-color: rgba(12, 12, 15, .25); }

/* ---------- Hero ---------- */
.hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding: 60px 0 90px; overflow: hidden; }
.hero .display span { display: block; }
.hero .display .l3 { color: var(--gold); }
.hero-arc { position: absolute; right: -24vw; top: 50%; width: min(74vw, 960px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; opacity: .9; }
.hero-arc circle { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-arc .arc-2 { stroke: var(--line); stroke-width: 1; }
.hero-content { position: relative; z-index: 1; }
.hero-sub { margin-top: 44px; display: grid; gap: 34px; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-motto { position: absolute; bottom: 34px; left: 0; right: 0; }
.hero-motto .wrap { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-small); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { width: 1px; height: 28px; background: linear-gradient(var(--gold), transparent); display: block; animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Story (sticky storytelling) ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); }
.story-sticky { position: sticky; top: calc(var(--header-h) + 8vh); align-self: start; }
.story-steps { display: grid; gap: 34vh; padding: 10vh 0 18vh; }
.story-step { transition: opacity var(--t-slow) var(--ease); }
.js .story-step { opacity: .22; }
.js .story-step.is-active { opacity: 1; }
.stat { display: grid; gap: 10px; }
.stat .num { font-family: var(--serif); font-size: clamp(4.6rem, 10vw, 8.5rem); line-height: .9; letter-spacing: -.04em; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; }
.stat .num sup { font-size: .32em; vertical-align: top; position: relative; top: .4em; margin-left: .06em; color: var(--gold); }
.stat .label { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-small); }
.stat p { color: var(--ivory-dim); max-width: 26em; margin-top: 8px; }

/* ---------- Mini flat wheel (shared element) ---------- */
.mini-wheel { width: min(100%, 420px); aspect-ratio: 1; view-transition-name: xray-wheel; }
.mini-wheel svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Pillars row ---------- */
.pillars { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.pillar { padding: 26px 18px 0 0; border-right: 1px solid var(--line); min-height: 150px; display: grid; align-content: start; gap: 14px; }
.pillar + .pillar { padding-left: 18px; }
.pillar:last-child { border-right: 0; }
.pillar .n { font-size: .72rem; letter-spacing: .16em; color: var(--text-small); }
.pillar h3 { font-size: 1.28rem; }

/* ---------- Numbered steps (Wolfpack style) ---------- */
.steps { display: grid; gap: 0; counter-reset: s; }
.step { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 40px; padding: 48px 0; border-top: 1px solid var(--line); position: relative; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .step-n { font-family: var(--serif); font-size: clamp(3.6rem, 7vw, 6rem); line-height: .9; font-weight: 300; letter-spacing: -.04em; color: var(--ivory-faint); font-variation-settings: "SOFT" 0, "WONK" 0; transition: color var(--t-slow) var(--ease); }
.step.is-visible .step-n, .step:hover .step-n { color: var(--gold); }
.step .step-body { display: grid; gap: 12px; max-width: 34em; align-content: start; padding-top: 10px; }
.step .step-body p { color: var(--ivory-dim); }
.step::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold); transition: width 900ms var(--ease); }
.step.is-visible::before { width: 100%; }

/* ---------- Cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  position: relative; border-radius: 22px; padding: 30px; min-height: 360px;
  display: flex; flex-direction: column; gap: 18px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  transition: transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
  isolation: isolate;
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 153, 42, .10), transparent 60%);
  transition: opacity var(--t-slow) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card:hover::after { opacity: 1; }
.card .card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.card .card-art { height: 150px; border-radius: 14px; background: var(--ink-3); position: relative; overflow: hidden; }
.ivory .card { background: #fff; border-color: rgba(12, 12, 15, .08); }
.ivory .card:hover { border-color: rgba(12, 12, 15, .18); }
.ivory .card::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 153, 42, .12), transparent 60%); }
.ivory .card .card-art { background: #EAE3D6; }

/* Ghost art: product silhouettes without real products */
.ghost-sheet { position: absolute; inset: 22px 26px; display: grid; grid-template-rows: 14px repeat(5, 1fr); gap: 6px; }
.ghost-sheet i { display: block; border-radius: 3px; background: rgba(12, 12, 15, .07); }
.ghost-sheet i:first-child { background: var(--gold); opacity: .55; width: 40%; }
.ghost-books { position: absolute; inset: 20px 0 0; display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.ghost-books i { display: block; width: 58px; border-radius: 3px 3px 0 0; background: rgba(12, 12, 15, .09); }
.ghost-books i:nth-child(1) { height: 78%; } .ghost-books i:nth-child(2) { height: 92%; background: var(--ink); } .ghost-books i:nth-child(3) { height: 70%; }
.ghost-books i:nth-child(2)::after { content: ""; display: block; margin: 16px auto 0; width: 60%; height: 1px; background: var(--gold); }
.ghost-planner { position: absolute; inset: 18px 30%; background: var(--ink); border-radius: 4px 10px 10px 4px; box-shadow: 8px 8px 0 -2px rgba(12, 12, 15, .08); }
.ghost-planner::before { content: ""; position: absolute; left: 14px; right: 14px; top: 38%; height: 1px; background: var(--gold); }
.ghost-planner::after { content: ""; position: absolute; left: 14px; width: 40%; top: calc(38% + 10px); height: 1px; background: rgba(242, 237, 228, .35); }

/* ---------- Articles ---------- */
.article-card { min-height: 0; padding: 0; gap: 0; }
.article-card .card-art { height: 200px; border-radius: 0; }
.article-card .article-body { padding: 26px 28px 30px; display: grid; gap: 14px; }
.article-card h3 { font-size: 1.42rem; line-height: 1.22; }
.article-meta { display: flex; gap: 14px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-small); }
.art-lines { position: absolute; inset: 0; }
.art-lines svg { width: 100%; height: 100%; }

/* ---------- Decide ---------- */
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.decide a {
  border: 1px solid var(--line); border-radius: 22px; padding: 34px; display: grid; gap: 14px; min-height: 220px; align-content: space-between;
  transition: border-color var(--t-slow) var(--ease), background var(--t-slow) var(--ease);
}
.decide a:hover { border-color: var(--line-strong); background: var(--ink-2); }
.decide a h3 { font-size: 1.7rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 80px 0 40px; font-size: .88rem; color: var(--ivory-dim); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-grid h4 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--text-small); margin: 0 0 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a { transition: color var(--t-fast) var(--ease); }
.footer-grid a:hover { color: var(--ivory); }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .motto { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ivory); font-variation-settings: "SOFT" 0, "WONK" 0; }
.disclaimer { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; font-size: .8rem; color: var(--text-small); }
.disclaimer p { max-width: 62em; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(110px, 18vh, 200px) 0 clamp(70px, 10vh, 110px); }
.page-hero .eyebrow { margin-bottom: 30px; }
.page-hero .lead { margin-top: 30px; }

/* ---------- X-Ray page ---------- */
.opening { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.opening h1 { max-width: 13em; }
.opening h1 .w { display: inline-block; }
.privacy-note { display: inline-flex; gap: 10px; align-items: center; font-size: .86rem; color: var(--ivory-dim); }
.privacy-note svg { width: 16px; height: 16px; color: var(--green-text); }

.quiz { display: grid; grid-template-columns: 260px 1fr; gap: clamp(40px, 7vw, 100px); }
.quiz-rail { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; display: grid; gap: 28px; }
.progress { display: grid; gap: 10px; }
.progress .bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: var(--p, 8.33%); background: var(--gold); transition: width var(--t-slow) var(--ease); }
.progress .count { font-size: .8rem; color: var(--ivory-dim); font-variant-numeric: tabular-nums; }
.pillar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .86rem; color: var(--text-small); }
.pillar-list li { display: flex; gap: 12px; align-items: center; transition: color var(--t-mid) var(--ease); }
.pillar-list li i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background var(--t-mid) var(--ease); }
.pillar-list li.is-current { color: var(--ivory); }
.pillar-list li.is-current i { background: var(--gold); border-color: var(--gold); }
.qstage { position: relative; min-height: 560px; }
.qcard { display: grid; gap: 34px; }
.js .qcard { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .qcard.is-current { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.qcard .q { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 350; max-width: 22em; font-variation-settings: "SOFT" 0, "WONK" 0; }
.options { display: grid; gap: 10px; max-width: 640px; }
.option {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; text-align: left;
  padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--ivory-dim);
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.option .k { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; border: 1px solid var(--line-strong); color: var(--text-small); transition: all var(--t-mid) var(--ease); text-transform: lowercase; }
.option:hover { border-color: var(--line-strong); color: var(--ivory); background: rgba(242, 237, 228, .03); }
.option[aria-checked="true"] { border-color: var(--gold); color: var(--ivory); background: rgba(200, 153, 42, .07); }
.option[aria-checked="true"] .k { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.qnav { display: flex; gap: 12px; align-items: center; }
.qnav .hint { font-size: .8rem; color: var(--text-small); margin-left: 8px; }

/* 3D wheel (the one depth exception of the site) */
.result { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.wheel-3d { perspective: 1400px; aspect-ratio: 1; width: 100%; max-width: 560px; margin: 0 auto; position: relative; view-transition-name: xray-wheel; }
.wheel-3d .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 16deg)) rotateY(var(--ry, -8deg)); transition: transform 600ms var(--ease); }
.wheel-3d .layer { position: absolute; inset: 0; }
.wheel-3d .layer svg { width: 100%; height: 100%; overflow: visible; }
.wheel-3d .l-shadow { transform: translateZ(-40px) scale(.96); filter: blur(22px); opacity: .5; }
.wheel-3d .l-base { transform: translateZ(0); }
.wheel-3d .l-data { transform: translateZ(26px); }
.wheel-3d .l-core { transform: translateZ(54px); display: grid; place-items: center; pointer-events: none; }
.core-score { text-align: center; display: grid; gap: 6px; }
.core-score .num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: .9; font-weight: 300; letter-spacing: -.04em; font-variation-settings: "SOFT" 0, "WONK" 0; }
.core-score .num small { font-size: .34em; color: var(--text-small); letter-spacing: 0; }
.core-score .label { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-small); }
.wheel-3d .seg { transition: opacity var(--t-mid) var(--ease), transform var(--t-slow) var(--ease); transform-origin: 200px 200px; }
.wheel-3d .seg:hover { opacity: 1 !important; }
.wheel-3d .wedge { transform: scale(0); transform-origin: 200px 200px; transition: transform 1100ms var(--ease); }
.wheel-3d.is-visible .wedge { transform: scale(1); }
.wheel-3d.is-visible .wedge:nth-of-type(2) { transition-delay: 80ms; }

.scores { display: grid; }
.score-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.score-row:last-child { border-bottom: 1px solid var(--line); }
.score-row .name { font-size: .98rem; }
.score-row .val { font-family: var(--serif); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 350; }
.level { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px 5px 8px; border-radius: 999px; display: inline-flex; gap: 7px; align-items: center; min-width: 108px; }
.level i { width: 6px; height: 6px; border-radius: 50%; }
.level.risk { color: var(--ivory); border: 1px dashed rgba(242, 237, 228, .5); }
.level.risk i { background: transparent; border: 1px solid var(--ivory); }
.level.build { color: var(--ivory-dim); border: 1px solid var(--line-strong); }
.level.build i { background: rgba(242, 237, 228, .6); }
.level.solid { color: var(--green-text); border: 1px solid rgba(14, 124, 74, .55); background: rgba(14, 124, 74, .12); }
.level.solid i { background: var(--green-text); }

.recognition { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; font-weight: 350; max-width: 20em; letter-spacing: -.015em; font-variation-settings: "SOFT" 0, "WONK" 0; }

.unlock { margin-top: clamp(80px, 12vh, 140px); position: relative; border-radius: 26px; border: 1px solid var(--line); overflow: hidden; }
.unlock-preview { padding: 40px; display: grid; gap: 18px; filter: blur(7px); opacity: .5; user-select: none; pointer-events: none; }
.unlock-preview .ph { height: 14px; border-radius: 4px; background: rgba(242, 237, 228, .12); }
.unlock-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, rgba(12, 12, 15, .35), rgba(12, 12, 15, .9) 55%); }
.unlock-inner { max-width: 520px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.email-row { display: flex; gap: 8px; width: 100%; max-width: 460px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(12, 12, 15, .6); transition: border-color var(--t-mid) var(--ease); }
.email-row:focus-within { border-color: var(--gold); }
.email-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ivory); font: inherit; font-size: .94rem; padding: 0 16px; }
.email-row input::placeholder { color: var(--text-small); }
.fine { font-size: .78rem; color: var(--text-small); max-width: 34em; }
/* Disclaimer next to the result: the most prominent of the three points (6.76:1 on #0C0C0F). */
.result-disclaimer { margin-top: 28px; font-size: .86rem; line-height: 1.6; color: var(--ivory-dim); max-width: 60em; }

/* ---------- In production pages (Books, Planner) ---------- */
.ghost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ghost-tile { aspect-ratio: 4 / 5; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.ghost-tile::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; bottom: 34%; border-radius: 10px; background: var(--ink-3); }
.ghost-tile::after { content: ""; position: absolute; left: 18px; width: 46%; bottom: 20%; height: 8px; border-radius: 4px; background: rgba(242, 237, 228, .08); box-shadow: 0 16px 0 -1px rgba(242, 237, 228, .05); }
.ghost-tile .shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(242, 237, 228, .05) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.6s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 180ms); }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.waitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.soon-hero-mark { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--gold); }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); }
.founder-portrait { aspect-ratio: 4 / 5; border-radius: 24px; border: 1px solid var(--line); background: var(--ink-2); display: grid; place-items: center; position: sticky; top: calc(var(--header-h) + 40px); }
.founder-portrait .mono { font-family: var(--serif); font-size: 7rem; font-weight: 300; color: var(--ivory-faint); letter-spacing: -.04em; }
.founder-portrait small { position: absolute; bottom: 18px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-small); }
.bio { display: grid; gap: 26px; }
.bio p { color: var(--ivory-dim); font-size: 1.06rem; line-height: 1.8; max-width: 36em; }
.bio p.pull { font-family: var(--serif); color: var(--ivory); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; font-weight: 350; font-variation-settings: "SOFT" 0, "WONK" 0; }
.placeholder { border-left: 2px solid var(--gold); padding-left: 16px; font-style: italic; }
.cert { border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: grid; gap: 18px; background: var(--ink-2); max-width: 560px; transition: border-color var(--t-slow) var(--ease); }
.cert:hover { border-color: var(--line-strong); }
.cert h3 { font-size: 1.5rem; }
.cert .issuer { color: var(--ivory-dim); font-size: .94rem; }
.cert .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ---------- Legal ---------- */
.legal-block { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid var(--line); }
.legal-block .notice { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 20px 22px; color: var(--ivory-dim); }

/* ---------- Reveal (progressive disclosure) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .line-reveal > span { display: block; overflow: hidden; }
.js .line-reveal > span > span { display: block; transform: translateY(105%); transition: transform 1000ms var(--ease); transition-delay: calc(var(--d, 0) * 120ms + 120ms); }
.js .line-reveal.is-visible > span > span { transform: none; }
.hero-arc .draw { stroke-dasharray: .62 1; stroke-dashoffset: .62; }
.js .hero-arc.is-visible .draw { transition: stroke-dashoffset 2200ms var(--ease) 300ms; stroke-dashoffset: 0; }
html:not(.js) .hero-arc .draw { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .line-reveal > span > span { opacity: 1; transform: none; }
  .js .story-step { opacity: 1; }
  .hero-arc .draw { stroke-dashoffset: 0 !important; }
  .wheel-3d .wedge { transform: none; }
  @view-transition { navigation: none; }
}

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
::view-transition-group(xray-wheel) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }

/* ---------- Responsive ---------- */
@media (max-width: 67.5em) {
  .primary-nav, .lang { display: none; }
  .mega { display: none; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar:nth-child(3) { border-right: 0; }
  .pillar:nth-child(4) { padding-left: 0; }
  .pillar:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 53.75em) {
  :root { --header-h: 60px; }
  .story, .result, .quiz, .founder, .waitlist, .index-body, .mega-grid { grid-template-columns: 1fr; }
  .story-sticky { position: relative; top: 0; }
  .story-steps { gap: 90px; padding: 20px 0 0; }
  .js .story-step { opacity: 1; }
  .cards-3, .decide { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 36px 0; }
  .quiz-rail { position: relative; top: 0; }
  .pillar-list { display: none; }
  .qstage { min-height: 620px; }
  .ghost-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-portrait { position: relative; top: 0; max-width: 320px; }
  .legal-block { grid-template-columns: 1fr; gap: 16px; }
  .hero-arc { right: -60vw; width: 120vw; opacity: .35; }
  .hero-motto .wrap > span:first-child { display: none; }
  .index-aside { display: none; }
  .header-tools .btn { display: none; }
  .header-tools .btn.btn-mobile { display: inline-flex; }
}
@media (min-width: 53.8125em) { .btn-mobile { display: none !important; } }
@media (max-width: 32.5em) {
  .index-btn > span:first-child { display: none; }
  .header-inner { gap: 14px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar, .pillar + .pillar { padding: 20px 12px 20px 0; border-right: 0; border-top: 1px solid var(--line); min-height: 0; }
  .card { min-height: 0; }
  .unlock-preview { padding: 26px; min-height: 420px; }
  .email-row { flex-direction: column; border-radius: 18px; }
  .email-row input { padding: 12px 14px; }
  .email-row .btn { justify-content: center; }
  .score-row { grid-template-columns: 1fr auto; }
  .score-row .level { grid-column: 1 / -1; justify-self: start; }
}
.ivory .email-row input::placeholder { color: var(--text-small-on-ivory); }

/* ---------- Financial X-Ray, live flow ---------- */
[hidden] { display: none !important; }
.btn[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-text { font-size: .86rem; color: var(--ivory-dim); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; margin-left: 6px; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn-text:hover { color: var(--ivory); border-color: var(--gold); }
.qcard .q:focus { outline: none; }
.qcard .q:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.qstage { min-height: 520px; }
.quiz-done { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--line); }
.recognition:focus { outline: none; }
.email-row input[aria-invalid="true"] { color: var(--ivory); }
.email-row:has(input[aria-invalid="true"]) { border-color: var(--gold); }
.form-msg:empty { display: none; }
.unlock-preview { min-height: 380px; }

.breakdown { margin-top: clamp(80px, 12vh, 140px); display: grid; gap: 16px; }
.breakdown:focus { outline: none; }
.bd-head { display: grid; gap: 12px; margin-bottom: 20px; }
.bd-pillar { border: 1px solid var(--line); border-radius: 22px; padding: 30px 32px; display: grid; gap: 22px; background: var(--ink-2); }
.bd-pillar.solid { background: transparent; }
.bd-pillar header { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; }
.bd-pillar h3 { font-size: 1.6rem; }
.bd-pillar .val { font-family: var(--serif); font-size: 1.7rem; line-height: 1; font-weight: 350; font-variant-numeric: tabular-nums; }
.dev-note { font-size: .82rem; color: var(--text-small); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 16px; }
.recs { display: grid; gap: 12px; }
.recs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rec { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); }
.rec-name { font-size: 1rem; }
@media (max-width: 32.5em) {
  .bd-pillar { padding: 24px 20px; }
  .bd-pillar header { grid-template-columns: 1fr auto; }
  .bd-pillar header .level { grid-column: 1 / -1; justify-self: start; grid-row: 2; }
}
#quiz, #result, #breakdown, #questions { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 32.5em) { .wheel-3d { width: 76%; } }
@media (max-width: 32.5em) { .score-row .name { grid-column: 1; grid-row: 1; } .score-row .val { grid-column: 2; grid-row: 1; } .score-row .level { grid-row: 2; } .core-score .num { font-size: 1.9rem; } .core-score .label { font-size: .58rem; } }

/* ---------- Breakdown narrative (Doc00 §10.5 point 4) ---------- */
.mirror { display: grid; gap: 12px; }
.mirror dl { margin: 0; display: grid; gap: 14px; }
.mirror dt { font-size: .8rem; color: var(--text-small); line-height: 1.5; max-width: 60em; }
.mirror dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.22rem; line-height: 1.35; color: var(--ivory); font-variation-settings: "SOFT" 0, "WONK" 0; }
.mirror dd::before { content: "\201C"; color: var(--gold); margin-right: 2px; }
.mirror dd::after { content: "\201D"; color: var(--gold); margin-left: 1px; }
.narrative { display: grid; gap: 12px; max-width: 44em; }
.narrative p { color: var(--ivory-dim); line-height: 1.7; }
.narrative .diagnosis, .narrative .congrats { color: var(--ivory); font-size: 1.05rem; }
.narrative .fixable { color: var(--ivory); padding-left: 14px; border-left: 2px solid var(--emerald); }
.narrative .reinforcement { font-style: italic; }
.companion { list-style: none; margin: 0; padding: 0; }
.companion .rec { border-style: dashed; background: transparent; }
.companion .rec-name { color: var(--ivory-dim); font-size: .94rem; }
/* Disclaimer before the questionnaire: footnote weight, lighter than the result one,
   still AA for small text (alpha .5 = 4.73:1 on #0C0C0F; the old .38 gave 3.19:1). */
.quiz-disclaimer { margin: 0 0 44px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .72rem; line-height: 1.55; color: var(--text-small); max-width: 52em; }

/* ---------- Result column: recognition first on narrow screens (Doc00 §10.5 step 1) ---------- */
.result-side { display: grid; gap: 36px; }
@media (max-width: 53.75em) {
  .result-side { display: contents; }
  .result .recognition-block { order: -1; }
}

/* ---------- Honest next step after the breakdown ---------- */
.next-step { margin-top: 40px; padding: 30px 32px; border: 1px solid var(--line); border-radius: 22px; display: grid; gap: 14px; justify-items: start; }
.next-step h3 { font-size: 1.5rem; }
@media (max-width: 32.5em) { .next-step { padding: 24px 20px; } }

/* ---------- Retake confirmation: site dialog, not the browser's ---------- */
.confirm-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 32px; margin: auto;
  border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--ink-2); color: var(--ivory); font-family: var(--sans);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.confirm-dialog[open] { animation: dlg-in 260ms var(--ease); }
.confirm-dialog::backdrop { background: rgba(12, 12, 15, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.confirm-dialog h3 { font-size: 1.7rem; margin-bottom: 12px; }
.confirm-dialog p { line-height: 1.65; }
.confirm-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 26px; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 32.5em) { .confirm-dialog { padding: 24px 20px; } .confirm-actions { justify-content: stretch; } .confirm-actions .btn { flex: 1; justify-content: center; } }

.ivory .fine { color: var(--text-small-on-ivory); }

/* TICKET-019: the unlock panel shares one grid cell with the blurred preview instead of being absolutely
   positioned over it, so the box grows with its content at 320 px or with enlarged text. */
.unlock { display: grid; }
.unlock > .unlock-preview, .unlock > .unlock-panel { grid-area: 1 / 1; }
.unlock-panel { position: relative; inset: auto; padding: 40px 24px; }

/* TICKET-014: brand eyebrow naming the pillar and level above the recognition. */
.recognition-block { display: grid; gap: 16px; }
#quizStart { scroll-margin-top: calc(var(--header-h) + 12px); }

/* TICKET-013: expectation line under "Begin" (no figures; email after the wheel). */
.begin-note { margin-top: 18px; max-width: 40em; }

/* TICKET-063: the unlock button may wrap, so nothing is clipped at 320 px with enlarged text (WCAG 1.4.10). */
.email-row, .email-row input { min-width: 0; }
.email-row .btn { white-space: normal; text-align: center; justify-content: center; }
@media (max-width: 22.5em) { .unlock-panel { padding: 32px 14px; } }

/* CIA-R6: media queries in em so the layout also responds to the reader's text size; on very narrow
   headers the wordmark hides (the logo keeps its aria-label) so the header never overflows. */
@media (max-width: 21em) { .site-header .brand span { display: none; } }

/* CIA-R7 and CIA-R8: the email row may wrap to two lines instead of squeezing the field. */
.email-row { flex-wrap: wrap; max-width: 28.75rem; }
.email-row input { flex: 1 1 12em; }
.email-row .btn { flex: 0 0 auto; }

/* TICKET-064: form error in the brand's own language: full ivory text, a gold dot as punctuation,
   the field border in gold. No generic error red. */
.form-msg.is-error { color: var(--ivory); }
.form-msg.is-error::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; }

/* CIA-R10: the question's nav bar may wrap, so the quiz column never grows past a 320 px screen. */
.quiz > * { min-width: 0; }
.qnav { flex-wrap: wrap; }
.qnav .btn { white-space: normal; }

/* CIA-R11: the header grows with enlarged text instead of letting its button spill out (a);
   the logo never shrinks to nothing (b). (c) was measured and discarded: at 320 px the wordmark and
   "Free diagnosis" don't fit on one line, so the wordmark keeps hiding below 21em. */
.site-header { height: auto; min-height: var(--header-h); }
.header-inner { min-height: var(--header-h); }
.site-header .brand { flex-shrink: 0; }

/* CIA-R12: when the form wraps to two lines on wide screens it becomes a rounded rectangle, not a lens. */
.email-row { border-radius: 2.1rem; justify-content: center; }
.email-row input { padding: .45em 1em; }

/* CIA-R9 (regression fix of CIA-R7/R8): on phones the row is a column, so the field takes the full width
   and its natural height instead of stretching. */
@media (max-width: 32.5em) {
  .email-row { flex-wrap: nowrap; border-radius: 18px; }
  .email-row input { flex: 0 0 auto; width: 100%; padding: 12px 14px; }
}

/* CIA-R13: while the field is invalid its border is doubled in gold, so it still says "error" with focus. */
.email-row:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 1px var(--gold); }

/* CIA-R14: on phones "Index" is only the icon; a 44 px touch target drawn by a transparent layer,
   so the header keeps its width and nothing moves. */
.index-btn { position: relative; min-height: 44px; }
.index-btn::after { content: ""; position: absolute; top: 50%; right: 0; width: 44px; height: 44px; transform: translateY(-50%); }

/* CIA-R11 follow-up: with the logo kept (b), the header tools shrink and wrap instead of pushing past
   the screen at 320 px with enlarged text; the footer columns may shrink and stack on the narrowest screens. */
.header-tools { min-width: 0; }
.header-tools .btn { min-width: 0; white-space: normal; text-align: center; }
.footer-grid > * { min-width: 0; }
@media (max-width: 22.5em) { .footer-grid { grid-template-columns: 1fr; } }

/* Sitewide reflow at 320 px with enlarged text (found while verifying CIA-R11, 28 sep 2026): grid children
   may shrink, hero buttons may wrap, and the founder portrait never exceeds the column (WCAG 1.4.10). */
.hero-sub > *, .story > *, .founder > *, .bio > *, .pillars > *, .wrap > *, .section-head > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 32.5em) { .btn, .link-arrow { white-space: normal; } .link-arrow { flex-wrap: wrap; } }
@media (max-width: 22.5em) { .pillars { grid-template-columns: 1fr; } }
.hero-actions .btn { white-space: normal; text-align: center; }
.founder-portrait { max-width: min(320px, 100%); }
@media (min-width: 53.8125em) { .founder { grid-template-columns: 1fr 1fr; } .founder-portrait { max-width: 100%; } } /* CIA-R16: desktop keeps the approved look */

/* CIA-R17: article cards go to one column on phones (the grids used to be inline styles in articles.html). */
.article-feature { display: grid; grid-template-columns: 1.2fr 1fr; }
.cards-3.cards-2 { grid-template-columns: 1fr 1fr; }
.article-meta { flex-wrap: wrap; }
.article-card .article-body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 32.5em) { .article-feature, .cards-3.cards-2 { grid-template-columns: 1fr; } }

/* CIA-R18: the Index touch layer stops before "Free diagnosis" instead of covering its right edge. */
.index-btn::after { right: -8px; }

/* CIA-R19: the mega panel follows the real header height; on desktop the header keeps its buttons on one line
   and its content can widen with enlarged text so nothing overlaps. */
.mega { top: 100%; }
.header-inner { max-width: max(1180px, 73.75em); }
@media (min-width: 53.8125em) { .header-tools .btn { white-space: nowrap; min-width: auto; } }

/* Found in the final sweep (320 px, 32 px text): the card footer may wrap so "Preview" never leaves the card. */
.card-foot { flex-wrap: wrap; row-gap: 10px; }

/* Wheel labels legible on phones (Doc00 §11, polish item 2, 28 sep 2026). The labels keep a real size of at
   least 12 px (site.js, labelLayout) and the ring leaves them room, so on phones the wheel takes the full width.
   The core scales with the ring (--ring, set by site.js), and "Overall" never drops below 11 px. */
@media (max-width: 32.5em) { .wheel-3d { width: 100%; } }
.wheel-3d .core-score .num { font-size: min(clamp(2.2rem, 4vw, 3rem), calc(var(--hole, 999px) * .34)); }
.wheel-3d .core-score .label { font-size: max(11px, min(.66rem, calc(var(--hole, 999px) * .085))); }
@media (max-width: 32.5em) { .wheel-3d .core-score .num { font-size: min(1.9rem, calc(var(--hole, 999px) * .34)); } }
/* In a small ring hole, "Overall" drops the uppercase tracking so it fits inside the hole at 11 px. */
.wheel-3d.is-compact .core-score { gap: 3px; }
.wheel-3d.is-compact .core-score .num { font-size: calc(var(--hole, 999px) * .30); }
/* CIA-R21: the core's 3D lift shrinks with the ring, so in perspective it stays over the hole. */
.wheel-3d .l-core { transform: translateZ(calc(54px * var(--ring, 1) * var(--ring, 1))); }
.wheel-3d.is-compact .core-score .label { font-size: 11px; letter-spacing: 0; text-transform: none; }

/* Founder portrait (Doc00 §11, polish item 3). With the real photo, the <img> fills the 4:5 frame.
   Until then, a brand placeholder: the FinanzaX mark inside the wheel's concentric rings, no stock photo. */
.founder-portrait { overflow: hidden; }
.founder-portrait > img:not(.mark) { width: 100%; height: 100%; object-fit: cover; }
.founder-portrait.is-placeholder { background: radial-gradient(circle at 50% 46%, rgba(200, 153, 42, .16), transparent 62%), var(--ink-2); }
.founder-portrait.is-placeholder::before, .founder-portrait.is-placeholder::after {
  content: ""; position: absolute; left: 50%; top: 46%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 153, 42, .28);
}
.founder-portrait.is-placeholder::before { width: 62%; }
.founder-portrait.is-placeholder::after { width: 86%; border-color: rgba(242, 237, 228, .08); }
.founder-portrait.is-placeholder .mark { width: 26%; height: auto; position: relative; top: -4%; filter: drop-shadow(0 10px 30px rgba(200, 153, 42, .25)); }

/* Legal pages: long-form text (Privacy Policy and Terms, installed 30 sep 2026 from the attorney-reviewed sources).
   Same voice as the rest of the site: Fraunces headings, Inter body in ivory-dim, a comfortable measure. */
.legal-block { scroll-margin-top: calc(var(--header-h) + 8px); }
.legal-text { max-width: 46em; min-width: 0; color: var(--ivory-dim); font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; }
.legal-text p { margin: 0 0 1em; }
.legal-text .legal-doc-title { font-family: var(--serif); color: var(--ivory); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 350; margin: 0 0 .6em; font-variation-settings: "SOFT" 0, "WONK" 0; }
.legal-text .legal-updated { color: var(--text-small); font-size: .9rem; margin-bottom: 1.6em; }
.legal-text h4 { font-family: var(--serif); color: var(--ivory); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.3; font-weight: 400; letter-spacing: .01em; margin: 2.4em 0 .7em; padding-top: 1.4em; border-top: 1px solid var(--line); font-variation-settings: "SOFT" 0, "WONK" 0; }
.legal-text .legal-doc-title + h4 { margin-top: 1.4em; }
.legal-text h5 { color: var(--ivory); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.4; margin: 1.6em 0 .5em; }
.legal-text strong { color: var(--ivory); font-weight: 500; }
.legal-text ul { margin: 0 0 1.1em; padding-left: 1.3em; display: grid; gap: .5em; }
.legal-text li::marker { color: var(--gold); }
.legal-text a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .18em; transition: text-decoration-color var(--t-fast) var(--ease); }
.legal-text a:hover { text-decoration-color: var(--gold); }
.legal-text address { font-style: normal; margin: 0 0 1em; }
.legal-text .legal-end { margin-top: 2.4em; }
@media (min-width: 53.8125em) { .legal-block > h3 { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.legal-text ul { grid-template-columns: minmax(0, 1fr); }
.legal-text li { min-width: 0; }
.legal-text .legal-end { max-width: none; }

/* Analytics consent banner (assets/js/consent.js). Same system as the rest of the site: ink surface, Fraunces
   title, Inter text, pill buttons. Equal weight for Accept and Decline. Sits below the index overlay (z 80). */
.consent {
  position: fixed; z-index: 60; left: var(--gutter); bottom: var(--gutter); width: min(30rem, calc(100% - 2 * var(--gutter)));
  padding: 22px 24px 20px; border: 1px solid var(--line-strong); border-radius: 22px;
  background: rgba(19, 19, 24, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85);
  opacity: 0; transform: translateY(14px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.consent.is-open { opacity: 1; transform: none; }
.consent-title { margin: 0 0 8px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; font-weight: 400; color: var(--ivory); font-variation-settings: "SOFT" 0, "WONK" 0; }
.consent-text { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; color: var(--ivory-dim); }
.consent-text a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .18em; }
.consent-text a:hover { text-decoration-color: var(--gold); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn { white-space: normal; text-align: center; justify-content: center; flex: 1 1 auto; }
@media (max-width: 32.5em) { .consent { left: 0; right: 0; bottom: 0; width: auto; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 80vh; overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }

/* Consent banner, after the Agent 8 review (CIA-C1 to C5): Accept and Decline have the same size and weight
   (one gold, one ivory, both filled and 44 px tall); on desktop the banner sits bottom right so it does not cover
   the hero or "Begin"; on small or short screens the text scrolls and the buttons stay in view. */
.btn-ivory { --bg: var(--ivory); --fg: var(--ink); }
.consent { display: flex; flex-direction: column; max-height: min(80vh, 30rem); }
.consent-body { min-height: 0; overflow-y: auto; }
.consent-actions { flex: none; padding-top: 4px; }
.consent-actions .btn { flex: 1 1 0; min-width: 8.5em; min-height: 44px; padding-block: .6em; justify-content: center; }
.consent-text { margin-bottom: 14px; }
@media (min-width: 53.8125em) { .consent { left: auto; right: var(--gutter); } }
@media (max-width: 32.5em) { .consent { max-height: 80vh; overflow: visible; } }
/* CIA-C7: the two consent buttons always share the same row height, even when one label wraps at 320 px / 32 px. */
.consent-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); grid-auto-rows: 1fr; }

/* ---------- Catalog pages (templates.html, plantillas.html) ---------- */
.cat-switch { margin-top: 26px; }
.cat-bundles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cat-bundle { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-strong); }
.cat-cover { aspect-ratio: 16 / 9; background: var(--ink-3); overflow: hidden; }
.cat-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cat-body { display: grid; gap: 14px; align-content: start; padding: 30px; }
.cat-bundle .cat-body { flex: 1; padding: 34px 34px 38px; }
.cat-bundle h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.12; }
.cat-bundle .btn { justify-self: start; margin-top: 10px; }
.cat-kicker { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cat-item { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(12, 12, 15, .08); transition: border-color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.cat-item:hover { border-color: rgba(12, 12, 15, .18); transform: translateY(-2px); }
.cat-item .cat-cover { background: #EAE3D6; }
.cat-item .cat-body { padding: 24px; }
.cat-item .cat-kicker { color: var(--ink-on-ivory-dim); }
.cat-item h3 { font-size: 1.28rem; line-height: 1.2; color: var(--ink); }
@media (max-width: 53.75em) {
  .cat-bundles, .cat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 32.5em) {
  .cat-item { grid-template-columns: 1fr; }
  .cat-bundle .cat-body { padding: 26px 22px 30px; }
}

/* Legal notice under the catalog cards and on the Books and Planner pages (counsel's store notice, unaltered). */
.cat-notice { margin-top: 56px; padding-top: 26px; max-width: 760px; border-top: 1px solid rgba(12, 12, 15, .14); font-size: .84rem; line-height: 1.65; color: var(--text-small-on-ivory); }
.waitlist .cat-notice { margin-top: 0; padding-top: 0; border-top: 0; }

/* Bundle ES 10: its cover is 4:3 inside the 16:9 frame. The frame continues the cover's own edge tones (white,
   then the gold line, the navy bar and the gold base) so the sides read as part of the image: no crop, no stretch. */
.cat-cover-es10 { background: linear-gradient(to bottom, #fdfdfd 0, #fdfdfd 92.1%, #fff8d4 92.3%, #bd830e 92.6%, #07223f 93%, #02204c 93.3%, #011e4b 97.7%, #0a1d32 99%, #cf880c 99.5%, #cf880c 100%); }

/* ---------- Catalog cards with price and details link; product pages ---------- */
a.cat-cover { display: block; }
.cat-price { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; color: var(--ivory); margin-top: -4px; }
.cat-item .cat-price { color: var(--ink); }
.cat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.cat-bundle .cat-actions { margin-top: 10px; }
.cat-bundle .cat-actions .btn { margin-top: 0; }
/* One primary (gold) button per card; the details link is the secondary action. */
.cat-item .cat-buy { --bg: var(--gold); --fg: var(--ink); }

.prod-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.prod-crumb { font-size: .82rem; margin: 0 0 22px; }
.prod-crumb a { color: var(--ivory-dim); border-bottom: 1px solid var(--line-strong); }
.prod-hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.06; margin: 18px 0 0; }
.prod-hero .lead { margin-top: 22px; }
.prod-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 34px; }
.prod-price { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--ivory); }
.prod-sum { margin: 18px 0 0; font-size: .86rem; color: var(--text-small); }
.prod-cover img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--ink-3); }
.prod-text { max-width: 760px; }
.lead-sm { font-size: 1.06rem; line-height: 1.75; color: var(--ivory-dim); margin: 0 0 18px; }
.prod-sections { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.prod-sections .eyebrow { margin-bottom: 18px; display: inline-flex; }
.prod-includes, .prod-members, .prod-verify { list-style: none; margin: 0; padding: 0; }
.prod-includes li, .prod-members li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid rgba(12, 12, 15, .12); }
.prod-includes li span, .prod-members li span { grid-column: 1; color: var(--ink-on-ivory-dim); font-size: .94rem; line-height: 1.55; }
.prod-members li { grid-template-columns: minmax(0, 1fr); }
.prod-members li a strong { border-bottom: 1px solid rgba(12, 12, 15, .25); }
.prod-tab { grid-column: 2; grid-row: 1 / span 2; align-self: start; font: .72rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-on-ivory-dim); background: rgba(12, 12, 15, .06); padding: 3px 8px; border-radius: 6px; max-width: 14em; overflow-wrap: anywhere; }
.prod-verify li { padding: 14px 0; border-top: 1px solid rgba(12, 12, 15, .12); color: var(--ink-on-ivory-dim); font-size: .94rem; line-height: 1.55; }
.prod-faqs { margin-top: clamp(56px, 9vh, 96px); }
.prod-faqs .eyebrow { display: inline-flex; margin-bottom: 14px; }
.prod-faq { border-top: 1px solid rgba(12, 12, 15, .12); }
.prod-faq summary { cursor: pointer; padding: 18px 0; font-family: var(--serif); font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.prod-faq summary::-webkit-details-marker { display: none; }
.prod-faq summary::after { content: "+"; flex: none; color: var(--ink-on-ivory-dim); }
.prod-faq[open] summary::after { content: "\2212"; }
.prod-faq p { margin: 0 0 20px; max-width: 720px; color: var(--ink-on-ivory-dim); line-height: 1.65; }
@media (max-width: 53.75em) {
  .prod-grid, .prod-sections { grid-template-columns: 1fr; }
  .prod-cover { order: -1; }
}

/* Polish (9 oct 2026): product page top space, link inside the legal notice, and 44 px touch areas on phones.
   The extra touch area is a pseudo-element, so links and buttons look the same. */
.prod-hero { padding: clamp(44px, 7vh, 84px) 0 clamp(36px, 5vh, 64px); }
.prod-hero + .section-tight { padding-bottom: clamp(44px, 7vh, 80px); }
.legal-block .notice a { color: var(--ivory); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 53.75em) {
  .link-arrow { position: relative; }
  .link-arrow::before { content: ""; position: absolute; inset: -8px -6px; }
  .btn-sm { min-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .index-btn { min-width: 44px; justify-content: center; }
  .prod-crumb a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .prod-members li a { position: relative; }
  .prod-members li a::before { content: ""; position: absolute; inset: -10px 0; }
  .index-close { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
}

/* Weak pillar with no product (Protection): one plain line at the end of its block. */
.bd-pillar .no-product { margin: 6px 0 0; max-width: 62ch; }