.component-hero{padding-top:clamp(56px,7vw,80px);padding-bottom:clamp(80px,10vw,120px)}.breadcrumb{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink);opacity:.7;margin-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.breadcrumb a{color:var(--c-ink);text-decoration:none;transition:opacity .15s ease}.breadcrumb a:hover,.breadcrumb-sep{opacity:.5}.breadcrumb-current{opacity:.6}.hero-pill{margin-bottom:24px}.page-title{margin-bottom:32px;max-width:800px}.page-subtitle{max-width:720px}.purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}.purpose-col .section-kicker{margin-bottom:12px}.purpose-col .section-title{margin-bottom:24px;font-size:clamp(24px,2.6vw,32px)}.purpose-lede{color:var(--c-ink-soft);font-size:17px;line-height:1.6;margin-bottom:24px}.purpose-lede strong{color:var(--c-ink);font-weight:600}.purpose-list{list-style:none;padding:0;margin:0}.purpose-list li{padding:10px 0 10px 26px;position:relative;color:var(--c-ink);font-size:16px;line-height:1.5;border-bottom:1px solid rgba(21,25,46,.08)}.purpose-list li:last-child{border-bottom:none}.purpose-list li:before{content:"→";position:absolute;left:0;top:10px;color:var(--c-ink-muted);font-family:var(--font-mono)}.purpose-list--neg li:before{content:"×";color:var(--c-ink);opacity:.6;font-weight:600}.example-section .section-title{margin-bottom:16px}.example-section .section-subtitle{margin-bottom:48px;max-width:720px}.example-card{background:var(--c-paper);border:1px solid rgba(21,25,46,.1);border-radius:var(--r-lg);padding:clamp(28px,4vw,40px);max-width:720px}.example-note{margin-top:24px;color:var(--c-ink-soft);font-size:14px;line-height:1.55;max-width:720px}.example-note .meta{color:var(--c-ink-muted);margin-right:4px}.example-note code{font-family:var(--font-mono);font-size:12px;background:var(--c-paper-deep);padding:1px 6px;border-radius:4px;color:var(--c-ink)}.design-section .section-title{margin-bottom:56px}.design-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px}.design-num{display:block;color:var(--c-ink-muted);margin-bottom:12px}.design-item h3{margin-bottom:8px}.design-item p{color:var(--c-ink-soft);line-height:1.65;font-size:15px}.design-item code{font-family:var(--font-mono);font-size:12px;background:var(--c-paper-deep);padding:1px 6px;border-radius:4px;color:var(--c-ink)}.ux-section .section-title{margin-bottom:56px;max-width:900px}.ux-list{display:flex;flex-direction:column;max-width:880px}.ux-item{padding:28px 0;border-bottom:1px solid rgba(250,248,243,.12)}.ux-item:first-child{padding-top:0}.ux-item:last-child{border-bottom:none}.ux-item h3{margin-bottom:10px;color:var(--c-paper)}.ux-item p{color:#faf8f3c7;line-height:1.7;font-size:16px}.ux-item p strong{color:var(--c-paper);font-weight:600}.ux-item p em{font-style:italic}.ux-item p a{color:var(--c-blue-light);text-decoration:none;border-bottom:1px solid currentColor;transition:color .15s ease}.ux-item p a:hover{color:var(--c-paper)}.scenarios-section .section-title{margin-bottom:56px}.scenarios-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px}.scenario-num{display:block;color:var(--c-ink-muted);margin-bottom:12px}.scenario-card h3{margin-bottom:8px}.scenario-card p{color:var(--c-ink-soft);line-height:1.65;font-size:15px}.cta-content{max-width:800px}.cta-title{margin-bottom:24px}.cta-text{margin-bottom:40px;max-width:580px}.cta-buttons{display:flex;gap:12px;flex-wrap:wrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.purpose-lede a,.purpose-list a,.design-item p a,.scenario-card p a,.example-prompt a,.example-note a{color:var(--c-blue);text-decoration:none;border-bottom:1px solid currentColor;transition:color .15s ease}.purpose-lede a:hover,.purpose-list a:hover,.design-item p a:hover,.scenario-card p a:hover,.example-prompt a:hover,.example-note a:hover{color:var(--c-ink)}@media(max-width:900px){.purpose-grid,.design-grid,.scenarios-grid{grid-template-columns:1fr}}@media(max-width:600px){.cta-buttons .btn{width:100%}}