/* D1 pages: tool pages, Glossary, Charts and the famous-chart pages.
   Built from docs/mockups/kp_home_theme/theme.css (components) + docs/mockups/kp_d1_index/d1.css.
   Every rule is scoped under .d1-page so it cannot leak into the shared header (SHARED-PUBLIC-HEADER)
   or into pages that keep components.css' own rules. Tokens only: no literal colours, no :root.
   Page width is --page-max (1180 px). Load AFTER theme.css and components.css. */
/* ---- shared components (kp_home_theme) ---- */
.d1-page h1, .d1-page h2, .d1-page h3, .d1-page h4 { color: var(--heading); line-height: var(--lh-tight); margin: 0 0 .4em }
.d1-page h1, .d1-page h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; font-optical-sizing: auto }
.d1-page h2 { font-size: var(--fs-2xl) }
.d1-page h3 { font-size: var(--fs-lg) }
.d1-page p { margin: 0 0 .8em }
.d1-page a { color: var(--primary); text-underline-offset: 3px }
.d1-page a:hover { color: var(--primary-hover) }
.d1-page input, .d1-page select, .d1-page textarea { font: inherit; color: inherit }
.d1-page table { font-variant-numeric: tabular-nums }
.d1-page .wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: 16px }
.d1-page .section { padding-block: var(--s-9) }
.d1-page .section.tight { padding-block: var(--s-7) }
.d1-page .section-head { max-width: 660px; margin-bottom: var(--s-6) }
.d1-page .section-head p { color: var(--text-muted); font-size: var(--fs-lg) }
.d1-page .kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px }
.d1-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (min-width: 720px) {
  .d1-page .section { padding-block: var(--s-10) }
}
.d1-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--primary); text-decoration: none; transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease) }
.d1-page .btn:hover { border-color: var(--primary) }
.d1-page .btn:active { transform: translateY(1px) }
.d1-page .btn.solid { background: var(--primary); border-color: var(--primary); color: var(--on-primary) }
.d1-page .btn.solid:hover { background: var(--primary-hover) }
.d1-page .btn.gold { background: var(--sky-gold); border-color: var(--sky-gold); color: var(--on-sky-gold) }
.d1-page .btn.small { min-height: 36px; padding: 0 14px; font-size: .86rem }
.d1-page .btn[disabled] { opacity: .5; cursor: not-allowed }
.d1-page .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px }
.d1-page .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 10px; font-size: .8rem; font-weight: 700; border: 1px solid transparent }
.d1-page .chip.strong { background: var(--strong-soft); color: var(--strong) }
.d1-page .chip.likely { background: var(--likely-soft); color: var(--likely) }
.d1-page .chip.possible { background: var(--possible-soft); color: var(--possible) }
.d1-page .chip.none { background: var(--none-soft); color: var(--none) }
.d1-page .chip.count { background: var(--primary-soft); color: var(--on-soft-primary) }
.d1-page .chip.gold { background: var(--gold-soft); color: var(--gold-ink) }
.d1-page .chip.favour { background: var(--favour-soft); color: var(--favour) }
.d1-page .chip.against { background: var(--against-soft); color: var(--against) }
.d1-page .chip.neutral { background: var(--neutral-soft); color: var(--neutral) }
.d1-page .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor }
.d1-page .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow) }
.d1-page .eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 }
.d1-page .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.d1-page .card .btn { min-height: 40px; padding: 0 16px; font-size: .88rem }
.d1-page .card .btn.small { min-height: 32px; padding: 0 12px; font-size: .82rem }
.d1-page .muted { color: var(--muted); font-size: .88rem }
.d1-page .sky { position: relative; overflow: hidden; color: var(--on-sky); background: radial-gradient(1200px 600px at 85% 40%, var(--sky-bg-2), transparent 70%), linear-gradient(180deg, var(--sky-bg), var(--sky-bg) 60%, var(--sky-bg-2)) }
.d1-page .sky :where(h1, h2, h3) { color: var(--on-sky) }
.d1-page :where(.sky) p { color: var(--on-sky-muted) }
.d1-page :where(.sky) a:where(:not(.btn)) { color: var(--sky-gold) }
.d1-page .stars, .d1-page .stars::after { position: absolute; inset: 0; pointer-events: none; background-image:
  radial-gradient(1.3px 1.3px at 22px 38px, var(--sky-star) 50%, transparent 51%),
  radial-gradient(1px 1px at 120px 90px, var(--sky-star) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 200px 20px, var(--sky-star) 50%, transparent 51%),
  radial-gradient(1px 1px at 60px 150px, var(--sky-star) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 170px 170px, var(--sky-star) 50%, transparent 51%);
  background-size: 240px 200px; opacity: .55 }
.d1-page .stars::after { content: ""; background-size: 330px 270px; background-position: 90px 40px; opacity: .6 }
.d1-page .stamp { font-size: .82rem; color: var(--muted) }
.d1-page .grid { display: grid; gap: var(--s-4) }
.d1-page .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) }
.d1-page .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }
.d1-page .grid.c5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) }
.d1-page .tile { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text) }
.d1-page a.tile:hover { border-color: var(--primary) }
.d1-page .tile b { font-size: 1.02rem; color: var(--heading) }
.d1-page .tile span { color: var(--text-muted); font-size: .92rem }
.d1-page .tile .tico { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--on-soft-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700 }
.d1-page .how { counter-reset: how; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-5); list-style: none; padding: 0; margin: 0 }
.d1-page .how li { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line) }
.d1-page .how li::before { counter-increment: how; content: counter(how); position: absolute; top: -16px; left: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; display: flex; align-items: center; justify-content: center }
.d1-page .how h3 { margin-top: 6px }
.d1-page .how p { color: var(--text-muted); margin: 0 }
.d1-page .callout { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-lg); background: var(--gold-soft); border: 1px solid var(--line) }
.d1-page .callout h3 { color: var(--gold-ink); margin-bottom: 6px }
.d1-page .callout p { margin: 0 }
.d1-page .faq { display: grid; gap: 10px; max-width: 820px }
.d1-page .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 18px }
.d1-page .faq summary { cursor: pointer; font-weight: 700; min-height: 52px; display: flex; align-items: center; gap: 12px; list-style: none }
.d1-page .faq summary::-webkit-details-marker { display: none }
.d1-page .faq summary::after { content: "+"; margin-left: auto; color: var(--primary); font-size: 1.3rem }
.d1-page .faq details[open] summary::after { content: "\2013" }
.d1-page .faq details p { color: var(--text-muted) }
.d1-page .site-foot { border-top: 1px solid var(--line); background: var(--surface-2); padding-block: var(--s-7) var(--s-8); font-size: .92rem }
.d1-page .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s-5) }
.d1-page .foot-grid h4 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-sans) }
.d1-page .foot-grid a { display: block; color: var(--text); text-decoration: none; padding: 4px 0 }
.d1-page .foot-grid a:hover { color: var(--primary) }
.d1-page .foot-legal { margin-top: var(--s-6); color: var(--text-muted); font-size: .84rem }
.d1-page .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card) }
.d1-page .kp-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px }
.d1-page .kp-table th, .d1-page .kp-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
.d1-page .kp-table th { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); font-weight: 700 }
.d1-page .kp-table tr:last-child td { border-bottom: 0 }
.d1-page .kp-table tr.running td { background: var(--gold-soft) }
.d1-page .kp-table tr.running td:first-child { box-shadow: inset 3px 0 0 var(--gold) }
.d1-page .kp-table .pl { font-weight: 700; color: var(--heading) }
/* ---- D1 page blocks ---- */
.d1-page .crumbs { font-size: .88rem; color: var(--text-muted); margin: 16px 0 0 }
.d1-page .crumbs a { color: var(--text-muted) }
.d1-page .crumbs a:hover { color: var(--primary) }
.d1-page .tp-intro { padding-block: var(--s-6) var(--s-5) }
.d1-page .tp-intro h1 { font-size: var(--fs-3xl); margin: 0 0 10px; max-width: 24ch; text-wrap: balance }
.d1-page .tp-dek { font-size: var(--fs-lg); color: var(--text-muted); max-width: 46rem; margin: 0 }
.d1-page .tp-intro .actions { margin-top: var(--s-5) }
.d1-page .tp-section { margin-top: var(--s-9) }
.d1-page .tp-section > h2, .d1-page .sec-h { font-size: var(--fs-2xl); margin: 0 0 var(--s-4) }
.d1-page .sec-sub { color: var(--text-muted); margin: -6px 0 var(--s-5); max-width: 46rem }
.d1-page .prose { max-width: 68ch; font-size: 1rem; line-height: 1.7 }
@media (min-width: 1024px) {
  .d1-page .prose { font-size: 1.0625rem }
}
.d1-page .prose > :first-child { margin-top: 0 }
.d1-page .prose h2 { font-size: var(--fs-2xl); margin: var(--s-8) 0 var(--s-3); scroll-margin-top: 84px }
.d1-page .prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.1em; color: var(--heading); margin: var(--s-6) 0 var(--s-2) }
.d1-page .prose p { margin: 0 0 1em }
.d1-page .prose ul, .d1-page .prose ol { margin: 0 0 1.1em; padding-left: 1.3em }
.d1-page .prose li { margin: .4em 0 }
.d1-page .prose li::marker { color: var(--gold-ink); font-weight: 700 }
.d1-page .prose strong { color: var(--heading) }
.d1-page .prose .callout { margin: var(--s-5) 0; font-size: .95em }
.d1-page .prose .callout b:first-child { color: var(--gold-ink) }
.d1-page .prose .table-wrap { margin: 0 0 1.2em }
.d1-page .prose .kp-table { min-width: 0; white-space: normal }
.d1-page .prose .kp-table td { white-space: normal }
.d1-page .explain { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) }
@media (min-width: 1024px) {
  .d1-page .explain { grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: var(--s-9); align-items: start }
}
.d1-page .explain .faq { max-width: none }
.d1-page .explain .faq-h { font-size: var(--fs-2xl); margin: 0 0 var(--s-4) }
@media (min-width: 1024px) {
  .d1-page .explain .faq-col { position: sticky; top: 84px }
}
.d1-page .explain .prose > h2:first-child { margin-top: 0 }
.d1-page .read3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) }
.d1-page .read3-head { max-width: 68ch }
@media (min-width: 1024px) {
  .d1-page .read3 { grid-template-columns: 200px minmax(0, 68ch) minmax(0, 1fr); gap: var(--s-8); align-items: start }
  .d1-page .read3 > .rail, .d1-page .read3 > .aside { position: sticky; top: 84px }
  .d1-page .read3 > .rail { max-height: calc(100vh - 100px); overflow: auto; padding-right: 4px }
  .d1-page .read3-head { margin-left: calc(200px + var(--s-8)) }
}
.d1-page .rail-h { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px }
.d1-page .rail-nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line) }
.d1-page .rail-nav a { display: block; padding: 6px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: .9rem; line-height: 1.35 }
.d1-page .rail-nav a:hover { color: var(--primary) }
.d1-page .rail-nav a[aria-current] { color: var(--heading); font-weight: 700; border-left-color: var(--gold) }
@media (max-width: 1023px) {
  .d1-page .rail-nav { flex-direction: row; gap: 8px; border-left: 0; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin }
  .d1-page .rail-nav a { flex: none; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 6px 12px; background: var(--card); white-space: nowrap; font-size: .86rem }
  .d1-page .rail-nav a[aria-current] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink) }
}
.d1-page .aside .card { padding: var(--s-5); margin-bottom: var(--s-4) }
.d1-page .aside h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; margin: 0 0 6px }
.d1-page .aside p { font-size: .92rem; color: var(--text-muted) }
.d1-page .aside .btn { width: 100% }
.d1-page .link-list { list-style: none; margin: 0; padding: 0 }
.d1-page .link-list li { border-top: 1px solid var(--line) }
.d1-page .link-list li:first-child { border-top: 0 }
.d1-page .link-list a { display: block; padding: 9px 0; text-decoration: none; font-weight: 600; font-size: .92rem }
.d1-page .tool-card { padding: var(--s-5); margin: 0 }
@media (min-width: 720px) {
  .d1-page .tool-card { padding: var(--s-6) }
}
.d1-page .form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end }
.d1-page .field { display: flex; flex-direction: column; gap: 4px; min-width: min(100%, 190px) }
.d1-page .field.grow { flex: 1; min-width: min(100%, 260px) }
.d1-page .field label { font-size: .8rem; font-weight: 700; color: var(--text-muted) }
.d1-page .field input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); color: var(--text) }
.d1-page .field input::placeholder { color: var(--text-muted) }
.d1-page .form-row .btn { min-height: 44px }
@media (max-width: 480px) {
  .d1-page .form-row > .btn, .d1-page .form-row > .field { width: 100% }
}
.d1-page .status { font-size: .88rem; color: var(--text-muted); margin: 10px 0 0 }
.d1-page .ac { position: relative }
.d1-page .ac-list { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-3); max-height: 230px; overflow: auto; padding: 4px }
.d1-page .ac-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; color: var(--text) }
.d1-page .ac-list button:hover, .d1-page .ac-list button[aria-selected="true"] { background: var(--primary-soft); color: var(--on-soft-primary) }
.d1-page .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.d1-page .toolbar .field { flex: 1 }
.d1-page .toolbar .field input { min-height: 44px }
.d1-page .facts { list-style: none; margin: 0; padding: 0 }
.d1-page .facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .95rem }
.d1-page .facts li:first-child { border-top: 0 }
.d1-page .facts li > span { color: var(--text-muted) }
.d1-page .facts li > b { font-variant-numeric: tabular-nums; text-align: right; color: var(--text) }
.d1-page .facts li.bad > b { color: var(--danger) }
.d1-page .facts li.good > b { color: var(--strong) }
.d1-page .facts .tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px }
.d1-page .facts li.bad .tag-dot { background: var(--danger) }
.d1-page .facts li.good .tag-dot { background: var(--strong) }
.d1-page .card-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 8px }
.d1-page .card-h h3 { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 }
.d1-page .card-h a { font-size: .86rem; font-weight: 600 }
.d1-page .dayline { margin: var(--s-4) 0 var(--s-2) }
.d1-page .dl-track { position: relative; height: 44px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line) }
.d1-page .dl-win { position: absolute; top: 7px; bottom: 7px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; overflow: hidden; white-space: nowrap }
.d1-page .dl-win.bad { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger) }
.d1-page .dl-win.good { background: var(--strong); color: var(--on-status) }
.d1-page .dl-now { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--now) }
.d1-page .dl-now span { position: absolute; top: -18px; left: -14px; font-size: .7rem; font-weight: 800; color: var(--now); white-space: nowrap }
.d1-page .dl-axis { position: relative; height: 20px; margin-top: 6px; font-size: .74rem; color: var(--text-faint) }
.d1-page .dl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.d1-page .dl-axis span:first-child { transform: none }
.d1-page .dl-axis span:last-child { transform: translateX(-100%) }
@media (max-width: 640px) {
  .d1-page .dl-win .lbl { display: none }
}
.d1-page .timings { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-7); margin-top: var(--s-4) }
@media (min-width: 720px) {
  .d1-page .timings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}
.d1-page .pan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin-top: var(--s-4) }
.d1-page .pan-grid .card { margin: 0; padding: var(--s-5) }
.d1-page .table-wrap.tall { max-height: 70vh; overflow: auto }
.d1-page .table-wrap.tall thead th { position: sticky; top: 0; z-index: 1 }
.d1-page .kp-table tbody tr:not(.grp):hover td { background: var(--primary-soft) }
.d1-page .kp-table td.sub { font-weight: 700; color: var(--heading) }
.d1-page .kp-table td.n { font-weight: 700; color: var(--heading); width: 3.2rem }
.d1-page .kp-table td.deg { color: var(--text-muted) }
.d1-page .kp-table td.ask { text-align: right; width: 1% }
.d1-page .kp-table td.c-range { display: none }
.d1-page .kp-table td.ask .btn { min-height: 32px; padding: 0 12px; font-size: .82rem }
.d1-page .kp-table tr.grp th { position: static; background: var(--gold-soft); color: var(--gold-ink); text-transform: none; letter-spacing: 0; font-size: .86rem; padding: 7px 12px }
@media (max-width: 640px) {
  .d1-page .kp-table.stack { min-width: 0 }
  .d1-page .kp-table.stack thead { display: none }
  .d1-page .kp-table.stack tr.grp th { display: block; position: sticky; top: 0; z-index: 1 }
  .d1-page .kp-table.stack tbody tr:not(.grp) { display: grid; column-gap: 12px; row-gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line) }
  .d1-page .kp-table.stack td { border: 0; padding: 0; white-space: normal; font-size: .9rem; width: auto; text-align: left }
  .d1-page .kp-table.stack td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; color: var(--text-faint) }
  .d1-page .kp-table.stack td.n { font-size: 1.05rem; padding-top: 2px }
  .d1-page .kp-table.stack td.ask { align-self: center }
  .d1-page .kp-table.hn tbody tr:not(.grp) { grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "n nak star ask" "n sub range ask" }
  .d1-page .kp-table.sl tbody tr:not(.grp) { grid-template-columns: 2.4rem minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "n nak star pada" "n sub range range" }
  .d1-page .kp-table.stack td.c-sign, .d1-page .kp-table.stack td.c-slord, .d1-page .kp-table.stack td.c-from, .d1-page .kp-table.stack td.c-to { display: none }
  .d1-page .kp-table.stack td.c-range { display: block; white-space: nowrap }
  .d1-page .c-n { grid-area: n }
  .d1-page .c-sign { grid-area: sign }
  .d1-page .c-slord { grid-area: slord }
  .d1-page .c-nak { grid-area: nak }
  .d1-page .c-pada { grid-area: pada }
  .d1-page .c-star { grid-area: star }
  .d1-page .c-sub { grid-area: sub }
  .d1-page .c-from { grid-area: from }
  .d1-page .c-to { grid-area: to }
  .d1-page .c-range { grid-area: range }
  .d1-page .c-ask { grid-area: ask }
}
@media print {
  .d1-page .site-head, .d1-page .site-foot, .d1-page .toolbar, .d1-page .explain, .d1-page .tp-related, .d1-page .cta-sky, .d1-page .tp-dek, .d1-page .kicker, .d1-page .crumbs { display: none !important }
  .d1-page .table-wrap.tall { max-height: none; overflow: visible }
}
.d1-page .cta-sky { border-radius: var(--r-xl); padding: var(--s-7) var(--s-6); margin-block: var(--s-9) var(--s-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6) }
.d1-page .cta-sky > div:not(.stars) { position: relative; max-width: 40rem }
.d1-page .cta-sky h2 { font-size: var(--fs-xl); margin: 0 }
.d1-page .cta-sky p { margin: 6px 0 0 }
.d1-page .cta-sky .btn { position: relative }
@media (max-width: 480px) {
  .d1-page .cta-sky .btn { width: 100% }
}
.d1-page .tp-related { margin-top: var(--s-9) }
.d1-page .tp-related h2 { font-size: var(--fs-xl); margin: 0 0 var(--s-4) }
.d1-page .tile .go { margin-top: auto; font-weight: 700; color: var(--primary); font-size: .9rem }
.d1-page .gl-search { margin-bottom: var(--s-3) }
.d1-page .gl-count { font-size: .84rem; color: var(--text-muted); margin: 0 0 var(--s-4) }
.d1-page .gl-list { display: flex; flex-direction: column }
.d1-page .gl-term { padding: var(--s-6) 0; border-top: 1px solid var(--line); scroll-margin-top: 84px }
.d1-page .gl-term:first-child { border-top: 0; padding-top: 0 }
.d1-page .gl-term h2 { font-size: var(--fs-xl); margin: 0 0 8px }
.d1-page .gl-term .gl-short { font-size: 1.08em; color: var(--heading); margin: 0 0 10px; line-height: 1.55 }
.d1-page .gl-term .gl-body { color: var(--text); margin: 0 0 10px }
.d1-page .gl-term .gl-aka { font-size: .86rem; color: var(--text-muted); margin: 0 0 8px }
.d1-page .gl-term .gl-related { font-weight: 700; font-size: .92rem; text-decoration: none }
.d1-page .gl-term:target, .d1-page .gl-term.is-target { background: linear-gradient(90deg, var(--gold-soft), transparent 70%); box-shadow: -16px 0 0 var(--gold-soft) }
.d1-page .gl-empty { padding: 24px 0; color: var(--text-muted) }
.d1-page .compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4) }
.d1-page .compare .tile.here { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold) }
.d1-page .compare .tile .chip { align-self: flex-start; margin-bottom: 4px }
.d1-page .glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.d1-page .glance li { display: flex; gap: 10px; font-size: .94rem; color: var(--text) }
.d1-page .glance li::before { content: "\2726"; color: var(--gold-ink); flex: none }
.d1-page .who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); list-style: none; margin: 0; padding: 0 }
.d1-page .who li { padding: var(--s-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); color: var(--text) }
.d1-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5) }
.d1-page .stat { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line) }
.d1-page .stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--heading); line-height: 1.1 }
.d1-page .stat span { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted) }
.d1-page .pd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) }
@media (min-width: 900px) {
  .d1-page .pd-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}
.d1-page .pd-card { margin: 0; padding: var(--s-5); display: flex; flex-direction: column; gap: 10px }
.d1-page .pd-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px }
.d1-page .pd-top b { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted) }
.d1-page .pd-q { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--heading); margin: 0 }
.d1-page .pd-meta { font-size: .86rem; color: var(--text-muted); margin: 0 }
.d1-page .pd-verdict { margin: 0; font-size: .95rem }
.d1-page .pd-win { list-style: none; margin: 0; padding: 0; border-radius: var(--r-md); background: var(--sunk) }
.d1-page .pd-win li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: .9rem }
.d1-page .pd-win li:first-child { border-top: 0 }
.d1-page .pd-win li span { color: var(--text-muted) }
.d1-page .pd-band { margin-right: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent) }
.d1-page .pd-win li.is-empty b { font-weight: 600; color: var(--text-muted) }
.d1-page .pd-winnote { font-size: .8rem; color: var(--text-muted); margin: 0 0 6px }
.d1-page .pd-note { font-size: .92rem; margin: 0; border-left: 3px solid var(--gold); padding-left: 10px }
.d1-page .pd-hash { font: .74rem/1.4 var(--font-mono); color: var(--text-faint); word-break: break-all; margin: auto 0 0; padding-top: 8px; border-top: 1px dashed var(--line) }
.d1-page .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4) }
.d1-page .person { flex-direction: row; align-items: flex-start; gap: var(--s-4) }
.d1-page .person .mono { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center }
.d1-page .person > div { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.d1-page .chart-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start }
@media (min-width: 960px) {
  .d1-page .chart-top { grid-template-columns: minmax(0, 600px) minmax(0, 1fr) }
}
.d1-page .chart-top .card { margin: 0; padding: var(--s-5) }
.d1-page .source-note { font-size: .9rem; color: var(--text-muted); border-left: 3px solid var(--gold); padding: 2px 0 2px 12px; margin: var(--s-4) 0 0 }
.d1-page .source-note a { font-weight: 600; word-break: break-all }
.d1-page .si { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 6px; max-width: 560px; margin: 4px auto }
.d1-page .si::before { content: ""; grid-area: 1 / 1 / -1 / -1; padding-top: 100%; pointer-events: none }
.d1-page .si-c { position: relative; display: flex; flex-direction: column; min-height: 100px; padding: 8px 8px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); font-size: .9rem; overflow: hidden }
.d1-page .si-c.asc { border-color: var(--primary); background: var(--primary-soft) }
.d1-page .si-c .hn { position: absolute; top: 3px; right: 6px; font-size: .72rem; font-weight: 700; color: var(--text-faint) }
.d1-page .si-head { padding-right: 16px }
.d1-page .si-c .sn { font-weight: 700; color: var(--primary) }
.d1-page .si-c .cd { font-size: .74rem; color: var(--text-muted) }
.d1-page .si-mid { margin: auto 0; text-align: center }
.d1-page .si-mid .pl { display: block; font-weight: 700; font-size: .86rem; line-height: 1.25 }
.d1-page .si-mid .pl .cd { font-weight: 500 }
.d1-page .pl.ben { color: var(--likely) }
.d1-page .pl.mal { color: var(--danger) }
.d1-page .si-asc { display: inline-block; margin-bottom: 3px; padding: 1px 8px; border-radius: 5px; background: var(--now); color: var(--on-status); font-size: .74rem; font-weight: 800 }
.d1-page .si-c .ruler { position: absolute; left: 8px; bottom: 5px; font-size: .72rem; font-weight: 600; color: var(--text-faint) }
.d1-page .si-ctr { grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); font-size: .84rem; color: var(--text-muted) }
.d1-page .si-ctr b { font-family: var(--font-display); font-size: 1.05rem; color: var(--heading) }
@media (max-width: 640px) {
  .d1-page .si { gap: 4px }
  .d1-page .si-c { min-height: 0; font-size: .72rem; padding: 6px 5px 6px }
  .d1-page .si-c .cd { font-size: .6rem }
  .d1-page .si-head { padding-right: 12px }
  .d1-page .si-head .cd { display: block }
  .d1-page .si-mid { margin: 2px 0 0 }
  .d1-page .si-mid .pl { font-size: .68rem }
  .d1-page .si-c .ruler { position: static; display: block; margin-top: 2px; font-size: .6rem }
  .d1-page .si-ctr { font-size: .66rem }
  .d1-page .si-ctr b { font-size: .8rem }
}
.d1-page .verdicts td:first-child { font-weight: 600; color: var(--heading); white-space: normal }
.d1-page .verdicts .chip { white-space: nowrap }
.d1-page .byline { font-size: .9rem; color: var(--text-muted); margin: var(--s-4) 0 0 }
.d1-page .byline a { font-weight: 600 }
.d1-page .houses { display: grid; gap: var(--s-3); margin: var(--s-5) 0 }
.d1-page .hgroup { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: var(--s-4) var(--s-5) }
.d1-page .hgroup > p { margin: 0 0 8px; font-size: .95em }
.d1-page .hgroup > p b { color: var(--heading) }
.d1-page .hgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.d1-page .hgroup li { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: .95em }
.d1-page .hn-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 800 }
.d1-page .hgroup.req .hn-badge, .d1-page .cusp-card .need .hn-badge { background: var(--strong-soft); color: var(--strong) }
.d1-page .hgroup.sup .hn-badge, .d1-page .cusp-card .help .hn-badge { background: var(--likely-soft); color: var(--likely) }
.d1-page .hgroup.obs .hn-badge, .d1-page .cusp-card .against .hn-badge { background: var(--against-soft); color: var(--against) }
.d1-page .hgroup.req { border-left: 4px solid var(--strong) }
.d1-page .hgroup.sup { border-left: 4px solid var(--likely) }
.d1-page .hgroup.obs { border-left: 4px solid var(--against) }
.d1-page .cusp-card .big { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--heading); margin: 2px 0 10px; line-height: 1.2 }
.d1-page .cusp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; margin: 0 0 var(--s-4); align-items: center }
.d1-page .cusp-card dt { font-size: .82rem; font-weight: 700; color: var(--text-muted) }
.d1-page .cusp-card dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px }
.d1-page .learn-faq { margin-top: var(--s-8) }
.d1-page .learn-faq .faq { max-width: none }
@media (max-width: 1023px) {
  .d1-page .read3 > .rail { order: 0 }
  .d1-page .read3 > .aside { order: 2 }
  .d1-page .read3 > article { order: 1 }
}
/* ---- footer brand + conflict guards (components.css rules the mockups were never drawn against) ---- */
.d1-page, .d1-page *, .d1-page *::before, .d1-page *::after { box-sizing: border-box }
.d1-page button { font: inherit; color: inherit }
.d1-page .btn { height: auto }
.d1-page .kp-table td { border-top: 0 }
.d1-page .chip { letter-spacing: normal }
.d1-page .site-foot { margin-top: var(--s-8) }
/* same cascade as the mockup: .foot-grid a (0,2,1) beats .brand (0,2,0), so the footer logo link is a block */
.d1-page .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--heading); font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; white-space: nowrap }
.d1-page .brand img { width: 28px; height: 28px; flex: none }
.d1-page .site-foot .muted { color: var(--text-muted); font-size: .88rem }
.d1-page .crumbs { font-family: var(--font-sans) }
.d1-page .crumbs a { text-decoration: underline; text-underline-offset: 3px }
/* case-study block on the 5 famous-chart pages (not in the mockup; reuses its section, card and facts rows) */
.d1-page .cs-verdict { margin: var(--s-4) 0 0 }
.d1-page .cs-learn { margin: var(--s-3) 0 0; font-weight: 600 }