/* Midad Quran Institute — public site design system (V20)
   Direction: the illuminated Mushaf, made modern. Ivory paper, midnight ink, emerald and gold leaf,
   eight-point-star geometry and the mihrab arch used sparingly as signature ornaments.
   Fonts are self-hosted (SIL Open Font License, /assets/fonts/OFL-LICENSE.txt). */

@font-face{font-family:"El Messiri";src:url("/assets/fonts/elmessiri-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url("/assets/fonts/hind-regular-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"Hind Siliguri";src:url("/assets/fonts/hind-semibold-latin.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"Hind Siliguri";src:url("/assets/fonts/hind-regular-bengali.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0964-0965,U+0980-09FE,U+200C-200D,U+25CC}
@font-face{font-family:"Hind Siliguri";src:url("/assets/fonts/hind-semibold-bengali.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0964-0965,U+0980-09FE,U+200C-200D,U+25CC}
@font-face{font-family:"Amiri";src:url("/assets/fonts/amiri-arabic.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+FDFA}

:root{
  /* PALETTE: exactly three colours. Everything else is a tint or shade of one of them.
     1 Emerald  #0E5A4B  brand, buttons, links       (shades: deep #0B3D35, darkest #08312A, tint #E2EEE8; text ink #12241F)
     2 Gold     #C29B40  ornament and highlights     (shades: #A9832B lines, #7C5E16 small text, #E6CD8A on dark, #D4B062 buttons)
     3 Ivory    #FAF7EF  page background             (shades: #F2ECDF alternate band, #FFFFFF cards, #DDD4C2 lines)
     Red is used only for form errors. */
  --paper:#FAF7EF; --parch:#F2ECDF; --card:#FFFFFF; --line:#DDD4C2; --line-soft:#EAE3D4;
  --ink:#12241F; --ink-2:#33463F; --ink-3:#4B5D56;
  --emerald:#0E5A4B; --emerald-2:#0A473B; --emerald-deep:#0B3D35; --night:#08312A; --emerald-tint:#E2EEE8;
  --gold:#C29B40; --gold-ui:#A9832B; --gold-text:#7C5E16; --gold-light:#E6CD8A; --gold-btn:#D4B062; --gold-btn-2:#E0C077; --gold-tint:#F6EBD0;
  --on-dark:#F6F1E4; --on-dark-2:#C8D9D1;
  --danger:#9B2C2C; --ok:var(--emerald);
  --display:"El Messiri","Segoe UI",system-ui,sans-serif;
  --sans:"Hind Siliguri","Segoe UI",system-ui,-apple-system,sans-serif;
  --arabic:"Amiri","Noto Naskh Arabic","Scheherazade New",serif;
  --wrap:72rem; --measure:38rem; --r-s:8px; --r-m:14px; --r-l:22px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4.5rem; --s6:6.5rem;
  --head-h:4.6rem;
  /* eight-point-star lattice, drawn in gold at low opacity */
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C29B40' stroke-opacity='.32' stroke-width='1'%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Cpath d='M0 48h20M76 48h20M48 0v20M48 76v20'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E");
  --divider:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cg fill='none' stroke='%23A9832B' stroke-width='1.3'%3E%3Cpath d='M0 7h46M74 7h46'/%3E%3Crect x='54' y='1' width='12' height='12'/%3E%3Crect x='54' y='1' width='12' height='12' transform='rotate(45 60 7)'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--sans);text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
body.has-bar{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
body:lang(bn),:lang(bn) body{line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--emerald);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--emerald-2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:0;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.7rem);font-weight:700}
h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem)}
h3{font-size:1.25rem;line-height:1.3}
:lang(bn) h1,:lang(bn) h2,:lang(bn) h3{font-family:var(--sans);font-weight:600}
p{margin:0 0 1em;max-width:var(--measure)}
ul,ol{padding-left:1.2em;margin:0 0 1em}
li{margin:.25em 0}
.ar{font-family:var(--arabic);direction:rtl;font-weight:400}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header and navigation ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(250,247,239,.96);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line-soft);box-shadow:0 1px 0 rgba(194,155,64,.25)}
.head-row{display:flex;align-items:center;gap:1.25rem;min-height:var(--head-h);position:relative}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);min-width:0;flex:0 1 auto}
.brand-mark{width:2.75rem;height:2.75rem;border-radius:50%;display:block;overflow:hidden;flex:none}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-name{font:700 1.12rem/1.1 var(--display);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name small{display:block;font:400 .78rem/1.35 var(--sans);color:var(--ink-3)}
.site-head .brand-name small{display:none}
.nav{flex:1;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-item{position:relative;margin:0}
.nav-item:has(.mega){position:static}
.nav-trigger,.nav-link{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;padding:.7rem .85rem;border:0;border-radius:var(--r-s);background:none;color:var(--ink);font:500 1rem/1 var(--sans);text-decoration:none;cursor:pointer}
.nav-trigger:hover,.nav-link:hover,.nav-item.open > .nav-trigger{background:var(--parch)}
.nav-trigger svg{width:.7rem;height:.7rem;transition:transform .15s}
.nav-item.open > .nav-trigger svg{transform:rotate(180deg)}
.nav-trigger[data-active],.nav-link[aria-current]{color:var(--emerald);box-shadow:inset 0 -2px 0 var(--gold)}
.dropdown,.mega{position:absolute;top:calc(100% + .55rem);z-index:41;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-s) var(--r-s) var(--r-m) var(--r-m);
  box-shadow:0 26px 50px -24px rgba(11,61,53,.42);opacity:0;visibility:hidden;transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.dropdown::before,.mega::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}  /* keeps hover alive across the gap */
.dropdown{left:50%;width:21rem;padding:.45rem;transform:translate(-50%,6px)}
.mega{left:50%;width:min(50rem,100%);padding:1.1rem 1.1rem .4rem;transform:translate(-50%,6px)}
.nav-item.open > .dropdown,.nav-item.open > .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .14s ease,transform .14s ease,visibility 0s}
.dropdown ul,.mega ul{list-style:none;margin:0;padding:0}
.dropdown li,.mega li{margin:0}
.dropdown a,.mega li a{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .75rem;border-radius:10px;color:var(--ink);text-decoration:none}
.dropdown a:hover,.mega li a:hover,.dropdown a:focus-visible,.mega li a:focus-visible{background:var(--paper)}
.dropdown a[aria-current] strong,.mega a[aria-current] strong{color:var(--emerald)}
.dropdown strong,.mega strong{display:block;font:600 1rem/1.25 var(--sans)}
.dropdown small,.mega small{display:block;margin-top:.15rem;color:var(--ink-3);font-size:.86rem;line-height:1.35}
.mi-num{flex:none;width:2rem;height:2rem;margin-top:.05rem;display:grid;place-items:center;border-radius:50%;background:var(--emerald-tint);color:var(--emerald);font:700 .92rem/1 var(--display)}
.mi-ar{font:400 1.15rem/1 var(--arabic);padding-bottom:.2rem}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mega-head{margin:0 0 .35rem .75rem;font:600 .85rem/1.3 var(--sans);color:var(--gold-text);max-width:none}
.mega-promo{margin:.8rem .25rem 0;padding:1.05rem 1.1rem;border-radius:12px;background:var(--emerald-deep) var(--pattern) right center/80px;color:var(--on-dark-2)}
.mega-promo strong{color:#fff;font:600 1.05rem/1.3 var(--display)}
.mega-promo p{margin:.35rem 0 .8rem;font-size:.92rem;line-height:1.45}
.mega-promo .btn-primary{background:var(--gold-btn);color:var(--ink)}
.mega-promo .btn-primary:hover{background:var(--gold-btn-2)}
.mega-all{display:flex;justify-content:center;margin-top:.7rem;padding:.75rem;border-top:1px solid var(--line-soft);font-weight:600;color:var(--emerald);text-decoration:none}
.mega-all:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:.4rem;flex:none}
.lang,.signin{white-space:nowrap;font:500 .95rem/1 var(--sans);padding:.65rem .6rem;text-decoration:none;color:var(--ink-2);border-radius:var(--r-s)}
.lang:hover,.signin:hover{background:var(--parch);color:var(--ink)}
.head-actions .btn{gap:0}
.head-actions .btn .short{display:none}
.menu-toggle{display:none;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);color:var(--ink);cursor:pointer}
.menu-toggle svg{width:1.3rem;height:1.3rem}
.menu-toggle .i-close,.site-head.open .menu-toggle .i-open{display:none}
.site-head.open .menu-toggle .i-close{display:block}
.nav-foot{display:none}
html.nav-open{overflow:hidden}

@media (max-width:1023px){
  /* a backdrop-filter would make the fixed drawer position itself inside the header, so phones use a solid header */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .menu-toggle{display:inline-grid}
  .head-actions .lang,.head-actions .signin{display:none}
  .brand{margin-right:auto}
  .nav{display:none;position:fixed;left:0;right:0;top:var(--head-h);bottom:0;z-index:39;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);padding:.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft)}
  .site-head.open .nav{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-item,.nav-item:has(.mega){position:relative;border-bottom:1px solid var(--line-soft)}
  .nav-trigger,.nav-link{width:100%;justify-content:space-between;padding:1.05rem .25rem;font:600 1.1rem/1.2 var(--sans);border-radius:0;box-shadow:none!important}
  .nav-trigger:hover,.nav-link:hover,.nav-item.open > .nav-trigger{background:none}
  .nav-trigger svg{width:.85rem;height:.85rem}
  .dropdown,.mega{position:static;display:none;width:auto;padding:0 0 .8rem;border:0;border-radius:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none;transition:none}
  .dropdown::before,.mega::before{display:none}
  .nav-item.open > .dropdown,.nav-item.open > .mega{display:block;transform:none}
  .mega-cols{grid-template-columns:1fr;gap:.6rem}
  .mega-head{margin:.2rem 0 .2rem .75rem}
  .mega-promo{display:none}
  .mega-all{justify-content:flex-start;margin:0;padding:.65rem .75rem;border:0}
  .dropdown a,.mega li a{padding:.6rem .75rem}
  .nav-foot{display:grid;gap:.65rem;margin-top:1.4rem}
  .nav-foot .btn{width:100%}
  .nav-foot-links{display:flex;justify-content:space-between;gap:1rem;margin-top:.4rem;font-weight:500}
  .nav-foot-links a{padding:.6rem 0;color:var(--emerald)}
}
@media (max-width:520px){
  :root{--head-h:4rem}
  .head-row{gap:.6rem}
  .brand{gap:.5rem}
  .brand-mark{width:2.35rem;height:2.35rem}
  .brand-name{font-size:1rem}
  .head-actions .btn{padding-inline:.85rem;font-size:.9rem;min-height:2.6rem}
  .head-actions .btn .long{display:none}
  .head-actions .btn .short{display:inline}
  .menu-toggle{width:2.6rem;height:2.6rem}
}
@media (max-width:360px){.brand-name{display:none}}

/* ---------- Course cards ---------- */
.cc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.cc-grid.cc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cc-grid.cc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc{position:relative;margin:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.cc:hover{transform:translateY(-3px);border-color:var(--gold-ui);box-shadow:0 22px 44px -26px rgba(11,61,53,.5)}
.cc:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.cc-art{position:relative;aspect-ratio:16/8.5;display:grid;place-items:center;background:var(--emerald-deep) var(--pattern) center/76px;overflow:hidden}
.cc-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(11,61,53,.15),var(--emerald-deep) 72%)}
.cc-art::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cc-art .ar{position:relative;font-size:clamp(2.1rem,1.5rem + 1.3vw,2.8rem);line-height:1.35;color:var(--gold-light)}
.cc-stage{position:absolute;left:.8rem;top:.8rem;padding:.35rem .65rem;border-radius:999px;background:var(--gold-light);color:var(--emerald-deep);font:600 .78rem/1 var(--sans)}
.cc-body{display:flex;flex-direction:column;gap:.45rem;flex:1;padding:1.1rem 1.2rem 1.25rem}
.cc h3{margin:0;font-size:1.28rem}
.cc h3 a{color:var(--ink);text-decoration:none}
.cc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.cc h3 a:focus-visible{outline:none}
.cc p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.55;max-width:none}
.cc .cc-meta{color:var(--emerald);font-size:.88rem;font-weight:600}
.cc-more{margin-top:auto;padding-top:.55rem;display:inline-flex;align-items:center;gap:.35rem;color:var(--emerald);font-weight:600;font-size:.95rem}
.cc-more svg{width:1rem;height:1rem;transition:transform .15s}
.cc:hover .cc-more svg{transform:translateX(3px)}
.cc-help{background:var(--emerald-deep) var(--pattern) center/90px;border-color:var(--emerald-deep);justify-content:center}
.cc-help:hover{transform:none;box-shadow:none;border-color:var(--emerald-deep)}
.cc-help .cc-body{justify-content:center;gap:.75rem;padding:1.6rem 1.4rem;background:linear-gradient(180deg,rgba(11,61,53,.88),rgba(11,61,53,.96))}
.cc-help h3{color:#fff}
.cc-help p{color:var(--on-dark-2)}
.cc-help .btn{align-self:flex-start;position:relative;z-index:2}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.group-head h3{margin:0;font-size:1.3rem}
.group-head p{margin:0;color:var(--ink-3);font-size:.95rem}
.cc-grid + .group-head{margin-top:2.5rem}
.section-link{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
.compare th[scope=row] a{color:var(--emerald);font-weight:600;text-decoration:none}
.compare th[scope=row] a:hover{text-decoration:underline}
@media (max-width:1100px){.cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.cc-grid,.cc-grid.cc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .cc-grid,.cc-grid.cc-grid-3,.cc-grid.cc-grid-2{grid-template-columns:1fr;gap:.75rem}
  .cc{flex-direction:row;border-radius:14px}
  .cc:hover{transform:none}
  .cc-art{aspect-ratio:auto;width:5.75rem;flex:none}
  .cc-art::after{left:auto;right:0;top:12%;bottom:12%;width:3px;height:auto;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
  .cc-art .ar{font-size:1.55rem;margin-top:-.9rem}
  .cc-stage{left:50%;top:auto;bottom:.55rem;transform:translateX(-50%);padding:.25rem .45rem;font-size:.68rem;white-space:nowrap}
  .cc-body{padding:.85rem 1rem;gap:.3rem}
  .cc h3{font-size:1.12rem}
  .cc p{font-size:.92rem;line-height:1.45}
  .cc .cc-meta{font-size:.82rem}
  .cc-more{display:none}
  .cc-help{flex-direction:column}
  .cc-help .cc-body{padding:1.2rem}
  .cc-help .btn{align-self:stretch}
  .group-head{flex-direction:column;gap:.2rem}
}

/* ---------- Inner page head with "At a glance" card ---------- */
.ph-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:3rem;align-items:center}
.ph-text .actions{margin-top:1.5rem}
.glance{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:18px;padding:1.35rem 1.45rem 1.45rem;box-shadow:0 26px 50px -36px rgba(11,61,53,.5)}
.glance-title{margin:0 0 .6rem;font:700 1.15rem/1.3 var(--display);color:var(--ink)}
.glance dl{margin:0 0 1.15rem}
.glance dl > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.glance dl > div:last-child{border-bottom:0}
.glance dt{color:var(--ink-3);font-size:.92rem}
.glance dd{margin:0;color:var(--ink);font-weight:600;font-size:.97rem}
.glance .actions{flex-direction:column;align-items:stretch;gap:.6rem}
.glance .btn{width:100%}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr;gap:1.6rem}.glance dl > div{grid-template-columns:7.5rem minmax(0,1fr)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.35rem;border-radius:999px;font:600 1rem/1.1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--emerald);color:#fff}
.btn-primary:hover{background:var(--emerald-2);color:#fff}
.btn-gold{background:var(--gold-btn);color:var(--ink)}
.btn-gold:hover{background:var(--gold-btn-2);color:var(--ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-wa{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-wa:hover{border-color:var(--emerald);color:var(--emerald)}
.btn svg{width:1.15rem;height:1.15rem;flex:none}
.btn-sm{min-height:2.6rem;padding:.55rem 1.05rem;font-size:.95rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- Bands ---------- */
.band{padding-block:var(--s5)}
.band-mist{background:var(--parch)}
.band-ink{background:var(--emerald-deep) var(--pattern);background-size:96px;color:var(--on-dark);position:relative}
.band-ink::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--emerald-deep) 35%,rgba(11,61,53,.86));pointer-events:none}
.band-ink > *{position:relative}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink a:not(.btn){color:var(--gold-light)}
.band-head{margin-bottom:var(--s4);max-width:46rem}
.band-head h2::after{content:"";display:block;width:120px;height:14px;margin-top:.85rem;background:var(--divider) no-repeat left center}
.band-head p{color:var(--ink-2);font-size:1.1rem}
.lead{font-size:1.2rem;color:var(--ink-2);max-width:40rem}

/* ---------- Home hero: dark emerald, star lattice, mihrab-framed اقرأ ---------- */
.hero{background:var(--emerald-deep) var(--pattern);background-size:96px;color:var(--on-dark);padding-block:var(--s5);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--emerald-deep) 0%,rgba(11,61,53,.94) 45%,rgba(11,61,53,.55) 100%);pointer-events:none}
.hero > .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s4);align-items:center}
.hero h1{color:#fff;max-width:17ch;font-size:clamp(2.3rem,1.3rem + 3.4vw,3.9rem)}
.hero .lead{color:var(--on-dark-2);margin-bottom:var(--s3)}
.hero .btn-primary{background:var(--gold-btn);color:var(--ink)}
.hero .btn-primary:hover{background:var(--gold-btn-2);color:var(--ink)}
.hero .btn-wa{background:transparent;color:var(--on-dark);border-color:rgba(246,241,228,.45)}
.hero .btn-wa:hover{border-color:var(--gold-light);color:#fff}
.hero-points{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;color:var(--on-dark-2);font-size:.97rem}
.hero-points li{display:flex;gap:.5rem;align-items:center;margin:0}
.hero-points li::before{content:"";width:.55rem;height:.55rem;background:var(--gold);transform:rotate(45deg);flex:none}
.hero-side{display:grid;gap:var(--s3);justify-items:center}
.hero-word{margin:0;position:relative;width:min(100%,19rem);aspect-ratio:3/3.7;display:grid;align-content:center;justify-items:center;text-align:center;padding:4.2rem 1.6rem 1.8rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23C29B40'%3E%3Cpath stroke-width='2' d='M8 356V140Q8 52 150 6Q292 52 292 140V356Z'/%3E%3Cpath stroke-width='1' opacity='.6' d='M20 348V144Q20 64 150 20Q280 64 280 144V348Z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-word .ar{display:block;font-size:clamp(5rem,3rem + 5vw,7.5rem);line-height:1.2;color:var(--gold-light)}
.hero-word figcaption{font:400 .92rem/1.5 var(--sans);color:var(--on-dark-2);margin-top:.4rem;max-width:14rem}
.hero-word figcaption strong{display:block;font:600 1.1rem/1.3 var(--display);color:#fff}
.lesson-card{width:min(100%,21rem);background:var(--card);color:var(--ink);border-radius:var(--r-m);border-top:3px solid var(--gold);box-shadow:0 26px 50px -24px rgba(0,0,0,.5);padding:1.1rem 1.2rem;font-size:.95rem;text-align:left}
.lesson-card header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-soft);padding-bottom:.6rem;margin-bottom:.6rem}
.lesson-card header strong{font:600 1.05rem/1.3 var(--display)}
.lesson-card header span{color:var(--gold-text);font-size:.85rem;white-space:nowrap}
.lesson-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem}
.lesson-card dt{color:var(--ink-3)}
.lesson-card dd{margin:0}
.lesson-card .ok{color:var(--ok);font-weight:600}
.lesson-card footer{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line);color:var(--ink-3);font-size:.82rem}

/* ---------- Learning path with eight-point-star markers ---------- */
.path{list-style:none;margin:0;padding:var(--s3) 0 0;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));position:relative}
.path::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:calc(var(--s3) + 1.45rem);border-top:1.5px dashed var(--gold-ui)}
.path li{position:relative;margin:0;padding-right:var(--s2)}
.path a{display:block;text-decoration:none;color:var(--ink)}
.marker,.path .marker{position:relative;z-index:1;width:2.9rem;height:2.9rem;display:grid;place-items:center;font:700 1.02rem/1 var(--display);color:var(--ink);margin-bottom:.85rem;isolation:isolate}
.marker::before,.marker::after{content:"";position:absolute;inset:.42rem;background:var(--paper);border:1.5px solid var(--gold-ui);z-index:-1}
.marker::after{transform:rotate(45deg)}
.band-mist .marker::before,.band-mist .marker::after{background:var(--parch)}
.path strong{display:block;font:600 1.15rem/1.25 var(--display);margin-bottom:.2rem}
.path li span:not(.marker){display:block;color:var(--ink-3);font-size:.94rem;line-height:1.45}
.path a:hover strong{color:var(--emerald);text-decoration:underline;text-decoration-color:var(--gold)}

/* ---------- Ruled rows ---------- */
.rows{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line);margin:0}
.row h2,.row h3{margin:0;font-size:1.3rem}
.row h2 a,.row h3 a{color:var(--ink);text-decoration:none}
.row h2 a:hover,.row h3 a:hover{color:var(--emerald);text-decoration:underline;text-decoration-color:var(--gold)}
.row p{margin:0;color:var(--ink-2)}
.row .meta{font-size:.88rem;color:var(--gold-text);white-space:nowrap;font-weight:600}
.tag{display:inline-block;font:500 .82rem/1 var(--sans);padding:.35rem .6rem;border-radius:999px;background:var(--emerald-tint);color:var(--emerald);margin:.4rem .35rem 0 0}

/* ---------- Layouts ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.split-wide{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);counter-reset:step}
.steps li{margin:0;counter-increment:step;padding:var(--s3);background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-m);position:relative}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--emerald);color:#fff;font:700 1.15rem/1 var(--display);margin-bottom:.9rem}
.band-mist .steps li{border-color:var(--line)}
.steps h3{margin-bottom:.35rem}
.steps p{color:var(--ink-2);margin:0}
.checks{list-style:none;padding:0;margin:0 0 1em}
.checks li{position:relative;padding-left:1.8rem;margin:.6em 0}
.checks li::before{content:"";position:absolute;left:.15rem;top:.5em;width:.9rem;height:.5rem;border-left:2px solid var(--emerald);border-bottom:2px solid var(--emerald);transform:rotate(-45deg)}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.points > div{padding:var(--s3);background:var(--card);border-radius:var(--r-m);border:1px solid var(--line-soft);border-left:3px solid var(--gold)}
.band-mist .points > div{border-color:var(--line);border-left-color:var(--gold)}
.points h3{margin-bottom:.35rem}
.points p{color:var(--ink-2);margin:0}
.aside{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-m);padding:var(--s3)}
.aside h2,.aside h3{font-size:1.3rem}
.aside .checks{margin:0}
.note{border-left:3px solid var(--gold);background:var(--card);padding:var(--s2) var(--s3);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink-2);max-width:44rem}
.note p:last-child{margin:0}

/* ---------- Inner page heading ---------- */
.page-head{padding-block:var(--s4);background:linear-gradient(90deg,var(--paper) 55%,rgba(250,247,239,.6)),var(--pattern) right top/96px;border-bottom:1px solid var(--line-soft);position:relative}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--gold),transparent 60%)}
.page-head h1{max-width:22ch}
.crumbs{font-size:.9rem;color:var(--ink-3);margin-bottom:var(--s2)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--gold-ui)}
.crumbs a{color:var(--ink-3)}

/* ---------- Prose ---------- */
.prose{max-width:var(--measure)}
.prose h2{font-size:1.55rem;margin-top:1.8em}
.prose h3{margin-top:1.4em}
.prose p,.prose li{color:var(--ink-2)}
.updated{color:var(--gold-text);font-size:.92rem;font-weight:600}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:48rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.4rem 1.1rem 0;font:600 1.12rem/1.4 var(--display);position:relative;min-height:3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:var(--emerald-tint);color:var(--emerald);font:600 1.2rem/1 var(--sans)}
.faq details[open] summary::after{content:"−";background:var(--emerald);color:#fff}
.faq details > div{padding:0 0 1.1rem;color:var(--ink-2)}
.faq details > div p:last-child{margin-bottom:0}

/* ---------- People & quotes ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--s3)}
.person{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--s2);align-items:start;padding:var(--s3) 0;border-top:1px solid var(--line)}
.avatar{width:4rem;height:4rem;border-radius:50%;background:var(--emerald-tint);display:grid;place-items:center;font:700 1.4rem/1 var(--display);color:var(--emerald);overflow:hidden;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--gold)}
.avatar img{width:100%;height:100%;object-fit:cover}
.person h3{margin:0 0 .2rem}
.person p{margin:.4rem 0 0;color:var(--ink-2);font-size:.97rem}
.person .by{font-size:.9rem;color:var(--ink-3)}
.sample{display:inline-block;margin-top:.5rem;font-size:.82rem;color:var(--gold-text);background:var(--gold-tint);padding:.2rem .5rem;border-radius:4px}
.quote{margin:0;padding:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);position:relative}
.quote::before{content:"“";position:absolute;top:-.6rem;left:1.2rem;font:700 3rem/1 var(--display);color:var(--gold)}
.quote blockquote{margin:0 0 var(--s2);font:400 1.08rem/1.65 var(--sans);color:var(--ink)}
.quote figcaption{font-size:.92rem;color:var(--ink-3)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s3)}
.filters button{font:500 .95rem/1 var(--sans);min-height:2.6rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}
.empty{color:var(--ink-3);font-style:italic}

/* ---------- Pricing ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
table.plans{width:100%;border-collapse:collapse;font-size:.98rem}
.plans th,.plans td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.plans thead th{font:600 .9rem/1.3 var(--sans);color:#fff;background:var(--emerald-deep)}
.plans tbody tr:nth-child(even){background:var(--paper)}
.plans tbody tr:last-child td,.plans tbody tr:last-child th{border-bottom:0}
.plans .price{font:700 1.2rem/1.2 var(--display);color:var(--emerald);white-space:nowrap}

/* ---------- Forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3)}
.field{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.95rem}
.field.full{grid-column:1/-1}
.field .hint{font-weight:400;color:var(--ink-3);font-size:.88rem}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-s);padding:.75rem .85rem;min-height:3rem;width:100%}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-tint)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--danger)}
.req{color:var(--danger)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.status{grid-column:1/-1;margin:0;padding:0;font-weight:600}
.status:empty{display:none}
.status[data-kind="ok"]{color:var(--ok);background:var(--emerald-tint);padding:var(--s2);border-radius:var(--r-s)}
.status[data-kind="error"]{color:var(--danger);background:#F7E4E4;padding:var(--s2);border-radius:var(--r-s)}
.status[data-kind="busy"]{color:var(--ink-3)}

/* ---------- CTA band ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.cta h2{margin-bottom:.3rem}
.cta p{margin:0;color:var(--on-dark-2)}
.band-ink .btn-primary{background:var(--gold-btn);color:var(--ink)}
.band-ink .btn-primary:hover{background:var(--gold-btn-2)}
.band-ink .btn-wa{background:transparent;color:var(--on-dark);border-color:rgba(246,241,228,.45)}
.band-ink .btn-wa:hover{border-color:var(--gold-light);color:#fff}

/* ---------- Footer ---------- */
.site-foot{background:var(--night);color:var(--on-dark-2);padding-block:var(--s5) var(--s3);font-size:.97rem;border-top:3px solid var(--gold)}
.site-foot a{color:var(--on-dark);text-decoration:none}
.site-foot a:hover{color:var(--gold-light);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s4)}
.foot-grid h2{font:600 1.05rem/1.3 var(--display);color:var(--gold-light);margin-bottom:.8rem}
.foot-grid h2::after{display:none}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:.45rem 0}
.site-foot .brand{color:#fff;margin-bottom:var(--s2)}
.site-foot .brand-name small{color:var(--on-dark-2)}
.foot-base{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(199,214,207,.2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);color:var(--on-dark-2);font-size:.9rem}

/* ---------- Places (time zones) ---------- */
.places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.places li{margin:0;padding:.9rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.places strong{display:block;font:600 1.08rem/1.3 var(--display)}
.places time{color:var(--ink-3);font-size:.93rem;font-variant-numeric:tabular-nums}
.places li.you{border-color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald);background:var(--emerald-tint)}

/* ---------- 404 ---------- */
.nf{padding-block:var(--s6)}
.nf .ar{font-size:5rem;color:var(--gold-ui);display:block;line-height:1}

/* ---------- Mobile action bar ---------- */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:.6rem;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));background:rgba(250,247,239,.97);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(11,61,53,.45);transform:translateY(110%);transition:transform .2s ease}
.action-bar.show{transform:none}
.action-bar .btn{flex:1;min-height:3rem}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero-grid,.split,.split-wide,.cta,.foot-grid{grid-template-columns:1fr}
  .hero{padding-block:var(--s4)}
  .hero h1{font-size:clamp(2.05rem,1.4rem + 4vw,2.7rem);max-width:none}
  .hero .lead{font-size:1.08rem}
  .hero .actions .btn{flex:1 1 12rem}
  .hero-word{width:13.5rem;padding:3.2rem 1rem 1.3rem}
  .hero-word .ar{font-size:4.6rem}
  .hero-word figcaption{font-size:.85rem}
  .path{grid-template-columns:1fr;gap:var(--s2);padding-top:var(--s2)}
  .path::before{left:1.45rem;right:auto;top:var(--s2);bottom:1.45rem;border-top:0;border-left:1.5px dashed var(--gold-ui)}
  .path li{display:grid;grid-template-columns:2.9rem 1fr;gap:var(--s2);align-items:start;padding:0}
  .path li > a{grid-column:1/-1;display:grid;grid-template-columns:2.9rem 1fr;column-gap:var(--s2);align-items:start}
  .path li > a .marker{grid-row:1/3}
  .marker{margin:0}
  .row{grid-template-columns:1fr;gap:.4rem}
  .steps,.points{grid-template-columns:1fr;gap:var(--s2)}
  .form{grid-template-columns:1fr}
  .band{padding-block:var(--s4)}
  .band-head{margin-bottom:var(--s3)}
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-bar{display:flex}
  .lead{font-size:1.08rem}
  .foot-grid{gap:var(--s3)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.site-head,.site-foot,.band-ink,.actions,.action-bar{display:none}body{background:#fff}.hero{background:#fff;color:#000}.hero h1{color:#000}}

/* ---------- V21: high-conversion trial form ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r-l);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);box-shadow:0 30px 60px -40px rgba(11,61,53,.45);max-width:38rem}
.trial{display:grid;gap:1.35rem}
.trial .q{display:grid;gap:.45rem;margin:0;padding:0;border:0;min-width:0}
.trial label,.trial legend{font:600 1rem/1.3 var(--sans);color:var(--ink);padding:0}
.trial legend{margin-bottom:.55rem}
.trial input:not([type=radio]),.trial select,.trial textarea{font:400 1.05rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);padding:.8rem .9rem;min-height:3.2rem;width:100%}
.trial textarea{min-height:5.5rem;resize:vertical}
.trial input:focus,.trial select:focus,.trial textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-tint)}
.trial [aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 3px #F7E4E4!important}
.trial .hint{margin:0;color:var(--ink-3);font-size:.9rem}
.trial .err{margin:0;color:var(--danger);font-size:.92rem;font-weight:600}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;color:inherit;border-color:transparent;accent-color:var(--emerald)}
.chip span{display:grid;place-items:center;text-align:center;min-height:3.1rem;padding:.5rem .4rem;border:1.5px solid var(--line);border-radius:var(--r-s);background:#fff;font:500 .97rem/1.2 var(--sans);color:var(--ink-2);transition:border-color .15s,background-color .15s}
.chip input:checked + span{border-color:var(--emerald);background:var(--emerald-tint);color:var(--emerald);font-weight:600;box-shadow:inset 0 0 0 1px var(--emerald)}
.chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.phone{display:grid;grid-template-columns:minmax(7.5rem,38%) 1fr;gap:.5rem}
.phone select{padding-right:.4rem;text-overflow:ellipsis}
.trial .two{grid-template-columns:1fr 1fr;gap:.9rem}
.trial .two > div{display:grid;gap:.45rem}
.more{border:1px dashed var(--line);border-radius:var(--r-s);padding:0 1rem}
.more summary{cursor:pointer;list-style:none;padding:.9rem 0;font-weight:600;color:var(--emerald);display:flex;align-items:center;gap:.5rem;min-height:3rem}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--emerald-tint);font-size:1.1rem}
.more[open] summary::before{content:"−"}
.more-body{display:grid;gap:1.1rem;padding-bottom:1rem}
.btn-lg{min-height:3.6rem;font-size:1.1rem;width:100%}
.assure{list-style:none;margin:-.35rem 0 0;padding:0;display:grid;gap:.35rem;color:var(--ink-2);font-size:.95rem}
.assure li{margin:0;padding-left:1.6rem;position:relative}
.assure li::before{content:"";position:absolute;left:.2rem;top:.45em;width:.85rem;height:.45rem;border-left:2px solid var(--emerald);border-bottom:2px solid var(--emerald);transform:rotate(-45deg)}
.fine{margin:0;font-size:.86rem;color:var(--ink-3);max-width:none}
.done{text-align:center;padding:1.5rem .5rem}
.done:focus{outline:none}
.done-mark{width:4.2rem;height:4.2rem;margin:0 auto 1rem;border-radius:50%;background:var(--emerald);position:relative}
.done-mark::after{content:"";position:absolute;left:1.35rem;top:1.25rem;width:1.5rem;height:.8rem;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.done h2::after{display:none}
.done p{margin-inline:auto}
.steps-mini{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:s}
.steps-mini li{counter-increment:s;position:relative;padding-left:2.6rem;margin:0 0 1rem;color:var(--ink-2)}
.steps-mini li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--emerald);color:#fff;display:grid;place-items:center;font:700 .95rem/1 var(--display)}
.steps-mini strong{display:block;color:var(--ink);font-family:var(--display);font-size:1.05rem}
@media (max-width:860px){.form-card{border-radius:var(--r-m);max-width:none}}
@media (max-width:520px){.chips{grid-template-columns:repeat(2,minmax(0,1fr))}.trial .two{grid-template-columns:1fr}.phone{grid-template-columns:7.2rem 1fr}}

[hidden]{display:none!important}
.group-head h2{margin:0;font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.section-link a{font-weight:600}

/* =====================================================================
   V25: emerald inner-page headers, footer contact and social links,
   fee plans, tuition note, teacher profiles. Still only emerald, gold and ivory.
   ===================================================================== */
.btn-outline{background:var(--card);color:var(--emerald);border-color:var(--emerald)}
.btn-outline:hover{background:var(--emerald);color:#fff}

/* Inner page header: deep emerald like the home hero */
.page-head{background:var(--emerald-deep) var(--pattern);background-size:96px;color:var(--on-dark);border-bottom:0;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--emerald-deep) 0%,rgba(11,61,53,.95) 50%,rgba(11,61,53,.7) 100%);pointer-events:none}
.page-head > .wrap{position:relative}
.page-head::after{height:3px;background:linear-gradient(90deg,var(--gold),rgba(194,155,64,.15) 70%)}
.page-head h1{color:#fff}
.page-head .lead{color:var(--on-dark-2)}
.page-head .crumbs,.page-head .crumbs a{color:var(--on-dark-2)}
.page-head .crumbs li:last-child{color:var(--gold-light)}
.page-head .crumbs li+li::before{color:var(--gold)}
.page-head .crumbs a:hover{color:#fff}
.page-head .ph-text > .actions .btn-gold,.page-head .ph-text > .actions .btn-primary{background:var(--gold-btn);color:var(--ink)}
.page-head .ph-text > .actions .btn-wa{background:transparent;color:var(--on-dark);border-color:rgba(246,241,228,.45)}
.page-head .glance{color:var(--ink)}
.page-head .glance .btn-wa{background:var(--card)}
.page-head :focus-visible{outline-color:var(--gold-light)}

/* Footer: contact list and social icons */
.foot-contact{list-style:none;padding:0;margin:var(--s2) 0 0;display:grid;gap:.55rem}
.foot-contact li{margin:0}
.foot-contact a{display:inline-flex;align-items:center;gap:.6rem;min-height:2.4rem;word-break:break-word}
.foot-contact svg{width:1.15rem;height:1.15rem;flex:none;color:var(--gold-light)}
.foot-follow{margin:var(--s3) 0 .6rem;font:600 .95rem/1.3 var(--display);color:var(--gold-light)}
.social{list-style:none;padding:0;margin:0;display:flex;gap:.6rem;flex-wrap:wrap}
.social li{margin:0}
.social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(230,205,138,.45);color:var(--on-dark);transition:background-color .2s,color .2s,border-color .2s}
.social a:hover{background:var(--gold-btn);border-color:var(--gold-btn);color:var(--night);text-decoration:none}
.social svg{width:1.2rem;height:1.2rem}

/* Fee strip on the home page */
.fee-strip{margin-top:var(--s4);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r-m)}
.fee-strip p{margin:0}
.fee-strip-k{font-size:.92rem;color:var(--ink-3)}
.fee-strip-v{font:700 2rem/1.1 var(--display);color:var(--emerald)}
.fee-strip-v span{font:500 1rem/1 var(--sans);color:var(--ink-3)}
.fee-strip ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.fee-strip li{margin:0;padding:.45rem .85rem;border-radius:999px;background:var(--emerald-tint);color:var(--emerald);font-size:.95rem}
@media (max-width:760px){.fee-strip{grid-template-columns:1fr}.fee-strip .btn{justify-self:start}}

/* Fee plan cards */
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3);transition:box-shadow .25s,transform .25s,border-color .25s}
.plan:hover{box-shadow:0 22px 44px -32px rgba(11,61,53,.55);transform:translateY(-2px)}
.plan.is-popular{border-color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald)}
.plan.is-rec{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold),0 22px 44px -30px rgba(124,94,22,.55)}
.plan-badge,.plan-rec{position:absolute;top:-.8rem;left:var(--s3);margin:0;padding:.2rem .75rem;border-radius:999px;font:600 .82rem/1.4 var(--sans)}
.plan-badge{background:var(--emerald);color:#fff}
.plan-rec{left:auto;right:var(--s3);background:var(--gold-btn);color:var(--ink)}
.plan header h3{font-size:1.45rem;margin:0}
.plan-tag{margin:.1rem 0 0;color:var(--gold-text);font-weight:600;font-size:.95rem}
.plan-price{margin:var(--s2) 0 .2rem;display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.plan-price .amt{font:700 2.5rem/1 var(--display);color:var(--emerald)}
.plan-price .per{color:var(--ink-3)}
.plan-facts{list-style:none;padding:0;margin:var(--s2) 0;display:grid;gap:.35rem;color:var(--ink-2);font-size:.97rem}
.plan-facts li{margin:0;padding-left:1.3rem;position:relative}
.plan-facts li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--gold);transform:rotate(45deg)}
.plan-facts strong{color:var(--ink);font-size:1.05rem}
.week{margin:0 0 var(--s2);padding:.85rem .85rem .6rem;background:var(--paper);border-radius:var(--r-m)}
.week ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;align-items:end;height:5.2rem}
.week li{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3rem;height:100%}
.week i{display:block;width:100%;max-width:1.7rem;height:.35rem;border-radius:6px;background:var(--line)}
.week li.on i{height:calc(var(--len) * 1px * .62);background:linear-gradient(180deg,var(--emerald),var(--emerald-deep));box-shadow:inset 0 2px 0 var(--gold)}
.week span{font-size:.7rem;color:var(--ink-3);line-height:1}
.week li.on span{color:var(--emerald);font-weight:600}
.week figcaption{margin-top:.55rem;font-size:.82rem;color:var(--ink-3);text-align:center}
.plan-each{margin:0 0 .4rem;font-weight:600;color:var(--gold-text)}
.plan-best{margin:0 0 var(--s3);color:var(--ink-2);font-size:.95rem}
.plan .btn{margin-top:auto;width:100%}
@media (max-width:900px){.plans-grid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}.plan{padding-top:calc(var(--s3) + .3rem)}}

/* Plan picker */
.picker{margin-top:var(--s4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);background:var(--emerald-deep) var(--pattern);background-size:96px;color:var(--on-dark);border-radius:var(--r-l)}
.picker-q{grid-row:span 2}
.picker h3{color:#fff;font-size:1.4rem}
.picker-q p{color:var(--on-dark-2);margin:0}
.picker fieldset{border:0;margin:0;padding:0;min-width:0}
.picker legend{font-weight:600;margin-bottom:.45rem;color:var(--gold-light)}
.picker .chips{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.picker .chip span{background:rgba(255,255,255,.06);border-color:rgba(246,241,228,.3);color:var(--on-dark)}
.picker .chip input:checked + span{background:var(--gold-btn);border-color:var(--gold-btn);color:var(--ink);box-shadow:none}
.picker-out{grid-column:1 / -1;max-width:none;margin:var(--s1) 0 0;padding:var(--s2) var(--s3);background:var(--card);color:var(--ink-2);border-radius:var(--r-m);border-left:4px solid var(--gold)}
.picker-out strong{color:var(--emerald)}
.picker-out a{font-weight:600;white-space:nowrap}
@media (max-width:860px){.picker{grid-template-columns:1fr;padding:var(--s3)}.picker-q{grid-row:auto}}

/* Tuition note */
.tuition-note{margin:0 auto;max-width:46rem;text-align:center;padding:var(--s4) var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);position:relative}
.tuition-note::before,.tuition-note::after{content:"";position:absolute;left:50%;width:7.5rem;height:14px;transform:translateX(-50%);background:var(--divider) center/contain no-repeat}
.tuition-note::before{top:1rem}.tuition-note::after{bottom:1rem}
.tuition-note .ar{display:block;font:400 1.6rem/1.8 var(--arabic);color:var(--gold-text);margin:var(--s1) 0}
.tuition-note h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.tuition-note blockquote{margin:0}
.tuition-note blockquote p{color:var(--ink-2);font-size:1.08rem}
.tuition-note blockquote p:first-child{font:600 1.25rem/1.55 var(--display);color:var(--emerald)}
.tuition-note figcaption{margin-top:var(--s2);font-size:.9rem;color:var(--gold-text)}

/* What your monthly fee supports */
.supports{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s4);align-items:start}
.support-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.support-list li{margin:0;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:var(--s2);align-items:start}
.support-list h3{font-size:1.12rem;margin:0 0 .15rem}
.support-list p{margin:0;color:var(--ink-2);font-size:.97rem}
.si{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--emerald-tint);color:var(--emerald);font:400 1.35rem/1 var(--arabic);border:1px solid rgba(14,90,75,.18)}
.shot{margin:0;position:sticky;top:calc(var(--head-h) + 1rem)}
.shot-frame{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 34px 60px -40px rgba(11,61,53,.6);padding:.6rem}
.shot-frame img{border-radius:calc(var(--r-l) - .5rem);width:100%}
.shot figcaption{margin-top:.6rem;font-size:.9rem;color:var(--ink-3);text-align:center}
@media (max-width:900px){.supports{grid-template-columns:1fr}.shot{position:static}}

/* Fee table */
.fee-table td,.fee-table th{white-space:nowrap}
.fine{margin-top:.8rem;font-size:.9rem;color:var(--ink-3)}
.course-fee{padding:var(--s2);background:var(--gold-tint);border-radius:var(--r-m);border-left:4px solid var(--gold)}
.mail-line{margin-top:.6rem}

/* Trial form: requested teacher */
.picked{margin:-.3rem 0 0;padding:.6rem .9rem;border-radius:var(--r-s);background:var(--emerald-tint);color:var(--emerald);font-weight:600}

/* Teacher profiles */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--s3)}
.tcard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;inset:0 0 auto;height:3.9rem;background:var(--emerald-deep) var(--pattern);background-size:72px}
.tcard-top{position:relative;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s2);align-items:end;padding-top:.9rem}
.tcard .avatar{width:5.5rem;height:5.5rem;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--emerald);color:var(--gold-light);font:700 2.1rem/1 var(--display);border:4px solid var(--card);box-shadow:0 0 0 2px var(--gold)}
.tcard .avatar img{width:100%;height:100%;object-fit:cover}
.tcard h3{margin:0;font-size:1.3rem}
.trole{margin:0;color:var(--gold-text);font-weight:600;font-size:.93rem}
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{margin:0;padding:.25rem .7rem;border-radius:999px;background:var(--emerald-tint);color:var(--emerald);font-size:.88rem;font-weight:600}
.tbio{margin:0;color:var(--ink-2)}
.tquote{margin:0;padding-left:.9rem;border-left:3px solid var(--gold);font-style:italic;color:var(--ink-2)}
.tfacts{margin:0;display:grid;gap:.1rem;border-top:1px dashed var(--line);padding-top:.6rem}
.tfacts > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.6rem;padding:.3rem 0}
.tfacts dt{color:var(--ink-3);font-size:.9rem}
.tfacts dd{margin:0;font-weight:600;font-size:.95rem}
.tcard .btn{margin-top:auto;align-self:flex-start}
.tempty{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;padding:var(--s3);border:1px dashed var(--gold-ui);border-radius:var(--r-l);background:var(--card)}
.tempty p{margin:0;max-width:44rem;color:var(--ink-2)}
.filters button{font:600 .95rem/1 var(--sans)}
.qualities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.qualities > div{padding:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);text-align:center}
.q-ar{display:block;font:400 2rem/1.3 var(--arabic);color:var(--gold-text);margin-bottom:.4rem}
.qualities h3{font-size:1.15rem}
.qualities p{margin:0;color:var(--ink-2);font-size:.96rem}
@media (max-width:960px){.qualities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qualities{grid-template-columns:1fr}.tfacts > div{grid-template-columns:1fr;gap:0}}
.shot-frame{max-height:44rem;position:relative}
.shot-frame::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.6rem;height:5rem;border-radius:0 0 calc(var(--r-l) - .5rem) calc(var(--r-l) - .5rem);background:linear-gradient(transparent,rgba(17,39,28,.95));pointer-events:none}
@media (max-width:900px){.shot-frame{max-height:34rem}}