.how-page{--page-surface:#f4f8f7;--page-text:#092b4c;--page-accent:#0c7165;background:var(--page-surface);color:var(--page-text);transition:background-color .35s,color .35s;font-family:Arial,Helvetica,sans-serif}
.how-page[data-audience=tutors]{--page-surface:#092b4c;--page-text:#b8f5e5;--page-accent:#23e0b5}
.how-page .unified-header{background:var(--page-surface);color:var(--page-text);transition:background-color .35s,color .35s;--menu-surface:var(--page-surface);--menu-text:var(--page-text)}
.how-page .unified-row{border-bottom-color:color-mix(in srgb,var(--page-text) 20%,transparent)}
.how-main{padding:40px clamp(22px,4vw,72px) 70px;min-height:calc(100svh - 92px)}
.how-top{display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid color-mix(in srgb,var(--page-text) 18%,transparent);padding-bottom:24px}
.how-top .eyebrow{color:var(--page-text)}.audience-tabs{display:flex;gap:32px}.audience-tabs button{position:relative;border:0;background:transparent;color:var(--page-text);font:600 13px Arial;padding:12px 0;cursor:pointer;opacity:.55;transition:opacity .2s,text-shadow .2s}
.audience-tabs button:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--page-accent);transform:scaleX(0);transition:transform .2s}
.audience-tabs button[aria-selected=true]{opacity:1;text-shadow:0 0 18px color-mix(in srgb,var(--page-accent) 35%,transparent)}.audience-tabs button[aria-selected=true]:after{transform:scaleX(1)}.audience-tabs button:hover{opacity:1}
.how-main [role=tabpanel][hidden]{display:none}.how-main [role=tabpanel]{animation:perspective-in .4s cubic-bezier(.2,.7,.3,1)}
.how-lead{padding:64px 0 54px;max-width:1000px}.how-kicker{font-size:10px;letter-spacing:.15em;color:var(--page-accent);font-weight:600}.how-lead h1{color:var(--page-text);font:600 clamp(38px,5.2vw,76px)/1.06 Arial;letter-spacing:-.045em;margin:22px 0}.how-description{max-width:540px;font-size:16px;line-height:1.6}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:0;margin:0 0 40px}.how-steps li{border-top:1px solid color-mix(in srgb,var(--page-text) 25%,transparent);padding-top:22px}.how-number{font-size:12px;color:var(--page-accent)}.how-steps h2{color:var(--page-text);font:500 24px/1.2 Arial;letter-spacing:-.03em;margin:24px 0 15px}.how-steps p{font-size:14px;line-height:1.7;max-width:360px;opacity:.8}
.how-cta{display:inline-flex;align-items:center;gap:45px;border-bottom:1px solid currentColor;padding:15px 0;font-size:14px;font-weight:600}.how-cta svg{width:21px;height:21px;transition:transform .2s}.how-cta:hover svg{transform:translate(3px,-3px)}
.how-page :focus-visible{outline:2px solid var(--page-accent);outline-offset:6px}.how-page ::selection{background:var(--page-text);color:var(--page-surface)}
@keyframes perspective-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.how-top{align-items:flex-start;flex-direction:column;gap:12px}.how-main{padding-top:25px}.how-lead{padding-block:40px}.how-steps{grid-template-columns:1fr;gap:28px}.how-steps h2{margin-top:16px}.how-steps p{max-width:100%}.audience-tabs{gap:30px}}
@media(prefers-reduced-motion:reduce){.how-page,.how-page *{animation:none!important;transition:none!important}}

/* Keep both perspectives central and immediately accessible. */
.how-top{flex-direction:column;align-items:center;justify-content:center;gap:20px}
.audience-tabs{justify-content:center;gap:clamp(48px,8vw,110px)}
@media(max-width:650px){.how-top{align-items:center;gap:18px}.audience-tabs{gap:56px}}

/* A brighter student perspective and a clearer next action. */
.how-page[data-audience=students]{--page-surface:#23e0b5;--page-text:#092b4c;--page-accent:#092b4c}
.how-lead{padding:44px 0 36px;max-width:820px}.how-lead h1{font-size:clamp(30px,3.4vw,48px);font-weight:500;line-height:1.12;margin:16px 0}.how-description{font-size:15px}
.how-cta{border:1px solid var(--page-text);border-radius:14px;background:var(--page-text);color:var(--page-surface);padding:22px 28px;font-size:clamp(17px,1.7vw,22px);font-weight:700;gap:50px;min-height:70px;box-shadow:0 8px 24px #092b4c15;transition:transform .2s,box-shadow .2s}
.how-cta:hover{transform:translateY(-3px);box-shadow:0 12px 28px #092b4c25}.how-cta svg{width:26px;height:26px}
@media(max-width:650px){.how-lead{padding-block:32px}.how-cta{display:flex;justify-content:space-between;gap:20px;padding:20px 22px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.how-cta:hover{transform:none}}

.how-steps{margin-top:40px}

/* Compact switcher, with a steady selected glow rather than a page-wide flash. */
.how-main{padding-top:12px}.how-top{padding-bottom:12px;gap:0}
.audience-tabs button{isolation:isolate;padding:15px 10px;opacity:.62;text-shadow:none;transition:opacity .28s ease,color .35s ease}
.audience-tabs button::before{content:'';position:absolute;inset:5px -12px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#eafff938 0%,#eafff910 45%,transparent 72%);opacity:0;transform:scale(.8);transition:opacity .32s ease,transform .4s ease;pointer-events:none}
.how-page[data-audience=tutors] .audience-tabs button::before{background:radial-gradient(ellipse,#23e0b51a 0%,#23e0b508 45%,transparent 72%)}
.audience-tabs button[aria-selected=true]{opacity:1;text-shadow:none}.audience-tabs button[aria-selected=true]::before{opacity:1;transform:scale(1.15)}
.audience-tabs button::after{left:10px;width:calc(100% - 20px);height:2px;transition:transform .28s ease,box-shadow .32s ease,background-color .35s ease;box-shadow:0 0 0 transparent}
.audience-tabs button[aria-selected=true]::after{box-shadow:0 0 5px #eaffff50}
.how-page[data-audience=tutors] .audience-tabs button[aria-selected=true]::after{box-shadow:0 0 5px #23e0b550}
.how-main [role=tabpanel]{animation:perspective-settle .32s cubic-bezier(.2,.7,.3,1)}
.how-lead h1,.how-description,.how-kicker,.how-steps h2,.how-steps p,.how-number{transition:color .35s ease}
@keyframes perspective-settle{from{transform:translateY(5px)}to{transform:translateY(0)}}
@media(max-width:650px){.how-main{padding-top:8px}.how-top{padding-bottom:8px}.audience-tabs{gap:40px}}
@media(prefers-reduced-motion:reduce){.how-page .audience-tabs button::before,.how-page .audience-tabs button::after{transition:none}.how-main [role=tabpanel]{animation:none}}

/* Simple selected-tab styling without glow. */
.how-page .audience-tabs button::before{display:none}
.how-page .audience-tabs button,.how-page .audience-tabs button[aria-selected=true]{text-shadow:none}
.how-page .audience-tabs button::after,.how-page[data-audience=tutors] .audience-tabs button[aria-selected=true]::after{box-shadow:none}

/* Keep the two browsing actions at the same compact scale. */
.how-cta-row{display:flex;flex-wrap:wrap;gap:14px}
.how-page .how-cta{min-height:58px;padding:16px 21px;gap:22px;font-size:clamp(15px,1.35vw,18px)}
.how-page .how-cta svg{width:21px;height:21px;flex:none}
@media(max-width:650px){.how-cta-row{display:grid;grid-template-columns:1fr}.how-page .how-cta{min-height:58px;justify-content:space-between}}