/* =====================================================================
   RAEVOS HOMEPAGE — AUTHORITY RECONSTRUCTION (2026-09-28)
   Visual authority: the Founder's September board (1024×1536). Every desktop section is a container sized in the
   board's own pixels: --p = one board pixel of that section, so geometry, type and art scale track the board exactly.
   Tokens: 04_Brand (canvas #010002, gold 300/500/700, platinum 100/300/600). Text never renders below 11px.
   ===================================================================== */
:root {
  --canvas: #010002; --panel: #070707; --card: #0B0B0C; --line: rgba(212,175,55,0.30); --line-soft: rgba(255,255,255,0.10);
  --gold-300: #F1C86A; --gold-500: #D4AF37; --gold-700: #AA8C2C; --gold-900: #8A6A1F;
  --plat-100: #F5F6F8; --plat-300: #CED1D5; --plat-600: #A7ACB3; --success: #3FAE79;
  --btn-gold: linear-gradient(180deg, #E7C77A 0%, #D4AF37 48%, #B8922F 100%);
  --focus: 0 0 0 3px rgba(212,175,55,0.45);
  --page: min(1360px, calc(100vw - 80px));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--canvas); color: var(--plat-100); }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--canvas); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl { list-style: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; background: var(--gold-500); color: var(--canvas); font-weight: 700; border-radius: 6px; }
.skip:focus { top: 12px; }
.page { width: var(--page); margin: 0 auto; padding: 20px 0 40px; display: grid; gap: calc(var(--page) * 10 / 1002); }
i { font-style: normal; }

/* shared gold button (the board's bevelled gold) */
.btn-p, .p-btn, .card a { display: inline-flex; align-items: center; justify-content: center; gap: .6em; background: var(--btn-gold); color: #16110A;
  font-weight: 600; border-radius: calc(var(--p) * 4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 10px rgba(0,0,0,0.35); }
.btn-s { display: inline-flex; align-items: center; justify-content: center; color: var(--plat-100); font-weight: 600;
  border: 1px solid rgba(255,255,255,0.28); border-radius: calc(var(--p) * 4); background: rgba(0,0,0,0.25); }

/* ================================================================== HERO (board 10,10 → 765,480 · W 755) */
.hero { --p: calc(100cqw / 755); container-type: inline-size; position: relative; aspect-ratio: 755 / 470; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--p) * 8); }
.hero > * { --p: calc(100cqw / 755); }
.hero-art { position: absolute; left: calc(var(--p) * 4); top: calc(var(--p) * 52); width: calc(var(--p) * 747); height: calc(var(--p) * 414); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hdr { position: absolute; inset: 0 0 auto 0; height: calc(var(--p) * 46); display: flex; align-items: center; }
.brand { position: absolute; left: calc(var(--p) * 24); top: calc(var(--p) * 17); width: calc(var(--p) * 114); display: flex; min-height: 44px; align-items: center; margin-top: calc(22px - var(--p) * 6); transform: translateY(-50%); top: calc(var(--p) * 23); }
.nav { position: absolute; left: calc(var(--p) * 183); width: calc(var(--p) * 362); top: calc(var(--p) * 17); display: flex; justify-content: space-between; }
.nav a { font-size: max(11px, calc(var(--p) * 8.2)); font-weight: 500; color: var(--plat-100); line-height: calc(var(--p) * 12); display: inline-flex; align-items: center; min-height: 24px; }
.nav a:first-child { color: var(--gold-300); }
.hbtn { position: absolute; top: calc(var(--p) * 6); height: calc(var(--p) * 34); display: inline-flex; align-items: center; justify-content: center;
  font-size: max(11px, calc(var(--p) * 9.4)); font-weight: 600; border-radius: calc(var(--p) * 4); min-height: 44px; }
.hbtn-s { left: calc(var(--p) * 562); width: calc(var(--p) * 76); color: var(--plat-100); border: 1px solid rgba(255,255,255,0.30); }
.hbtn-p { left: calc(var(--p) * 646); width: calc(var(--p) * 96); background: var(--btn-gold); color: #16110A; }
.menu { display: none; }
.sheet { display: none; }
.hero-copy { position: absolute; left: calc(var(--p) * 38); top: calc(var(--p) * 77); width: calc(var(--p) * 300); }
.eyebrow { font-size: max(11px, calc(var(--p) * 11.2)); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-300); line-height: 1; }
.hero h1 { margin-top: calc(var(--p) * 13); font-size: calc(var(--p) * 51.5); line-height: .96; letter-spacing: -0.028em; font-weight: 700; color: var(--plat-100); }
.hero h1 span { color: #D9B870; }
.lede { margin-top: calc(var(--p) * 12); font-size: max(11px, calc(var(--p) * 12.5)); line-height: 1.44; color: var(--plat-100); width: calc(var(--p) * 290); }
.hero .ctas { position: absolute; top: calc(var(--p) * 238); left: 0; display: flex; gap: calc(var(--p) * 11); }
.hero .btn-p { width: calc(var(--p) * 138); height: calc(var(--p) * 37); font-size: max(11px, calc(var(--p) * 11.5)); min-height: 44px; }
.hero .btn-s { width: calc(var(--p) * 110); height: calc(var(--p) * 37); font-size: max(11px, calc(var(--p) * 10.5)); min-height: 44px; }
.discipline { position: absolute; left: calc(var(--p) * 648); top: calc(var(--p) * 81.5); font-size: max(11px, calc(var(--p) * 11)); line-height: 1.41; letter-spacing: .22em; text-transform: uppercase; color: var(--plat-300); }
.signals { position: absolute; left: calc(var(--p) * 4); right: calc(var(--p) * 4); top: calc(var(--p) * 390); display: grid; grid-template-columns: repeat(4, 1fr); }
.signals li { position: relative; text-align: center; font-size: max(11px, calc(var(--p) * 11)); line-height: 1.36; letter-spacing: .2em; text-transform: uppercase; color: var(--plat-300); }
.signals li + li::before { content: ''; position: absolute; left: 0; top: calc(var(--p) * 2); height: calc(var(--p) * 48); width: 1px; background: rgba(255,255,255,0.14); }
.signals i { display: block; color: var(--gold-500); font-size: max(11px, calc(var(--p) * 9)); letter-spacing: 0; margin-bottom: calc(var(--p) * 7); }

/* ================================================================== ONE SYSTEM (board 10,490 → 1012,728 · W 1002) */
.eco { --p: calc(100cqw / 1002); container-type: inline-size; position: relative; }
.eco > * { --p: calc(100cqw / 1002); }
.eco h2 { padding-left: calc(var(--p) * 9); font-size: calc(var(--p) * 19.4); line-height: 1; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; color: var(--plat-100); }
.eco-sub { margin-top: calc(var(--p) * 7); padding-left: calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 12.6)); color: var(--plat-300); }
.cards { margin-top: calc(var(--p) * 11); display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--p) * 10); padding: 0 calc(var(--p) * 6); }
.card { --c: calc(100cqw / 157); container-type: inline-size; position: relative; aspect-ratio: 157 / 179; background: var(--card); border: 1px solid rgba(255,255,255,0.12); border-radius: calc(var(--p) * 5); overflow: hidden; text-align: center; }
.card > * { --c: calc(100cqw / 157); }
.card img { position: absolute; left: calc(var(--c) * 2); top: calc(var(--c) * 2); width: calc(var(--c) * 153); height: calc(var(--c) * 83); object-fit: cover; }
.card h3 { position: absolute; left: 0; right: 0; top: calc(var(--c) * 85.5); font-size: calc(var(--c) * 13.6); font-weight: 600; line-height: 1; }
.card h3 em, .rows em { font-style: normal; display: inline-block; vertical-align: middle; margin-left: .4em; padding: .25em .5em; border-radius: 1em; border: 1px solid var(--line); color: var(--gold-300); font-size: max(11px, calc(var(--c) * 6.4)); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.card p { position: absolute; left: calc(var(--c) * 10); right: calc(var(--c) * 10); top: calc(var(--c) * 106); font-size: max(11px, calc(var(--c) * 10.4)); line-height: 1.36; color: var(--plat-300); }
.card a { position: absolute; left: calc(var(--c) * 18); width: calc(var(--c) * 121); top: calc(var(--c) * 143); height: calc(var(--c) * 25); min-height: 32px; font-size: max(11px, calc(var(--c) * 9.6)); border-radius: calc(var(--c) * 3); }
.rows, .motto { display: none; }

/* ================================================================== CINEMATIC PANELS (board 15,733 → 1010,914) */
.panels { display: grid; grid-template-columns: 332fr 322fr 331fr; gap: calc(var(--page) * 5 / 1002); padding: 0 calc(var(--page) * 5 / 1002); }
.panel { --p: calc(100cqw / 332); container-type: inline-size; position: relative; aspect-ratio: 332 / 181; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: calc(var(--p) * 6); }
.panel > * { --p: calc(100cqw / 332); }
.p-progress, .p-progress > * { --p: calc(100cqw / 322); }
.p-progress { aspect-ratio: 322 / 181; }
.p-calc, .p-calc > * { --p: calc(100cqw / 331); }
.p-calc { aspect-ratio: 331 / 181; }
.p-art { position: absolute; left: calc(var(--p) * 1); top: calc(var(--p) * 1); width: calc(100% - var(--p) * 2); height: calc(100% - var(--p) * 2); object-fit: cover; }
.panel h3 { position: absolute; left: calc(var(--p) * 18); top: calc(var(--p) * 25.5); font-size: calc(var(--p) * 14.6); line-height: 1.17; font-weight: 500; text-transform: uppercase; letter-spacing: .005em; color: var(--plat-100); }
.p-sub { position: absolute; left: calc(var(--p) * 18); top: calc(var(--p) * 64.5); font-size: max(11px, calc(var(--p) * 11)); line-height: 1.36; color: var(--plat-300); }
.p-btn { position: absolute; left: calc(var(--p) * 18); top: calc(var(--p) * 118); height: calc(var(--p) * 28); padding: 0 calc(var(--p) * 13); min-height: 36px; font-size: max(11px, calc(var(--p) * 9.8)); }
.p-progress h3 { left: calc(var(--p) * 15); top: calc(var(--p) * 20); }
.p-progress .p-sub { left: calc(var(--p) * 15); top: calc(var(--p) * 61); font-size: max(11px, calc(var(--p) * 12)); }
.p-progress .p-btn { left: calc(var(--p) * 15); top: calc(var(--p) * 145); height: calc(var(--p) * 27); }
.p-sample { position: absolute; right: calc(var(--p) * 14); top: calc(var(--p) * 70); font-size: max(11px, calc(var(--p) * 7)); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.tiles { position: absolute; left: calc(var(--p) * 15); right: calc(var(--p) * 14); top: calc(var(--p) * 82); height: calc(var(--p) * 57); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--p) * 9); }
.tiles div { background: rgba(10,10,11,0.9); border: 1px solid rgba(255,255,255,0.12); border-radius: calc(var(--p) * 4); padding: calc(var(--p) * 8) calc(var(--p) * 10); display: grid; align-content: start; gap: calc(var(--p) * 2); }
.tiles dt { font-size: max(11px, calc(var(--p) * 9.6)); color: var(--plat-100); line-height: 1.2; }
.tiles dd { font-size: calc(var(--p) * 15.2); font-weight: 500; line-height: 1.15; color: var(--plat-100); }
.tiles dd.d { font-size: max(11px, calc(var(--p) * 9.6)); color: var(--plat-600); }
.tiles dd.up { color: var(--success); }
.p-calc h3 { left: calc(var(--p) * 16); top: calc(var(--p) * 24.5); }
.p-calc .p-sub { left: calc(var(--p) * 16); top: calc(var(--p) * 46); font-size: max(11px, calc(var(--p) * 11)); }
.p-calc .p-btn { left: calc(var(--p) * 16); }

/* ================================================================== CLOSING (board 10,918 → 845,1124 · W 835) */
.closing { --p: calc(100cqw / 835); container-type: inline-size; position: relative; aspect-ratio: 835 / 206; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: calc(var(--p) * 6); }
.closing > * { --p: calc(100cqw / 835); }
.c-art { position: absolute; left: calc(var(--p) * 2); top: calc(var(--p) * 2); width: calc(100% - var(--p) * 4); height: calc(100% - var(--p) * 4); object-fit: cover; }
.c-copy { position: absolute; left: calc(var(--p) * 36); top: calc(var(--p) * 32); }
.closing h2 { font-size: calc(var(--p) * 19.4); line-height: 1.18; font-weight: 500; text-transform: uppercase; color: var(--plat-100); letter-spacing: .005em; }
.closing h2 span { color: #E9C986; }
.c-copy p { margin-top: calc(var(--p) * 11); font-size: max(11px, calc(var(--p) * 12)); color: var(--plat-300); }
.closing .ctas { margin-top: calc(var(--p) * 13); display: flex; gap: calc(var(--p) * 10); }
.closing .btn-p { width: calc(var(--p) * 136); height: calc(var(--p) * 33); font-size: max(11px, calc(var(--p) * 11.4)); min-height: 44px; }
.closing .btn-s { width: calc(var(--p) * 88); height: calc(var(--p) * 33); font-size: max(11px, calc(var(--p) * 10.6)); min-height: 44px; }
.c-right { position: absolute; right: calc(var(--p) * 13); top: calc(var(--p) * 30); text-align: right; font-size: max(11px, calc(var(--p) * 11)); line-height: 1.38; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-100); }
.c-r { position: absolute; right: calc(var(--p) * 13); top: calc(var(--p) * 89); width: calc(var(--p) * 38); height: auto; }
.stats { position: absolute; left: calc(var(--p) * 380); right: calc(var(--p) * 2); bottom: calc(var(--p) * 2); height: calc(var(--p) * 56);
  display: grid; grid-template-columns: repeat(4, 1fr); background: linear-gradient(180deg, rgba(1,0,2,0.35), rgba(1,0,2,0.7)); }
.stats div { position: relative; display: grid; align-content: center; justify-items: center; }
.stats div + div::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255,255,255,0.14); }
.stats dt { font-size: calc(var(--p) * 20.6); font-weight: 600; line-height: 1; color: var(--gold-300); }
.stats dd { margin-top: calc(var(--p) * 5); font-size: max(11px, calc(var(--p) * 10.4)); color: var(--plat-100); }
.c-note { position: absolute; left: calc(var(--p) * 36); bottom: calc(var(--p) * 8); font-size: 11px; color: var(--plat-600); }

/* ================================================================== FOOTER (board 10,1418 → 1015,1536 · W 1005) */
.ftr { --p: calc(100cqw / 1005); container-type: inline-size; position: relative; aspect-ratio: 1005 / 118; margin-top: calc(var(--page) * 22 / 1002); }
.ftr > * { --p: calc(100cqw / 1005); }
.f-brand { position: absolute; left: calc(var(--p) * 29); top: calc(var(--p) * 26); width: calc(var(--p) * 203); display: grid; justify-items: center; gap: calc(var(--p) * 12); }
.f-brand img { width: 100%; }
.f-brand p { font-size: max(11px, calc(var(--p) * 13.4)); color: var(--plat-100); }
.f-mid { position: absolute; left: calc(var(--p) * 277); right: calc(var(--p) * 447); top: calc(var(--p) * 22); height: calc(var(--p) * 56); display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.14); border-right: 1px solid rgba(255,255,255,0.14); font-size: max(11px, calc(var(--p) * 11.5)); color: var(--plat-300); }
.f-right { position: absolute; left: calc(var(--p) * 598); right: calc(var(--p) * 212); top: calc(var(--p) * 24); display: grid; justify-items: center; gap: calc(var(--p) * 12); }
.f-legal { display: flex; gap: calc(var(--p) * 22); }
.f-legal a { font-size: max(11px, calc(var(--p) * 11)); color: var(--plat-300); display: inline-flex; align-items: center; min-height: 24px; }
.f-right p { font-size: max(11px, calc(var(--p) * 9.6)); color: var(--plat-600); }

/* ================================================================== RESPONSIVE — same design language */
@media (max-width: 1023px) {
  :root { --page: calc(100vw - 48px); }
  .nav { display: none; }
  .hbtn-s { left: auto; right: calc(var(--p) * 150); width: auto; padding: 0 14px; }
  .hbtn-p { left: auto; right: calc(var(--p) * 60); width: auto; padding: 0 14px; }
  .menu { display: flex; position: absolute; right: calc(var(--p) * 12); top: calc(var(--p) * 6); width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: center;
    background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; cursor: pointer; }
  .menu span { display: block; width: 18px; height: 2px; background: var(--plat-100); }
  .sheet:not([hidden]) { display: grid; position: absolute; z-index: 20; top: 64px; left: 12px; right: 12px; padding: 12px; background: rgba(1,0,2,0.97); border: 1px solid var(--line); border-radius: 10px; }
  .sheet a { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-size: 16px; }
  .sheet .sheet-s { border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; justify-content: center; margin-top: 8px; }
  .sheet .sheet-p { background: var(--btn-gold); color: #16110A; border-radius: 6px; justify-content: center; margin-top: 8px; font-weight: 600; }
  .cards { grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--p) * 16); }
  .panels { grid-template-columns: 1fr; gap: 16px; }
  .closing { aspect-ratio: auto; }
  .c-art { position: relative; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 835 / 206; }
  .c-copy, .c-right, .c-r, .stats, .c-note { position: static; }
  .closing { display: grid; padding-bottom: 24px; }
  .c-copy { padding: 20px 24px 0; }
  .closing h2 { font-size: 30px; }
  .c-copy p { font-size: 16px; }
  .closing .btn-p, .closing .btn-s { width: auto; padding: 0 20px; font-size: 15px; }
  .c-right, .c-r { display: none; }
  .stats { margin: 20px 24px 0; height: auto; padding: 14px 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; }
  .stats dt { font-size: 24px; } .stats dd { font-size: 12px; text-align: center; }
  .c-note { padding: 12px 24px 0; }
  .ftr { aspect-ratio: auto; margin-top: 40px; display: grid; gap: 20px; justify-items: center; text-align: center; padding: 24px 0; }
  .f-brand, .f-mid, .f-right { position: static; width: auto; }
  .f-brand img { width: 220px; }
  .f-brand p, .f-mid { font-size: 14px; }
  .f-mid { border: 0; height: auto; }
  .f-legal a { font-size: 14px; min-height: 44px; }
  .f-right p { font-size: 12px; }
}
@media (max-width: 767px) {
  :root { --page: calc(100vw - 32px); }
  .page { padding-top: 12px; gap: 16px; }
  /* hero: the board's mobile panel — art above, copy below, same type voice */
  .hero { aspect-ratio: auto; display: grid; border-radius: 12px; }
  .hero-art { position: relative; left: 0; top: 0; width: 100%; height: 440px; margin-top: 64px; }
  .hero-art img { object-position: 64% 20%; }
  .hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,1) 0%, rgba(7,7,7,0) 45%); }
  .hdr { height: 64px; }
  .brand { left: 16px; top: 32px; width: 120px; margin: 0; }
  .hbtn-s { display: none; }
  .hbtn-p { top: 10px; right: 68px; height: 44px; font-size: 14px; }
  .menu { top: 10px; right: 12px; }
  .hero-copy { position: relative; left: 0; top: 0; width: auto; margin-top: -150px; padding: 0 20px 24px; }
  .eyebrow { font-size: 12px; }
  .hero h1 { font-size: 52px; margin-top: 12px; }
  .lede { font-size: 16px; width: auto; margin-top: 14px; }
  .hero .ctas { position: static; margin-top: 20px; }
  .hero .btn-p, .hero .btn-s { width: auto; flex: 1; height: 48px; font-size: 15px; }
  .discipline { display: none; }
  .signals { position: static; grid-template-columns: 1fr 1fr; row-gap: 16px; padding: 0 12px 24px; }
  .signals li { font-size: 11px; }
  .signals li:nth-child(3)::before { display: none; }
  .signals li + li::before { height: 40px; }
  .eco h2, .eco-sub, .cards { display: none; }
  .rows { display: grid; gap: 10px; }
  .rows a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px 8px 8px; background: var(--card); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; font-size: 17px; font-weight: 600; }
  .rows a::after { content: '→'; margin-left: auto; color: var(--gold-300); }
  .rows em { font-size: 11px; }
  .ri { width: 76px; height: 48px; border-radius: 6px; overflow: hidden; flex: none; border: 1px solid rgba(212,175,55,0.2); }
  .ri img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
  .motto { display: block; text-align: center; margin-top: 18px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--plat-300); }
  .panel h3 { font-size: calc(var(--p) * 15.5); }
  .p-btn { height: 40px; }
  .p-progress .p-btn { height: 40px; }
  .closing h2 { font-size: 26px; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .stats div:nth-child(3)::before { display: none; }
  .closing .ctas { flex-wrap: wrap; }
  .closing .btn-p, .closing .btn-s { flex: 1 1 100%; height: 48px; }
}
@media (max-width: 374px) {
  .hbtn-p { display: none; }
  .hero h1 { font-size: 46px; }
  .rows a { font-size: 16px; }
}

/* ---- delta pass 1 (overlay + width review, 2026-09-28) */
.card .tag { position: absolute; right: calc(var(--c) * 6); top: calc(var(--c) * 6); font-style: normal; padding: .3em .6em; border-radius: 1em; border: 1px solid var(--line);
  background: rgba(1,0,2,0.75); color: var(--gold-300); font-size: max(11px, calc(var(--c) * 6.4)); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 1199px) {
  /* below 1200 the 11px floor makes six-across and three-across illegible: same cards and panels, fewer per row */
  .cards { grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--p) * 16); }
  .panels { grid-template-columns: 1fr; gap: 16px; max-width: 760px; width: 100%; margin: 0 auto; padding: 0; }
}
@media (max-width: 767px) {
  .hero-art img { object-position: 56% 18%; }
  .p-progress { aspect-ratio: 322 / 194; }
  .p-progress .p-btn { top: calc(var(--p) * 154); }
  .c-art { height: 220px; aspect-ratio: auto; object-fit: cover; object-position: 66% 40%; }
}
@media (max-width: 767px) {
  .p-sub, .p-calc .p-sub { max-width: 58%; }
  .p-progress .p-sub { max-width: none; }
}
@media (max-width: 374px) {
  .eyebrow { letter-spacing: .08em; font-size: 11px; }
  .hero .ctas { flex-direction: column; }
  .hero .btn-p, .hero .btn-s { flex: none; width: 100%; }
  .p-progress { aspect-ratio: 322 / 206; }
  .p-progress .p-btn { top: calc(var(--p) * 166); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hdr { gap: 10px; }
  .hbtn { position: absolute; top: 12px; height: 44px; font-size: 13px; }
  .hbtn-s { right: 216px; left: auto; width: 128px; padding: 0; }
  .hbtn-p { right: 68px; left: auto; width: 140px; padding: 0; }
  .menu { top: 12px; right: 14px; }
  .brand { top: 34px; width: 130px; }
  .hero-copy { top: calc(var(--p) * 90); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .brand { top: 34px; }
  .hero-copy { top: calc(var(--p) * 104); }
  .eyebrow { letter-spacing: .1em; }
}
/* delta pass 2: signal columns measured on the board (label centres 93 / 262 / 430 / 608 board px → 4 × 171.7 from hero x −3) */
@media (min-width: 768px) { .signals { left: 0; right: auto; width: calc(var(--p) * 687); } }

/* ---- delta pass 3: phones follow the board's MOBILE HOMEPAGE panel (logo + menu bar; copy over the figure; no signals block;
        gold-outline icon rows; DISCIPLINE. DATA. RESULTS.) — measured from board region 857,972 → 1011,1473 at 390 px */
@media (max-width: 767px) {
  .hero { display: block; min-height: 640px; }
  .hero-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
  .hero-art img { object-position: 58% 22%; }
  .hero-art::after { background: linear-gradient(90deg, rgba(7,7,7,0.92) 0%, rgba(7,7,7,0.55) 52%, rgba(7,7,7,0.05) 80%),
    linear-gradient(0deg, rgba(7,7,7,0.95) 0%, rgba(7,7,7,0) 30%), linear-gradient(180deg, rgba(7,7,7,0.75) 0%, rgba(7,7,7,0) 16%); }
  .hbtn-p { display: none; }
  .brand { width: 132px; top: 40px; left: 22px; }
  .menu { top: 18px; right: 16px; border: 0; }
  .menu span { width: 26px; background: var(--gold-300); }
  .hero-copy { position: relative; margin: 0; padding: 172px 22px 34px; }
  .eyebrow { font-size: 12px; line-height: 1.5; max-width: 230px; }
  .hero h1 { font-size: 50px; margin-top: 8px; }
  .lede { max-width: 250px; font-size: 16px; }
  .hero .ctas { margin-top: 26px; flex-wrap: nowrap; }
  .hero .btn-p, .hero .btn-s { flex: 1 1 0; height: 50px; font-size: 14px; white-space: nowrap; }
  .signals { display: none; }
  .rows { gap: 12px; padding: 0 4px; }
  .rows a { min-height: 72px; padding: 0 18px; gap: 18px; border-color: rgba(212,175,55,0.55); border-radius: 8px; font-size: 19px; font-weight: 500; background: rgba(7,7,7,0.9); }
  .rows a::after { content: none; }
  .ri { width: 34px; height: 34px; border: 0; border-radius: 0; display: grid; place-items: center; }
  .ri svg { width: 32px; height: 32px; fill: none; stroke: var(--gold-300); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .motto { margin-top: 22px; font-size: 13px; letter-spacing: .24em; }
}
@media (max-width: 374px) {
  .hero-copy { padding-top: 150px; }
  .hero h1 { font-size: 44px; }
  .hero .ctas { flex-direction: row; }
  .hero .btn-p, .hero .btn-s { width: auto; font-size: 13px; }
}
@media (max-width: 767px) {
  /* board mobile: the figure sits upper-right at roughly half the panel height, lit; copy runs over its left edge */
  .hero-art { height: 470px; }
  .hero-art img { object-position: 70% 0%; }
  .hero-art::after { background: linear-gradient(90deg, rgba(7,7,7,0.88) 0%, rgba(7,7,7,0.35) 45%, rgba(7,7,7,0) 70%),
    linear-gradient(0deg, rgba(7,7,7,1) 0%, rgba(7,7,7,0) 38%), linear-gradient(180deg, rgba(7,7,7,0.7) 0%, rgba(7,7,7,0) 14%); }
}
@media (max-width: 374px) { .hero-art { height: 420px; } }
@media (max-width: 767px) {
  /* measured on the board's mobile panel: figure's left edge at ~45 % of the panel, cut by the right edge, head clear of the bar */
  .hero-art { top: 60px; height: 440px; }
  .hero-art img { object-position: 41% 0%; }
}
@media (max-width: 374px) { .hero-art { height: 400px; } }
@media (max-width: 767px) { .hero { min-height: 0; } }
/* defect fix (found by the tap test): header controls always above the hero copy layer */
.hdr { z-index: 5; } .brand, .hbtn, .menu { z-index: 6; } .sheet { z-index: 30; }
/* 44 px effective targets without changing the board's visible geometry: text links grow invisibly; gold buttons get a
   transparent hit extension (::after) — the drawn button stays board-sized */
.nav a, .f-legal a { min-height: 44px; }
.card a, .p-btn, .card a { position: absolute; }
.card a::after, .p-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nav a, .f-legal a { min-width: 44px; justify-content: center; }

/* ================================================================== FINAL POLISH (2026-09-28, bounded) — ecosystem material pass.
   Geometry, sizes, order and copy unchanged. One edge language (gold hairline, as the panels), measured depth, art that dissolves
   into the card body, and gold reserved for what is available now (Coming soon reads platinum). */
.card { border-color: rgba(212,175,55,0.24);
  background: linear-gradient(180deg, #0C0C0D 0%, #09090A 60%, #070708 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.5);
  transition: border-color 140ms cubic-bezier(.4,0,.2,1), transform 140ms cubic-bezier(.4,0,.2,1); }
.card::after { content: ''; position: absolute; left: calc(var(--c) * 2); right: calc(var(--c) * 2); top: calc(var(--c) * 62); height: calc(var(--c) * 24);
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.92) 100%); pointer-events: none; }
.card::before { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, rgba(212,175,55,0), rgba(241,200,106,0.7), rgba(212,175,55,0)); }
.card h3, .card p, .card a, .card .tag { z-index: 3; }
.card:hover, .card:focus-within { border-color: rgba(212,175,55,0.48); transform: translateY(-2px); }
.card.soon a { background: linear-gradient(180deg, #3A3B3E 0%, #2A2C30 100%); color: var(--plat-100); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover, .card:focus-within { transform: none; } }
@media (max-width: 767px) {
  .rows a { background: linear-gradient(180deg, #0D0D0E 0%, #08080A 100%); border-color: rgba(212,175,55,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(0,0,0,0.45); }
  .ri { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.30);
    background: radial-gradient(circle at 50% 35%, rgba(212,175,55,0.16), rgba(212,175,55,0) 70%), #0A0A0B; }
  .ri svg { width: 26px; height: 26px; }
  .ri img { width: 26px; height: auto; transform: none; object-fit: contain; }
  .rows .soon a { border-color: rgba(255,255,255,0.16); }
  .rows .soon .ri { border-color: rgba(255,255,255,0.18); background: #0A0A0B; }
  .rows .soon .ri svg { stroke: var(--plat-300); }
}

/* BRAND-CORRECTION PREVIEW · proposed bounded fix HB-4 (found by the stronger ancestor-clip gate, 2026-09-29):
   at <= 374 px the "Explore Progress" button overhung the progress panel by 4 px. Panel height grows 8 board px. */
@media (max-width: 374px) { .p-progress { aspect-ratio: 322 / 214; } }

/* =====================================================================
   FINAL BOUNDED PRE-SEAL CORRECTIONS · Founder / HELIOS approved 2026-09-30
   HB-8 (≤374 hero CTAs) · HB-9 (compact header 1024–1279; tablet + mobile hero and feature copy as real responsive
   states with a readable floor). The desktop board ≥1280 keeps its composition; only sub-floor type is lifted to the floor.
   ===================================================================== */

/* ---- HB-9 · readable floors on the board (desktop board ≥ 1024; tablet and phones have their own explicit sizes below) */
@media (min-width: 1024px) {
  .lede { font-size: max(14px, calc(var(--p) * 12.5)); }
  .eyebrow { font-size: max(12px, calc(var(--p) * 11.2)); }
  .discipline, .signals li, .signals i { font-size: max(12px, calc(var(--p) * 11)); }
  .eco-sub { font-size: max(14px, calc(var(--p) * 12.6)); }
  .hero .btn-p, .hero .btn-s { font-size: max(13px, calc(var(--p) * 11)); }
  .card p { font-size: max(14px, calc(var(--c) * 10.4)); }
  .card a { font-size: max(13px, calc(var(--c) * 9.6)); }
  .card h3 em, .rows em, .card .tag { font-size: max(12px, calc(var(--c) * 6.4)); }
  .p-sub, .p-calc .p-sub, .p-progress .p-sub { font-size: max(14px, calc(var(--p) * 11)); }
  .p-btn { font-size: max(13px, calc(var(--p) * 9.8)); }
  .p-sample, .tiles dt, .tiles dd.d { font-size: max(12px, calc(var(--p) * 9.6)); }
  .c-copy p { font-size: max(14px, calc(var(--p) * 12)); }
  .closing .btn-p, .closing .btn-s { font-size: max(13px, calc(var(--p) * 11)); }
  .c-right, .stats dd, .c-note { font-size: max(12px, calc(var(--p) * 10.4)); }
  .f-brand p, .f-mid, .f-legal a { font-size: max(13px, calc(var(--p) * 11.5)); }
  .f-right p { font-size: max(12px, calc(var(--p) * 9.6)); }
}
/* ---- HB-9 · tablet + phone lifts only where the existing responsive sizes were under the floor */
@media (max-width: 1023px) {
  .card h3 em, .rows em, .card .tag { font-size: 12px; }
  .c-note { font-size: 12px; }
}

/* ---- HB-9 · compact / menu header below 1280 (≥1280 keeps the full board header) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { display: none; }
  .hbtn { top: 12px; height: 44px; font-size: 14px; }
  .hbtn-s { left: auto; right: 216px; width: 136px; padding: 0; }
  .hbtn-p { left: auto; right: 68px; width: 140px; padding: 0; }
  .menu { display: flex; position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: center;
    background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; cursor: pointer; }
  .menu span { display: block; width: 18px; height: 2px; background: var(--plat-100); }
  .sheet:not([hidden]) { display: grid; position: absolute; z-index: 30; top: 64px; right: 12px; width: 340px; padding: 12px; background: rgba(1,0,2,0.97); border: 1px solid var(--line); border-radius: 10px; }
  .sheet a { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-size: 16px; }
  .sheet .sheet-s { border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; justify-content: center; margin-top: 8px; }
  .sheet .sheet-p { background: var(--btn-gold); color: #16110A; border-radius: 6px; justify-content: center; margin-top: 8px; font-weight: 600; }
}

/* ---- HB-9 · tablet (768–1023): a real responsive hero, not the desktop board scaled down */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { aspect-ratio: auto; display: block; min-height: 600px; }
  .hero-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .hero-art img { object-position: 62% 18%; }
  .hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.62) 44%, rgba(7,7,7,0.05) 72%), linear-gradient(0deg, rgba(7,7,7,0.96) 0%, rgba(7,7,7,0) 30%); }
  .hero-copy { position: relative; left: 0; top: 0; width: auto; max-width: 470px; padding: 128px 0 0 40px; }
  .eyebrow { font-size: 13px; letter-spacing: .14em; }
  .hero h1 { font-size: 64px; margin-top: 14px; }
  .lede { width: auto; max-width: 400px; font-size: 18px; margin-top: 18px; }
  .hero .ctas { position: static; margin-top: 26px; gap: 12px; }
  .hero .btn-p, .hero .btn-s { width: auto; height: 50px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
  .discipline { left: auto; right: 32px; top: 112px; font-size: 12px; }
  .signals { position: relative; left: 0; right: 0; top: auto; width: auto; margin: 40px 16px 0; padding-bottom: 28px; }
  .signals li, .signals i { font-size: 12px; }
  .signals li + li::before { height: 44px; }
  .eco h2 { font-size: 24px; }
  .eco-sub { font-size: 16px; margin-top: 8px; }
}

/* ---- HB-9 · phones: feature panels flow as a readable stack over their art (no board-scaled absolute copy) */
@media (max-width: 767px) {
  .panel, .p-progress, .p-calc { aspect-ratio: auto; min-height: 210px; padding: 22px 20px 20px; display: grid; align-content: start; gap: 10px; }
  .panel h3, .panel .p-sub, .panel .tiles { position: relative; left: auto; right: auto; top: auto; }
  .panel h3 { font-size: 20px; line-height: 1.2; max-width: 64%; }
  .panel .p-sub { font-size: 15px; line-height: 1.45; max-width: 58%; }
  .panel .p-btn { position: relative; left: auto; top: auto; justify-self: start; height: 44px; padding: 0 18px; font-size: 15px; margin-top: 6px; }
  .p-progress h3, .p-progress .p-sub { max-width: none; }
  .p-progress .p-sample { top: 24px; right: 18px; font-size: 12px; }
  .panel .tiles { height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  .tiles div { padding: 10px; gap: 2px; border-radius: 8px; }
  .tiles dt, .tiles dd.d { font-size: 12px; }
  .tiles dd { font-size: 20px; }
}

/* ---- HB-8 · ≤374: hero CTAs stack full width (no near-zero inner padding) */
@media (max-width: 374px) {
  .hero .ctas { flex-direction: column; gap: 10px; }
  .hero .btn-p, .hero .btn-s { flex: none; width: 100%; font-size: 15px; }
  .panel h3 { max-width: 70%; }
}
/* ---- HB-9 · compact band: with the readable card floor, six-across no longer fits below 1280 → three-across (as below 1200) */
@media (max-width: 1279px) { .cards { grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--p) * 16); } }
/* ---- HB-9 · phones: "Sample data" sits in the flow above the stat tiles; tiles fit 320 without widening the page */
@media (max-width: 767px) {
  .p-progress .p-sample { position: relative; top: auto; right: auto; justify-self: start; }
  .panel .tiles > div { min-width: 0; }
}
@media (max-width: 374px) {
  .panel .tiles { gap: 6px; }
  .tiles div { padding: 8px 7px; }
  .tiles dd { font-size: 18px; }
}
/* ---- HB-9 · 1280–1439: the 14 px card floor needs a third line → cards 7 % taller, button lower (same art, same order) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .card { aspect-ratio: 157 / 192; }
  .card a { top: calc(var(--c) * 156); }
}
/* ---- HB-9 · ≤374 phone rows: the 12 px "Coming soon" chip fits without widening the page */
@media (max-width: 374px) {
  .rows li, .rows a { min-width: 0; }
  .rows a { padding: 0 12px; gap: 12px; }
  .rows em { margin-left: .25em; }
}

/* calculator syringe art (2026-09-30, DAP-A closed): on phones the panel is taller than the art, so anchor the crop on the syringe */
@media (max-width: 767px) { .p-calc .p-art { object-position: 92% 55%; } }

/* ---- HB-10 · WebKit / Safari compatibility (P0 pre-seal, approved 2026-10-02): the page column may never grow wider than the page.
   WebKit let the aspect-ratio sections widen the automatic grid column by about 19 % at 1024-1440 (sideways scroll; the
   "One system" heading over the hero buttons). Chromium and Firefox render exactly as before. */
.page { grid-template-columns: minmax(0, 1fr); }

/* ---- HB-11 · scripting-off menu (P0 pre-seal source correction, 2026-10-03). The compact header (menu instead of the full nav)
   runs to 1279 px, so the fallback covers the whole range. With scripting off the menu control is a real link to #sheet and the
   sheet opens with :target (same geometry as the scripted sheet); "Close menu" is last and returns to the menu link.
   With scripting on none of this can match: the <noscript> link is not parsed and the URL never carries #sheet. */
@media (max-width: 1023px) {
  .sheet:target { display: grid; position: absolute; z-index: 20; top: 64px; left: 12px; right: 12px; padding: 12px; background: rgba(1,0,2,0.97); border: 1px solid var(--line); border-radius: 10px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .sheet:target { display: grid; position: absolute; z-index: 30; top: 64px; right: 12px; width: 340px; padding: 12px; background: rgba(1,0,2,0.97); border: 1px solid var(--line); border-radius: 10px; }
}
@media (max-width: 1279px) {
  .sheet .sheet-close { justify-content: center; margin-top: 8px; color: var(--plat-300); }
}