:root{
  --navy:#08245d;
  --navy-deep:#061a45;
  --blue:#1261d8;
  --blue-dark:#0c4fb6;
  --blue-soft:#edf4ff;
  --green:#66b834;
  --green-dark:#43851f;
  --green-soft:#eef8e9;
  --red:#bf3944;
  --red-soft:#fff1f2;
  --amber:#9b6815;
  --amber-soft:#fff8e9;
  --ink:#111827;
  --text:#27364f;
  --muted:#657187;
  --line:#dbe2eb;
  --line-dark:#cbd5e1;
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#f9fbfd;
  --radius:7px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px rgba(15,31,61,.08);
  --container:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:none;color:var(--blue-dark)}
img{max-width:100%}
button,input{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}

/* Header: compact, tool-like, no decorative glass treatment */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nav{height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;min-width:0}
.brand img{width:174px;height:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;font-weight:700;font-size:13px}
.nav-links a{color:#253451;white-space:nowrap}
.nav-links a:hover{color:var(--blue)}
.nav-links .cta{background:var(--navy);color:#fff;padding:10px 15px;border-radius:6px;border:1px solid var(--navy)}
.nav-links .cta:hover{background:var(--navy-deep);color:#fff}
.menu-btn{display:none;margin-left:auto;border:1px solid var(--line-dark);background:white;color:var(--navy);padding:8px 11px;border-radius:6px;font-weight:750}

/* Home hero: intentionally restrained, closer to a calculator / utility product */
.hero{position:relative;background:#fff;color:var(--ink);padding:76px 0 70px;border-bottom:1px solid var(--line);overflow:hidden}
.hero:before{content:"";position:absolute;right:-180px;top:-220px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(18,97,216,.10),rgba(18,97,216,0) 67%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.78fr);gap:70px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--navy);font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.11em;font-weight:850}
.eyebrow:before{content:"";width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px var(--green-soft)}
.hero h1{max-width:780px;font-size:clamp(39px,4.7vw,62px);line-height:1.04;letter-spacing:-.045em;margin:18px 0 20px;color:#0d1e3b;font-weight:850}
.hero h1 .accent{color:var(--blue);position:relative;white-space:nowrap}
.hero h1 .accent:after{content:"";position:absolute;left:2px;right:0;bottom:-4px;height:4px;background:var(--green);border-radius:2px}
.hero p{max-width:720px;margin:0;color:#4d5c73;font-size:18px;line-height:1.65}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid transparent;border-radius:6px;padding:11px 17px;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none!important;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-deep);color:#fff}
.btn-secondary{background:#fff;color:var(--navy);border-color:var(--line-dark)}
.btn-secondary:hover{background:#f8fafc;color:var(--navy)}
.btn-blue{background:var(--blue);color:white;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-dark);color:white}
.btn-outline{background:white;border-color:var(--line-dark);color:var(--navy)}
.btn-outline:hover{border-color:#aab8ca;color:var(--navy);background:#f8fafc}
.btn-danger{background:var(--red);color:white;border-color:var(--red)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:23px;color:#66758a;font-size:13px;font-weight:650}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta span:before{content:"✓";color:var(--green-dark);font-weight:900}

/* Tool preview replaces the generic score-donut card */
.learning-preview{position:relative;background:#fff;border:1px solid #ccd6e3;border-radius:10px;box-shadow:0 18px 46px rgba(17,39,75,.10);overflow:hidden}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid #e5eaf0;background:#fbfcfe;font-size:12px;color:var(--muted)}
.preview-head strong{color:var(--navy);font-size:13px}
.preview-progress{height:4px;background:#e9edf3}
.preview-progress span{display:block;width:38%;height:100%;background:var(--blue)}
.preview-body{padding:23px 22px 20px}
.preview-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:850;margin-bottom:10px}
.preview-question{font-size:18px;line-height:1.42;font-weight:780;color:#13233e;margin-bottom:15px}
.preview-option{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #d8e0e9;border-radius:6px;background:#fff;margin-top:8px;color:#42516a;font-size:13px}
.preview-option i{width:22px;height:22px;display:grid;place-items:center;border:1px solid #c8d2df;border-radius:4px;font-style:normal;font-size:11px;font-weight:800;color:#53627a}
.preview-note{display:flex;gap:9px;margin-top:16px;padding:11px 12px;border-left:3px solid var(--green);background:#f5faf2;color:#435337;font-size:12px;line-height:1.5}
.preview-footer{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e5eaf0;background:#fbfcfe}
.preview-stat{padding:13px 17px;font-size:11px;color:var(--muted)}
.preview-stat+ .preview-stat{border-left:1px solid #e5eaf0}
.preview-stat strong{display:block;color:#152748;font-size:17px;line-height:1.25;margin-top:2px}

.source-strip{background:#f8fafc;border-bottom:1px solid var(--line)}
.source-strip-inner{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#5c6b80;font-size:13px}
.source-strip strong{color:#243553}
.source-strip a{font-weight:750;color:var(--navy)}

/* Content */
.section{padding:64px 0}
.section-sm{padding:38px 0}
.section-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2,.section-sm h2{font-size:clamp(27px,3vw,34px);line-height:1.18;margin:0 0 12px;letter-spacing:-.025em;color:#132340}
.section-lead{color:var(--muted);max-width:760px;margin:0 0 30px}
.section-heading-row{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}
.section-heading-row .section-lead{margin:0}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:21px;box-shadow:var(--shadow-sm)}
a.card{color:inherit;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
a.card:hover{border-color:#b7c5d8;transform:translateY(-2px);box-shadow:0 6px 18px rgba(24,43,75,.06)}
.card h3{margin:7px 0 7px;font-size:19px;line-height:1.3;color:#142644}
.card p{margin:0;color:var(--muted)}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.module-card{position:relative;display:grid;grid-template-columns:52px 1fr 26px;gap:15px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 20px;color:inherit}
.module-card:hover{border-color:#aebdd1;color:inherit;background:#fcfdff}
.module-code{width:52px;height:52px;border-radius:7px;background:var(--blue-soft);border:1px solid #d9e6fb;display:grid;place-items:center;color:var(--blue);font-weight:900;font-size:14px}
.module-card.featured .module-code{background:var(--navy);border-color:var(--navy);color:#fff}
.module-card h3{margin:0 0 3px;font-size:18px;color:#142644}
.module-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.module-arrow{font-size:22px;color:#91a0b6}
.module-card:hover .module-arrow{color:var(--blue)}

.icon-box{width:40px;height:40px;border-radius:7px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:900;border:1px solid #deE8f6}
.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;background:#edf3fb;color:#34557f;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.035em}
.pill.green{background:var(--green-soft);color:var(--green-dark)}
.pill.red{background:var(--red-soft);color:var(--red)}
.stat{font-size:30px;font-weight:900;color:var(--navy);line-height:1}
.muted{color:var(--muted)}

.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.step{position:relative;padding:27px 28px 27px 60px;min-height:140px}
.step+.step{border-left:1px solid var(--line)}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:23px;top:27px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:11px;font-weight:900}
.step h3{font-size:17px;margin:0 0 6px;color:#162845}
.step p{margin:0;color:var(--muted);font-size:14px}

.learning-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.learning-panel .card{padding:25px}
.progress-summary{display:flex;align-items:center;gap:18px;margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}
.progress-number{font-size:40px;line-height:1;font-weight:900;color:var(--navy)}
.progress-copy strong{display:block;color:#20314d}
.progress-copy span{font-size:13px;color:var(--muted)}
.mistake-list{display:grid;gap:9px;margin-top:16px}
.mistake-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-top:1px solid #edf0f4;color:#40506a;font-size:14px}
.mistake-row strong{color:#182945}

.format-bar{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.format-item{padding:22px 24px}
.format-item+.format-item{border-left:1px solid var(--line)}
.format-value{font-size:30px;font-weight:900;line-height:1;color:var(--navy);letter-spacing:-.03em}
.format-label{margin-top:6px;color:var(--muted);font-size:13px}

/* Internal page header */
.page-hero{padding:45px 0 42px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-bottom:1px solid var(--line)}
.page-hero .container{max-width:var(--container)}
.page-hero h1{max-width:880px;font-size:clamp(31px,4vw,45px);line-height:1.08;margin:10px 0 12px;letter-spacing:-.035em;color:#112443}
.page-hero p{max-width:790px;color:#5a687c;font-size:17px;margin:0}
.breadcrumbs{font-size:12px;color:#8490a2;margin-bottom:12px}
.breadcrumbs a{color:#6c7890}
.notice{border:1px solid #d6e2f2;border-left:3px solid var(--blue);background:#f7faff;padding:13px 15px;border-radius:6px;margin:0 0 20px;color:#40516a;font-size:14px}
.notice.warning{border-color:#ead6aa;border-left-color:#d99b2b;background:var(--amber-soft)}
.notice.success{border-color:#cde4c1;border-left-color:var(--green);background:#f7fbf4}

/* Quiz / learning UI */
.quiz-shell{max-width:930px;margin:0 auto 22px;background:#fff;border:1px solid #ced8e4;border-radius:8px;box-shadow:0 6px 20px rgba(17,35,66,.06);overflow:hidden}
.quiz-top{padding:14px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:13px;background:#fbfcfe;font-size:13px}
.quiz-top .progress-track{flex:1;height:5px;background:#e9edf3;border-radius:2px;overflow:hidden}
.quiz-top .progress-bar{height:100%;background:var(--blue);width:0}
.timer{font-variant-numeric:tabular-nums;font-weight:850;color:var(--navy)}
.quiz-body{padding:29px 30px 30px}
.quiz-question{max-width:800px;font-size:23px;font-weight:800;line-height:1.34;margin:12px 0 21px;color:#142541;letter-spacing:-.015em}
.options{display:grid;gap:9px}
.option{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1px solid #d5dde7;background:white;border-radius:6px;padding:13px 14px;cursor:pointer;font:inherit;color:#273851;transition:background .13s,border-color .13s}
.option:hover{border-color:#9fb8dc;background:#f9fbfe}
.option:disabled{cursor:default}
.option-letter{width:27px;height:27px;border-radius:5px;border:1px solid #d7dee8;background:#f8fafc;color:#40526e;display:grid;place-items:center;font-weight:850;font-size:12px;flex:0 0 auto}
.option.correct{border-color:#9dcd84;background:#f5faf2}
.option.correct .option-letter{border-color:#83bd66;background:#e9f6e2;color:#397b20}
.option.wrong{border-color:#dda2a7;background:#fff6f7}
.option.wrong .option-letter{border-color:#d3848b;background:#fdebed;color:#aa3039}
.feedback{margin-top:17px;padding:14px 15px;border:1px solid #dfe5ec;border-left:3px solid var(--blue);border-radius:5px;background:#f8fafc;color:#405069;font-size:14px}
.feedback strong{display:block;margin-bottom:5px;color:#172843}
.remember{margin-top:10px;font-weight:800;color:var(--navy)}
.quiz-actions{display:flex;gap:10px;margin-top:18px}
.mode-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1px}
.mode-tab{border:1px solid var(--line-dark);background:white;color:#40516b;padding:8px 11px;border-radius:5px;font-size:12px;font-weight:800;cursor:pointer}
.mode-tab.active{background:var(--navy);border-color:var(--navy);color:white}
.result-box{text-align:center;padding:12px 0}
.result-score{font-size:54px;font-weight:920;color:var(--navy);line-height:1.05;margin:12px 0 6px}
.topic-row{display:grid;grid-template-columns:190px 1fr 58px;gap:12px;align-items:center;margin:11px 0;font-size:14px}
.mini-track{height:6px;background:#e8edf3;border-radius:2px;overflow:hidden}
.mini-fill{height:100%;background:var(--green)}

.qti-group{margin-bottom:12px}
.qti-group h3{margin:0 0 10px}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f5;color:#405069}
.check-item input{margin-top:5px;transform:scale(1.08);accent-color:var(--blue)}
.qti-score{position:sticky;top:86px}
.colour-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.colour-card{background:white;border:1px solid var(--line);border-radius:7px;padding:18px}
.dot-grid{display:grid;grid-template-columns:repeat(5,28px);gap:5px;justify-content:center;margin:14px 0}
.dot{width:28px;height:28px;border-radius:50%}.dot.a{background:#e7a44a}.dot.b{background:#d18365}.dot.c{background:#b9c87a}.dot.d{background:#83b47b}
.colour-answers{display:flex;gap:8px;justify-content:center}

.source-list{display:grid;gap:10px}.source-item{background:white;border:1px solid var(--line);border-radius:6px;padding:16px}.source-item .source-link{display:inline-flex;margin-top:9px;font-weight:800}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.faq-item{background:#fff;border:1px solid var(--line);border-radius:6px;padding:17px}.faq-item h3{font-size:16px;margin:0 0 6px;color:#172943}.faq-item p{margin:0;color:var(--muted);font-size:14px}

/* Footer: light, compact and editorial */
.footer{background:#fff;color:#516078;margin-top:54px;padding:43px 0 25px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,.65fr);gap:34px}
.footer a{color:#526078}.footer a:hover{color:var(--blue)}
.footer h4{color:#162845;margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:13px}
.footer-logo{filter:none;width:170px;margin-bottom:9px}
.footer p{font-size:13px;max-width:430px;margin:0;color:#657187}
.disclaimer{font-size:11px;color:#8691a3;border-top:1px solid #e5e9ef;margin-top:27px;padding-top:17px}

.list-clean{padding-left:20px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:white;border:1px solid var(--line)}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.table th{background:#f5f7fa;color:var(--navy);font-size:13px}.kpi{padding:19px;background:white;border:1px solid var(--line);border-radius:7px}.kpi .value{font-size:29px;font-weight:900;color:var(--navy);letter-spacing:-.03em}.empty{text-align:center;padding:38px;color:var(--muted)}

/* No artificial ad boxes. Keep the actual learning interaction ad-free. */
.ad-placeholder{display:none!important}
.quiz-shell ins.adsbygoogle{display:none!important}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:38px}.hero{padding:58px 0}.learning-preview{max-width:640px}.module-grid,.learning-panel{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.2fr repeat(2,.8fr)}.footer-grid>div:last-child{display:none}.grid-4{grid-template-columns:repeat(2,1fr)}.qti-score{position:static}
}
@media(max-width:800px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:white;padding:18px 20px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:15px}.nav-links.open{display:flex}.menu-btn{display:block}.brand img{width:160px}.steps{grid-template-columns:1fr}.step+.step{border-left:0;border-top:1px solid var(--line)}.grid-3{grid-template-columns:1fr 1fr}.faq-grid{grid-template-columns:1fr}.format-bar{grid-template-columns:1fr}.format-item+.format-item{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .container{width:min(100% - 24px,var(--container))}.hero{padding:46px 0 42px}.hero-grid{gap:32px}.hero h1{font-size:39px}.hero p{font-size:16px}.hero-meta{display:grid;gap:7px}.section{padding:46px 0}.section-sm{padding:31px 0}.section-heading-row{display:block}.section-heading-row .section-lead{margin-top:8px}.grid-3,.grid-4,.colour-grid{grid-template-columns:1fr}.module-card{grid-template-columns:46px 1fr 18px;padding:17px}.module-code{width:46px;height:46px}.quiz-body{padding:22px 17px 24px}.quiz-question{font-size:20px}.topic-row{grid-template-columns:1fr 48px}.topic-row .mini-track{grid-column:1/3}.page-hero{padding:34px 0 32px}.page-hero h1{font-size:32px}.page-hero p{font-size:15px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/3}.btn{width:100%}.btn-row .btn{flex:1 1 160px}.qti-layout{grid-template-columns:1fr!important}.preview-body{padding:19px 16px}.preview-footer{grid-template-columns:1fr 1fr}
}