.keyword-page { background: #f7f9fd; color: #172239; }
.keyword-page .header { position: relative; z-index: 3; background: #101d31; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.keyword-page .header .nav-links a, .keyword-page .header .logo-link { color: #f8fbff; }
.keyword-hero { position: relative; overflow: hidden; padding: 7rem max(1.5rem, calc((100vw - 1180px) / 2)) 5rem; background: radial-gradient(circle at 90% 10%, rgb(23 111 236 / 13%), transparent 28%), linear-gradient(120deg, #fff, #edf4ff); }
.keyword-proof { position: absolute; right: max(1.5rem, calc((100vw - 1180px) / 2)); top: 5.5rem; width: min(40%, 450px); min-height: 270px; padding: 2rem; border: 1px solid #2c4472; border-radius: 24px; box-shadow: 0 24px 55px rgb(13 34 79 / 22%); color: #eaf2ff; background: linear-gradient(145deg, #101735, #193363); font: 600 1rem/1.8 var(--font-body, Inter, sans-serif); }
.keyword-proof strong { display: block; margin-bottom: 1.2rem; color: #fff; font-size: 1.08rem; letter-spacing: .08em; text-transform: uppercase; }
.keyword-proof ul { margin: 0; padding: 0; list-style: none; }
.keyword-proof li { position: relative; padding: .35rem 0 .35rem 1.4rem; }
.keyword-proof li::before { position: absolute; left: 0; color: #76b1ff; content: "✓"; font-weight: 900; }
.keyword-hero-copy { width: min(52%, 620px); }
.keyword-eyebrow, .keyword-label { margin: 0 0 1rem; color: #176fec; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.keyword-hero h1 { margin: 0 0 1.3rem; color: #172239; font: 700 clamp(2.7rem, 5vw, 4.8rem)/1.03 var(--font-display, "Space Grotesk", sans-serif); }
.keyword-hero .lede { margin: 0; color: #42516b; font-size: 1.15rem; line-height: 1.75; }
.keyword-actions { display: flex; flex-wrap: wrap; margin-top: 1.8rem; gap: .8rem; }
.keyword-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .8rem 1.3rem; border: 1px solid #176fec; border-radius: 9px; color: #176fec; background: #fff; font-weight: 750; text-decoration: none; }
.keyword-actions a:first-child { color: #fff; background: #176fec; box-shadow: 0 12px 24px rgb(23 111 236 / 25%); }
.keyword-section { padding: 4.7rem max(1.5rem, calc((100vw - 1040px) / 2)); background: #fff; }
.keyword-section--soft { background: #f1f6ff; }
.keyword-section--dark { color: #fff; background: #101d31; }
.keyword-section h2 { max-width: 760px; margin: 0 0 1.1rem; color: inherit; font: 700 clamp(1.9rem, 3.5vw, 2.8rem)/1.12 var(--font-display, "Space Grotesk", sans-serif); }
.keyword-section > .container > p { max-width: 780px; color: #48566e; font-size: 1.04rem; line-height: 1.8; }
.keyword-section--dark > .container > p { color: #cbd8ee; }
.outcome-grid, .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; gap: 1rem; }
.outcome-card, .step-card { padding: 1.5rem; border: 1px solid #dbe5f5; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgb(26 52 99 / 7%); }
.outcome-card h3, .step-card h3 { margin: 0 0 .7rem; color: #1d3154; font-size: 1.08rem; }
.outcome-card p, .step-card p { margin: 0; color: #536178; line-height: 1.7; }
.step-number { display: inline-grid; width: 34px; height: 34px; margin-bottom: 1rem; place-items: center; border-radius: 50%; color: #fff; background: #176fec; font-weight: 800; }
.example-card { margin-top: 2rem; padding: 2rem; border: 1px solid #d3e0f3; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px rgb(26 52 99 / 8%); }
.example-card strong { color: #1d3154; }
.code-evidence { position: relative; overflow: hidden; margin-top: 1.5rem; border: 1px solid #2a4167; border-radius: 16px; color: #dce8ff; background: #0b1425; box-shadow: 0 18px 38px rgb(12 30 62 / 18%); }
.code-evidence::before { display: block; height: 38px; padding: 0 1rem; border-bottom: 1px solid #233859; color: #7692bd; background: linear-gradient(90deg, #111e34, #0d1729); content: "●  ●  ●   Representative · " attr(data-file); font: 650 .75rem/38px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .02em; }
.code-evidence pre { overflow-x: auto; margin: 0; padding: 1.35rem 1.5rem 1.5rem; }
.code-evidence code { color: #dce8ff; font: 500 .86rem/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.code-evidence .code-keyword { color: #c79bff; }
.code-evidence .code-string { color: #9be4b2; }
.code-evidence .code-command { color: #74b9ff; }
.code-evidence .code-muted { color: #7f93b3; }
.example-flow { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; gap: .65rem; }
.example-flow span { padding: .65rem .85rem; border-radius: 9px; color: #273a5d; background: #edf4ff; font-weight: 650; }
.example-flow b { color: #176fec; }
.proof-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2rem 0 0; padding: 0; gap: .8rem 1.5rem; list-style: none; }
.proof-list li { position: relative; padding-left: 1.5rem; color: #d7e2f3; line-height: 1.65; }
.proof-list li::before { position: absolute; left: 0; color: #69a8ff; content: "✓"; font-weight: 900; }
.keyword-links { display: flex; flex-wrap: wrap; margin-top: 1.5rem; gap: 1rem; }
.keyword-links a { color: #176fec; font-weight: 700; }
.keyword-cta { padding: 4.5rem 1.5rem; text-align: center; color: #fff; background: linear-gradient(135deg, #155fd0, #102b61); }
.keyword-cta h2 { margin: 0 auto 1rem; font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--font-display, "Space Grotesk", sans-serif); }
.keyword-cta p { max-width: 660px; margin: 0 auto; color: #dce9ff; line-height: 1.7; }
.keyword-cta .keyword-actions { justify-content: center; }
.keyword-page .footer { background: #101d31; color: #c8d4e9; }
@media (max-width: 820px) {
  .keyword-page .header .nav-links { display: none; }
  .keyword-hero { padding-top: 4rem; padding-bottom: 3.5rem; }
  .keyword-proof { position: static; width: 100%; min-height: auto; margin-top: 2rem; }
  .keyword-hero-copy { width: 100%; }
  .outcome-grid, .step-grid, .proof-list { grid-template-columns: 1fr; }
}