.how-page { --how-ink:#111; --how-muted:#505852; --how-sage:#e8eee7; --how-paper:#f8f8f3; color:var(--how-ink); }
.how-page a { color:inherit; }
.how-nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(17,17,17,.2); }
.how-logo { font:700 22px/1 'Archivo Narrow',sans-serif; letter-spacing:-.06em; text-decoration:none; }
.how-nav>div { display:flex; align-items:center; gap:26px; font-size:13px; font-weight:700; }
.how-nav>div a { text-decoration:none; }
.how-nav>div a:hover,.how-footer a:hover { color:#a8573e; }
.how-hero { position:relative; display:flex; min-height:530px; flex-direction:column; justify-content:space-between; margin:0 calc(50% - 50vw); padding:clamp(52px,8vw,100px) max(28px,calc((100vw - 1124px)/2)) 28px; overflow:hidden; background:linear-gradient(120deg,#e8eee7 0%,#f5f5ef 55%,#e4e7df 100%); }
.how-hero.has-calm-image { background-image:linear-gradient(90deg,rgba(248,248,243,.94) 0%,rgba(248,248,243,.8) 48%,rgba(248,248,243,.25) 100%),url('/assets/images/nota-learning-background.jpg'); background-position:center; background-size:cover; }
.how-hero-copy { max-width:720px; }
.how-kicker { margin:0 0 20px; font-size:11px; font-weight:800; letter-spacing:.16em; }
.how-hero h1,.how-steps h2,.how-paths h2,.how-your-work h2 { margin:0; font:700 clamp(50px,8vw,96px)/.88 'Archivo Narrow',sans-serif; letter-spacing:-.065em; }
.how-hero-copy>p:not(.how-kicker) { max-width:520px; margin:25px 0 30px; color:#303732; font-size:18px; line-height:1.55; }
.how-primary { display:inline-flex; min-height:50px; align-items:center; gap:15px; padding:0 22px; border-radius:999px; background:#20312a; color:#fff!important; font-weight:700; text-decoration:none; }
.how-primary:hover { background:#31493d; transform:translateY(-1px); }
.how-hero-note { display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,54px); padding-top:22px; border-top:1px solid rgba(17,17,17,.22); font-size:13px; }
.how-hero-note span { display:flex; align-items:baseline; gap:7px; }
.how-hero-note strong { font:700 27px 'Archivo Narrow',sans-serif; }
.how-steps,.how-paths,.how-your-work { padding:clamp(66px,9vw,116px) 0; border-bottom:1px solid rgba(17,17,17,.2); }
.how-steps h2,.how-paths h2,.how-your-work h2 { font-size:clamp(43px,6.4vw,76px); }
.how-steps ol { max-width:850px; margin:54px 0 0; padding:0; list-style:none; border-top:1px solid rgba(17,17,17,.45); }
.how-steps li { display:grid; grid-template-columns:80px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid rgba(17,17,17,.2); }
.how-steps li>span,.how-path-number { color:#ad6249; font:700 30px 'Archivo Narrow',sans-serif; }
.how-steps h3,.how-path-row h3 { margin:0 0 8px; font:700 25px/1.05 'Archivo Narrow',sans-serif; }
.how-steps li p,.how-path-row p,.how-your-work>p:not(.how-kicker) { max-width:640px; margin:0; color:var(--how-muted); line-height:1.65; }
.how-path-list { margin-top:36px; border-top:1px solid rgba(17,17,17,.45); }
.how-path-row { display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:center; padding:28px 0; border-bottom:1px solid rgba(17,17,17,.2); }
.how-path-row a,.how-text-link { display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:800; text-decoration:none; }
.how-path-row a:hover,.how-text-link:hover { color:#a8573e; }
.how-your-work { border-bottom:0; }
.how-your-work>p:not(.how-kicker) { max-width:600px; margin:22px 0 27px; font-size:17px; }
.how-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0 34px; font-size:13px; }
.how-footer a:last-child { text-decoration:none; }
@media(max-width:700px) {
  .how-nav { min-height:68px; }
  .how-nav>div { gap:14px; font-size:11px; }
  .how-nav>div a:first-child { display:none; }
  .how-hero { min-height:520px; padding:58px 20px 22px; }
  .how-hero.has-calm-image { background-image:linear-gradient(180deg,rgba(248,248,243,.93),rgba(248,248,243,.72)),url('/assets/images/nota-learning-background.jpg'); background-position:center; }
  .how-hero h1 { font-size:clamp(52px,15vw,72px); }
  .how-hero-copy>p:not(.how-kicker) { font-size:16px; }
  .how-hero-note { gap:12px 22px; font-size:11px; }
  .how-hero-note strong { font-size:23px; }
  .how-steps,.how-paths,.how-your-work { padding:68px 0; }
  .how-steps h2,.how-paths h2,.how-your-work h2 { font-size:48px; }
  .how-steps li { grid-template-columns:42px 1fr; gap:12px; padding:22px 0; }
  .how-steps li>span,.how-path-number { font-size:25px; }
  .how-path-row { grid-template-columns:42px 1fr; gap:12px; }
  .how-path-row a { grid-column:2; }
  .how-footer { flex-wrap:wrap; font-size:11px; }
}