.how-page { --how-green:#1b6b4d; --how-gold:#c88d36; --how-red:#985b52; }
.how-heading { align-items:center; }
.how-heading h1 { max-width:680px; }
.how-heading p { font-size:16px; line-height:1.7; }
.how-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; padding:22px; margin-bottom:18px; background:linear-gradient(135deg,#0c3428,#164c3b); color:#fff; border:0; overflow:hidden; }
.how-flow-step { min-width:0; display:flex; align-items:center; gap:13px; padding:13px; border:1px solid #ffffff24; border-radius:15px; background:#ffffff0d; }
.how-flow-step>span { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#dff4e8; color:var(--forest); font:800 11px Manrope,sans-serif; }
.how-flow-step.validation>span { background:#f5ead5; }
.how-flow-step.fill>span { background:#dcebef; }
.how-flow-step small,.how-flow-step strong,.how-flow-step p { display:block; }
.how-flow-step small { color:#b8d7c8; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.how-flow-step strong { margin-top:2px; font:700 17px Manrope,sans-serif; }
.how-flow-step p { margin:3px 0 0; color:#d4e5dc; font-size:11px; line-height:1.4; }
.how-flow-arrow { color:#8fc3a9; font-size:22px; }
.how-steps { list-style:none; display:grid; gap:14px; margin:0; padding:0; counter-reset:how-step; }
.how-step { position:relative; display:grid; grid-template-columns:76px 1fr; gap:4px; padding:clamp(24px,4vw,38px); overflow:hidden; }
.how-step:before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--how-green); }
.how-step:nth-child(3n+2):before { background:var(--how-gold); }
.how-step:nth-child(3n):before { background:var(--how-red); }
.how-step-number { color:#cbd4ce; font:800 clamp(32px,5vw,50px)/1 Manrope,sans-serif; letter-spacing:-.06em; }
.how-step-copy { min-width:0; }
.how-step-copy>.overline { margin:0 0 4px; }
.how-step-copy h2,.how-summary h2 { margin:0 0 12px; font:700 clamp(22px,3vw,29px)/1.2 Manrope,sans-serif; letter-spacing:-.025em; }
.how-step-copy>p:not(.overline):not(.how-note) { max-width:760px; color:var(--muted); }
.how-step-copy ul { display:grid; grid-template-columns:1fr 1fr; gap:9px 24px; padding:0; margin:18px 0; list-style:none; }
.how-step-copy li { position:relative; padding-left:24px; color:#3e5149; }
.how-step-copy li:before { content:"✓"; position:absolute; left:0; top:0; color:var(--how-green); font-weight:800; }
.how-note { margin:18px 0 0; padding:12px 15px; border-left:3px solid var(--how-green); border-radius:0 10px 10px 0; background:#edf6f0; color:#24533f; font-weight:600; }
.danger-note { border-color:var(--danger); background:#fff1ef; color:#7a3732; }
.how-chip-grid,.guardrail-grid,.record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:18px 0; }
.how-chip-grid span,.record-grid span { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#42564e; font-size:12px; font-weight:650; }
.how-chip-grid span:before,.record-grid span:before { content:"•"; margin-right:8px; color:var(--how-gold); }
.action-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:18px 0 22px; }
.action-card { min-height:105px; display:grid; align-content:start; gap:7px; padding:14px; border:1px solid var(--line); border-top:3px solid var(--how-green); border-radius:12px; background:#fff; }
.action-card.sell { border-top-color:var(--danger); }
.action-card.rebalance { border-top-color:var(--how-gold); }
.action-card.hold,.action-card.no-action { border-top-color:#83918b; }
.action-card strong { font:800 11px Manrope,sans-serif; letter-spacing:.08em; }
.action-card span { color:var(--muted); font-size:11px; line-height:1.4; }
.blocked-list li:before { content:"×"; color:var(--danger); font-size:18px; line-height:1; }
.guardrail-grid span { position:relative; padding:10px 12px 10px 37px; border-radius:10px; background:#edf5ef; color:#315444; font-size:12px; font-weight:600; }
.guardrail-grid span:before { content:"✓"; position:absolute; left:13px; color:var(--how-green); font-weight:900; }
.confidence-card { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:14px; padding:13px 15px; border:1px solid #e5d0ae; border-radius:12px; background:#fff8eb; }
.confidence-card>strong { margin-right:auto; color:#684a1f; }
.confidence-card>span { padding:6px 9px; border-radius:8px; background:#fff; color:#725a37; font-size:11px; }
.confidence-card b { color:var(--how-gold); }
.fill-formulas { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.fill-formulas div { padding:16px; border-radius:13px; background:#102f26; color:#fff; }
.fill-formulas span,.fill-formulas strong { display:block; }
.fill-formulas span { color:#9cc7b2; font-size:9px; font-weight:800; letter-spacing:.12em; }
.fill-formulas strong { margin-top:5px; font:700 18px Manrope,sans-serif; }
.example-callout { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; padding:15px; border:1px solid #d5e3da; border-radius:12px; background:#f4f8f4; }
.example-callout>span { padding:5px 8px; border-radius:7px; background:var(--mint); color:var(--how-green); font-size:10px; font-weight:800; text-transform:uppercase; }
.example-callout p { margin:0; color:#465951; }
.how-summary { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-top:18px; padding:clamp(25px,4vw,40px); background:linear-gradient(135deg,#f7f2e5,#eef6f0); }
.how-summary>span { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--forest); color:#c8ead8; font-size:27px; }
.how-summary .overline { margin:0 0 4px; }
.how-summary p:last-child { max-width:780px; margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
@media(max-width:900px){.how-flow{grid-template-columns:1fr}.how-flow-arrow{transform:rotate(90deg);justify-self:center;line-height:10px}.action-grid{grid-template-columns:repeat(2,1fr)}.action-card:last-child{grid-column:1/-1}.how-step-copy ul,.how-chip-grid,.guardrail-grid,.record-grid{grid-template-columns:1fr}}
@media(max-width:600px){.how-step{grid-template-columns:1fr;padding:23px 19px}.how-step-number{font-size:29px}.action-grid,.fill-formulas{grid-template-columns:1fr}.action-card:last-child{grid-column:auto}.confidence-card{align-items:flex-start}.confidence-card>strong{width:100%}.example-callout,.how-summary{grid-template-columns:1fr}.how-summary>span{width:46px;height:46px}.how-flow{padding:14px}}