:root{--red:#c52235;--ink:#1d2635;--muted:#526072;--bg:#f7f8fb}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:17px/1.7 system-ui,-apple-system,Segoe UI,Arial}a{color:#a7192d}a:focus-visible{outline:3px solid #ed8b96;outline-offset:3px}header{background:#19212c;color:#fff;padding:16px max(5%,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}header a{color:#fff;text-decoration:none}header .logo{font-size:26px;font-weight:850;letter-spacing:.08em}header nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}main{max-width:1040px;margin:auto;padding:55px 24px 80px}h1{font-size:clamp(34px,5vw,52px);line-height:1.13;max-width:900px;letter-spacing:-.03em}h2{font-size:27px;line-height:1.3;margin-top:40px}h3{font-size:21px}p{max-width:790px} .eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:var(--red);font-weight:800}.lede{font-size:21px;color:var(--muted);max-width:840px}.cta{display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:13px 24px;border-radius:9px;font-weight:750;margin:18px 12px 12px 0}.secondary{background:#fff;color:var(--red);border:1px solid var(--red)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px;margin:30px 0}.tile{background:#fff;border:1px solid #e1e5ec;border-radius:12px;padding:24px}.tile h3{margin-top:0}.tile p{font-size:15px;color:var(--muted)}.callout{background:#fff0f2;border-left:4px solid var(--red);padding:18px 24px;border-radius:8px;margin:26px 0}footer{background:#19212c;color:#dce2eb;padding:30px max(5%,calc((100% - 1120px)/2))}footer a{color:#fff;margin-right:18px;font-size:14px}ul{padding-left:24px}li{margin:9px 0}@media(max-width:650px){header{padding:18px}main{padding:34px 18px 55px}header nav{gap:10px}}

/* Shared Coduma visual system, aligned to the main marketing site */
:root{--red:#c52235;--ink:#192334;--muted:#657187;--bg:#fff;--line:#e8eaf0}
body{background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em}
header{background:#fff;color:var(--ink);border-bottom:1px solid #e9e9ee;box-shadow:0 2px 14px #18233a08;min-height:78px;padding:15px max(5%,calc((100% - 1160px)/2));position:sticky;top:0;z-index:5}
header a{color:var(--ink)}header .logo{color:#bc2335;font-size:24px;letter-spacing:.11em}header nav{gap:22px;font-size:14px;font-weight:650}header nav a:hover{color:var(--red)}
main{max-width:1160px;padding:0 26px 90px}
main>.eyebrow,main>.lede,main>h1{position:relative;z-index:1}
main>.eyebrow{padding-top:80px;margin:0;color:#b91c32;font-size:12px}
main>h1{margin:20px 0 18px;font-size:clamp(38px,5vw,66px);line-height:1.07;max-width:880px;letter-spacing:-.05em;font-weight:820}
main>.lede{font-size:21px;line-height:1.55;color:#58677b;max-width:760px;margin-bottom:24px}
main:before{content:"";position:absolute;z-index:0;left:0;right:0;top:78px;height:520px;background:radial-gradient(ellipse at 78% 12%,#ffe1e5 0,transparent 43%),linear-gradient(145deg,#fff,#fff8f8 72%);pointer-events:none}
main>.cta{position:relative;z-index:1}
.cta{background:linear-gradient(110deg,#b51c30,#dc3a4c);box-shadow:0 10px 24px #bb1b3024;border-radius:11px;padding:14px 23px;transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px #bb1b3038}
.cta.secondary{background:#fff;box-shadow:none;color:#b51c30}
.grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:65px 0 55px}
.tile{background:#fff;border:1px solid #e9e7ed;border-radius:17px;padding:29px;box-shadow:0 14px 42px #1923340b;transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:#f2a4af}
.tile h3{font-size:19px;line-height:1.35;color:#1d293b}
.tile p{font-size:15px;line-height:1.7}
.tile a{font-weight:750;text-decoration:none}.tile a:hover{text-decoration:underline}
main>h2{max-width:790px;margin:46px 0 13px;font-size:clamp(25px,3vw,33px);letter-spacing:-.025em}
main>h2+p{font-size:17px;color:#526075;line-height:1.85}
.callout{margin-top:65px;background:linear-gradient(125deg,#1a2537,#273348);color:#fff;padding:38px 42px;border:0;border-radius:18px}
.callout p{color:#dce4f1}.callout .cta{background:#cf2d42}
footer{background:#192334;padding:42px max(5%,calc((100% - 1160px)/2))}
footer a{color:#dfe7f1}
@media(max-width:720px){header{position:relative;padding:18px 20px}header nav{gap:11px}main:before{top:120px;height:460px}main>.eyebrow{padding-top:54px}main{padding:0 20px 55px}.grid{margin:45px 0}.callout{padding:26px}}

/* Polished content and navigation cards */
.related{margin:65px 0 30px;padding-top:24px;border-top:1px solid #edf0f3}
.related h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em}
.linked-tile{position:relative;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;min-height:175px}
.linked-tile:hover{text-decoration:none;box-shadow:0 18px 46px #19233416}
.linked-tile h3{padding-right:22px;margin:0 0 12px}
.linked-tile p{margin:0 0 18px;flex:1}
.tile-link{color:#bc2335;font-size:14px;font-weight:750}
.tile-arrow{position:absolute;right:22px;top:19px;color:#c52235;font-size:21px}
header nav a{white-space:nowrap}
@media(min-width:900px){main>h2:nth-of-type(even){padding-left:28px;border-left:3px solid #f0bac2}}

/* Exact marketing-homepage navigation design shared by inner pages */
header.nav{background:#fff;position:relative;top:auto;min-height:92px;padding:0 4%;box-shadow:0 2px 18px #1520360b;border-bottom:1px solid #edf0f5}
header.nav .wrap{max-width:1480px;width:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
header.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#c52235}
header.nav .coduma-symbol-image{width:42px;height:42px;object-fit:contain}
header.nav .coduma-brand-text{display:flex;flex-direction:column;line-height:1.1}
header.nav .coduma-name{font-weight:850;font-size:24px;letter-spacing:-.045em;color:#be2639}
header.nav .coduma-tagline{font-size:11px;color:#657187;letter-spacing:0;font-weight:500;margin-top:3px}
header.nav nav.links{display:flex;align-items:center;justify-content:flex-end;gap:23px;flex-wrap:wrap;font-size:14px;font-weight:700}
header.nav nav.links a{color:#263148;text-decoration:none;white-space:nowrap}
header.nav nav.links a:hover{color:#c52235}
header.nav nav.links .btn{background:linear-gradient(115deg,#bd2035,#e44350);color:#fff;padding:13px 20px;border-radius:11px;box-shadow:0 12px 24px #bb20352a}
header.nav nav.links .btn:hover{color:#fff}
.coduma-demo{position:relative;margin:54px 0 60px;border:1px solid #dce3ee;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 20px 60px #1b2c4913}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 30px 15px}
.demo-head h2{font-size:27px;letter-spacing:-.035em;margin:5px 0}
.demo-head p{font-size:14px;color:#63718a;margin:0}
.demo-kicker{font-size:11px;color:#c52235;font-weight:850;letter-spacing:.12em}
.demo-pill{background:#fff0f2;color:#b52035;padding:7px 13px;border-radius:30px;font-size:12px;font-weight:800;white-space:nowrap}
.demo-tabs{display:flex;gap:8px;padding:14px 24px;background:#f3f5fa;overflow-x:auto}
.demo-tab{border:0;border-radius:9px;padding:12px 16px;background:transparent;color:#42506b;font:700 13px system-ui;cursor:pointer;white-space:nowrap}
.demo-tab.active,.demo-tab[aria-selected=true]{background:#fff;color:#c52235;box-shadow:0 3px 12px #15203614}
.demo-display{background:#111d33;color:#f0f6ff;margin:0 24px;border-radius:12px;overflow:hidden;min-height:180px}
.demo-windowbar{height:37px;background:#202f49;display:flex;align-items:center;gap:6px;padding:0 15px}
.demo-windowbar i{width:8px;height:8px;border-radius:50%;background:#ed7180}.demo-windowbar i:nth-child(2){background:#f5bf6c}.demo-windowbar i:nth-child(3){background:#64c6a6}
.demo-windowbar span{margin-left:12px;color:#afbdd6;font:700 10px system-ui;letter-spacing:.1em}
.demo-code{padding:26px;font:15px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 24px}
.demo-controls button{border:1px solid #e2e5ed;background:#fff;border-radius:9px;padding:10px 15px;color:#23314c;font-weight:750;cursor:pointer}
.demo-controls .demo-next{background:#c52235;color:#fff;border-color:#c52235}
.demo-count{font-size:13px;color:#68768c}
@media(max-width:950px){header.nav .wrap{padding:14px 0;flex-wrap:wrap}header.nav nav.links{gap:13px;justify-content:flex-start}}
@media(max-width:620px){header.nav{padding:0 18px}header.nav nav.links{font-size:12px}header.nav nav.links .btn{padding:9px 12px}.demo-head{padding:20px;align-items:flex-start;flex-direction:column}.demo-tabs{padding:10px}.demo-display{margin:0 12px}.demo-controls{padding:14px}}

/* Animated walkthrough playback */
.demo-code{min-height:115px;transition:opacity .25s ease}
.demo-progress{height:4px;background:#e9edf5;overflow:hidden}
.demo-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#c52235,#ef6374)}
@keyframes demo-progress{from{width:0}to{width:100%}}
.demo-pause{border:1px solid #d7dce7!important;background:#f8f9fc!important;color:#263148!important}
.demo-tab{transition:background-color .25s,box-shadow .25s,color .25s,transform .25s}
.demo-tab[aria-selected=true]{transform:translateY(-1px)}
.demo-display{box-shadow:0 12px 28px #10203919}


/* Visual assessment workflow */
.coduma-visual{border:1px solid #dce4ee;border-radius:20px;background:#fff;box-shadow:0 22px 55px #1c2b4512;overflow:hidden;margin:50px 0 60px}
.v-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 32px 22px}
.v-heading h2{font-size:clamp(24px,3vw,34px);margin:8px 0;letter-spacing:-.035em}.v-heading p{color:#68758a;font-size:14px;margin:0}
.v-play,.v-next{border:1px solid #d9dfeb;border-radius:10px;padding:11px 16px;background:#fff;font-weight:750;cursor:pointer;white-space:nowrap}
.v-tabs{display:flex;background:#eef2f9;padding:12px 20px;gap:8px;overflow-x:auto}
.v-tabs button{border:0;border-radius:9px;background:transparent;color:#43516b;padding:13px 20px;font-weight:750;cursor:pointer}
.v-tabs button.active{background:#fff;color:#c52235;box-shadow:0 5px 14px #1a263518}
.v-scene{background:#f5f7fc;padding:24px;min-height:370px}
.v-panel{display:grid;grid-template-columns:210px 1fr;min-height:330px;border:1px solid #dce2ed;border-radius:14px;background:#fff;overflow:hidden;animation:v-arrive .45s ease both}
.v-side{display:flex;flex-direction:column;gap:12px;background:#17253d;color:#aebed6;padding:24px 17px;font-size:13px}
.v-side strong{color:#fff;font-size:16px;margin-bottom:14px}.v-side span{padding:10px;border-radius:8px}.v-side .v-on{background:#304564;color:#fff;font-weight:750;border-left:3px solid #e54456}
.v-work{padding:25px 30px}.v-work h3{font-size:24px;margin:4px 0 20px}.v-work small{font-size:12px;color:#77849b;display:block}.v-work p{color:#627089;font-size:14px}
.v-line,.v-setting,.v-question{display:flex;align-items:center;justify-content:space-between;gap:14px}.v-line{margin-bottom:17px}.v-line .v-tag{background:#fff1df;color:#9d6418;padding:5px 12px;border-radius:20px;font-size:12px}
.v-question{border:1px solid #e2e7f0;border-radius:10px;padding:13px;margin:10px 0;justify-content:flex-start;animation:v-arrive .5s ease both}.v-question:nth-of-type(3){animation-delay:.2s}.v-question>b{color:#229a78}.v-question>div{flex:1}.v-question>span{color:#178766;font-size:12px;font-weight:800}.v-total{padding-top:15px;border-top:1px solid #e9edf3}
.v-setting{border-bottom:1px solid #e8edf4;padding:15px 0;font-size:14px}.v-setting span{color:#66748a}.v-setting strong{color:#26334a}.v-setting em{font-style:normal;background:#fff0d7;color:#9e6410;padding:4px 9px;border-radius:14px;font-size:11px}.v-setting .v-good{background:#e1f6ee;color:#187857}
.v-success{background:#e5f7f0;color:#147a57;padding:12px 15px;border-radius:9px;margin-top:19px;font-weight:700;font-size:13px}
.v-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.v-stats>div{background:#f1f4fa;border-radius:10px;padding:15px}.v-stats strong{font-size:25px;display:block}.v-stats small{font-size:11px}
.v-timeline{margin-top:18px;font-size:13px;font-weight:750}.v-track{height:7px;border-radius:8px;background:#e6ebf3;margin:11px 0}.v-track i{display:block;height:100%;width:76%;background:linear-gradient(90deg,#d22840,#ef6877);border-radius:8px;animation:v-track 2s ease both}
.v-options{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.v-options span{padding:9px 12px;border:1px solid #dfe4ee;border-radius:8px;font-size:12px}.v-options .v-selected{background:#fff0f2;border-color:#d23a4d;color:#b52035;font-weight:800}
.v-table{border:1px solid #e5e9f1;border-radius:9px;overflow:hidden}.v-table>div{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;padding:10px 15px;font-size:13px;border-bottom:1px solid #e5e9f1}.v-table>div:first-child{background:#f0f3f9}
.v-bottom{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:17px 23px;font-size:13px}.v-caption{color:#55647d;flex:1}.v-count{color:#75829a}.v-next{background:#c52235;color:#fff;border-color:#c52235}
.v-progress{height:4px;background:#f1e4e7}.v-progress span{display:block;width:0;height:100%;background:#c52235}
@keyframes v-fill{to{width:100%}}@keyframes v-arrive{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes v-track{from{width:0}to{width:76%}}
@media(max-width:700px){.v-panel{grid-template-columns:1fr}.v-side{flex-direction:row;flex-wrap:wrap;padding:12px}.v-side strong{width:100%;margin:0}.v-side span{padding:6px}.v-scene{padding:10px}.v-work{padding:17px}.v-heading{padding:20px;flex-wrap:wrap}.v-stats strong{font-size:19px}.v-bottom{flex-wrap:wrap}}


/* Editorial teaching resources and more purposeful page rhythm */
.resource-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;background:linear-gradient(130deg,#fff6f7,#f4f7fd);border:1px solid #e8e9f1;border-radius:22px;padding:44px;margin:65px 0}
.resource-feature h2{font-size:clamp(27px,3vw,39px);letter-spacing:-.04em;line-height:1.12;margin:14px 0}
.resource-feature p{font-size:17px;color:#58667c;line-height:1.75}
.resource-feature a{color:#bc2335;font-weight:800;text-decoration:none}
.resource-example{background:#17253d;color:#f7faff;padding:26px;border-radius:16px;box-shadow:0 20px 35px #15243b22}
.resource-example small{color:#aabdd8;font-size:11px;letter-spacing:.12em;display:block}
.resource-example strong{font-size:23px;display:block;margin:15px 0 22px}
.resource-example div{display:flex;align-items:center;gap:13px;border-top:1px solid #38465e;padding:12px 0;font-size:14px}
.resource-example div span{color:#ff8290;font-weight:800}
@media(max-width:760px){.resource-feature{grid-template-columns:1fr;padding:24px;gap:24px}}

/* Product-style visual demonstrations */
.demo-rich{background:#f3f6fb!important;padding:0!important;min-height:350px!important}
.demo-rich-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:340px}
.demo-rich-sidebar{background:#17253d;color:#adbad1;padding:24px 17px;display:flex;flex-direction:column;gap:17px;font-size:13px}
.demo-rich-sidebar strong{color:#fff;margin-bottom:15px;font-size:15px}
.demo-rich-sidebar span{padding:10px 12px;border-radius:8px}
.demo-rich-sidebar .demo-rich-active{background:#354764;color:#fff;border-left:3px solid #e5475d;font-weight:800}
.demo-rich-main{padding:24px 28px;background:#f7f9fd;min-width:0}
.demo-rich-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}
.demo-rich-heading small{color:#8a5971;font-size:11px;font-weight:800;letter-spacing:.09em}
.demo-rich-title{color:#17253d;font-size:21px}
.demo-rich-stage{border:1px solid #dce3ef;background:#fff;border-radius:12px;overflow:hidden;min-height:195px;animation:demo-scene-in .4s ease both}
.demo-stage-toolbar{padding:12px 17px;background:#eaf0f8;color:#40536f;font-size:11px;font-weight:800;letter-spacing:.1em}
.demo-stage-content{padding:18px}
.demo-stage-editor{background:#132039;color:#e4f2ff;padding:18px;border-radius:9px;display:flex;gap:19px;overflow:auto;min-height:112px;font-size:13px;line-height:1.75}
.demo-editor-gutter{color:#7588a4;white-space:pre;text-align:right;user-select:none}
.demo-stage-editor code{white-space:pre-wrap;overflow-wrap:anywhere}
.demo-revision-track{display:flex;align-items:center;gap:12px;color:#65758e;font-size:11px;margin-top:15px}
.demo-revision-track>div{height:6px;border-radius:6px;background:#e7edf6;flex:1;overflow:hidden}
.demo-revision-track i{display:block;height:100%;background:#c52235;transition:width .6s}
.demo-stage-row{display:flex;align-items:center;gap:16px;border:1px solid #e3e9f1;padding:14px;border-radius:9px;margin-bottom:10px;color:#253550;font-size:14px;animation:demo-scene-in .45s ease both}
.demo-stage-row:nth-child(2){animation-delay:.12s}.demo-stage-row:nth-child(3){animation-delay:.24s}
.demo-stage-icon{background:#e7f7f1;color:#188267;border-radius:7px;padding:6px 9px;font-size:12px;font-weight:800}
.demo-type-integrity .demo-stage-icon{background:#fff0d9;color:#a16c18}
.demo-stage-note{font-size:12px;color:#6b7a91;background:#f4f6fa;border-radius:8px;padding:11px 14px}
.demo-rich-foot{display:flex;justify-content:space-between;gap:12px;margin-top:15px;color:#64748c;font-size:11px;font-weight:800}
.demo-rich-status{color:#1a9774}
@keyframes demo-scene-in{from{opacity:.1;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){.demo-rich-layout{grid-template-columns:1fr}.demo-rich-sidebar{display:none}.demo-rich-main{padding:14px}.demo-rich-heading{flex-wrap:wrap}.demo-rich-title{font-size:18px}}


/* Layout correction: the hero background must not overlap page content */
main{position:relative;background:transparent}
main:before{display:none!important}
main>.eyebrow,main>p.eyebrow,main>h1,main>.lede{z-index:auto}
main>.eyebrow,main>p.eyebrow{padding-top:62px}
main>h1{margin-top:14px}
main>.lede{margin-bottom:20px}
main{background-image:radial-gradient(ellipse 70% 310px at 85% 0%,#ffe6ea 0,transparent 100%);background-repeat:no-repeat}
header.nav .wrap{max-width:1320px;min-width:0}
header.nav nav.links{gap:clamp(9px,1.2vw,20px);min-width:0}
header.nav nav.links a{font-size:clamp(11px,.88vw,14px)}
@media(max-width:1020px){header.nav .wrap{flex-wrap:wrap;justify-content:center;padding:13px 0}header.nav nav.links{justify-content:center;gap:12px}}
@media(max-width:640px){main>.eyebrow,main>p.eyebrow{padding-top:40px}main>h1{font-size:clamp(34px,9vw,48px)}}

.pilot-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;margin:55px 0 70px}
.pilot-intro h2{font-size:clamp(30px,3.5vw,43px);line-height:1.13;letter-spacing:-.04em;margin:14px 0}
.pilot-intro p{font-size:17px;line-height:1.8;color:#59677c}
.pilot-visual{border-radius:19px;overflow:hidden;box-shadow:0 24px 55px #18273e1c;border:1px solid #dce3ef;background:#fff}
.pilot-visual-top{background:#18263e;color:#dbe5f6;display:flex;justify-content:space-between;gap:15px;padding:17px 21px;font-size:11px;font-weight:800;letter-spacing:.08em}
.pilot-live{color:#76dcb7}
.pilot-steps{padding:23px;display:grid;gap:12px}
.pilot-step{display:flex;gap:15px;align-items:center;border:1px solid #e3e8f0;padding:15px;border-radius:11px;background:#fff;animation:pilot-step-in .6s ease both}
.pilot-step:nth-child(2){animation-delay:.6s}.pilot-step:nth-child(3){animation-delay:1.2s}.pilot-step:nth-child(4){animation-delay:1.8s}
.pilot-step-num{background:#fff0f2;color:#c52235;font-weight:900;border-radius:8px;padding:9px}
.pilot-step strong{display:block;color:#1c2b43;font-size:15px}.pilot-step small{display:block;color:#6c7890;font-size:12px;margin-top:3px}
.pilot-benefits{margin:65px 0}.pilot-benefits h2,.pilot-expect h2{font-size:clamp(28px,3vw,36px)}
.pilot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.pilot-cards article{background:#f6f8fc;border:1px solid #e5eaf1;border-radius:16px;padding:26px}
.pilot-cards strong{font-size:19px}.pilot-cards p,.pilot-expect p{color:#59677c;line-height:1.8}
.pilot-expect{padding:35px 0 50px;border-top:1px solid #e9edf3}
@keyframes pilot-step-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:760px){.pilot-intro{grid-template-columns:1fr;gap:22px}.pilot-cards{grid-template-columns:1fr}}


/* Keep pronunciation in the brand lockup on every secondary page */
header.nav .coduma-tagline::after{content:"Pronounced CODE-oo-ma";display:block;color:#c52235;font-size:10px;font-weight:750;letter-spacing:.02em;margin-top:3px}

/* Shared navigation: unmistakable current location */
header.nav nav.links a.cf-nav-active,header.nav .links a.cf-nav-active{color:#be2038!important;background:#fff0f2!important;border-radius:9px!important;box-shadow:inset 0 -3px 0 #c52235!important;padding:9px 12px!important;font-weight:850!important}
header.nav nav.links a.cf-home-link,header.nav .links a.cf-home-link{font-weight:750}
header.nav nav.links a.cf-nav-active:hover{background:#ffe5e9!important}

/* One consistent marketing header for homepage and secondary pages. */
header.nav{position:relative!important;top:auto!important;z-index:20!important;background:#fff!important;backdrop-filter:none!important;border-bottom:1px solid #edf0f5!important;box-shadow:0 2px 18px #1520360b!important;padding:0 18px!important;min-height:92px!important;color:#263148!important}
header.nav>.wrap{width:100%!important;max-width:1290px!important;min-height:92px!important;margin:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;padding:12px 0!important;flex-wrap:nowrap!important}
header.nav .brand.coduma-wordmark{display:flex!important;align-items:center!important;gap:12px!important;min-width:190px!important;flex-shrink:0!important;text-decoration:none!important}
header.nav .coduma-symbol-image{width:42px!important;height:42px!important;object-fit:contain!important}
header.nav .coduma-brand-text{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;line-height:1.1!important}
header.nav .coduma-name{font-size:24px!important;font-weight:850!important;color:#be2639!important;letter-spacing:-.045em!important}
header.nav .coduma-tagline{font-size:11px!important;color:#657187!important;font-weight:500!important;letter-spacing:0!important;margin:3px 0 0!important}
header.nav .coduma-logo-pronunciation,header.nav .coduma-tagline::after{font-size:10px!important;line-height:1.2!important;color:#c52235!important;font-weight:750!important;letter-spacing:.02em!important;margin-top:3px!important}
header.nav nav.links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(9px,1.1vw,18px)!important;flex-wrap:nowrap!important;min-width:0!important;font-size:12px!important;font-weight:750!important}
header.nav nav.links a:not(.btn){color:#263148!important;text-decoration:none!important;white-space:nowrap!important}
header.nav nav.links a:not(.btn):hover{color:#c52235!important}
header.nav nav.links a.cf-nav-active:not(.btn){color:#be2038!important;background:#fff0f2!important;box-shadow:inset 0 -3px 0 #c52235!important;border-radius:9px!important;padding:9px 12px!important}
header.nav nav.links a.cf-home-link:not(.btn){background:transparent!important;box-shadow:none!important;color:#263148!important;padding:0!important}
header.nav nav.links .btn{background:linear-gradient(115deg,#bd2035,#e44350)!important;color:#fff!important;padding:13px 18px!important;border-radius:11px!important;box-shadow:0 12px 24px #bb20352a!important;white-space:nowrap!important}
@media(max-width:1060px){header.nav>.wrap{flex-wrap:wrap!important;justify-content:center!important}header.nav nav.links{flex-wrap:wrap!important;justify-content:center!important}}
@media(max-width:640px){header.nav nav.links{gap:10px!important}header.nav nav.links .btn{padding:9px 12px!important}}


/* Teaching resource wayfinding and reading sequence */
.guide-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:#68768c;margin:0 0 25px!important;line-height:1.5}
.guide-breadcrumb a{color:#ad2338;text-decoration:none;font-weight:750}.guide-breadcrumb a:hover{text-decoration:underline}
.guide-breadcrumb [aria-current=page]{color:#33435c;font-weight:650}
.guide-position{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #e3e7ef;padding-top:16px;margin-bottom:10px;font-size:12px;font-weight:850;letter-spacing:.09em;color:#b72036}
.guide-position a{letter-spacing:0;text-decoration:none;color:#b72036}
.guide-intro{font-size:16px;color:#617087;max-width:760px}
.guide-trail{margin:60px 0 35px;padding:30px;background:#fff;border:1px solid #e0e5ed;border-radius:18px;box-shadow:0 12px 35px #13243c0a}
.guide-trail-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.guide-trail-heading small,.guide-trail-links small{font-size:11px;color:#bc263b;letter-spacing:.1em;font-weight:850}.guide-trail-heading h2{margin:7px 0}.guide-trail-heading p{color:#66738a;margin:5px 0 18px}.guide-trail-heading>a{color:#bd263b;font-weight:800;text-decoration:none}
.guide-trail-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.guide-trail-links a{display:flex;flex-direction:column;gap:8px;border:1px solid #e1e6ef;background:#f8f9fc;padding:22px;border-radius:12px;text-decoration:none;color:#24334b;transition:transform .2s,border-color .2s}.guide-trail-links a:hover{transform:translateY(-3px);border-color:#c52235}.guide-trail-links strong{font-size:17px;line-height:1.35}
@media(max-width:650px){.guide-trail-links{grid-template-columns:1fr}.guide-trail{padding:20px}}

/* Practical teaching examples within guide articles */
.guide-practical{margin:36px 0 42px;padding:30px;background:#fff;border:1px solid #e0e6ef;border-left:4px solid #c52235;border-radius:14px;box-shadow:0 10px 26px #1729420a}
.guide-practical-label{color:#bb253a;font-size:11px;letter-spacing:.13em;font-weight:850}
.guide-practical h2{font-size:clamp(24px,3vw,32px);margin:12px 0}.guide-practical h3{font-size:18px;margin:24px 0 6px;color:#20304a}.guide-practical p{color:#526278;line-height:1.8}

/* Canonical header layout rules, mirrored from shared-header.css */
html body header.nav{height:92px!important;min-height:92px!important;padding:0 18px!important;background:#fff!important}
html body header.nav>.wrap{height:92px!important;min-height:92px!important;padding:0!important;max-width:1290px!important;width:min(1290px,100%)!important}
html body header.nav .coduma-tagline::after{display:none!important;content:none!important}
html body header.nav .coduma-logo-pronunciation{display:block!important;margin-top:3px!important}
html body header.nav nav.links a.cf-nav-active:not(.btn){background:transparent!important;box-shadow:inset 0 -2px 0 #c52235!important;border-radius:0!important;padding:8px 0!important;color:#b72036!important}
@media(max-width:1060px){html body header.nav{height:auto!important}html body header.nav>.wrap{height:auto!important;min-height:92px!important;padding:12px 0!important}}

/* Header typography parity with shared-header.css */
html body header.nav nav.links{font-size:15px!important;gap:clamp(12px,1.15vw,21px)!important;line-height:1.35!important}
html body header.nav nav.links a:not(.btn){font-size:15px!important;font-weight:750!important}
html body header.nav nav.links .btn{font-size:15px!important;padding:13px 19px!important}
html body header.nav .coduma-name{font-size:27px!important}
html body header.nav .coduma-tagline{font-size:12px!important}
html body header.nav .coduma-logo-pronunciation{font-size:11px!important}
html body header.nav>.wrap{max-width:1440px!important;width:min(1440px,100%)!important}
@media(max-width:1280px){html body header.nav nav.links{font-size:13px!important;gap:11px!important}html body header.nav nav.links a:not(.btn),html body header.nav nav.links .btn{font-size:13px!important}}