/* Static editorial pages only; shared brand components remain in /site.css. */
.blog-page {
  min-height: 100vh;
  background: #f6f8fa;
  color: #1b2932;
}

.blog-topbar { padding-inline: clamp(1rem, 4vw, 3.25rem); }
.blog-page .main-nav { font-size: 14px; }

.blog-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 1.75rem 0 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #b8d7ce;
  border-radius: 1rem;
  background: #eef7f3;
}
.blog-tool-hero-eyebrow {
  margin: 0 0 .6rem;
  color: #216858;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.blog-tool-hero-copy h2 { margin: 0 0 .8rem; color: #183b33; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
.blog-tool-hero-copy > p:not(.blog-tool-hero-eyebrow) { margin: 0 0 1.1rem; color: #3e5c52; font-size: 16px; line-height: 1.55; }
.blog-page .blog-tool-hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .85rem 1.1rem;
  border-radius: .65rem;
  background: #116b62;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
}
.blog-page .blog-tool-hero-action:hover { background: #0c554e; }
.blog-page .blog-tool-hero-action:focus-visible { outline: 3px solid #185db6; outline-offset: 4px; }
.blog-tool-hero-visual { min-width: 0; margin: 0; }
.blog-tool-hero-visual-stack { display: grid; min-width: 0; gap: 1rem; }
.blog-tool-hero-visual img { display: block; width: 100%; height: auto; border-radius: .8rem; }
.blog-tool-hero-visual figcaption { margin: .6rem 0 0; color: #50685f; font-size: 13px; line-height: 1.45; }
.blog-tool-hero--interface { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); align-items: start; }
.blog-tool-interface { min-width: 0; padding: 1rem; border: 1px solid #c9ddd8; border-radius: .8rem; background: #f8fbfb; color: #20343b; box-shadow: 0 10px 28px rgb(29 61 62 / 8%); }
.blog-tool-interface-heading { margin-bottom: .75rem; }
.blog-tool-interface-brand, .blog-tool-panel-kicker { display: block; color: #285e59; font-size: 14px; font-weight: 750; letter-spacing: .06em; }
.blog-tool-interface-heading h3 { margin: .35rem 0; color: #183b33; font-size: 20px; line-height: 1.3; }
.blog-tool-interface-heading p, .blog-tool-panel-intro { margin: 0; color: #435b60; font-size: 15px; line-height: 1.45; }
.blog-tool-interface-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.blog-tool-panel { min-width: 0; padding: .75rem; border: 1px solid #d5e1df; border-radius: .65rem; background: #fff; }
.blog-tool-panel h4 { margin: .25rem 0 .6rem; color: #20343b; font-size: 16px; line-height: 1.35; }
.blog-tool-length { display: flex; align-items: center; gap: .4rem; color: #435b60; font-size: 14px; }
.blog-tool-length strong { color: #20343b; font-size: 14px; }
.blog-tool-range { position: relative; flex: 1; height: 8px; border-radius: 6px; background: #dce9e7; }
.blog-tool-range::before { position: absolute; top: 0; left: 0; width: 58%; height: 8px; border-radius: 6px; background: #278778; content: ""; }
.blog-tool-range i { position: absolute; z-index: 1; top: -4px; left: 55%; width: 16px; height: 16px; border: 2px solid #147064; border-radius: 50%; background: #fff; }
.blog-tool-options { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0; }
.blog-tool-options span { padding: .25rem .38rem; border: 1px solid #d5e1df; border-radius: .4rem; color: #314a4f; font-size: 14px; line-height: 1.3; }
.blog-tool-masked-value { display: flex; min-width: 0; flex-direction: column; gap: .25rem; padding: .55rem; border: 1px solid #d5e1df; border-radius: .45rem; background: #f8fbfa; color: #52656d; font-size: 14px; }
.blog-tool-masked-value code { overflow: hidden; color: #213d44; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; white-space: nowrap; }
.blog-tool-button-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.blog-tool-button-row span { padding: .4rem .5rem; border: 1px solid #b7d2ce; border-radius: .4rem; background: #edf6f4; color: #155c55; font-size: 14px; font-weight: 700; }
.blog-tool-panel-note, .blog-tool-setting-note { margin: .45rem 0 0; color: #52656d; font-size: 14px; line-height: 1.4; }
.blog-tool-setting { display: flex; align-items: flex-start; gap: .4rem; margin-top: .6rem; color: #263f44; font-size: 14px; line-height: 1.4; }
.blog-tool-setting b { flex: 0 0 auto; color: #13775e; font-size: 14px; }
.blog-tool-setting-muted { margin-top: .75rem; }
.blog-tool-setting-muted b { color: #66777d; }
.blog-tool-share-facts { margin-top: .75rem; padding: .5rem; border-radius: .45rem; background: #eaf5ef; color: #245d43; font-size: 14px; font-weight: 700; line-height: 1.45; }
.blog-tool-share-facts i { padding: 0 .15rem; color: #71867a; font-style: normal; }
.blog-tool-interface-limit { margin: .65rem 0 0; color: #47595e; font-size: 14px; line-height: 1.45; }
.password-drag-demo {
  margin: 1rem 0 2rem;
  padding: clamp(1.1rem, 3vw, 1.65rem);
  border: 1px solid #cbd9de;
  border-radius: 1rem;
  background: #f7fafb;
  color: #20333d;
}
.password-drag-demo-heading h2 { margin: 0 0 .45rem; color: #172f3a; font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.2; }
.password-drag-demo-heading > p:last-child,
.password-drag-demo-help,
.password-drag-demo-status { color: #3d5661; font-size: 15px; line-height: 1.5; }
.password-drag-demo-heading > p:last-child { margin: 0; }
.password-drag-demo-clipboard {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .1rem .65rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.15rem 0;
  padding: .55rem .8rem;
  border: 1px solid #e6c9c6;
  border-radius: .6rem;
  background: #fff6f4;
  color: #713b36;
  font-size: 14px;
}
.password-drag-demo-clipboard > span { grid-row: span 2; color: #a03232; font-size: 1.6rem; font-weight: 900; }
.password-drag-demo-clipboard small { color: #704f4b; font-size: 14px; }
.password-drag-demo-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, .55fr) minmax(0, 1fr); align-items: center; gap: .65rem; }
.password-drag-demo-source,
.password-drag-demo-target {
  display: flex;
  min-width: 0;
  min-height: 4.25rem;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .75rem;
  border-radius: .7rem;
  color: #18343e;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}
.password-drag-demo-source { border: 1px solid #9ec5bb; background: #eaf6f1; text-align: left; }
.password-drag-demo-source > span:first-child { font-size: 1.45rem; }
.password-drag-demo-source strong,
.password-drag-demo-source small { display: block; }
.password-drag-demo-source small { margin-top: .2rem; color: #3f5e56; font-size: 14px; }
.password-drag-demo-source.is-selected { outline: 3px solid #18766a; outline-offset: 2px; }
.password-drag-demo-target { border: 2px dashed #668c98; background: #fff; overflow-wrap: anywhere; }
.password-drag-demo-target.is-filled { border-style: solid; border-color: #247964; background: #edf8f2; color: #175744; font-weight: 750; }
.password-drag-demo-source:focus-visible,
.password-drag-demo-target:focus-visible,
.password-drag-demo-reset:focus-visible { outline: 3px solid #185db6; outline-offset: 3px; }
.password-drag-demo-arrow { display: block; width: 100%; height: 3rem; overflow: visible; }
.password-drag-demo-arrow path { fill: none; stroke: #247964; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.password-drag-demo-help { margin: .8rem 0 .3rem; }
.password-drag-demo-status { min-height: 1.5em; margin: .3rem 0; }
.password-drag-demo-reset { min-height: 40px; padding: .55rem .8rem; border: 1px solid #879ba3; border-radius: .55rem; background: #fff; color: #203b46; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 580px) {
  .password-drag-demo-track { grid-template-columns: 1fr; }
  .password-drag-demo-arrow { width: 3rem; height: 2.4rem; justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .password-drag-demo * { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 720px) {
  .blog-tool-hero { grid-template-columns: 1fr; }
  .blog-tool-hero-action { width: 100%; box-sizing: border-box; }
}
@media (max-width: 560px) {
  .blog-tool-interface { padding: .75rem; }
  .blog-tool-interface-panels { grid-template-columns: minmax(0, 1fr); }
}

.blog-article-shell,
.blog-index-shell {
  width: min(100% - 2rem, 74rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3rem) 0 4rem;
}

.blog-breadcrumb {
  display: flex;
  gap: .55rem;
  align-items: center;
  color: #536875;
  font-size: 14px;
  margin-bottom: 1.5rem;
}

.blog-page a { color: #086d75; }
.blog-breadcrumb a,
.blog-index-card h2 a { text-decoration: none; }
.blog-breadcrumb a:hover,
.blog-index-card h2 a:hover { text-decoration: underline; }

.blog-article,
.blog-index-card {
  border: 1px solid #dce4e8;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgb(22 46 59 / 5%);
}

.blog-article { padding: clamp(1.25rem, 5vw, 3.5rem); }
.blog-article-header { border-bottom: 1px solid #e3e9ec; padding-bottom: 1.5rem; }
.blog-category,
.blog-card-category {
  color: #087d78;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.blog-article-header h1 {
  color: #172730;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: .6rem 0 1rem;
}

.blog-description,
.blog-index-heading > p:not(.blog-category) {
  color: #506672;
  font-size: 18px;
  line-height: 1.55;
}

.blog-article-header time,
.blog-card-date,
.blog-card-keywords {
  color: #526772;
  font-size: 14px;
}

.blog-prose {
  color: #263943;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  padding: 1rem 0 1.5rem;
}
.blog-prose h2 { margin-top: 2rem; font-size: 1.55rem; line-height: 1.25; }
.blog-prose h3 { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.3; }
.blog-prose p,
.blog-prose ul,
.blog-prose ol,
.blog-prose blockquote { margin: 0 0 1rem; }
.blog-prose li { margin: .3rem 0; }
.blog-prose blockquote {
  border-left: 3px solid #71b8b1;
  color: #465d68;
  padding: .25rem 1rem;
}
.blog-prose pre {
  overflow-x: auto;
  border-radius: .65rem;
  background: #152a34;
  color: #ecf8f7;
  padding: 1rem;
  font-size: 16px;
  line-height: 1.55;
}
.blog-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }
.blog-prose :not(pre) > code { border-radius: .25rem; background: #edf3f4; padding: .1rem .28rem; }

.blog-index-heading { margin-bottom: 1.5rem; }
.blog-index-heading h1 {
  max-width: 19ch;
  color: #172730;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: .2rem 0 1rem;
  overflow-wrap: anywhere;
}
.blog-topic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.blog-topic-filters li {
  border: 1px solid #c8e2df;
  border-radius: 999px;
  background: #eaf5f3;
  color: #145b5c;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  padding: .42rem .72rem;
}

.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}
.blog-index-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 1.4rem);
}
.blog-card-category { margin: 0 0 .45rem; }
.blog-index-card h2 {
  margin: 0 0 .65rem;
  font-size: clamp(1.2rem, 2vw, 1.48rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.blog-index-card h2 a { color: #123c47; }
.blog-card-summary {
  margin: 0 0 .8rem;
  color: #405863;
  font-size: 16px;
  line-height: 1.55;
}
.blog-card-date { margin: auto 0 .7rem; padding-top: .35rem; }
.blog-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem .45rem;
  margin: 0;
  color: #344a55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.blog-metric-separator { color: #778a92; }
.blog-card-keywords { margin: .65rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.blog-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.blog-ledger-cta {
  margin-top: 1.5rem;
  border: 1px solid #b8d8d3;
  border-radius: 1rem;
  background: #edf7f5;
  padding: clamp(1.1rem, 3vw, 1.75rem);
}
.blog-ledger-eyebrow {
  margin: 0 0 .45rem;
  color: #176d68;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.5;
}
.blog-ledger-cta h2 { margin: 0 0 .8rem; color: #172f38; font-size: 1.45rem; line-height: 1.3; }
.blog-ledger-details { margin: 0; padding-left: 1.2rem; color: #304953; font-size: 16px; line-height: 1.6; }
.blog-ledger-details li { margin: .35rem 0; }
.blog-ledger-details strong { font-size: 14px; letter-spacing: .035em; }
.blog-ledger-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.blog-ledger-actions a {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid #0c696e;
  border-radius: .55rem;
  padding: .65rem .95rem;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.blog-ledger-primary { background: #0c696e; color: #fff !important; }
.blog-ledger-primary:hover { background: #084f54; }
.blog-ledger-secondary { background: #fff; color: #075d63 !important; }
.blog-ledger-secondary:hover { background: #e2f1ef; }

.blog-pilot-cta {
  border: 1px solid #d3e8e4;
  border-radius: .75rem;
  background: #f0f8f6;
  padding: 1.25rem;
}
.blog-pilot-cta h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.blog-pilot-cta p { color: #4e626c; font-size: 16px; line-height: 1.5; }
.blog-pilot-cta a {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  border-radius: .5rem;
  background: #0c696e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: .75rem 1rem;
  text-decoration: none;
}
.blog-pilot-cta a:hover { background: #084f54; }
.blog-ledger-actions a:focus-visible,
.blog-pilot-cta a:focus-visible,
.blog-page a:focus-visible { outline: 3px solid #f0a531; outline-offset: 3px; }

.blog-footer { border-top: 1px solid #dce4e8; color: #5b6e78; padding: 1.25rem; text-align: center; }
.blog-footer p { font-size: 14px; }

@media (max-width: 560px) {
  .blog-article-shell,
  .blog-index-shell { width: min(100% - 1.25rem, 74rem); }
  .blog-article { padding: 1rem; }
  .blog-description { font-size: 16px; }
  .blog-prose { font-size: 16px; }
  .blog-ledger-cta { padding: 1rem; }
  .blog-ledger-actions { flex-direction: column; }
  .blog-ledger-actions a { width: 100%; }
}

/* Bounded synthetic previews for the subnet and JWT tool guides. */
.blog-preview-window {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c9d9dd;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 12px 30px rgb(22 46 59 / 9%);
  color: #1c303b;
  font-size: 14px;
  line-height: 1.4;
}
.blog-preview-topline {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid #e1e8eb;
  color: #526873;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .045em;
}
.blog-preview-topline span:last-child { color: #177267; white-space: nowrap; }
.blog-preview-address,
.blog-preview-domain {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .45rem;
  margin: .9rem;
  padding: .8rem;
  border: 1px solid #dce6e8;
  border-radius: .65rem;
  background: #f7fafb;
}
.blog-preview-address span,
.blog-preview-domain span,
.blog-preview-stats span,
.blog-preview-range span { color: #536a75; font-size: 14px; }
.blog-preview-address code,
.blog-preview-domain strong { color: #124f5b; font: 700 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.blog-preview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  padding: 0 .9rem;
}
.blog-preview-stats > div {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .7rem;
  border: 1px solid #e0e8ea;
  border-radius: .6rem;
  background: #fff;
}
.blog-preview-stats strong,
.blog-preview-range strong { color: #173b47; font: 700 15px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.blog-preview-range { display: grid; gap: .25rem; margin: .8rem .9rem .9rem; padding: .75rem; border-radius: .6rem; background: #eaf6f2; }
.blog-preview-range i { color: #167367; font-style: normal; }
.blog-preview-token { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .9rem; padding: .75rem; border-radius: .6rem; background: #142c3b; color: #e8f4fa; font: 700 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-preview-token b { color: #89d2c6; }
.blog-preview-claims { display: grid; gap: .45rem; padding: 0 .9rem; }
.blog-preview-claims > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .45rem; align-items: baseline; min-width: 0; padding: .55rem .65rem; border: 1px solid #e0e8ea; border-radius: .5rem; }
.blog-preview-claims > div > span { color: #7045a6; font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-preview-claims code { overflow-wrap: anywhere; font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-preview-claims small { color: #5a7079; font-size: 14px; font-weight: 700; }
.blog-preview-caution { margin: .8rem .9rem .9rem; color: #4d626c; font-size: 14px; line-height: 1.5; }

@media (max-width:720px) { .blog-preview-claims > div { grid-template-columns: 2.4rem minmax(0,1fr); } .blog-preview-claims small { grid-column:2; } }