/* ============================================================
   ANKER WHITE PAPER MICROSITE
   Editorial design: technology + home + memory
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ink: #111C27;
  --ground: #F5F7F8;
  --paper: #FFFFFF;
  --rule: #DCE3E7;
  --muted: #5A6672;
  --dim: #8A95A0;
  --accent: #356DFF;
  --cyan: #54C8D0;
  --violet: #7C78E8;
  --memory: #D8A45A;
  --risk: #C86B61;
  --dark: #081520;
  --dark-2: #102131;
  --dark-text: #F7FAFC;
  --dark-muted: #AEBCC8;
  --progress-h: 3px;
  --left-w: 220px;
  --right-w: 210px;
  --gap: 44px;
  --measure: 700px;
}

html { scroll-behavior: smooth; font-size: 18px; background: var(--ground); }

body {
  background: linear-gradient(90deg, rgba(17,28,39,.018) 1px, transparent 1px) 0 0 / 80px 80px, var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.67;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(53,109,255,.18); }

#progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0%;
  height: var(--progress-h);
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  z-index: 1200;
  transition: width .08s linear;
  pointer-events: none;
}

#layout {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, var(--measure)) var(--right-w);
  grid-template-areas: "left main right";
  column-gap: var(--gap);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

#main {
  grid-area: main;
  width: 100%;
  max-width: var(--measure);
  padding: 42px 0 150px;
}

#toc-rail {
  grid-area: left;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 44px 0 48px;
  scrollbar-width: none;
}

#toc-rail::-webkit-scrollbar { display: none; }
#toc { list-style: none; border-left: 1px solid rgba(17,28,39,.08); }
.toc-entry { display: block; }

.toc-ch {
  display: block;
  font-family: var(--body);
  font-size: .69rem;
  font-weight: 500;
  line-height: 1.36;
  color: #6C7782;
  text-decoration: none;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}

.toc-ch:hover { color: var(--ink); text-decoration: none; }
.toc-ch.active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; transform: translateX(1px); }

.toc-subs {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  opacity: 0;
}

.toc-entry.open .toc-subs { max-height: 620px; opacity: 1; }

.toc-sub {
  display: block;
  font-family: var(--body);
  font-size: .61rem;
  line-height: 1.4;
  color: var(--dim);
  text-decoration: none;
  padding: 3px 0 3px 28px;
}
.toc-sub:hover { color: var(--ink); text-decoration: none; }

#mobile-header {
  display: none;
  position: fixed;
  top: var(--progress-h);
  left: 0;
  right: 0;
  height: 54px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(17,28,39,.08);
  z-index: 1000;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
}

#nav-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

#cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--dark-text);
  background:
    radial-gradient(circle at 82% 22%, rgba(84,200,208,.18), transparent 25%),
    radial-gradient(circle at 74% 70%, rgba(124,120,232,.15), transparent 28%),
    linear-gradient(145deg, var(--dark) 0%, #0B1B29 58%, var(--dark-2) 100%);
  margin: 0 -44px 92px;
  min-height: 630px;
  padding: 68px 54px 58px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  top: 72px;
  right: -78px;
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
}

#cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  top: 128px;
  right: -22px;
  border: 1px solid rgba(84,200,208,.22);
  transform: rotate(45deg);
  box-shadow: -70px 70px 0 -69px rgba(216,164,90,.35), -140px 140px 0 -139px rgba(53,109,255,.38);
}

.cov-pub {
  position: absolute;
  top: 54px;
  left: 54px;
  font-family: var(--body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #DCE6ED;
}

.cov-title {
  font-family: var(--display);
  font-size: clamp(2.45rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 12ch;
  margin-bottom: 26px;
  color: #FFFFFF;
}

.cov-sub1 {
  font-family: var(--body);
  font-size: 1.03rem;
  line-height: 1.52;
  color: #D4DEE6;
  max-width: 43ch;
  margin-bottom: 16px;
}

.cov-sub2 {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #95DDE2;
  max-width: 44ch;
  margin-bottom: 48px;
}

.cov-date { font-family: var(--body); font-size: .68rem; font-weight: 500; color: #91A2AF; letter-spacing: .08em; }

.sec {
  position: relative;
  scroll-margin-top: 72px;
  border-top: 1px solid var(--rule);
  padding-top: 72px;
  padding-bottom: 82px;
}

#foreword { border-top: 0; padding-top: 0; }
#executive-summary { padding-top: 78px; }

.ch-label {
  display: block;
  font-family: var(--body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

h1.sec-title {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 38px;
  max-width: 18ch;
}

h2.sub-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-top: 62px;
  margin-bottom: 17px;
  max-width: 32ch;
}

.sec p { font-size: 1rem; line-height: 1.68; color: var(--ink); margin-bottom: 1.28em; max-width: var(--measure); }
.sec p:last-child { margin-bottom: 0; }
.sec > p:first-of-type { font-size: 1.03rem; }

#foreword h1.sec-title, #executive-summary h1.sec-title { font-size: 1.8rem; letter-spacing: -.02em; }
#foreword p, #executive-summary p { color: #263440; }

#the-promise, #ch1, #ch2, #ch3, #ch4, #ch5, #ch6 {
  --section-accent: var(--accent);
  --section-wash: rgba(53,109,255,.065);
  margin-left: -28px;
  margin-right: -28px;
  padding-left: 28px;
  padding-right: 28px;
  background: linear-gradient(180deg, var(--section-wash) 0, rgba(255,255,255,0) 235px);
}

#the-promise { --section-accent: #356DFF; --section-wash: rgba(53,109,255,.055); }
#ch1 { --section-accent: #4567D9; --section-wash: rgba(69,103,217,.06); }
#ch2 { --section-accent: #C86B61; --section-wash: rgba(200,107,97,.055); }
#ch3 { --section-accent: #7C78E8; --section-wash: rgba(124,120,232,.06); }
#ch4 { --section-accent: #38AAB6; --section-wash: rgba(84,200,208,.075); }
#ch5 { --section-accent: #B98A45; --section-wash: rgba(216,164,90,.08); }
#ch6 { --section-accent: #2F8297; --section-wash: rgba(84,200,208,.065); }

#the-promise .ch-label, #ch1 .ch-label, #ch2 .ch-label, #ch3 .ch-label, #ch4 .ch-label, #ch5 .ch-label, #ch6 .ch-label { color: var(--section-accent); }

#the-promise h1.sec-title, #ch1 h1.sec-title, #ch2 h1.sec-title, #ch3 h1.sec-title, #ch4 h1.sec-title, #ch5 h1.sec-title, #ch6 h1.sec-title {
  position: relative;
  padding-top: 16px;
  margin-bottom: 44px;
}

#the-promise h1.sec-title::before, #ch1 h1.sec-title::before, #ch2 h1.sec-title::before, #ch3 h1.sec-title::before, #ch4 h1.sec-title::before, #ch5 h1.sec-title::before, #ch6 h1.sec-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 3px;
  background: var(--section-accent);
}

sup.ref { font-family: var(--body); font-size: .58rem; font-weight: 700; color: var(--accent); vertical-align: super; line-height: 0; }
sup.ref a { color: inherit; text-decoration: none; }
sup.ref a:hover { text-decoration: underline; }

.fig {
  position: relative;
  margin: 58px 0 62px;
  padding: 30px 0 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.fig::before {
  content: "RESEARCH";
  display: block;
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--memory);
  margin-bottom: 14px;
}

.fig-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.7rem, 9vw, 6rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.055em;
  color: var(--accent);
  margin-bottom: 18px;
}

.fig-label { font-family: var(--display); font-size: 1.05rem !important; font-weight: 600; line-height: 1.38 !important; max-width: 36ch !important; margin-bottom: 22px !important; }
.fig-meta { font-family: var(--body); font-size: .64rem !important; line-height: 1.55 !important; color: var(--muted) !important; letter-spacing: .02em; margin: 0 !important; }
#ch5 .fig-num { color: #B98A45; }

.chart { margin: 62px 0 68px; padding: 34px 0 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.chart-title { font-family: var(--display) !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; max-width: 40ch !important; margin-bottom: 30px !important; }
.bar-rows { display: flex; flex-direction: column; gap: 16px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 205px; align-items: center; gap: 18px; }
.bar-label { font-family: var(--body); font-size: .73rem; line-height: 1.35; color: #33414D; }
.bar-wrap { display: flex; align-items: center; gap: 9px; }
.bar-track { flex: 1; height: 7px; background: #E4E8EB; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #B98A45, #D8A45A); }
.bar-pct { min-width: 31px; text-align: right; font-family: var(--body); font-size: .69rem; font-weight: 700; color: var(--ink); }
.chart-meta { font-family: var(--body); font-size: .64rem !important; line-height: 1.55 !important; color: var(--muted) !important; padding-top: 19px; margin-top: 26px !important; margin-bottom: 0 !important; border-top: 1px solid var(--rule); }

.pull-quote {
  display: block;
  margin: 70px -28px;
  padding: 34px 28px 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.pull-quote blockquote {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 24ch;
}

.pull-quote::before { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-bottom: 22px; }
#ch5 .pull-quote::before { background: var(--memory); }

#letter { background: #FCFBF8; margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
#letter .ch-label { color: #A2793E; }
#letter h1.sec-title { max-width: 20ch; }
.letter-body { border-left: 2px solid var(--memory); padding-left: 30px; margin: 42px 0 38px; }
.letter-body p { font-size: 1.02rem; line-height: 1.76; margin-bottom: 1.25em; }
.sig { padding-left: 32px; margin-top: 34px; font-family: var(--body); font-size: .78rem; line-height: 1.6; color: var(--muted); }
.sig strong { display: block; font-family: var(--display); font-size: .88rem; color: var(--ink); font-weight: 700; margin-bottom: 2px; }

.forthcoming { padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); }
.method-note { font-size: .72rem !important; line-height: 1.65 !important; color: var(--dim) !important; padding-top: 14px; margin-top: 14px !important; border-top: 1px solid var(--rule); }

.ref-list { list-style: none; }
.ref-list li { position: relative; padding-left: 34px; margin-bottom: 17px; font-family: var(--body); font-size: .72rem; line-height: 1.62; color: var(--muted); }
.ref-list .rn { position: absolute; top: 0; left: 0; font-size: .64rem; font-weight: 700; color: var(--accent); }
.ref-list a, .ref-back { color: var(--accent); text-decoration: none; }
.ref-list a:hover, .ref-back:hover { text-decoration: underline; }

#right-rail { grid-area: right; position: relative; padding: 58px 0 120px; }
.sn { position: absolute; width: var(--right-w); padding-left: 14px; border-left: 1px solid var(--rule); font-family: var(--body); font-size: .63rem; line-height: 1.52; color: var(--muted); }
.sn-num { color: var(--accent); font-weight: 700; margin-right: 3px; }
.sn a { color: var(--muted); text-decoration: none; word-break: break-word; }
.sn a:hover { color: var(--accent); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

@media (max-width: 1120px) {
  :root { --left-w: 205px; --gap: 34px; }
  #layout { grid-template-columns: var(--left-w) minmax(0, var(--measure)); grid-template-areas: "left main"; max-width: 1010px; }
  #right-rail { display: none; }
}

@media (max-width: 900px) {
  html { font-size: 17px; }
  body { background: var(--ground); }
  #mobile-header { display: flex; }
  #layout { grid-template-columns: 1fr; grid-template-areas: "main"; padding: 0 22px; margin-top: 54px; }
  #main { padding: 24px 0 90px; max-width: var(--measure); margin: 0 auto; }
  #toc-rail { position: fixed; top: calc(54px + var(--progress-h)); left: 0; bottom: 0; width: min(86vw, 330px); height: auto; background: rgba(255,255,255,.985); padding: 28px 24px 44px; transform: translateX(-102%); transition: transform .24s ease; z-index: 950; box-shadow: 24px 0 60px rgba(8,21,32,.12); }
  #toc-rail.open { transform: translateX(0); }
  #toc { border-left: 0; }
  .toc-ch { font-size: .78rem; padding: 7px 0 7px 10px; }
  .toc-sub { font-size: .69rem; padding: 4px 0 4px 24px; }
  #cover { margin: 0 -22px 72px; min-height: 570px; padding: 58px 28px 44px; }
  .cov-pub { left: 28px; top: 34px; }
  .cov-title { font-size: clamp(2.4rem, 10vw, 3.65rem); max-width: 11ch; }
  #the-promise, #ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #letter { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background-size: 100% 210px; }
  .pull-quote { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .bar-row { grid-template-columns: 1fr; gap: 8px; }
  .bar-wrap { width: 100%; }
  .sec { scroll-margin-top: 72px; }
}

@media (max-width: 520px) {
  html { font-size: 16px; }
  #layout { padding: 0 17px; }
  #cover { margin-left: -17px; margin-right: -17px; min-height: 535px; padding: 54px 22px 38px; }
  .cov-pub { left: 22px; }
  .cov-title { font-size: 2.5rem; }
  .sec { padding-top: 58px; padding-bottom: 66px; }
  h1.sec-title { font-size: 2.1rem; }
  h2.sub-title { margin-top: 50px; font-size: 1.1rem; }
  .fig { margin: 48px 0 54px; }
  .fig-num { font-size: 4.2rem; }
  .letter-body { padding-left: 20px; }
  .sig { padding-left: 22px; }
}