/* ==========================================================================
   Tahmeed Hussain · Maths and science tuition · Upton Park
   One stylesheet for the whole site. No frameworks, no build step.
   Palette: white, black and gold. Edit the tokens below and nowhere else.
   ========================================================================== */

:root{
  /* light */
  --paper:#FFFFFF;
  --surface:#FAF9F6;
  --surface-2:#F4F2EC;
  --ink:#0B0B0C;
  --ink-2:#55555B;
  --ink-3:#8A8A90;
  --rule:#E7E4DC;
  --rule-2:#CBC7BB;
  --gold:#8A6B1F;          /* dark enough for text on white */
  --gold-bright:#C6A02E;   /* rules, fills, large type only */
  --gold-tint:#FAF4E4;
  --panel:#0B0B0C;         /* the black panels */
  --on-panel:#F7F5EF;
  --on-gold:#14120B;
  --focus:#8A6B1F;
  --green:#2C6B4B;
  --green-bright:#3E8F66;
  --green-tint:#EDF5F0;
  --blue:#2A5480;
  --blue-bright:#3D74AC;
  --blue-tint:#EDF2F8;
  --shadow:0 1px 2px rgba(11,11,12,.05), 0 14px 34px -26px rgba(11,11,12,.45);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0B0C;
    --surface:#131315;
    --surface-2:#1A191C;
    --ink:#F3F1EB;
    --ink-2:#A9A7A0;
    --ink-3:#85837C;
    --rule:#26252A;
    --rule-2:#3B3A40;
    --gold:#D9B658;
    --gold-bright:#E8CC77;
    --gold-tint:#1D1910;
    --panel:#17161A;
    --on-panel:#F3F1EB;
    --on-gold:#14120B;
    --focus:#D9B658;
  --green:#8CCCA6;
  --green-bright:#A9DCC0;
  --green-tint:#0F1D17;
  --blue:#8FB8E0;
  --blue-bright:#A9CBEC;
  --blue-tint:#0E1926;
    --green:#8CCCA6;
    --green-bright:#A9DCC0;
    --green-tint:#0F1D17;
    --blue:#8FB8E0;
    --blue-bright:#A9CBEC;
    --blue-tint:#0E1926;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -28px rgba(0,0,0,.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0B0C;
  --surface:#131315;
  --surface-2:#1A191C;
  --ink:#F3F1EB;
  --ink-2:#A9A7A0;
  --ink-3:#85837C;
  --rule:#26252A;
  --rule-2:#3B3A40;
  --gold:#D9B658;
  --gold-bright:#E8CC77;
  --gold-tint:#1D1910;
  --panel:#17161A;
  --on-panel:#F3F1EB;
  --on-gold:#14120B;
  --focus:#D9B658;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -28px rgba(0,0,0,.95);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--gold)}
main a:not(.btn):hover{text-decoration-thickness:2px}
.cta a:not(.btn),.guarantee a:not(.btn){text-decoration-color:var(--gold-bright)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--surface);border:1px solid var(--rule-2);padding:8px 12px;border-radius:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:660px;margin:0 auto;padding:0 22px}
.band{padding:58px 0}
.band--tight{padding:36px 0}
.band--tint{background:var(--surface-2)}
.band--paper{background:var(--surface)}
.band + .band{border-top:1px solid var(--rule)}

/* ---------- type ---------- */
h1,h2,h3,.ui,.eyebrow,.btn,nav,th,.stat{font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
h1{
  font-size:clamp(1.95rem,6.2vw,2.9rem);
  line-height:1.07;letter-spacing:-.022em;font-weight:800;
  margin:14px 0 0;text-wrap:balance;
}
h2{
  font-size:clamp(1.45rem,4.4vw,1.95rem);
  line-height:1.13;letter-spacing:-.016em;font-weight:800;
  margin:0 0 16px;text-wrap:balance;
}
h3{font-size:1.06rem;line-height:1.3;font-weight:700;letter-spacing:-.005em;margin:30px 0 8px}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
strong{font-weight:600}
.lede{font-size:1.115rem;line-height:1.55}
.small{font-size:.92rem;color:var(--ink-2)}
.tiny{font-size:.82rem;line-height:1.55;color:var(--ink-3)}
.eyebrow{
  font-size:.688rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;
}
.eyebrow--gold{color:var(--gold)}
ul,ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
li::marker{color:var(--gold)}
hr.rule{border:0;border-top:1px solid var(--rule);margin:34px 0}

/* ---------- header ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--rule)}
@media (min-width:720px){.site-head{position:sticky;top:0;z-index:20}}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-top:13px;padding-bottom:13px}
.brand{font-family:"Libre Franklin",sans-serif;font-weight:800;font-size:.98rem;letter-spacing:-.01em;text-decoration:none}
.brand span{display:block;font-weight:500;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.site-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.8rem;font-weight:600}
.site-nav a{text-decoration:none;color:var(--ink-2);padding:3px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold-bright)}

/* ---------- hero ---------- */
.hero{padding:48px 0 50px}
.hero h1{margin-top:10px}
.hero .lede{margin-top:18px;color:var(--ink-2)}
.hero .lede strong{color:var(--ink)}
.portrait{margin:0 0 22px;max-width:200px}
.portrait img{border-radius:2px;border:1px solid var(--rule)}
.portrait.is-empty img{display:none}
.portrait.is-empty::before{
  content:"Photograph goes here, as assets/tahmeed.jpg. Not a passport shot. You mid-sentence at a whiteboard covered in working.";
  display:block;padding:26px 16px;border:1px dashed var(--rule-2);border-radius:2px;
  font-family:"Libre Franklin",sans-serif;font-size:.72rem;line-height:1.5;color:var(--ink-3);
  background:var(--surface-2);
}

/* ---------- call to action ---------- */
.cta{
  background:var(--panel);color:var(--on-panel);border:1px solid var(--gold);
  border-radius:2px;padding:26px 24px;margin:28px 0;box-shadow:var(--shadow);
}
.cta .eyebrow{color:var(--gold-bright)}
.cta-head{
  font-family:"Libre Franklin",sans-serif;font-weight:800;
  font-size:clamp(1.3rem,4.6vw,1.7rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;
}
.cta p{color:inherit;opacity:.9;font-size:.95rem;margin-bottom:0}
.cta p + p{margin-top:8px}
.cta strong{opacity:1;color:var(--gold-bright);font-weight:600}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.01em;
  padding:12px 20px;border-radius:2px;border:1px solid transparent;
}
.btn--solid{background:var(--gold-bright);color:var(--on-gold)}
.btn--solid:hover{filter:brightness(1.07)}
.btn--ghost{border-color:currentColor;color:inherit;opacity:.85}
.btn--ghost:hover{opacity:1}
.btn--plain{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.btn--plain:hover{background:var(--surface-2)}

/* ---------- proof strip ---------- */
.proof{
  font-family:"Libre Franklin",sans-serif;font-size:.75rem;line-height:1.75;color:var(--ink-2);
  border-top:1px solid var(--rule);padding-top:15px;margin-top:26px;
}
.proof b{font-weight:600;color:var(--ink)}

/* ---------- the guarantee: an issued certificate ---------- */
.guarantee{
  position:relative;background:var(--surface);color:var(--ink);
  border:1px solid var(--gold);border-radius:2px;
  padding:0;margin:0;box-shadow:var(--shadow);
}
.guarantee::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--gold-bright);
  opacity:.45;pointer-events:none;
}
.g-inner{position:relative;padding:32px 26px 26px}
.g-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:5px 16px;border-bottom:1px solid var(--rule-2);padding-bottom:13px;margin-bottom:28px;
}
.g-issuer,.g-no{
  font-family:"Libre Franklin",sans-serif;font-size:.6rem;font-weight:700;
  text-transform:uppercase;margin:0;line-height:1.6;
}
.g-issuer{letter-spacing:.24em;color:var(--ink-3)}
.g-no{letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums}
.g-title{
  font-family:"Libre Franklin",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.55rem,6.1vw,2.35rem);line-height:1.02;letter-spacing:.02em;
  color:var(--ink);margin:0 0 22px;text-wrap:balance;
}
.guarantee .big{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;
  font-size:clamp(1.18rem,4vw,1.5rem);line-height:1.44;letter-spacing:-.003em;
  color:var(--ink);margin:0 0 22px;text-wrap:pretty;
}
.guarantee .fine{
  border-top:1px solid var(--rule);padding-top:17px;margin:0 0 30px;
  font-size:.93rem;line-height:1.6;color:var(--ink-2);
}
.guarantee .fine strong{color:var(--gold);font-weight:600}
.g-mark{
  background:var(--gold-tint);color:var(--gold);font-weight:700;
  padding:.05em .3em;border-bottom:2px solid var(--gold-bright);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.sec-label{
  font-family:"Libre Franklin",sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  text-align:center;margin:0 0 36px;
}
.sec-label::after{
  content:"";display:block;width:34px;height:1px;background:var(--gold-bright);margin:15px auto 0;
}
.g-foot{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:flex-end}
.g-cell{flex:1 1 170px;min-width:150px}
.g-line{border-bottom:1px solid var(--ink-2);padding-bottom:7px;margin-bottom:8px}
.g-sig{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:1.34rem;line-height:1.15;color:var(--ink)}
.g-val{font-family:"Libre Franklin",sans-serif;font-size:.88rem;font-weight:600;line-height:1.4;color:var(--ink)}
.g-cap{
  font-family:"Libre Franklin",sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin:0;
}
@media (max-width:640px){.g-inner{padding:26px 18px 22px}}

/* ---------- my grades: the record ---------- */
.grades{
  background:transparent;color:inherit;border-radius:0;box-shadow:none;overflow:visible;
  border-top:3px double var(--gold-bright);
  border-bottom:3px double var(--gold-bright);
  border-left:0;border-right:0;
  padding:46px 8px 40px;margin:38px 0;text-align:center;
}
.grades .eyebrow{
  color:var(--gold);font-size:.63rem;letter-spacing:.36em;font-weight:600;margin:0 0 26px;
}
.tiles{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:0;margin:0 0 18px;padding:0;list-style:none;
}
.tiles span{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-weight:600;font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(1.62rem,6.6vw,2.6rem);line-height:1.05;
  color:var(--gold);background:none;border:0;border-radius:0;box-shadow:none;
  padding:0 .30em;min-width:0;
}
.tiles--lg span{font-size:clamp(1.85rem,7.2vw,3rem);padding:0 .38em}
.grades .caption{
  font-family:"Libre Franklin",sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.21em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.8;margin:0 0 40px;
}
.grades .caption:last-child{margin-bottom:0}
.degree{
  display:block;max-width:27em;margin:0 auto;padding:30px 12px 0;
  border-top:1px solid var(--rule-2);background:none;color:inherit;
  border-radius:0;box-shadow:none;text-align:center;
}
.degree .deyebrow{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.61rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);opacity:1;margin:0 0 13px;
}
.degree strong{
  display:block;font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:clamp(1.3rem,4.5vw,1.78rem);line-height:1.22;letter-spacing:-.004em;
  color:var(--ink);margin:0 0 12px;
}
.degree .dsub{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.85;color:var(--ink-3);opacity:1;
}

/* ---------- three students ---------- */
.students{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.students > li{padding:22px 0;border-bottom:1px solid var(--rule)}
.students > li:first-child{border-top:1px solid var(--rule)}
.students .who{
  font-family:"Libre Franklin",sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.008em;
  margin:0 0 3px;
}
.students .when{
  font-family:"Libre Franklin",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.students p:last-child{margin-bottom:0}

/* ---------- questions ---------- */
.qa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.qa > li{border-top:1px solid var(--rule);padding:22px 0}
.qa > li:last-child{border-bottom:1px solid var(--rule)}
.qa .q{
  font-family:"Libre Franklin",sans-serif;font-weight:700;font-size:1.02rem;line-height:1.32;
  letter-spacing:-.008em;margin:0 0 8px;display:flex;gap:12px;
}
.qa .q .n{color:var(--gold);flex:0 0 auto;font-variant-numeric:tabular-nums}
.qa .a{margin:0;padding-left:30px}
.qa .a p{margin-bottom:10px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:2px;background:var(--surface);margin:0 0 12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
table td:first-child,table th:first-child{min-width:9.5em}
thead th{
  font-family:"Libre Franklin",sans-serif;font-size:.67rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;text-align:left;padding:12px 15px;
  background:var(--panel);color:var(--on-panel);
}
tbody td{padding:12px 15px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
tbody tr:last-child td{border-bottom:0}
td.money,th.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:"Libre Franklin",sans-serif;font-weight:600}
tr.mine td{background:var(--gold-tint);font-weight:600}
.subhead{
  font-family:"Libre Franklin",sans-serif;font-weight:600;
  font-size:clamp(1.02rem,3.3vw,1.22rem);line-height:1.3;letter-spacing:-.012em;
  color:var(--ink-2);margin:-8px 0 20px;text-wrap:balance;
}
tr.masjid td{
  background:var(--gold-tint);font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--rule-2);
}
tr.masjid td:first-child{border-left:3px double var(--gold-bright)}
tr.masjid td.money{color:var(--gold);font-size:1.08rem}
tr.masjid .flag{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.61rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;
}
tr.premium td{
  background:var(--gold-bright);color:var(--on-gold);font-weight:700;
  border-bottom:1px solid var(--gold);
}
tr.premium td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
tr.premium td.money{font-size:1.08rem}
tr.premium .flag{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.63rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;opacity:.62;margin-bottom:2px;
}
.tnote{font-size:.8rem;line-height:1.55;color:var(--ink-3);margin:0 0 18px}

/* ---------- her words: what goes wrong ---------- */
.complaints{counter-reset:c;list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:0}
.complaints li{counter-increment:c;position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--rule);font-size:1rem}
.complaints li:first-child{border-top:1px solid var(--rule)}
.complaints li::before{
  content:counter(c);position:absolute;left:0;top:12px;
  font-family:"Libre Franklin",sans-serif;font-weight:800;font-size:.9rem;color:var(--gold);
}
.answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.answers h3{margin:0 0 6px;display:flex;gap:10px}
.answers h3 .n{color:var(--gold);font-variant-numeric:tabular-nums;flex:0 0 auto}
.answers p{margin:0 0 8px;padding-left:26px}

/* ---------- the three gates ---------- */
.gates{border-left:3px solid var(--gold-bright);padding:8px 0 8px 22px;margin:26px 0}
.gates .big{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.016em;
  font-size:clamp(1.15rem,3.9vw,1.45rem);line-height:1.24;margin:0 0 12px;text-wrap:balance;
}

/* ---------- the named routes ---------- */
.routes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.routes > li{padding:22px 0;border-bottom:1px solid var(--rule)}
.routes > li:first-child{border-top:1px solid var(--rule)}
.routes .who{font-family:"Libre Franklin",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 4px}
.routes .rname{font-family:"Libre Franklin",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.012em;margin:0 0 6px}

/* ---------- the named free thing ---------- */
.report{
  border:1px solid var(--rule-2);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  border-radius:2px;background:var(--surface);padding:26px 24px;margin:26px 0;
}
.report .name{font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.75rem;margin:0 0 14px;color:var(--gold)}
.report .promise{font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.016em;font-size:clamp(1.15rem,3.9vw,1.45rem);line-height:1.2;margin:0 0 12px;text-wrap:balance}
.report .anchor{border-top:1px solid var(--rule);margin-top:16px;padding-top:14px;font-size:.92rem}

/* ---------- the flagship offer ---------- */
.flagship{
  border:1px solid var(--gold);border-top:5px solid var(--gold-bright);border-radius:2px;
  background-color:var(--gold-tint);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2758%27%20height%3D%2758%27%20viewBox%3D%270%200%2058%2058%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238A6B1F%27%20stroke-width%3D%270.8%27%20opacity%3D%270.13%27%3E%3Crect%20x%3D%2713%27%20y%3D%2713%27%20width%3D%2732%27%20height%3D%2732%27%2F%3E%3Crect%20x%3D%2713%27%20y%3D%2713%27%20width%3D%2732%27%20height%3D%2732%27%20transform%3D%27rotate%2845%2029%2029%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:58px 58px;background-position:center top;
  padding:28px 24px;margin:0 0 24px;box-shadow:var(--shadow);
}
.flagship > *{position:relative}
.flagship .eyebrow{color:var(--gold)}
.oname{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.021em;
  font-size:clamp(1.5rem,5vw,2.05rem);line-height:1.08;margin:0 0 2px;text-wrap:balance;
}
.price{
  font-family:"Libre Franklin",sans-serif;font-weight:800;color:var(--gold);
  font-size:clamp(1.55rem,5.2vw,2.15rem);line-height:1.1;margin:0 0 14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.price span{font-size:.46em;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.addon{
  border:1px solid var(--rule-2);border-left:4px solid var(--gold-bright);border-radius:2px;
  background:var(--paper);padding:18px 20px;margin:18px 0 0;
}
.addon .oname{font-size:clamp(1.08rem,3.5vw,1.28rem);margin-bottom:6px}

/* ---------- what a package contains ---------- */
.subjects{
  list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;
  gap:9px;margin:0 0 20px;padding:0;
}
.subjects li{
  display:flex;align-items:center;gap:10px;flex:0 1 184px;min-width:0;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:2px;
  padding:9px 12px;
}
.subjects li::marker{content:none}
.subjects .n{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:"Libre Franklin",sans-serif;font-size:.67rem;font-weight:800;line-height:1;
  background:var(--gold-bright);color:var(--on-gold);
}
.subjects .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.subjects .s{
  font-family:"Libre Franklin",sans-serif;font-weight:700;font-size:.85rem;
  line-height:1.22;letter-spacing:-.008em;color:var(--ink);
}
.subjects .hrs{
  font-family:"Libre Franklin",sans-serif;font-size:.55rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);line-height:1.3;
}
.subjects li.deen{border-color:var(--green-bright);background:var(--green-tint)}
.subjects li.deen .n{background:var(--green);color:var(--paper)}
.subjects li.deen .s{color:var(--green)}
.subjects li.eng{border-color:var(--blue-bright);background:var(--blue-tint)}
.subjects li.eng .n{background:var(--blue);color:var(--paper)}
.subjects li.eng .s{color:var(--blue)}

/* ---------- the specialist routes ---------- */
.route-card{
  position:relative;border:1px solid var(--rule-2);border-radius:2px;
  background:var(--paper);padding:28px 24px;margin:0 0 16px;
}
.rc-kicker{
  font-family:"Libre Franklin",sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:0 0 11px;line-height:1.7;
}
.rc-name{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.021em;
  font-size:clamp(1.3rem,4.5vw,1.78rem);line-height:1.08;margin:0 0 12px;
}
.rc-price{
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--gold);
  font-size:clamp(1.95rem,7.2vw,2.7rem);line-height:1;margin:0 0 15px;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.012em;
}
.rc-price span{
  font-family:"Libre Franklin",sans-serif;font-size:.3em;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  vertical-align:.62em;margin-left:.55em;
}
.rc-body{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-2)}

.rc-plain{border-top:3px double var(--gold-bright)}

.rc-science{
  border:1px solid var(--green-bright);border-left:4px solid var(--green);
  background-color:var(--green-tint);
  background-image:
    repeating-linear-gradient(0deg, rgba(62,143,102,.11) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(62,143,102,.11) 0 1px, transparent 1px 16px);
}
.rc-science .rc-kicker,.rc-science .rc-price{color:var(--green)}
.rc-science .rc-price span{color:var(--green);opacity:.7}
.rc-science .rc-name{color:var(--ink)}

.rc-dark{background:var(--panel);color:var(--on-panel);border:1px solid var(--gold);box-shadow:var(--shadow)}
.rc-dark .rc-kicker{color:var(--gold-bright)}
.rc-dark .rc-name{color:var(--on-panel)}
.rc-dark .rc-price{color:var(--gold-bright)}
.rc-dark .rc-price span{color:var(--on-panel);opacity:.55}
.rc-dark .rc-body{color:var(--on-panel);opacity:.78}

.rc-seat{
  background:var(--panel);color:var(--on-panel);
  border:1px solid var(--gold);
  border-top:4px solid var(--gold-bright);border-bottom:4px solid var(--gold-bright);
  padding:34px 26px 30px;box-shadow:var(--shadow);margin-bottom:0;
}
.rc-seat::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold);opacity:.38;pointer-events:none}
.rc-seat > *{position:relative}
.rc-seat .rc-kicker{color:var(--gold-bright)}
.rc-seat .rc-name{color:var(--on-panel);font-size:clamp(1.5rem,5.3vw,2.15rem)}
.rc-seat .rc-body{color:var(--on-panel);opacity:.78;margin-bottom:24px}
.seat-tiers{display:flex;flex-wrap:wrap;gap:12px}
.tier{
  flex:1 1 150px;border:1px solid rgba(198,160,46,.5);border-radius:2px;
  padding:19px 16px;text-align:center;
}
.tl{
  font-family:"Libre Franklin",sans-serif;font-size:.57rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--on-panel);opacity:.58;margin:0 0 10px;
}
.tf{
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--gold-bright);
  font-size:clamp(1.7rem,6.2vw,2.35rem);line-height:1;margin:0;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.012em;
}
.tier--top{background:var(--gold-bright);border-color:var(--gold-bright)}
.tier--top .tl{color:var(--on-gold);opacity:.66}
.tier--top .tf{color:var(--on-gold)}
.ts{
  font-family:"Libre Franklin",sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-gold);opacity:.72;margin:9px 0 0;
}

/* ---------- the year block ---------- */
.yearblock{
  border-top:3px double var(--gold-bright);
  border-bottom:3px double var(--gold-bright);
  background:transparent;padding:34px 6px 30px;margin:34px 0 0;text-align:center;
}
.yearblock .eyebrow{color:var(--gold);font-size:.62rem;letter-spacing:.33em;margin:0 0 15px}
.yb-name{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.021em;
  font-size:clamp(1.32rem,4.6vw,1.82rem);line-height:1.1;margin:0 0 26px;
}
.yb-price{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:16px 30px;margin:0 0 20px;padding:0;
}
.yb-price .was,.yb-price .now{display:flex;flex-direction:column;align-items:center}
.wl{
  font-family:"Libre Franklin",sans-serif;font-size:.57rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
}
.yb-price s{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(1.5rem,5.2vw,2.15rem);line-height:1;color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums;
  text-decoration-line:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--gold-bright);
}
.yb-price .fig{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;
  font-size:clamp(2.6rem,10.5vw,4rem);line-height:.92;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.012em;
}
.yb-lab{
  font-family:"Libre Franklin",sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);line-height:1.7;margin:0 0 26px;
}
.yearblock .body{max-width:31em;margin:0 auto;font-size:.98rem;color:var(--ink-2)}
.yearblock .body strong{color:var(--ink)}

/* ---------- included / cap box ---------- */
.cap{border:1px solid var(--rule-2);border-radius:2px;background:var(--surface);padding:22px 22px;margin:0 0 18px}
.cap .eyebrow{color:var(--gold)}
.cap ul{list-style:none;padding:0;margin:0 0 12px;gap:7px}
.cap li{padding-left:20px;position:relative;font-size:.96rem}
.cap li::before{content:"";position:absolute;left:2px;top:.64em;width:6px;height:6px;transform:rotate(45deg);background:var(--gold-bright)}

/* ---------- Brampton Manor ---------- */
.crest{
  display:block;width:132px;height:132px;margin:0 auto 18px;
  background:#fff;border:1px solid var(--rule-2);border-radius:4px;padding:8px;
}
.crest img{width:100%;height:auto;display:block}
.school-name{
  font-family:"Libre Franklin",sans-serif;font-weight:800;
  font-size:clamp(1.35rem,5vw,1.85rem);line-height:1.1;letter-spacing:-.018em;
  text-align:center;margin:0 0 6px;text-wrap:balance;
}
.school-sub{
  font-family:"Libre Franklin",sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  text-align:center;margin:0 0 10px;
}
.school-note{font-size:.82rem;line-height:1.55;color:var(--ink-3);text-align:center;margin:0 0 26px}

/* ---------- the WhatsApp call to action ---------- */
.btn--wa{
  background:var(--gold-bright);color:var(--on-gold);
  display:inline-flex;align-items:center;gap:10px;
  font-size:.98rem;padding:14px 22px;
}
.btn--wa svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.btn--wa:hover{filter:brightness(1.07)}

/* ---------- the ayah ---------- */
.ayah{
  border-top:1px solid var(--gold-bright);border-bottom:1px solid var(--gold-bright);
  padding:30px 0;margin:30px 0 0;text-align:center;
}
.ayah .verse{
  font-family:"Source Serif 4",Georgia,serif;font-style:italic;
  font-size:clamp(1.02rem,3.1vw,1.16rem);line-height:1.62;
  margin:0 auto 16px;max-width:34em;text-wrap:pretty;
}
.ayah .ref{
  font-family:"Libre Franklin",sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0;
}
.noloan{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.014em;
  font-size:clamp(1.1rem,3.7vw,1.35rem);line-height:1.25;margin:26px 0 0;text-align:center;
}

/* ---------- closing ---------- */
.closing{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.3rem,4.6vw,1.75rem);line-height:1.16;margin:0 0 16px;text-wrap:balance;
}

/* ---------- papers ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{
  font-family:"Libre Franklin",sans-serif;font-size:.78rem;font-weight:600;
  padding:7px 13px;border-radius:100px;border:1px solid var(--rule-2);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--panel);border-color:var(--panel);color:var(--on-panel)}
.topic{margin:0 0 26px}
.topic h3{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.paperlist{list-style:none;margin:0;padding:0;gap:0}
.paperlist li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)}
.paperlist .name{flex:1 1 200px;font-size:.96rem}
.paperlist .meta{font-family:"Libre Franklin",sans-serif;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.paperlist a{font-family:"Libre Franklin",sans-serif;font-size:.8rem;font-weight:700;color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- footer ---------- */
.site-foot{background:var(--surface);border-top:1px solid var(--rule);padding:36px 0 96px;font-size:.86rem;line-height:1.65;color:var(--ink-2)}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;font-family:"Libre Franklin",sans-serif;font-size:.8rem;font-weight:600}
.site-foot a{color:var(--ink)}
.site-foot p{margin-bottom:10px}

/* ---------- floating WhatsApp button ---------- */
.wa-float{
  position:fixed;right:18px;bottom:78px;z-index:40;
  display:block;width:66px;height:66px;border-radius:50%;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.22);
  transition:transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-float img{width:100%;height:100%;border-radius:50%;display:block}
.wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px -8px rgba(0,0,0,.5)}
.wa-float:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.wa-float .wa-tip{
  position:absolute;right:78px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--panel);color:var(--on-panel);
  font-family:"Libre Franklin",sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:-.005em;padding:9px 13px;border-radius:3px;border:1px solid var(--gold);
  opacity:0;pointer-events:none;transition:opacity .16s ease;
}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{opacity:1}
@media (min-width:720px){.wa-float{bottom:26px;right:24px;width:74px;height:74px}}
@media (max-width:400px){.wa-float{width:58px;height:58px;right:14px;bottom:70px}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* ---------- sticky phone bar, small screens only ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--gold-bright);color:var(--on-gold);text-decoration:none;
  font-family:"Libre Franklin",sans-serif;font-weight:700;font-size:.88rem;
  padding:13px 16px;text-align:center;box-shadow:0 -6px 22px -14px rgba(0,0,0,.6);
}
.stickybar span{opacity:.72;font-weight:500}
@media (min-width:720px){.stickybar{display:none}.site-foot{padding-bottom:48px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:640px){
  .band{padding:44px 0}
  .hero{padding:36px 0 40px}
  .cta,.guarantee,.report{padding:20px 18px}
}

/* ---------- print: /questions is meant to be handed out ---------- */
@media print{
  :root{--paper:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--ink-2:#333;--ink-3:#555;--rule:#bbb;--rule-2:#888;--gold:#000;--gold-bright:#000;--gold-tint:#fff;--panel:#fff;--on-panel:#000;--on-gold:#000}
  .site-head,.site-foot,.stickybar,.wa-float,.no-print,.cta .btnrow{display:none!important}
  body{font-size:11.5pt;background:#fff}
  .wrap{max-width:none;padding:0}
  .band{padding:0 0 14pt;border:0}
  .cta{background:#fff;color:#000;border:1.5pt solid #000;box-shadow:none;padding:12pt}
  .guarantee{border:1.5pt solid #000;background:#fff;color:#000;box-shadow:none}
  .guarantee strong,.cta strong{color:#000}
  .g-mark{background:#fff;color:#000;border-bottom:1.5pt solid #000}
  h1{font-size:20pt}
  h2{font-size:14pt}
  a{text-decoration:none}
  .qa > li{break-inside:avoid}
}

/* ==========================================================================
   THE QALAM CLASS — added 8 September 2026
   Design note: the page is lit like the quill photograph. One warm light
   source out of black, falling on cream paper. Nothing new in the palette
   and nothing new in the type scale — the gold and the near-black were
   already tokens above. This block only adds the light, the Arabic, the
   book, the comparison table and the cheque.
   ========================================================================== */

/* Arabic gets its own stack. Every device this page will be opened on has
   at least one of these; the generic serif is the backstop. */
[lang="ar"]{
  font-family:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Al Bayan",
              "Traditional Arabic","Times New Roman",serif;
  line-height:1.9;
}

/* ---------- the hero: the lamp, with the photograph beside the words ---------- */
.qhero{
  background:#0B0B0C;color:#F7F5EF;
  padding:40px 0 46px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--gold);
}
.qhero::before{
  content:"";position:absolute;left:22%;top:-10%;transform:translateX(-50%);
  width:min(160%,760px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(230,186,86,.17) 0%, rgba(230,186,86,.06) 40%, transparent 70%);
}
.qhero > .wrap{position:relative;max-width:860px}
.qhero-grid{
  display:grid;grid-template-columns:minmax(0,116px) minmax(0,1fr);
  gap:20px;align-items:center;
}
.qhero-fig{margin:0}
.qhero-fig img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse 76% 72% at 51% 49%, #000 30%, transparent 96%);
          mask-image:radial-gradient(ellipse 76% 72% at 51% 49%, #000 30%, transparent 96%);
}
.qhero-body{min-width:0}
.qhero-eyebrow{
  font-family:"Libre Franklin",sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:#E8CC77;margin:0 0 12px;line-height:1.7;
}
.qhero h1{
  color:#F7F5EF;margin:0;
  /* the site h1 clamp, unchanged */
  font-size:clamp(1.95rem,6.2vw,2.9rem);
  line-height:1.07;letter-spacing:-.022em;font-weight:800;text-wrap:balance;
}
.qhero-lede{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:1.115rem;line-height:1.55;color:rgba(247,245,239,.72);
  margin:18px 0 0;max-width:36em;text-wrap:pretty;
}
.qhero-lede strong{color:#F7F5EF;font-weight:600}
@media (min-width:560px){
  .qhero-grid{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:26px}
}
@media (min-width:820px){
  .qhero{padding:54px 0 52px}
  .qhero-grid{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:34px}
}
@media (max-width:420px){
  .qhero{padding:28px 0 38px}
  .qhero-grid{grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:14px}
}

/* ---------- the class ---------- */
.qsub{
  font-family:"Libre Franklin",sans-serif;font-weight:600;
  font-size:clamp(1.02rem,3.3vw,1.22rem);line-height:1.3;letter-spacing:-.012em;
  color:var(--gold);margin:0 0 22px;text-wrap:balance;
}
/* the subject chips, without the hours line */
.subjects--plain li{padding:11px 13px}
.subjects--plain .s{font-size:.9rem}

/* ---------- the book ---------- */
.book{
  border:1px solid var(--gold);border-top:5px solid var(--gold-bright);border-radius:2px;
  background:var(--surface);padding:30px 26px;margin:0 0 30px;
  text-align:center;box-shadow:var(--shadow);
}
.bk-ar{
  font-size:clamp(1.8rem,6.4vw,2.5rem);line-height:1.5;color:var(--gold);
  margin:0 0 10px;font-weight:400;
}
.bk-name{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.021em;
  font-size:clamp(1.5rem,5vw,2.05rem);line-height:1.08;margin:0 0 6px;text-wrap:balance;
}
.bk-by{
  font-family:"Libre Franklin",sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin:0 0 22px;
}
.bk-body{
  text-align:left;font-size:.98rem;line-height:1.6;color:var(--ink-2);
  max-width:34em;margin:0 auto 14px;
}
.bk-body:last-child{margin-bottom:0}
.bk-body strong{color:var(--ink)}

/* ---------- the chain it came down ---------- */
.chain{border-left:3px solid var(--gold-bright);padding:6px 0 6px 22px;margin:0 0 16px}
.chain ol{list-style:none;margin:0;padding:0;gap:16px}
.chain li{display:flex;flex-direction:column;gap:3px}
.chain .cn{
  font-family:"Libre Franklin",sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.chain .cw{
  font-family:"Libre Franklin",sans-serif;font-weight:700;font-size:1.02rem;
  line-height:1.3;letter-spacing:-.008em;color:var(--ink);
}

/* ---------- the comparison table: whose prices these are ---------- */
tbody td .sub{
  display:block;font-size:.82rem;line-height:1.5;color:var(--ink-3);
  margin-top:5px;font-weight:400;
}
tr.total td{background:var(--panel);color:var(--on-panel);font-weight:700;border-bottom:0}
tr.total td:first-child{box-shadow:inset 4px 0 0 var(--gold-bright)}
tr.total td.money{color:var(--gold-bright);font-size:1.14rem}
tr.total td.money span{
  display:block;font-size:.55rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-panel);opacity:.6;margin-top:4px;
}
tr.total .flag{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.61rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:4px;
}

/* ---------- the ask ---------- */
.askline{
  font-family:"Libre Franklin",sans-serif;font-weight:800;letter-spacing:-.018em;
  font-size:clamp(1.15rem,3.9vw,1.45rem);line-height:1.3;
  margin:30px 0 0;text-align:center;text-wrap:balance;
}
.ar-inline{
  display:inline-block;font-weight:400;color:var(--gold);
  font-size:1.12em;line-height:1;vertical-align:-.06em;margin-right:.12em;
}

/* ---------- print ---------- */
@media print{
  .qhero{background:#fff;color:#000;border-bottom:1.5pt solid #000;padding:0 0 14pt}
  .qhero::before{display:none}
  .qhero-fig{display:none}
  .qhero-grid{display:block}
  .qhero h1,.qhero-lede,.qhero-lede strong,.qhero-eyebrow{color:#000}
  .cert{background:#fff;border:1.5pt solid #000;box-shadow:none}
  .cert::before,.cert-corner{display:none}
  .cert-save,.cert-fig,.cert-fig span,.cert-ar,.cert-reason,.cert-vs,
  .cert-by,.cert-valid{color:#000}
  .cert-seal{filter:grayscale(1)}
  tr.total td{background:#fff;color:#000;border-top:1.5pt solid #000}
  tr.total td.money,tr.total .flag,tr.total td.money span{color:#000;opacity:1}
  .ar-inline{color:#000}
}

/* ---------- phones: the hero photograph, and the three-column table ---------- */

/* Under 560px there is not enough column left for the headline if the
   photograph sits beside it, so it goes above as a small mark instead. */
@media (max-width:559px){
  .qhero-grid{grid-template-columns:1fr;gap:16px}
  .qhero-fig{width:132px;margin:0 0 -4px -10px}
}
@media (max-width:420px){
  .qhero-grid{grid-template-columns:1fr;gap:14px}
  .qhero-fig{width:118px}
}

/* Three columns will not fit a phone. Each row becomes a block, with the
   hours and the rate as one line underneath the thing being bought. */
/* ---------- previous students, as toggles ---------- */
.student{
  border-top:1px solid var(--rule);
}
.student:last-of-type{border-bottom:1px solid var(--rule)}
.student > summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;
  list-style:none;cursor:pointer;padding:22px 0;
  -webkit-tap-highlight-color:transparent;
}
.student > summary::-webkit-details-marker{display:none}
.student > summary::before{
  content:"";flex:0 0 auto;align-self:center;
  width:0;height:0;margin-top:2px;
  border-left:8px solid var(--gold-bright);
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
  transition:transform .18s ease;transform-origin:30% 50%;
}
.student[open] > summary::before{transform:rotate(90deg)}
.student > summary:hover h2{color:var(--gold)}
.student > summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.st-eyebrow{
  flex:1 1 100%;order:-1;padding-left:22px;
  font-family:"Libre Franklin",sans-serif;font-size:.688rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.student > summary h2{
  flex:1 1 0;min-width:0;margin:0;
  font-size:clamp(1.28rem,4vw,1.62rem);line-height:1.18;
  transition:color .14s ease;
}
.st-body{padding:0 0 26px 22px}
.st-body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .student > summary::before{transition:none}
}

/* ---------- where the numbers came from ---------- */
.band--sources{background:var(--surface);padding:34px 0 40px}
.sourcelab{
  font-family:"Libre Franklin",sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.sourcenote{font-size:.8rem;line-height:1.62;color:var(--ink-3);margin:0}
.sourcenote strong{color:var(--ink-2);font-weight:600}

@media print{
  .band--sources{background:#fff}
  .sourcenote,.sourcenote strong,.sourcelab{color:#000}
  .student{border-color:#999}
  .student > summary::before{display:none}
  .st-eyebrow,.st-body{padding-left:0}
  .st-body{display:block!important}
}

/* ==========================================================================
   THE SAVINGS CERTIFICATE
   An award, not a bill. Nothing here may read as a bank instrument: no
   boxed figure, no signature rule, no "pay", no ledger dashes. The eye
   goes to YOU SAVE first, the amount second, and the seal makes it feel
   issued rather than advertised.
   ========================================================================== */
.cert{
  position:relative;background:var(--surface);color:var(--ink);
  border:1px solid var(--gold);border-radius:2px;
  /* a business card, not a block. it is a proof mark now, not a headline. */
  max-width:344px;margin:0 auto 30px;padding:5px;
  box-shadow:var(--shadow);overflow:hidden;text-align:center;
}
/* the light from the quill, pooled behind the figure */
.cert::before{
  content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(120%,330px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(198,160,46,.15) 0%, rgba(198,160,46,.05) 42%, transparent 70%);
}
/* four corner marks instead of a second frame */
.cert-corner{
  position:absolute;width:11px;height:11px;pointer-events:none;
  border:0 solid var(--gold-bright);opacity:.85;
}
.cert-corner--tl{top:7px;left:7px;border-top-width:2px;border-left-width:2px}
.cert-corner--tr{top:7px;right:7px;border-top-width:2px;border-right-width:2px}
.cert-corner--bl{bottom:7px;left:7px;border-bottom-width:2px;border-left-width:2px}
.cert-corner--br{bottom:7px;right:7px;border-bottom-width:2px;border-right-width:2px}

.cert-inner{position:relative;z-index:1;padding:24px 20px 19px}

.cert-reason{
  font-family:"Libre Franklin",sans-serif;font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 13px;line-height:1.65;
}
.cert-reason::after{
  content:"";display:block;width:26px;height:1px;background:var(--gold-bright);
  margin:10px auto 0;
}

/* was the page hero. now a card label — "Save £150" below owns that job. */
.cert-save{
  font-family:"Libre Franklin",sans-serif;font-weight:800;
  font-size:1.02rem;line-height:1.1;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin:0 0 7px;
}
.cert-fig{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;
  font-size:2.35rem;line-height:1.06;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.014em;
  margin:0 0 5px;
}
.cert-fig span{
  font-family:"Libre Franklin",sans-serif;font-size:.27em;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin-left:.35em;white-space:nowrap;
}
.cert-ar{
  font-size:1.06rem;color:var(--gold);
  margin:0 0 13px;font-weight:400;line-height:1.6;
}

/* the seal, stamped under the figure */
.cert-seal{display:block;width:54px;margin:0 auto 12px;color:var(--gold)}
.cert-seal svg{width:100%;height:auto;display:block;overflow:visible}
.sl-ribbon{fill:var(--gold-bright);opacity:.9}
.sl-fill{fill:var(--gold-tint)}
.sl-rope{fill:none;stroke:currentColor;stroke-width:2.6;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.85}
.sl-ring{fill:none;stroke:currentColor;stroke-width:1.7}
.sl-hair{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.sl-star{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.75}
.sl-dot{fill:currentColor}

.cert-vs{
  font-family:"Libre Franklin",sans-serif;font-size:.63rem;font-weight:600;
  line-height:1.55;color:var(--ink-2);margin:0 auto;max-width:22em;
}

.cert-foot{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border-top:1px solid var(--rule);margin-top:15px;padding-top:11px;text-align:center;
}
.cert-by,.cert-valid{
  font-family:"Libre Franklin",sans-serif;font-size:.57rem;line-height:1.55;margin:0;
}
.cert-by{font-weight:700;color:var(--ink);letter-spacing:-.004em}
.cert-valid{font-weight:600;color:var(--ink-3);letter-spacing:.02em}

@media (max-width:600px){
  .cert-inner{padding:22px 16px 17px}
}

/* ==========================================================================
   THE LEDGER — what other tutors charge, against what I charge
   Same visual system as the tables above it: grey header bar, cream rows,
   gold accent, dark contrast bar. The gold bar is the only new note, and
   it is the site's existing gold-fill treatment (see tr.premium, .tier--top).
   Three columns, held identically across every row and both bars, so the
   rates line up vertically and the two monthly totals sit one above the other.
   ========================================================================== */
.ledger{
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
  background:var(--surface);margin:0 0 14px;
}
.ldg-head,
.lrow > summary,
.ldg-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 5.6em 8.2em;
  gap:0 14px;align-items:baseline;
  padding:13px 16px;
}
.ldg-hrs,.ldg-rate{
  text-align:right;font-variant-numeric:lining-nums tabular-nums;
  font-family:"Libre Franklin",sans-serif;font-weight:600;white-space:nowrap;
}

/* the header bar */
.ldg-head{
  background:var(--ink-2);color:var(--surface);
  font-family:"Libre Franklin",sans-serif;font-size:.67rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
}
.ldg-head .ldg-hrs,.ldg-head .ldg-rate{font-size:.67rem;font-weight:700;letter-spacing:.15em}

/* a competitor row, closed */
.lrow{border-bottom:1px solid var(--rule);background:var(--surface)}
.lrow > summary{
  list-style:none;cursor:pointer;padding-top:15px;padding-bottom:15px;
  -webkit-tap-highlight-color:transparent;
}
.lrow > summary::-webkit-details-marker{display:none}
.lrow > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.lrow > summary:hover .lr-name{color:var(--gold)}
.lrow[open] > summary{background:var(--gold-tint)}
.lrow .ldg-what{display:block;min-width:0;position:relative;padding-left:22px}
.lr-name{
  display:block;font-family:"Libre Franklin",sans-serif;font-weight:700;
  font-size:.98rem;line-height:1.32;letter-spacing:-.008em;color:var(--ink);
  transition:color .14s ease;
}
.lrow .ldg-what::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:0;height:0;border-left:7px solid var(--gold-bright);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform .18s ease;transform-origin:32% 50%;
}
.lrow[open] .ldg-what::before{transform:rotate(90deg)}
.lr-hint{
  display:block;margin-top:5px;
  font-family:"Libre Franklin",sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
}
.lrow[open] .lr-hint{visibility:hidden}
.lrow > summary .ldg-hrs,
.lrow > summary .ldg-rate{font-size:1.02rem;color:var(--ink)}

/* the evidence, open */
.lr-src{
  background:var(--gold-tint);border-top:1px solid var(--rule);
  padding:18px 16px 20px 38px;
}
.lr-src p{font-size:.9rem;line-height:1.58;color:var(--ink-2);margin:0 0 9px}
.lr-src p:last-child{margin-bottom:0}
.lr-src strong{color:var(--ink);font-weight:600}
.lr-lab{
  font-family:"Libre Franklin",sans-serif;font-size:.6rem!important;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)!important;
  margin:0 0 11px!important;
}
.lr-when{font-size:.81rem!important;color:var(--ink-3)!important;line-height:1.55!important}
.lr-when strong{color:var(--ink-2)}

/* the two bars */
.ldg-bar{align-items:center;padding-top:17px;padding-bottom:17px}
.ldg-bar .ldg-what{display:block;min-width:0}
.lb-lab{
  display:block;font-family:"Libre Franklin",sans-serif;font-size:.61rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:5px;
}
.lb-sub{
  display:block;font-family:"Libre Franklin",sans-serif;font-weight:700;
  font-size:.98rem;line-height:1.3;letter-spacing:-.008em;
}
.lb-fig{display:block;font-size:1.24rem;font-weight:700;line-height:1.15}
.lb-unit{
  display:block;font-size:.55rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin-top:3px;
}
.lb-pair + .lb-pair{margin-top:11px;padding-top:11px;border-top:1px solid rgba(20,18,11,.28)}

.ldg-bar--dark{background:var(--panel);color:var(--on-panel);box-shadow:inset 4px 0 0 var(--gold-bright)}
.ldg-bar--dark .lb-lab{color:var(--gold-bright)}
.ldg-bar--dark .ldg-hrs,.ldg-bar--dark .lb-fig{color:var(--gold-bright)}
.ldg-bar--dark .lb-unit{color:var(--on-panel);opacity:.6}

.ldg-bar--gold{background:var(--gold-bright);color:var(--on-gold);box-shadow:inset 4px 0 0 var(--gold)}
.ldg-bar--gold .lb-lab{opacity:.66}
.ldg-bar--gold .ldg-hrs,.ldg-bar--gold .lb-fig{color:var(--on-gold)}
.ldg-bar--gold .lb-unit{opacity:.62}

/* the plain-words close */
.ldg-save{
  border-top:1px solid var(--rule);background:var(--surface);
  margin:0;padding:17px 16px;
  font-family:"Libre Franklin",sans-serif;font-size:1rem;line-height:1.45;
  letter-spacing:-.008em;color:var(--ink-2);
}
.ldg-save strong{color:var(--gold);font-weight:800;font-size:1.1rem}

/* phones: the three columns become one, with the numbers on their own line */
@media (max-width:600px){
  .ldg-head{grid-template-columns:1fr}
  .ldg-head .ldg-hrs,.ldg-head .ldg-rate{display:none}
  .ldg-bar{grid-template-columns:1fr;gap:0}
  /* the two figures share one line under the name, not one line each */
  .lrow > summary{grid-template-columns:max-content max-content minmax(0,1fr);gap:0}
  .lrow > summary .ldg-what{grid-column:1 / -1;grid-row:1}
  .lrow > summary .ldg-hrs,.lrow > summary .ldg-rate,
  .ldg-bar .ldg-hrs,.ldg-bar .ldg-rate{text-align:left}
  .lrow > summary .ldg-hrs{grid-column:1;grid-row:2;margin:12px 0 0 22px}
  .lrow > summary .ldg-rate{
    grid-column:2;grid-row:2;margin:12px 0 0 13px;
    padding-left:13px;border-left:1px solid var(--rule-2);
  }
  .lrow > summary .ldg-hrs::after,.lrow > summary .ldg-rate::after{
    font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-3);margin-left:.5em;
  }
  .lrow > summary .ldg-hrs::after{content:"hrs a week"}
  .lrow > summary .ldg-rate::after{content:"an hour"}
  .ldg-bar .ldg-hrs{display:none}
  .ldg-bar .ldg-rate{margin-top:15px}
  .ldg-bar--gold .lb-pair,.ldg-bar--dark .lb-pair{display:inline-block;vertical-align:top}
  .ldg-bar--gold .lb-pair + .lb-pair{
    margin:0 0 0 16px;padding:0 0 0 16px;
    border-top:0;border-left:1px solid rgba(20,18,11,.28);
  }
}

@media (prefers-reduced-motion:reduce){
  .lrow .ldg-what::before{transition:none}
}

@media print{
  .ledger{border-color:#999}
  .ldg-head{background:#fff;color:#000;border-bottom:1pt solid #000}
  .lrow[open] > summary,.lr-src{background:#fff}
  .lrow .ldg-what::before{display:none}
  .lrow .ldg-what{padding-left:0}
  .lr-src{padding-left:16px}
  .lr-hint{display:none}
  .ldg-bar--dark,.ldg-bar--gold{background:#fff;color:#000;box-shadow:none;border-top:1.5pt solid #000}
  .ldg-bar--dark .lb-lab,.ldg-bar--dark .lb-fig,.ldg-bar--dark .ldg-hrs,
  .ldg-bar--gold .lb-lab,.ldg-bar--gold .lb-fig,.ldg-bar--gold .ldg-hrs,
  .lb-unit,.ldg-save strong{color:#000;opacity:1}
  .lr-src,.lr-src p,.lr-lab,.lr-when{color:#000!important}
}

/* ==========================================================================
   THE COMPARISON, TWO STATES
   Closed, this is a four-line read: a crossed-out price, one sentence of
   plain English, and the saving. The ledger below is untouched — it is
   simply hidden until the one control is pressed. That control is the
   only thing in the closed state styled to look pressable.
   ========================================================================== */
.compare{margin:0 0 14px}

.cmp-hero{text-align:center;padding:6px 0 0}
.cmp-lab{
  font-family:"Libre Franklin",sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 16px;line-height:1.8;
}
.cmp-lab--gold{color:var(--gold)}

/* the price they would have paid, struck out */
.cmp-was{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(2.6rem,11vw,4rem);line-height:1;color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.014em;
  margin:0 0 14px;
}
.cmp-was s{
  text-decoration-line:line-through;text-decoration-thickness:3px;
  text-decoration-color:var(--gold-bright);
}
.cmp-was span{
  font-family:"Libre Franklin",sans-serif;font-size:.26em;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  margin-left:.4em;white-space:nowrap;
}
.cmp-wasnote{
  font-family:"Source Serif 4",Georgia,serif;font-size:1.115rem;line-height:1.5;
  color:var(--ink-2);margin:0 auto;max-width:24em;text-wrap:balance;
}

/* the break between the two halves */
.cmp-break{
  position:relative;height:1px;background:var(--rule-2);
  margin:34px auto 32px;max-width:20em;
}
.cmp-break::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-bright);box-shadow:0 0 0 5px var(--surface-2);
}

/* the saving */
.cmp-save{
  font-family:"Libre Franklin",sans-serif;font-weight:800;
  font-size:clamp(2.4rem,10.5vw,3.9rem);line-height:1;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em;
  margin:0;
}
.cmp-save span{
  display:block;font-size:.24em;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2);margin-top:12px;
}

/* the one control */
.cmp-detail{margin-top:34px}
.cmp-detail > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;width:fit-content;margin:0 auto;
  padding:9px 4px;-webkit-tap-highlight-color:transparent;
  font-family:"Libre Franklin",sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.02em;color:var(--gold);
  border-bottom:1px solid currentColor;
}
.cmp-detail > summary::-webkit-details-marker{display:none}
.cmp-detail > summary:hover{color:var(--ink)}
.cmp-detail > summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cmp-chev{
  flex:0 0 auto;width:0;height:0;
  border-top:6px solid currentColor;
  border-left:5px solid transparent;border-right:5px solid transparent;
  transition:transform .18s ease;
}
.cmp-detail[open] .cmp-chev{transform:rotate(180deg)}
.cmp-tog-open{display:none}
.cmp-detail[open] .cmp-tog-shut{display:none}
.cmp-detail[open] .cmp-tog-open{display:inline}
.cmp-detail .ledger{margin:26px 0 0}

@media (prefers-reduced-motion:reduce){.cmp-chev{transition:none}}

@media print{
  .cmp-was s{text-decoration-color:#000}
  .cmp-was,.cmp-wasnote,.cmp-save,.cmp-save span,.cmp-lab,.cmp-lab--gold{color:#000}
  .cmp-break::after{background:#000;box-shadow:none}
  .cmp-detail > summary{display:none}
  .cmp-detail .ledger{margin-top:20px}
}

/* ==========================================================================
   THE CLAIM BUTTON
   The gold fill and the WhatsApp mark are unchanged. What is added is the
   pressability a flat gold rectangle does not have on its own: a cue above
   it that names the action, an arrow pointing at it, and a raised edge on
   the button that sinks when it is pressed.
   ========================================================================== */
.claimcta{text-align:center;margin:34px 0 0}
.claimcta + .small{margin-top:26px}

.tapcue{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:"Libre Franklin",sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:-.01em;color:var(--gold);
  margin:0 auto 12px;max-width:20em;line-height:1.32;text-wrap:balance;
}
.tapcue svg{
  width:14px;height:auto;fill:currentColor;display:block;
  animation:tapnudge 1.6s ease-in-out infinite;
}
@keyframes tapnudge{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(5px);opacity:1}
}

/* a raised key-cap edge, so it reads as a thing you press */
.btn--claim{
  box-shadow:0 3px 0 var(--gold), 0 10px 22px -10px rgba(11,11,12,.55);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn--claim:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 0 var(--gold), 0 14px 26px -11px rgba(11,11,12,.6);
}
.btn--claim:active{
  transform:translateY(3px);
  box-shadow:0 0 0 var(--gold), 0 4px 10px -7px rgba(11,11,12,.5);
}

@media (prefers-reduced-motion:reduce){
  .tapcue svg{animation:none}
  .btn--claim{transition:none}
  .btn--claim:hover,.btn--claim:active{transform:none}
}

@media print{
  .tapcue{display:none}
  .btn--claim{box-shadow:none}
}