.how-page { background: #f8f7f2; }
.how-page .site-nav a[aria-current="page"] { color: #fff; }
.how-hero { position: relative; overflow: hidden; padding: 158px 0 0; color: #fff; background: #0a2428; }
.how-grid-mark { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(110deg,#000,transparent 80%); }
.how-hero::after { content:""; position:absolute; width:650px; height:650px; right:-220px; top:-190px; border:1px solid rgba(148,212,201,.13); border-radius:50%; box-shadow:0 0 0 90px rgba(148,212,201,.025),0 0 0 180px rgba(148,212,201,.018); }
.how-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.72fr); align-items:center; gap:85px; padding-bottom:82px; }
.how-hero-copy .eyebrow { display:flex; align-items:center; gap:10px; color:#9bd9cf; }
.how-hero-copy .eyebrow span { width:23px; height:2px; background:#f3c75d; }
.how-hero-copy h1 { max-width:720px; margin:27px 0 25px; font-size:clamp(50px,5.5vw,75px); line-height:1; letter-spacing:-4px; }
.how-hero-copy h1 em { display:block; color:#f3c75d; font-family:Georgia,serif; font-weight:400; }
.how-hero-copy > p { max-width:690px; margin:0; color:#aec3c0; font-size:18px; line-height:1.7; }
.executive-summary { padding:27px 28px 23px; color:#102a2e; background:#fbfaf6; border:1px solid rgba(255,255,255,.35); border-radius:11px; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.summary-heading { display:flex; align-items:center; justify-content:space-between; color:#36766f; font-size:8px; font-weight:900; letter-spacing:1.4px; }
.summary-heading i { color:#a3afab; font-family:Georgia,serif; font-size:12px; font-style:normal; }
.executive-summary h2 { margin:18px 0 20px; font-size:24px; line-height:1.2; letter-spacing:-.8px; }
.executive-summary dl { margin:0; border-top:1px solid #dce1db; }
.executive-summary dl div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #e3e6e1; }
.executive-summary dt { color:#71817f; font-size:10px; }.executive-summary dd { margin:0; font-size:10px; font-weight:850; }
.executive-summary > p { display:flex; align-items:center; gap:9px; margin:17px 0 0; color:#617472; font-size:9px; line-height:1.5; }
.executive-summary > p span { display:grid; width:21px; height:21px; flex:none; place-items:center; color:#0a2428; background:#f3c75d; border-radius:50%; font-weight:900; }
.hero-outcome-bar { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:25px; padding:28px 0 30px; border-top:1px solid rgba(255,255,255,.11); }
.hero-outcome-bar > span { color:#f3c75d; font-size:19px; }.hero-outcome-bar small,.hero-outcome-bar strong { display:block; }.hero-outcome-bar small { margin-bottom:7px; color:#678986; font-size:8px; font-weight:900; letter-spacing:1.3px; }.hero-outcome-bar strong { color:#c9d7d5; font-size:11px; }

.audience-section { padding:115px 0 120px; background:#f3f0e8; }
.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.audience-card { min-height:480px; padding:39px 42px; border-radius:11px; }
.it-card { color:#fff; background:#10363a; box-shadow:0 25px 55px rgba(10,36,40,.16); }
.executive-card { color:#102a2e; background:#fff; border:1px solid #d9ded8; }
.audience-top { display:flex; align-items:center; gap:12px; }
.audience-top > span { display:grid; width:48px; height:48px; place-items:center; color:#0a2428; background:#f3c75d; border-radius:50%; font-size:10px; font-weight:900; }
.executive-card .audience-top > span { color:#22675f; background:#dff0ea; }
.audience-top small { color:#6f918e; font-size:8px; font-weight:900; letter-spacing:1.4px; }
.audience-card h3 { max-width:480px; margin:27px 0 16px; font-size:30px; line-height:1.15; letter-spacing:-1.3px; }
.audience-card > p { margin:0; color:#aec1be; font-size:14px; line-height:1.7; }.executive-card > p { color:#687a7a; }
.audience-card ul { display:grid; gap:11px; margin:27px 0 31px; padding:23px 0 0; border-top:1px solid rgba(255,255,255,.12); list-style:none; }.executive-card ul { border-color:#dfe3de; }
.audience-card li { color:#c6d6d3; font-size:12px; }.executive-card li { color:#4f6866; }.audience-card li::before { content:"✓"; margin-right:10px; color:#f3c75d; font-weight:900; }.executive-card li::before { color:#37857a; }
.audience-card > a { display:inline-flex; gap:10px; color:#f3c75d; font-size:11px; font-weight:850; }.executive-card > a { color:#2b756c; }.audience-card > a span { font-size:16px; }

.workflow-section { padding:125px 0; background:#faf9f5; }
.workflow-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:80px; margin-bottom:55px; }
.workflow-heading h2 { margin:16px 0 0; font-size:52px; line-height:1.05; letter-spacing:-2.7px; }.workflow-heading > p { margin:0; color:#687a7a; font-size:15px; line-height:1.75; }
.workflow-row { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:90px; padding:78px 0; border-top:1px solid #d9ded8; }
.workflow-row.reverse { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }.workflow-row.reverse .workflow-copy { grid-column:2; grid-row:1; }.workflow-row.reverse .workflow-visual { grid-column:1; grid-row:1; }
.workflow-copy { position:relative; padding-left:73px; }
.workflow-number { position:absolute; left:0; top:1px; display:grid; width:48px; height:48px; place-items:center; color:#103c3e; background:#f3c75d; border-radius:50%; font-family:Georgia,serif; font-size:13px; }
.workflow-copy > small { color:#467a75; font-size:8px; font-weight:900; letter-spacing:1.3px; }
.workflow-copy h3 { margin:12px 0 15px; font-size:34px; line-height:1.1; letter-spacing:-1.5px; }
.workflow-copy > p { color:#697b7b; font-size:14px; line-height:1.75; }
.responsibility { margin-top:23px; padding:17px 18px; color:#617472; background:#edf2ed; border-left:3px solid #499087; border-radius:5px; font-size:10px; line-height:1.75; }.responsibility strong { color:#214f4b; }
.workflow-link { display:inline-flex; gap:9px; margin-top:20px; color:#2c746b; font-size:11px; font-weight:850; }
.workflow-visual { overflow:hidden; background:#fff; border:1px solid #d5ddd7; border-radius:11px; box-shadow:0 20px 45px rgba(13,43,46,.1); }
.campaign-builder { padding:25px; background:#f6f7f3; }
.campaign-builder header { display:flex; align-items:center; justify-content:space-between; margin:-25px -25px 23px; padding:18px 22px; color:#fff; background:#11383c; }.campaign-builder header span { font-size:11px; font-weight:800; }.campaign-builder header i { color:#8eaaa7; font-size:8px; font-style:normal; }
.campaign-builder label { display:block; margin-bottom:13px; color:#71837f; font-size:7px; font-weight:900; letter-spacing:1px; }.campaign-builder label strong { display:block; margin-top:6px; padding:12px 13px; color:#183b3b; background:#fff; border:1px solid #d2dad5; border-radius:6px; font-size:10px; letter-spacing:0; }
.builder-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.campaign-builder button { width:100%; height:42px; color:#173334; background:#f3c75d; border:0; border-radius:6px; font-size:10px; font-weight:850; pointer-events:none; }
.share-visual { min-height:355px; display:grid; grid-template-columns:70px 1fr; align-content:start; padding:25px; background:#eff3ef; }
.channel-tabs { grid-column:1/-1; display:flex; gap:8px; margin:-25px -25px 38px; padding:16px 21px; background:#11383c; }.channel-tabs span { padding:7px 10px; color:#77918f; font-size:7px; font-weight:900; letter-spacing:1px; }.channel-tabs span:first-child { color:#0a2428; background:#f3c75d; border-radius:4px; }
.message-avatar { width:46px; height:46px; display:grid; place-items:center; color:#1d635b; background:#d9ece6; border-radius:50%; font-size:11px; font-weight:900; }
.message-copy { padding:3px 0 0; }.message-copy > strong { font-size:14px; }.message-copy p { max-width:430px; color:#667a78; font-size:11px; line-height:1.6; }.share-link { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:20px 0 12px; padding:13px 14px; color:#276e65; background:#fff; border:1px solid #cfd8d3; border-radius:6px; font-family:ui-monospace,Consolas,monospace; font-size:9px; }.share-link i { font-style:normal; }.message-copy small { color:#83938f; font-size:8px; }
.learner-visual { padding-bottom:22px; background:#f7f7f3; }
.browser-bar { display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; background:#10373b; }.browser-bar i { width:7px; height:7px; background:#d2685e; border-radius:50%; }.browser-bar i:nth-child(2){background:#dbb34e}.browser-bar i:nth-child(3){background:#62a988}.browser-bar span { margin-left:9px; color:#86a09e; font-size:8px; }
.lesson-progress { display:flex; align-items:center; justify-content:space-between; padding:16px 21px 8px; }.lesson-progress > span { position:relative; width:70%; height:4px; background:#dce2dd; border-radius:5px; }.lesson-progress > span::after { content:""; position:absolute; width:60%; height:100%; background:#4c9287; border-radius:5px; }.lesson-progress b { color:#62807d; font-size:8px; }
.mini-email { margin:12px 21px; padding:20px; background:#fff; border:1px solid #d7ddd8; border-radius:7px; }.mini-email small,.mini-email strong,.mini-email span { display:block; }.mini-email small { color:#879491; font-size:7px; letter-spacing:1px; }.mini-email strong { margin-top:5px; font-size:11px; }.mini-email span { margin-top:3px; color:#7f8e8c; font-size:8px; }.mini-email h4 { margin:18px 0 9px; font-size:13px; }.mini-email p { color:#5f7472; font-size:9px; }.mini-email div { margin-top:15px; padding:8px; color:#e5eeee; background:#1b3335; border-radius:4px; font-family:ui-monospace,Consolas,monospace; font-size:7px; }
.mini-choice { margin:0 21px; padding:11px 13px; border-radius:5px; font-size:9px; font-weight:800; }.mini-choice.safe { color:#245f57; background:#e0f0eb; border:1px solid #afd5cd; }
.evidence-visual { padding:24px; background:#f5f6f2; }
.evidence-dashboard { padding:20px; color:#fff; background:#12373b; border-radius:7px; }.evidence-dashboard small,.evidence-dashboard strong,.evidence-dashboard span { display:block; }.evidence-dashboard small { color:#82a09c; font-size:7px; letter-spacing:1px; }.evidence-dashboard strong { margin-top:10px; color:#f3c75d; font-size:28px; }.evidence-dashboard span { margin-top:3px; color:#adc0bd; font-size:8px; }.evidence-dashboard > div { height:5px; margin-top:15px; overflow:hidden; background:#315358; border-radius:5px; }.evidence-dashboard i { display:block; height:100%; background:#f3c75d; }
.evidence-row { display:grid; grid-template-columns:38px 1fr auto 20px; align-items:center; gap:10px; margin-top:13px; padding:14px; background:#fff; border:1px solid #d9dfda; border-radius:7px; }.evidence-avatar { width:34px; height:34px; display:grid; place-items:center; color:#1e635b; background:#dceee8; border-radius:50%; font-size:9px; font-weight:900; }.evidence-row span strong,.evidence-row span small { display:block; }.evidence-row span strong { font-size:9px; }.evidence-row span small { margin-top:3px; color:#80908d; font-size:7px; }.evidence-row > b { color:#36786f; font-family:ui-monospace,Consolas,monospace; font-size:7px; }.evidence-row > i { display:grid; width:18px; height:18px; place-items:center; color:#fff; background:#45958a; border-radius:50%; font-size:8px; font-style:normal; }
.evidence-actions { display:flex; gap:8px; margin-top:13px; }.evidence-actions span { flex:1; padding:10px; color:#486966; text-align:center; background:#fff; border:1px solid #d7ded9; border-radius:5px; font-size:8px; font-weight:800; }

.trust-section { padding:125px 0; color:#fff; background:#103438; }
.trust-grid { display:grid; grid-template-columns:.8fr 1.2fr; align-items:start; gap:95px; }
.trust-copy { position:sticky; top:120px; }.trust-copy h2 { margin:18px 0 20px; font-size:48px; line-height:1.08; letter-spacing:-2.5px; }.trust-copy > p:not(.section-kicker) { color:#a2b7b4; font-size:15px; line-height:1.75; }.trust-copy .button { margin-top:20px; }
.trust-facts { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); }
.trust-facts article { min-height:210px; display:grid; grid-template-columns:35px 1fr; gap:15px; padding:29px 25px; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }.trust-facts article > span { color:#f3c75d; font-family:Georgia,serif; font-size:11px; }.trust-facts h3 { margin:0 0 10px; font-size:15px; }.trust-facts p { margin:0; color:#91aaa7; font-size:11px; line-height:1.65; }

.architecture-section { padding:120px 0; background:#f3f0e8; }
.architecture-flow { display:grid; grid-template-columns:1fr auto 1.15fr auto 1fr auto 1fr; align-items:center; gap:17px; padding:30px; background:#fff; border:1px solid #d8ddd7; border-radius:10px; box-shadow:0 14px 40px rgba(15,46,48,.06); }
.architecture-flow > div { min-height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:17px; text-align:center; background:#f4f6f2; border-radius:7px; }.architecture-flow > .architecture-core { color:#fff; background:#12373b; }.architecture-flow > i { color:#c29a3f; font-style:normal; font-size:20px; }.architecture-icon { width:40px; height:40px; display:grid; margin-bottom:14px; place-items:center; color:#24675f; background:#dceee8; border-radius:50%; font-size:11px; font-weight:900; }.architecture-core img { margin-bottom:11px; }.architecture-flow small,.architecture-flow strong { display:block; }.architecture-flow small { color:#748784; font-size:7px; font-weight:900; letter-spacing:1.1px; }.architecture-core small { color:#86a29f; }.architecture-flow strong { margin-top:7px; font-size:10px; }.architecture-core strong { color:#e5eeec; }
.boundary-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:19px; border:1px solid #d5dad4; border-radius:8px; overflow:hidden; }.boundary-grid div { padding:23px; background:#faf9f5; border-right:1px solid #d5dad4; }.boundary-grid div:last-child { border:0; }.boundary-grid strong,.boundary-grid span { display:block; }.boundary-grid strong { margin-bottom:8px; color:#2c6e66; font-size:10px; }.boundary-grid span { color:#697a79; font-size:10px; line-height:1.65; }
.questions-section { padding:125px 0; background:#fbfaf6; }
.how-final { padding-top:100px; padding-bottom:100px; }

@media (max-width:1050px) {
  .how-hero-grid { gap:45px; }.how-hero-copy h1 { font-size:58px; }.workflow-row,.workflow-row.reverse { gap:45px; }.trust-grid { gap:50px; }.architecture-flow { gap:9px; padding:18px; }
}
@media (max-width:820px) {
  .how-hero { padding-top:130px; }.how-hero-grid { grid-template-columns:1fr; }.how-hero-copy h1 { max-width:650px; }.executive-summary { width:min(540px,100%); }.hero-outcome-bar { grid-template-columns:1fr; gap:13px; }.hero-outcome-bar > span { transform:rotate(90deg); justify-self:start; }
  .audience-grid { grid-template-columns:1fr; }.audience-card { min-height:auto; }
  .workflow-heading { grid-template-columns:1fr; gap:15px; }.workflow-row,.workflow-row.reverse { grid-template-columns:1fr; gap:38px; }.workflow-row.reverse .workflow-copy,.workflow-row.reverse .workflow-visual { grid-column:1; }.workflow-row.reverse .workflow-copy { grid-row:1; }.workflow-row.reverse .workflow-visual { grid-row:2; }
  .trust-grid { grid-template-columns:1fr; }.trust-copy { position:static; }.architecture-flow { grid-template-columns:1fr; }.architecture-flow > i { transform:rotate(90deg); justify-self:center; }.boundary-grid { grid-template-columns:1fr; }.boundary-grid div { border-right:0; border-bottom:1px solid #d5dad4; }
}
@media (max-width:560px) {
  .how-hero-copy h1 { font-size:45px; letter-spacing:-2.6px; }.how-hero-copy > p { font-size:16px; }.how-hero-copy .hero-actions { align-items:stretch; flex-direction:column; }.how-hero-copy .hero-actions .button { width:100%; }.how-hero-copy .text-link { justify-content:center; }.executive-summary { padding:23px 20px; }
  .audience-section,.workflow-section,.trust-section,.architecture-section,.questions-section { padding-top:82px; padding-bottom:82px; }.audience-card { padding:31px 25px; }.audience-card h3 { font-size:27px; }
  .workflow-heading h2 { font-size:39px; }.workflow-row { padding:58px 0; }.workflow-copy { padding-left:0; padding-top:63px; }.workflow-number { top:0; }.workflow-copy h3 { font-size:30px; }.builder-pair { grid-template-columns:1fr; }.share-visual { grid-template-columns:50px 1fr; padding:19px; }.channel-tabs { margin:-19px -19px 27px; }.share-link { align-items:flex-start; }.share-link span { overflow-wrap:anywhere; }.evidence-row { grid-template-columns:34px 1fr 18px; }.evidence-row > b { display:none; }.evidence-actions { flex-direction:column; }
  .trust-copy h2 { font-size:39px; }.trust-facts { grid-template-columns:1fr; }.trust-facts article { min-height:auto; }.architecture-flow { padding:13px; }.boundary-grid div { padding:20px; }
}