/* =====================================================================
   RAEVOS PUBLIC WEBSITE — SECONDARY ROUTES (authority candidates, 2026-09-29)
   Loaded after the sealed homepage's css/home.css, which is used unchanged. This file only:
   1) places the sealed header exactly where the homepage draws it (inside the first framed panel, same container width),
   2) adds route components built from the homepage's own materials: framed #070707 panels with the gold hairline,
      bevelled gold buttons, Inter, uppercase medium section heads, tile language of the progress panel.
   ===================================================================== */
.subpage { --ink2: #CED1D5; --ink3: #A7ACB3; }
.shell { position: relative; }
main.sub { display: grid; gap: calc(var(--page) * 10 / 1002); --p: calc(var(--page) / 755); }

/* ---- header: same box as the homepage hero's content box (page width − 2 px border), same top */
.hwrap { position: absolute; left: 1px; right: 1px; top: 21px; height: 0; z-index: 20; container-type: inline-size; }
.hwrap > * { --p: calc(100cqw / 755); }
.shell .nav a:first-child { color: var(--plat-100); }
.shell .nav a[aria-current="page"], .shell .sheet a[aria-current="page"] { color: var(--gold-300); }
@media (max-width: 767px) { .hwrap { top: 13px; } }

/* ---- shared type */
.kick { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.t-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-600); }
.t-d, .fine { font-size: 13px; line-height: 1.5; color: var(--plat-600); }
.lnk { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-300); font-weight: 600; font-size: 14px; }
.sub .btn-p, .sub .btn-s { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 7px; white-space: nowrap; }
.sub .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---- page intro panel (the homepage hero's frame, route-sized) */
.shead { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--page) * 8 / 755);
  min-height: calc(var(--page) * 300 / 755); padding: calc(var(--page) * 84 / 755) 0 calc(var(--page) * 44 / 755); display: flex; align-items: center; }
.sh-copy { position: relative; z-index: 2; width: 46%; padding-left: calc(var(--page) * 38 / 755); }
.shead h1 { margin-top: 16px; font-size: clamp(40px, calc(var(--page) * 38 / 755), 72px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; color: var(--plat-100); text-wrap: balance; }
.shead h1 span { color: #D9B870; }
.shead .sh-lede { margin-top: 20px; display: grid; gap: 10px; }
.shead .sh-lede p { font-size: 18px; line-height: 1.55; color: var(--plat-100); max-width: 520px; }
.shead .sh-lede .truth { font-weight: 600; }
.sh-art { position: absolute; inset: 0 0 0 38%; z-index: 0; }
.sh-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #070707 0%, rgba(7,7,7,.55) 22%, rgba(7,7,7,0) 50%), linear-gradient(0deg, rgba(7,7,7,.7) 0%, rgba(7,7,7,0) 30%); }
.sh-art img { width: 100%; height: 100%; object-fit: cover; }
.sh-figure .sh-art img { object-position: 62% 18%; }
.sh-wide .sh-art img { object-position: 70% 50%; }
.sh-wide .sh-art img.soft { object-fit: contain; object-position: 70% 50%; }
.img-note { position: absolute; right: 20px; bottom: 14px; z-index: 3; font-size: 11px; color: var(--plat-600); }
.facts { list-style: none; display: flex; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; max-width: 520px; }
.facts li { flex: 1; display: grid; gap: 4px; padding-right: 16px; }
.facts li + li { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
.facts b { font-size: 34px; font-weight: 600; color: var(--gold-300); line-height: 1; }
.facts span { font-size: 13px; color: var(--plat-300); }
.shead .fine { margin-top: 10px; }
.also { margin-top: 18px; font-size: 14px; color: var(--plat-600); }
.also a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; padding: 0 4px; color: var(--plat-100); text-decoration: underline; text-underline-offset: 3px; }
/* product screen in the intro */
.sh-shot .sh-art { inset: calc(var(--page) * 70 / 755) calc(var(--page) * 22 / 755) calc(var(--page) * 22 / 755) 50%; }
.sh-shot .sh-art::after { display: none; }
.shot { margin: 0; border: 1px solid rgba(212,175,55,.28); border-radius: 10px; overflow: hidden; background: #0A0A0B;
  box-shadow: 0 0 0 1px rgba(212,175,55,.06), 0 30px 70px rgba(0,0,0,.6), 0 0 80px rgba(212,175,55,.08); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: 10px 14px; font-size: 13px; color: var(--plat-600); border-top: 1px solid rgba(255,255,255,.08); }
.shot figcaption b { color: var(--gold-300); font-weight: 600; }
.shot.in-head { height: 100%; display: flex; flex-direction: column; }
.shot.in-head img { flex: 1; min-height: 0; object-fit: cover; object-position: 0 0; }
/* R mark / plate / vector heads */
.sh-mark .sh-art, .sh-plate .sh-art, .sh-vec .sh-art { display: grid; place-items: center; inset: 0 0 0 46%; }
.sh-mark .sh-art::after, .sh-plate .sh-art::after, .sh-vec .sh-art::after { display: none; }
.rmark { position: relative; width: min(46%, 300px); }
.rmark::before { content: ''; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.18), rgba(212,175,55,0) 62%); }
.rmark img { position: relative; width: 100%; }
.strata { width: 88%; max-width: 620px; height: auto; }
.strata path { fill: none; stroke: var(--gold-500); stroke-width: 1.2; }
.plate { width: min(80%, 460px); display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pl-row { background: #0A0A0B; padding: 26px 28px; display: grid; gap: 6px; }
.pl-row.is-now { background: radial-gradient(ellipse 90% 80% at 0% 0%, rgba(212,175,55,.14), rgba(10,10,11,0) 70%), #0A0A0B; }
.pl-v { font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: var(--gold-300); line-height: 1.05; }
.pl-v.muted { color: var(--plat-300); font-size: 34px; }
.sh-compact { min-height: 0; padding-bottom: 34px; }
.sh-compact .sh-copy { width: auto; max-width: 900px; }
.sh-plain .sh-copy { width: 70%; }
.sh-ui .sh-art { display: grid; place-items: center; inset: 0 0 0 50%; }
.sh-ui .sh-art::after { display: none; }

/* ---- sections */
.ssec { display: grid; gap: 22px; padding: calc(var(--page) * 18 / 755) calc(var(--page) * 6 / 755) calc(var(--page) * 6 / 755); }
.sec-h h2 { font-size: clamp(22px, calc(var(--page) * 14.6 / 755), 30px); line-height: 1.15; font-weight: 500; letter-spacing: .005em; text-transform: uppercase; color: var(--plat-100); }
.sec-h p { margin-top: 8px; font-size: 16px; color: var(--plat-300); max-width: 760px; }
.stiles { display: grid; gap: 14px; }
.t2 { grid-template-columns: repeat(2, 1fr); } .t3 { grid-template-columns: repeat(3, 1fr); } .t4 { grid-template-columns: repeat(4, 1fr); }
.stile { background: rgba(10,10,11,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 22px 24px; display: grid; gap: 6px; align-content: start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.t-v { font-size: 26px; font-weight: 500; line-height: 1.15; color: var(--plat-100); }
.stile.is-now { border-color: rgba(212,175,55,.42); background: radial-gradient(ellipse 90% 90% at 0% 0%, rgba(212,175,55,.12), rgba(10,10,11,0) 70%), rgba(10,10,11,.92); }
.stile.is-now .t-v { color: var(--gold-300); }
.t4 .t-v { font-size: 34px; }
.t4 .stile:first-child .t-v { color: var(--gold-300); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(212,175,55,.45); color: var(--gold-300);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.chip.sample { border-color: rgba(212,175,55,.3); }
.links3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lk { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; align-items: center; min-height: 88px; padding: 18px 20px; background: linear-gradient(180deg, #0D0D0E, #08080A);
  border: 1px solid rgba(212,175,55,.3); border-radius: 10px; transition: border-color 140ms cubic-bezier(.4,0,.2,1); }
.lk:hover, .lk:focus-visible { border-color: rgba(212,175,55,.6); }
.lk .ic { grid-row: 1 / span 2; }
.lk b { font-size: 18px; font-weight: 600; } .lk span:not(.ic) { font-size: 14px; color: var(--plat-300); }
.ic { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(212,175,55,.3);
  background: radial-gradient(circle at 50% 35%, rgba(212,175,55,.16), rgba(212,175,55,0) 70%), #0A0A0B; }
.ic svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-300); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* steps (five-part flows) */
.steps { list-style: none; display: grid; gap: 14px; position: relative; }
.steps.n5 { grid-template-columns: repeat(5, 1fr); }
.steps::before { content: ''; position: absolute; left: 4%; right: 4%; top: 24px; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.5) 12%, rgba(212,175,55,.5) 88%, rgba(212,175,55,0)); }
.step { position: relative; display: grid; gap: 8px; align-content: start; padding: 0 16px 20px 0; }
.step .ic { position: relative; background-color: #0A0A0B; }
.s-n { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.step h3 { font-size: 19px; font-weight: 600; } .step p:not(.s-n) { font-size: 14.5px; line-height: 1.5; color: var(--plat-300); }

/* band (statement) */
.band { display: grid; grid-template-columns: 240px 1fr; gap: 36px; padding: 40px calc(var(--page) * 30 / 755); background: linear-gradient(90deg, rgba(212,175,55,.08), rgba(212,175,55,0) 55%), #070707;
  border: 1px solid var(--line); border-radius: 12px; }
.b-k { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); padding-top: 8px; }
.b-t { font-size: 24px; line-height: 1.45; color: var(--plat-300); max-width: 900px; } .b-t b { color: var(--plat-100); font-weight: 600; }

/* duo panels, card2, lists */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card2 { background: rgba(10,10,11,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 24px 26px; display: grid; gap: 12px; align-content: start; }
.card2 p:not(.t-k):not(.fine) { font-size: 15.5px; color: var(--plat-300); }
.card2.dashed { border-style: dashed; background: #070707; }
.li { list-style: none; display: grid; gap: 10px; }
.li li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--plat-300); }
.li li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.li.no li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--plat-600); }
.dp { display: grid; grid-template-rows: 280px auto; background: #0A0A0B; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dp-art { position: relative; overflow: hidden; display: grid; place-items: center; background: #050506; border-bottom: 1px solid rgba(255,255,255,.08); }
.dp-art img { width: 100%; height: 100%; object-fit: cover; }
.dp-art.vialbg { background: radial-gradient(circle at 50% 62%, rgba(212,175,55,.22), rgba(5,5,6,0) 60%), #050506; }
.dp-art.vialbg img { width: auto; height: 92%; object-fit: contain; }
.dp-b { display: grid; gap: 10px; padding: 24px 26px 28px; } .dp-b h3 { font-size: 21px; font-weight: 600; } .dp-b p:not(.t-k) { font-size: 15.5px; color: var(--plat-300); }

/* record anatomy */
.anat { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.an { background: #0A0A0B; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.an header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,0)); }
.an h3 { font-size: 28px; font-weight: 700; margin-top: 6px; }
.an-r { padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.08); display: grid; gap: 8px; } .an-r:last-child { border-bottom: 0; }
.an-r p:not(.t-k) { font-size: 15px; color: var(--plat-300); } .an-r b { color: var(--plat-100); }
.an-r.two { grid-template-columns: 1fr 1fr; } .an-r.two > div { display: grid; gap: 6px; }
.apps { list-style: none; display: grid; gap: 8px; }
.apps li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: 14px; color: var(--plat-300); }
.an-l { list-style: none; counter-reset: an; display: grid; gap: 22px; }
.an-l li { counter-increment: an; position: relative; padding-left: 56px; display: grid; gap: 4px; }
.an-l li::before { content: counter(an, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--gold-300); border: 1px solid rgba(212,175,55,.35); }
.an-l b { font-size: 17px; } .an-l span { font-size: 15px; color: var(--plat-300); }
.grade { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.grade.g-strong { color: #3FAE79; border-color: rgba(63,174,121,.4); background: rgba(63,174,121,.1); }
.grade.g-moderate { color: var(--gold-300); border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.1); }
.grade.g-limited { color: var(--plat-300); border-color: rgba(255,255,255,.2); }
.grade.g-preliminary { color: var(--plat-600); border-color: rgba(255,255,255,.2); border-style: dashed; }
.grade.g-insufficient { color: #E57A72; border-color: rgba(216,72,63,.4); background: rgba(216,72,63,.08); }
.gbars { display: grid; gap: 12px; }
.gb { display: grid; grid-template-columns: 120px 1fr 40px; gap: 12px; align-items: center; font-size: 14px; color: var(--plat-300); }
.gb i { height: 10px; border-radius: 5px; background: #1A1D21; overflow: hidden; } .gb i b { display: block; height: 100%; border-radius: 5px; }
.gb em { font-style: normal; text-align: right; font-weight: 600; color: var(--plat-100); }
.gb.g-strong i b { background: #3FAE79; } .gb.g-moderate i b { background: var(--gold-500); } .gb.g-limited i b { background: var(--plat-300); } .gb.g-insufficient i b { background: #D8483F; }
.gb.g-dev i { background: repeating-linear-gradient(90deg, #1A1D21 0 6px, transparent 6px 10px); } .gb.g-dev span, .gb.g-dev em { color: var(--plat-600); }
.stack { list-style: none; display: grid; gap: 10px; counter-reset: st; }
.stack li { counter-increment: st; display: grid; grid-template-columns: 48px 220px 1fr auto; gap: 18px; align-items: center; min-height: 72px; padding: 14px 22px; background: #0A0A0B; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.stack li::before { content: counter(st); font-size: 26px; font-weight: 700; color: var(--plat-300); }
.stack li:first-child { border-color: rgba(212,175,55,.35); } .stack li:first-child::before { color: var(--gold-300); }
.stack b { font-size: 17px; } .stack span { font-size: 15px; color: var(--plat-300); }
.stack em { font-style: normal; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; white-space: nowrap; }

/* ask / soon row */
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #070707; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ask-art img { width: 100%; height: 100%; object-fit: cover; }
.ask-qa { padding: 30px 32px; display: grid; gap: 10px; align-content: center; }
.q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 12px 12px 2px 12px; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.3); font-size: 15px; }
.a { max-width: 85%; padding: 10px 14px; border-radius: 12px 12px 12px 2px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 15px; color: var(--plat-300); } .a b { color: var(--plat-100); }
.ask-qa .fine { margin-top: 8px; }
.soonrow { display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 0; border: 1px dashed rgba(255,255,255,.2); border-radius: 12px; overflow: hidden; background: #070707; }
.soonrow img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.soonrow > div { padding: 22px 28px; display: grid; gap: 8px; } .soonrow p:not(.t-k) { color: var(--plat-300); }

/* protocols ui */
.calcard { width: min(88%, 480px); padding: 22px; display: grid; gap: 16px; background: #0A0A0B; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.cc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cc-h b { font-size: 17px; }
.cgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cd { display: grid; justify-items: center; gap: 10px; padding: 12px 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: 12px; color: var(--plat-600); }
.cd .dots { display: grid; gap: 5px; min-height: 34px; align-content: start; }
.cd i, .ckey i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.pa { background: var(--gold-500); } .pb { background: var(--plat-300); } .pc { background: #3FAE79; }
.cd.skipped i { opacity: .35; } .cd.today { border-color: var(--gold-500); background: rgba(212,175,55,.08); color: var(--gold-300); } .cd.upcoming { border-style: dashed; }
.ckey { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--plat-300); } .ckey li { display: flex; align-items: center; gap: 8px; }
.due { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.due span { font-size: 13px; color: var(--plat-600); } .due em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 12px; font-weight: 600; color: var(--gold-300); border: 1px solid rgba(212,175,55,.4); border-radius: 11px; padding: 3px 10px; }
.tl { background: #0A0A0B; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 22px 26px 26px; display: grid; gap: 22px; }
.tl ol { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tl ol::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: linear-gradient(90deg, var(--gold-700), var(--gold-500) 48%, #2A2E34 56%); }
.tl li { position: relative; padding-top: 28px; display: grid; gap: 4px; } .tl li b { font-size: 16px; } .tl li span { font-size: 14px; color: var(--plat-300); }
.tl li::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-700); border: 2px solid #0A0A0B; }
.tl li.n::before { background: var(--gold-500); box-shadow: 0 0 0 5px rgba(212,175,55,.2); } .tl li.f::before { background: #0A0A0B; border: 2px dashed var(--plat-600); }

/* calculator */
.calc { display: grid; gap: 28px; padding: 28px; background: #0A0A0B; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.c3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c3 li { display: grid; gap: 8px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.c3 li p:not(.t-k) { font-size: 15px; color: var(--plat-300); } .c3 b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.c3 .out { border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.07); } .c3 .out b { color: var(--gold-300); }
.scale { display: grid; gap: 8px; }
.u100 { width: 100%; height: auto; overflow: visible; }
.u100 .barrel { fill: rgba(255,255,255,.05); stroke: var(--plat-600); stroke-width: 1.5; } .u100 .liquid { fill: rgba(212,175,55,.45); }
.u100 .stopper { fill: #2A2E34; stroke: var(--plat-600); } .u100 .rod { stroke: #2A2E34; stroke-width: 10; } .u100 .needle { stroke: var(--plat-600); stroke-width: 2; }
.u100 .hub { fill: #1A1D21; stroke: var(--plat-600); } .u100 .ticks path { stroke: var(--plat-300); stroke-width: 1.2; }
.u100 .nums { fill: var(--plat-600); } .u100 .draw { stroke: var(--gold-500); stroke-width: 1.5; fill: none; } .u100 .drawlbl { font-weight: 600; fill: var(--gold-300); }
.u100.narrow, .scale .narrow { display: none; }

/* recovery planned */
.plan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pl { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; background: #070707; }
.pl .ic { border-color: rgba(255,255,255,.18); background: #0A0A0B; } .pl .ic svg { stroke: var(--plat-300); } .pl b { font-size: 16px; }

/* science ladder */
.ladder { list-style: none; display: grid; gap: 10px; }
.ld { display: grid; grid-template-columns: 150px 1fr 230px; gap: 22px; align-items: center; min-height: 70px; padding: 14px 22px; background: #0A0A0B; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.ld p { font-size: 15.5px; color: var(--plat-300); } .ld-n { text-align: right; } .ld-n b { font-size: 26px; color: var(--plat-100); }
.ld.g-preliminary { background: transparent; border-style: dashed; }

/* about reserved slot */
.reserved { border: 1px dashed var(--gold-700); border-radius: 12px; padding: 26px 28px; display: grid; gap: 8px; background: rgba(212,175,55,.03); } .reserved p:not(.t-k) { color: var(--plat-300); }

/* learn */
.lcards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lc { display: grid; grid-template-rows: auto 1fr; background: #0A0A0B; border: 1px solid rgba(212,175,55,.24); border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.lc img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-bottom: 1px solid rgba(255,255,255,.08); }
.lc > div { padding: 18px 20px 12px; display: grid; gap: 8px; align-content: start; }
.lc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .lc-h b { font-size: 18px; } .lc > div > p:nth-child(2) { font-size: 15px; color: var(--plat-300); }

/* faq */
.faq { display: grid; gap: 10px; max-width: 900px; }
.faq details { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #0A0A0B; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 0 20px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold-300); font-size: 22px; font-weight: 400; } .faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 20px 18px; color: var(--plat-300); } .faq a { color: var(--gold-300); text-decoration: underline; }

/* legal */
.lg-meta { display: flex; margin-top: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; width: max-content; max-width: 100%; }
.lg-meta div { padding: 10px 18px; display: grid; gap: 2px; } .lg-meta div + div { border-left: 1px solid rgba(255,255,255,.12); }
.lg-meta dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-600); } .lg-meta dd { font-size: 15px; font-weight: 600; }
.lg-notice { margin-top: 18px; max-width: 900px; padding: 14px 18px; border-left: 2px solid var(--gold-500); background: rgba(212,175,55,.06); font-size: 15px; line-height: 1.6; color: var(--plat-300); }
.lg-notice b { color: var(--plat-100); }
.legal { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; padding: 26px calc(var(--page) * 6 / 755) 10px; }
.lg-side { position: sticky; top: 20px; display: grid; gap: 24px; }
.doc-nav { display: grid; gap: 4px; }
.doc-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 8px; font-size: 15px; color: var(--plat-300); border: 1px solid transparent; }
.doc-nav a[aria-current] { background: #0A0A0B; border-color: rgba(212,175,55,.35); color: var(--gold-300); font-weight: 600; }
.toc { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; } .toc ol { list-style: none; display: grid; margin-top: 8px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; line-height: 1.35; font-size: 14px; color: var(--plat-300); border-left: 1px solid rgba(255,255,255,.12); }
.toc a:hover { color: var(--gold-300); border-left-color: var(--gold-500); }
.prose { max-width: 760px; } .lg-sum { font-size: 18px; line-height: 1.6; color: var(--plat-100); margin-bottom: 8px; }
.prose h2 { font-size: 22px; font-weight: 600; margin: 34px 0 12px; } .prose p { font-size: 16px; line-height: 1.75; color: var(--plat-300); margin-bottom: 14px; }
.lg-sec { scroll-margin-top: 20px; }

/* closing panel (no landscape: the deferred closing art stays homepage-only) */
.pclose { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 24px; padding: 48px calc(var(--page) * 36 / 755);
  background: radial-gradient(ellipse 60% 120% at 85% 50%, rgba(212,175,55,.14), rgba(7,7,7,0) 65%), #070707; border: 1px solid var(--line); border-radius: 12px; }
.pclose h2 { margin-top: 12px; font-size: clamp(28px, calc(var(--page) * 19.4 / 755), 40px); line-height: 1.15; font-weight: 500; text-transform: uppercase; }
.pclose h2 span { color: #E9C986; } .pc-copy > p:not(.kick):not(.member) { margin-top: 12px; font-size: 17px; color: var(--plat-300); }
.member { margin-top: 12px; font-size: 14px; color: var(--plat-600); } .member a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--gold-300); }
.pc-mark { justify-self: center; width: min(220px, 60%); } .pc-mark img { width: 100%; }

/* eco reuse on /platform: the homepage section, set as a page section */
.eco-page { padding-top: calc(var(--page) * 14 / 755); }

/* ================================================================== responsive (same family) */
@media (max-width: 1199px) {
  .steps.n5 { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } .steps::before { display: none; }
  .plan { grid-template-columns: repeat(3, 1fr); } .t4 { grid-template-columns: repeat(2, 1fr); }
  .anat { grid-template-columns: 1fr; } .stack li { grid-template-columns: 40px 180px 1fr; } .stack em { grid-column: 2 / -1; justify-self: start; }
  .ld { grid-template-columns: 140px 1fr 190px; }
}
@media (max-width: 1023px) {
  .shead { padding-top: 96px; min-height: 0; flex-direction: column; align-items: stretch; }
  .sh-copy { width: auto; padding: 0 28px; order: 2; }
  .sh-art, .sh-shot .sh-art, .sh-mark .sh-art, .sh-plate .sh-art, .sh-vec .sh-art, .sh-ui .sh-art { position: relative; inset: auto; order: 1; margin: 0 20px 28px; height: 360px; }
  .sh-art::after { background: linear-gradient(0deg, #070707 0%, rgba(7,7,7,0) 40%); }
  .sh-shot .sh-art, .sh-ui .sh-art, .sh-plate .sh-art { height: auto; }
  .img-note { position: static; order: 3; padding: 16px 28px 0; }
  .sh-plain .sh-copy { width: auto; }
  .t3, .links3, .lcards { grid-template-columns: 1fr 1fr; } .duo { grid-template-columns: 1fr; } .c3 { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; gap: 24px; } .lg-side { position: static; } .toc { display: none; }
  .tl ol { grid-template-columns: 1fr; gap: 0; } .tl ol::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl li { padding: 0 0 20px 34px; }
  .band { grid-template-columns: 1fr; gap: 12px; } .b-k { padding-top: 0; }
  .ask { grid-template-columns: 1fr; } .ask-art img { height: 260px; }
  .pclose { grid-template-columns: 1fr; } .pc-mark { display: none; }
}
@media (max-width: 767px) {
  main.sub { gap: 16px; }
  .shead { padding-top: 76px; border-radius: 12px; }
  .sh-art, .sh-mark .sh-art, .sh-vec .sh-art { height: 250px; margin: 0 12px 22px; }
  .sh-copy { padding: 0 20px; }
  .shead h1 { font-size: 42px; } .shead .sh-lede p { font-size: 16.5px; }
  .sub .ctas { flex-direction: column; } .sub .btn-p, .sub .btn-s { width: 100%; }
  .facts b { font-size: 26px; } .facts li { padding-right: 10px; } .facts li + li { padding-left: 10px; }
  .ssec { padding: 18px 2px 4px; } .sec-h h2 { font-size: 22px; }
  .t2, .t3, .t4, .links3, .lcards, .plan { grid-template-columns: 1fr; } .steps.n5 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 48px 1fr; gap: 4px 14px; padding: 0; } .step .ic { grid-row: 1 / span 3; } .s-n { margin-top: 0; }
  .an-r.two { grid-template-columns: 1fr; } .stack li { grid-template-columns: 32px 1fr; gap: 6px 12px; padding: 14px 16px; } .stack li::before { grid-row: 1 / span 3; font-size: 22px; } .stack em { grid-column: 2; white-space: normal; }
  .ld { grid-template-columns: 1fr auto; gap: 8px 14px; padding: 14px 16px; } .ld p:not(.ld-n) { grid-column: 1 / -1; grid-row: 2; } .ld .ld-n { grid-row: 1; grid-column: 2; font-size: 13px; } .ld-n b { font-size: 20px; }
  .gb { grid-template-columns: 96px 1fr 32px; gap: 10px; }
  .u100.wide, .scale .wide { display: none; } .u100.narrow, .scale p.narrow { display: block; }
  .calc { padding: 18px; } .c3 b { font-size: 28px; }
  .band { padding: 28px 22px; } .b-t { font-size: 19px; }
  .soonrow { grid-template-columns: 1fr; } .soonrow img { height: 160px; }
  .calcard { width: 100%; padding: 16px; } .cgrid { gap: 4px; } .cd { font-size: 11px; }
  .pclose { padding: 32px 22px; } .pclose h2 { font-size: 26px; }
  .legal { padding: 16px 0 4px; } .lg-meta { width: 100%; } .lg-meta div { flex: 1; }
  .dp { grid-template-rows: 220px auto; } .dp-b { padding: 20px; }
  .an h3 { font-size: 24px; } .an header, .an-r { padding-left: 18px; padding-right: 18px; }
  .plate { width: 100%; } .pl-v { font-size: 36px; }
  .img-note { padding: 12px 20px 0; }
  .facts { flex-wrap: wrap; }
}
@media (max-width: 374px) {
  .shead h1 { font-size: 36px; } .facts li:nth-child(3) { flex-basis: 100%; padding-left: 0; border-left: 0; margin-top: 12px; }
  .cd span:first-child { font-size: 11px; } .cgrid { gap: 3px; }
  .lk { grid-template-columns: 44px 1fr; padding: 14px; }
}

/* delta pass 1: intro art starts below the header band, as on the homepage (hero art top = 52 board px of 755) */
@media (min-width: 1024px) {
  .sh-art { top: calc(var(--page) * 52 / 755); }
  .sh-art::after { background: linear-gradient(90deg, #070707 0%, rgba(7,7,7,.55) 22%, rgba(7,7,7,0) 50%), linear-gradient(0deg, rgba(7,7,7,.7) 0%, rgba(7,7,7,0) 30%), linear-gradient(180deg, rgba(7,7,7,.8) 0%, rgba(7,7,7,0) 14%); }
}

/* ================================================================== READABILITY PASS (2026-09-29, measured at 100% scale)
   Body copy ≥ 16 px · supporting copy 14–15 px · metadata / chips ≥ 12 px. Display type unchanged. */
.step p:not(.s-n), .card2 p:not(.t-k):not(.fine), .li li, .dp-b p:not(.t-k), .an-r p:not(.t-k), .c3 li p:not(.t-k), .stack span, .an-l span, .ld p:not(.ld-n),
.q, .a, .lc > div > p:nth-child(2), .lg-notice, .prose p, .soonrow p:not(.t-k), .faq details p, .pc-copy > p:not(.kick):not(.member) { font-size: 16px; }
.t-d, .apps li, .lk span:not(.ic), .tl li span, .due span, .ckey, .gb, .shot figcaption, .facts span, .member { font-size: 15px; }
.fine { font-size: 14px; }
.chip, .lg-meta dt, .img-note, .cd { font-size: 12px; }
.t-d { line-height: 1.5; }
@media (max-width: 767px) { .t-d, .fine { font-size: 15px; } .facts span { font-size: 14px; } }
/* line length: reading paragraphs capped near 68 characters on wide screens */
.reserved p, .pc-copy > p, .lg-notice, .soonrow p, .faq details p, .sec-h p, .prose p, .lg-sum { max-width: 68ch; }
/* /platform reuses the homepage ecosystem section; its board-scaled subtitle and tag get a readable floor on this route only */
.eco-page .eco-sub { font-size: max(16px, calc(var(--p) * 12.6)); }  /* readability 2026-09-30: this subtitle reads as body copy on /platform -> 16px floor */
.eco-page .card .tag { font-size: 12px; }
.an-r p:not(.t-k) { max-width: 68ch; }
.eco-page .card a { font-size: max(12px, calc(var(--c) * 9.6)); }
.eco-page .rows em { font-size: 12px; }
@media (max-width: 767px) { .calcard .cd, .calcard .cd span:first-child { font-size: 12px; } }
/* defect fix (found at 320): calendar columns may never grow past the card */
.cgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calcard { max-width: 100%; min-width: 0; }
.cc-h { flex-wrap: wrap; }
/* defect fix (found at 320): record rows never exceed the card; long application labels wrap */
.an-r { grid-template-columns: minmax(0, 1fr); } .an-r.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 767px) { .an-r.two { grid-template-columns: minmax(0, 1fr); } }
.apps li span { min-width: 0; overflow-wrap: anywhere; }
.apps li .grade, .grade { flex: none; }
.apps li span { overflow-wrap: break-word; }
/* vial family (Founder ruling 2026-09-29): the trio sits in the right of the intro, vials centred in view */
.sh-vials .sh-art picture, .sh-vials .sh-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
@media (max-width: 1023px) { .sh-vials .sh-art img { object-position: 74% 50%; } }
/* framing fixes (2026-09-29): the record card shows the vial's label; the intro shows all three vials */
.dp-art img { position: absolute; inset: 0; }
.sh-vials .sh-art img { object-position: 96% 50%; }
@media (max-width: 1023px) { .sh-vials .sh-art img { object-position: 82% 50%; } }
@media (min-width: 1024px) and (max-width: 1279px) { .sh-vials .sh-art { left: 47%; } .sh-vials .sh-art img { object-position: 100% 50%; } }
@media (min-width: 1024px) and (max-width: 1279px) { .sh-vials .sh-art { left: 44%; } .sh-vials .sh-art img { object-fit: contain; object-position: 100% 55%; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .sh-vials .sh-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 18%, #000 32%, #000 70%, transparent 84%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 18%, #000 32%, #000 70%, transparent 84%); mask-composite: intersect; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .sh-vials .sh-art { left: 42%; top: 20%; bottom: 14%; }
  .sh-vials .sh-art img { object-fit: cover; object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
}

/* D-2 mission slot (inert until MISSION_OPTION is set in gen.py): keep the selected mission paragraph to a readable measure */
.card2 .mission-h { margin: 6px 0 10px; }
.card2 .mission-h + p { max-width: 68ch; }

/* calculator syringe art (Founder ruling 2026-09-30, DAP-A closed): the art sits in the right of its canvas, so the intro crop anchors right and keeps the plunger and magnifier in view at every width */
.sh-wide .sh-art img[src*="panel-calculator"] { object-position: 100% 50%; }