/* Sublogy content pages — shared stylesheet.
   Tokens match the homepage bundle (indigo #1A237E, amber #F5A623) and the
   privacy page, so a visitor moving between them stays in one site. */

:root {
  --indigo:   #1A237E;
  --indigo-d: #141B5E;
  --amber:    #F5A623;
  --ink:      #0D0F2B;
  --soft:     #4A5580;
  --rule:     #E1E9F7;
  --page:     #FFFFFF;
  --tint:     #F6F8FE;
  --warm:     #E7E6E1;
  --card:     #FFFFFF;
  --shadow:   0 1px 2px rgba(13,15,43,.05), 0 8px 24px rgba(13,15,43,.05);
  --wrap:     760px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--indigo); text-decoration-color: rgba(26,35,126,.3); text-underline-offset: 3px; }
a:hover { color: var(--amber); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(231,230,225,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid #E6EBF5;
}
.nav-row {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px); height: 72px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.nav-logo img { width: 116px; display: block; }
.nav-logo span {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); font-weight: 600;
}
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--indigo); }
.nav-links a[aria-current="page"] { color: var(--amber); }
.nav-cta {
  background: var(--indigo); color: #fff !important; text-decoration: none;
  padding: 10px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--indigo-d); color: #fff !important; }
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-row { justify-content: space-between; gap: 12px; height: 64px; }
  .nav-cta { margin-left: auto; }
}

/* ---------- layout ---------- */

.wrap  { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 28px); }
.wrapw { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 28px); }

.hero { padding-block: clamp(48px, 7vw, 92px) clamp(28px, 4vw, 44px); }
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); font-weight: 500; margin-bottom: 18px;
}
h1 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(36px, 6.2vw, 60px); line-height: 1.08;
  letter-spacing: -.01em; text-wrap: balance; margin-bottom: 20px;
}
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.lede strong { color: var(--ink); font-weight: 600; }

main { padding-bottom: 8px; }
section { margin-bottom: clamp(38px, 5vw, 56px); scroll-margin-top: 88px; }
h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(27px, 3.8vw, 36px); line-height: 1.18;
  text-wrap: balance; margin-bottom: 14px; letter-spacing: -.005em;
}
h3 {
  font-size: 18px; font-weight: 700; line-height: 1.4;
  margin: 26px 0 8px; text-wrap: balance;
}
p, ul, ol { margin-bottom: 16px; }
ul, ol { padding-left: 24px; }
li { margin: 7px 0; }
li::marker { color: var(--amber); }
strong { font-weight: 650; }
em { font-style: italic; }

/* ---------- on-this-page ---------- */

.toc {
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 18px 22px; margin-bottom: clamp(34px, 5vw, 52px); background: var(--tint);
}
.toc h2 {
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 10px;
}
.toc ol { margin: 0; padding-left: 20px; font-size: 15.5px; }
.toc li { margin: 4px 0; }

/* ---------- blocks ---------- */

.callout {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--amber); border-radius: 10px;
  padding: 20px 22px; margin: 22px 0; box-shadow: var(--shadow);
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout .label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--soft);
  display: block; margin-bottom: 8px;
}

.definition {
  background: var(--indigo); color: #fff; border-radius: 14px;
  padding: clamp(22px, 3.5vw, 32px); margin: 26px 0;
}
.definition .label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px;
}
.definition p { color: rgba(255,255,255,.88); margin-bottom: 0; }
.definition p + p { margin-top: 12px; }
.definition strong { color: #fff; }
.definition a { color: #fff; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 22px 0; }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 20px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 6px; font-size: 16.5px; }
.card p { margin: 0; font-size: 15.5px; color: var(--soft); }
.card .num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  color: var(--amber); display: block; margin-bottom: 8px; font-weight: 500;
}

/* prerequisite chain */
.chain { list-style: none; padding: 0; margin: 24px 0; counter-reset: step; }
.chain li {
  position: relative; padding: 14px 0 14px 34px; margin: 0;
  border-left: 2px solid var(--rule);
}
.chain li::before {
  content: ""; position: absolute; left: -7px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--page); border: 2px solid var(--amber);
}
.chain li:last-child { border-left-color: transparent; }
.chain strong { display: block; font-size: 16.5px; }
.chain span { color: var(--soft); font-size: 15.5px; }

table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15.5px; }
.table-scroll { overflow-x: auto; margin: 22px 0; }
.table-scroll table { margin: 0; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); font-weight: 700; }

details.faq {
  border-bottom: 1px solid var(--rule); padding: 4px 0;
}
details.faq summary {
  cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--amber); font-size: 20px; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq > *:not(summary) { padding-bottom: 8px; color: var(--soft); }

/* ---------- related / footer ---------- */

.related { background: var(--tint); border-top: 1px solid var(--rule); padding-block: clamp(36px, 5vw, 56px); margin-top: clamp(40px, 6vw, 68px); }
.related h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 18px; }
.related .grid { margin-top: 0; }
.related .card a { font-weight: 600; text-decoration: none; }
.related .card a::after { content: " →"; color: var(--amber); }

.cta-band {
  background: var(--indigo); color: #fff; border-radius: 16px;
  padding: clamp(26px, 4vw, 40px); margin: clamp(34px, 5vw, 52px) 0 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.82); margin-bottom: 20px; }
.btn {
  display: inline-block; background: var(--amber); color: #0D0F2B !important;
  text-decoration: none; font-weight: 700; padding: 13px 26px; border-radius: 999px;
}
.btn:hover { background: #ffb845; color: #0D0F2B !important; }
.btn.ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.45); }
.btn.ghost:hover { background: rgba(255,255,255,.1); color: #fff !important; }
.btn + .btn { margin-left: 10px; }
@media (max-width: 520px) { .btn { display: block; } .btn + .btn { margin: 10px 0 0; } }

footer.site {
  background: var(--warm); border-top: 1px solid #DCDBD5;
  padding-block: clamp(36px, 5vw, 52px); margin-top: 0; font-size: 15px;
}
footer.site .cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
footer.site h2 {
  font-family: inherit; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); font-weight: 700; margin-bottom: 10px;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 6px 0; }
footer.site a { text-decoration: none; }
footer.site .legal {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid #DCDBD5;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--soft); font-size: 14px;
}

/* ---------- dark ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EEF1FA; --soft: #AEB6D4; --page: #0D0F2B; --card: #171A38;
    --rule: #2A2F55; --tint: #12152F; --warm: #12152F; --indigo: #9FB4FF;
    --indigo-d: #7E97F5; --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
  :root:not([data-theme="light"]) .nav { background: rgba(18,21,47,.9); border-bottom-color: #2A2F55; }
  :root:not([data-theme="light"]) .nav-cta { background: #2B3574; color: #fff !important; }
  :root:not([data-theme="light"]) .definition,
  :root:not([data-theme="light"]) .cta-band { background: #1B2150; }
  :root:not([data-theme="light"]) footer.site { border-top-color: #2A2F55; }
  :root:not([data-theme="light"]) footer.site .legal { border-top-color: #2A2F55; }
  :root:not([data-theme="light"]) .nav-logo img { filter: brightness(1.7) saturate(.9); }
}