/* Public renderer styles only. Homepage and authenticated workspace are independent. */
@font-face {
  font-family:Inter;
  src:url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}
:root {
  color-scheme:dark;
  --bg:#111214;
  --panel:#191b1e;
  --panel2:#212427;
  --surface:var(--panel);
  --surface2:var(--panel2);
  --surface3:#303438;
  --border:#3f4449;
  --control:#747b83;
  --text:#ececea;
  --strong:#faf9f6;
  --muted:#b1b5ba;
  --cyan:#6cdbe3;
  --accent:var(--cyan);
  --green:#74dd9f;
  --red:#ff8989;
  --yellow:#f3cb78;
  --on-accent:#112326;
  --shadow:0 18px 50px #0006;
  --width:1240px
}
html[data-theme=light] {
  color-scheme:light;
  --bg:#f5f4f0;
  --panel:#ffffff;
  --panel2:#eaece9;
  --surface3:#dce0dc;
  --border:#c4c8c4;
  --control:#727c78;
  --text:#282e2c;
  --strong:#101816;
  --muted:#525e58;
  --cyan:#006c75;
  --green:#137640;
  --red:#b62235;
  --yellow:#825708;
  --on-accent:#ffffff;
  --shadow:0 18px 50px #20332c18
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 1rem/1.65 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:var(--cyan);
  text-underline-offset:4px;
  text-decoration-thickness:1px
}
a:hover {
  text-decoration:underline
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:4px
}
img,svg {
  max-width:100%
}
p,li,h1,h2,h3,a {
  overflow-wrap:break-word
}
h1,h2,h3 {
  color:var(--strong);
  text-wrap:balance
}
h1 {
  font-size:clamp(2rem,3.6vw,3.4rem);
  line-height:1.1;
  letter-spacing:-.045em;
  margin:0;
  font-weight:720;
  max-width:23ch
}
h2 {
  font-size:1.65rem;
  line-height:1.23;
  letter-spacing:-.025em;
  margin:0 0 12px;
  font-weight:680
}
h3 {
  font-size:1.15rem;
  line-height:1.35;
  margin:0 0 10px;
  font-weight:660
}
p {
  margin:0 0 14px
}
ul,ol {
  padding-left:22px
}
li {
  margin-bottom:8px
}
strong {
  color:var(--strong);
  font-weight:650
}
small {
  font-size:.82rem
}
main,.wrap {
  width:min(var(--width),calc(100% - 64px));
  margin:0 auto;
  padding:40px 0 52px;
  min-height:55vh
}
main>*,.wrap>* {
  min-width:0
}
section[id],h2[id] {
  scroll-margin-top:100px
}
.kicker {
  font-size:.75rem;
  font-weight:720;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 14px
}
.intro,.subhead,.art-dek,.lede {
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--muted);
  max-width:68ch;
  margin:20px 0 0
}
.risk-note,.fine-print,.note {
  color:var(--muted);
  font-size:.8125rem;
  line-height:1.65;
  margin:24px 0 0
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:80;
  background:var(--cyan);
  color:var(--on-accent);
  padding:12px 18px;
  border-radius:8px
}
.skip-link:focus {
  top:8px
}
/* Compact shared header; links remain visible when JavaScript is unavailable. */
.nav {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px;
  padding:14px max(32px,calc((100vw - var(--width))/2));
  border-bottom:1px solid var(--border);
  background:var(--bg)
}
.logo {
  font-size:1.25rem;
  font-weight:750;
  letter-spacing:-.045em;
  color:var(--strong);
  text-decoration:none;
  white-space:nowrap
}
.logo span {
  color:var(--strong)
}
.logo::before {
  content:'◈';
  color:var(--cyan);
  font-size:1.5rem;
  margin-right:9px;
  vertical-align:-1px
}
.logo:hover {
  text-decoration:none
}
.nav-links {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.nav a:not(.logo) {
  font-size:.875rem;
  font-weight:560;
  color:var(--muted);
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.nav a:not(.logo):hover,.nav a[aria-current=page] {
  color:var(--strong)
}
.nav a[aria-current=page] {
  text-decoration:underline;
  text-decoration-color:var(--cyan);
  text-underline-offset:8px
}
.theme-toggle,.menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px;
  border:1px solid var(--control);
  border-radius:8px;
  background:transparent;
  color:var(--text)
}
.theme-toggle {
  width:44px;
  order:3;
  flex-shrink:0
}
.theme-toggle svg {
  width:18px;
  height:18px
}
.theme-toggle .i-moon {
  display:none
}
html[data-theme=light] .theme-toggle .i-sun {
  display:none
}
html[data-theme=light] .theme-toggle .i-moon {
  display:block
}
.menu-toggle {
  display:none;
  font-size:.875rem
}
.public-footer {
  border-top:1px solid var(--border);
  width:min(var(--width),calc(100% - 64px));
  margin:0 auto;
  padding:24px 0 32px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:start;
  color:var(--muted);
  font-size:.8125rem
}
.public-footer p {
  margin:0;
  max-width:42ch
}
.public-footer nav {
  display:flex;
  gap:12px 24px;
  flex-wrap:wrap
}
.public-footer a {
  color:var(--muted);
  min-height:36px;
  display:inline-flex;
  align-items:center
}
/* Landing pages, related resources and FAQs. */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.43fr);
  gap:48px;
  align-items:center;
  padding-bottom:32px;
  border-bottom:1px solid var(--border)
}
.hero-panel,.trial-box,.path-panel {
  background:var(--panel);
  padding:24px;
  border:1px solid var(--border);
  border-radius:12px
}
.hero-panel strong,.trial-box strong {
  display:block;
  font-size:1.25rem;
  line-height:1.3;
  margin-bottom:14px
}
.hero-panel ul {
  padding:0;
  margin:0;
  list-style:none
}
.hero-panel li {
  position:relative;
  padding-left:18px;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--muted);
  margin:12px 0 0
}
.hero-panel li::before {
  content:'›';
  position:absolute;
  left:0;
  color:var(--cyan)
}
.content-grid,.faq-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0
}
.content-card,.faq-card {
  padding:24px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px
}
.content-card h2,.faq-card h2,.faq-card h3 {
  font-size:1.125rem;
  line-height:1.4;
  margin:0 0 12px
}
.content-card p,.faq-card p {
  font-size:.9375rem;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.section-head {
  margin-top:36px
}
.deep {
  max-width:74ch;
  margin:32px auto
}
.deep h2 {
  font-size:1.5rem;
  margin:32px 0 14px
}
.deep h2:first-child {
  margin-top:0
}
.deep p,.deep li {
  font-size:1rem;
  line-height:1.8;
  color:var(--muted)
}
.deep strong {
  color:var(--text)
}
.deep li::marker,.keytakes li::marker {
  color:var(--cyan)
}
.cta-band {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center;
  padding:28px;
  margin-top:36px;
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:12px;
  background:var(--panel)
}
.cta-band strong {
  display:block;
  font-size:1.35rem;
  line-height:1.3;
  margin-bottom:8px
}
.cta-band span {
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.6
}
.cta-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:end
}
.button,.cta,.offer-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 18px;
  border:1px solid var(--cyan);
  border-radius:8px;
  color:var(--on-accent);
  background:var(--cyan);
  text-decoration:none;
  font-size:.875rem;
  font-weight:680;
  line-height:1.4;
  text-align:center
}
.button:hover,.cta:hover,.offer-cta:hover {
  text-decoration:none;
  filter:brightness(1.08)
}
.button.secondary,.cta.secondary {
  color:var(--text);
  background:transparent;
  border-color:var(--control)
}
.related {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 28px;
  margin-top:32px;
  border-top:1px solid var(--border);
  padding-top:16px
}
.related a {
  padding:12px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  font-size:.875rem;
  line-height:1.5
}
.related a::after {
  content:' ↗';
  color:var(--muted)
}
.cmp-wrap,.table-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  margin:16px 0;
  max-width:100%
}
.cmp,table {
  border-collapse:collapse;
  width:100%;
  font-size:.875rem;
  line-height:1.55
}
.cmp {
  min-width:610px
}
.cmp caption {
  text-align:left;
  padding:16px 18px;
  color:var(--muted);
  font-size:.8125rem
}
.cmp th,.cmp td,th,td {
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top
}
.cmp thead th,thead th {
  color:var(--strong);
  background:var(--panel2);
  font-size:.75rem;
  letter-spacing:.04em;
  font-weight:650
}
.cmp tbody th {
  width:30%;
  color:var(--text)
}
.cmp td,td {
  color:var(--muted)
}
tr:last-child>td,tr:last-child>th {
  border-bottom:0
}
.cmp-note {
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.6
}
.scroll-hint {
  color:var(--muted);
  font-size:.75rem;
  margin:4px 0 12px
}
/* Editorial reading layouts. */
.page-guides .hero {
  grid-template-columns:1fr
}
.page-guides .intro {
  max-width:72ch
}
.page-guides .faq-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}
.page-guides .faq-card {
  padding:28px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px
}
.page-guides .faq-card h2 {
  font-size:1.5rem;
  max-width:28ch
}
.page-guides .faq-card h2 a {
  color:var(--strong);
  text-decoration:none
}
.guide-index {
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  font-weight:680;
  margin-bottom:14px
}
.guide-read {
  font-size:.875rem;
  margin-top:auto;
  padding-top:18px;
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.crumbs,.art-meta {
  font-size:.8125rem;
  color:var(--muted)
}
.crumbs a {
  color:var(--muted)
}
.art-head {
  padding-bottom:26px;
  border-bottom:1px solid var(--border);
  max-width:920px
}
.art-head h1 {
  max-width:24ch
}
.art-dek {
  max-width:72ch
}
.art-meta {
  margin:18px 0 0
}
.reading-layout {
  display:grid;
  grid-template-columns:230px minmax(0,74ch);
  justify-content:space-between;
  gap:54px;
  margin-top:28px
}
.article-toc {
  align-self:start;
  position:sticky;
  top:100px;
  font-size:.8125rem;
  color:var(--muted)
}
.article-toc summary {
  font-weight:650;
  color:var(--strong);
  font-size:.875rem;
  cursor:pointer;
  list-style:none;
  padding:0 0 14px
}
.article-toc summary::after {
  content:' −';
  float:right
}
.article-toc:not([open]) summary::after {
  content:' +'
}
.article-toc ol {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:4px
}
.article-toc a {
  display:block;
  color:var(--muted);
  line-height:1.5;
  padding:9px 0;
  text-decoration:none;
  border-bottom:1px solid var(--border)
}
.article-toc a:hover {
  color:var(--cyan)
}
.article-copy {
  min-width:0
}
.article-copy .deep {
  margin:28px 0 0
}
.keytakes {
  padding:22px 24px;
  border-left:3px solid var(--cyan);
  border-radius:0 10px 10px 0;
  background:var(--panel);
  margin:0
}
.keytakes>strong {
  display:block;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px
}
.keytakes ul {
  margin:0
}
.keytakes li {
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.7
}
.keytakes li:last-child {
  margin:0
}
/* Pricing: compact plan comparison, same entitlements and checkout destinations. */
.page-pricing .hero {
  grid-template-columns:1fr
}
.page-pricing .hero h1 {
  max-width:22ch
}
.free-access {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 20px;
  margin:16px 0 0;
  font-size:.875rem;
  color:var(--muted)
}
.free-access a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-weight:650
}
.trial-box span {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.65
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:28px 0
}
.price-card {
  padding:28px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:20px
}
.price-card.featured {
  border-color:var(--control)
}
.price-badge,.offer-eyebrow,.feature-preview-tier {
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--cyan)
}
.plan-head {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:20px
}
.plan-head h2 {
  font-size:1.75rem;
  line-height:1.2;
  margin:0
}
.price {
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:720;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.price span {
  display:block;
  font-size:.6875rem;
  font-weight:550;
  letter-spacing:0;
  color:var(--muted);
  margin-top:8px;
  white-space:normal;
  max-width:18ch
}
.price-card p {
  font-size:.9375rem;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.price-card ul {
  padding:0;
  margin:0 0 4px;
  list-style:none;
  display:grid;
  gap:10px
}
.price-card li {
  padding-left:22px;
  font-size:.9375rem;
  line-height:1.6;
  position:relative;
  margin:0
}
.price-card li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--cyan)
}
.price-card .cta {
  margin-top:0
}
.price-card .plan-terms {
  font-size:.8125rem;
  line-height:1.6;
  margin-top:-6px
}
.offer-banner {
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  background:var(--panel2);
  border:1px solid var(--control);
  border-radius:12px;
  padding:24px;
  margin:24px 0
}
.offer-banner strong {
  display:block;
  font-size:1.5rem
}
.offer-banner p {
  color:var(--muted);
  font-size:.9375rem;
  margin:8px 0 0
}
.offer-cta {
  flex-shrink:0
}
.feature-preview,.soon {
  margin:40px 0;
  padding:32px 0 0;
  border-top:1px solid var(--border)
}
.feature-preview-head {
  display:flex;
  align-items:end;
  gap:32px;
  justify-content:space-between;
  margin-bottom:24px
}
.feature-preview h2,.soon h2 {
  font-size:1.75rem;
  max-width:28ch
}
.feature-preview-copy,.soon>p {
  color:var(--muted);
  font-size:.9375rem;
  max-width:64ch
}
.feature-preview-copy {
  max-width:54ch;
  margin:0
}
.feature-preview-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.feature-preview-card {
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--panel)
}
.feature-preview-media {
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:10px
}
.feature-preview-media img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}
.feature-preview-body {
  padding:20px;
  display:grid;
  gap:10px
}
.feature-preview-card h3 {
  margin:0;
  font-size:1.125rem
}
.feature-preview-card p {
  margin:0;
  color:var(--muted);
  font-size:.875rem;
  line-height:1.65
}
.feature-preview-tier {
  color:var(--muted)
}
.preview-caption {
  font-size:.75rem;
  color:var(--muted);
  line-height:1.5;
  padding:12px 20px 0;
  margin:0
}
.soon-plan {
  margin-top:24px
}
.soon-plan-title {
  font-size:1.125rem;
  font-weight:650;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:14px
}
.soon-plan-title>span {
  font-size:.75rem;
  color:var(--muted);
  font-weight:500
}
.soon-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.soon-card {
  border-top:1px solid var(--border);
  padding:18px 0;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:10px
}
.soon-card strong {
  font-size:1rem;
  line-height:1.4;
  display:block
}
.soon-card>span {
  color:var(--muted);
  font-size:.875rem;
  line-height:1.65
}
.soon-card-title {
  display:grid;
  gap:8px
}
.testing-badge,.tr-thin {
  display:inline-block;
  width:max-content;
  max-width:100%;
  color:var(--yellow);
  font-size:.6875rem;
  font-weight:650;
  letter-spacing:.05em;
  border:1px solid currentColor;
  border-radius:5px;
  padding:3px 6px
}
.compare {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:24px 0
}
.metric {
  padding:20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px
}
.metric strong {
  display:block;
  font-size:1.25rem;
  margin-bottom:10px
}
.metric span {
  font-size:.875rem;
  line-height:1.65;
  color:var(--muted)
}
/* Visual education modules and figures. */
.page-education .hero {
  grid-template-columns:minmax(0,1fr) 290px;
  gap:42px
}
.page-education h1 {
  font-size:clamp(2rem,3.3vw,3rem);
  max-width:25ch
}
.education-note {
  font-size:.8125rem;
  line-height:1.65;
  border-left:2px solid var(--yellow);
  padding-left:16px;
  margin:20px 0 0;
  color:var(--muted)
}
.path-panel {
  padding:18px
}
.path-title {
  font-size:.875rem;
  font-weight:700;
  margin-bottom:12px
}
.path-list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0
}
.path-list li {
  margin:0
}
.path-list a {
  display:grid;
  grid-template-columns:26px 1fr;
  gap:8px;
  font-size:.8125rem;
  color:var(--text);
  padding:9px 0;
  min-height:40px;
  border-top:1px solid var(--border);
  text-decoration:none
}
.path-list a>span {
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.section {
  padding-top:40px
}
.section+.section {
  margin-top:36px;
  border-top:1px solid var(--border)
}
.section .section-head {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:42px;
  align-items:start;
  margin:0 0 24px
}
.section h2 {
  font-size:2rem
}
.section-copy {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.75;
  margin:0
}
.module-grid,.two-col,.workflow,.viz-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:24px
}
.module-grid>*,.two-col>*,.workflow>*,.viz-row>* {
  min-width:0
}
.module-grid>:last-child:nth-child(odd) {
  grid-column:1/-1
}
.two-col.stacked,.viz-row.single {
  grid-template-columns:1fr
}
.viz-row.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.module,.step,figure.viz {
  margin:0;
  padding:24px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  min-width:0
}
.module h3,.step h3 {
  font-size:1.125rem;
  margin:0 0 14px
}
.module p,.step p {
  font-size:.9375rem;
  line-height:1.75;
  color:var(--muted);
  margin:0
}
.module p+.checklist {
  margin-top:18px
}
.metric-list {
  list-style:none;
  margin:16px 0 0;
  padding:0
}
.metric-list li {
  display:grid;
  grid-template-columns:minmax(115px,.35fr) minmax(0,1fr);
  gap:18px;
  padding:12px 0;
  border-top:1px solid var(--border);
  margin:0;
  font-size:.875rem;
  color:var(--muted);
  line-height:1.7
}
.metric-list li>* {
  min-width:0
}
.metric-list code {
  color:var(--cyan);
  font:600 .8125rem/1.6 ui-monospace,monospace;
  overflow-wrap:anywhere
}
.metric-list-wide li {
  grid-template-columns:minmax(0,1fr) auto
}
.tag {
  display:inline-block;
  max-width:100%;
  font-size:.6875rem;
  line-height:1.5;
  padding:4px 7px;
  border:1px solid currentColor;
  border-radius:5px;
  color:var(--green);
  font-weight:650
}
.tag.warn {
  color:var(--yellow)
}
.checklist {
  margin:0;
  padding:0;
  list-style:none
}
.checklist li {
  margin-bottom:14px;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.75
}
.checklist-item {
  display:block;
  padding-left:28px;
  position:relative;
  color:var(--muted);
  font-size:.9375rem
}
.checklist-item input {
  position:absolute;
  left:0;
  top:4px;
  width:18px;
  height:18px;
  accent-color:var(--cyan)
}
.step-num {
  color:var(--cyan);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:12px
}
.viz {
  display:flex;
  flex-direction:column;
  gap:14px
}
.viz svg {
  display:block;
  width:100%;
  height:auto
}
.viz-title {
  font-size:1rem;
  font-weight:650;
  color:var(--strong)
}
.viz figcaption {
  font-size:.8125rem;
  line-height:1.7;
  color:var(--muted)
}
.legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:var(--muted);
  font-size:.8125rem;
  margin-top:16px
}
.legend-item {
  display:inline-flex;
  align-items:center;
  gap:8px
}
.legend-dot {
  display:inline-block;
  width:14px;
  height:4px;
  border-radius:2px
}
.funnel-mobile {
  display:none
}
.funnel-stage {
  padding:14px;
  background:var(--panel2);
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  border-left:3px solid var(--cyan)
}
.funnel-stage span {
  font-size:.8125rem;
  color:var(--muted)
}
.funnel-stage b {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  color:var(--cyan)
}
.related-section {
  margin-top:40px
}
.related-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.related-link {
  padding:14px 0;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
  text-decoration:none
}
.diagram-open,.screenshot-open {
  font-size:.8125rem;
  background:transparent;
  border:1px solid var(--control);
  color:var(--text);
  border-radius:6px;
  padding:8px 12px;
  min-height:40px;
  align-self:start
}
.diagram-open {
  margin-top:auto
}
.public-dialog {
  max-width:min(1280px,calc(100vw - 32px));
  width:100%;
  max-height:90vh;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--control);
  border-radius:12px;
  padding:20px;
  box-shadow:var(--shadow)
}
.public-dialog::backdrop {
  background:color-mix(in srgb,var(--bg) 85%,transparent)
}
.public-dialog[data-image-preview] {
  max-width:min(1840px,calc(100vw - 32px))
}
.public-dialog[open] {
  display:flex;
  flex-direction:column
}
.public-dialog > .scroll-hint,.dialog-head,.dialog-caption {
  flex-shrink:0
}
html:has(.public-dialog[open]) {
  overflow:hidden
}
.dialog-head {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:20px
}
.dialog-head h2 {
  min-width:0;
  overflow-wrap:anywhere;
  font-size:1.1rem;
  margin:0
}
.dialog-close {
  border:1px solid var(--control);
  border-radius:6px;
  background:transparent;
  color:var(--text);
  min-height:44px;
  padding:8px 14px
}
.dialog-content {
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  overscroll-behavior:contain;
  max-height:70vh
}
/* Short image viewers scroll their surrounding text without collapsing the image. */
.public-dialog[data-image-preview] .dialog-content {
  min-height:160px
}
.public-dialog[data-image-preview] .dialog-head {
  position:sticky;
  top:0;
  z-index:1;
  background:var(--panel);
  box-shadow:0 -20px 0 16px var(--panel),0 0 0 8px var(--panel)
}
.dialog-content svg {
  min-width:700px;
  max-height:none;
  width:100%;
  height:auto
}
.dialog-content img {
  max-width:none;
  width:auto;
  height:auto;
  display:block;
  margin-inline:auto
}
.dialog-caption {
  font-size:.8125rem;
  color:var(--muted);
  margin:16px 0 0
}
/* Accountability, policy and transactional notices. */
.page-record .wrap {
  max-width:1120px
}
.page-record .lede {
  max-width:80ch;
  font-size:1rem
}
.tr-sub {
  font-size:.875rem;
  line-height:1.7;
  color:var(--muted);
  margin:14px 0
}
.tr-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:28px 0
}
.tr-card {
  padding:20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel)
}
.tr-card span {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:10px
}
.tr-card strong {
  font-size:2rem;
  line-height:1.2;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums
}
.tr-card small {
  display:block;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:10px;
  line-height:1.6
}
.tr-table {
  min-width:620px
}
.tr-thin {
  margin-left:6px
}
.page-record h2 {
  margin-top:30px
}
.tr-empty,.method {
  background:var(--panel);
  padding:28px;
  border:1px solid var(--border);
  border-radius:10px;
  margin:28px 0
}
.tr-empty {
  border-left:3px solid var(--cyan)
}
.tr-empty h2 {
  margin-top:0
}
.tr-empty p,.method p,.method li {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.8;
  max-width:85ch
}
.method h3 {
  font-size:1.125rem
}
.page-record footer:not(.public-footer) {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:28px
}
.page-policy main {
  max-width:780px
}
.page-policy h1 {
  max-width:22ch;
  margin-bottom:22px
}
.page-policy h2 {
  font-size:1.35rem;
  margin-top:32px
}
.page-policy p,.page-policy li {
  font-size:1rem;
  color:var(--muted);
  line-height:1.8
}
.page-notice main {
  max-width:680px;
  padding-top:56px;
  padding-bottom:64px;
  min-height:65vh;
  display:flex;
  align-items:center
}
.notice-card {
  width:100%;
  border:1px solid var(--border);
  border-top:3px solid var(--cyan);
  border-radius:12px;
  background:var(--panel);
  padding:36px
}
.notice-card h1 {
  font-size:2rem;
  line-height:1.2;
  margin:0 0 18px
}
.notice-card p {
  color:var(--muted);
  line-height:1.75
}
.notice-card .button {
  margin-top:10px
}
@media(min-width:1700px) {
  :root {
    --width:1380px
  }
  .page-article main {
    max-width:1240px
  }
  .page-seo .hero {
    gap:72px
  }
  .deep {
    max-width:78ch
  }
  .page-education .hero {
    grid-template-columns:1fr 320px
  }
}
@media(max-width:1050px) {
  .hero,.page-pricing .hero {
    gap:28px;
    grid-template-columns:minmax(0,1fr) 280px
  }
  .nav-links {
    gap:16px
  }
  .cta-band {
    grid-template-columns:1fr;
    gap:20px
  }
  .cta-actions {
    justify-content:start
  }
  .reading-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:30px
  }
  .content-grid,.faq-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .faq-grid>:last-child:nth-child(odd),.content-grid>:last-child:nth-child(odd) {
    grid-column:1/-1
  }
  .soon-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .plan-head {
    flex-direction:column;
    gap:14px
  }
  .feature-preview-head {
    display:block
  }
  .feature-preview-copy {
    max-width:75ch
  }
  .page-education .hero {
    gap:28px;
    grid-template-columns:1fr 260px
  }
  .viz-row.three {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .viz-row.three>:last-child:nth-child(odd) {
    grid-column:1/-1
  }
  .compare,.tr-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:90px
  }
  main,.wrap {
    width:calc(100% - 36px);
    padding:28px 0 40px
  }
  .nav {
    padding:12px 18px;
    min-height:68px;
    gap:12px;
    flex-wrap:wrap
  }
  .logo {
    font-size:1.125rem
  }
  .logo::before {
    font-size:1.35rem;
    margin-right:7px
  }
  .nav-links {
    width:100%;
    gap:8px 20px;
    justify-content:start
  }
  .nav.has-menu {
    flex-wrap:nowrap
  }
  .has-menu .menu-toggle {
    display:inline-flex
  }
  .has-menu .nav-links {
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:calc(100% + 8px);
    width:auto;
    background:var(--panel);
    padding:16px;
    border:1px solid var(--control);
    border-radius:12px;
    box-shadow:var(--shadow);
    max-height:calc(100dvh - 100px);
    overflow:auto
  }
  .has-menu.menu-open .nav-links {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px
  }
  .has-menu .nav-links>a {
    font-size:1rem;
    min-height:46px;
    padding:8px 10px;
    border-radius:6px
  }
  .has-menu .nav-links>a:hover {
    background:var(--panel2)
  }
  .has-menu .theme-toggle {
    margin:8px 0 0 8px
  }
  .hero,.page-pricing .hero,.page-education .hero {
    grid-template-columns:1fr;
    gap:24px;
    padding-bottom:26px
  }
  .hero-panel,.trial-box {
    padding:20px
  }
  .intro,.subhead,.art-dek {
    font-size:1rem;
    margin-top:18px
  }
  h1 {
    font-size:2rem;
    line-height:1.15;
    letter-spacing:-.035em;
    max-width:28ch
  }
  .page-education h1 {
    font-size:2rem
  }
  .content-grid,.faq-grid,.page-guides .faq-grid,.cards,.feature-preview-grid,.module-grid,.two-col,.workflow,.viz-row,.viz-row.three,.section .section-head {
    grid-template-columns:1fr;
    gap:16px
  }
  .content-grid>:last-child:nth-child(odd),.faq-grid>:last-child:nth-child(odd),.viz-row.three>:last-child:nth-child(odd) {
    grid-column:auto
  }
  .content-card,.faq-card,.page-guides .faq-card {
    padding:22px
  }
  .page-guides .faq-card h2 {
    font-size:1.35rem
  }
  .related,.related-links {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px
  }
  .cta-band {
    padding:22px;
    gap:20px
  }
  .cta-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .button {
    padding:11px 12px
  }
  .section-head {
    font-size:1.5rem;
    margin-top:28px
  }
  .reading-layout {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin-top:22px
  }
  .article-toc {
    position:static;
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px 18px
  }
  .article-toc summary {
    padding:0
  }
  .article-toc[open] summary {
    padding-bottom:10px
  }
  .article-toc ol {
    gap:0
  }
  .article-copy {
    width:100%
  }
  .keytakes {
    padding:20px
  }
  .deep {
    margin-top:28px
  }
  .deep h2 {
    font-size:1.4rem;
    margin-top:28px
  }
  .deep p,.deep li {
    line-height:1.8
  }
  .price-card {
    padding:24px;
    gap:20px
  }
  .plan-head {
    flex-direction:row;
    gap:16px
  }
  .plan-head h2 {
    font-size:1.4rem
  }
  .price {
    font-size:1.7rem
  }
  .offer-banner {
    display:block;
    padding:20px
  }
  .offer-cta {
    margin-top:18px;
    width:100%
  }
  .feature-preview,.soon {
    margin-top:30px;
    padding-top:26px
  }
  .feature-preview-head {
    margin-bottom:20px
  }
  .feature-preview h2,.soon h2 {
    font-size:1.5rem
  }
  .soon-grid {
    gap:0 20px
  }
  .compare,.tr-grid {
    gap:12px
  }
  .metric,.tr-card {
    padding:16px
  }
  .metric strong {
    font-size:1.15rem
  }
  .tr-card strong {
    font-size:1.75rem
  }
  .path-list {
    grid-template-columns:1fr 1fr;
    gap:0 18px
  }
  .path-list a {
    grid-template-columns:20px 1fr;
    font-size:.8125rem;
    align-items:start;
    padding:10px 0
  }
  .path-panel {
    padding:18px
  }
  .section {
    padding-top:30px
  }
  .section+.section {
    margin-top:28px
  }
  .section h2 {
    font-size:1.65rem
  }
  .section .section-head {
    gap:12px
  }
  .module,.step,figure.viz {
    padding:20px
  }
  .metric-list li {
    grid-template-columns:105px minmax(0,1fr);
    gap:14px
  }
  .module table {
    min-width:500px
  }
  .table-wrap table {
    min-width:580px
  }
  .funnel-viz>svg {
    display:none
  }
  .funnel-mobile {
    display:grid;
    gap:10px
  }
  .public-footer {
    width:calc(100% - 36px);
    display:block;
    padding-top:24px
  }
  .public-footer nav {
    gap:0 20px;
    margin-top:12px
  }
  .tr-empty,.method {
    padding:22px
  }
  .page-notice main {
    padding-top:32px;
    min-height:60vh
  }
  .notice-card {
    padding:24px
  }
  .notice-card h1 {
    font-size:1.7rem
  }
  .page-policy main {
    padding-top:30px
  }
  .dialog-content svg {
    min-width:640px
  }
  .public-dialog {
    padding:16px
  }
}
@media(max-width:370px) {
  .logo {
    font-size:1.05rem
  }
  .menu-toggle {
    padding:9px;
    font-size:.8125rem
  }
  .content-card,.faq-card,.price-card,.module,.step,figure.viz {
    padding:18px
  }
  .plan-head {
    flex-direction:column;
    gap:12px
  }
  .price {
    font-size:2rem
  }
  .price span {
    max-width:none
  }
  .cta-actions {
    grid-template-columns:1fr
  }
  .related,.related-links,.soon-grid,.compare,.tr-grid {
    grid-template-columns:1fr
  }
  .path-list {
    grid-template-columns:1fr
  }
  .metric-list li,.metric-list-wide li {
    grid-template-columns:1fr;
    gap:6px
  }
  .feature-preview-body {
    padding:18px
  }
  .notice-card {
    padding:20px
  }
  .tr-card {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px
  }
  .tr-card span {
    margin:0;
    align-self:center
  }
  .tr-card small {
    grid-column:1/-1;
    margin:0
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
@media print {
  .nav,.public-footer,.article-toc,.diagram-open,.screenshot-open,.cta-band,.skip-link {
    display:none!important
  }
  body {
    color:var(--text);
    background:var(--bg)
  }
  main,.wrap {
    width:100%;
    max-width:none
  }
  .reading-layout {
    display:block
  }
  .module,figure.viz,.price-card {
    break-inside:avoid
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
:root {
  --on-chart:#112326
}
html[data-theme=light] {
  --on-chart:#ffffff
}
.page-seo .reading-layout>.deep {
  margin:0;
  max-width:none
}
.feature-preview-media {
  aspect-ratio:16/10;
  display:flex;
  align-items:center
}
.feature-preview-media img {
  width:100%;
  height:100%;
  object-fit:contain
}
/* Intrinsic-size safety: preserve reflow when the user enlarges text. */
.cards>*,.section-head>*,.plan-head>*,.feature-preview-grid>*,.compare>*,.tr-grid>* {
  min-width:0
}
.plan-head {
  flex-wrap:wrap
}
.nav.has-menu .logo {
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal
}
.menu-toggle {
  flex-shrink:0
}
.nav:not(.has-menu) {
  position:relative
}
html {
  scroll-padding-top:var(--public-header-offset,100px)
}
section[id],h2[id] {
  scroll-margin-top:var(--public-header-offset,100px)
}
.article-toc {
  top:var(--public-header-offset,100px)
}
html[data-theme=light] .viz rect[fill="var(--green)"][opacity="0.85"],html[data-theme=light] .viz rect[fill="var(--cyan)"][opacity="0.7"] {
  opacity:1;
  stroke:var(--panel);
  stroke-width:1.5px
}
.viz-title {
  overflow-wrap:anywhere
}
.data-note {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--yellow);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.7;
}
.testing-badge.available {
  color: var(--muted);
}