.content-page { background: var(--bg); }
.content-shell { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.content-page .site-header { border-bottom: 1px solid var(--line); }
.content-page .desktop-nav { gap: 28px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 36px; color: var(--muted-2); font: 10px/1.5 var(--mono); }
.breadcrumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-violet); text-underline-offset: 4px; }
.breadcrumbs a:hover { color: var(--violet); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }
.content-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(265px, .6fr); gap: clamp(50px, 8vw, 130px); align-items: end; padding: 100px 0 110px; }
.content-hero .eyebrow { color: var(--violet); }
.content-hero h1 { max-width: 790px; margin: 0; font: 500 clamp(50px, 6.1vw, 82px)/.99 var(--display); letter-spacing: -.065em; }
.content-hero h1 span { color: var(--violet); }
.content-hero p:not(.eyebrow) { max-width: 700px; margin: 32px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.content-hero .hero-actions { margin-top: 34px; }
.content-aside { display: grid; gap: 24px; align-self: stretch; align-content: end; padding: 30px 0 4px 25px; border-left: 1px solid var(--line-violet); }
.content-aside div { display: grid; gap: 3px; }
.content-aside strong { color: var(--violet); font: 500 37px/1 var(--display); letter-spacing: -.06em; }
.content-aside span { max-width: 220px; color: var(--muted); font: 11px/1.55 var(--mono); }
.content-aside small { grid-column: 1 / -1; color: var(--muted-2); font: 10px/1.5 var(--mono); }
.content-section { padding: 84px 0; border-top: 1px solid var(--line); }
.content-section .eyebrow { color: var(--violet); }
.content-section h2 { max-width: 780px; margin: 0 0 26px; font: 500 clamp(34px, 4.4vw, 55px)/1.07 var(--display); letter-spacing: -.055em; }
.content-section h3 { margin: 0 0 12px; font: 500 23px/1.2 var(--display); letter-spacing: -.035em; }
.content-section p, .content-section li { color: var(--muted); font-size: 15px; line-height: 1.8; }
.content-section p { max-width: 770px; margin: 0 0 18px; }
.content-section p:last-child { margin-bottom: 0; }
.content-section strong { color: var(--ink); font-weight: 600; }
.content-section a:not(.button):not(.text-link) { color: #dbb0ff; text-decoration: underline; text-underline-offset: 4px; }
.content-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: clamp(34px, 7vw, 100px); }
.content-side-note { align-self: start; padding: 24px; border: 1px solid var(--line-violet); background: rgba(185,92,255,.07); }
.content-side-note .mono-label { color: var(--violet); }
.content-side-note p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.content-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.content-step { min-height: 205px; padding: 26px; border: 1px solid var(--line); background: rgba(21,16,33,.55); }
.content-step .step-no { display: block; margin-bottom: 40px; color: var(--violet); font: 10px var(--mono); }
.content-step p { margin: 0; font-size: 13px; line-height: 1.65; }
.content-list { display: grid; gap: 14px; padding: 0; margin: 27px 0 0; list-style: none; }
.content-list li { padding-left: 20px; position: relative; }
.content-list li::before { content: '✦'; position: absolute; left: 0; color: var(--violet); font-size: 12px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 32px 0 17px; }
.proof-card { padding: 26px 22px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(52,29,74,.48), rgba(17,13,27,.58)); }
.proof-card strong { display: block; color: var(--violet); font: 500 37px/1 var(--display); letter-spacing: -.055em; }
.proof-card h3 { margin: 18px 0 9px; font-size: 19px; }
.proof-card p { margin: 0; font-size: 12px; line-height: 1.65; }
.content-disclaimer { color: var(--muted-2) !important; font: 10px/1.6 var(--mono) !important; }
.content-faq { max-width: 850px; margin: 29px 0 0; border-top: 1px solid var(--line); }
.content-faq details { border-bottom: 1px solid var(--line); }
.content-faq summary { display: flex; justify-content: space-between; gap: 25px; padding: 21px 0; cursor: pointer; color: var(--ink); font: 500 19px/1.4 var(--display); list-style: none; }
.content-faq summary::-webkit-details-marker { display: none; }
.content-faq summary::after { content: '+'; color: var(--violet); font-size: 24px; line-height: 1; }
.content-faq details[open] summary::after { content: '−'; }
.content-faq details p { max-width: 730px; margin: 0 0 23px; font-size: 13px; }
.content-cta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 35px; margin: 55px 0 90px; padding: 50px; background: linear-gradient(105deg, #b95cff, #8a32f3); color: var(--bg); }
.content-cta .eyebrow, .content-cta p { color: rgba(10,8,16,.72); }
.content-cta h2 { max-width: 660px; margin: 0; color: var(--bg); font: 500 clamp(36px, 4vw, 56px)/1.03 var(--display); letter-spacing: -.055em; }
.content-cta p { max-width: 580px; margin: 18px 0 0; font-size: 14px; line-height: 1.65; }
.content-cta .button-primary { background: var(--bg); color: var(--ink); white-space: nowrap; }
.content-cta .button-primary span { color: var(--violet); }
.content-cta .button-primary:hover { background: #23162d; }
.content-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; padding: 28px 0 42px; border-top: 1px solid var(--line); color: var(--muted-2); font: 11px/1.5 var(--mono); }
.content-footer a:hover { color: var(--violet); }
.content-footer .footer-brand { margin-right: auto; color: var(--ink); }
.content-article { max-width: 850px; }
.content-article .content-hero { display: block; max-width: 850px; padding-bottom: 80px; }
.content-article .content-hero h1 { max-width: 850px; font-size: clamp(46px, 5.3vw, 72px); }
.content-article .content-hero p:not(.eyebrow) { max-width: 730px; }
.content-article .content-section { padding: 67px 0; }
.content-article .content-section h2 { font-size: clamp(32px, 3.7vw, 44px); }
.term-list { margin: 25px 0 0; border-top: 1px solid var(--line); }
.term-list div { display: grid; grid-template-columns: minmax(165px, .45fr) 1fr; gap: 25px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.term-list dt { color: var(--ink); font: 500 18px/1.4 var(--display); }
.term-list dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.content-article blockquote { margin: 32px 0; padding-left: 22px; border-left: 2px solid var(--violet); color: var(--ink); font: 500 clamp(22px,3vw,30px)/1.35 var(--display); }
.content-article ol { display: grid; gap: 18px; padding-left: 24px; margin: 24px 0 0; }
.content-article li::marker { color: var(--violet); font-family: var(--mono); }
.resource-hero { display: block; max-width: 900px; padding-bottom: 73px; }
.resource-hero h1 { max-width: 900px; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 34px; }
.resource-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 260px; padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); background: rgba(21, 16, 33, .6); transition: border-color .25s ease, background .25s ease; }
.resource-card:hover, .resource-card:focus-within { border-color: var(--line-violet); background: rgba(62, 31, 91, .42); }
.resource-card--featured { grid-column: 1 / -1; min-height: 245px; background: linear-gradient(120deg, rgba(86, 40, 121, .48), rgba(21, 16, 33, .58)); }
.resource-card .mono-label { color: var(--violet); }
.resource-card h3 { max-width: 650px; margin: 25px 0 13px; color: var(--ink); font: 500 clamp(24px, 3vw, 34px)/1.12 var(--display); letter-spacing: -.045em; }
.resource-card p { max-width: 630px; margin: 0 0 30px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.resource-card .text-link { margin-top: auto; font-size: 12px; }
.resource-provenance { max-width: 790px; margin: 27px 0 0; color: var(--muted-2); font-size: 12px; line-height: 1.7; }
.resource-provenance a { color: #dbb0ff; text-decoration: underline; text-underline-offset: 3px; }
.article-byline { display: flex; gap: 13px; align-items: center; max-width: 720px; margin-top: 30px; color: var(--muted-2); font: 11px/1.65 var(--mono); }
.article-byline img { width: 47px; height: 47px; object-fit: contain; border-radius: 50%; background: #181321; flex: 0 0 auto; }
.article-byline a { color: #dbb0ff; text-decoration: underline; text-underline-offset: 3px; }
.article-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 33px 0; border-block: 1px solid var(--line-violet); }
.article-metrics div { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 22px 18px; border-right: 1px solid var(--line); }
.article-metrics div:first-child { padding-left: 0; }
.article-metrics div:last-child { border-right: 0; }
.article-metrics strong { color: var(--violet); font: 500 clamp(28px, 3.2vw, 42px)/1 var(--display); letter-spacing: -.05em; }
.article-metrics span { color: var(--muted); font: 11px/1.6 var(--mono); }
.sample-box { margin: 31px 0; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--line-violet); background: linear-gradient(125deg, rgba(61, 29, 91, .37), rgba(20, 14, 30, .78)); }
.sample-box .mono-label, .source-panel .mono-label { color: var(--violet); }
.content-article .sample-box p { max-width: 720px; margin: 17px 0 12px; color: var(--ink); font: 500 clamp(19px, 2.6vw, 26px)/1.45 var(--display); letter-spacing: -.02em; }
.sample-box small { display: block; color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.source-panel { margin-top: 34px; padding: 24px; border: 1px solid var(--line-violet); background: rgba(185, 92, 255, .07); }
.content-article .source-panel p { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.content-cta p a { color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.content-page a:focus-visible, .content-page summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
@media (max-width: 900px) {
  .content-hero, .content-columns { grid-template-columns: 1fr; gap: 35px; }
  .content-aside { grid-template-columns: repeat(3, 1fr); border-left: 0; border-top: 1px solid var(--line-violet); padding: 22px 0 0; }
  .content-cta { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .content-shell { width: calc(100% - 34px); }
  .breadcrumbs { padding-top: 26px; }
  .content-hero { padding: 65px 0 75px; }
  .content-hero h1, .content-article .content-hero h1 { font-size: clamp(44px, 12vw, 56px); }
  .content-hero p:not(.eyebrow) { margin-top: 23px; font-size: 15px; }
  .content-aside { gap: 10px; }
  .content-aside strong { font-size: 30px; }
  .content-aside span { font-size: 11px; }
  .content-section, .content-article .content-section { padding: 59px 0; }
  .content-steps, .proof-grid { grid-template-columns: 1fr; }
  .resource-grid, .article-metrics { grid-template-columns: 1fr; }
  .resource-card--featured { grid-column: auto; }
  .resource-card { min-height: 0; padding: 25px 22px; }
  .resource-card h3 { margin-top: 20px; font-size: 27px; }
  .article-metrics div, .article-metrics div:first-child { padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .article-metrics div:last-child { border-bottom: 0; }
  .content-step { min-height: 0; }
  .content-step .step-no { margin-bottom: 24px; }
  .term-list div { grid-template-columns: 1fr; gap: 6px; }
  .content-cta { margin: 35px 0 65px; padding: 34px 23px; }
  .content-cta .button { width: 100%; white-space: normal; }
  .content-footer { gap: 13px 22px; }
  .content-footer .footer-brand { flex-basis: 100%; }
}