/* ============================================================
   ION · Technical Whitepaper — editorial redesign
   Type:  Newsreader (display serif) · IBM Plex Sans (body)
          IBM Plex Mono (technical tokens / code / data)
   Brand: ION green + deep forest + near-black ink on white
   ============================================================ */

:root{
  --green:      #1FB268;   /* refined brand green — legible on white   */
  --green-mark: #2DC46E;   /* brighter mark green — dots, small accents */
  --forest:     #0C5238;   /* deep forest — bars, headers, title card  */
  --forest-deep:#08402C;
  --ink:        #10201A;   /* near-black body text (green undertone)   */
  --ink-2:      #33453E;   /* secondary text                          */
  --ink-3:      #6B7A73;   /* captions, meta                          */
  --hair:       #DDE6E1;   /* hairlines                               */
  --mint:       #EEF7F1;   /* callout tint                            */
  --mint-2:     #E2F1E8;
  --paper:      #FFFFFF;

  --f-display: "Newsreader", Georgia, serif;
  --f-body:    "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* ---- base ---- */
*{ box-sizing:border-box; }
doc-page{
  font-family:var(--f-body);
  color:var(--ink);
  font-size:10.5pt;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv05";
}
p{ margin:0 0 10pt; color:var(--ink-2); text-wrap:pretty; }
strong{ color:var(--ink); font-weight:600; }
a{ color:var(--forest); text-decoration:none; border-bottom:1px solid var(--green); }
a:hover{ color:var(--green); }

/* ---- running header / footer ---- */
.pg-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:9pt; margin-bottom:0;
  border-bottom:1.5pt solid var(--forest);
}
.pg-header img{ height:19pt; width:auto; display:block; }
.pg-header .doc-kind{
  font-family:var(--f-mono); font-size:7.5pt; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.pg-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8pt; border-top:1px solid var(--hair);
  font-family:var(--f-mono); font-size:7pt; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.pg-footer .conf{ display:flex; align-items:center; gap:7pt; }
.pg-footer .dot{ width:5pt; height:5pt; border-radius:50%; background:var(--green-mark); display:inline-block; }
.pg-footer .pnum::after{ content:counter(page); }

/* ---- section label (letter-spaced kicker) ---- */
.kicker{
  font-family:var(--f-mono); font-size:8pt; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--green);
  margin:0 0 10pt;
}
.kicker.on-dark{ color:var(--green-mark); }

/* ---- headings ---- */
h1,h2,h3,h4{ text-wrap:balance; }
h2{
  font-family:var(--f-display); font-weight:500;
  font-size:26pt; line-height:1.08; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 12pt;
}
h3{
  font-family:var(--f-display); font-weight:500;
  font-size:16pt; line-height:1.15; letter-spacing:-.01em;
  color:var(--forest); margin:20pt 0 7pt;
}
h4{
  font-family:var(--f-body); font-weight:600; font-size:10pt;
  letter-spacing:.02em; color:var(--ink); margin:14pt 0 4pt;
}

/* lead paragraph under a heading */
.lead{
  font-family:var(--f-display); font-weight:400;
  font-size:13.5pt; line-height:1.5; color:var(--ink-2);
  letter-spacing:-.005em; text-wrap:pretty;
}

/* ---- lists ---- */
ul.clean{ list-style:none; padding:0; margin:10pt 0; }
ul.clean li{
  position:relative; padding-left:20pt; margin:0 0 7pt;
  color:var(--ink-2); text-wrap:pretty;
}
ul.clean li::before{
  content:""; position:absolute; left:2pt; top:7.5pt;
  width:6pt; height:6pt; border-radius:1.5pt;
  background:var(--green); transform:rotate(45deg);
}
ol.steps{ margin:10pt 0; padding-left:0; list-style:none; counter-reset:st; }
ol.steps li{
  position:relative; padding-left:26pt; margin:0 0 9pt;
  color:var(--ink-2); counter-increment:st; text-wrap:pretty;
}
ol.steps li::before{
  content:counter(st); position:absolute; left:0; top:1pt;
  width:17pt; height:17pt; border-radius:50%;
  background:var(--forest); color:#fff;
  font-family:var(--f-mono); font-size:8pt; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   TITLE / COVER block
   ============================================================ */
.cover{ padding-top:4pt; }
.cover-title-card{
  background:var(--forest);
  color:#fff; border-radius:4pt;
  padding:34pt 34pt 36pt; margin-top:26pt;
  position:relative; overflow:hidden;
}
.cover-title-card .eyebrow{
  font-family:var(--f-mono); font-size:8pt; letter-spacing:.3em;
  text-transform:uppercase; color:var(--green-mark); margin:0 0 14pt;
}
.cover-title-card h1{
  font-family:var(--f-display); font-weight:400;
  font-size:44pt; line-height:1; letter-spacing:-.02em;
  margin:0 0 4pt; color:#fff;
}
.cover-title-card .subtitle{
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:19pt; color:var(--green-mark); margin:12pt 0 16pt;
  letter-spacing:-.01em;
}
.cover-title-card .desc{
  font-size:11pt; line-height:1.55; color:rgba(255,255,255,.82);
  max-width:34em; margin:0;
}
.cover-title-card .ring{
  position:absolute; right:-70pt; top:-70pt;
  width:230pt; height:230pt; border-radius:50%;
  border:1.5pt solid rgba(45,196,110,.22);
  box-shadow:0 0 0 26pt rgba(45,196,110,.05) inset;
}
.cover-meta{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:22pt; border-top:1px solid var(--hair);
}
.cover-meta .cell{ padding:14pt 16pt 4pt 0; }
.cover-meta .cell + .cell{ padding-left:18pt; border-left:1px solid var(--hair); }
.cover-meta .lbl{
  font-family:var(--f-mono); font-size:7pt; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 5pt;
}
.cover-meta .val{ font-size:10.5pt; font-weight:600; color:var(--ink); }

/* ============================================================
   CALLOUTS / FIGURES
   ============================================================ */
.callout{
  background:var(--mint); border:1px solid var(--mint-2);
  border-radius:4pt; padding:16pt 18pt; margin:14pt 0;
}
.callout.center{ text-align:center; }
.callout .c-title{
  font-family:var(--f-mono); font-size:9pt; letter-spacing:.06em;
  color:var(--forest); font-weight:600; margin:0 0 6pt;
}
.callout .c-big{
  font-family:var(--f-mono); font-size:15pt; color:var(--forest-deep);
  font-weight:600; margin:2pt 0;
}
.callout .c-sub{ font-family:var(--f-mono); font-size:10pt; color:var(--green); margin:4pt 0 0; }

/* pull quote / principle */
.principle{
  border-left:3pt solid var(--green); padding:2pt 0 2pt 20pt;
  margin:18pt 0;
}
.principle p{
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:15pt; line-height:1.42; color:var(--ink);
  letter-spacing:-.01em; margin:0;
}

/* definition box (mdat / moov) */
.def{ display:grid; grid-template-columns:150pt 1fr; margin:12pt 0; border-radius:4pt; overflow:hidden; border:1px solid var(--hair); }
.def .def-key{
  background:var(--forest); color:#fff; padding:16pt 18pt;
  display:flex; align-items:center;
}
.def .def-key code{ font-family:var(--f-mono); font-size:13pt; font-weight:500; letter-spacing:.02em; }
.def .def-val{ background:#F7FAF8; padding:15pt 18pt; }
.def .def-val p{ margin:0; font-size:10pt; }

/* code / mono token inline */
code.tok{
  font-family:var(--f-mono); font-size:.92em; background:var(--mint);
  color:var(--forest-deep); padding:1pt 5pt; border-radius:3pt;
  border:1px solid var(--mint-2); font-weight:500;
}

/* ---- tables ---- */
table.wp{
  width:100%; border-collapse:collapse; margin:14pt 0; font-size:9.5pt;
  break-inside:auto;
}
table.wp thead th{
  background:var(--forest); color:#fff; text-align:left;
  padding:10pt 14pt; font-weight:600; font-size:9pt;
  letter-spacing:.01em;
}
table.wp thead th:first-child{ border-top-left-radius:3pt; }
table.wp thead th:last-child{ border-top-right-radius:3pt; }
table.wp td{
  padding:9pt 14pt; border-bottom:1px solid var(--hair);
  color:var(--ink-2); vertical-align:top;
}
table.wp tbody tr:nth-child(even){ background:#F7FAF8; }
table.wp td.k{ font-family:var(--f-mono); font-size:9pt; color:var(--forest); font-weight:500; white-space:nowrap; }

/* figure caption */
figure{ margin:16pt 0; break-inside:avoid; }
figcaption{
  font-family:var(--f-mono); font-size:7.5pt; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:9pt;
  text-align:center;
}

/* section divider spacing helper */
.section{ margin-top:26pt; }
.pb{ break-before:page; }

/* two-col text where useful */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22pt; }
.grid-2 h4{ margin-top:0; }