/* Shared feature introduction; uses the established Basic Matte palette. */
.how-guide{color:var(--ink,#234c40)}
.how-guide h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.18;margin:10px 0 16px;letter-spacing:-.035em}
.how-guide h3{font-size:1.15rem;line-height:1.3;margin:0 0 12px}
.how-guide p{line-height:1.7}.how-lead{max-width:740px;margin-bottom:24px}
.how-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.how-hero h1{font-size:clamp(2.5rem,5vw,4.2rem);line-height:1.08;margin:20px 0}
.how-hero .action{margin-top:24px}.how-path{background:#edf2e6;border:1px solid #cedbc6;border-radius:24px;padding:32px}
.how-path ol{list-style:none;counter-reset:path;padding:0}.how-path li{counter-increment:path;position:relative;padding:0 0 24px 48px}.how-path li:before{content:counter(path);position:absolute;left:0;top:0;border-radius:50%;background:#234c40;color:white;width:32px;height:32px;display:grid;place-items:center}.how-path strong,.how-path span{display:block}
.how-audiences{display:flex;gap:12px;flex-wrap:wrap;padding-top:0;padding-bottom:0}.how-audiences a,.how-audiences button{border:1px solid #cdd9c7;background:var(--surface,#fff);color:inherit;text-decoration:none;border-radius:12px;padding:12px 18px;font:inherit;font-weight:650;cursor:pointer}
.how-audiences [aria-pressed=true]{background:#ffbb49;color:#26362d;border-color:#d69021}
.how-role{scroll-margin-top:100px}.how-steps{display:flex;gap:28px;padding:24px 24px 24px 44px;background:var(--surface,#fff);border-block:1px solid #d9e1d3;margin:24px 0 32px}.how-steps li{flex:1;padding-right:12px}
.how-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.how-card{background:var(--surface,#fff);border:1px solid #d3decb;border-radius:18px;padding:26px;min-width:0}.how-card .how-use{margin-top:20px;color:var(--ink2,#526456)}.how-use strong{display:block;font-size:.8rem;letter-spacing:.025em;margin-bottom:4px}.how-card button{margin-top:16px}
.how-more{margin-top:24px;border-block:1px solid #d3decb;padding:18px 0}.how-more summary{font-weight:700;cursor:pointer;padding:8px 0}.how-more .how-cards{margin-top:20px}.how-cta{margin-top:24px}.how-ending{max-width:820px;text-align:center}
.how-in-app .how-role{padding-top:28px}.how-in-app .how-audiences{margin:26px 0}.how-in-app .how-tools{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.how-notice{border-left:3px solid #c68b32;padding-left:16px;margin:20px 0}
.assignment-preview{width:min(920px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid #cdd9c7;border-radius:20px;background:var(--surface,#fff);color:var(--ink,#234c40)}
.assignment-preview::backdrop{background:#203e38aa}.preview-header{position:sticky;top:0;z-index:2;background:var(--surface,#fff);padding:18px 24px;border-bottom:1px solid #d9e1d3;display:flex;gap:16px;align-items:center;justify-content:space-between}.preview-content{padding:24px}.preview-content .slide{margin:20px 0;padding:22px;border:1px solid #d3decb;border-radius:14px}.preview-content img,.preview-content svg{max-width:100%;height:auto}.preview-content .figwrap{overflow:auto}.preview-content summary{cursor:pointer;font-weight:650}.preview-content .tryit .ta{display:block}.preview-content h2{margin:0 0 18px}.preview-content .slide h3{margin-top:0}.preview-content .how-notice{font-size:.9rem}.assignment-preview button{flex-shrink:0}
@media(max-width:700px){.how-hero{grid-template-columns:1fr;gap:28px}.how-path{padding:24px}.how-cards{grid-template-columns:1fr}.how-card{padding:22px}.how-steps{display:block;padding-left:40px}.how-steps li{padding:8px 0}.how-audiences a,.how-audiences button{flex:1 1 100%;text-align:left}.preview-content{padding:16px}.preview-header{padding:14px 16px}.preview-content .slide{padding:16px}.how-guide .public-section{padding-block:32px}}
[data-theme=dark] .how-path{background:var(--surface2);border-color:var(--line2)}

.how-guide .action:not(.secondary){background:#ffbb49;color:#273b31;border-color:#ffbb49}.how-guide .action:not(.secondary):hover{background:#ffc66a}.preview-header strong{min-width:0;overflow-wrap:anywhere}