.resource-page {
  background:
    var(--canvas);
}

.resource-page .resource-header {
  background: var(--canvas);
}

.header-link.is-current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.resource-label {
  margin-block-end: 13px;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.launchpad-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
  gap: clamp(48px, 7vw, 106px);
  align-items: center;
  min-block-size: min(720px, calc(100dvh - 96px));
  padding-block: clamp(66px, 8vw, 112px);
}

.launchpad-hero-copy {
  max-inline-size: 720px;
}

.launchpad-hero h1 {
  max-inline-size: 720px;
  margin: 0;
  font-size: clamp(52px, 5.7vw, 82px);
  font-weight: 640;
  letter-spacing: -0.06em;
  line-height: 0.94;
  text-wrap: balance;
}

.launchpad-deck {
  max-inline-size: 640px;
  margin-block: 28px 30px;
  color: #4F5B66;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.58;
}

.launchpad-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
}

.launchpad-proofline {
  display: flex;
  gap: clamp(22px, 4vw, 46px);
  margin: 36px 0 0;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--line);
}

.launchpad-proofline div {
  display: grid;
  gap: 3px;
}

.launchpad-proofline dt {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 650;
}

.launchpad-proofline dd {
  margin: 0;
  color: #69737C;
  font-size: 12px;
}

.launchpad-hero-system {
  position: relative;
  display: grid;
  gap: 17px;
  min-inline-size: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #B8C8FF;
  border-radius: 28px;
  background: #EEF2FF;
  box-shadow: 0 28px 72px rgba(31, 57, 121, 0.12);
}

.launchpad-hero-system::before {
  position: absolute;
  z-index: -1;
  inset: 20px -18px -20px 22px;
  border: 1px solid #D1D9F6;
  border-radius: 28px;
  background: #FAFBFF;
  content: "";
}

.system-window {
  display: grid;
  gap: 12px;
  min-block-size: 174px;
  padding: 22px;
  border: 1px solid #CCD3DF;
  border-radius: 16px;
  background: var(--surface);
}

.system-window > span,
.system-rail span {
  color: #68717B;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.system-window > i {
  display: block;
  block-size: 10px;
  border-radius: 3px;
  background: #DCE1E7;
}

.system-window > i:nth-of-type(1) { inline-size: 72%; }
.system-window > i:nth-of-type(2) { inline-size: 48%; background: #BBC4CF; }
.system-window > i:nth-of-type(3) { inline-size: 61%; background: #E2E5EA; }

.system-window b {
  align-self: end;
  max-inline-size: 290px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
}

.system-window-output {
  border-color: #85A5FF;
}

.system-token-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.system-token-row i {
  display: block;
  block-size: 48px;
  border-radius: 8px;
  background: var(--blue-deep);
}

.system-token-row i:nth-child(2) { background: #0A1E43; }
.system-token-row i:nth-child(3) { background: #19CBA0; }
.system-token-row i:nth-child(4) { background: #E7ECF4; }

.system-rail {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding-inline: 6px;
}

.system-rail i {
  block-size: 1px;
  background: #AEBDE8;
}

.presenter-tracks,
.free-drop-launchpad {
  padding-block: clamp(92px, 11vw, 148px);
  border-block-start: 1px solid var(--line);
}

.presenter-tracks-heading,
.free-drop-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  gap: 20px 64px;
  align-items: end;
  margin-block-end: 46px;
}

.presenter-tracks-heading .resource-label,
.free-drop-heading .resource-label {
  grid-column: 1 / -1;
  margin: 0;
}

.presenter-tracks-heading h2,
.free-drop-heading h2 {
  max-inline-size: 820px;
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.presenter-tracks-heading > p:last-child,
.free-drop-heading > p:last-child {
  margin: 0;
  color: #5A6570;
  font-size: 15px;
  line-height: 1.62;
}

.presenter-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.presenter-track {
  display: grid;
  min-block-size: 430px;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid #BFC9D5;
  border-radius: 22px;
  background: var(--surface);
}

.presenter-track-design {
  border-color: #9FCFC1;
  background: #F0FAF6;
}

.track-persona {
  display: flex;
  gap: 14px;
  align-items: center;
}

.track-persona > span {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 12px;
  background: var(--blue-deep);
  color: #FFF;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
}

.presenter-track-design .track-persona > span {
  background: #087A62;
}

.track-persona p,
.track-persona b,
.track-persona small {
  display: block;
  margin: 0;
}

.track-persona b { font-size: 14px; }
.track-persona small { margin-block-start: 3px; color: #68737D; font-size: 11px; }

.presenter-track h3 {
  max-inline-size: 560px;
  margin: 54px 0 16px;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.presenter-track > p {
  max-inline-size: 570px;
  margin: 0;
  color: #56616B;
  font-size: 15px;
  line-height: 1.62;
}

.presenter-track ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-self: end;
  margin: 28px 0 24px;
  padding: 0;
  list-style: none;
}

.presenter-track li {
  padding: 7px 10px;
  border: 1px solid #CFD5DC;
  border-radius: 7px;
  color: #56616B;
  font-size: 11px;
}

.presenter-track > a {
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 700;
}

.presenter-track-design > a { color: #087A62; }

.free-drop-list {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
}

.resource-path-status {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-block-end: 18px;
  padding: 15px 17px;
  border: 1px solid #BFCBF5;
  border-radius: 14px;
  background: #F4F7FF;
}

.resource-path-status[hidden] { display: none; }

.resource-path-status p,
.resource-path-status strong,
.resource-path-status span { margin: 0; }

.resource-path-status strong,
.resource-path-status span { display: block; }

.resource-path-status strong {
  color: var(--blue-deep);
  font-size: 13px;
}

.resource-path-status span {
  margin-block-start: 3px;
  color: #68737D;
  font-size: 11px;
}

.resource-path-status button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--blue-deep);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.free-drop[hidden] { display: none; }

.free-drop {
  display: grid;
  grid-column: span 2;
  min-block-size: 280px;
  padding: 24px 22px;
  border: 1px solid #C9D0D9;
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}

.free-drop:hover,
.free-drop:focus-visible {
  border-color: #6E91FF;
  box-shadow: 0 18px 46px rgba(30, 68, 158, 0.11);
  transform: translateY(-4px);
}

.free-drop > span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
}

.free-drop > strong {
  align-self: end;
  margin-block-start: 52px;
  font-size: 22px;
  line-height: 1.08;
}

.free-drop > p {
  margin: 13px 0 24px;
  color: #626D77;
  font-size: 13px;
  line-height: 1.55;
}

.free-drop > b {
  align-self: end;
  color: var(--blue-deep);
  font-size: 12px;
}

.free-drop-exit {
  margin: 28px 0 0;
  color: #66717A;
  font-size: 13px;
}

.free-drop-exit a {
  color: var(--blue-deep);
  font-weight: 650;
}

.newsletter-prototype-boundary {
  margin: 8px 0 0;
  color: #6A737C;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
}

.resource-hero {
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(44px, 5vw, 72px);
  align-items: center;
  min-height: min(640px, calc(100dvh - 108px));
  overflow: clip;
  padding-block: clamp(54px, 6vw, 76px);
}

.resource-hero-copy {
  max-inline-size: 660px;
}

.resource-hero h1 {
  max-inline-size: 660px;
  margin-block-end: 24px;
  font-size: clamp(44px, 4.5vw, 66px);
  font-weight: 620;
  letter-spacing: -0.052em;
  line-height: 0.98;
  text-wrap: balance;
}

.resource-hero-copy > p:not(.resource-label) {
  max-inline-size: 580px;
  margin-block-end: 30px;
  color: #515A63;
  font-size: 18px;
  line-height: 1.62;
}

.resource-hero-proof {
  position: relative;
  min-inline-size: 0;
  margin: 0;
}

.resource-hero-proof::before {
  position: absolute;
  z-index: -1;
  inset: 8% 0 -6% 13%;
  border-radius: 26px;
  background: var(--blue-soft);
  content: "";
  transform: rotate(2.2deg);
}

.resource-hero-proof img {
  inline-size: 100%;
  border: 1px solid #C6CDD1;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 26px 70px rgba(23, 25, 29, 0.14);
}

.resource-hero-proof figcaption,
.article-lead-visual figcaption,
.article-proof-receipt figcaption {
  margin-block-start: 12px;
  color: #687179;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.55;
}

.resource-directory {
  scroll-margin-top: 24px;
}

.resource-directory-heading h2 {
  max-inline-size: 680px;
  margin: 0;
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.resource-directory {
  padding-block: clamp(82px, 10vw, 126px);
  border-block: 1px solid var(--line-strong);
}

.resource-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: end;
  margin-block-end: 42px;
}

.resource-search {
  display: grid;
  gap: 10px;
}

.resource-search span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resource-search input {
  inline-size: 100%;
  min-block-size: 54px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.resource-search input:focus {
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(36, 91, 255, 0.12);
}

.resource-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}

.resource-filter-bar button {
  min-block-size: 38px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.resource-filter-bar button:hover {
  color: var(--ink);
}

.resource-filter-bar button[aria-pressed="true"] {
  border-color: #AFC1FF;
  background: var(--surface-blue);
  color: var(--blue-deep);
}

.resource-results-status {
  margin: 18px 0 0;
  color: #6A737C;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resource-index {
  display: grid;
  margin-block-start: 8px;
}

.resource-index article {
  display: grid;
  grid-template-columns: minmax(132px, 0.34fr) minmax(240px, 0.9fr) minmax(240px, 1.05fr) auto;
  gap: 24px;
  align-items: center;
  min-block-size: 132px;
  padding-block: 26px;
  border-block-start: 1px solid var(--line-strong);
}

.resource-index article:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.resource-index article[hidden] {
  display: none;
}

.resource-index article > div {
  display: grid;
  gap: 6px;
}

.resource-index article span,
.resource-index article small {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
}

.resource-index article small {
  color: #747D85;
}

.resource-index h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.resource-index p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}

.resource-index a {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-decoration-color: var(--blue);
  text-underline-offset: 5px;
  white-space: nowrap;
}

.resource-index a::after {
  margin-inline-start: 7px;
  color: var(--blue-deep);
  content: "\2192";
}

.resource-empty {
  margin: 0;
  padding: 42px 0;
  border-block-end: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 15px;
}

.resource-categories {
  display: grid;
  grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(54px, 9vw, 126px);
  align-items: start;
  padding-block: clamp(84px, 10vw, 132px);
  border-block-start: 1px solid var(--line);
}

.resource-categories h2,
.featured-resource h2,
.resource-queue h2 {
  max-inline-size: 680px;
  margin-block-end: 0;
  font-size: clamp(38px, 4.4vw, 58px);
}

.resource-categories ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: category;
}

.resource-categories li {
  position: relative;
  min-block-size: 176px;
  padding: 28px 24px 24px 54px;
  border-block-start: 1px solid var(--line-strong);
  counter-increment: category;
}

.resource-categories li:nth-child(odd) {
  border-inline-end: 1px solid var(--line);
}

.resource-categories li::before {
  position: absolute;
  inset-block-start: 29px;
  inset-inline-start: 18px;
  color: var(--coral);
  content: counter(category, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.resource-categories strong,
.resource-categories span {
  display: block;
}

.resource-categories strong {
  margin-block-end: 10px;
  font-size: 18px;
}

.resource-categories span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.builder-library-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
  gap: clamp(46px, 7vw, 96px);
  align-items: center;
  margin-block: clamp(92px, 11vw, 140px);
  padding: clamp(38px, 6vw, 72px);
  border: 1px solid #B8C8FF;
  border-radius: 24px;
  background: var(--surface-blue);
}

.builder-library-feature h2 {
  max-inline-size: 680px;
  margin: 0;
  font-size: clamp(40px, 4.7vw, 62px);
  letter-spacing: -0.048em;
  line-height: 0.98;
}

.builder-library-feature-copy > p:not(.resource-label) {
  max-inline-size: 670px;
  margin-block: 22px 24px;
  color: #4D5864;
  font-size: 17px;
  line-height: 1.64;
}

.builder-library-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
}

.builder-library-lanes {
  display: grid;
  margin: 0;
  padding: 0;
  border-block: 1px solid #AFC1FF;
  list-style: none;
}

.builder-library-lanes li {
  display: grid;
  grid-template-columns: 38px 92px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 16px;
}

.builder-library-lanes li + li {
  border-block-start: 1px solid #CBD5F7;
}

.builder-library-lanes span,
.builder-library-lanes small {
  color: #5D6872;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
}

.builder-library-lanes span {
  color: var(--blue-deep);
}

.builder-library-lanes strong {
  font-size: 14px;
}

.featured-resource {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
  padding: clamp(42px, 7vw, 82px);
  border: 1px solid #C7D2FF;
  border-radius: 24px;
  background: var(--surface-blue);
}

.featured-resource-copy > p:not(.resource-label) {
  max-inline-size: 720px;
  margin-block: 20px 24px;
  color: #4D5864;
  font-size: 17px;
  line-height: 1.62;
}

.resource-evidence-list {
  display: grid;
  gap: 10px;
  max-inline-size: 690px;
  margin: 0 0 22px;
  padding: 0;
  color: #3E4854;
  list-style: none;
}

.resource-evidence-list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 14px;
  line-height: 1.5;
}

.resource-evidence-list li::before {
  position: absolute;
  inset-block-start: 0.58em;
  inset-inline-start: 0;
  inline-size: 8px;
  block-size: 2px;
  background: var(--blue-deep);
  content: "";
}

.featured-resource-map {
  display: grid;
  gap: 0;
  padding: 8px 0;
  border-block: 1px solid #BAC8F8;
}

.featured-resource-map span {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding-block: 18px;
}

.featured-resource-map span + span {
  border-block-start: 1px solid #CBD5F7;
}

.featured-resource-map b {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

.featured-resource-map small {
  color: #3F4A56;
  font-size: 14px;
}

.resource-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
  padding-block: clamp(98px, 12vw, 154px);
}

.resource-demo-copy h2 {
  max-inline-size: 720px;
  margin: 0;
  font-size: clamp(40px, 4.5vw, 62px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.resource-demo-copy > p:not(.resource-label, .resource-demo-note) {
  max-inline-size: 650px;
  margin-block: 24px 26px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.resource-demo-copy ol {
  display: grid;
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.resource-demo-copy li {
  display: grid;
  grid-template-columns: 42px 70px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-block: 14px;
  border-block-start: 1px solid var(--line);
}

.resource-demo-copy li span,
.resource-demo-copy li small {
  color: var(--muted);
}

.resource-demo-copy li span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.resource-demo-copy li strong {
  font-size: 15px;
}

.resource-demo-copy li small {
  font-size: 13px;
  line-height: 1.5;
}

.resource-demo-note {
  margin-block-start: 14px;
  color: #687179;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
}

.resource-demo-stage {
  position: relative;
  margin: 0;
  padding: 14px;
  border: 1px solid #B8C4D0;
  border-radius: 22px;
  background: #F4F7FA;
  box-shadow: 0 34px 90px rgba(23, 25, 29, 0.14);
  transform: rotate(1deg);
}

.demo-stage-topline,
.resource-demo-stage figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-stage-topline {
  padding: 2px 4px 12px;
  color: #59636D;
}

.demo-stage-topline b {
  color: var(--blue-deep);
}

.resource-demo-stage img {
  display: block;
  inline-size: 100%;
  border: 1px solid #C9D0D6;
  border-radius: 12px;
  background: var(--surface);
}

.resource-demo-stage figcaption {
  gap: 12px;
  padding: 12px 4px 2px;
  color: #687179;
}

.resource-demo-stage figcaption i {
  flex: 1;
  block-size: 1px;
  background: #BFC8D0;
}

.resource-demo-stage figcaption strong {
  color: var(--green-bright);
}

.resource-queue {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(100px, 12vw, 156px);
}

.resource-standard {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(84px, 10vw, 128px);
  border-block: 1px solid var(--line);
}

.resource-standard h2 {
  max-inline-size: 600px;
  margin: 0;
  font-size: clamp(36px, 4vw, 54px);
}

.resource-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-standard-grid article {
  min-block-size: 172px;
  padding: 26px 28px;
  border-block-start: 1px solid var(--line-strong);
}

.resource-standard-grid article:nth-child(odd) {
  border-inline-end: 1px solid var(--line);
}

.resource-standard-grid strong {
  display: block;
  margin-block-end: 10px;
  font-size: 17px;
}

.resource-standard-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.authority-desk {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(96px, 12vw, 154px);
}

.authority-desk-heading {
  position: sticky;
  inset-block-start: 28px;
}

.authority-desk-heading h2 {
  max-inline-size: 630px;
  margin: 0;
  font-size: clamp(38px, 4.2vw, 58px);
}

.authority-desk-heading > p:not(.resource-label) {
  max-inline-size: 560px;
  margin-block-start: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.authority-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.authority-lane {
  min-block-size: 230px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.authority-lane-primary {
  grid-column: 1 / -1;
  min-block-size: 210px;
  border-color: #AFC1FF;
  background: var(--surface-blue);
}

.authority-lane span {
  display: block;
  margin-block-end: 30px;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.authority-lane h3 {
  max-inline-size: 520px;
  margin: 0 0 12px;
  font-size: clamp(23px, 2.3vw, 31px);
  letter-spacing: -0.032em;
  line-height: 1.08;
}

.authority-lane p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.builder-log {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  margin-block-end: clamp(96px, 12vw, 154px);
  padding-block: clamp(50px, 7vw, 82px);
  border-block: 1px solid var(--line-strong);
}

.builder-log-index > span {
  display: block;
  max-inline-size: 300px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.builder-log article {
  max-inline-size: 820px;
}

.builder-log-kicker {
  margin: 0 0 18px;
  color: var(--coral);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.builder-log h2 {
  margin: 0 0 26px;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.builder-log article > p:not(.builder-log-kicker) {
  max-inline-size: 760px;
  margin: 0 0 18px;
  color: #4C5660;
  font-size: 17px;
  line-height: 1.7;
}

.builder-log-principle {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  margin-block-start: 30px;
  padding: 24px 0;
  border-block: 1px solid #AFC1FF;
}

.builder-log-principle span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.builder-log-principle strong {
  max-inline-size: 620px;
  font-size: 20px;
  line-height: 1.35;
}

.roadmap-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
  margin-block-end: clamp(96px, 12vw, 154px);
  padding: clamp(38px, 6vw, 74px);
  border: 1px solid #B8C8FF;
  border-radius: 24px;
  background: var(--surface-blue);
}

.roadmap-signal h2 {
  max-inline-size: 720px;
  margin: 0;
  font-size: clamp(38px, 4.3vw, 58px);
}

.roadmap-signal-copy > p:not(.resource-label) {
  max-inline-size: 680px;
  margin-block: 22px 18px;
  color: #4D5864;
  font-size: 17px;
  line-height: 1.64;
}

.roadmap-signal ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-inline-start: 20px;
  color: #4D5864;
  font-size: 13px;
}

.roadmap-form {
  gap: 14px;
  align-self: center;
  max-inline-size: 520px;
  padding: 28px 0 0;
  border: 0;
  border-block-start: 1px solid #AFC1FF;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.roadmap-form .newsletter-field-row {
  grid-template-columns: 1fr;
  gap: 10px;
}

.roadmap-form-intro {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  margin-block-end: 6px;
}

.roadmap-form-intro strong {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.roadmap-form-intro span,
.roadmap-form label {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
}

.roadmap-form label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.roadmap-form .newsletter-field-row input {
  min-block-size: 52px;
  border-color: #AFC1FF;
  background: rgba(250, 251, 252, 0.86);
}

.roadmap-form .newsletter-field-row button {
  min-block-size: 52px;
  border-radius: 10px;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease);
}

.roadmap-form .newsletter-field-row button:active {
  transform: scale(0.98);
}

.roadmap-form .newsletter-consent {
  max-inline-size: 460px;
  color: #5D6872;
  line-height: 1.55;
}

.article-method {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid #C7D2FF;
  border-radius: 20px;
  background: var(--surface-blue);
}

.method-disclosure {
  display: grid;
  gap: 14px;
  margin-block-start: 24px;
  padding-block-start: 22px;
  border-block-start: 1px solid #BAC8F8;
}

.method-disclosure > strong {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.method-disclosure p {
  margin: 0;
}

.queue-heading {
  position: sticky;
  inset-block-start: 28px;
}

.queue-heading > p:not(.resource-label) {
  max-inline-size: 540px;
  margin-block-start: 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

.queue-list {
  display: grid;
}

.queue-list article {
  display: grid;
  grid-template-columns: 134px minmax(240px, 0.95fr) minmax(200px, 0.7fr);
  gap: 22px;
  align-items: start;
  padding-block: 27px;
  border-block-start: 1px solid var(--line-strong);
}

.queue-list article:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.queue-list span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
}

.queue-list h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.queue-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.resource-expansion {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(82px, 10vw, 126px);
  border-block: 1px solid var(--line);
}

.resource-expansion h2 {
  max-inline-size: 620px;
  margin: 0;
  font-size: clamp(38px, 4.2vw, 56px);
  letter-spacing: -0.044em;
  line-height: 1;
}

.resource-expansion > div:first-child > p:not(.resource-label) {
  max-inline-size: 560px;
  margin-block-start: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.resource-expansion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--line-strong);
}

.resource-expansion-grid article {
  min-block-size: 260px;
  padding: 28px;
}

.resource-expansion-grid article + article {
  border-inline-start: 1px solid var(--line);
}

.resource-expansion-grid span {
  display: block;
  margin-block-end: 48px;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.resource-expansion-grid h3 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.5vw, 32px);
  letter-spacing: -0.034em;
  line-height: 1.08;
}

.resource-expansion-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Builder Library */

.library-page main {
  overflow: clip;
}

.library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, 0.62fr);
  gap: clamp(54px, 9vw, 126px);
  align-items: end;
  min-block-size: 540px;
  padding-block: clamp(72px, 9vw, 116px);
}

.library-hero h1 {
  max-inline-size: 860px;
  margin: 0;
  font-size: clamp(54px, 7vw, 92px);
  font-weight: 620;
  letter-spacing: -0.062em;
  line-height: 0.92;
  text-wrap: balance;
}

.library-deck {
  max-inline-size: 780px;
  margin-block: 28px 28px;
  color: #4A545E;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.52;
}

.library-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
}

.library-brief {
  padding-block: 24px;
  border-block: 1px solid var(--line-strong);
}

.library-brief span,
.library-brief small {
  display: block;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.library-brief strong {
  display: block;
  max-inline-size: 380px;
  margin-block: 20px 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.library-brief p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.library-brief small {
  color: #737C84;
}

.library-rail {
  position: sticky;
  z-index: 3;
  inset-block-start: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  inline-size: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
  border-block: 1px solid var(--line-strong);
  background: rgba(244, 245, 242, 0.96);
}

.library-rail a {
  display: flex;
  gap: 12px;
  align-items: center;
  min-block-size: 58px;
  padding-inline: 18px;
  color: #3F4850;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.library-rail a + a {
  border-inline-start: 1px solid var(--line);
}

.library-rail a:hover {
  background: var(--surface);
  color: var(--blue-deep);
}

.library-rail span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}

.prompt-kit {
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(52px, 8vw, 112px);
  align-items: start;
  margin-block: clamp(90px, 12vw, 154px);
  padding: clamp(38px, 6vw, 72px);
  border: 1px solid #AFC1FF;
  border-radius: 24px;
  background: var(--surface-blue);
}

.prompt-kit-intro {
  position: sticky;
  inset-block-start: 84px;
}

.prompt-kit h2,
.library-shelf h2,
.library-disclosure h2,
.library-guides h2,
.library-service h2,
.private-office h2 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 60px);
  letter-spacing: -0.048em;
  line-height: 1;
}

.private-office h2 {
  scroll-margin-top: 92px;
}

.prompt-kit-intro > p:not(.resource-label) {
  margin-block: 22px 26px;
  color: #4D5864;
  font-size: 16px;
  line-height: 1.66;
}

.prompt-kit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-block: 16px;
  border-block: 1px solid #B9C8F8;
}

.prompt-kit-meta span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}

.prompt-stack {
  display: grid;
}

.prompt-preview {
  padding-block: 25px;
  border-block-start: 1px solid #B9C8F8;
}

.prompt-preview:last-child {
  border-block-end: 1px solid #B9C8F8;
}

.prompt-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-block-end: 12px;
}

.prompt-preview-head span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}

.prompt-preview-head button {
  min-block-size: 32px;
  padding-inline: 11px;
  border: 1px solid #AFC1FF;
  border-radius: 8px;
  background: var(--surface);
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.prompt-preview-head button:hover {
  border-color: var(--blue-deep);
}

.prompt-preview h3 {
  margin: 0 0 15px;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.prompt-preview pre {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
}

.prompt-preview code {
  color: #35404B;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
}

.prompt-boundary {
  grid-column: 2;
  margin: 0;
  color: #687179;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.55;
}

.agentic-ui-maps {
  padding-block: clamp(88px, 11vw, 146px);
  border-block: 1px solid var(--line);
}

.agentic-ui-maps-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.6fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: end;
  margin-block-end: 46px;
}

.agentic-ui-maps-heading h2 {
  max-inline-size: 820px;
  margin: 0;
  font-size: clamp(40px, 4.7vw, 62px);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.agentic-ui-maps-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.64;
}

.agentic-ui-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.agentic-ui-map-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #C7CFD8;
  border-radius: 20px;
  background: var(--surface);
}

.agentic-ui-map-grid figure > a {
  display: block;
  border-block-end: 1px solid #D5DAE1;
  background: #F4F6F8;
}

.agentic-ui-map-grid img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.agentic-ui-map-grid figcaption {
  display: grid;
  gap: 8px;
  padding: 24px 26px 26px;
}

.agentic-ui-map-grid figcaption span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 650;
}

.agentic-ui-map-grid figcaption strong {
  font-size: 23px;
}

.agentic-ui-map-grid figcaption p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.agentic-ui-map-grid figcaption a {
  justify-self: start;
  margin-block-start: 8px;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
}

.diagram-boundary {
  margin: 22px 0 0;
  color: #6A747D;
  font-size: 11px;
  line-height: 1.55;
}

.library-shelf {
  padding-block: clamp(78px, 10vw, 126px);
}

.library-shelf-heading {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: end;
  margin-block-end: 62px;
}

.library-shelf-heading > p:last-child {
  max-inline-size: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.64;
}

.library-entry {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1.66fr);
  gap: clamp(42px, 7vw, 96px);
  padding-block: 48px;
  border-block-start: 1px solid var(--line-strong);
  scroll-margin-block-start: 76px;
}

.library-entry:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.library-entry-index span,
.library-entry-index strong {
  display: block;
}

.library-entry-index span {
  margin-block-end: 12px;
  color: var(--coral);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.library-entry-index strong {
  font-size: 20px;
}

.entry-status {
  margin: 0 0 14px;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
}

.library-entry-main h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.entry-answer {
  max-inline-size: 800px;
  margin-block: 18px 26px;
  color: #3F4850;
  font-size: 18px;
  line-height: 1.6;
}

.library-entry dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 900px;
  margin: 0 0 24px;
}

.library-entry dl div {
  padding: 18px 22px 18px 0;
  border-block: 1px solid var(--line);
}

.library-entry dl div + div {
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--line);
}

.library-entry dt {
  margin-block-end: 8px;
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}

.library-entry dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.library-entry-main > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration-color: var(--blue);
  text-underline-offset: 5px;
}

.library-entry-main > a::after {
  margin-inline-start: 9px;
  color: var(--blue-deep);
  content: "\2197";
}

.library-entry-main > a[href^="#"]::after {
  content: "\2191";
}

.skill-resource-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-inline-size: 900px;
  margin-block: 8px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.skill-resource-list a {
  display: grid;
  gap: 6px;
  min-block-size: 108px;
  padding: 20px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.skill-resource-list a:hover strong,
.skill-resource-list a:focus-visible strong {
  color: var(--blue-deep);
}

.skill-resource-list strong,
.skill-resource-list small {
  display: block;
}

.skill-resource-list strong {
  font-size: 14px;
}

.skill-resource-list small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.compatibility-note {
  max-inline-size: 900px;
  margin: 0;
  color: #606A73;
  font-size: 12px;
  line-height: 1.58;
}

.library-disclosure {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(76px, 9vw, 118px);
  border-block: 1px solid var(--line);
}

.library-disclosure .resource-label {
  padding-block-start: 8px;
}

.library-disclosure > p:last-child {
  grid-column: 2;
  max-inline-size: 760px;
  margin: -62px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.watch-desk {
  padding-block: clamp(96px, 12vw, 154px);
}

.watch-desk-heading {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: end;
  margin-block-end: 54px;
}

.watch-desk h2,
.review-standard h2 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 60px);
  letter-spacing: -0.048em;
  line-height: 1;
}

.watch-desk-heading > p:last-child {
  max-inline-size: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.watch-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line-strong);
}

.watch-list article {
  display: flex;
  flex-direction: column;
  min-block-size: 390px;
  padding: 28px;
}

.watch-list article + article {
  border-inline-start: 1px solid var(--line);
}

.watch-list article:nth-child(n + 4) {
  border-block-start: 1px solid var(--line);
}

.watch-list article:nth-child(3n + 1) {
  border-inline-start: 0;
}

.watch-list article > span {
  display: block;
  margin-block: 34px 14px;
  color: var(--coral);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}

.watch-list h3 {
  margin: 0 0 14px;
  font-size: clamp(25px, 2.6vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.watch-list article > p:not(.entry-status) {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.watch-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: auto;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration-color: var(--blue);
  text-underline-offset: 5px;
}

.watch-list a::after {
  margin-inline-start: 9px;
  color: var(--blue-deep);
  content: "\2197";
}

.watch-list .watch-alt {
  margin: 12px 0 0 !important;
  color: #707983 !important;
  font-size: 11px !important;
}

.watch-list .watch-alt a {
  display: inline;
  min-block-size: 0;
  margin: 0;
  font-size: inherit;
}

.watch-list .watch-alt a::after {
  content: "";
}

.review-standard {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(82px, 10vw, 126px);
  border-block: 1px solid var(--line);
}

.review-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-standard-grid article {
  min-block-size: 176px;
  padding: 26px 28px;
  border-block-start: 1px solid var(--line-strong);
}

.review-standard-grid article:nth-child(odd) {
  border-inline-end: 1px solid var(--line);
}

.review-standard-grid strong {
  display: block;
  margin-block-end: 10px;
  font-size: 17px;
}

.review-standard-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.library-guides {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  padding-block: clamp(96px, 12vw, 154px);
}

.library-guides > div:first-child > p:not(.resource-label) {
  max-inline-size: 580px;
  margin-block-start: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.library-guide-list {
  display: grid;
}

.library-guide-list > * {
  display: grid;
  gap: 9px;
  padding-block: 26px;
  border-block-start: 1px solid var(--line-strong);
  text-decoration: none;
}

.library-guide-list > :last-child {
  border-block-end: 1px solid var(--line-strong);
}

.library-guide-list span,
.library-guide-list small {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
}

.library-guide-list strong {
  font-size: 22px;
  letter-spacing: -0.025em;
}

.library-guide-list small {
  max-inline-size: 660px;
  color: var(--muted);
}

.library-guide-list a:hover strong {
  color: var(--blue-deep);
}

.library-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 38px;
  align-items: end;
  margin-block-end: clamp(96px, 12vw, 154px);
  padding: clamp(38px, 6vw, 68px);
  border: 1px solid #B8D9C7;
  border-radius: 24px;
  background: var(--surface-green);
}

.library-service h2 {
  max-inline-size: 820px;
}

.library-service p:not(.resource-label) {
  max-inline-size: 720px;
  margin: 20px 0 0;
  color: #465950;
  font-size: 16px;
  line-height: 1.65;
}

.private-office {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(52px, 9vw, 128px);
  align-items: start;
  margin-block-end: clamp(96px, 12vw, 154px);
  padding-block: clamp(68px, 9vw, 112px);
  border-block: 1px solid var(--line-strong);
}

.private-office-intro > p:not(.resource-label) {
  max-inline-size: 580px;
  margin-block-start: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.private-office-criteria {
  display: grid;
}

.private-office-criteria > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.private-office-criteria li {
  display: grid;
  grid-template-columns: 46px minmax(150px, 0.48fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-block: 24px;
  border-block-start: 1px solid var(--line-strong);
}

.private-office-criteria li:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.private-office-criteria li span,
.private-office-criteria li small {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
}

.private-office-criteria li strong {
  font-size: 17px;
  line-height: 1.35;
}

.private-office-criteria li small {
  color: var(--muted);
}

.private-office-note {
  margin: 22px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.private-office .text-link {
  justify-self: start;
  min-block-size: 44px;
  font-size: 14px;
  font-weight: 750;
}

.private-office-tease {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.1fr) auto;
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
  inline-size: min(calc(100% - 40px), var(--max));
  margin: 0 auto clamp(72px, 9vw, 112px);
  padding: 28px 0;
  border-block: 1px solid var(--line-strong);
}

.private-office-tease div {
  display: grid;
  gap: 8px;
}

.private-office-tease span {
  color: var(--blue-deep);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.private-office-tease strong {
  font-size: 17px;
  line-height: 1.35;
}

.private-office-tease p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}

.private-office-tease a {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-decoration-color: var(--blue);
  text-underline-offset: 5px;
  white-space: nowrap;
}

.article-private-office {
  margin-block-start: 0;
}

/* Article */

.resource-article {
  inline-size: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.article-hero {
  padding-block: clamp(58px, 8vw, 104px) 52px;
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-block-end: 44px;
  color: #687179;
  font-size: 12px;
}

.breadcrumbs a {
  text-underline-offset: 4px;
}

.article-hero h1 {
  max-inline-size: 1040px;
  margin-block-end: 28px;
  font-size: clamp(48px, 6.4vw, 86px);
  font-weight: 620;
  letter-spacing: -0.058em;
  line-height: 0.98;
  text-wrap: balance;
}

.article-deck {
  max-inline-size: 810px;
  margin-block-end: 28px;
  color: #4D5862;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.48;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-block-end: 44px;
  color: #687179;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.article-lead-visual,
.article-proof-receipt {
  margin: 0;
}

.article-lead-visual img,
.article-proof-receipt img {
  inline-size: 100%;
  border: 1px solid #C5CBC8;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.article-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 760px);
  gap: clamp(68px, 10vw, 144px);
  justify-content: center;
  align-items: start;
  padding-block: 48px clamp(96px, 12vw, 156px);
}

.article-toc {
  position: sticky;
  inset-block-start: 24px;
  display: grid;
  gap: 0;
  padding-block: 18px;
  border-block: 1px solid var(--line-strong);
}

.article-toc summary {
  display: block;
  margin-block-end: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.article-toc summary span,
.article-toc summary small {
  display: block;
}

.article-toc summary small {
  margin-block-start: 4px;
  color: #7A838B;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
}

.article-toc summary::-webkit-details-marker {
  display: none;
}

.article-toc nav {
  display: grid;
}

.article-toc a {
  padding-block: 6px;
  color: #687179;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}

.article-toc a:hover,
.article-toc a[aria-current="true"] {
  color: var(--blue-deep);
}

.article-body {
  min-inline-size: 0;
}

.article-body > p,
.article-body section > p,
.article-body section > ul,
.article-body section > ol {
  max-inline-size: 720px;
}

.article-body p,
.article-body li {
  color: #3F484F;
  font-size: 18px;
  line-height: 1.78;
}

.article-body a:not(.button) {
  color: #2949AF;
  text-decoration-color: rgba(41, 73, 175, 0.44);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.article-body a:not(.button):hover {
  text-decoration-color: #2949AF;
}

.article-opening {
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 520;
  line-height: 1.6 !important;
}

.article-body section {
  padding-block: 22px 58px;
  scroll-margin-block-start: 24px;
}

.article-body section h2,
.article-cta h2 {
  max-inline-size: 720px;
  margin-block-end: 22px;
  font-size: clamp(34px, 4.3vw, 48px);
  font-weight: 620;
  letter-spacing: -0.042em;
  line-height: 1.06;
}

.answer-first {
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.58 !important;
}

.key-takeaways {
  margin-block-end: 42px;
  padding: 28px 30px;
  border: 1px solid #C7D2FF;
  border-radius: 18px;
  background: var(--surface-blue);
}

.key-takeaways strong {
  display: block;
  margin-block-end: 14px;
  font-size: 15px;
}

.key-takeaways ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
}

.key-takeaways li {
  color: #3E4854;
  font-size: 15px;
  line-height: 1.5;
}

.cause-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 34px 8px;
  border-block: 1px solid var(--line-strong);
}

.cause-map span {
  position: relative;
  display: grid;
  align-content: center;
  min-block-size: 124px;
  padding: 18px;
}

.cause-map span + span {
  border-inline-start: 1px solid var(--line);
}

.cause-map span:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: -8px;
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 20px;
  background: var(--canvas);
  color: var(--coral);
  content: ">";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  transform: translateY(-50%);
}

.cause-map strong,
.cause-map small {
  display: block;
}

.cause-map strong {
  margin-block-end: 7px;
  font-size: 14px;
}

.cause-map small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.check-table-wrap {
  max-inline-size: 760px;
  margin-block: 32px 30px;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}

.check-table-wrap:focus-visible {
  outline: 3px solid rgba(91, 124, 250, 0.28);
  outline-offset: 3px;
}

.check-table {
  inline-size: 100%;
  min-inline-size: 690px;
  border-collapse: collapse;
  text-align: start;
}

.check-table th,
.check-table td {
  padding: 18px 16px;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
  text-align: start;
}

.check-table tr:last-child th,
.check-table tr:last-child td {
  border-block-end: 0;
}

.check-table thead th {
  background: var(--surface-soft);
  color: #4A545C;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}

.check-table tbody th {
  inline-size: 154px;
  color: var(--ink);
  font-size: 14px;
}

.check-table td {
  color: #4F5961;
  font-size: 14px;
  line-height: 1.48;
}

.method-list,
.route-plan {
  display: grid;
  gap: 0;
  margin-block: 32px 28px;
  padding: 0;
  list-style: none;
  counter-reset: method;
}

.method-list li,
.route-plan li {
  position: relative;
  padding: 22px 20px 22px 58px;
  border-block-start: 1px solid var(--line-strong);
  counter-increment: method;
}

.method-list li:last-child,
.route-plan li:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.method-list li::before,
.route-plan li::before {
  position: absolute;
  inset-block-start: 25px;
  inset-inline-start: 16px;
  color: var(--coral);
  content: counter(method, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
}

.method-list strong,
.method-list span,
.route-plan strong,
.route-plan p {
  display: block;
}

.method-list strong,
.route-plan strong {
  margin-block-end: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.method-list span,
.route-plan p {
  margin: 0;
  color: #515B63;
  font-size: 15px;
  line-height: 1.58;
}

.article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-block: 30px 72px;
  padding: 34px;
  border-radius: 20px;
}

.article-cta-free {
  border: 1px solid #C7D2FF;
  background: var(--surface-blue);
}

.article-cta-paid {
  border: 1px solid #B8D9C7;
  background: var(--surface-green);
}

.article-cta h2 {
  margin-block-end: 12px;
  font-size: clamp(31px, 4vw, 43px);
}

.article-cta p:not(.resource-label) {
  max-inline-size: 620px;
  margin: 0;
  color: #46515B;
  font-size: 15px;
  line-height: 1.58;
}

.article-cta .button {
  min-inline-size: max-content;
}

.system-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin-block: 34px 30px;
  border-block-start: 1px solid var(--line-strong);
}

.system-parts article {
  padding-block: 24px;
  border-block-end: 1px solid var(--line);
}

.system-parts strong {
  display: block;
  margin-block-end: 8px;
  color: var(--blue-deep);
  font-size: 16px;
}

.system-parts p {
  margin: 0;
  color: #515B63;
  font-size: 15px;
  line-height: 1.58;
}

.article-proof-receipt {
  margin-block: 34px 26px;
}

.proof-boundary {
  margin-block: 28px;
  padding: 22px 24px;
  border-inline-start: 4px solid var(--coral);
  background: var(--surface-coral);
}

.proof-boundary strong {
  display: block;
  margin-block-end: 8px;
  font-size: 15px;
}

.proof-boundary p {
  margin: 0;
  color: #574A48;
  font-size: 15px;
  line-height: 1.58;
}

.article-faq details {
  border-block-start: 1px solid var(--line-strong);
}

.article-faq details:last-child {
  border-block-end: 1px solid var(--line-strong);
}

.article-faq summary {
  position: relative;
  min-block-size: 62px;
  padding: 19px 44px 19px 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  list-style: none;
}

.article-faq summary::-webkit-details-marker {
  display: none;
}

.article-faq summary::after {
  position: absolute;
  inset-block-start: 19px;
  inset-inline-end: 4px;
  color: var(--blue-deep);
  content: "+";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
}

.article-faq details[open] summary::after {
  content: "-";
}

.article-faq details p {
  margin: -2px 0 20px;
  color: #4F5961;
  font-size: 15px;
  line-height: 1.62;
}

.article-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin-block-start: 28px;
  padding-inline-start: 20px;
}

.article-sources li {
  font-size: 14px;
  line-height: 1.5;
}

.article-close {
  margin-block-start: 12px;
  padding: 48px 44px !important;
  border: 1px solid #C7D2FF;
  border-radius: 20px;
  background: var(--surface-blue);
}

.article-close p:not(.resource-label) {
  margin-block-end: 24px;
  color: #46515B;
  font-size: 17px;
  line-height: 1.62;
}

[data-resource-reveal] {
  opacity: 1;
  transform: none;
}

.resource-motion [data-resource-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

.resource-motion [data-resource-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1040px) {
  .launchpad-hero {
    grid-template-columns: 1fr;
    min-block-size: auto;
  }

  .launchpad-hero-system {
    inline-size: min(100%, 720px);
  }

  .free-drop-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .free-drop {
    grid-column: span 2;
  }

  .free-drop:nth-child(4),
  .free-drop:nth-child(5) {
    grid-column: span 3;
  }
  .authority-desk,
  .roadmap-signal,
  .resource-demo,
  .builder-log,
  .builder-library-feature,
  .resource-expansion,
  .library-hero,
  .library-shelf-heading,
  .library-disclosure,
  .library-guides,
  .watch-desk-heading,
  .review-standard,
  .private-office {
    grid-template-columns: 1fr;
  }

  .prompt-kit {
    grid-template-columns: minmax(250px, 0.52fr) minmax(0, 1.48fr);
    gap: 48px;
  }

  .library-disclosure > p:last-child {
    grid-column: auto;
    margin: -20px 0 0;
  }

  .authority-desk-heading {
    position: static;
  }
  .resource-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .resource-directory-heading {
    grid-template-columns: 1fr;
  }

  .resource-index article {
    grid-template-columns: 130px minmax(220px, 0.9fr) minmax(220px, 1fr);
  }

  .resource-index article > a {
    grid-column: 2 / -1;
  }

  .resource-hero-copy {
    max-inline-size: 820px;
  }

  .resource-categories,
  .featured-resource,
  .resource-queue {
    grid-template-columns: 1fr;
  }

  .queue-heading {
    position: static;
  }

  .article-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    max-inline-size: 820px;
    margin-inline: auto;
  }

  .article-toc {
    position: static;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }

  .article-toc nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 18px;
  }
}

@media (max-width: 768px) {
  .launchpad-hero {
    gap: 52px;
    padding-block: 52px 80px;
  }

  .launchpad-hero h1 {
    font-size: clamp(46px, 13vw, 64px);
  }

  .launchpad-hero-actions .button {
    inline-size: 100%;
  }

  .resource-path-status {
    align-items: flex-start;
    padding: 14px;
  }

  .launchpad-proofline {
    justify-content: space-between;
    gap: 12px;
  }

  .launchpad-hero-system {
    padding: 17px;
    border-radius: 20px;
  }

  .launchpad-hero-system::before {
    inset: 12px -8px -12px 12px;
    border-radius: 20px;
  }

  .system-window {
    min-block-size: 150px;
    padding: 18px;
  }

  .system-rail span {
    font-size: 8px;
  }

  .presenter-tracks-heading,
  .free-drop-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .presenter-tracks-heading .resource-label,
  .free-drop-heading .resource-label {
    grid-column: 1;
  }

  .presenter-track-grid {
    grid-template-columns: 1fr;
  }

  .presenter-track {
    min-block-size: 390px;
  }

  .free-drop-list {
    grid-template-columns: 1fr;
  }

  .free-drop,
  .free-drop:nth-child(4),
  .free-drop:nth-child(5) {
    grid-column: 1;
    min-block-size: 240px;
  }
  .resource-standard,
  .resource-standard-grid,
  .authority-lanes,
  .resource-expansion-grid,
  .prompt-kit,
  .agentic-ui-maps-heading,
  .agentic-ui-map-grid,
  .library-service,
  .watch-list,
  .review-standard-grid {
    grid-template-columns: 1fr;
  }

  .private-office {
    gap: 38px;
    padding-block: 74px;
  }

  .private-office h2 {
    scroll-margin-top: 18px;
  }

  .private-office-criteria li {
    grid-template-columns: 38px 1fr;
  }

  .private-office-criteria li small {
    grid-column: 2;
  }

  .private-office-tease {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 24px;
  }

  .private-office-tease a {
    justify-self: start;
  }

  .builder-library-feature {
    gap: 38px;
    margin-block: 72px;
    padding: 32px 24px;
  }

  .builder-library-feature h2 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .builder-library-lanes li {
    grid-template-columns: 30px 78px minmax(0, 1fr);
    gap: 8px;
  }

  .resource-expansion {
    gap: 38px;
    padding-block: 72px;
  }

  .resource-expansion-grid article {
    min-block-size: auto;
    padding: 26px 0;
  }

  .resource-expansion-grid article + article {
    border-block-start: 1px solid var(--line);
    border-inline-start: 0;
  }

  .resource-expansion-grid span {
    margin-block-end: 28px;
  }

  .library-hero {
    gap: 46px;
    min-block-size: auto;
    padding-block: 58px 72px;
  }

  .library-hero h1 {
    font-size: clamp(49px, 15vw, 68px);
  }

  .library-deck {
    font-size: 18px;
  }

  .library-rail {
    position: static;
    grid-template-columns: 1fr 1fr;
    inline-size: min(calc(100% - 32px), var(--max));
  }

  .library-rail a {
    min-block-size: 52px;
    padding-inline: 12px;
    border-block-end: 1px solid var(--line);
  }

  .library-rail a + a {
    border-inline-start: 0;
  }

  .library-rail a:nth-child(even) {
    border-inline-start: 1px solid var(--line);
  }

  .library-rail a:last-child {
    grid-column: 1 / -1;
    border-block-end: 0;
  }

  .prompt-kit {
    gap: 38px;
    margin-block: 78px;
    padding: 32px 24px;
  }

  .prompt-kit-intro {
    position: static;
  }

  .prompt-boundary {
    grid-column: auto;
  }

  .library-shelf {
    padding-block: 72px;
  }

  .library-shelf-heading {
    gap: 28px;
    margin-block-end: 42px;
  }

  .library-entry {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 38px;
  }

  .library-entry dl {
    grid-template-columns: 1fr;
  }

  .library-entry dl div + div {
    padding-inline-start: 0;
    border-block-start: 0;
    border-inline-start: 0;
  }

  .skill-resource-list {
    grid-template-columns: 1fr;
  }

  .library-disclosure,
  .library-guides,
  .review-standard {
    gap: 38px;
    padding-block: 74px;
  }

  .watch-desk {
    padding-block: 78px;
  }

  .watch-desk-heading {
    gap: 28px;
    margin-block-end: 38px;
  }

  .watch-list article {
    min-block-size: auto;
    padding: 28px 0;
  }

  .watch-list article + article {
    border-block-start: 1px solid var(--line);
    border-inline-start: 0;
  }

  .watch-list a {
    margin-block-start: 8px;
  }

  .review-standard-grid article {
    min-block-size: auto;
    padding: 24px 0;
  }

  .review-standard-grid article:nth-child(odd) {
    border-inline-end: 0;
  }

  .library-disclosure > p:last-child {
    margin: -12px 0 0;
  }

  .library-service {
    align-items: start;
    margin-block-end: 90px;
    padding: 32px 24px;
  }

  .library-service .button {
    inline-size: 100%;
  }

  .resource-standard-grid article:nth-child(odd) {
    border-inline-end: 0;
  }

  .authority-lane-primary {
    grid-column: auto;
  }

  .authority-desk {
    padding-block: 64px;
  }

  .authority-lanes {
    gap: 0;
  }

  .authority-lane,
  .authority-lane-primary {
    min-block-size: auto;
    padding: 24px 0;
    border: 0;
    border-block-start: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
  }

  .authority-lane:last-child {
    border-block-end: 1px solid var(--line-strong);
  }

  .authority-lane span {
    margin-block-end: 14px;
  }

  .article-toc {
    position: static;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid #C7D2FF;
    border-radius: 16px;
    background: var(--surface-blue);
    box-shadow: 0 12px 32px rgba(36, 91, 255, 0.08);
  }

  .article-toc summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    column-gap: 16px;
    align-items: center;
    margin: 0;
    min-block-size: 72px;
    padding: 14px 16px 14px 18px;
    cursor: pointer;
  }

  .article-toc summary span,
  .article-toc summary small {
    grid-column: 1;
  }

  .article-toc summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid #B8C8FF;
    border-radius: 9px;
    background: var(--surface);
    color: var(--blue-deep);
    content: "+";
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 16px;
    line-height: 1;
    transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
  }

  .article-toc[open] summary::after {
    content: "-";
    background: var(--blue-deep);
    color: var(--canvas);
  }

  .article-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    padding: 12px 16px 16px;
    border-block-start: 1px solid #C7D2FF;
    background: var(--surface);
  }

  .article-toc a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding: 8px 9px;
    border-radius: 8px;
    color: #59636D;
    font-size: 11px;
    line-height: 1.32;
  }

  .article-toc a:hover,
  .article-toc a[aria-current="true"] {
    background: var(--surface-blue);
    color: var(--blue-deep);
    text-decoration: none;
  }
  .resource-article {
    inline-size: min(calc(100% - 32px), var(--max));
  }

  .resource-hero {
    gap: 46px;
    padding-block: 54px 74px;
  }

  .resource-directory {
    padding-block: 72px;
  }

  .resource-directory-heading {
    gap: 34px;
    margin-block-end: 30px;
  }

  .resource-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .resource-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .resource-filter-bar button {
    flex: 0 0 auto;
  }

  .resource-index article {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 28px;
  }

  .resource-index article > a {
    grid-column: auto;
    justify-self: start;
    margin-block-start: 8px;
  }

  .resource-hero h1 {
    font-size: clamp(43px, 12vw, 58px);
  }

  .resource-hero-proof::before {
    inset: 8% 0 -4% 8%;
  }

  .resource-categories {
    gap: 38px;
    padding-block: 78px;
  }

  .resource-categories ol {
    grid-template-columns: 1fr;
  }

  .resource-categories li:nth-child(odd) {
    border-inline-end: 0;
  }

  .resource-categories li {
    min-block-size: auto;
  }

  .featured-resource {
    gap: 38px;
    padding: 32px 24px;
  }

  .resource-demo {
    gap: 44px;
    padding-block: 82px;
  }

  .resource-demo-copy li {
    grid-template-columns: 34px 58px minmax(0, 1fr);
    gap: 10px;
  }

  .resource-demo-stage {
    border-radius: 16px;
    transform: none;
  }

  .builder-log {
    gap: 34px;
    margin-block-end: 90px;
  }

  .builder-log-principle {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .roadmap-form {
    inline-size: 100%;
    max-inline-size: none;
    padding-block-start: 24px;
  }

  .roadmap-form-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .resource-queue {
    padding-block: 84px 108px;
  }

  .queue-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .article-hero {
    padding-block: 48px 34px;
  }

  .breadcrumbs {
    margin-block-end: 34px;
  }

  .article-hero h1 {
    font-size: clamp(43px, 12vw, 60px);
  }

  .article-meta {
    display: grid;
    gap: 5px;
  }

  .article-lead-visual img,
  .article-proof-receipt img {
    border-radius: 14px;
  }

  .article-layout {
    padding-block-start: 34px;
  }

  .article-body p,
  .article-body li {
    font-size: 17px;
    line-height: 1.72;
  }

  .article-opening {
    font-size: 20px !important;
  }

  .article-body section h2,
  .article-cta h2 {
    font-size: clamp(32px, 9vw, 43px);
  }

  .cause-map {
    grid-template-columns: 1fr;
  }

  .cause-map span + span {
    border-block-start: 1px solid var(--line);
    border-inline-start: 0;
  }

  .cause-map span:not(:last-child)::after {
    inset-block-start: auto;
    inset-block-end: -10px;
    inset-inline-end: 50%;
    transform: translateX(50%) rotate(90deg);
  }

  .article-cta {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 28px 24px;
  }

  .article-cta .button {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .system-parts,
  .article-sources ul {
    grid-template-columns: 1fr;
  }

  .article-close {
    padding: 34px 24px !important;
  }
}

@media (max-width: 520px) {
  .article-meta span {
    display: block;
  }

  .key-takeaways {
    padding: 24px 22px;
  }

  .method-list li,
  .route-plan li {
    padding-inline-end: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-motion [data-resource-reveal] {
    opacity: 1;
    transform: none;
  }
}