/* O-levels Malta, public site. Exam paper white, navy exam ink, a red marking pen, the courses' teal for actions,
   Maltese limestone for photo bands. Sora for everything; Caveat only for handwriting and the red pen. */
:root{
  --paper:#fafaf7; --card:#ffffff; --ink:#15233b; --mute:#5b6577; --line:rgba(21,35,59,.12);
  --red:#c9322b; --teal:#1f5f5b; --teal-ink:#ffffff; --sand:#ece2cc; --sand-ink:#3b3222; --navy:#15233b; --navy-ink:#eef1f6;
  --good:#1d7a52; --goodbg:#def2e7; --badbg:#fbe3e1; --shadow:0 1px 2px rgba(21,35,59,.06),0 8px 28px rgba(21,35,59,.08);
  --hand:"Caveat",cursive; --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif; --r:14px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0f1726; --card:#17223a; --ink:#e8ecf3; --mute:#9aa6b8; --line:rgba(232,236,243,.14);
  --red:#ef6a5f; --teal:#6fb5ad; --teal-ink:#0f1726; --sand:#1b2638; --sand-ink:#e8ecf3; --navy:#0a101c; --navy-ink:#e8ecf3;
  --good:#7fd1a9; --goodbg:rgba(127,209,169,.14); --badbg:rgba(239,106,95,.16); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--teal);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:12px;z-index:100;background:var(--card);padding:8px 12px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead,.hero .split-text>p:first-of-type{font-size:1.18rem;color:var(--mute);max-width:34em}
strong{font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--teal-ink);font:600 15px/1 var(--sans);padding:12px 18px;border-radius:999px;text-decoration:none;border:1.5px solid var(--teal);white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.big{font-size:16px;padding:15px 22px}
.btn.small{font-size:14px;padding:9px 14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:1.4em 0 0}
.actions .btn+.btn{background:transparent;color:var(--teal)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:18px}
.logo-mark{width:26px;height:26px;flex:none}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;padding:8px 11px;border-radius:999px}
.nav a:hover{background:var(--line)}
.nav a[aria-current]{color:var(--red)}
.acct{display:flex;align-items:center;gap:14px}
.login{color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-content:center;gap:5px;border-radius:10px}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:22px;height:2.4px;background:var(--ink);border-radius:2px}
.menu-panel{position:absolute;right:12px;left:12px;top:64px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column}
.menu-panel a{padding:13px 14px;color:var(--ink);text-decoration:none;font-weight:600;border-radius:10px}
.menu-panel a[aria-current]{color:var(--red)}
.menu-panel .btn{justify-content:center;margin-top:8px;color:var(--teal-ink)}
@media (max-width:900px){.nav,.acct{display:none}.menu{display:block}}

/* bands: each page is a stack of these */
.band{padding:76px 0}
.band.plain+.band.plain{padding-top:0}
.band.sand{background:var(--sand);color:var(--sand-ink)}
.band.ink{background:#22365a;color:var(--navy-ink)}
@media (prefers-color-scheme:dark){.band.ink{background:#1a2740}}
.band.ink a:not(.btn){color:#9fd5cd}
.band.ink .btn{background:#fff;color:var(--navy);border-color:#fff}
.band.ink .btn.ghost,.band.ink .actions .btn+.btn{background:transparent;color:#fff}
.band .wrap>p,.band .wrap>ul,.band .wrap>ol:not(.steps),.band .wrap>h2,.band .wrap>h3{max-width:40rem}
@media (max-width:640px){.band{padding:52px 0}}

/* hero and split */
.hero,.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.reverse .split-text{order:2}
.hero{padding:20px 0 8px}
.hero h1{margin-bottom:.35em}
.split-text>*:last-child{margin-bottom:0}
@media (max-width:860px){.hero,.split{grid-template-columns:1fr;gap:36px}.split.reverse .split-text{order:0}}
.home .band:first-child{padding-top:56px}

/* the exam countdown strip */
.nextexam{display:inline-block;margin:22px 0 0;font-size:15px;line-height:1.45;color:var(--ink);padding:9px 14px;border-radius:12px;background:var(--badbg)}
.nextexam b{font-size:15px;color:var(--red);font-weight:800}
.days:empty::before{content:"…"}
.ccard-exam .days,.chero-exam .days{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--badbg);color:var(--red);font-weight:700;font-size:13px}

/* the marked answer */
.paper{position:relative;margin:0;background:#fffdf8;color:#15233b;border-radius:6px;box-shadow:var(--shadow),0 0 0 1px rgba(21,35,59,.06);transform:rotate(-1.2deg);padding:22px 22px 18px 58px;max-width:520px;justify-self:end}
.paper::before{content:"";position:absolute;left:42px;top:0;bottom:0;width:2px;background:rgba(201,50,43,.45)}
.paper-q{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:start;margin-bottom:10px;padding-right:56px}
.paper-course{grid-column:1/-1;font-size:12px;font-weight:600;color:#5b6577}
.paper-q p{margin:0;font-weight:600;font-size:15.5px;line-height:1.4}
.paper-marks{font-weight:700;font-size:14px;color:#5b6577}
.paper-lines{background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,rgba(36,74,140,.18) 37px,rgba(36,74,140,.18) 38px);padding-top:2px}
.hand{font-family:var(--hand);font-weight:500;font-size:23px;line-height:38px;margin:0;color:#23408e;position:relative}
.tick{font-family:var(--hand);font-weight:700;color:#c9322b;font-size:30px;margin-left:8px;display:inline-block;opacity:0;transform:scale(1.8) rotate(-8deg);transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.pen-note{font-family:var(--hand);font-weight:700;color:#c9322b;font-size:22px;margin-left:10px;white-space:nowrap;opacity:0;transition:opacity .4s 1.35s}
.paper-score{position:absolute;top:-18px;right:-14px}
.score-ring{display:grid;place-items:center;width:76px;height:76px;border:3px solid #c9322b;border-radius:50% 46% 52% 48%;color:#c9322b;font-family:var(--hand);background:#fffdf8;transform:rotate(-8deg) scale(.4);opacity:0;transition:transform .45s cubic-bezier(.2,1.6,.4,1) 1.1s,opacity .2s 1.1s;line-height:.9}
.score-ring b{font-size:34px;font-weight:700}.score-ring small{font-size:20px;font-weight:700;margin-top:-8px}
.paper.marked .tick,.paper.marked .score-ring{opacity:1;transform:none}
.paper.marked .score-ring{transform:rotate(-8deg)}
.paper.marked .pen-note{opacity:1}
.paper.marked .t1{transition-delay:.15s}.paper.marked .t2{transition-delay:.45s}.paper.marked .t3{transition-delay:.75s}
.paper-feedback{position:relative;z-index:1;margin:16px -6px 0 -36px;background:#f1f4f8;border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.5;color:#15233b}
.paper-feedback p{margin:4px 0 0}
.fb-when{display:inline-block;font-size:12.5px;font-weight:700;color:#1d7a52}
@media (max-width:860px){.paper{justify-self:center;transform:rotate(-.8deg)}}
@media (max-width:420px){.paper{padding-left:44px}.paper::before{left:32px}.hand{font-size:20.5px}.paper-feedback{margin-left:-24px}.pen-note{display:block;margin-left:0;line-height:28px}}
@media (prefers-reduced-motion:reduce){.tick,.score-ring,.pen-note{transition:none}}

/* the grade ladder */
.ladder{margin:22px 0 26px;background:var(--card);color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;max-width:760px;container-type:inline-size}
.lad-head,.lad-levels,.lad-row{display:grid;grid-template-columns:10.5rem 1fr 9.5rem;gap:14px;align-items:center}
.lad-row{padding:10px 0;border-top:1px solid var(--line)}
.lad-name{font-weight:700;font-size:14.5px}
.lad-note{font-size:13.5px;color:var(--mute)}
.lad-track{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.lad-grades .g{text-align:center;font-weight:700;font-size:13px;color:var(--mute)}
.lad-levels em{font-style:normal;font-size:12px;font-weight:700;text-align:center;padding:4px 0;border-radius:6px}
.lad-levels .lv3{grid-column:1/6;background:var(--goodbg);color:var(--good)}
.lad-levels .lv2{grid-column:6/8;background:var(--line);color:var(--ink)}
.lad-levels .lv1{grid-column:8/9;background:var(--line);color:var(--mute)}
.lad-row i{height:18px;border-radius:5px;background:var(--line)}
.lad-row i.on{background:var(--teal)}
.lad-row.bad i.on{background:var(--red)}
.lad-row.bad .lad-note{color:var(--red);font-weight:700}
.lad-row.good .lad-note{color:var(--good);font-weight:700}
.ladder figcaption{margin-top:14px;font-size:13.5px;color:var(--mute)}
@container (max-width:560px){.lv-word{display:none}.lad-head,.lad-levels,.lad-row{grid-template-columns:1fr}.lad-head .lad-name,.lad-head .lad-note,.lad-levels .lad-name,.lad-levels .lad-note{display:none}.lad-row{gap:6px}}

/* the exam timeline */
.timeline{margin:0}
.tl-bar{position:relative;height:30px;border-bottom:2px solid currentColor;opacity:.9}
.tl-month{position:absolute;bottom:6px;font-size:12px;font-weight:700;color:var(--mute);transform:translateX(2px)}
.tl-list{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;padding-top:22px}
.tl-list li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.tl-list li .tl-dot{position:absolute;top:-7px;left:var(--x);width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.tl-list li.ours .tl-dot{background:var(--ink)}
.tl-date{font-weight:700;min-width:4.2em;color:var(--mute);font-size:14px}
.tl-list li.ours .tl-date{color:var(--red)}
.tl-list li.other{color:var(--mute)}
.tl-list a{font-weight:700;color:inherit}
.timeline figcaption{margin-top:16px;font-size:13.5px;color:var(--mute)}
@media (max-width:760px){.tl-list{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.tl-list{grid-template-columns:1fr}}

/* the sample dashboard */
.dash{margin:0;background:var(--card);color:var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:20px;max-width:440px;justify-self:center;width:100%}
.dash-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.dash-top b{font-size:18px}.dash-top span{font-size:13px;color:var(--mute)}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.dash-stats div{background:var(--paper);border-radius:10px;padding:10px}
.dash-stats b{display:block;font-size:16px}.dash-stats span{font-size:12px;color:var(--mute)}
.dash-bars{display:flex;align-items:flex-end;gap:4px;height:70px;margin-bottom:14px}
.dash-bars i{flex:1;background:var(--teal);opacity:.55;border-radius:4px 4px 0 0}
.dash-bars i.now{opacity:1}
.dash-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.pill{font-weight:700;font-size:12.5px;padding:3px 10px;border-radius:999px}
.pill.ok{background:var(--goodbg);color:var(--good)}.pill.low{background:var(--badbg);color:var(--red)}
.dash figcaption{margin-top:10px;font-size:12.5px;color:var(--mute)}

/* course cards */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
@media (max-width:980px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ccards{grid-template-columns:1fr}}
.ccard{background:var(--card);color:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ccard-link{display:block}
.ph{aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-maths{background:#fffdf8;color:#15233b}
.ph-maths svg{width:100%;height:100%;display:block}
.ccard-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.ccard h3{font-size:1.25rem;margin:0 0 .3em}
.ccard h3 a{color:inherit;text-decoration:none}
.ccard-line{color:var(--mute);font-size:15px}
.ccard-exam{font-size:14px;font-weight:600;margin:0 0 4px}
.ccard-actions{display:flex;gap:8px;flex-wrap:wrap;margin:auto 0 0;padding-top:14px}
.ccard-actions .btn{font-size:14px;padding:10px 14px}

/* course page header */
.chero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto;padding:48px 20px 28px}
.chero-code{font-weight:700;color:var(--red);margin:0 0 .4em}
.chero-exam{font-weight:600}
.chero-ph{border-radius:var(--r);box-shadow:var(--shadow)}
@media (max-width:860px){.chero{grid-template-columns:1fr;gap:28px;padding-top:28px}.chero-ph{order:-1}}
.facts{max-width:1120px;margin:0 auto 12px;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.facts div{border-top:3px solid var(--ink);padding-top:10px}
.facts b{display:block;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.facts span{color:var(--mute);font-size:14.5px}

/* steps: a real sequence, so they are numbered, in red pen */
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps li{display:flex;gap:14px}
.st-n{font-family:var(--hand);font-weight:700;color:var(--red);font-size:54px;line-height:.8;flex:none;width:30px}
.steps h3{margin-bottom:.3em}.steps p{margin:0;color:var(--mute);font-size:15.5px}
.band.sand .steps p,.band.sand .ccard-line{color:inherit;opacity:.8}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:22px}}

/* small cards from :::cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 8px}
.card{border-top:3px solid currentColor;padding-top:14px}
.card h3{margin-bottom:.35em}.card p{font-size:15.5px;margin-bottom:.6em}
.card>*:last-child{margin-bottom:0}
@media (max-width:860px){.cards{grid-template-columns:1fr;gap:18px}}

/* price */
.price{background:var(--card);color:var(--ink);border-radius:20px;box-shadow:var(--shadow);padding:30px;max-width:440px}
.price-amount{font-size:4.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0}
.price-what{color:var(--mute);margin:.2em 0 1em}
.price ul{list-style:none;padding:0;margin:0}
.price li{padding:9px 0 9px 28px;border-top:1px solid var(--line);position:relative;font-size:15.5px}
.price li::before{content:"✓";position:absolute;left:2px;color:var(--red);font-family:var(--hand);font-size:22px;font-weight:700;top:4px}

/* fold-out rows */
.fold{border-top:1px solid var(--line);max-width:46rem}
.fold:last-of-type{border-bottom:1px solid var(--line)}
.fold summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;font-weight:700;position:relative}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";position:absolute;right:6px;top:10px;font-size:26px;font-weight:400;color:var(--red);transition:transform .2s}
.fold[open] summary::after{transform:rotate(45deg)}
.fold-body{padding:0 0 18px;color:var(--mute)}
.fold-body>*:last-child{margin-bottom:0}
.fold-body strong{color:var(--ink)}
.band.ink .fold-body,.band.sand .fold-body{color:inherit;opacity:.85}
.note{border-left:3px solid var(--red);padding:4px 0 4px 16px;margin:1.6em 0;max-width:40rem;color:var(--mute)}
.note>*:last-child{margin-bottom:0}

/* tables: cards on a phone */
.table-wrap{overflow-x:auto;margin:1.2em 0 1.6em;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;color:var(--mute);font-weight:700}
tr:last-child td{border-bottom:0}
@media (max-width:640px){.table-wrap{background:none;box-shadow:none;border-radius:0}table,thead,tbody,tr,td{display:block}thead{display:none}tr{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin:0 0 12px;padding:6px 0}td{border:0;padding:6px 14px}td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--mute)}td:first-child::before{display:none}td:first-child{font-size:16px;padding-top:10px}}

/* lists and prose */
ul,ol{padding-left:1.2em}
li{margin:.3em 0}
.legal{max-width:44rem}
.legal h1{font-size:clamp(2rem,4vw,2.8rem)}
.legal h2{font-size:1.3rem;margin-top:1.8em}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.credits{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.credits li{display:flex;gap:12px;align-items:center;font-size:14px}
.credits img{width:90px;height:60px;object-fit:cover;border-radius:6px;flex:none}
.credits small{color:var(--mute)}

/* footer */
.foot{background:var(--navy);color:var(--navy-ink);padding:52px 0 26px;font-size:14.5px;border-top:4px solid var(--red)}
.foot .logo{color:var(--navy-ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-grid p{opacity:.75;margin-top:12px;max-width:22rem}
.foot-links{display:flex;flex-direction:column;gap:9px}
.foot-links a{color:var(--navy-ink);opacity:.85;text-decoration:none}
.foot-links a:hover{opacity:1;text-decoration:underline}
.foot-base{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);opacity:.65;font-size:13px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.split-side .ph,.hero .ph{border-radius:var(--r);box-shadow:var(--shadow)}
.split-side{min-width:0}