/* Eduscape brand colours: navy #1C3A5C, orange #E8853B, cream #F9F6ED, deep teal #1B5569, white. */
:root{--b-navy:#1C3A5C;--b-navy-d:#1B3355;--b-teal:#1B5569;--b-orange:#E8853B;--b-orange-d:#C96A24;--b-cream:#F9F6ED;--b-cream-d:#F3EEDF}
#main{background:var(--bg) !important;background-image:none !important}
#main::before,#main::after,#dropletsLayer{display:none !important}
#landingPage{background:#F9F6ED}
.lp-hero,.lp-dark{background:linear-gradient(135deg,#1B5569 0%,#1C3A5C 55%,#1B3355 100%) !important}
.lp-section:not(.lp-dark){background:#F9F6ED !important;background-image:none !important}
#lp-pricing,#lp-demo{background:#FFFFFF !important}
.lp-btn.pink,.lp-btn.orange,.lp-btn.lime{background:#E8853B !important;border-color:#E8853B !important;color:#fff !important}
.lp-btn.pink:hover,.lp-btn.orange:hover,.lp-btn.lime:hover{background:#C96A24 !important;border-color:#C96A24 !important}
.lp-btn.primary{background:#1C3A5C !important;border-color:#1C3A5C !important;color:#fff !important}
.lp-btn.primary:hover{background:#1B5569 !important;border-color:#1B5569 !important}
.lp-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}.lp-more>div{background:#fff;border:1px solid #E6DFCE;border-radius:14px;padding:20px;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}.lp-more>div:hover{transform:translateY(-3px);border-color:#E8853B;box-shadow:0 8px 20px rgba(28,58,92,.1)}.lp-more h3{margin:0 0 6px;font-size:18px;color:#1C3A5C}.lp-more p{margin:0;color:#5A6573;font-size:14.5px;line-height:1.55}
/* The system uses the light brand palette unless the user picks dark mode in settings. */
@media (prefers-color-scheme: dark){:root:not([data-theme="dark"]){--bg:#F9F6ED !important;--surface:#FFFFFF !important;--paper:#F9F6ED !important;--parchment:#F3EEDF !important;--text:#1C2B3A !important;--text-soft:#5A6573 !important;--line:#E6DFCE !important;--ink:#1C3A5C !important;color-scheme:light}}

/* ===== Inside the system: harmony background, header and motion ===== */
body.modnav #main{background:radial-gradient(900px 520px at 6% -6%,rgba(27,85,105,.11),transparent 62%),radial-gradient(820px 500px at 100% 0%,rgba(232,133,59,.13),transparent 60%),linear-gradient(180deg,#F9F6ED 0%,#F3EEDF 100%) fixed !important}
body.modnav .topbar{background:rgba(249,246,237,.82) !important;backdrop-filter:blur(8px);border-bottom:1px solid #E6DFCE !important}
body.modnav #modbar{box-shadow:0 10px 30px rgba(28,58,92,.16) !important;border-bottom:0 !important}
body.modnav #modbar .cp-top{background:linear-gradient(100deg,#1C3A5C 0%,#1B4A63 55%,#1B5569 100%) !important;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#E8853B,#F2A266 45%,#1B5569) 1}
body.modnav #modbar .cp-brand b{color:#fff !important;letter-spacing:.02em}
body.modnav #modbar .cp-brand span{color:#F2D3B3 !important}
body.modnav #modbar .cp-search{background:rgba(255,255,255,.13) !important;border:1px solid rgba(255,255,255,.28) !important;color:#F3EEDF !important;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
body.modnav #modbar .cp-search:hover{background:rgba(255,255,255,.2) !important;border-color:#E8853B !important;box-shadow:0 0 0 3px rgba(232,133,59,.25)}
body.modnav #modbar .cp-term{background:#E8853B !important;color:#fff !important;font-weight:700;box-shadow:0 4px 12px rgba(232,133,59,.35)}
body.modnav #modbar .cp-btn{border:1px solid rgba(255,255,255,.4) !important;color:#fff !important;transition:background .2s ease,border-color .2s ease,transform .15s ease}
body.modnav #modbar .cp-btn:hover{background:#E8853B !important;border-color:#E8853B !important;transform:translateY(-1px)}
body.modnav #modbar .cp-btn:active{transform:scale(.95)}
body.modnav #modbar .cp-user{background:#E8853B !important;color:#fff !important;box-shadow:0 0 0 3px rgba(255,255,255,.25);transition:transform .2s ease,box-shadow .2s ease}
body.modnav #modbar .cp-user:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(232,133,59,.45)}
body.modnav #modbar .cp-nav{background:#FBF8F0 !important;border-bottom:1px solid #E6DFCE !important}
body.modnav #modbar .cp-m{color:#1C3A5C !important;font-weight:600}
body.modnav #modbar .cp-m:hover{color:#C96A24 !important;background:rgba(232,133,59,.1) !important}
body.modnav #modbar .cp-m.on{color:#1C3A5C !important;font-weight:800}
body.modnav #modbar .cp-m.on::after{background:#E8853B !important}
body.modnav #modbar .cp-m.open{background:rgba(27,85,105,.09) !important}
body.modnav #cpCrumb{background:#F3EEDF !important;border-bottom:1px solid #E6DFCE !important;color:#5A6573}
body.modnav #cpCrumb b{color:#1C3A5C}
#cpDrop{border-top:3px solid #E8853B !important;animation:esDrop .22s ease both}
#cpDrop h4{color:#1B5569 !important}
@keyframes esDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#annBar{background:linear-gradient(90deg,#1B3355,#1B5569) !important;color:#F9F6ED !important}
#annBar .ab-tag{background:#E8853B !important;color:#fff !important}
/* motion */
@keyframes esUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes esSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
body.modnav #pageTitle{animation:esSlide .5s cubic-bezier(.2,.8,.2,1) both}
body.modnav #content>*{animation:esUp .55s cubic-bezier(.2,.8,.2,1) both}
body.modnav #content>*:nth-child(2){animation-delay:.06s}body.modnav #content>*:nth-child(3){animation-delay:.12s}body.modnav #content>*:nth-child(4){animation-delay:.18s}body.modnav #content>*:nth-child(5){animation-delay:.24s}
body.modnav .hp-top h2{animation:esUp .6s .05s cubic-bezier(.2,.8,.2,1) both}
body.modnav .hp-top p{animation:esUp .6s .15s cubic-bezier(.2,.8,.2,1) both}
body.modnav .hp-k{animation:esUp .55s cubic-bezier(.2,.8,.2,1) both}
body.modnav .hp-k:nth-child(2){animation-delay:.08s}body.modnav .hp-k:nth-child(3){animation-delay:.16s}body.modnav .hp-k:nth-child(4){animation-delay:.24s}
body.modnav .hp-main>.sp-w,body.modnav .hp-side>.sp-w{animation:esUp .6s cubic-bezier(.2,.8,.2,1) both}
body.modnav .hp-main>.sp-w:nth-child(2),body.modnav .hp-side>.sp-w:nth-child(2){animation-delay:.1s}body.modnav .hp-main>.sp-w:nth-child(3),body.modnav .hp-side>.sp-w:nth-child(3){animation-delay:.2s}
body.modnav .sp-w>h3{background:linear-gradient(90deg,#F3EEDF,#FBF8F0) !important;color:#1C3A5C !important;border-bottom:1px solid #E6DFCE !important;position:relative}
body.modnav .sp-w>h3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#E8853B}
body.modnav .hp-k{border-top-color:#E8853B !important}
body.modnav .hp-k:nth-child(even){border-top-color:#1B5569 !important}
body.modnav .hp-k b{color:#1C3A5C}
body.modnav .hp-top h2{color:#1C3A5C !important}
body.modnav .ws-c.on{border-color:#E8853B !important;background:#FFF6EC !important}
.sp-tip{background:linear-gradient(135deg,#FFF6EC,#FBF8F0);border-left:5px solid #E8853B}
.sp-tip small.tag{display:inline-block;background:#E8853B;color:#fff;font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:99px;margin-bottom:8px}
.sp-tip h4{margin:0 0 4px;font-size:17px;color:#1C3A5C}.sp-tip p{margin:0 0 6px;color:#3b4a5a;font-size:14px;line-height:1.5}.sp-tip ol{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:#3b4a5a}
@media (prefers-reduced-motion:reduce){body.modnav #pageTitle,body.modnav #content>*,body.modnav .hp-top h2,body.modnav .hp-top p,body.modnav .hp-k,body.modnav .hp-main>.sp-w,body.modnav .hp-side>.sp-w,#cpDrop{animation:none !important}}
body.modnav #modbar .cp-brand svg{background:transparent !important;padding:0 !important;border-radius:10px;box-shadow:0 0 0 2px rgba(249,246,237,.38),0 4px 12px rgba(0,0,0,.25);transition:transform .25s ease,box-shadow .25s ease}
body.modnav #modbar .cp-brand:hover svg{transform:rotate(-4deg) scale(1.06);box-shadow:0 0 0 2px #E8853B,0 6px 16px rgba(0,0,0,.3)}

/* ===== Buttons: one colour system. Navy = main action, orange = highlight, white = secondary, terracotta = remove, teal = confirm ===== */
body.modnav .btn{font-weight:700 !important;letter-spacing:.01em;border-radius:10px !important;padding:9px 16px;box-shadow:0 1px 2px rgba(28,58,92,.08);transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease !important}
body.modnav .btn.small{padding:6px 12px !important;font-size:13px}
body.modnav .btn:not(.primary):not(.gold):not(.orange):not(.danger):not(.success):not(.green){background:#fff !important;color:#1C3A5C !important;border:1.5px solid #CFC7B3 !important}
body.modnav .btn:not(.primary):not(.gold):not(.orange):not(.danger):not(.success):not(.green):hover{background:#FFF6EC !important;border-color:#E8853B !important;color:#B85A14 !important;box-shadow:0 6px 14px rgba(232,133,59,.22) !important}
body.modnav .btn.primary{background:linear-gradient(135deg,#1C3A5C,#24506E) !important;color:#fff !important;border:1.5px solid #1C3A5C !important;box-shadow:0 6px 14px rgba(28,58,92,.25) !important}
body.modnav .btn.primary:hover{background:linear-gradient(135deg,#1B5569,#237088) !important;border-color:#1B5569 !important;box-shadow:0 8px 18px rgba(27,85,105,.35) !important}
body.modnav .btn.gold,body.modnav .btn.orange{background:linear-gradient(135deg,#E8853B,#F29A52) !important;color:#fff !important;border:1.5px solid #E8853B !important;box-shadow:0 6px 14px rgba(232,133,59,.3) !important;text-shadow:0 1px 0 rgba(0,0,0,.12)}
body.modnav .btn.gold:hover,body.modnav .btn.orange:hover{background:linear-gradient(135deg,#D9722A,#E8853B) !important;border-color:#D9722A !important;box-shadow:0 8px 18px rgba(217,114,42,.38) !important}
body.modnav .btn.danger{background:#fff !important;color:#B93A1E !important;border:1.5px solid #E9B7A6 !important}
body.modnav .btn.danger:hover{background:#B93A1E !important;color:#fff !important;border-color:#B93A1E !important;box-shadow:0 6px 14px rgba(185,58,30,.3) !important}
body.modnav .btn.success,body.modnav .btn.green{background:linear-gradient(135deg,#1B5569,#237088) !important;color:#fff !important;border:1.5px solid #1B5569 !important}
body.modnav .btn:active{transform:translateY(0) scale(.96) !important;box-shadow:none !important}
body.modnav .btn:disabled,body.modnav .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}
/* pills, tabs and choice buttons */
body.modnav .st-tab,body.modnav .class-sheet-tab,body.modnav .asst-chip,body.modnav .marks-scroll-btn{background:#fff !important;color:#1C3A5C !important;border:1.5px solid #DDD5C3 !important;border-radius:999px !important;padding:7px 16px;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s ease,border-color .2s ease,background .2s ease,color .2s ease}
body.modnav .st-tab:hover,body.modnav .class-sheet-tab:hover,body.modnav .asst-chip:hover,body.modnav .marks-scroll-btn:hover{border-color:#E8853B !important;background:#FFF6EC !important;color:#B85A14 !important;transform:translateY(-1px)}
body.modnav .st-tab.on,body.modnav .st-tab.active,body.modnav .class-sheet-tab.active,body.modnav .class-sheet-tab.on,body.modnav .asst-chip.on{background:#1C3A5C !important;color:#fff !important;border-color:#1C3A5C !important}
body.modnav .st-tab:active,body.modnav .asst-chip:active,body.modnav .class-sheet-tab:active{transform:scale(.96)}
body.modnav .team-thread{transition:transform .15s ease,border-color .2s ease,background .2s ease}
body.modnav .team-thread:hover{border-color:#E8853B !important;background:#FFF6EC !important;transform:translateX(3px)}
body.modnav .pattern-swatch,body.modnav .bg-preset,body.modnav .accent-preset{transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
body.modnav .pattern-swatch:hover,body.modnav .bg-preset:hover,body.modnav .accent-preset:hover{transform:translateY(-2px);border-color:#E8853B !important;box-shadow:0 6px 14px rgba(28,58,92,.15)}
body.modnav .pattern-swatch.active,body.modnav .bg-preset.active,body.modnav .accent-preset.active{border-color:#E8853B !important;box-shadow:0 0 0 3px rgba(232,133,59,.3)}
body.modnav #content button.on:not(.btn):not(.st-tab):not(.asst-chip):not(.ws-c){border-color:#E8853B !important;background:#FFF6EC !important}
body.modnav .tk-x{border:1.5px solid #E9B7A6 !important;color:#B93A1E !important;background:#fff !important;border-radius:10px !important;padding:6px 12px;font-weight:700;cursor:pointer;transition:transform .15s ease,background .2s ease,color .2s ease}
body.modnav .tk-x:hover{background:#B93A1E !important;color:#fff !important;border-color:#B93A1E !important}
body.modnav .tk-x:active{transform:scale(.95)}
body.modnav .modal .btn.primary,body.modnav .modal .btn.gold{min-width:96px}

/* ===== Start Page welcome header sets the page background ===== */
html.es-in #landingPage{display:none !important}
body.es-home #main{background:linear-gradient(180deg,#1C3A5C 0px,#1B4A63 240px,#1B5569 400px,#F3EEDF 700px,#F9F6ED 100%) !important}
body.es-home .topbar{background:transparent !important;border-bottom:0 !important;backdrop-filter:none}
body.es-home #pageTitle{color:#fff !important}
body.es-home .topbar .btn{border-color:rgba(255,255,255,.45) !important}
.hp-kick{display:block;color:#F2A266;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-bottom:8px}
body.es-home .hp-top{margin-bottom:22px}
body.es-home .hp-top h2{color:#fff !important;font-size:34px !important;letter-spacing:.01em}
body.es-home .hp-top p{color:#D4E3EA !important}
body.es-home .hp-find input{background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.32) !important;color:#fff !important}
body.es-home .hp-find input::placeholder{color:#D4E3EA}
body.es-home .hp-find input:focus{background:rgba(255,255,255,.22) !important;border-color:#E8853B !important;outline:none}
body.es-home .ws-c{box-shadow:0 10px 26px rgba(10,25,45,.22)}
.sp-foot{display:flex;flex-direction:column;gap:16px;margin-top:22px;grid-column:1/-1}
.sp-plan{margin:0 0 12px;font-weight:700;color:#1C3A5C}
.sp-contact{display:flex;gap:10px;flex-wrap:wrap}
#spPlans .pricing-panel{box-shadow:none;border:0;padding:0;background:transparent}
body.es-home .hp > .ws{margin:0 0 22px}
#headChooser{display:none !important}
.hp-school{color:#fff;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
body.es-home .hp-top h2{font-size:36px !important}
.at-digits{display:flex;gap:8px;align-items:center}.at-digits b{font-size:20px;letter-spacing:.06em;color:#1C3A5C}.at-digits input{flex:1}.at-prev{font-size:13px;color:#5A6573}
.ss-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}.ss-form select,.ss-form input{width:100%}.ss-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:6px}.ss-chip{display:inline-flex;align-items:center;gap:6px;background:#FBEBDC;color:#8A4A16;border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;font-weight:600}.ss-chip button{border:0;background:transparent;color:#B93A1E;font:inherit;font-size:12px;cursor:pointer;padding:2px 8px;border-radius:999px}.ss-chip button:hover{background:#fde8e0}.ss-act{display:flex;gap:10px;margin-top:16px}
.hp-schoolname{color:#F2A266;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:20px;margin:6px 0 8px}
body.es-home .hp-top h2{text-transform:uppercase;font-weight:800 !important;font-size:32px !important;letter-spacing:.03em}
body.es-home .hp-top p{font-weight:700 !important}
/* selected section: blue for Primary, warm yellow for Nursery */
body.modnav #content .ws-c.ws-primary.on{border-color:#1C3A5C !important;background:linear-gradient(135deg,#EAF1F7,#DCE8F2) !important;box-shadow:0 10px 26px rgba(28,58,92,.28) !important}
body.modnav #content .ws-c.ws-primary.on b,body.modnav #content .ws-c.ws-primary.on em{color:#1C3A5C}
body.modnav #content .ws-c.ws-nursery.on{border-color:#E8853B !important;background:#FFF6EC !important}
.hp-schoolname{font-size:28px !important}
/* the Eduscape wordmark: Edu in white, scape in orange, then the name in spaced capitals, as on the logo */
body.modnav #modbar .cp-brand b{font-size:21px !important;font-weight:800;letter-spacing:.01em;color:#fff !important}
body.modnav #modbar .cp-brand b i{font-style:normal;color:#E8853B}
body.modnav #modbar .cp-brand span{font-size:11px !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F2A266 !important;max-width:260px}
/* Working in: Primary is blue, Nursery is warm orange when selected */
body.modnav .cp-ws button[onclick*="primary"].on{background:#1C3A5C !important;color:#fff !important;border-color:#1C3A5C !important}
body.modnav .cp-ws button[onclick*="nursery"].on{background:#E8853B !important;color:#fff !important;border-color:#E8853B !important}
body.modnav #content.no-anim,body.modnav #content.no-anim *{animation:none !important}
/* the Eduscape Assistant button: small, so it never covers Log out */
#asstFab{height:34px !important;min-height:0 !important;padding:4px 12px 4px 5px !important;gap:6px !important;bottom:12px !important;right:12px !important;font-size:12px !important;box-shadow:0 4px 12px rgba(28,58,92,.25) !important}
#asstFab .dot{width:24px !important;height:24px !important;min-width:24px;font-size:13px !important;line-height:24px}
#asstFab .lbl{font-size:12px !important;font-weight:700 !important;letter-spacing:0}
#asstFab .badge-new{width:8px !important;height:8px !important;top:-2px !important;right:-2px !important}
#asstBubble{bottom:54px !important;right:12px !important;font-size:12.5px !important;max-width:240px}
body.modnav #modfoot{padding-bottom:64px !important}
