/* PTA Web Site — MDCAT redesign draft v2 (27 Oct 2026).
   Colours, fonts and buttons follow the PTA Web App (web-app\design.md v0.2, Sign in page M-01). */
:root{
  /* PTA colour scheme, approved by the owner 27 October 2026 (New\2026-10-27-pta-colour-scheme.html). One colour, one job. */
  --navy:#1C3C77;        /* dark sections: header, hero, dark bands, footer (Home V2 change 46, Zubair 28 Oct 2026: was #012463) */
  --ink:#0B1B45;         /* text on light; text on teal and gold */
  --action:#E31836;      /* main buttons only, white label; never text on navy */
  --teal:#22D3C5;        /* highlights on dark only */
  --teal-text:#0B6F68;   /* labels, small headings, links on light */
  --gold:#F5C84C;        /* dates and one badge, on dark only */
  --page:#EAF5FD; --card:#FFFFFF; --line:#DCE6F3; --soft:#5A6A8A; --on-dark-soft:#A9CFF3; --teal-tint:#D6F6F0; --red-text:#B3122B;
  --plan-card:#1C3C77;
  --orange:#F28C28; --orange-tint:#FDEBD6; --orange-text:#8A4B00; /* Home V2 sample result, "needs improvement" (Zubair, 28 Oct 2026; outside the owner's scheme, to confirm, D29) */   /* Home V2 price card (Zubair, 27 Oct 2026; outside the owner's scheme, to confirm) */
  /* states and status (not brand colours) */
  --action-hover:#C01530; --navy-hover:#2A4C8C /* Home V2 change 47: a step lighter than the new navy #1C3C77 (was #0E3274) */; --red-tint:#FBE3E7; --navy-tint:#DDE3F5;
  /* older names, kept as aliases so existing rules keep working */
  --brand:var(--navy); --brand-hover:var(--navy-hover); --pic-navy:var(--navy); --deep:var(--ink); --navy-mid:var(--navy-hover); --closing:var(--navy-hover);
  --teal-label:var(--teal-text); --teal-edge:var(--teal); --teal-edge-2:var(--teal); --teal-soft:var(--teal);
  --box:var(--page); --box-line:var(--line); --card-line:var(--line); --div:var(--line); --light-blue:var(--on-dark-soft); --red:var(--action);
  --shadow-card:0 4px 16px rgba(27,64,140,.06); --shadow-glass:0 24px 60px rgba(27,64,140,.12); --shadow-btn:0 8px 20px rgba(11,40,95,.25);
  --grad-entry:radial-gradient(55% 45% at 100% 0%,#C4FAF4 0%,rgba(196,250,244,0) 75%),radial-gradient(55% 35% at 0% 100%,#84AEE4 0%,rgba(132,174,228,0) 80%),radial-gradient(50% 35% at 100% 100%,#A2C8F2 0%,rgba(162,200,242,0) 80%),linear-gradient(180deg,#F1FBFE 0%,#E6F5FE 55%,#D2E7FA 100%); /* decorative wash, kept */
  --grad-navy:var(--navy) /* Home V2 change 46: solid, was a navy gradient with a teal glow */;
  --sans:"Manrope",system-ui,sans-serif; --serif:"Newsreader",Georgia,serif;
  --r:20px; --wrap:1180px;
}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
button{font:inherit;cursor:pointer}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.dot-t{color:var(--teal)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Type ---------- */
.label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-label);margin-bottom:12px}
.on-dark .label,.dark .label{color:var(--teal)}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.015em;color:var(--deep);margin:0}
.dark .h2,.on-dark .h2{color:#fff}
.bar{display:block;width:50px;height:4px;border-radius:2px;background:var(--teal);margin:14px 0 16px}
.center .bar{margin-left:auto;margin-right:auto}
.lead{font-size:18px;color:var(--soft);max-width:660px;margin:0}
.dark .lead{color:var(--light-blue)}
.sec-head{margin-bottom:44px}
.sec-head.center{text-align:center}.sec-head.center .lead{margin:0 auto}
.split{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.split .lead{max-width:440px}

/* ---------- Buttons (as in the Web App) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border-radius:12px;font-weight:700;font-size:17px;text-decoration:none;border:0;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(4px)}
.btn-pri{background:var(--brand);color:#fff;border:1.5px solid var(--teal-edge);box-shadow:0 0 0 1px rgba(43,208,200,.25),var(--shadow-btn)}
.btn-pri:hover{background:var(--brand-hover);color:#fff}
.btn-sec{background:#fff;color:var(--deep);border:2px solid var(--teal-edge-2)}
.btn-sec:hover{background:var(--teal-tint);color:var(--deep)}
.btn-teal{background:var(--teal);color:var(--deep);box-shadow:0 10px 30px -8px rgba(34,211,197,.6)}
.btn-teal:hover{background:var(--teal);filter:brightness(1.08);color:var(--deep)}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.2);color:#fff}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:10px}
.btn-block{width:100%;white-space:normal;text-align:center;padding:12px 20px}
.glow::after{content:"";position:absolute;inset:-5px;border-radius:15px;border:2px solid var(--teal);opacity:0;animation:glow 2.6s infinite}
@keyframes glow{0%{opacity:.8;transform:scale(.97)}70%,100%{opacity:0;transform:scale(1.08)}}

/* ---------- Announcement + header ---------- */
.announce{background:var(--pic-navy);color:#fff;font-size:13.5px;font-weight:700;text-align:center;padding:8px 14px;position:relative;z-index:101}
.announce b{color:var(--gold)}
.announce a{color:var(--teal);text-decoration:none}
.hdr{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s}
.hdr-in{display:flex;align-items:center;gap:18px;height:74px}
.hdr .logo img{height:44px;width:auto}
.hdr .logo .l-w{display:none}
.hdr.dark .logo .l-c{display:none}.hdr.dark .logo .l-w{display:block}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;color:var(--deep)}
.nav a:hover,.nav a[aria-current]{background:rgba(11,40,95,.08)}
.hdr.dark .nav a{color:#fff}
.hdr.dark .nav a:hover,.hdr.dark .nav a[aria-current]{background:rgba(255,255,255,.14)}
.hdr-cta{display:flex;gap:6px;align-items:center}
.hdr .signin{font-weight:800;font-size:15px;text-decoration:none;padding:9px 14px;color:var(--deep)}
.hdr.dark .signin{color:#fff}
.hdr.scrolled{background:rgba(234,245,253,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--card-line)}
.hdr.dark.scrolled{background:rgba(28,60,119,.82);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1.5px solid currentColor;background:transparent;color:var(--deep);position:relative}
.hdr.dark .menu-btn{color:#fff}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:12px;width:20px;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.menu-btn span{top:21px}.menu-btn span::before{content:"";left:0;top:-6px}.menu-btn span::after{content:"";left:0;top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}
.nav .m-only{display:none}

/* ---------- Hero (the Sign in picture) ---------- */
.hero{position:relative;margin-top:-74px;color:#fff;background:var(--pic-navy) url("../images/mdcat-hero.webp") right 8% bottom / auto 100% no-repeat;min-height:max(720px,100vh);display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,60,119,1) 0%,rgba(28,60,119,.96) 30%,rgba(28,60,119,.55) 52%,rgba(28,60,119,0) 70%),linear-gradient(0deg,rgba(28,60,119,.85) 0%,rgba(28,60,119,0) 28%)}
.hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:130px 0 40px}
.hero-copy{max-width:600px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--teal);margin-bottom:16px}
.live{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:live 1.8s infinite;flex:none}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(34,211,197,.7)}70%{box-shadow:0 0 0 10px rgba(34,211,197,0)}100%{box-shadow:0 0 0 0 rgba(34,211,197,0)}}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(48px,6.6vw,86px);line-height:1;letter-spacing:-.015em;margin:0 0 18px}
.hero h1 .t{color:var(--teal)}
.rot{display:inline-grid;vertical-align:bottom}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(35%);transition:opacity .45s,transform .45s;color:var(--teal)}
.rot>span.on{opacity:1;transform:none}.rot>span.out{opacity:0;transform:translateY(-35%)}
.hero-sub{font-size:clamp(17px,1.6vw,20px);color:var(--light-blue);max-width:560px;margin:0 0 28px}
.hero-sub b{color:#fff}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.slogan{display:inline-block;margin-top:26px;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--teal);background:rgba(2,40,72,.72);border:1.5px solid var(--teal)}
.slogan b{color:#fff}
.hero-strip{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:30px;max-width:600px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:14px 16px;backdrop-filter:blur(12px)}
.hs-t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--light-blue);line-height:1.35;max-width:150px}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.count div{background:rgba(28,60,119,.6);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 4px;text-align:center}
.count b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.count small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--light-blue);font-weight:800}
.hs-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--light-blue)}

/* ---------- Stats band ---------- */
.stats{position:relative;z-index:3;margin-top:-58px}
.stats-in{display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:var(--shadow-glass);backdrop-filter:blur(12px)}
.st{padding:22px 18px;text-align:center;border-left:1px solid var(--card-line)}
.st:first-child{border-left:0}
.st b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.2vw,42px);line-height:1.05;color:var(--deep);letter-spacing:-.01em}
.st b i{font-style:normal;color:var(--teal-label)}
.st small{display:block;margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);line-height:1.4}
.st.hot b{color:var(--brand)}

/* ---------- Sections ---------- */
.sec{padding:96px 0;position:relative}
.sec.tight{padding:64px 0}
.sec.white{background:#fff}
.sec.entry{background:var(--grad-entry)}
.sec.dark{background:var(--grad-navy);color:#fff;overflow:hidden}
.card{background:#fff;border:1px solid var(--card-line);border-radius:var(--r);box-shadow:var(--shadow-card)}
.glass{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:28px;box-shadow:var(--shadow-glass);backdrop-filter:blur(10px)}

/* funnel steps */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.jstep{padding:24px;position:relative;transition:transform .3s,box-shadow .3s}
.jstep:hover{transform:translateY(-4px);box-shadow:var(--shadow-glass)}
.jstep .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;margin-bottom:14px;border:1.5px solid var(--teal-edge)}
.jstep.free .n{background:var(--teal);color:var(--deep);border-color:var(--teal)}
.jstep h3{margin:0 0 6px;font-size:18px;color:var(--deep)}
.jstep p{margin:0;color:var(--soft);font-size:15px}
.tag{position:absolute;top:20px;right:20px;font-size:11px;font-weight:800;letter-spacing:.1em;padding:5px 10px;border-radius:999px;background:var(--teal-tint);color:var(--deep)}
.tag.pay{background:var(--navy-tint);color:var(--brand)}
.journey .arrow-line{display:none}

/* ---------- Syllabus explorer ---------- */
.syl{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.syl-tabs{display:grid;gap:10px}
.syl-tab{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;padding:16px 18px;border-radius:16px;background:#fff;border:1.5px solid var(--card-line);box-shadow:var(--shadow-card);color:var(--deep);transition:border-color .2s,background .2s,transform .2s}
.syl-tab:hover{transform:translateX(3px)}
.syl-tab b{font-size:17px}
.syl-tab span{font-size:13px;color:var(--soft);font-weight:600}
.syl-tab em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:800;font-size:13px;padding:5px 10px;border-radius:999px;background:var(--box);color:var(--brand)}
.syl-tab[aria-selected=true]{background:var(--brand);color:#fff;border-color:var(--teal-edge);box-shadow:var(--shadow-btn)}
.syl-tab[aria-selected=true] span{color:var(--light-blue)}
.syl-tab[aria-selected=true] em{background:var(--teal);color:var(--deep)}
.syl-panel{padding:28px}
.syl-top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:end;justify-content:space-between;margin-bottom:20px}
.syl-top h3{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1;margin:0;color:var(--deep)}
.syl-figs{display:flex;gap:10px;flex-wrap:wrap}
.fig{background:var(--box);border:1px solid var(--box-line);border-radius:12px;padding:8px 14px;text-align:center;min-width:86px}
.fig b{display:block;font-size:22px;font-weight:800;color:var(--brand);line-height:1.1}
.fig small{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.units li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--card-line);border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:var(--ink);animation:pop .35s both}
.units .uc{font-size:11.5px;font-weight:800;color:var(--teal-label);letter-spacing:.04em}
.units .lc{font-size:12px;font-weight:800;color:var(--brand);background:var(--navy-tint);border-radius:999px;padding:2px 8px;white-space:nowrap}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.syl-note{margin:16px 0 0;font-size:13.5px;color:var(--soft)}
.hier{display:grid;grid-template-columns:1fr auto 1fr auto 1.4fr;gap:10px;align-items:stretch;margin-top:26px}
.hier .hb{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--card-line);box-shadow:var(--shadow-card)}
.hier .hb.lo{background:var(--brand);color:#fff;border:1.5px solid var(--teal-edge)}
.hier small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-label);margin-bottom:4px}
.hier .lo small{color:var(--teal)}
.hier b{font-size:16px;color:var(--deep)}
.hier .lo b{color:#fff}
.hier .code{display:inline-block;margin-top:6px;font-size:12px;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--box);color:var(--brand)}
.hier .lo .code{background:rgba(255,255,255,.14);color:#fff}
.hier .ch{display:grid;place-items:center;color:var(--teal-label);font-size:24px;font-weight:800}
.lo-gets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lo-gets span{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}

/* ---------- Free trial showcase ---------- */
.trial{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ticks{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.ticks li::before{content:"✓";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--teal-tint);color:var(--teal-text);font-weight:800;font-size:14px}
.dark .ticks li::before{background:rgba(34,211,197,.18);color:var(--teal)}
.tr-card{padding:28px;color:var(--ink);position:relative}
.tr-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.ring{--p:65;width:104px;height:104px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--line) 0)}
.ring b{width:80px;height:80px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--deep)}
.tr-head h3{margin:0;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--deep);line-height:1.1}
.tr-head p{margin:4px 0 0;color:var(--soft);font-size:14px}
.sbars{display:grid;gap:10px}
.sb{display:grid;grid-template-columns:130px 1fr 44px;gap:12px;align-items:center;font-size:14px;font-weight:700}
.sb .tr{height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.sb .tr i{display:block;height:100%;border-radius:10px;background:var(--teal);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.sb .tr i.lo{background:var(--red)}
.sb .v{text-align:right;color:var(--soft)}
.tr-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.tr-tags span{font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:999px;background:var(--teal-tint);color:var(--deep)}
.tr-tags span.g{background:var(--red-tint);color:var(--red-text)}
.sample{position:absolute;top:-12px;right:20px;font-size:11px;font-weight:800;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:var(--gold);color:var(--deep)}
.trial-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.trial-meta div{text-align:center;padding:12px 6px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.trial-meta b{display:block;font-size:26px;font-weight:800;line-height:1.1}
.trial-meta small{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--light-blue)}

/* ---------- Week loop ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:26px}
.wd{text-align:center;font-size:13px;font-weight:800;color:var(--soft)}
.wd i{display:block;height:8px;border-radius:8px;background:var(--div);margin-bottom:8px}
.wd.s i{background:var(--teal)}.wd.t i{background:var(--brand)}.wd.r i{background:var(--gold)}
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lp{padding:22px}
.lp .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--teal-tint);font-size:24px;margin-bottom:14px}
.lp .day{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-label)}
.lp h3{font-size:18px;margin:4px 0 6px;color:var(--deep)}
.lp p{font-size:14.5px;color:var(--soft);margin:0}

/* ---------- App showcase (bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx{padding:24px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.bx:hover{transform:translateY(-4px);box-shadow:var(--shadow-glass)}
.bx h3{font-size:20px;line-height:1.2;margin:0 0 8px;color:var(--deep)}
.bx p{margin:0;color:var(--soft);font-size:15px}
.bx .label{font-size:12px;margin-bottom:8px}
.bx.nv{background:var(--grad-navy);border-color:transparent;color:#fff}
.bx.nv h3{color:#fff}.bx.nv p{color:var(--light-blue)}.bx.nv .label{color:var(--teal)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:16px 0 6px}
.days span{font-size:11.5px;font-weight:800;text-align:center;color:var(--light-blue)}
.days span::before{content:"";display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.18);margin-bottom:5px}
.days span.d::before{background:var(--teal)}.days span.n::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.subj-line{margin-top:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.subj-line b{display:block;font-size:16px}
.subj-line .pb{height:6px;border-radius:6px;background:rgba(255,255,255,.18);margin-top:10px;overflow:hidden}
.subj-line .pb i{display:block;height:100%;width:19%;background:var(--teal);border-radius:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--box);border:1px solid var(--box-line);color:var(--deep)}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px;align-items:end;height:84px}
.ladder i{display:grid;place-items:end center;border-radius:8px 8px 4px 4px;background:var(--box);border:1px solid var(--box-line);font-style:normal;font-size:11.5px;font-weight:800;color:var(--soft);padding-bottom:4px}
.ladder i.on{background:var(--brand);color:#fff;border-color:var(--teal-edge)}
.bands{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.bands span{padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:800}
.b-s{background:var(--teal-soft);color:var(--deep)}.b-d{background:var(--navy-tint);color:var(--navy)}.b-w{background:var(--red-tint);color:var(--red-text);border:1px solid var(--red)}.b-n{background:var(--page);color:var(--soft);border:1px dashed var(--soft)}
.next-skill{margin-top:14px;padding:14px;border-radius:14px;background:var(--teal-tint);border:1px solid var(--line)}
.next-skill small{font-size:12px;font-weight:800;color:var(--teal-label)}
.next-skill b{display:block;font-size:15px;color:var(--deep);margin-top:2px}
.perf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.perf div{border-radius:12px;padding:10px 6px;text-align:center}
.perf b{display:block;font-size:22px;font-weight:800}
.perf small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.p1{background:var(--teal-tint);color:var(--deep)}.p2{background:var(--red-tint);color:var(--red-text)}.p3{background:var(--navy-tint);color:var(--brand)}.p4{background:var(--navy-tint);color:var(--ink)}
.share{display:flex;height:40px;border-radius:10px;overflow:hidden;margin:16px 0 10px}
.share span{display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;font-weight:700;color:var(--light-blue)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mail{display:grid;gap:8px;margin-top:14px}
.mail div{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--box);border:1px solid var(--box-line);font-size:13.5px;font-weight:600}
.mail div b{color:var(--brand);font-size:12px;white-space:nowrap}

/* ---------- Leaderboard ---------- */
.lb-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.lb{padding:18px;color:var(--ink)}
.standing{background:var(--grad-navy);color:#fff;border-radius:18px;padding:18px}
.standing small.k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--light-blue);margin-bottom:10px}
.sd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sd div{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px}
.sd span{font-size:12.5px;color:var(--light-blue)}
.sd b{display:block;font-size:26px;font-weight:800;line-height:1.15}
.sd em{font-style:normal;font-size:12px;color:var(--light-blue)}
.lb-tabs{display:flex;gap:6px;background:var(--box);padding:5px;border-radius:999px;margin:16px 0 10px;width:max-content}
.lb-tabs button{border:0;background:transparent;color:var(--soft);font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px}
.lb-tabs button[aria-selected=true]{background:var(--brand);color:#fff}
.lbt{width:100%;border-collapse:collapse;font-size:14px}
.lbt th{text-align:left;font-size:12px;color:var(--soft);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--card-line)}
.lbt td{padding:9px 8px;border-bottom:1px solid var(--line);font-weight:600}
.lbt td.f{font-weight:800;color:var(--brand);text-align:right}.lbt th.f{text-align:right}
.lbt .bl{filter:blur(4.5px);user-select:none}
.lbt tr.you td{background:var(--teal-tint);font-weight:800}
.lb-cap{font-size:12px;color:var(--soft);margin:10px 4px 0}

/* ---------- Season ---------- */
.season{margin-top:20px;padding-top:40px}
.s-bar{height:16px;border-radius:16px;background:rgba(255,255,255,.14);position:relative}
.s-fill{position:absolute;left:0;top:0;bottom:0;border-radius:16px;background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#fff));width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.s-rev{position:absolute;top:0;bottom:0;right:0;border-radius:0 16px 16px 0;background:repeating-linear-gradient(45deg,rgba(245,200,76,.85) 0 8px,rgba(245,200,76,.55) 8px 16px)}
.s-ticks{position:relative;height:60px;margin-top:6px}
.s-tick{position:absolute;transform:translateX(-50%);text-align:center;font-size:12px;font-weight:800;color:var(--light-blue);white-space:nowrap;line-height:1.3}
.s-tick::before{content:"";display:block;width:2px;height:10px;background:rgba(255,255,255,.4);margin:0 auto 6px}
.s-tick.mock::before{background:var(--gold);height:14px}
.s-now{position:absolute;top:-40px;background:#fff;color:var(--deep);font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;white-space:nowrap;transform:translateX(-50%);transition:left 1.6s cubic-bezier(.2,.8,.2,1)}
.s-now::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.s-now.start{transform:none}.s-now.start::after{left:16px}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.s-card{border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:22px;background:rgba(255,255,255,.06)}
.s-card b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.s-card.g b{color:var(--gold)}
.s-card h3{margin:0 0 6px;font-size:21px;font-family:var(--serif);font-weight:600}
.s-card p{margin:0;color:var(--light-blue);font-size:15px}
.late{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:24px 28px}
.late .em{font-size:40px}
.late h3{margin:0 0 4px;font-size:21px;color:var(--deep)}
.late p{margin:0;color:var(--soft)}

/* ---------- Compare ---------- */
.cmp{padding:10px;max-width:900px;margin:0 auto}
.cmp-sw{display:grid;grid-template-columns:1fr 1fr;background:var(--box);border-radius:16px;padding:5px;margin-bottom:6px;position:relative}
.cmp-sw button{position:relative;z-index:1;border:0;background:transparent;padding:13px;font-weight:800;font-size:15px;color:var(--soft);border-radius:12px;transition:color .3s}
.cmp-sw button[aria-pressed=true]{color:#fff}
.cmp-sw .knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--soft);border-radius:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
.cmp[data-side=pta] .knob{transform:translateX(100%);background:var(--brand)}
.cmp-row{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:15px 18px;border-top:1px solid var(--card-line);align-items:center}
.cmp-row:first-of-type{border-top:0}
.cmp-row .what{font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--teal-label)}
.cmp-row .val{font-size:16px;font-weight:600;display:flex;gap:10px;align-items:center;color:var(--deep)}
.cmp-row .val::before{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-weight:800;font-size:13px}
.cmp[data-side=free] .val::before{content:"✕";background:var(--red-tint);color:var(--red-text)}
.cmp[data-side=pta] .val::before{content:"✓";background:var(--teal-tint);color:var(--teal-text)}
.cmp .val span{display:none}
.cmp[data-side=free] .val .f,.cmp[data-side=pta] .val .p{display:inline;animation:pop .35s}

/* ---------- Price ---------- */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.pcard{background:var(--grad-navy);color:#fff;border-radius:28px;padding:34px;border:1.5px solid var(--teal-edge);box-shadow:0 40px 80px -40px rgba(28,60,119,.8)}
.p-badge{display:inline-block;background:var(--teal);color:var(--deep);font-weight:800;font-size:12px;letter-spacing:.12em;padding:6px 12px;border-radius:999px}
.p-name{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:18px 0 4px}
.p-amt{font-family:var(--serif);font-weight:600;font-size:clamp(54px,6vw,76px);line-height:1;margin:0}
/* Plans (three lengths, 27 Oct 2026): one row per plan inside the navy card */
.plans{list-style:none;padding:0;margin:18px 0 14px;display:grid;gap:10px}
.plan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"len amt" "per amt";column-gap:14px;row-gap:2px;align-items:center;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.plan.best{border:1.5px solid var(--teal);background:rgba(34,211,197,.1)}
.pl-len{grid-area:len;font-weight:800;font-size:16px;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pl-tag{background:var(--teal);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pl-amt{grid-area:amt;font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1;white-space:nowrap;text-align:right}
.pl-per{grid-area:per;font-size:13.5px;color:var(--light-blue)}
@media (max-width:480px){.plan{grid-template-columns:1fr;grid-template-areas:"len" "amt" "per";row-gap:6px}.pl-amt{text-align:left}}
/* Home V2 (27 Oct 2026): price card full width, plans in 3 columns; How paying works below in 4 columns */
.price-stack{grid-template-columns:1fr;gap:56px;align-items:stretch}
.price-stack .pcard{background:var(--plan-card)}
.price-stack .plans{grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 16px}
.price-stack .plan{grid-template-columns:1fr;grid-template-areas:"len" "amt" "per";row-gap:10px;align-content:start;padding:22px 22px 20px}
.price-stack .pl-amt{text-align:left;font-size:clamp(30px,3.4vw,40px)}
.price-stack .p-note{margin:0 0 22px}
.price-stack .pcard .btn-block{display:flex;max-width:420px;margin:0 auto}
.price-stack .pay-steps{grid-template-columns:repeat(4,1fr);gap:16px}
.price-stack .ps{grid-template-columns:1fr;align-items:start;align-content:start;gap:14px;padding:20px}
@media (max-width:1060px){.price-stack .pay-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.price-stack .plans{grid-template-columns:1fr;gap:10px}.price-stack .plan{padding:16px 18px}}
@media (max-width:600px){.price-stack .pay-steps{grid-template-columns:1fr;gap:12px}.price-stack .ps{grid-template-columns:52px 1fr;align-items:center;gap:16px;padding:16px 18px}}
.p-note{font-size:13.5px;color:var(--light-blue);margin:4px 0 20px}
.p-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px}
.p-list li{display:flex;gap:10px;font-size:15px}
.p-list li::before{content:"✓";color:var(--teal);font-weight:800}
.pay-steps{display:grid;gap:12px;margin-top:22px}
.ps{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:16px 18px}
.ps .n{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:20px;background:var(--box);border:1px solid var(--box-line);color:var(--brand)}
.ps h3{margin:0;font-size:17px;color:var(--deep)}
.ps p{margin:2px 0 0;font-size:14.5px;color:var(--soft)}
.ps.hot{border-color:var(--teal-edge);box-shadow:0 0 0 4px rgba(34,211,197,.18)}
.ps.hot .n{background:var(--teal);border-color:var(--teal);color:var(--deep)}

/* ---------- Founder ---------- */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.f-card{background:var(--grad-navy);color:#fff;border-radius:28px;padding:32px}
.f-card .yr{font-family:var(--serif);font-weight:600;font-size:clamp(84px,10vw,130px);line-height:.85;color:var(--teal)}
.f-card p{font-size:19px;font-weight:700;margin:14px 0 0;max-width:380px}
.f-card small{display:block;margin-top:14px;color:var(--light-blue);font-size:14px}
.quote{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.25;margin:0 0 18px;color:var(--deep)}
.promise{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.promise div{padding:16px}
.promise b{display:block;font-size:15px;color:var(--deep);margin-bottom:3px}
.promise span{font-size:14px;color:var(--soft)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto}
.faq-search{display:flex;align-items:center;gap:10px;background:var(--box);border:1.5px solid var(--box-line);border-radius:12px;padding:0 16px;height:60px;margin:0 auto 22px;max-width:580px}
.faq-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(34,211,197,.35)}
.faq-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;min-width:0;color:var(--ink)}
.faq-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.faq-filters button{border:1.5px solid var(--card-line);background:#fff;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--deep)}
.faq-filters button[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--teal-edge)}
.qa{background:#fff;border:1px solid var(--card-line);border-radius:16px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-card)}
.qa[open]{box-shadow:var(--shadow-glass)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:18px 20px;font-weight:800;font-size:16.5px;color:var(--deep)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .no{flex:none;font-size:12px;font-weight:800;color:var(--teal-label);width:30px}
.qa summary::after{content:"+";margin-left:auto;flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--box);font-size:20px;font-weight:600;color:var(--brand);transition:transform .3s}
.qa[open] summary::after{transform:rotate(45deg);background:var(--teal);color:var(--deep)}
.qa .ans{padding:0 20px 20px 64px;color:var(--ink);font-size:15.5px}
.qa .ans p{margin:0 0 10px}.qa .ans ul{margin:0 0 10px;padding-left:18px}
.qa.hide{display:none}
.faq-group{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-label);margin:30px 0 12px}
.faq-empty{text-align:center;color:var(--soft);display:none}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--pic-navy) url("../images/mdcat-hero.webp") right -60px bottom / auto 125% no-repeat;color:#fff;border-radius:32px;padding:64px 48px;isolation:isolate;border:1.5px solid var(--teal-edge)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,60,119,1) 0%,rgba(28,60,119,.95) 45%,rgba(28,60,119,.3) 80%)}
.cta-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.6vw,60px);line-height:1.02;margin:0 0 14px;max-width:620px}
.cta-band p{font-size:18px;margin:0 0 26px;max-width:520px;color:var(--light-blue)}

/* ---------- Footer ---------- */
.ftr{background:var(--pic-navy);color:var(--on-dark-soft);padding:70px 0 30px;margin-top:96px;font-size:14.5px}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.ftr img{height:52px;width:auto;margin-bottom:14px}
.ftr h4{color:var(--teal);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px}
.ftr a{display:block;text-decoration:none;padding:4px 0;color:var(--on-dark-soft)}
.ftr a:hover{color:var(--teal)}
.ftr .pill{display:inline-flex;margin-top:12px;padding:9px 14px;border-radius:999px;background:rgba(34,211,197,.14);color:var(--teal);font-weight:800}
.ftr .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;font-size:13px}
.ftr .soc{display:flex;gap:16px}
.ftr .soc a{display:inline;padding:0;font-weight:800;letter-spacing:.08em;font-size:12px}
.ftr .disc{font-size:12.5px;color:var(--light-blue);margin:12px 0 0;max-width:330px;opacity:.8}

/* ---------- Floating ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:#fff}
.mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:95;display:none;gap:10px;align-items:center;background:rgba(28,60,119,.95);backdrop-filter:blur(12px);color:#fff;padding:10px 10px 10px 16px;border-radius:18px;border:1.5px solid var(--teal-edge);box-shadow:0 20px 40px -12px rgba(0,0,0,.55);transform:translateY(150%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mbar.show{transform:none}
.mbar p{margin:0;font-size:13px;line-height:1.3;flex:1;color:var(--light-blue)}
.mbar b{display:block;font-size:14.5px;color:#fff}

/* ---------- Inner page heads ---------- */
.phead{background:var(--grad-navy);color:#fff;margin-top:-74px;padding:150px 0 84px;position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(34,211,197,.08)}
.phead h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,6vw,76px);line-height:1;margin:0 0 16px;max-width:880px}
.phead h1 .t{color:var(--teal)}
.phead p{font-size:19px;color:var(--light-blue);max-width:640px;margin:0}

/* how it works */
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:100px 1fr 300px;gap:28px;align-items:start;padding:30px}
.step .numb{font-family:var(--serif);font-weight:600;font-size:80px;line-height:.85;color:var(--teal-label)}
.step h3{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.1;margin:0 0 10px;color:var(--deep)}
.step p{margin:0 0 10px}
.facts{background:var(--box);border:1px solid var(--box-line);border-radius:16px;padding:16px 18px;font-size:14px;display:grid;gap:8px}
.facts div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--div);padding-bottom:8px}
.facts div:last-child{border:0;padding:0}
.facts span{color:var(--soft)}.facts b{text-align:right;color:var(--deep)}
.tbl-scroll{overflow-x:auto;border-radius:20px}
.tests{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--card-line);border-radius:20px;overflow:hidden;font-size:15px;min-width:640px}
.tests th,.tests td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--card-line);vertical-align:top}
.tests th{background:var(--brand);color:#fff;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.tests tr:last-child td{border-bottom:0}
.tests td:first-child{font-weight:800;color:var(--deep)}
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.incl div{padding:20px}
.incl .e{font-size:26px}
.incl h3{margin:8px 0 4px;font-size:17px;color:var(--deep)}
.incl p{margin:0;font-size:14.5px;color:var(--soft)}
.tline{list-style:none;margin:0;padding:0;border-left:2px solid var(--div);display:grid;gap:22px}
.tline li{position:relative;padding-left:26px}
.tline li::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #fff}
.tline b{display:block;font-size:13px;letter-spacing:.12em;color:var(--teal-label)}
.tline span{font-weight:700;font-size:17px;color:var(--deep)}
.tline small{display:block;color:var(--soft);font-size:14px}
.legal{max-width:820px;margin:0 auto;padding:44px}
.legal>h1,.legal>.chip{display:none}
.legal h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:34px 0 10px;color:var(--deep)}
.legal h3{font-size:17px;margin:22px 0 8px;color:var(--deep)}
.legal p,.legal li{font-size:15.5px}
.legal .cl{color:var(--teal-label);margin-right:4px}
.legal table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.legal td,.legal th{border:1px solid var(--card-line);padding:8px 10px;text-align:left}
.legal .doc-lead{font-size:17px;background:var(--box);padding:16px 18px;border-radius:14px}
.cs{min-height:86vh;display:grid;place-items:center;text-align:center}
.cs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:36px 0;text-align:left}
.cs-steps div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:18px}
.cs-steps b{color:var(--teal);font-size:12.5px;letter-spacing:.12em}
.cs-steps h3{margin:6px 0 4px;font-size:17px}
.cs-steps p{margin:0;font-size:14px;color:var(--light-blue)}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .trial,.lb-wrap,.price-wrap,.founder{grid-template-columns:1fr;gap:40px}
  .syl{grid-template-columns:1fr}
  .syl-tabs{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:6px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .c2,.c3,.c4{grid-column:span 2}.bento .half{grid-column:span 1}
  .journey,.loop{grid-template-columns:repeat(2,1fr)}
  .stats-in{grid-template-columns:repeat(3,1fr)}
  .st:nth-child(4){border-left:0}
  .st:nth-child(n+4){border-top:1px solid var(--card-line)}
  .step{grid-template-columns:70px 1fr}.step .facts{grid-column:2}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .cs-steps{grid-template-columns:repeat(2,1fr)}
  .hier{grid-template-columns:1fr;gap:6px}.hier .ch{transform:rotate(90deg);height:24px}
}
@media (max-width:900px){
  .nav,.hdr-cta .signin,.hdr-cta .btn{display:none}
  .menu-btn{display:block}
  .menu-open .nav{display:flex;position:fixed;top:74px;left:0;right:0;flex-direction:column;background:var(--pic-navy);padding:16px 20px 26px;gap:4px;box-shadow:0 30px 40px -20px rgba(0,0,0,.6)}
  .menu-open .nav a{color:#fff;font-size:18px;padding:13px 14px}
  .menu-open .nav .m-only{display:block}
  .menu-open .hdr{background:var(--pic-navy)}
  .menu-open .hdr .logo .l-c{display:none}.menu-open .hdr .logo .l-w{display:block}
  .menu-open .menu-btn{color:#fff}
  .hero{background-position:62% bottom;background-size:auto 64%;min-height:auto}
  .hero::before{background:linear-gradient(180deg,rgba(28,60,119,1) 0%,rgba(28,60,119,.97) 46%,rgba(28,60,119,.35) 70%,rgba(28,60,119,.55) 100%)}
  .hero-in{padding:120px 0 calc(60vw + 40px)}
  .s-cards{grid-template-columns:1fr}
  .late{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr 1fr}
  .week{gap:4px}
}
@media (max-width:720px){
  .sec{padding:68px 0}
  .stats{margin-top:-40px}
  .stats-in{grid-template-columns:1fr 1fr}
  .st{border-left:0;border-top:1px solid var(--card-line)}
  .st:nth-child(-n+2){border-top:0}
  .st:nth-child(even){border-left:1px solid var(--card-line)}
  .st:last-child{grid-column:1/-1;border-left:0}
  .bento,.journey,.loop{grid-template-columns:1fr}
  .c2,.c3,.c4,.bento .half{grid-column:span 1}
  .mbar{display:flex}
  .wa{bottom:92px}
  .promise{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr;gap:6px}
  .step{grid-template-columns:1fr;padding:22px}.step .facts{grid-column:auto}.step .numb{font-size:56px}
  .ftr .cols{grid-template-columns:1fr}
  .ftr{padding-bottom:110px;margin-top:68px}
  .legal{padding:24px 18px}
  .cs-steps,.incl{grid-template-columns:1fr}
  .cta-band{padding:40px 22px;border-radius:24px;background-size:auto 70%;background-position:right -80px bottom}
  .cta-band::before{background:linear-gradient(180deg,rgba(28,60,119,1) 0%,rgba(28,60,119,.94) 60%,rgba(28,60,119,.6) 100%)}
  .hero-strip{grid-template-columns:1fr}
  .hs-t{max-width:none}
  .count b{font-size:22px}
  .sb{grid-template-columns:100px 1fr 38px}
  .sd b{font-size:20px}
  .s-tick{font-size:10.5px}.s-tick.hide-m{display:none}
  .btns .btn{flex:1 1 100%}
  .syl-panel,.tr-card{padding:20px}
  .units{grid-template-columns:1fr}
  .trial-meta b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}
.hero-in{padding-bottom:110px}
.hier{align-items:start}
@media (max-width:900px){.hero-in{padding-bottom:calc(60vw + 70px)}}
.hero-in{padding-left:20px;padding-right:20px}
.syl-tab em{white-space:nowrap}
@media (max-width:1060px){.syl-tabs{grid-template-columns:repeat(5,minmax(200px,1fr))}}
@media (max-width:720px){.syl-figs .fig{min-width:0;flex:1}.syl-figs{width:100%}}

/* ---------- Hero picture as its own panel, with the Sign in screen's two labels (27 Oct, 09:27) ---------- */
.hero{background:var(--pic-navy)}
.hero::before{display:none}
.hero-art{position:absolute;z-index:-1;bottom:0;right:max(20px,calc((100vw - var(--wrap)) / 2 - 20px));height:84%;aspect-ratio:1306/1205;container-type:inline-size;
  background:var(--pic-navy) url("../images/mdcat-hero.webp") center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%),linear-gradient(0deg,transparent 0%,#000 10%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 14%),linear-gradient(0deg,transparent 0%,#000 10%);mask-composite:intersect}
.hero-copy{max-width:540px;position:relative;z-index:1}
.pin{position:absolute;width:0;height:0;opacity:0;animation:pin-in .7s cubic-bezier(.2,.8,.2,1) forwards}
.pin-uni{left:18.075cqw;top:48.342cqw;animation-delay:.9s}
.pin-hos{left:82.353cqw;top:46.203cqw;animation-delay:1.2s}
.pin::after{content:"";position:absolute;left:-0.6cqw;top:-0.6cqw;width:1.2cqw;height:1.2cqw;min-width:8px;min-height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0.35cqw rgba(255,255,255,.25);animation:pin-glow 2.4s ease-in-out infinite}
.pin b{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font-size:clamp(10px,1.55cqw,15px);font-weight:600;letter-spacing:.01em;color:#fff;background:rgba(3,22,62,.88);border:max(1.5px,0.171cqw) solid var(--teal-edge);border-radius:999px;padding:0.75cqw 1.9cqw;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.pin b::after{content:"";position:absolute;left:50%;top:100%;width:max(1.5px,0.171cqw);background:rgba(255,255,255,.9);transform:translateX(-50%)}
.pin-uni b{bottom:3.6cqw}.pin-uni b::after{height:3.6cqw}
.pin-hos b{bottom:5.6cqw}.pin-hos b::after{height:5.6cqw}
@keyframes pin-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes pin-glow{50%{box-shadow:0 0 0 0.9cqw rgba(34,211,197,.18)}}
@media (max-width:1180px){.hero-art{height:74%}.hero-copy{max-width:480px}.hero h1{font-size:clamp(44px,5.6vw,72px)}}
@media (max-width:900px){
  .hero{min-height:0}
  .hero-in{padding-bottom:0}
  .hero-art{position:relative;order:2;right:auto;bottom:auto;height:auto;width:100%;max-width:640px;margin:0 auto;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%)}
  .hero{flex-direction:column}
  .hero .wrap.hero-in{order:1}
  .hero-copy{max-width:none}
  .stats{margin-top:-30px}
}
@media (prefers-reduced-motion:reduce){.pin{opacity:1}}
@media (min-width:901px){
  .hero-art{height:auto;width:min(54vw,860px);right:max(10px,calc((100vw - var(--wrap)) / 2 - 10px))}
  .hero-copy{max-width:500px}
  .hero h1{font-size:clamp(44px,5.4vw,76px)}
  .hero{min-height:max(720px,100vh,calc(min(54vw,860px) * 1205 / 1306 + 120px))}
}
@media (min-width:901px) and (max-width:1180px){.hero-art{width:50vw}.hero-copy{max-width:440px}}
/* Hero v3: two columns, the picture in its own column (27 Oct, 09:40) */
.hero{min-height:0}
.hero-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:end;padding:120px 20px 0}
.hero-copy{max-width:none;align-self:center;padding-bottom:120px}
.hero h1{font-size:clamp(42px,4.7vw,66px)}
.hero-art{position:relative;right:auto;bottom:auto;z-index:0;width:calc(100% + 40px);max-width:none;height:auto;margin-right:-40px;align-self:end;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%)}
@media (min-width:901px){.hero-art{width:calc(100% + 40px);right:auto}.hero-copy{max-width:none}.hero{min-height:0}}
@media (min-width:901px) and (max-width:1180px){.hero-art{width:calc(100% + 20px)}.hero-copy{max-width:none}}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding:120px 20px 0;gap:0}
  .hero-copy{padding-bottom:10px}
  .hero-art{width:calc(100% + 40px);margin:10px -20px 0;max-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%)}
}
.pin b{font-size:clamp(11px,1.9cqw,16px);padding:0.85cqw 2.1cqw}
@media (min-width:901px){.hero-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 92%,transparent 100%)}}

/* ---------- Hero v4 (27 Oct, 09:40): picture higher, countdown card over its lower corner ---------- */
.hero-in{align-items:center;padding-bottom:90px}
.hero-copy{padding-bottom:0}
.hero-vis{position:relative;align-self:start;margin-top:-10px;padding-bottom:150px}
.hero-vis .hero-art{width:calc(100% + 40px);margin-right:-40px}
.hero-card{position:absolute;left:-70px;bottom:0;width:min(440px,92%);z-index:2;color:#fff;padding:22px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 80px -30px rgba(0,0,0,.65);transform:rotate(-2deg);transition:transform .5s}
.hero-card.rv{opacity:0}
.hero-card.rv.in{opacity:1;transform:rotate(-2deg)}
.hero-card:hover{transform:rotate(0deg)!important}
.hc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--light-blue)}
.hc-live{display:inline-flex;gap:7px;align-items:center;color:var(--teal);flex:none}
.hc-live .live{width:7px;height:7px}
.hero-card .count{margin:14px 0 12px}
.hero-card .count div{background:rgba(28,60,119,.6)}
.hero-card .count b{font-size:30px}
.hc-note{margin:0 0 14px;font-size:13px;color:var(--light-blue)}
.hc-title{margin:0 0 10px;font-size:15px;font-weight:800;color:#fff}
.mini-bars{display:grid;gap:9px}
.mb{display:grid;grid-template-columns:96px 1fr 30px;gap:12px;align-items:center;font-size:13.5px;font-weight:700}
.mb .tr{height:9px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.mb .tr i{display:block;height:100%;border-radius:9px;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.mb .v{text-align:right;color:var(--light-blue);font-variant-numeric:tabular-nums}
.sticker{position:absolute;padding:8px 14px;border-radius:12px;font-weight:800;font-size:13px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);animation:bob 4s ease-in-out infinite;white-space:nowrap}
.sticker.s1{background:var(--gold);color:var(--deep);top:-18px;left:-14px;rotate:-6deg}
.sticker.s2{background:var(--teal);color:var(--deep);bottom:-16px;right:-12px;rotate:5deg;animation-delay:-2s}
@keyframes bob{50%{translate:0 -7px}}
@media (min-width:901px) and (max-width:1180px){.hero-card{left:-30px;width:min(400px,96%)}.hero-vis{padding-bottom:170px}}
@media (max-width:900px){
  .hero-in{padding-bottom:40px}
  .hero-vis{margin-top:10px;padding-bottom:0}
  .hero-vis .hero-art{width:calc(100% + 40px);margin:0 -20px}
  .hero-card{position:relative;left:auto;bottom:auto;width:auto;max-width:460px;margin:-70px auto 0;transform:none}
  .hero-card.rv.in{transform:none}
  .mb{grid-template-columns:86px 1fr 26px}
  .hero-card .count b{font-size:24px}
  .sticker.s1{left:6px}.sticker.s2{right:6px}
}
@media (prefers-reduced-motion:reduce){.hero-card.rv{opacity:1}}
@media (min-width:901px){
  .hero-in{align-items:start;padding-top:150px}
  .hero-copy{padding-top:40px}
  .hero-vis{padding-bottom:0;margin-top:-30px}
  .hero-card{position:relative;left:auto;bottom:auto;width:min(440px,88%);margin:-14% 0 0 4%}
}
@media (min-width:901px) and (max-width:1180px){.hero-vis{padding-bottom:0}.hero-card{width:94%;margin:-14% 0 0 3%}}
@media (max-width:900px){.hero-card{margin-top:-14%}}
/* Trim the empty sky so the students and buildings sit higher; labels moved by the same amount (24.89cqw) */
.hero-art{aspect-ratio:1306/880;background-position:center bottom}
.pin-uni{top:23.45cqw}
.pin-hos{top:21.31cqw}
@media (min-width:901px){.hero-in{padding-top:130px}.hero-copy{padding-top:10px}.hero-vis{margin-top:0}}
@media (max-width:900px){
  .hero-art{aspect-ratio:1306/1105}
  .pin-uni{top:39.1cqw}.pin-hos{top:36.9cqw}
  .hero-card{margin-top:-9%}
}
/* Phone: the hero starts with the picture and the countdown card, then the words (owner, 27 Oct 09:47) */
@media (max-width:900px){
  .hero-in{padding-top:78px;padding-bottom:40px}
  .hero-vis{order:-1;margin-top:0}
  .hero-copy{padding-top:34px}
}
@media (max-width:900px){
  .hero-art{aspect-ratio:1306/880;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%);mask-image:linear-gradient(180deg,transparent 0%,#000 8%)}
  .pin-uni{top:23.45cqw}.pin-hos{top:21.31cqw}
  .hero-in{padding-top:84px}
  .hero-card{margin-top:-7%}
}
/* Desktop (owner, 27 Oct 09:57): picture on the right, countdown card on its left, all above the fold. Phone unchanged. */
@media (min-width:901px){
  .hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;padding-top:118px;padding-bottom:84px;gap:28px}
  .hero-copy{padding-top:0}
  .hero h1{font-size:clamp(42px,4.4vw,64px);margin-bottom:14px}
  .hero-sub{font-size:clamp(16px,1.35vw,18.5px);margin-bottom:22px}
  .slogan{margin-top:20px}
  .hero-vis{display:grid;grid-template-columns:1fr;align-self:center;margin-top:0;padding:0}
  .hero-vis .hero-art{width:80%;margin:0 -30px 0 auto;justify-self:end}
  .hero-card{position:absolute;left:-6%;top:34%;margin:0;width:min(330px,52%);padding:18px}
  .hero-card .count{gap:6px;margin:12px 0 10px}
  .hero-card .count b{font-size:24px}
  .hero-card .count small{font-size:9.5px}
  .hc-top{font-size:11px}
  .hc-note{font-size:12px;margin-bottom:10px}
  .hc-title{font-size:13.5px;margin-bottom:8px}
  .mini-bars{gap:7px}
  .mb{grid-template-columns:78px 1fr 24px;gap:9px;font-size:12.5px}
  .hero-vis{padding-bottom:90px}
}
@media (min-width:901px) and (max-width:1180px){.hero-vis .hero-art{width:84%}.hero-card{left:-4%;width:min(310px,56%)}}
/* Desktop v2 (09:57): card and picture side by side, nothing covered, fits the first screen */
@media (min-width:901px){
  .hero-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;padding-top:112px;padding-bottom:80px}
  .hero h1{font-size:clamp(40px,3.9vw,58px)}
  .hero-vis{display:grid;grid-template-columns:minmax(260px,300px) 1fr;align-items:center;gap:16px;padding-bottom:0}
  .hero-vis .hero-art{grid-column:2;grid-row:1;width:calc(100% + 40px);margin:0 -40px 0 0;aspect-ratio:1306/1105}
  .hero-vis .pin-uni{top:40.68cqw}.hero-vis .pin-hos{top:38.54cqw}
  .hero-card{grid-column:1;grid-row:1;position:relative;left:auto;top:auto;width:auto;margin:0}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .hero-vis{grid-template-columns:250px 1fr;gap:10px}
  .hero-vis .hero-art{width:calc(100% + 20px);margin-right:-20px}
  .hero-card{width:auto;left:auto}
  .hero-card .count b{font-size:20px}
  .mb{grid-template-columns:66px 1fr 22px}
}
/* Desktop v3 (owner 09:57): picture on the right at full height; on the left the words, buttons and a wide timer card. Phone unchanged. */
.s-short,.art-slogan{display:none}
@media (min-width:901px){
  .s-long{display:none}.s-short{display:inline}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy art" "card art";grid-template-rows:auto auto;column-gap:36px;row-gap:22px;align-items:center;padding-top:104px;padding-bottom:80px}
  .hero-vis{display:contents}
  .hero-copy{grid-area:copy;align-self:end}
  .hero-copy .slogan{display:none}
  .hero h1{font-size:clamp(40px,4.3vw,62px);margin-bottom:12px}
  .hero-sub{margin-bottom:20px;max-width:520px}
  .hero-vis .hero-art{grid-area:art;align-self:center;width:calc(100% + 60px);margin:0 -60px 0 0;aspect-ratio:1306/1105;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 94%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 8%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 94%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 8%);mask-composite:intersect}
  .hero-vis .pin-uni{top:40.68cqw}.hero-vis .pin-hos{top:38.54cqw}
  .art-slogan{display:block;position:absolute;left:12cqw;bottom:6cqw;font-size:clamp(11px,1.75cqw,14px);font-weight:600;color:var(--teal);background:rgba(2,40,72,.78);border:1.5px solid var(--teal);border-radius:999px;padding:1.1cqw 2.2cqw;white-space:nowrap;backdrop-filter:blur(4px)}
  .art-slogan b{color:#fff}
  .hero-card{grid-area:card;align-self:start;position:relative;left:auto;top:auto;margin:6px 0 0;width:100%;max-width:560px;padding:20px 22px 18px;
    display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:0;align-items:start;transform:rotate(-1deg)}
  .hero-card.rv.in{transform:rotate(-1deg)}
  .hero-card .hc-top{grid-column:1;grid-row:1}
  .hero-card .count{grid-column:1;grid-row:2;margin:10px 0 8px;gap:5px}
  .hero-card .hc-note{grid-column:1;grid-row:3;margin:0;font-size:11.5px}
  .hero-card .hc-title{grid-column:2;grid-row:1;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--light-blue)}
  .hero-card .mini-bars{grid-column:2;grid-row:2/4;gap:6px}
  .hero-card .count div{padding:7px 2px}
  .hero-card .count b{font-size:22px}
  .hero-card .count small{font-size:9px;letter-spacing:.1em}
  .hero-card .hc-live{font-size:11px}
  .mb{grid-template-columns:76px 1fr 22px;gap:8px;font-size:12.5px}
  .sticker.s1{top:-16px;left:-10px}
  .sticker.s2{bottom:-14px;right:-8px}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:24px}
  .hero-vis .hero-art{width:calc(100% + 20px);margin-right:-20px}
  .hero-card{grid-template-columns:1fr;row-gap:8px}
  .hero-card .hc-title,.hero-card .mini-bars{grid-column:1;grid-row:auto}
}
@media (min-width:901px){
  .hero-in{padding-top:98px;row-gap:16px}
  .kicker{margin-bottom:10px}
  .hero h1{font-size:clamp(40px,3.9vw,58px);margin-bottom:10px}
  .hero-sub{margin-bottom:18px}
  .hero-card{padding:16px 20px 16px}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-card{grid-template-columns:1fr 1fr;row-gap:0}
  .hero-card .hc-title{grid-column:2;grid-row:1}
  .hero-card .mini-bars{grid-column:2;grid-row:2/4}
  .mb{grid-template-columns:62px 1fr 20px;font-size:11.5px}
  .hero-card .count b{font-size:18px}
}
@media (min-width:901px) and (max-height:820px){
  .hero-card .hc-note{display:none}
  .hero-card .count{margin-bottom:0}
}

/* ---------- Desktop v4 (owner, 27 Oct 10:06): kicker, then a tall timer, then the words; bigger picture; no slogan. Phone unchanged. ---------- */
@media (min-width:901px){
  .hero-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-areas:"kick art" "card art" "h1 art" "sub art" "btns art";
    grid-template-rows:auto auto auto auto 1fr;column-gap:40px;row-gap:0;align-items:start;padding-top:100px;padding-bottom:96px}
  .hero-copy{display:contents}
  .hero-copy .kicker{grid-area:kick;margin-bottom:22px}
  .hero-copy h1{grid-area:h1;margin:34px 0 12px}
  .hero-copy .hero-sub{grid-area:sub;margin-bottom:22px}
  .hero-copy .btns{grid-area:btns;align-self:start}
  .hero-copy .slogan,.art-slogan{display:none!important}
  .hero-vis .hero-art{grid-area:art;align-self:center;width:calc(100% + 90px);margin:0 -90px 0 -20px;aspect-ratio:1306/1205}
  .hero-vis .pin-uni{top:48.342cqw}.hero-vis .pin-hos{top:46.203cqw}

  /* the timer: tall and rich */
  .hero-card{grid-area:card;display:block;width:100%;max-width:580px;margin:0;padding:26px 26px 24px;border-radius:28px;transform:rotate(-1.2deg);
    background:radial-gradient(120% 80% at 0% 0%,rgba(34,211,197,.22) 0%,rgba(34,211,197,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(91,127,214,.35) 0%,rgba(91,127,214,0) 60%),linear-gradient(160deg,rgba(42,76,140,.92),rgba(6,30,82,.92));
    border:1.5px solid rgba(43,208,200,.55);
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 30px 70px -25px rgba(0,0,0,.75),0 0 60px -10px rgba(34,211,197,.35)}
  .hero-card.rv.in{transform:rotate(-1.2deg)}
  .hero-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 70%)}
  .hero-card>*{position:relative}
  .hero-card .hc-top{font-size:13px;letter-spacing:.16em}
  .hero-card .hc-live{font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(34,211,197,.14);border:1px solid rgba(34,211,197,.4)}
  .hero-card .count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 14px}
  .hero-card .count div{position:relative;padding:16px 4px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(28,60,119,.85),rgba(1,24,70,.9));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -14px rgba(0,0,0,.8)}
  .hero-card .count div::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:rgba(255,255,255,.07)}
  .hero-card .count div:last-child{border-color:rgba(34,211,197,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px -4px rgba(34,211,197,.55);animation:sec-glow 1s ease-in-out infinite alternate}
  .hero-card .count b{font-size:46px;letter-spacing:-.02em;line-height:1;background:linear-gradient(180deg,#fff 30%,var(--on-dark-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-card .count small{display:block;margin-top:8px;font-size:11px;letter-spacing:.18em;color:var(--teal)}
  .hero-card .hc-note{display:block!important;margin:0 0 18px;font-size:13.5px;color:var(--light-blue)}
  .hero-card .hc-title{margin:0 0 12px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18);font-size:15px;font-weight:800;letter-spacing:0;text-transform:none;color:#fff}
  .hero-card .mini-bars{gap:11px}
  .hero-card .mb{grid-template-columns:120px 1fr 32px;gap:12px;font-size:14px}
  .hero-card .mb .tr{height:11px;background:rgba(255,255,255,.1)}
  .hero-card .mb .tr i{position:relative;overflow:hidden;box-shadow:0 0 12px -2px currentColor}
  .hero-card .mb .tr i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shine 3.2s ease-in-out infinite}
  .hero-card .mb .v{color:#fff;font-weight:800}
  .sticker.s1{top:-18px;left:-14px;font-size:14px;padding:9px 16px}
  .sticker.s2{bottom:-18px;right:-12px;font-size:14px;padding:9px 16px}
  @keyframes sec-glow{to{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 30px 0 rgba(34,211,197,.5)}}
  @keyframes shine{0%,40%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .hero-vis .hero-art{width:calc(100% + 40px);margin:0 -40px 0 -10px}
  .hero-card{padding:22px 20px 20px}
  .hero-card .count b{font-size:34px}
  .hero-card .mb{grid-template-columns:88px 1fr 26px;font-size:13px}
}
@media (min-width:901px) and (max-height:820px){.hero-card .count{margin-bottom:12px}}
@media (min-width:901px) and (prefers-reduced-motion:reduce){.hero-card .count div:last-child,.hero-card .mb .tr i::after{animation:none}}
@media (min-width:901px){
  .hero-card>.sticker{position:absolute}
  .hero-card>.sticker.s1{top:-18px;left:-14px}
  .hero-card>.sticker.s2{bottom:-18px;right:-12px;left:auto}
  .hero-card .hc-top{padding-top:6px}
  .hero-vis .hero-art{align-self:start;margin-top:30px;aspect-ratio:1306/1040;width:calc(100% + 120px);margin-right:-120px;background-position:center bottom;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 92%,transparent 100%);mask-composite:intersect}
  .hero-vis .pin-uni{top:35.7cqw}.hero-vis .pin-hos{top:33.6cqw}
  .hero-vis .pin b{font-size:clamp(12px,1.7cqw,17px)}
}
@media (min-width:901px) and (max-width:1180px){.hero-vis .hero-art{width:calc(100% + 40px);margin-right:-40px}}



/* Desktop (owner, 27 Oct 10:31): picture a bit higher, timer a bit lower; timer size unchanged. Phone unchanged. */
@media (min-width:901px){
  .hero-vis .hero-art{margin-top:-28px}
  .hero-card{margin-top:46px}
  .hero-copy h1{margin-top:40px}
}

/* Phone (owner, 27 Oct 10:36): the journey line above the picture. Computer unchanged. */
@media (max-width:900px){
  .hero-copy{display:contents}
  .hero-copy .kicker{order:-2;margin:4px 0 14px;font-size:12.5px;letter-spacing:.2em}
  .hero-vis{order:-1}
  .hero-copy h1{margin-top:34px}
}
@media (max-width:900px){.hero-copy .kicker{font-size:11.5px;letter-spacing:.13em;white-space:nowrap}}

/* ---------- Hero hook (owner, 27 Oct 10:57): new heading + the three-test rhythm as cards. Computer and phone. ---------- */
.hooks{max-width:600px}
.hk-lead{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--light-blue);letter-spacing:.01em}
.hk-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;counter-reset:hk}
.hk-list::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:linear-gradient(180deg,var(--teal),rgba(34,211,197,.15) 60%,var(--gold));border-radius:2px}
.hk{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 16px 14px 0;border-radius:18px;
  background:linear-gradient(100deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);transition:transform .3s,border-color .3s,background .3s}
.hk:hover{transform:translateX(6px);border-color:rgba(43,208,200,.6);background:linear-gradient(100deg,rgba(34,211,197,.14),rgba(255,255,255,.04))}
.hk-ic{position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:44px;height:44px;margin-left:6px;border-radius:14px;font-size:21px;
  background:linear-gradient(145deg,var(--navy-hover),var(--navy));border:1.5px solid var(--teal-edge);box-shadow:0 0 18px -4px rgba(34,211,197,.6)}
.hk-body{display:grid;gap:3px;min-width:0}
.hk-tag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.hk-t{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.15;color:#fff}
.hk-d{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hk-d i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--light-blue);padding:3px 9px;border-radius:999px;background:rgba(28,60,119,.55);border:1px solid rgba(255,255,255,.12)}
.hk-n{text-align:center;min-width:86px;padding:8px 10px;border-radius:14px;background:rgba(28,60,119,.6);border:1px solid rgba(255,255,255,.12)}
.hk-n b{display:block;font-family:var(--serif);font-weight:600;font-size:34px;line-height:1;color:var(--teal)}
.hk-n small{display:block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--light-blue)}
.hk-hot{border-color:rgba(245,200,76,.55);background:linear-gradient(100deg,rgba(245,200,76,.16),rgba(255,255,255,.03))}
.hk-hot .hk-tag{color:var(--gold)}
.hk-hot .hk-ic{border-color:var(--gold);box-shadow:0 0 18px -4px rgba(245,200,76,.7)}
.hk-hot .hk-n b{color:var(--gold)}
.hk-facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.hk-facts span{font-size:13px;font-weight:700;color:var(--light-blue);padding:6px 12px;border-radius:999px;border:1px dashed rgba(169,207,243,.45)}
.hk-facts b{color:#fff;font-weight:800}
@media (min-width:901px){
  .hero-copy .hero-sub.hooks{max-width:600px;margin-bottom:26px}
}
@media (max-width:720px){
  .hk{grid-template-columns:48px 1fr;padding:12px 12px 12px 0;gap:10px}
  .hk-list::before{left:23px}
  .hk-ic{width:40px;height:40px;font-size:19px;margin-left:4px}
  .hk-t{font-size:19px}
  .hk-n{grid-column:2;justify-self:start;display:flex;align-items:baseline;gap:8px;min-width:0;padding:5px 12px;margin-top:2px}
  .hk-n b{font-size:24px}
  .hk-n small{margin:0}
}
@media (prefers-reduced-motion:reduce){.hk:hover{transform:none}}
@media (min-width:901px){.hero-copy h1{max-width:640px}}

/* ---------- Separator + light hook section (owner, 27 Oct 11:08). Computer and phone. ---------- */
.hero{padding-bottom:0}
.hero-in{padding-bottom:110px!important}
.sep{position:absolute;left:0;right:0;bottom:-1px;height:clamp(46px,6vw,90px);pointer-events:none;z-index:1}
.sep svg{display:block;width:100%;height:100%}
.sep-fill{fill:var(--page)}
.sep-line{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9;filter:drop-shadow(0 0 6px rgba(34,211,197,.7))}
.hook-sec{background:var(--page);padding:56px 0 30px;position:relative}
.hook-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.hook-h{font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.6vw,60px);line-height:1.04;letter-spacing:-.015em;color:var(--deep);margin:0}
.hook-h2{display:block;margin-top:10px;font-size:.62em;line-height:1.15;color:var(--teal-label)}
.hook-head .lead{margin-bottom:26px}
/* hook cards, light theme */
.hooks{max-width:none}
.hk-list::before{background:linear-gradient(180deg,var(--teal),var(--box-line) 60%,var(--gold))}
.hk{background:#fff;border:1px solid var(--card-line);box-shadow:var(--shadow-card);backdrop-filter:none}
.hk:hover{border-color:var(--teal-edge);background:#fff;box-shadow:var(--shadow-glass)}
.hk-ic{background:var(--teal-tint);border:1.5px solid var(--teal-edge);box-shadow:none}
.hk-tag{color:var(--teal-label)}
.hk-t{color:var(--deep)}
.hk-d i{color:var(--brand);background:var(--box);border-color:var(--box-line)}
.hk-n{background:var(--brand);border:1.5px solid var(--teal-edge);box-shadow:var(--shadow-btn)}
.hk-n b{color:var(--teal)}
.hk-n small{color:var(--light-blue)}
.hk-hot{background:linear-gradient(100deg,var(--page),var(--card));border-color:var(--gold)}
.hk-hot:hover{background:linear-gradient(100deg,var(--page),var(--card))}
.hk-hot .hk-tag{color:var(--ink)}
.hk-hot .hk-ic{background:var(--page);border-color:var(--gold)}
.hk-hot .hk-n{background:var(--deep);border-color:var(--gold)}
.hk-hot .hk-n b{color:var(--gold)}
.hk-facts span{color:var(--soft);border-color:var(--box-line);background:#fff}
.hk-facts b{color:var(--brand)}
.stats{margin-top:40px}
@media (max-width:1060px){.hook-in{grid-template-columns:1fr;gap:34px}}
@media (max-width:900px){
  .hero-in{padding-bottom:70px!important}
  .hook-sec{padding:40px 0 10px}
  .hook-h2{font-size:.66em}
}
@media (min-width:1061px){.hook-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}.hook-h{font-size:clamp(38px,3.6vw,52px)}}

/* Phone (owner, 27 Oct 11:25): the two buttons move below the 3rd card. Computer unchanged. */
@media (max-width:900px){
  .hook-in{display:flex;flex-direction:column;gap:0}
  .hook-head,.hooks{display:contents}
  .hook-head>*{order:1}
  .hk-list{order:2;margin-top:6px}
  .hook-head .btns{order:3;margin-top:22px}
  .hk-facts{order:4;margin-top:18px}
  .hook-head .lead{margin-bottom:22px}
}
@media (max-width:900px){.hook-in{align-items:flex-start}.hook-head .btns,.hk-list,.hk-facts,.hook-head .lead,.hook-h{align-self:stretch}}
/* Phone (owner, 27 Oct 11:28): fact chips under the hook removed. Computer unchanged. */
@media (max-width:900px){.hk-facts{display:none}}

/* Practice test card (owner, 27 Oct 11:50): teal, first in the rhythm */
.hk-prac{background:linear-gradient(100deg,var(--teal-tint),var(--card));border-color:rgba(34,211,197,.45)}
.hk-prac:hover{background:linear-gradient(100deg,var(--teal-tint),var(--card))}
.hk-prac .hk-n{background:var(--teal-label);border-color:var(--teal-edge)}
.hk-prac .hk-n b{color:#fff;font-family:var(--sans);font-weight:800}
.hk-prac .hk-n small{color:#fff}
.hk-prac .hk-d i:nth-child(2){background:var(--teal-tint);border-color:rgba(34,211,197,.45);color:var(--teal-text);font-weight:800}

/* ===== 2026-10-27: approved colour scheme, part 2 ===== */
/* Main action: red, one per screen (owner, 27 October 2026) */
.btn-act{background:var(--action);color:#fff;border:0;box-shadow:0 12px 26px -12px rgba(227,24,54,.7)}
.btn-act:hover{background:var(--action-hover);color:#fff}
.btn-act:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-act.glow::after{border-color:var(--action)}
/* Hero card: the red button and its facts line */
.hc-cta{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.hc-cta .btn{min-height:50px;font-size:16px;padding:0 22px}
.hc-tag{font-size:12.5px;font-weight:700;color:var(--on-dark-soft)}
/* Subject shares: one teal, strongest for the biggest share */
.sh-100{background:var(--teal)!important}.sh-75{background:rgba(34,211,197,.75)!important;background:color-mix(in srgb,var(--teal) 75%,var(--navy))!important}
.sh-55{background:rgba(34,211,197,.55)!important;background:color-mix(in srgb,var(--teal) 55%,var(--navy))!important}.sh-50{background:rgba(34,211,197,.50)!important;background:color-mix(in srgb,var(--teal) 50%,var(--navy))!important}
.sh-40{background:rgba(34,211,197,.40)!important;background:color-mix(in srgb,var(--teal) 40%,var(--navy))!important}.sh-30{background:rgba(34,211,197,.30)!important;background:color-mix(in srgb,var(--teal) 30%,var(--navy))!important}
.sh-soft{background:var(--on-dark-soft)!important}
/* Floating WhatsApp button: hidden for now (Zubair, 27 October 2026). Remove this line to bring it back. */
.wa{display:none!important}
/* 320 px: the kicker wraps and the photo labels stay on screen */
@media (max-width:420px){
  .hero-copy .kicker{white-space:normal;letter-spacing:.1em;line-height:1.5}
  .hc-cta .btn{width:100%}
  .pin-hos b{transform:translateX(-82%)}.pin-uni b{transform:translateX(-18%)}
}

/* ===== HOME V2 (27 October 2026): Hero copy on the left, countdown strip under the photo ===== */
.hero-copy h1{margin:0 0 18px}
.hero-vis{padding-bottom:0}
.hero-tick{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;margin:-28px auto 0;width:min(620px,100%);
  padding:16px 20px;border-radius:22px;color:#fff;background:rgba(28,60,119,.78);border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);backdrop-filter:blur(12px)}
.hero-tick .ht-text{flex:1 1 220px;min-width:0}
.hero-tick .hc-top{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);display:flex;gap:10px;justify-content:space-between;align-items:center}
.hero-tick .hc-note{margin:6px 0 0;font-size:13px;color:var(--on-dark-soft)}
.hero-tick .count{flex:0 1 300px;margin:0;gap:8px}
.hero-tick .count b{font-size:26px}
@media (max-width:900px){.hero-tick{margin:-36px 0 0;width:100%}.hero-tick .count{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.hero-tick.rv{opacity:1}}
/* HOME V2 Hero layout: one clean grid that overrides the older layered hero rules above */
.hero-in{display:grid!important;grid-template-areas:"copy" "vis"!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;row-gap:28px!important;column-gap:0!important}
.hero-copy{display:block!important;grid-area:copy!important;padding:0!important;max-width:620px!important}
.hero-copy .kicker,.hero-copy h1,.hero-copy .hero-sub,.hero-copy .btns{grid-area:auto!important}
.hero-copy .kicker{margin:0 0 16px!important}
.hero-copy h1{margin:0 0 16px!important;font-size:clamp(40px,10vw,66px)!important}
.hero-copy .hero-sub{margin:0 0 24px!important}
.hero-vis{display:block!important;grid-area:vis!important;position:relative;margin:0!important;padding:0!important}
@media (min-width:901px){
  .hero-in{grid-template-areas:"copy vis"!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;column-gap:36px!important;align-items:center!important;padding-top:118px!important;padding-bottom:110px!important}
  .hero-copy h1{font-size:clamp(46px,4.8vw,70px)!important}
  .hero-tick{margin-top:-34px}
}
/* HOME V2 change 2: text block starts level with the top of the photo; a gap between the photo and the countdown */
@media (min-width:901px){.hero-in{align-items:start!important}.hero-copy{align-self:start!important;padding-top:56px!important}}
.hero-tick{margin-top:16px!important}
/* HOME V2 change 3: on laptops and desktops the whole Hero (text, photo, countdown) fits the first screen.
   The photo's height is capped by the screen height (100svh minus top bar, header, countdown and spacing). */
@media (min-width:901px){
  .hero-in{padding-top:96px!important;padding-bottom:64px!important}
  .hero-vis{display:flex!important;flex-direction:column;align-items:flex-end}
  .hero-vis .hero-art{--art-h:clamp(300px,calc(100vh - 330px),760px);--art-h:clamp(300px,calc(100svh - 330px),760px);
    width:min(calc(100% + 40px),calc(var(--art-h) * 1306 / 1205))!important;height:auto!important;aspect-ratio:1306/1205!important;margin:0 -40px 0 0!important;max-width:none!important}
  .hero-tick{width:min(620px,100%);margin:12px 0 0!important;align-self:flex-end}
  .hero-copy{padding-top:24px!important;align-self:center!important}
}
@media (min-width:901px){.hero-vis .hero-art{align-self:flex-end!important;margin-right:0!important}.hero-tick{align-self:flex-end!important}}
/* HOME V2 change 4 (desktop and laptop): the photo becomes a full-height layer on the right of the Hero, behind the text and the countdown.
   It fills the Hero's height (which fits the first screen), fades in from the left, and keeps its labels. Phones unchanged. */
@media (min-width:901px){
  .hero{min-height:calc(100svh - 36px)!important;min-height:calc(100vh - 36px)}
  .hero-in{position:static!important;align-items:center!important}
  .hero-copy{position:relative;z-index:2}
  .hero-vis{position:static!important;align-self:end!important;display:flex!important;justify-content:flex-end}
  .hero-vis .hero-art{position:absolute!important;z-index:0;right:0;bottom:0;top:auto;left:auto;height:100%!important;width:auto!important;max-width:64vw!important;
    aspect-ratio:1306/1205!important;margin:0!important;align-self:auto!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
  .hero-tick{position:relative;z-index:2;margin:0!important;background:rgba(28,60,119,.82)}
  .hero .sep{position:relative;z-index:1}
}
@media (min-width:901px){.hero-in{grid-template-rows:1fr!important;flex:1 1 auto!important}.hero-vis{align-self:end!important}}
/* HOME V2 change 5 (desktop and laptop): the whole photo shows above the countdown, at its own ratio;
   the countdown sits in the bottom-right corner with a small gap above the wave. */
@media (min-width:901px){
  .hero{--tick-space:150px}
  .hero-in{padding-bottom:22px!important}
  .hero-vis .hero-art{top:0!important;bottom:auto!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 14%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 14%);mask-composite:intersect}
  .hero-tick{width:min(560px,100%)}
}
@media (min-width:901px){
  .hero{--tick-space:128px}
  .hero-tick{width:auto!important;max-width:100%;flex-wrap:nowrap!important;padding:14px 16px 14px 20px}
  .hero-tick .ht-text{flex:0 1 220px!important}
  .hero-tick .hc-note{margin:0}
  .hero-tick .count{flex:0 0 auto!important;grid-template-columns:repeat(4,64px)!important}
  .hero-tick .count b{font-size:24px}
}

/* HOME V2 change 7: new photo mdcat-hero-v2.webp (1306 x 866: the same picture with 339 px of sky trimmed off the top).
   Labels moved up by the trimmed amount (339 / 1306 = 25.958 cqw). On desktop the photo keeps its own ratio:
   width-led, anchored to the top, never wider than 54% of the screen, so it stays clear of the text. */
.hero-art{background-image:url("../images/mdcat-hero-v2.webp")!important;aspect-ratio:1306/866!important}
.pin-uni{top:22.384cqw!important}
.pin-hos{top:20.245cqw!important}
@media (min-width:901px){
  .hero-vis .hero-art{height:auto!important;width:min(54vw,1306px)!important;max-width:none!important;aspect-ratio:1306/866!important;top:0!important;bottom:auto!important}
}
/* HOME V2 change 8 (desktop and laptop):
   1. The fade is applied to the photo only (a ::before layer), not to the labels, and is narrower and smoother on the left.
   2. The wave overlays the bottom of the Hero again (as in the original design), so the countdown sits just above it;
      the photo moves down with it. */
@media (min-width:901px){
  .hero-vis .hero-art{background:none!important;-webkit-mask-image:none!important;mask-image:none!important;top:34px!important}
  .hero-vis .hero-art::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:url("../images/mdcat-hero-v2.webp") center / cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 13%),linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 13%),linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%);mask-composite:intersect}
  .hero .sep{position:absolute!important;left:0;right:0;bottom:-1px}
  .hero-in{padding-bottom:calc(clamp(46px,6vw,90px) * .8 + 8px)!important}
}
/* HOME V2 change 9: the Hero spans the full screen width (desktop and laptop), with a side margin that scales with the screen */
@media (min-width:901px){
  .hero .wrap.hero-in{max-width:none!important;width:100%!important;margin:0!important;
    padding-left:clamp(24px,4vw,80px)!important;padding-right:clamp(24px,4vw,80px)!important}
  .hero-copy{max-width:680px!important}
}
/* HOME V2 change 10: the header spans the full width like the Hero (every page), so the logo lines up with the Hero heading and Sign in with the right edge */
@media (min-width:901px){
  .hdr .wrap.hdr-in{max-width:none!important;width:100%!important;margin:0!important;
    padding-left:clamp(24px,4vw,80px)!important;padding-right:clamp(24px,4vw,80px)!important}
}
/* HOME V2 change 11: the gold "MDCAT 2027" badge returns, floating on the countdown's top-left corner (gold: the one badge, on dark) */
.hero-tick{overflow:visible}
.hero-tick>.sticker.s1{position:absolute;top:-16px;left:-12px;z-index:3;background:var(--gold);color:var(--ink);rotate:-6deg}
@media (prefers-reduced-motion:reduce){.hero-tick>.sticker{animation:none}}
@media (max-width:900px){.hero-tick{padding-top:28px}}
/* HOME V2 change 13: a 1 px light grey line under the top bar (the --line grey #DCE6F3, softened on navy) */
.announce{border-bottom:1px solid rgba(220,230,243,.28)}
/* HOME V2 change 15 (phones and small tablets, below 901 px): Hero order is
   1 photo, 2 countdown, 3 free trial test button, 4 heading, 5 paragraph. Visual order only; the page source keeps the heading first. */
@media (max-width:900px){
  .hero-in{display:flex!important;flex-direction:column!important;gap:0!important;padding-top:96px!important}
  .hero-copy,.hero-vis{display:contents!important}
  .hero-vis .hero-art{order:1}
  .hero-tick{order:2;margin-top:-30px!important}
  .hero-btns{order:3;margin:22px 0 0!important}
  .hero-copy h1{order:4;margin:28px 0 12px!important}
  .hero-copy .hero-sub{order:5;margin:0 0 8px!important}
}
@media (max-width:900px){
  .hero-in{align-items:stretch!important}
  .hero-btns{display:flex;justify-content:flex-start}
  .hero-copy h1,.hero-copy .hero-sub{align-self:stretch;margin-left:0!important;margin-right:0!important;max-width:620px}
}
@media (max-width:600px){.hero-btns .btn{width:100%}}
/* HOME V2 change 17: "Other platforms" against PTA as a two-column comparison table (replaces the Free sites / PTA switch on Home) */
.cmp2{max-width:960px;margin:0 auto;padding:8px 8px 10px;overflow:hidden}
.cmp-t{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.45}
.cmp-t th,.cmp-t td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp-t thead th,.cmp-t thead td{border-top:0;font-weight:800;font-size:15px;padding-top:16px;padding-bottom:16px}
.cmp-t thead .c-o{color:var(--soft)}
.cmp-t thead .c-p{background:var(--navy);color:#fff;border-radius:14px 14px 0 0}
.cmp-t tbody th{width:170px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);padding-top:18px}
.cmp-t td.c-o{color:var(--soft);font-weight:600}
.cmp-t td.c-p{background:var(--teal-tint);color:var(--ink);font-weight:700;border-top-color:rgba(11,111,104,.15)}
.cmp-t tbody tr:last-child td.c-p{border-radius:0 0 14px 14px}
.cmp-t .ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:12px;font-weight:800;margin-right:10px;vertical-align:-4px}
.cmp-t .ic.x{background:var(--red-tint);color:var(--red-text)}
.cmp-t .ic.ok{background:#fff;color:var(--teal-text)}
@media (max-width:600px){
  .cmp-t,.cmp-t thead,.cmp-t tbody{display:block}
  .cmp-t tr{display:grid;grid-template-columns:1fr 1fr}
  .cmp-t thead td{display:none}
  .cmp-t thead th{padding:12px}
  .cmp-t tbody th{grid-column:1/-1;width:auto;padding:14px 12px 6px}
  .cmp-t td{border-top:0;padding:4px 12px 14px;font-size:14px}
  .cmp-t td.c-p{border-radius:0}
  .cmp-t .ic{display:grid;margin:0 0 6px}
}
/* HOME V2 change 19: the Dynamic Test Engine (loop, example, table as proof) */
.eng-loop{list-style:none;margin:8px auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:none}
.eng-step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;box-shadow:var(--shadow-card)}
.eng-step h3{margin:14px 0 6px;font-size:18px;color:var(--ink)}
.eng-step p{margin:0;font-size:14.5px;line-height:1.5;color:var(--soft)}
.eng-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--teal-tint)}
.eng-ic svg,.eng-again svg{width:24px;height:24px;fill:none;stroke:var(--teal-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eng-n{position:absolute;top:18px;right:18px;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--line)}
.eng-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:12px;height:12px;border-top:2px solid var(--teal-text);border-right:2px solid var(--teal-text);transform:translateY(-50%) rotate(45deg)}
.eng-again{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 30px;font-weight:700;font-size:15px;color:var(--teal-text)}
.eng-ex{position:relative;max-width:960px;margin:0 auto 26px;padding:22px 24px 18px}
.eng-ex-tag{position:absolute;top:-11px;left:22px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.eng-ex-skill{margin:4px 0 14px;font-size:15px;color:var(--ink)}
.eng-ex-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.eng-ex-row li{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--page);border-radius:12px;padding:10px 14px}
.eng-ex-row small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.eng-ex-row b{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.eng-ex-row li:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--teal-text)}
.band{font-size:12.5px;font-weight:800;border-radius:999px;padding:3px 10px}
.band.w{background:var(--red-tint);color:var(--red-text)}.band.d{background:var(--navy-tint);color:var(--ink)}.band.s{background:var(--teal-tint);color:var(--teal-text)}
.eng-ex-note{margin:12px 0 0;font-size:12.5px;color:var(--soft)}
@media (max-width:1000px){.eng-loop{grid-template-columns:repeat(2,minmax(0,1fr))}.eng-step:nth-child(2)::after{display:none}}
@media (max-width:600px){
  .eng-loop{grid-template-columns:1fr;gap:16px}
  .eng-step:not(:last-child)::after{display:block;top:auto;bottom:-13px;right:auto;left:32px;transform:rotate(135deg)}
  .eng-ex-row{grid-template-columns:1fr;gap:8px}
  .eng-ex-row li:not(:last-child)::after{content:"↓";right:14px}
}

/* ===== 2026-10-28: "Your MDCAT rhythm" colours and SVG icons (Zubair). Layout unchanged.
   No gold on light; teal only on dark; number boxes flat so they do not look like buttons. ===== */
.hk-list::before{background:linear-gradient(180deg,var(--teal-text),var(--line))}
.hk-ic{background:var(--teal-tint);border:0;color:var(--teal-text);font-size:0}
.hk-ic svg{display:block;width:22px;height:22px}
.hk-n{background:var(--navy);border:0;box-shadow:none}
.hk-prac{background:linear-gradient(100deg,var(--teal-tint),var(--card));border-color:var(--line)}
.hk-prac:hover{background:linear-gradient(100deg,var(--teal-tint),var(--card))}
.hk-prac .hk-ic{background:var(--card)}
.hk-prac .hk-n{background:var(--teal-text);border:0}
.hk-prac .hk-d i:nth-child(2){border-color:var(--line)}
.hk-hot,.hk-hot:hover{background:var(--navy);border-color:var(--navy)}
.hk-hot .hk-tag{color:var(--teal)}
.hk-hot .hk-t{color:#fff}
.hk-hot .hk-d i{color:var(--on-dark-soft);background:var(--navy-hover);border-color:var(--navy-hover)}
.hk-hot .hk-ic{background:var(--navy-hover);border:0;box-shadow:none;color:var(--teal)}
.hk-hot .hk-n{background:var(--navy-hover);border:0}
.hk-hot .hk-n b{color:var(--teal)}
.hk:hover{border-color:var(--line)}
.hk-hot:hover{border-color:var(--navy)}

/* 2026-10-28 (Zubair): all four rhythm cards in the weekly test card's style:
   white card, teal-tint icon box, plain chips, number box white with navy text */
.hk-list .hk,.hk-list .hk:hover{background:var(--card);border-color:var(--line)}
.hk-list .hk .hk-ic{background:var(--card);color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
.hk-list .hk .hk-tag{color:var(--navy)}
.hk-list .hk .hk-t{color:var(--ink)}
.hk-list .hk .hk-d i{color:var(--navy);background:var(--page);border-color:var(--line);font-weight:700}
.hk-list .hk .hk-n{background:var(--card);border:1.5px solid var(--line);box-shadow:none}
.hk-list .hk .hk-n b,.hk-list .hk .hk-n small{color:var(--navy)}
/* 2026-10-28 (Zubair): "After week 36" card inverted: navy card, white text, icons and borders */
.hk-list .hk-hot,.hk-list .hk-hot:hover{background:var(--navy);border-color:var(--navy)}
.hk-list .hk-hot .hk-tag,.hk-list .hk-hot .hk-t{color:#fff}
.hk-list .hk-hot .hk-ic{background:var(--navy);color:#fff;border-color:#fff}
.hk-list .hk-hot .hk-d i{background:var(--navy-hover);border-color:var(--navy-hover);color:#fff}
.hk-list .hk-hot .hk-n{background:var(--navy);border-color:#fff}
.hk-list .hk-hot .hk-n b,.hk-list .hk-hot .hk-n small{color:#fff}

/* 2026-10-28 (Zubair): Four steps. Dotted arrows between steps; no price on step 3; card colours as before
   (blue shades cancelled 10:22). One row on laptops, one column with down arrows below 1061 px. */
#how .journey{grid-template-columns:repeat(4,1fr);gap:40px}
#how .jstep:not(:last-child)::after{content:"";position:absolute;top:50%;right:-34px;width:26px;border-top:3px dotted var(--navy);transform:translateY(-50%)}
#how .jstep:not(:last-child)::before{content:"";position:absolute;top:50%;right:-36px;width:9px;height:9px;border-top:3px solid var(--navy);border-right:3px solid var(--navy);transform:translateY(-50%) rotate(45deg)}
@media (max-width:1060px){
  #how .journey{grid-template-columns:1fr;gap:40px;max-width:640px}
  #how .jstep:not(:last-child)::after{top:auto;right:auto;left:42px;bottom:-34px;width:0;height:26px;border-top:0;border-left:3px dotted var(--navy);transform:none}
  #how .jstep:not(:last-child)::before{top:auto;right:auto;left:38px;bottom:-36px;transform:rotate(135deg)}
}
/* 2026-10-28 (Zubair, option 6): all four step numbers solid navy with a 2 px navy border and white number; "Free" tags stay teal */
#how .jstep .n,#how .jstep.free .n{background:var(--navy);color:#fff;border:2px solid var(--navy)}
/* 2026-10-28 (Zubair): Four steps stands apart: full-width navy band, white cards kept, teal arrows,
   red free trial button centred under the cards (full width on phones). */
#how{background:var(--plan-card);margin-top:56px;padding:88px 0}
#how .label{color:var(--teal)}
#how .h2{color:#fff}
#how .lead{color:var(--on-dark-soft)}
#how .jstep:not(:last-child)::after{border-color:var(--teal)}
#how .jstep:not(:last-child)::before{border-top-color:var(--teal);border-right-color:var(--teal)}
#how .how-cta{display:flex;justify-content:center;margin-top:44px}
@media (max-width:720px){#how{padding:64px 0}#how .how-cta .btn{width:100%}}
/* 2026-10-28 (Zubair): heading and line above the Subject > Unit > Skill boxes (layout unchanged) */
.hier-head{margin:56px auto 0;max-width:760px;text-align:center}
.hier-h{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.hier-p{margin:0;color:var(--soft);font-size:17px}
@media (max-width:640px){.hier-head{margin-top:40px}.hier-p{font-size:16px}}
/* 2026-10-28 (Zubair): free trial sample result card. Option 3: solid white (no see-through glass), bars unchanged;
   Chemistry bar orange (needs improvement); new orange badge between Strongest and Most to gain. */
.tr-card.glass{background:var(--card);border:0;backdrop-filter:none}
.sb .tr i.mid{background:var(--orange)}
.tr-tags span.o{background:var(--orange-tint);color:var(--orange-text)}

/* Home V2 change 38: Skill (LO) box pills, SVG icons in place of emoji (Zubair, 28 Oct 2026) */
.lo-gets span{display:inline-flex;align-items:center;gap:6px}
.lo-gets svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Home V2 change 40: free trial test, ticks removed; space between the heading and the button (Zubair, 28 Oct 2026) */
/* change 42 (Zubair, 28 Oct 2026): big gap under the label, small gap between the three heading lines, big gap above the button */
.trial .label{margin-bottom:28px}
.trial .h2{line-height:1.16}
.trial .btns{margin-top:48px}
@media (max-width:720px){.trial .label{margin-bottom:22px}.trial .btns{margin-top:36px}}

/* Home V2 change 41: free trial test section, background #1C3C77 (var(--plan-card)); the 20 / 20 / 0 boxes removed (Zubair, 28 Oct 2026) */
.sec.dark.trial-sec{background:var(--plan-card)}

/* Home V2 change 43: Four steps, lead on one line from tablet width up (Zubair, 28 Oct 2026) */
@media (min-width:768px){#how .split .lead{max-width:none;white-space:nowrap}}

/* Home V2 change 45: Season section, background #1C3C77 (var(--plan-card)) in place of the navy gradient (Zubair, 28 Oct 2026) */
.sec.dark.season-sec{background:var(--plan-card)}

/* Home V2 change 48: Season bar, "Full mock every week" as a gold callout above the striped part (Zubair, 28 Oct 2026). Gold on dark, ink text, as the scheme says */
.s-flag{position:absolute;top:-40px;right:0;background:var(--gold);color:var(--ink);font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;white-space:nowrap}
.s-flag::after{content:"";position:absolute;right:24px;bottom:-5px;width:10px;height:10px;background:var(--gold);transform:rotate(45deg)}
.season.flag-up{padding-top:74px}.season.flag-up .s-flag{top:-74px}
@media (max-width:400px){.season{padding-top:74px}.season .s-flag{top:-74px}}

/* Home V2 change 51: Your week, on repeat: SVG icons in place of emoji; coloured top borders (Zubair, 28 Oct 2026) */
.lp .ic svg{width:26px;height:26px;fill:none;stroke:var(--teal-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-1,.lp-2,.lp-3,.lp-4{position:relative;overflow:hidden}
.lp-1::before,.lp-2::before,.lp-3::before,.lp-4::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal)}
.lp-3::before{background:var(--navy)}
.lp-4::before{background:var(--gold)}
/* Home V2 change 54: Week cards, day lines (Monday to Friday, Any time ...) soft gray in place of deep teal (Zubair, 28 Oct 2026) */
.lp .day{color:var(--soft)}

/* Change 57: Inside the PTA portal intro on one line (laptop and up) */
.lead.lead-wide{max-width:none}

/* Change 60: Home only, no gap between the last section and the footer */
.home .ftr{margin-top:0}

/* Change 61: Why trust PTA with the About us content (founder timeline on navy, four promise cards in a row) */
.trust-v3{align-items:start}
.trust-v3 .t-sub{margin-top:28px}
.trust-v3 .lead+.lead{margin-top:12px}
.t-card .label{color:var(--teal)}
.t-card h3{margin:0 0 22px;font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.15;color:#fff}
.t-card .tline{border-left-color:rgba(255,255,255,.22)}
.t-card .tline li::before{box-shadow:0 0 0 4px var(--navy)}
.t-card .tline b{color:var(--gold)}
.t-card .tline span{color:#fff}
.t-card .tline small{color:var(--on-dark-soft)}
.promise.promise-4{grid-template-columns:repeat(4,1fr);margin-top:40px}
@media (max-width:1060px){.promise.promise-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.promise.promise-4{grid-template-columns:1fr;margin-top:32px}.t-card{padding:26px 22px}.t-card h3{font-size:26px}}

/* Change 66: free trial section on the light entry background (like the leaderboard); "Zero rupees." in deep teal on light */
.trial-sec .h2 .dot-t{color:var(--teal-label)}

/* Change 70: CTA band photo blends into the navy (no hard edge at the left or bottom) and is no longer covered by the blue overlay. Laptop and tablet only; phones keep the earlier look. */
@media (min-width:721px){
  .cta-band{background:var(--pic-navy)}
  .cta-band::before{background:linear-gradient(90deg,var(--pic-navy) 0%,var(--pic-navy) 38%,rgba(28,60,119,0) 62%)}
  .cta-band::after{content:"";position:absolute;top:0;right:0;bottom:0;width:60%;z-index:-2;background:url("../images/mdcat-hero-v2.webp") right bottom / auto 112% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%),linear-gradient(0deg,transparent 0%,#000 22%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,#000 40%),linear-gradient(0deg,transparent 0%,#000 22%);mask-composite:intersect}
}
@media (min-width:721px) and (max-width:1060px){
  .cta-band::before{background:linear-gradient(90deg,var(--pic-navy) 0%,var(--pic-navy) 50%,rgba(28,60,119,0) 72%)}
  .cta-band::after{width:48%}
  .cta-band h2,.cta-band p,.cta-band .label{max-width:58%}
}

/* Change 71: Home price card, plan lengths (1 year, 2 years, 3 years) at 20px on desktop */
@media (min-width:901px){.home .pl-len{font-size:20px}}


/* 30 Oct 2026 (owner, 21:29): Home price card redesigned: price on the left, what the year includes on the right; stacked on phones */
.pc2{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.05fr 1fr;border-radius:32px;color:#fff;
  background:radial-gradient(120% 130% at 0% 0%,#28559A 0%,#1C3C77 48%,#0F2552 100%);
  border:1px solid rgba(34,211,197,.4);box-shadow:0 50px 100px -50px rgba(15,37,82,.95)}
.pc2-glow{position:absolute;z-index:-1;width:560px;height:560px;right:-180px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,197,.32),transparent 65%);pointer-events:none}
.pc2::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;left:-160px;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(245,200,76,.16),transparent 65%);pointer-events:none}
.pc2-main{padding:46px 46px 42px}
.pc2-side{padding:46px;background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.12)}
.pc2-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pc2-chip{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,200,76,.55);padding:5px 12px;border-radius:999px}
.pc2-len{margin:34px 0 4px;font-size:18px;font-weight:700;color:var(--on-dark-soft)}
.pc2-price{margin:0;display:flex;align-items:flex-start;gap:12px;line-height:.92}
.pc2-cur{margin-top:16px;font-size:20px;font-weight:800;letter-spacing:.1em;color:var(--teal)}
.pc2-amt{font-family:var(--serif);font-weight:600;font-size:clamp(66px,8.4vw,112px);letter-spacing:-.02em;color:#fff;background:linear-gradient(180deg,#fff 35%,#BDF4EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pc2-math{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.pc2-math span{padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:14.5px;color:var(--on-dark-soft)}
.pc2-math b{color:#fff}
.pc2-note{margin:0;max-width:440px;font-size:14.5px;line-height:1.6;color:var(--on-dark-soft)}
.pc2-h{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.pc2-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px}
.pc2-list li{position:relative;padding-left:36px;font-size:16px;line-height:1.45;color:#fff}
.pc2-list li::before{content:"";position:absolute;left:0;top:0;width:23px;height:23px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2552' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 4px rgba(34,211,197,.15)}
.pc2 .btn-block{display:flex}
.pc2-free{margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--on-dark-soft)}
@media (max-width:860px){
  .pc2{grid-template-columns:1fr;border-radius:26px}
  .pc2-main{padding:30px 22px 26px}
  .pc2-side{padding:28px 22px 26px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .pc2-len{margin-top:26px}
  .pc2-cur{margin-top:10px;font-size:16px}
  .pc2-list li{font-size:15px}
  .pc2-math{gap:8px}
  .pc2-math span{padding:7px 11px;font-size:13px}
}

/* 30 Oct 2026 (owner, 21:37): price card v2: price no longer cut at the top; full mock separate from the weekly test; key words bold; trust line */
.pc2{transition:transform .35s ease,box-shadow .35s ease}
@media (hover:hover){.pc2:hover{transform:translateY(-4px);box-shadow:0 60px 110px -50px rgba(15,37,82,1)}}
.pc2-price{align-items:flex-start;line-height:1.12;padding-top:4px}
.pc2-amt{display:inline-block;padding:0 .04em .02em 0}
.pc2-cur{margin-top:24px}
.pc2-list{gap:0;margin-bottom:28px}
.pc2-list li{padding:11px 0 11px 36px;border-bottom:1px solid rgba(255,255,255,.09);color:var(--on-dark-soft)}
.pc2-list li:last-child{border-bottom:0}
.pc2-list li::before{top:11px}
.pc2-list li b{color:#fff;font-weight:700}
.pc2-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.pc2-trust span{position:relative;padding-left:20px;font-size:13.5px;font-weight:600;color:#fff}
.pc2-trust span::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(245,200,76,.18)}
@media (max-width:860px){.pc2-cur{margin-top:16px}.pc2-list li{padding:10px 0 10px 34px}.pc2-list li::before{top:10px}}

/* 30 Oct 2026 (owner, 21:40): the month and day figures as one split tile */
.pc2-math{display:inline-grid;grid-template-columns:1fr 1fr;gap:0;margin:26px 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,rgba(34,211,197,.16),rgba(255,255,255,.05));border:1px solid rgba(34,211,197,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.pc2-math span{padding:0;border:0;border-radius:0;background:none}
.pc2-math>div{display:flex;flex-direction:column;gap:4px;padding:14px 26px 13px}
.pc2-math>div+div{border-left:1px solid rgba(34,211,197,.35)}
.pc2-math b{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.1;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.pc2-math span:not(.sr-only):not(.pc2-approx){font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.pc2-approx{margin-right:5px;color:var(--teal)}
@media (max-width:860px){.pc2-math{display:grid;margin:22px 0}.pc2-math>div{padding:12px 16px 11px}.pc2-math b{font-size:21px}.pc2-math span:not(.sr-only):not(.pc2-approx){font-size:10.5px;letter-spacing:.12em}}

/* 30 Oct 2026 (owner, 21:43, option A): the month and day figures as one elegant line (replaces the split tile) */
.pc2-line{margin:18px 0 24px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--on-dark-soft)}
.pc2-line::before{content:"";display:block;width:60px;height:2px;margin:0 0 14px;border-radius:2px;background:var(--teal)}
.pc2-line b{font-style:normal;font-weight:600;color:var(--teal);white-space:nowrap}
@media (max-width:860px){.pc2-line{font-size:19px;margin:14px 0 20px}}
/* 30 Oct 2026 (owner, 21:46): the month/day line on one line on computers */
@media (min-width:1025px){.pc2-line{white-space:nowrap;font-size:19px}}
@media (min-width:1200px){.pc2-line{font-size:21px}}

/* 30 Oct 2026 (owner, 21:49): leaderboard heading on two lines, restyled */
.lb-h{font-size:clamp(32px,3.7vw,52px);line-height:1.08}
.lb-h>span{display:block}
.lb-l1{white-space:nowrap}
.lb-l2{margin-top:4px;white-space:nowrap}
.lb-l2 em{font-style:italic;font-weight:500;color:var(--soft)}
.lb-l2 mark{color:var(--teal-text);background:linear-gradient(transparent 64%,rgba(34,211,197,.28) 64%,rgba(34,211,197,.28) 92%,transparent 92%);padding:0 .06em}
@media (max-width:420px){.lb-h{font-size:30px}}

/* 30 Oct 2026 (owner, 21:51): Logical Reasoning's 12 skills listed in the syllabus explorer */
.syl-los{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.syl-los li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"c w" "t t";gap:6px 10px;align-items:center;padding:13px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);animation:pop .4s both}
.syl-los .lo-c{grid-area:c;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--teal-label)}
.syl-los .lo-w{grid-area:w;justify-self:end;font-size:11.5px;font-weight:800;color:var(--brand);background:var(--navy-tint);border-radius:999px;padding:2px 9px;white-space:nowrap}
.syl-los .lo-t{grid-area:t;font-size:14.5px;line-height:1.4;color:var(--ink)}
@media (max-width:700px){.syl-los{grid-template-columns:1fr}}

/* 30 Oct 2026 (owner, 21:56): "Your week, on repeat" shown as a cycle: numbered steps joined by arrows, and a loop back to step 1 every Monday */
.cyc-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 18px}
.cyc-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,#0FB4AA 0%,var(--teal) 40%,var(--navy) 66%,var(--gold) 100%)}
.cyc-track span{position:relative;z-index:1;justify-self:center;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;box-shadow:0 0 0 7px var(--page),0 10px 22px -10px rgba(15,37,82,.6)}
.cyc-track .n1{background:#0FB4AA}.cyc-track .n2{background:var(--teal-text)}.cyc-track .n3{background:var(--navy)}.cyc-track .n4{background:var(--gold);color:var(--ink)}
.cyc-track i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-top:3px solid var(--deep);border-right:3px solid var(--deep);transform:rotate(45deg);background:none}
.lp-n{display:none}
.cyc-back{position:relative;margin:0 12.5% 30px;height:48px;border:2px dashed rgba(15,180,170,.65);border-top:0;border-radius:0 0 32px 32px}
.cyc-back::before{content:"";position:absolute;left:-8px;top:-12px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #0FB4AA}
.cyc-back span{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(15,37,82,.45);font-size:14px;font-weight:700;color:var(--deep);white-space:nowrap}
.cyc-back b{color:#0FB4AA;font-size:18px;line-height:1}
@media (max-width:1060px){
  .cyc-track{display:none}
  .lp-n{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#0FB4AA}
  .lp-2 .lp-n{background:var(--teal-text)}.lp-3 .lp-n{background:var(--navy)}.lp-4 .lp-n{background:var(--gold);color:var(--ink)}
  .cyc-back{margin:18px 0 0;height:auto;border:0;text-align:center}
  .cyc-back::before{display:none}
  .cyc-back span{position:static;transform:none;white-space:normal;text-align:left}
}
@media (max-width:720px){
  .loop{position:relative;gap:30px}
  .loop::before{content:"";position:absolute;left:50%;top:12px;bottom:-30px;border-left:2px dashed rgba(15,180,170,.7)}
  .loop>.lp{z-index:1}
}

/* 31 Oct 2026 (owner, 10:27): on phones the month and day figures are two pills (the sentence stays for screen readers) */
.pc2-pills{display:none}
@media (max-width:720px){
  .pc2-line{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pc2-pills{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
  .pc2-pills span{display:inline-flex;align-items:baseline;gap:7px;padding:9px 16px 10px;border-radius:999px;
    background:linear-gradient(135deg,rgba(34,211,197,.20),rgba(255,255,255,.06));border:1px solid rgba(34,211,197,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 18px -12px rgba(0,0,0,.6)}
  .pc2-pills b{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1;color:#fff;white-space:nowrap}
  .pc2-pills i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
}

/* 31 Oct 2026 (owner, 10:35 and 10:38, option C): on phones "5 subjects. 64 units. 320 skills." as three growing bars */
.syl-cascade{display:none}
@media (max-width:720px){
  .syl-h{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .syl-cascade{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px;margin:8px auto 6px}
  .cs-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:999px;color:#fff;box-shadow:0 16px 28px -18px rgba(15,37,82,.9),inset 0 1px 0 rgba(255,255,255,.2)}
  .cs-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
  .cs-bar b{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1;letter-spacing:-.01em}
  .cs-bar span{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
  .cs-1{width:46%;background:#0FB4AA}
  .cs-2{width:72%;background:var(--teal-text)}
  .cs-3{width:100%;height:66px;background:linear-gradient(90deg,#28559A,#0F2552)}
  .cs-3 b{font-size:36px}.cs-3 span{color:var(--teal)}
}

/* 31 Oct 2026 (owner, 10:42): last pill reads "SKILLS (LOs)", with "LOs" kept in its own case */
.cs-3 span em{font-style:normal;text-transform:none;letter-spacing:.06em}

/* 31 Oct 2026 (owner, 10:45): phone pills: teal arrows between levels, numbers count up and pills slide in one after another when seen */
.cs-arr{display:none}
@media (max-width:720px){
  .syl-cascade{gap:0}
  .cs-arr{display:block;width:10px;height:10px;margin:5px 0 9px;border-right:2.5px solid #0FB4AA;border-bottom:2.5px solid #0FB4AA;transform:rotate(45deg)}
  .cs-bar b{font-variant-numeric:tabular-nums}
  .syl-cascade.cs-js .cs-bar,.syl-cascade.cs-js .cs-arr{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
  .syl-cascade.cs-js.cs-in .cs-bar,.syl-cascade.cs-js.cs-in .cs-arr{opacity:1;translate:0 0}
  .syl-cascade.cs-in .cs-arr:nth-of-type(1){transition-delay:.15s}
  .syl-cascade.cs-in .cs-2{transition-delay:.25s}
  .syl-cascade.cs-in .cs-arr:nth-of-type(2){transition-delay:.4s}
  .syl-cascade.cs-in .cs-3{transition-delay:.5s}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.syl-cascade.cs-js .cs-bar,.syl-cascade.cs-js .cs-arr{opacity:1;translate:none;transition:none}}

/* 31 Oct 2026 (owner, 11:03, option A): phones: the weekly cycle as a coloured rail with numbered stops and a dashed loop back from step 4 to step 1 */
.lp-loop{display:none}
@media (max-width:720px){
  .loop{counter-reset:wk;gap:12px;padding:0 34px 0 46px}
  .loop::before{left:18px;top:30px;bottom:30px;width:4px;border:0;border-radius:4px;background:linear-gradient(#0FB4AA,var(--teal-text) 40%,var(--navy) 70%,var(--gold))}
  .loop>.lp{counter-increment:wk;overflow:visible;padding:14px 16px 15px}
  .loop>.lp::before{border-radius:var(--r) var(--r) 0 0}
  .loop .lp .ic{display:none}
  .loop .lp h3{font-size:16.5px;margin:2px 0 4px}
  .loop .lp p{font-size:13.5px}
  .loop .lp-n{position:absolute;left:-44px;top:12px;width:34px;height:34px;margin:0;padding:0;border-radius:50%;display:grid;place-items:center;font-size:0;letter-spacing:0;box-shadow:0 0 0 5px var(--page),0 8px 16px -8px rgba(15,37,82,.6)}
  .loop .lp-n::before{content:counter(wk);font-size:15px;font-weight:800}
  .lp-loop{display:block;position:absolute;right:6px;top:30px;bottom:40px;width:22px;border:2px dashed #0FB4AA;border-left:0;border-radius:0 22px 22px 0}
  .lp-loop::before{content:"";position:absolute;left:-7px;top:-7px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:10px solid #0FB4AA}
  .cyc-back{margin-top:16px}
}

/* 31 Oct 2026 (owner, 11:25, option B): phones: the MDCAT 2027 season as a ring of 36 weeks (every 4th gold, this week in teal), the week in the centre */
.s-ring{display:none}
@media (max-width:720px){
  .season[data-season]{display:none}
  .s-ring{display:block;margin:4px 0 26px}
  .sr-wheel{position:relative;width:min(280px,82vw);aspect-ratio:1;margin:0 auto}
  .sr-wheel svg{width:100%;height:100%;overflow:visible}
  .sr-seg{fill:none;stroke:rgba(255,255,255,.2);stroke-width:16;stroke-linecap:round;transition:stroke .4s}
  .sr-seg.mock{stroke:var(--gold)}
  .sr-seg.done{stroke:rgba(34,211,197,.5)}.sr-seg.mock.done{stroke:rgba(245,200,76,.55)}
  .sr-seg.now{stroke:var(--teal);filter:drop-shadow(0 0 6px rgba(34,211,197,.9))}
  .sr-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .sr-c small{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
  .sr-c b{font-family:var(--serif);font-weight:600;font-size:64px;line-height:1;color:#fff;margin:2px 0 4px}
  .sr-c span{max-width:150px;font-size:12.5px;line-height:1.35;color:var(--on-dark-soft)}
  .sr-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 14px}
  .sr-leg span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
  .sr-leg i{width:10px;height:10px;border-radius:50%}.sr-leg .l-s{background:rgba(255,255,255,.45)}.sr-leg .l-m{background:var(--gold)}.sr-leg .l-n{background:var(--teal);box-shadow:0 0 6px var(--teal)}
  .sr-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sr-dates span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;font-size:12px;color:var(--on-dark-soft);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
  .sr-dates b{font-size:14.5px;color:#fff}
  .sr-dates .g{grid-column:span 2;border-color:rgba(245,200,76,.6);background:repeating-linear-gradient(135deg,rgba(245,200,76,.18) 0 10px,rgba(245,200,76,.08) 10px 20px)}
  .sr-dates .g b{color:var(--gold)}
}

/* 31 Oct 2026 (owner, 11:52, option A): phones: the Dynamic Test Engine as one loop of five numbered stops on a rail, joined by "then" */
.bx-step,.bx-loop{display:none}
@media (max-width:720px){
  .bento{position:relative;display:flex;flex-direction:column;gap:30px;padding-left:40px}
  .bento::before{content:"";position:absolute;left:12px;top:26px;bottom:26px;width:4px;border-radius:4px;background:linear-gradient(#0FB4AA,var(--teal-text) 45%,var(--navy))}
  .bento .bx{overflow:visible;padding:16px 16px 17px;background:#F4F9FE;border:1px solid var(--line);box-shadow:0 12px 24px -20px rgba(15,37,82,.6)}
  .bento .bx:hover{transform:none}
  .bx.e1{order:1}.bx.e2{order:2}.bx.e3{order:3}.bx.e4{order:4}.bx.e5{order:5}
  .bento .bx>.label{display:none}
  .bx-step{display:block;margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
  .bento .bx h3{font-size:17px;margin:0 0 6px}
  .bento .bx p{font-size:13.5px}
  .bento .bx::before{position:absolute;left:-41px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;background:var(--navy);box-shadow:0 0 0 5px #fff}
  .bx.e1::before{content:"1";background:#0FB4AA}.bx.e2::before{content:"2";background:var(--teal-text)}.bx.e3::before{content:"3";background:#13597A}.bx.e4::before{content:"4";background:var(--navy)}.bx.e5::before{content:"5";background:var(--ink)}
  .bento .bx::after{position:absolute;left:4px;bottom:-24px;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:#0FB4AA}
  .bx.e1::after,.bx.e2::after,.bx.e3::after{content:"↓ THEN"}.bx.e4::after{content:"↓ AND"}
  .bx.nv{background:#F4F9FE;color:var(--ink)}
  .bx.nv h3{color:var(--deep)}.bx.nv .legend span{color:var(--deep)}
  .bx-loop{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0 40px;padding:10px 14px;border:1.5px dashed #0FB4AA;border-radius:999px;background:#fff;font-size:13.5px;font-weight:800;color:var(--deep)}
  .bx-loop b{color:#0FB4AA;font-size:17px;line-height:1}
}

/* 31 Oct 2026 (owner, 12:29 and 12:35): one Dynamic Test Engine section: four steps with their screens (Test, Measure, Find the root, Practise), a loop back, the example and the progress tiles */
.dte-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:16px}
.dte-st{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:var(--r);background:#F4F9FE;border:1px solid var(--line);box-shadow:0 14px 30px -26px rgba(15,37,82,.7)}
.dte-st h3{font-size:18px;line-height:1.25;margin:3px 0 6px;color:var(--deep)}
.dte-st p{font-size:14px;line-height:1.5;color:var(--soft);margin:0 0 14px}
.dte-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.dte-n{position:absolute;top:-15px;left:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;box-shadow:0 0 0 5px #fff,0 8px 16px -8px rgba(15,37,82,.6)}
.dte-1 .dte-n{background:#0FB4AA}.dte-2 .dte-n{background:var(--teal-text)}.dte-3 .dte-n{background:#13597A}.dte-4 .dte-n{background:var(--navy)}
.dte-st:not(:last-child)::after{content:"›";position:absolute;top:50%;right:-13px;width:10px;margin-top:-14px;font-size:24px;font-weight:800;line-height:1;color:#0FB4AA}
.dte-vis{margin-top:auto}
.dte-share{display:flex;height:40px;border-radius:12px;overflow:hidden}
.dte-share i{display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;line-height:1.05;color:var(--ink)}
.dte-share i small{font-size:9.5px;font-weight:700;opacity:.75}
.dte-share i:nth-child(1){background:#22D3C5}.dte-share i:nth-child(2){background:#5FDDD3}.dte-share i:nth-child(3){background:#A6EBE5}.dte-share i:nth-child(4){background:#C8D6E8}.dte-share i:nth-child(5){background:#DDE3F5}
.dte-lv{display:flex;gap:5px;margin-top:8px}.dte-lv span{flex:1;text-align:center;padding:3px 0;border-radius:7px;font-size:10.5px;font-weight:800;color:var(--navy);background:#E3EEF9}
.dte-lv span:nth-child(4){background:var(--navy);color:#fff}
.dte-vis.bands{display:flex;flex-wrap:wrap;gap:6px}
.dte-lad{display:flex;gap:5px;align-items:flex-end;height:58px}
.dte-lad i{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;border-radius:8px;font-style:normal;font-size:10.5px;font-weight:800;color:var(--navy);background:#E3EEF9;border:1px solid var(--line)}
.dte-lad i.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.dte-loop{position:relative;height:46px;margin:0 12.5% 0 calc(12.5% + 2%);border:2px dashed rgba(15,180,170,.7);border-top:0;border-radius:0 0 30px 30px}
.dte-loop::before{content:"";position:absolute;left:-8px;top:-12px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #0FB4AA}
.dte-loop span{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(15,37,82,.45);font-size:14px;font-weight:800;color:var(--deep);white-space:nowrap}
.dte-loop b{color:#0FB4AA;font-size:18px;line-height:1}
.dte-duo{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:44px}
.dte-pan{padding:20px 22px}
.dte-pan h4{margin:4px 0 14px;font-size:16px;line-height:1.35;color:var(--deep)}
.dte-trip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dte-trip li{position:relative;padding:10px 12px;border-radius:14px;background:var(--page)}
.dte-trip li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;margin-top:-10px;font-weight:900;color:#0FB4AA}
.dte-trip small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.dte-trip b{font-size:22px;color:var(--deep);margin-right:6px}
.dte-grow{height:6px;border-radius:6px;margin-top:12px;background:linear-gradient(90deg,#F7C3CB,#DDE3F5 50%,#22D3C5)}
.dte-pan .perf{margin-top:0}
.dte-note{font-size:12.5px;color:var(--soft);margin:14px 2px 0}
@media (max-width:1060px){
  .dte-steps{grid-template-columns:1fr 1fr;row-gap:30px}
  .dte-st::after{display:none}
  .dte-loop{height:auto;margin:22px 0 0;border:0;text-align:center}
  .dte-loop::before{display:none}
  .dte-loop span{position:static;transform:none;white-space:normal}
  .dte-duo{grid-template-columns:1fr;margin-top:22px}
}
@media (max-width:720px){
  .dte-steps{position:relative;grid-template-columns:1fr;row-gap:14px;padding-left:40px}
  .dte-steps::before{content:"";position:absolute;left:13px;top:26px;bottom:26px;width:4px;border-radius:4px;background:linear-gradient(#0FB4AA,var(--teal-text) 40%,#13597A 70%,var(--navy))}
  .dte-st{padding:16px 16px 17px}
  .dte-n{top:14px;left:-41px}
  .dte-st h3{font-size:16.5px}.dte-st p{font-size:13.5px;margin-bottom:12px}
  .dte-loop{margin:16px 0 0 40px;padding:0}
  .dte-loop span{display:flex;justify-content:center;border:1.5px dashed #0FB4AA;box-shadow:none;font-size:13.5px}
  .dte-trip{grid-template-columns:1fr;gap:8px}
  .dte-trip li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-14px;margin:0}
  .dte-pan{padding:16px}
}

/* 31 Oct 2026 (owner, 12:49): engine v2: five equal subject boxes in step 1; "measured"; Practise 3, Find the root 4; example and progress as full-width sub-sections */
.dte-subj{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dte-subj span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 0 9px;border-radius:12px;font-size:12px;font-weight:700;color:var(--soft);background:#fff;border:1px solid var(--line)}
.dte-subj b{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--deep)}
.dte-subj span:nth-child(1){background:#D6F6F0;border-color:#9FE6DE}.dte-subj span:nth-child(2){background:#E2F8F5;border-color:#BDEDE7}.dte-subj span:nth-child(3){background:#EDFAF8}
.dte-sub{margin-top:22px;padding:26px 28px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#fff,#F4F9FE);box-shadow:0 18px 36px -30px rgba(15,37,82,.7)}
.dte-loop+.dte-sub{margin-top:52px}
.dte-sub-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:16px}
.dte-sub-h .dte-k{flex-basis:100%}
.dte-sub-h h3{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,28px);color:var(--deep)}
.dte-sub-h p{margin:0;font-size:14.5px;color:var(--soft)}
.dte-ex .dte-trip{grid-template-columns:repeat(3,1fr);gap:18px}
.dte-ex .dte-trip li{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.dte-ex .dte-trip li.t1{border-color:#F3C1CA}.dte-ex .dte-trip li.t3{border-color:#9FE6DE;background:#F2FCFA}
.dte-ex .dte-trip b{font-size:30px}
.dte-ex .dte-trip li:not(:last-child)::after{right:-15px;font-size:18px}
.dte-prog .perf{grid-template-columns:repeat(4,1fr)}
.dte-prog .perf div{padding:16px 0}.dte-prog .perf b{font-size:28px}
@media (max-width:720px){
  .dte-subj{gap:4px}.dte-subj span{padding:8px 0;font-size:11px}.dte-subj b{font-size:11px}
  .dte-sub{padding:18px 16px}.dte-loop+.dte-sub{margin-top:22px}
  .dte-ex .dte-trip{grid-template-columns:1fr;gap:12px}
  .dte-ex .dte-trip li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-16px;margin:0;font-size:14px}
  .dte-ex .dte-trip b{font-size:24px}
  .dte-prog .perf{grid-template-columns:repeat(2,1fr)}
}

/* 31 Oct 2026 (owner, 12:58): engine v3: step 2 shows the climb Weak > Developing > Strong as rising steps; the LO card left out of step 4 */
.dte-stair{display:flex;align-items:flex-end;gap:4px}
.dte-stair span{flex:1;display:flex;align-items:flex-end;justify-content:center;padding:0 2px 9px;border-radius:10px 10px 6px 6px;font-size:11.5px;font-weight:800;text-align:center}
.dte-stair .st-w{height:34px;background:var(--red-tint);color:var(--red-text);border:1px solid #F3C1CA}
.dte-stair .st-d{height:52px;background:var(--navy-tint);color:var(--navy)}
.dte-stair .st-s{height:70px;background:#22D3C5;color:var(--ink)}
.dte-stair i{align-self:center;font-style:normal;font-size:18px;font-weight:900;color:#0FB4AA;margin-top:14px}

/* 31 Oct 2026 (owner, 13:00, option B): step 2 as a mastery gauge; the needle swings from Weak to Strong when the step comes into view */
.dte-gauge svg{display:block;width:100%;max-width:210px;height:auto;margin:0 auto;overflow:visible}
.dte-gauge path{fill:none;stroke-width:16}
.dte-gauge .gw{stroke:#F3B3BE;stroke-linecap:round}.dte-gauge .gd{stroke:#C7CFEC}.dte-gauge .gs{stroke:#22D3C5;stroke-linecap:round}
.dte-gauge line{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.dte-gauge circle{fill:var(--ink)}
.dte-gauge .gn{transform-origin:100px 100px;transform:rotate(52deg)}
.dte-gauge .gl{display:flex;justify-content:space-between;max-width:230px;margin:6px auto 0;font-size:11.5px;font-weight:800}
.dte-gauge .gl span:nth-child(1){color:var(--red-text)}.dte-gauge .gl span:nth-child(2){color:var(--navy)}.dte-gauge .gl span:nth-child(3){color:var(--teal-text)}
@media (prefers-reduced-motion:reduce){.dte-gauge .gn{transition:none}}

/* 31 Oct 2026 (owner, 13:05): the gauge needle swings slowly, with a soft settle, every time the step comes into view (scrolling up or down) */
.dte-gauge.g-js .gn{transform:rotate(-72deg);transition:none}
.dte-gauge.g-js.go .gn{transform:rotate(52deg);transition:transform 3.2s cubic-bezier(.22,1.12,.36,1) .3s}
.dte-gauge.g-js.go .gs{filter:drop-shadow(0 0 6px rgba(34,211,197,.55));transition:filter .6s ease 2.6s}
@media (prefers-reduced-motion:reduce){.dte-gauge.g-js .gn,.dte-gauge.g-js.go .gn{transform:rotate(52deg);transition:none}}

/* 31 Oct 2026 (owner, 13:08 and 13:12, option B restyled): step 3 as a level ring: five arcs L1 to L5 fill one after another in deepening colours to a glowing L4 (teal into navy), "L4 · your level" in the centre, the up and down rules below; plays every time it comes into view */
.dte-ring .rw{position:relative;width:min(190px,100%);margin:0 auto}
.dte-ring svg{display:block;width:100%;height:auto;overflow:visible}
.dte-ring path{fill:none;stroke-width:13;stroke-linecap:round}
.dte-ring .rt path{stroke:#E3EEF9}
.dte-ring .rf .s1{stroke:#B8F0EA}.dte-ring .rf .s2{stroke:#7FE3D9}.dte-ring .rf .s3{stroke:#2DD4C6}
.dte-ring .rf .s4{stroke:url(#l4g);filter:drop-shadow(0 0 6px rgba(34,211,197,.7))}
.dte-ring .rl text{font-family:var(--sans,inherit);font-size:9.5px;font-weight:800;fill:#8A99B8;text-anchor:middle}
.dte-ring .rl .t4{fill:var(--navy)}
.dte-ring .rk{fill:#fff;stroke:var(--navy);stroke-width:3.5}
.dte-ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:4px}
.dte-ring .rc b{font-family:var(--serif);font-weight:600;font-size:44px;line-height:1;background:linear-gradient(135deg,#0FB4AA,#1C3C77);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--navy)}
.dte-ring .rc small{margin-top:3px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text)}
.dte-ring .rr{display:flex;gap:6px;margin-top:10px}
.dte-ring .rr span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.dte-ring .rr .up{background:#D6F6F0;color:var(--teal-text)}.dte-ring .rr .dn{background:var(--red-tint);color:var(--red-text)}
.dte-ring .rr i{font-style:normal;font-size:13px}
/* motion: segments draw in turn, the knob pops, L4 glows */
.dte-ring.r-js .rf path{stroke-dasharray:1;stroke-dashoffset:1}
.dte-ring.r-js .rk{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.dte-ring.r-js .rc b{opacity:0;transform:translateY(6px)}
.dte-ring.r-js.go .rf path{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.4,0,.2,1)}
.dte-ring.r-js.go .rf .s1{transition-delay:.2s}.dte-ring.r-js.go .rf .s2{transition-delay:.9s}.dte-ring.r-js.go .rf .s3{transition-delay:1.6s}.dte-ring.r-js.go .rf .s4{transition-delay:2.3s;transition-duration:1s}
.dte-ring.r-js.go .rk{opacity:1;transform:scale(1);transition:opacity .3s 3.2s,transform .6s cubic-bezier(.3,1.6,.5,1) 3.2s}
.dte-ring.r-js.go .rc b{opacity:1;transform:none;transition:opacity .6s 2.6s,transform .8s cubic-bezier(.2,1.2,.4,1) 2.6s}
@media (prefers-reduced-motion:reduce){.dte-ring.r-js .rf path{stroke-dashoffset:0}.dte-ring.r-js .rk,.dte-ring.r-js .rc b{opacity:1;transform:none}}

/* 31 Oct 2026 (owner, 13:14): step 1 restyled: five equal glass tubes (BIO, CHEM, PHY, ENG, LR) filled to each subject's share, rising every time they come into view; the pictures of steps 1 to 3 share one height so they line up */
@media (min-width:1061px){.dte-st .dte-vis{height:250px;display:flex;flex-direction:column;justify-content:center}}
.dte-tubes .tbs{display:flex;gap:7px;height:190px}
.dte-tubes .tb{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0 9px;border-radius:16px;background:linear-gradient(180deg,#fff,#F1F7FD);border:1px solid var(--line);box-shadow:inset 0 2px 6px rgba(15,37,82,.06)}
.dte-tubes .tb b{position:relative;z-index:1;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--deep)}
.dte-tubes .tb em{position:relative;z-index:1;font-style:normal;font-family:var(--serif);font-weight:600;font-size:19px;line-height:1;color:var(--ink)}
.dte-tubes .fl{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p) * 1.35% + 12%);border-radius:12px 12px 0 0;transform-origin:bottom}
.dte-tubes .fl::before{content:"";position:absolute;left:8%;right:8%;top:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.55)}
.dte-tubes .tb1 .fl{background:linear-gradient(180deg,#22D3C5,#0FB4AA);box-shadow:0 0 14px rgba(34,211,197,.45)}
.dte-tubes .tb2 .fl{background:linear-gradient(180deg,#5FDDD3,#22C2B5)}
.dte-tubes .tb3 .fl{background:linear-gradient(180deg,#8FE6DE,#4FD3C8)}
.dte-tubes .tb4 .fl{background:linear-gradient(180deg,#C7CFEC,#A9B6E2)}
.dte-tubes .tb5 .fl{background:linear-gradient(180deg,#DDE3F5,#C2CCEB)}
.dte-tubes .tb1 em{color:#fff}
.dte-tubes .tcap{display:block;margin-top:8px;text-align:center;font-size:11px;font-weight:700;color:var(--soft)}
.dte-tubes.t-js .fl{transform:scaleY(0)}
.dte-tubes.t-js.go .fl{transform:scaleY(1);transition:transform 1.8s cubic-bezier(.22,1.1,.36,1)}
.dte-tubes.t-js.go .tb1 .fl{transition-delay:.2s}.dte-tubes.t-js.go .tb2 .fl{transition-delay:.45s}.dte-tubes.t-js.go .tb3 .fl{transition-delay:.7s}.dte-tubes.t-js.go .tb4 .fl{transition-delay:.95s}.dte-tubes.t-js.go .tb5 .fl{transition-delay:1.2s}
.dte-tubes.t-js .tb1 em{color:var(--ink);transition:color .4s}.dte-tubes.t-js.go .tb1 em{color:#fff;transition-delay:1.4s}
@media (max-width:720px){.dte-tubes .tbs{height:150px;gap:5px}.dte-tubes .tb em{font-size:16px}.dte-tubes .tb b{font-size:10px}}
@media (prefers-reduced-motion:reduce){.dte-tubes.t-js .fl{transform:none}.dte-tubes.t-js .tb1 em{color:#fff}}
.dte-gauge .gl{width:100%;box-sizing:border-box}

/* 31 Oct 2026 (owner, 13:40): bottles v2: each bottle smaller than the one before (BIO tallest), its own colour, a moving liquid surface, rising bubbles, and the % counting up each time they come into view */
.dte-tubes .tbs{align-items:flex-end}
.dte-tubes .tb{border-radius:18px 18px 14px 14px}
.dte-tubes .tb1{height:100%;--c:#0FB4AA;--c2:#22D3C5}
.dte-tubes .tb2{height:88%;--c:#2F6FD6;--c2:#5B93F0}
.dte-tubes .tb3{height:77%;--c:#7357D8;--c2:#9B85F0}
.dte-tubes .tb4{height:66%;--c:#E8A21F;--c2:#F7C24F}
.dte-tubes .tb5{height:57%;--c:#E0567A;--c2:#F2869F}
.dte-tubes .fl{background:linear-gradient(180deg,var(--c2),var(--c)) !important;box-shadow:0 0 16px -2px var(--c2) !important;border-radius:0}
.dte-tubes .fl::before{left:0;right:auto;top:-7px;width:200%;height:8px;border-radius:0;background:var(--c2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 8V5Q6 0 12 4T24 4V8Z'/%3E%3C/svg%3E") repeat-x 0 0/24px 8px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 8V5Q6 0 12 4T24 4V8Z'/%3E%3C/svg%3E") repeat-x 0 0/24px 8px;animation:dte-wave 2.2s linear infinite}
.dte-tubes .tb2 .fl::before{animation-duration:2.6s}.dte-tubes .tb3 .fl::before{animation-duration:2s}.dte-tubes .tb4 .fl::before{animation-duration:2.8s}.dte-tubes .tb5 .fl::before{animation-duration:2.4s}
@keyframes dte-wave{to{transform:translateX(-24px)}}
.dte-tubes .bb{position:absolute;inset:0;overflow:hidden}
.dte-tubes .bb::before,.dte-tubes .bb::after{content:"";position:absolute;bottom:-6px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);animation:dte-bub 2.6s ease-in infinite}
.dte-tubes .bb::before{left:28%}.dte-tubes .bb::after{left:64%;width:4px;height:4px;animation-delay:1.3s;animation-duration:3.1s}
@keyframes dte-bub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-140px);opacity:0}}
.dte-tubes .tb em{color:#fff !important;text-shadow:0 1px 4px rgba(11,27,69,.35)}
.dte-tubes .tb4 em{color:var(--ink) !important;text-shadow:none}
.dte-tubes .tb b{color:var(--c)}
.dte-tubes .fl{height:calc(var(--p) * 1.05% + 26%) !important}
@media (prefers-reduced-motion:reduce){.dte-tubes .fl::before,.dte-tubes .bb::before,.dte-tubes .bb::after{animation:none}}

/* 31 Oct 2026 (owner, 13:44): step 4 picture, in line with steps 1-3: a skill tree; a red trace runs from the weak skill down to the skill it builds on, which then pulses as the root to fix first; plays each time it comes into view */
.dte-root .rtw{width:min(200px,100%);margin:0 auto}
.dte-root svg{display:block;width:100%;height:auto;overflow:visible}
.dte-root .ln path{stroke:#C8D6E8;stroke-width:2.5;fill:none;stroke-linecap:round}
.dte-root .tr{fill:none;stroke:#E0566C;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(224,86,108,.5))}
.dte-root .n-s{fill:#22D3C5}.dte-root .n-d{fill:#C7CFEC}
.dte-root .n-w{fill:#fff;stroke:#E0566C;stroke-width:4}.dte-root .n-w2{fill:#FBE3E7;stroke:#E0566C;stroke-width:2.5}
.dte-root .rt{fill:#E0566C;stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 4px 8px rgba(224,86,108,.55))}
.dte-root .rp{fill:none;stroke:#E0566C;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.dte-root .tl text{font-size:10px;font-weight:800;text-anchor:middle;fill:var(--red-text);letter-spacing:.04em}
.dte-root .rr{display:flex;gap:6px;margin-top:10px}
.dte-root .rr span{flex:1;padding:6px 4px;border-radius:999px;text-align:center;font-size:11px;font-weight:800;white-space:nowrap}
.dte-root .rr .w{background:var(--red-tint);color:var(--red-text)}.dte-root .rr .b{background:var(--navy-tint);color:var(--navy)}
@keyframes dte-ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.dte-root .rp{animation:dte-ping 2s ease-out infinite}.dte-root .rp2{animation-delay:1s}
.dte-root.f-js .tr{stroke-dashoffset:1}
.dte-root.f-js .rt{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.dte-root.f-js .rp{animation:none}
.dte-root.f-js .tl text:last-child{opacity:0}
.dte-root.f-js.go .tr{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.45,0,.25,1) .4s}
.dte-root.f-js.go .rt{opacity:1;transform:scale(1);transition:opacity .3s 2.5s,transform .7s cubic-bezier(.3,1.7,.5,1) 2.5s}
.dte-root.f-js.go .rp{animation:dte-ping 2s ease-out 3s infinite}.dte-root.f-js.go .rp2{animation-delay:4s}
.dte-root.f-js.go .tl text:last-child{opacity:1;transition:opacity .5s 2.8s}
.dte-root.f-js .n-w{animation:none}.dte-root.f-js.go .n-w{animation:dte-blink 1s ease-in-out 2}
@keyframes dte-blink{50%{fill:#FBE3E7}}
@media (prefers-reduced-motion:reduce){.dte-root .rp{animation:none}.dte-root.f-js .tr{stroke-dashoffset:0}.dte-root.f-js .rt,.dte-root.f-js .tl text:last-child{opacity:1;transform:none}}

/* 31 Oct 2026 (owner, 13:48): the example "One skill over three tests" in the style of the four steps: three numbered cards, each with a small gauge whose needle and arc rise to that test's score, the score counting up, and a growth bar that fills; plays each time it comes into view */
.dte-ex .dte-trip.dte-tx{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.dte-tx .tx{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 18px 18px !important;border-radius:var(--r) !important;background:#F4F9FE !important;border:1px solid var(--line) !important;box-shadow:0 14px 30px -26px rgba(15,37,82,.7)}
.dte-tx .tx .dte-n{top:-15px;left:18px}
.dte-tx .tx1 .dte-n{background:#E0566C}.dte-tx .tx2 .dte-n{background:var(--navy)}.dte-tx .tx3 .dte-n{background:#0FB4AA}
.dte-tx .tx small{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.dte-tx .mg{width:min(170px,100%);margin:6px auto 2px}
.dte-tx .mg svg{display:block;width:100%;height:auto;overflow:visible}
.dte-tx .mt,.dte-tx .mv{fill:none;stroke-width:11;stroke-linecap:round}
.dte-tx .mt{stroke:#E3EEF9}
.dte-tx .mv{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v))}
.dte-tx .tx1 .mv{stroke:#F08A9B}.dte-tx .tx2 .mv{stroke:#8C9BD6}.dte-tx .tx3 .mv{stroke:#22D3C5;filter:drop-shadow(0 0 5px rgba(34,211,197,.6))}
.dte-tx .mn{transform-origin:60px 62px;transform:rotate(calc(var(--v) * 1.8deg - 90deg))}
.dte-tx line{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}.dte-tx circle{fill:var(--ink)}
.dte-tx .tx b{font-size:32px !important;line-height:1;margin:4px 0 8px !important;color:var(--deep)}
.dte-tx .tx:not(:last-child)::after{content:"›" !important;right:-17px !important;top:50% !important;margin-top:-14px !important;font-size:24px !important;font-weight:800;color:#0FB4AA}
.dte-ex .dte-grow{position:relative;height:8px;margin-top:18px;background:#E3EEF9;overflow:hidden}
.dte-ex .dte-grow i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,#F08A9B,#8C9BD6 50%,#22D3C5)}
/* motion */
.dte-ex.x-js .mv{stroke-dashoffset:100}.dte-ex.x-js .mn{transform:rotate(-90deg)}.dte-ex.x-js .dte-grow i{transform:scaleX(0);transform-origin:left}
.dte-ex.x-js.go .mv{stroke-dashoffset:calc(100 - var(--v));transition:stroke-dashoffset 1.8s cubic-bezier(.3,.9,.3,1)}
.dte-ex.x-js.go .mn{transform:rotate(calc(var(--v) * 1.8deg - 90deg));transition:transform 1.8s cubic-bezier(.3,1.2,.4,1)}
.dte-ex.x-js.go .tx1 .mv,.dte-ex.x-js.go .tx1 .mn{transition-delay:.2s}.dte-ex.x-js.go .tx2 .mv,.dte-ex.x-js.go .tx2 .mn{transition-delay:.9s}.dte-ex.x-js.go .tx3 .mv,.dte-ex.x-js.go .tx3 .mn{transition-delay:1.6s}
.dte-ex.x-js.go .dte-grow i{transform:scaleX(1);transition:transform 3.2s cubic-bezier(.4,0,.2,1) .2s}
@media (max-width:720px){
  .dte-ex .dte-trip.dte-tx{grid-template-columns:1fr;gap:26px}
  .dte-tx .tx:not(:last-child)::after{content:"↓" !important;right:auto !important;left:50% !important;top:auto !important;bottom:-24px;margin:0 0 0 -5px !important;font-size:18px !important}
  .dte-tx .mg{width:150px}
}
@media (prefers-reduced-motion:reduce){.dte-ex.x-js .mv{stroke-dashoffset:calc(100 - var(--v))}.dte-ex.x-js .mn{transform:rotate(calc(var(--v) * 1.8deg - 90deg))}.dte-ex.x-js .dte-grow i{transform:none}}
.dte-ex .dte-trip.dte-tx{margin-top:30px}

/* 31 Oct 2026 (owner, 14:03): example restyled away from gauges; both owner-chosen styles shown for review: B three rings, then C a rising podium; both animate each time they come into view */
.ex-rings{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.er{position:relative;display:flex;flex-direction:column;align-items:center;padding:16px 16px 18px;border-radius:var(--r);background:#F4F9FE;border:1px solid var(--line);box-shadow:0 14px 30px -26px rgba(15,37,82,.7)}
.er:not(:last-child)::after{content:"›";position:absolute;right:-17px;top:50%;margin-top:-14px;font-size:24px;font-weight:800;color:#0FB4AA}
.er small{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.ew{position:relative;width:130px;height:130px;margin:6px 0 10px}
.ew svg{width:100%;height:100%;transform:rotate(-90deg)}
.ew circle{fill:none;stroke-width:10}
.et{stroke:#E3EEF9}.ev{stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v))}
.er1 .ev{stroke:#F08A9B}.er2 .ev{stroke:#8C9BD6}.er3 .ev{stroke:#22D3C5;filter:drop-shadow(0 0 5px rgba(34,211,197,.6))}
.ew b{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;font-weight:800;color:var(--deep)}
.ex-pod{display:flex;align-items:flex-end;gap:18px;height:260px;margin-top:30px;padding:0 6%;border-bottom:3px solid var(--line)}
.ep{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.ep>b{font-size:30px;font-weight:800;color:var(--deep);line-height:1}
.ep .band{margin:6px 0 10px}
.ep i{display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--v) * 1.9px);border-radius:16px 16px 0 0;font-style:normal;transform-origin:bottom;box-shadow:0 -8px 24px -14px rgba(15,37,82,.5)}
.ep i span{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ep1 i{background:linear-gradient(180deg,#F7B1BE,#F08A9B)}.ep2 i{background:linear-gradient(180deg,#B4BEE6,#8C9BD6)}.ep3 i{background:linear-gradient(180deg,#5FDDD3,#0FB4AA);box-shadow:0 -6px 26px -8px rgba(34,211,197,.7)}
/* motion */
.dte-ex.x-js .ev{stroke-dashoffset:100}
.dte-ex.x-js .ep i{transform:scaleY(0)}
.dte-ex.x-js .ep .band,.dte-ex.x-js .ep>b{opacity:0}
.dte-ex.x-js.go .ev{stroke-dashoffset:calc(100 - var(--v));transition:stroke-dashoffset 1.8s cubic-bezier(.3,.9,.3,1)}
.dte-ex.x-js.go .er2 .ev{transition-delay:.7s}.dte-ex.x-js.go .er3 .ev{transition-delay:1.4s}.dte-ex.x-js.go .er1 .ev{transition-delay:.2s}
.dte-ex.x-js.go .ep i{transform:scaleY(1);transition:transform 1.4s cubic-bezier(.2,1.2,.4,1)}
.dte-ex.x-js.go .ep>b,.dte-ex.x-js.go .ep .band{opacity:1;transition:opacity .5s}
.dte-ex.x-js.go .ep1 i{transition-delay:.3s}.dte-ex.x-js.go .ep2 i{transition-delay:1s}.dte-ex.x-js.go .ep3 i{transition-delay:1.7s}
.dte-ex.x-js.go .ep1>b,.dte-ex.x-js.go .ep1 .band{transition-delay:1s}.dte-ex.x-js.go .ep2>b,.dte-ex.x-js.go .ep2 .band{transition-delay:1.7s}.dte-ex.x-js.go .ep3>b,.dte-ex.x-js.go .ep3 .band{transition-delay:2.4s}
@media (max-width:720px){
  .ex-rings{grid-template-columns:1fr;gap:26px}
  .er:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-24px;margin:0 0 0 -5px;font-size:18px}
  .ex-pod{height:230px;gap:8px;padding:0}
  .ep>b{font-size:22px}.ep .band{font-size:10px;padding:2px 6px}
  .ep i{height:calc(var(--v) * 1.5px)}.ep i span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.dte-ex.x-js .ev{stroke-dashoffset:calc(100 - var(--v))}.dte-ex.x-js .ep i{transform:none}.dte-ex.x-js .ep>b,.dte-ex.x-js .ep .band{opacity:1}}

/* 31 Oct 2026 (owner, 14:10): rings kept, podium removed; title "Same LO in 3 Tests"; each card's "Test n" as a centred pill */
.er small.etag{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;font-size:11.5px;letter-spacing:.14em;color:#fff;box-shadow:0 8px 18px -10px rgba(15,37,82,.6)}
.er small.etag i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;font-style:normal;font-size:12px;letter-spacing:0}
.er1 .etag{background:linear-gradient(135deg,#F08A9B,#E0566C)}.er1 .etag i{color:#E0566C}
.er2 .etag{background:linear-gradient(135deg,#8C9BD6,#4E63B3)}.er2 .etag i{color:#4E63B3}
.er3 .etag{background:linear-gradient(135deg,#22D3C5,#0FB4AA)}.er3 .etag i{color:#0B6F68}

/* 31 Oct 2026 (owner, 14:13): progress sub-section in the style of the rings above: four cards with centred gradient pills, a moving picture in each (test slots, missed slots, average bar, video pulse), numbers counting up, and tabs This week / This month / Since you began that switch the sample figures */
.pg-h{align-items:flex-end}
.pg-h h3{flex:1 1 auto}
.pg-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#EAF1FA;border:1px solid var(--line)}
.pg-tabs button{border:0;cursor:pointer;padding:7px 14px;border-radius:999px;background:transparent;font:inherit;font-size:12.5px;font-weight:800;color:var(--soft);transition:background .3s,color .3s,box-shadow .3s}
.pg-tabs button[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:0 6px 14px -8px rgba(15,37,82,.8)}
.pg-tabs button:focus-visible{outline:3px solid #22D3C5;outline-offset:2px}
.pg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.pg{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 20px;border-radius:var(--r);background:#F4F9FE;border:1px solid var(--line);box-shadow:0 14px 30px -26px rgba(15,37,82,.7)}
.pg-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;box-shadow:0 8px 18px -10px rgba(15,37,82,.6)}
.pg-tag i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;font-style:normal;font-size:11px;letter-spacing:0}
.pg1 .pg-tag{background:linear-gradient(135deg,#22D3C5,#0FB4AA)}.pg1 .pg-tag i{color:#0B6F68}
.pg2 .pg-tag{background:linear-gradient(135deg,#F08A9B,#E0566C)}.pg2 .pg-tag i{color:#E0566C}
.pg3 .pg-tag{background:linear-gradient(135deg,#8C9BD6,#4E63B3)}.pg3 .pg-tag i{color:#4E63B3}
.pg4 .pg-tag{background:linear-gradient(135deg,#9B85F0,#7357D8)}.pg4 .pg-tag i{color:#7357D8;font-size:9px}
.pg>b{font-size:40px;font-weight:800;line-height:1;color:var(--deep);font-variant-numeric:tabular-nums}
.pg2>b{color:var(--red-text)}
.pg-slots{display:flex;gap:5px}
.pg-slots i{width:14px;height:14px;border-radius:5px;background:#E3EEF9;transition:background .35s,transform .35s}
.pg1 .pg-slots i.on{background:#22D3C5;transform:scale(1.08)}
.pg2 .pg-slots i.on{background:#E0566C;transform:scale(1.08)}
.pg-bar{width:85%;height:10px;border-radius:10px;background:#E3EEF9;overflow:hidden}
.pg-bar span{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#8C9BD6,#4E63B3);transition:width 1.6s cubic-bezier(.3,.9,.3,1)}
.pg-play{display:flex;gap:6px;align-items:flex-end;height:16px}
.pg-play span{width:5px;border-radius:3px;background:#9B85F0;animation:pg-eq 1.1s ease-in-out infinite}
.pg-play span:nth-child(2){animation-delay:.2s;background:#7357D8}.pg-play span:nth-child(3){animation-delay:.4s}
@keyframes pg-eq{0%,100%{height:5px}50%{height:16px}}
@media (max-width:1060px){.pg-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.pg-tabs{width:100%}.pg-tabs button{flex:1;padding:7px 4px;font-size:11.5px}.pg-cards{gap:12px}.pg{padding:14px 10px 16px}.pg>b{font-size:30px}.pg-tag{font-size:10px;letter-spacing:.1em;padding-right:10px}.pg-slots{gap:3px}.pg-slots i{width:11px;height:11px}}
@media (prefers-reduced-motion:reduce){.pg-play span{animation:none;height:12px}}
@media (max-width:720px){.pg-tabs button{white-space:nowrap;font-size:10.5px;padding:7px 2px}}
.pg-cards{margin-top:14px}

/* 31 Oct 2026 (owner, 14:26): comparison restyled, columns kept: a coloured icon for each row, the other platforms' column muted, PTA's column a raised navy column with teal checks that slide in row by row each time it comes into view */
.cmp2{max-width:1000px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.cmp-t{border-spacing:0 0}
.cmp-t th,.cmp-t td{border-top:1px solid #E6EDF6;padding:16px 18px;vertical-align:middle}
.cmp-t thead th,.cmp-t thead td{border-top:0;padding:0 18px 12px}
.oth-h{display:inline-block;padding:7px 14px;border-radius:999px;background:#EEF2F8;color:var(--soft);font-size:12.5px;font-weight:800;letter-spacing:.06em}
.cmp-t thead .c-p{background:linear-gradient(180deg,#24508F,#1C3C77);border-radius:22px 22px 0 0;padding:18px 20px 14px}
.pta-h{display:inline-block;padding:7px 16px;border-radius:999px;background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.04em;box-shadow:0 8px 20px -8px rgba(34,211,197,.8)}
.cmp-t tbody th{width:200px;display:table-cell;font-size:12px;letter-spacing:.12em;color:var(--deep)}
.cmp-t .rk{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:12px;border-radius:11px;vertical-align:middle;box-shadow:0 8px 16px -10px rgba(15,37,82,.6)}
.cmp-t .rk svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp-t tbody tr:nth-child(1) .rk{background:linear-gradient(135deg,#22D3C5,#0FB4AA)}
.cmp-t tbody tr:nth-child(2) .rk{background:linear-gradient(135deg,#5B93F0,#2F6FD6)}
.cmp-t tbody tr:nth-child(3) .rk{background:linear-gradient(135deg,#9B85F0,#7357D8)}
.cmp-t tbody tr:nth-child(4) .rk{background:linear-gradient(135deg,#F7C24F,#E8A21F)}
.cmp-t tbody tr:nth-child(5) .rk{background:linear-gradient(135deg,#F2869F,#E0566C)}
.cmp-t tbody tr:nth-child(6) .rk{background:linear-gradient(135deg,#5FDDD3,#0B6F68)}
.cmp-t tbody tr:nth-child(7) .rk{background:linear-gradient(135deg,#8C9BD6,#1C3C77)}
.cmp-t td.c-o{color:#8A99B8;font-weight:600;font-size:14.5px}
.cmp-t .ic.x{width:22px;height:22px;border-radius:50%;background:#FCECEF;color:#E0566C;font-size:11px}
.cmp-t td.c-p{background:linear-gradient(180deg,#1C3C77,#183568);color:#fff;font-weight:700;border-top:1px solid rgba(255,255,255,.08);box-shadow:inset 1px 0 0 rgba(34,211,197,.25),inset -1px 0 0 rgba(34,211,197,.25)}
.cmp-t tbody tr:last-child td.c-p{border-radius:0 0 22px 22px;box-shadow:inset 1px 0 0 rgba(34,211,197,.25),inset -1px 0 0 rgba(34,211,197,.25),0 30px 50px -30px rgba(15,37,82,.9)}
.cmp-t .ic.ok{width:24px;height:24px;border-radius:50%;background:#22D3C5;color:var(--ink);font-size:12px;box-shadow:0 0 0 4px rgba(34,211,197,.18)}
@media (hover:hover){.cmp-t tbody tr:hover th,.cmp-t tbody tr:hover td.c-o{background:#F4F9FE}.cmp-t tbody tr:hover td.c-p{background:linear-gradient(180deg,#24508F,#1C3C77)}}
.cmp2.c-js .cmp-t td.c-p .ic.ok{transform:scale(0)}
.cmp2.c-js .cmp-t td.c-p{color:rgba(255,255,255,0)}
.cmp2.c-js.go .cmp-t td.c-p{color:#fff;transition:color .6s ease}
.cmp2.c-js.go .cmp-t td.c-p .ic.ok{transform:scale(1);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.cmp2.c-js.go tbody tr:nth-child(1) td.c-p,.cmp2.c-js.go tbody tr:nth-child(1) .ic.ok{transition-delay:.15s}
.cmp2.c-js.go tbody tr:nth-child(2) td.c-p,.cmp2.c-js.go tbody tr:nth-child(2) .ic.ok{transition-delay:.4s}
.cmp2.c-js.go tbody tr:nth-child(3) td.c-p,.cmp2.c-js.go tbody tr:nth-child(3) .ic.ok{transition-delay:.65s}
.cmp2.c-js.go tbody tr:nth-child(4) td.c-p,.cmp2.c-js.go tbody tr:nth-child(4) .ic.ok{transition-delay:.9s}
.cmp2.c-js.go tbody tr:nth-child(5) td.c-p,.cmp2.c-js.go tbody tr:nth-child(5) .ic.ok{transition-delay:1.15s}
.cmp2.c-js.go tbody tr:nth-child(6) td.c-p,.cmp2.c-js.go tbody tr:nth-child(6) .ic.ok{transition-delay:1.4s}
.cmp2.c-js.go tbody tr:nth-child(7) td.c-p,.cmp2.c-js.go tbody tr:nth-child(7) .ic.ok{transition-delay:1.65s}
@media (max-width:720px){
  .cmp-t tr{gap:0;margin-bottom:10px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff}
  .cmp-t thead tr{border:0;background:transparent;margin-bottom:6px}
  .cmp-t thead th{padding:6px}.cmp-t thead .c-p{border-radius:14px;padding:8px}
  .pta-h,.oth-h{font-size:11px;padding:6px 10px}
  .cmp-t tbody th{border-top:0;padding:12px 12px 8px;font-size:11px}
  .cmp-t .rk{width:28px;height:28px;margin-right:8px}.cmp-t .rk svg{width:15px;height:15px}
  .cmp-t td{padding:10px 12px 12px;font-size:13px;border-top:0}
  .cmp-t td.c-p,.cmp-t tbody tr:last-child td.c-p{border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.cmp2.c-js .cmp-t td.c-p{color:#fff}.cmp2.c-js .cmp-t td.c-p .ic.ok{transform:none}}
@media (min-width:721px){.cmp-t tbody th{white-space:nowrap;width:230px}}
/* 31 Oct 2026 (owner, 14:43): comparison made seamless: each answer hangs beside its mark (no text wrapping under the icon), the muted column fades towards PTA's column, and a teal arrow on the boundary carries every row across into "The PTA way" */
.cmp-t td{position:relative}
.cmp-t td.c-o,.cmp-t td.c-p{padding-left:52px}
.cmp-t td .ic{position:absolute;left:18px;top:50%;margin:-12px 0 0 !important}
.cmp-t td.c-o{background:linear-gradient(90deg,rgba(255,255,255,0) 55%,rgba(28,60,119,.07));padding-right:30px}
.cmp-t thead .c-o{background:linear-gradient(90deg,rgba(255,255,255,0) 55%,rgba(28,60,119,.07))}
.cmp-t td.c-o::after{content:"";position:absolute;right:-13px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;z-index:2;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230FB4AA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 3px rgba(34,211,197,.25),0 6px 14px -6px rgba(15,37,82,.5)}
.cmp-t td.c-p{padding-left:58px}
.cmp-t td.c-p .ic{left:24px}
.cmp2.c-js .cmp-t td.c-o::after{opacity:0;transform:translateX(-8px)}
.cmp2.c-js.go .cmp-t td.c-o::after{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.cmp2.c-js.go tbody tr:nth-child(1) td.c-o::after{transition-delay:.05s}.cmp2.c-js.go tbody tr:nth-child(2) td.c-o::after{transition-delay:.3s}.cmp2.c-js.go tbody tr:nth-child(3) td.c-o::after{transition-delay:.55s}.cmp2.c-js.go tbody tr:nth-child(4) td.c-o::after{transition-delay:.8s}.cmp2.c-js.go tbody tr:nth-child(5) td.c-o::after{transition-delay:1.05s}.cmp2.c-js.go tbody tr:nth-child(6) td.c-o::after{transition-delay:1.3s}.cmp2.c-js.go tbody tr:nth-child(7) td.c-o::after{transition-delay:1.55s}
@media (max-width:720px){
  .cmp-t td.c-o,.cmp-t td.c-p{padding:12px 12px 14px 40px}
  .cmp-t td .ic{left:10px;top:14px;margin:0 !important}
  .cmp-t td.c-p .ic{left:12px}
  .cmp-t td.c-o{padding-right:20px}
  .cmp-t td.c-o::after{right:-11px;width:22px;height:22px;margin-top:-11px;background-size:12px}
}
@media (prefers-reduced-motion:reduce){.cmp2.c-js .cmp-t td.c-o::after{opacity:1;transform:none}}
@media (max-width:720px){.cmp-t td.c-p{padding-left:52px}.cmp-t td.c-p .ic{left:22px}}
/* 31 Oct 2026 (owner, 14:46): "The PTA way" column in light teal instead of heavy navy, so the eye moves across without a jolt */
.cmp-t thead .c-p{background:linear-gradient(180deg,#E9FBF8,#DDF7F3);box-shadow:inset 1.5px 0 0 #A6EBE5,inset -1.5px 0 0 #A6EBE5,inset 0 1.5px 0 #A6EBE5}
.cmp-t td.c-p{background:linear-gradient(180deg,#DDF7F3,#D6F6F0);color:var(--ink);border-top:1px solid rgba(15,180,170,.18);box-shadow:inset 1.5px 0 0 #A6EBE5,inset -1.5px 0 0 #A6EBE5}
.cmp-t tbody tr:last-child td.c-p{box-shadow:inset 1.5px 0 0 #A6EBE5,inset -1.5px 0 0 #A6EBE5,inset 0 -1.5px 0 #A6EBE5,0 28px 46px -32px rgba(15,180,170,.55)}
.cmp-t .ic.ok{background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:#fff;box-shadow:0 0 0 4px rgba(34,211,197,.2)}
.cmp-t td.c-o{background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgba(34,211,197,.07))}
.cmp-t thead .c-o{background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgba(34,211,197,.07))}
.cmp2.c-js .cmp-t td.c-p{color:rgba(11,27,69,0)}
.cmp2.c-js.go .cmp-t td.c-p{color:var(--ink)}
@media (hover:hover){.cmp-t tbody tr:hover td.c-p{background:linear-gradient(180deg,#CFF4EE,#C6F1EA)}}
@media (prefers-reduced-motion:reduce){.cmp2.c-js .cmp-t td.c-p{color:var(--ink)}}

/* 31 Oct 2026 (owner, 15:15, option A): comparison as two cards with a VS badge: a muted card for other platforms and a raised light-teal PTA card with a glowing teal edge; each PTA row names its topic in colour; rows arrive one by one on view */
.cmpv{display:grid;grid-template-columns:1fr 56px 1.15fr;align-items:center;max-width:1040px;margin:0 auto}
.cmpv ul{list-style:none;margin:0;padding:0}
.cmpv li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(15,37,82,.07)}
.cmpv li:first-child{border-top:0}
.cmpv small{display:block;margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cv-h{margin:0 0 8px;font-size:15px;font-weight:800}
.cv-o{padding:22px 24px;border-radius:24px;background:#F5F7FB;border:1px solid #E6ECF4;color:#8A99B8;font-size:14.5px}
.cv-o .cv-h{color:#8A99B8}.cv-o small{color:#A7B2C8}
.cv-p{position:relative;padding:26px 28px;border-radius:26px;background:linear-gradient(160deg,#FFFFFF 0%,#E3F8F5 100%);box-shadow:0 0 0 2px #22D3C5,0 36px 70px -34px rgba(15,180,170,.85);color:var(--ink);font-size:15px;font-weight:700;transform:scale(1.03)}
.cv-p .cv-h{display:inline-flex;align-items:center;gap:9px;padding:7px 18px 7px 7px;border-radius:999px;background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:var(--ink);box-shadow:0 10px 22px -10px rgba(15,180,170,.9)}
.cv-p .cv-h b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#0FB4AA;font-size:13px}
.cv-vs{justify-self:center;z-index:2;display:grid;place-items:center;width:54px;height:54px;margin:0 -12px;border-radius:50%;font-size:14px;font-weight:900;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#22D3C5,#0FB4AA 45%,#1C3C77);box-shadow:0 0 0 5px #fff,0 12px 24px -10px rgba(15,37,82,.7)}
.cmpv i.x,.cmpv i.k{flex:0 0 24px;height:24px;margin-top:2px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:900}
.cmpv i.x{background:#FCECEF;color:#E0566C}
.cmpv i.k{background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:#fff;box-shadow:0 0 0 4px rgba(34,211,197,.16)}
/* motion */
.cmpv.c-js .cv-p li{opacity:0;transform:translateX(16px)}
.cmpv.c-js .cv-vs{transform:scale(.4) rotate(-20deg);opacity:0}
.cmpv.c-js.go .cv-vs{transform:none;opacity:1;transition:transform .7s cubic-bezier(.3,1.7,.5,1) .1s,opacity .3s .1s}
.cmpv.c-js.go .cv-p li{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,1,.3,1)}
.cmpv.c-js.go .cv-p li:nth-child(1){transition-delay:.35s}.cmpv.c-js.go .cv-p li:nth-child(2){transition-delay:.55s}.cmpv.c-js.go .cv-p li:nth-child(3){transition-delay:.75s}.cmpv.c-js.go .cv-p li:nth-child(4){transition-delay:.95s}.cmpv.c-js.go .cv-p li:nth-child(5){transition-delay:1.15s}.cmpv.c-js.go .cv-p li:nth-child(6){transition-delay:1.35s}.cmpv.c-js.go .cv-p li:nth-child(7){transition-delay:1.55s}
@media (max-width:860px){
  .cmpv{grid-template-columns:1fr}
  .cv-vs{margin:-14px auto;}
  .cv-p{transform:none;padding:22px 18px}.cv-o{padding:18px}
}
@media (prefers-reduced-motion:reduce){.cmpv.c-js .cv-p li,.cmpv.c-js .cv-vs{opacity:1;transform:none}}
/* 31 Oct 2026 (owner, 15:36): other platforms card readable (darker text and labels, clearer card); VS badge smaller and quieter */
.cv-o{background:#F1F4F9;border-color:#DCE4EF;color:#4E5D78;font-size:15px}
.cv-o .cv-h{color:#3A4864;font-size:15.5px}
.cv-o small{color:#6E7D99}
.cv-o li{border-top-color:#E1E7F0}
.cmpv i.x{background:#FBE0E5;color:#D0405A}
.cv-vs{width:40px;height:40px;margin:0 -6px;font-size:11.5px;background:#fff;color:var(--teal-text);border:2px solid #A6EBE5;box-shadow:0 6px 14px -8px rgba(15,37,82,.45)}
@media (max-width:860px){.cv-vs{margin:-10px auto}}

/* 31 Oct 2026 (owner, 16:02): footer "Visit" now "Contact": address, email and phone, each with an icon */
.f-contact{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-contact li{display:flex;align-items:center;gap:10px;margin:0}
.f-contact .fi{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(34,211,197,.14)}
.f-contact .fi svg{width:15px;height:15px;fill:none;stroke:#22D3C5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-contact a{word-break:break-word}
.f-contact a{font-size:14px;word-break:normal;overflow-wrap:anywhere}
.f-contact li a[href^="mailto"]{white-space:nowrap;font-size:13.5px}
@media (max-width:360px){.f-contact li a[href^="mailto"]{white-space:normal}}

/* 1 Nov 2026 (owner, 12:27): comparison heading replaced by the "one place" promise */
.op-h{font-size:clamp(32px,4.2vw,54px)}
.op-h em{display:block;font-style:italic;font-weight:500;color:var(--teal-text)}
.op-lead{max-width:760px;margin-left:auto;margin-right:auto}
.op-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px auto 30px}
.op-chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 9px;border-radius:999px;background:#fff;border:1px solid #BDEDE7;box-shadow:0 8px 18px -14px rgba(15,37,82,.6);font-size:13.5px;font-weight:800;color:var(--deep)}
.op-chips i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#E6FAF7;font-style:normal;font-size:13px}
@media (max-width:720px){.op-chips{gap:8px}.op-chips span{font-size:12px;padding:6px 12px 6px 7px}}

/* 1 Nov 2026 (owner, 12:31): motion for "Put the pile away": the teal line sweeps under "in one place", the chips pop in one by one and float, and a pile of notes, PDFs, guidebooks and past papers flies into one PTA portal card, which lights up "All in one place"; replays each time it comes into view */
.op-h em{position:relative}
.op-h em::after{content:"";position:absolute;left:8%;right:8%;bottom:-2px;height:4px;border-radius:4px;background:linear-gradient(90deg,#22D3C5,#0FB4AA);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.3,.9,.3,1) .3s}
.op-h.go em::after{transform:scaleX(1)}
[data-op].o-js .op-chips span{opacity:0;transform:translateY(12px) scale(.9)}
[data-op].o-js.go .op-chips span{opacity:1;transform:none;transition:opacity .4s,transform .6s cubic-bezier(.3,1.6,.5,1)}
[data-op].o-js.go .op-chips span:nth-child(2){transition-delay:.15s}[data-op].o-js.go .op-chips span:nth-child(3){transition-delay:.3s}[data-op].o-js.go .op-chips span:nth-child(4){transition-delay:.45s}
@keyframes op-float{50%{transform:translateY(-4px)}}
[data-op].go .op-chips i{animation:op-float 3s ease-in-out 1.2s infinite}
[data-op].go .op-chips span:nth-child(2) i{animation-delay:1.6s}[data-op].go .op-chips span:nth-child(3) i{animation-delay:2s}[data-op].go .op-chips span:nth-child(4) i{animation-delay:2.4s}
.op-fly{display:grid;grid-template-columns:240px 1fr 240px;align-items:center;max-width:680px;margin:-6px auto 34px}
.of-pile{position:relative;height:120px}
.of-pile span{position:absolute;padding:8px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 20px -14px rgba(15,37,82,.7);font-size:13px;font-weight:800;color:var(--soft);white-space:nowrap}
.of-pile .p1{left:6px;top:4px;transform:rotate(-7deg)}.of-pile .p2{left:96px;top:18px;transform:rotate(6deg)}.of-pile .p3{left:18px;top:62px;transform:rotate(4deg)}.of-pile .p4{left:112px;top:74px;transform:rotate(-5deg)}
.of-arrow{height:4px;margin:0 14px;border-radius:4px;background:repeating-linear-gradient(90deg,#A6EBE5 0 8px,transparent 8px 14px);position:relative}
.of-arrow i{position:absolute;right:-4px;top:50%;width:12px;height:12px;margin-top:-6px;border-top:3px solid #0FB4AA;border-right:3px solid #0FB4AA;transform:rotate(45deg)}
.of-portal{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 14px;border-radius:20px;text-align:center;background:linear-gradient(160deg,#fff,#E3F8F5);box-shadow:0 0 0 2px #A6EBE5,0 20px 40px -26px rgba(15,180,170,.9);transition:box-shadow .6s}
.of-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1C3C77,#0F2552);color:#fff;font-size:12px;font-weight:900;letter-spacing:.06em}
.of-portal b{font-size:15px;color:var(--deep)}.of-portal small{font-size:11.5px;color:var(--soft)}
.of-portal em{margin-top:5px;padding:4px 11px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22D3C5,#0FB4AA)}
/* fly */
[data-op].o-js .of-portal em{opacity:0;transform:scale(.6)}
[data-op].o-js.go .of-pile span{opacity:0;transform:translate(440px,10px) scale(.3) rotate(0);transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .4s ease .8s}
[data-op].o-js.go .of-pile .p1{transition-delay:.7s,1.5s}[data-op].o-js.go .of-pile .p2{transition-delay:1s,1.8s}[data-op].o-js.go .of-pile .p3{transition-delay:1.3s,2.1s}[data-op].o-js.go .of-pile .p4{transition-delay:1.6s,2.4s}
[data-op].o-js.go .of-portal{box-shadow:0 0 0 2px #22D3C5,0 0 0 8px rgba(34,211,197,.18),0 24px 44px -24px rgba(15,180,170,1);transition-delay:2.6s}
[data-op].o-js.go .of-portal em{opacity:1;transform:none;transition:opacity .4s 2.8s,transform .6s cubic-bezier(.3,1.7,.5,1) 2.8s}
@media (max-width:720px){
  .op-fly{grid-template-columns:1fr;justify-items:center;gap:6px;max-width:300px}
  .of-pile{width:240px;height:116px}
  .of-arrow{width:4px;height:40px;margin:0;background:repeating-linear-gradient(180deg,#A6EBE5 0 8px,transparent 8px 14px)}
  .of-arrow i{right:auto;left:50%;top:auto;bottom:-4px;margin:0 0 0 -6px;transform:rotate(135deg)}
  .of-portal{width:240px;box-sizing:border-box}
  [data-op].o-js.go .of-pile span{transform:translate(20px,190px) scale(.3)}
}
@media (prefers-reduced-motion:reduce){[data-op].o-js .op-chips span,[data-op].o-js .of-portal em{opacity:1;transform:none}.op-h em::after{transform:none}}
.of-pile span{font-size:12.5px;padding:7px 11px}
.of-pile .p1{left:4px;top:2px}.of-pile .p2{left:124px;top:12px}.of-pile .p3{left:0;top:64px}.of-pile .p4{left:126px;top:72px}
.of-pile::after{content:"No more piles of paper";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#A7B2C8;text-decoration:line-through;text-decoration-color:#E0566C;text-decoration-thickness:2px;opacity:0}
[data-op].o-js.go .of-pile::after{opacity:1;transition:opacity .6s 2.6s}
@media (max-width:720px){.of-pile .p2{left:118px}.of-pile .p4{left:116px}}
.of-pile::after{content:"Piles of paper";font-size:14px}

/* 1 Nov 2026 (owner, 12:35): leaderboard motion: your ranks count down as you climb (1,190 to 214th; 64 to 6th) and your figure counts up, a "▲ places" chip pops in, medal colours on the top three, rows slide in one by one and "You" rises from below with a glow; replays on view and on each tab */
.lb .sd>div{position:relative}
.lb .sd .up{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;color:#0B1B45;background:#22D3C5}
.lbt tbody tr:nth-child(-n+3) td:first-child{position:relative}
.lbt tbody tr:nth-child(-n+3) td:first-child::before{content:"";position:absolute;left:4px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;z-index:-1}
.lbt[data-board="pta"] tbody tr:nth-child(1) td:first-child::before,.lbt[data-board="district"] tbody tr:nth-child(1) td:first-child::before{background:linear-gradient(135deg,#F7D57A,#E8A21F)}
.lbt[data-board="pta"] tbody tr:nth-child(2) td:first-child::before,.lbt[data-board="district"] tbody tr:nth-child(2) td:first-child::before{background:linear-gradient(135deg,#E6EAF2,#AEB8CA)}
.lbt[data-board="pta"] tbody tr:nth-child(3) td:first-child::before{background:linear-gradient(135deg,#F2C29B,#C98450)}
.lbt[data-board="district"] tbody tr:nth-child(3) td:first-child::before{display:none}
.lbt tbody tr:nth-child(-n+3) td:first-child{padding-left:12px;font-weight:800;isolation:isolate}
.lbt tr.you td{position:relative}
@keyframes lb-glow{0%,100%{box-shadow:inset 0 0 0 0 rgba(34,211,197,0)}50%{box-shadow:inset 0 0 0 2px rgba(15,180,170,.55)}}
[data-lbm].l-js .sd .up{opacity:0;transform:translateY(6px) scale(.8)}
[data-lbm].l-js .lbt tbody tr{opacity:0;transform:translateX(-14px)}
[data-lbm].l-js .lbt tbody tr.you{transform:translateY(26px)}
[data-lbm].l-js.go .sd .up{opacity:1;transform:none;transition:opacity .4s 1.7s,transform .6s cubic-bezier(.3,1.7,.5,1) 1.7s}
[data-lbm].l-js.go .lbt tbody tr{opacity:1;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.2,1,.3,1)}
[data-lbm].l-js.go .lbt tbody tr:nth-child(1){transition-delay:.2s}[data-lbm].l-js.go .lbt tbody tr:nth-child(2){transition-delay:.35s}[data-lbm].l-js.go .lbt tbody tr:nth-child(3){transition-delay:.5s}[data-lbm].l-js.go .lbt tbody tr:nth-child(4){transition-delay:.65s}
[data-lbm].l-js.go .lbt tbody tr.you{transition:opacity .5s .9s,transform .9s cubic-bezier(.2,1.3,.4,1) .9s;animation:lb-glow 1.6s ease-in-out 1.8s 2}
@media (prefers-reduced-motion:reduce){[data-lbm].l-js .sd .up,[data-lbm].l-js .lbt tbody tr{opacity:1;transform:none}}
.lb .sd .up{display:table;white-space:nowrap}
@media (max-width:720px){.lb .sd .up{font-size:9.5px;padding:2px 6px;letter-spacing:0}}

/* 1 Nov 2026 (owner, 12:40): pile scene restyled: colourful document cards fly along a flowing teal path into a mini PTA portal screen, whose rows light up one by one (notes, video lectures, practice, weekly tests) and end "All in one place · 24/7" */
.op2{display:grid;grid-template-columns:300px 150px 330px;justify-content:center;align-items:center;gap:0;max-width:820px;margin:4px auto 36px;padding:26px 28px;border-radius:28px;background:radial-gradient(120% 140% at 0% 0%,#F2F8FE,#fff 60%);border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(15,37,82,.6)}
.op2 .of-pile{position:relative;height:200px}
.op2 .of-pile::after{display:none}
.dc{position:absolute;width:128px;padding:10px 12px 12px;border-radius:14px;background:#fff;box-shadow:0 14px 26px -16px rgba(15,37,82,.6);border:1px solid #E3EAF4;overflow:hidden}
.dc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.dc i{font-style:normal;font-size:20px}
.dc b{display:block;margin:4px 0 8px;font-size:13px;color:var(--deep)}
.dc span{display:block;height:5px;margin-top:5px;border-radius:5px;background:#E8EEF6}.dc span+span{width:65%}
.dc.d1{left:8px;top:6px;transform:rotate(-9deg);background:#FFF9E6}.dc.d1::before{background:#F5C84C}
.dc.d2{left:150px;top:0;transform:rotate(7deg)}.dc.d2::before{background:#E0566C}
.dc.d3{left:22px;top:100px;transform:rotate(5deg)}.dc.d3::before{background:#2F6FD6}
.dc.d4{left:160px;top:96px;transform:rotate(-6deg)}.dc.d4::before{background:#7357D8}
.of-gone{position:absolute;inset:0;margin:0;display:grid;place-items:center;font-size:15px;font-weight:800;color:#A7B2C8;text-decoration:line-through;text-decoration-color:#E0566C;text-decoration-thickness:2.5px;opacity:0}
.of-flow svg{display:block;width:100%;height:70px;overflow:visible}
.of-flow path{fill:none;stroke-linecap:round}
.of-flow .fb{stroke:#D8F3EF;stroke-width:10}
.of-flow .ff{stroke:#22D3C5;stroke-width:3;stroke-dasharray:4 12;animation:of-run 1s linear infinite}
@keyframes of-run{to{stroke-dashoffset:-16}}
.of-screen{border-radius:22px;background:#fff;box-shadow:0 0 0 2px #A6EBE5,0 26px 50px -30px rgba(15,180,170,.9);overflow:hidden;transition:box-shadow .6s}
.sc-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#1C3C77,#0F2552);color:#fff}
.sc-top .of-logo{width:32px;height:32px;border-radius:10px;font-size:10.5px;background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:#0B1B45}
.sc-top b{font-size:14px;flex:1}
.sc-top .dot{width:8px;height:8px;border-radius:50%;background:#22D3C5;box-shadow:0 0 0 4px rgba(34,211,197,.25)}
.of-screen ul{list-style:none;margin:0;padding:10px 12px 4px}
.of-screen li{display:flex;align-items:center;gap:10px;margin-bottom:7px;padding:9px 11px;border-radius:12px;background:#F2F8FE;font-size:13px;font-weight:700;color:var(--deep);transition:background .5s,color .5s}
.of-screen li i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;font-style:normal;font-size:13px;color:#0FB4AA}
.of-screen li s{margin-left:auto;text-decoration:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:#fff;font-size:10px;font-weight:900}
.sc-done{margin:2px 12px 12px;padding:9px;border-radius:12px;text-align:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22D3C5,#0FB4AA)}
/* motion */
[data-op].o-js .op2 .of-screen li{background:#F4F6F9;color:#B5BFD0}
[data-op].o-js .op2 .of-screen li s{transform:scale(0)}
[data-op].o-js .op2 .sc-done{opacity:0;transform:translateY(8px)}
[data-op].o-js.go .op2 .dc{opacity:0;transform:translate(470px,40px) scale(.25) rotate(0);transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .35s ease .85s}
[data-op].o-js.go .op2 .d1{transition-delay:.6s,1.45s}[data-op].o-js.go .op2 .d2{transition-delay:1s,1.85s}[data-op].o-js.go .op2 .d3{transition-delay:1.4s,2.25s}[data-op].o-js.go .op2 .d4{transition-delay:1.8s,2.65s}
[data-op].o-js.go .op2 .of-screen li{background:#E6FAF7;color:var(--deep)}
[data-op].o-js.go .op2 .of-screen li s{transform:scale(1);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
[data-op].o-js.go .op2 .r1,[data-op].o-js.go .op2 .r1 s{transition-delay:1.6s}[data-op].o-js.go .op2 .r2,[data-op].o-js.go .op2 .r2 s{transition-delay:2s}[data-op].o-js.go .op2 .r3,[data-op].o-js.go .op2 .r3 s{transition-delay:2.4s}[data-op].o-js.go .op2 .r4,[data-op].o-js.go .op2 .r4 s{transition-delay:2.8s}
[data-op].o-js.go .op2 .sc-done{opacity:1;transform:none;transition:opacity .5s 3.3s,transform .6s cubic-bezier(.3,1.5,.5,1) 3.3s}
[data-op].o-js.go .op2 .of-screen{box-shadow:0 0 0 2px #22D3C5,0 0 0 8px rgba(34,211,197,.16),0 26px 50px -26px rgba(15,180,170,1);transition-delay:3.2s}
[data-op].o-js.go .op2 .of-gone{opacity:1;transition:opacity .6s 3s}
@media (max-width:860px){
  .op2{grid-template-columns:1fr;justify-items:center;padding:20px 14px;max-width:360px}
  .op2 .of-pile{width:300px;height:190px}
  .op2 .dc{width:118px}.op2 .dc.d2{left:150px}.op2 .dc.d4{left:156px}
  .of-flow{width:70px;height:80px}.of-flow svg{width:80px;height:70px;transform:rotate(90deg);margin:5px -5px}
  .of-screen{width:100%;max-width:320px}
  [data-op].o-js.go .op2 .dc{transform:translate(40px,330px) scale(.25)}
}
@media (prefers-reduced-motion:reduce){.of-flow .ff{animation:none}[data-op].o-js .op2 .of-screen li{background:#E6FAF7;color:var(--deep)}[data-op].o-js .op2 .of-screen li s,[data-op].o-js .op2 .sc-done{opacity:1;transform:none}}
[data-op].o-js.go .op2 .of-screen li.r1 s{transition-delay:1.6s}[data-op].o-js.go .op2 .of-screen li.r2 s{transition-delay:2s}[data-op].o-js.go .op2 .of-screen li.r3 s{transition-delay:2.4s}[data-op].o-js.go .op2 .of-screen li.r4 s{transition-delay:2.8s}
.op2 .dc.d1{left:0;top:14px}.op2 .dc.d2{left:158px;top:0}.op2 .dc.d3{left:14px;top:108px}.op2 .dc.d4{left:162px;top:100px}
@media (max-width:860px){.op2 .dc.d2{left:162px}.op2 .dc.d4{left:166px}.op2 .of-pile{width:300px}}

/* 1 Nov 2026 (owner, 12:51): the burden: above the pile "Lots of everything to keep" with a tired face and a red "Heavy" load bar, the pile wobbles under its weight; as the cards fly into PTA the bar drains to green "Light", the face relaxes and the line becomes "Nothing left to carry"; above the screen "PTA takes care of it" */
.op2{align-items:end}
.of-cap{display:flex;gap:12px;align-items:center;margin:0 0 12px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid #F3C1CA;box-shadow:0 10px 20px -16px rgba(224,86,108,.7);transition:border-color .6s,box-shadow .6s}
.of-cap .mood{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#FCECEF;transition:background .6s}
.of-cap .mood i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:22px;transition:opacity .5s,transform .5s}
.of-cap .m2{opacity:0;transform:scale(.5)}
.of-cap b{display:block;position:relative;font-size:14px;color:var(--deep);height:19px}
.of-cap b span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .5s}
.of-cap .t2{opacity:0}
.of-cap small{display:block;font-size:11.5px;color:var(--soft)}
.load{position:relative;width:170px;height:16px;margin-top:6px;border-radius:999px;background:#F2F4F8;overflow:hidden}
.load span{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:linear-gradient(90deg,#F08A9B,#E0566C);transition:width 2.4s cubic-bezier(.4,0,.2,1),background .6s}
.load em{position:absolute;right:8px;top:0;line-height:16px;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:opacity .4s}
.load .l2{left:8px;right:auto;color:#0B6F68;opacity:0}
@keyframes of-strain{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(2px) rotate(-.6deg)}75%{transform:translateY(1px) rotate(.6deg)}}
.op2 .of-pile{animation:of-strain 1.6s ease-in-out infinite;transform-origin:bottom center}
.of-cap2{margin:0 0 12px;text-align:center;font-size:14px;font-weight:800;color:var(--teal-text)}
[data-op].o-js.go .op2 .of-pile{animation:none}
[data-op].o-js.go .load span{width:14%;background:linear-gradient(90deg,#5FDDD3,#22D3C5);transition-delay:.6s,2.6s}
[data-op].o-js.go .load .l1{opacity:0;transition-delay:.9s}
[data-op].o-js.go .load .l2{opacity:1;transition-delay:2.8s}
[data-op].o-js.go .of-cap .m1{opacity:0;transform:scale(.5);transition-delay:2.8s}
[data-op].o-js.go .of-cap .m2{opacity:1;transform:none;transition-delay:2.9s}
[data-op].o-js.go .of-cap .mood{background:#E6FAF7;transition-delay:2.8s}
[data-op].o-js.go .of-cap .t1{opacity:0;transition-delay:2.8s}
[data-op].o-js.go .of-cap .t2{opacity:1;transition-delay:2.9s}
[data-op].o-js.go .of-cap{border-color:#A6EBE5;box-shadow:0 10px 20px -16px rgba(15,180,170,.8);transition-delay:2.8s}
@media (max-width:860px){.op2{align-items:center}.of-left,.of-right{width:100%;max-width:320px}.op2 .of-pile{margin:0 auto}}
@media (prefers-reduced-motion:reduce){.op2 .of-pile{animation:none}}
.load span{background:#E0566C;transition:width 2.2s cubic-bezier(.4,0,.2,1),background-color .6s}
[data-op].o-js.go .load span{background:#22D3C5;transition-delay:1s,2.7s}
.load .l2{left:auto;right:8px}
.of-cap small.sub{position:relative;height:16px}
.of-cap small.sub span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .5s}
.of-cap small.sub .t2{opacity:0;color:var(--teal-text);font-weight:700}
[data-op].o-js.go .of-cap small.sub .t1{opacity:0;transition-delay:2.8s}
[data-op].o-js.go .of-cap small.sub .t2{opacity:1;transition-delay:2.9s}

/* 1 Nov 2026 (owner, 12:56): emoji faces replaced by icons: a heavy bag (red, sagging) becomes a feather (teal) */
.of-cap .mood{width:40px;height:40px;flex-basis:40px;border-radius:12px;background:linear-gradient(135deg,#F08A9B,#E0566C);box-shadow:0 8px 16px -8px rgba(224,86,108,.8)}
.of-cap .mood svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes of-sag{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.of-cap .m1 svg{animation:of-sag 1.2s ease-in-out infinite}
[data-op].o-js.go .of-cap .mood{background:linear-gradient(135deg,#22D3C5,#0FB4AA);box-shadow:0 8px 16px -8px rgba(15,180,170,.8)}
@keyframes of-float{50%{transform:translateY(-3px) rotate(-6deg)}}
[data-op].o-js.go .of-cap .m2 svg{animation:of-float 2.4s ease-in-out 3.2s infinite}
@media (prefers-reduced-motion:reduce){.of-cap .m1 svg,.of-cap .m2 svg{animation:none}}
.of-cap .mood{background:#E0566C;transition:background-color .6s,box-shadow .6s}
[data-op].o-js.go .of-cap .mood{background:#0FB4AA;transition-delay:2.8s}

/* 1 Nov 2026 (owner, 13:12): the wavy dashed path replaced by a clean connector (a teal line with an arrow badge; a light dot runs along it while the cards move); "Piles of paper" struck through replaced by a calm "Your desk is clear" with a tick; on phones the empty pile area folds away */
.of-flow{display:none}
.of-link{position:relative;display:flex;align-items:center;justify-content:center;height:60px;margin:0 10px}
.of-link .ln{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,#D8F3EF,#22D3C5);overflow:hidden}
.of-link .pulse{position:absolute;top:-3px;left:-20px;width:20px;height:9px;border-radius:9px;background:radial-gradient(circle,#fff 0,#22D3C5 60%,transparent 70%);opacity:0}
.of-link .bd{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #A6EBE5,0 8px 18px -8px rgba(15,37,82,.5)}
.of-link .bd svg{width:18px;height:18px;fill:none;stroke:#0FB4AA;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes of-pulse{0%{left:-20px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
[data-op].o-js.go .of-link .pulse{animation:of-pulse .9s ease-in-out .7s 5}
[data-op].o-js.go .of-link .bd{animation:of-bd .5s ease-in-out .7s 5}
@keyframes of-bd{50%{transform:scale(1.12)}}
.of-gone{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none !important;color:var(--teal-text) !important}
.of-gone .ck{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E6FAF7;box-shadow:0 0 0 6px rgba(34,211,197,.12)}
.of-gone .ck svg{width:22px;height:22px;fill:none;stroke:#0FB4AA;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.of-gone b{font-size:14px;font-weight:800;color:var(--teal-text)}
[data-op].o-js .of-gone{transform:scale(.9)}
[data-op].o-js.go .of-gone{transform:none;transition:opacity .6s 3s,transform .6s cubic-bezier(.3,1.5,.5,1) 3s}
@media (max-width:860px){
  .of-link{width:60px;height:56px;margin:0 auto}
  .of-link .ln{left:50%;right:auto;top:0;bottom:0;width:3px;height:auto;margin:0 0 0 -1.5px;background:linear-gradient(180deg,#D8F3EF,#22D3C5)}
  .of-link .pulse{left:-3px;top:-20px;width:9px;height:20px}
  @keyframes of-pulse-v{0%{top:-20px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
  [data-op].o-js.go .of-link .pulse{animation-name:of-pulse-v}
  .of-link .bd svg{transform:rotate(90deg)}
  [data-op].o-js .op2 .of-pile{transition:height .7s ease 2.8s}
  [data-op].o-js.go .op2 .of-pile{height:110px}
}
.of-gone .ck{position:static;padding:0;border:0;transform:none;font-size:0;white-space:normal}
@media (min-width:861px){.op2 .of-link{align-self:end;margin-bottom:80px}}
[data-op].o-js .op2 .of-pile .of-gone .ck,[data-op].o-js.go .op2 .of-pile .of-gone .ck{opacity:1;transform:none;transition:none;position:static}

/* 1 Nov 2026 (owner, 14:56, option A): phones: the subject cards signposted: "5 subjects · Swipe →" above, a soft fade and a round › button on the right edge, dots with "1 of 5" below, and a one-time nudge when the cards first appear */
.syl-hint,.syl-next,.syl-dots{display:none}
.syl-scroller{position:relative}
@media (max-width:720px){
  .syl-hint{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px;font-size:12px;font-weight:800;color:var(--soft)}
  .syl-hint b{color:var(--teal-text);display:inline-flex;gap:5px;align-items:center}
  .syl-hint i{font-style:normal;display:inline-block;animation:syl-sw 1.6s ease-in-out infinite}
  @keyframes syl-sw{50%{transform:translateX(4px)}}
  .syl-tabs{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-right:56px}
  .syl-tabs::-webkit-scrollbar{display:none}
  .syl-tab{scroll-snap-align:start}
  .syl-scroller::after{content:"";position:absolute;right:0;top:0;bottom:6px;width:64px;pointer-events:none;background:linear-gradient(90deg,rgba(234,245,253,0),#EAF5FD 80%);transition:opacity .3s}
  .syl-scroller.end::after{opacity:0}
  .syl-next{display:grid;place-items:center;position:absolute;right:4px;top:50%;width:40px;height:40px;margin-top:-23px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #A6EBE5,0 8px 18px -8px rgba(15,37,82,.6);cursor:pointer;z-index:2;transition:transform .3s}
  .syl-next svg{width:20px;height:20px;fill:none;stroke:#0FB4AA;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
  .syl-scroller.end .syl-next svg{transform:rotate(180deg)}
  .syl-next:focus-visible{outline:3px solid #22D3C5;outline-offset:2px}
  .syl-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin:10px 0 4px}
  .syl-dots i{width:7px;height:7px;border-radius:50%;background:#C8D6E8;transition:width .3s,background .3s}
  .syl-dots i.on{width:20px;border-radius:7px;background:var(--navy)}
  .syl-dots span{margin-left:8px;font-size:11.5px;font-weight:800;color:var(--teal-text)}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.syl-hint i{animation:none}}
.syl-scroller,.syl-hint,.syl-dots{min-width:0;max-width:100%}

/* 1 Nov 2026 (owner, 15:23): founder section restyled: quote card, three counting stat tiles and a short line on the left; on the right a navy card with the career in chapters (Medicine, Public service, International), the timeline line drawing down and each dot lighting in turn; on phones the first entries show with "Show full career" */
.fd2{display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:center}
.fd-q{position:relative;margin:22px 0 18px;padding:24px 24px 20px 28px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 40px -32px rgba(15,37,82,.8)}
.fd-q::before{content:"\201C";position:absolute;left:18px;top:-30px;font-family:var(--serif);font-size:96px;line-height:1;color:#22D3C5}
.fd-q blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.3;color:var(--deep)}
.fd-q figcaption{margin-top:12px;font-size:13px;font-weight:800;color:var(--teal-text)}
.fd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fd-stats div{padding:16px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;box-shadow:0 14px 26px -24px rgba(15,37,82,.8)}
.fd-stats b{display:block;font-size:30px;font-weight:800;line-height:1.1;color:var(--deep);font-variant-numeric:tabular-nums}
.fd-stats .s1 b{color:#0FB4AA}.fd-stats .s3 b{color:#C98612}
.fd-stats small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--soft)}
.fd-txt{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--soft)}.fd-txt b{color:var(--deep)}
.fd-card{padding:28px 30px;border-radius:28px;color:#fff;background:radial-gradient(120% 120% at 0 0,#28559A,#1C3C77 50%,#0F2552);box-shadow:0 40px 70px -40px rgba(15,37,82,.9)}
.fd-card .label{color:var(--teal)}
.fd-card h3{margin:4px 0 16px;font-family:var(--serif);font-weight:600;font-size:28px;color:#fff}
.fd-ch{display:inline-flex;align-items:center;gap:8px;margin:6px 0 10px;padding:4px 14px 4px 4px;border-radius:999px;background:rgba(255,255,255,.1);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fd-ch i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#22D3C5;font-style:normal;font-size:12px}
.fd-ch.c2 i{background:#F5C84C}.fd-ch.c3 i{background:#A9CFF3}
.fd-tl{list-style:none;margin:0 0 6px;padding:0}
.fd-tl li{position:relative;padding:0 0 14px 32px}
.fd-tl li::before{content:"";position:absolute;left:9px;top:8px;bottom:-6px;width:2px;background:linear-gradient(#22D3C5,rgba(34,211,197,.18));transform-origin:top}
.fd-tl li:last-child::before{display:none}
.fd-tl li::after{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;background:#22D3C5;box-shadow:0 0 0 5px rgba(34,211,197,.18)}
.fd-tl small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--gold)}
.fd-tl b{display:block;font-size:15px;line-height:1.4}
.fd-tl em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--on-dark-soft)}
.fd-more{display:none}
/* motion */
[data-fd].f2-js .fd-tl li{opacity:0;transform:translateX(-10px)}
[data-fd].f2-js .fd-tl li::before{transform:scaleY(0)}
[data-fd].f2-js .fd-tl li::after{transform:scale(0)}
[data-fd].f2-js .fd-ch{opacity:0}
[data-fd].f2-js.go .fd-ch{opacity:1;transition:opacity .4s}
[data-fd].f2-js.go .fd-tl li{opacity:1;transform:none;transition:opacity .45s,transform .5s cubic-bezier(.2,1,.3,1)}
[data-fd].f2-js.go .fd-tl li::after{transform:scale(1);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
[data-fd].f2-js.go .fd-tl li::before{transform:scaleY(1);transition:transform .45s ease-out}
@media (max-width:1060px){.fd2{grid-template-columns:1fr;gap:32px}}
@media (max-width:720px){
  .fd-q{padding:20px 18px 16px 20px}.fd-stats{gap:8px}.fd-stats b{font-size:22px}.fd-stats small{font-size:10.5px}
  .fd-card{padding:22px 18px}.fd-card h3{font-size:22px}
  .fd-card:not(.open) .fx{display:none}
  .fd-more{display:block;width:100%;margin-top:8px;padding:10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
  .fd-card.open .fd-more span{display:inline-block;transform:rotate(180deg)}
}
@media (prefers-reduced-motion:reduce){[data-fd].f2-js .fd-tl li,[data-fd].f2-js .fd-ch{opacity:1;transform:none}[data-fd].f2-js .fd-tl li::before,[data-fd].f2-js .fd-tl li::after{transform:none}}
[data-fd].f2-js.go .fd-tl li::before,[data-fd].f2-js.go .fd-tl li::after{transition-delay:var(--d,0s)}
@media (max-width:720px){.fd-card:not(.open) .fd-tl li:has(+ .fx)::before{display:none}}
/* 1 Nov 2026 (owner, 16:24): founder v2: left and right columns the same height (quote at the top, stats and line at the bottom, both edges lined up with the card); career card cleaner: year pills in their own column, chapter headings with a rule, tighter rows, soft teal glow */
@media (min-width:1061px){
  .fd2{align-items:stretch}
  .fd-left{display:flex;flex-direction:column;padding:6px 0}
  .fd-left .fd-q{margin-top:26px}
  .fd-left .fd-stats{margin-top:auto}
  .fd-left .fd-txt{margin-bottom:0}
}
.fd-card{position:relative;overflow:hidden}
.fd-card::before{content:"";position:absolute;right:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,197,.22),transparent 65%);pointer-events:none}
.fd-ch{display:flex;width:100%;box-sizing:border-box;margin:14px 0 8px;padding:0;background:none;border-radius:0;color:#fff}
.fd-ch::after{content:"";flex:1;height:1px;margin-left:10px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.fd-ch:first-of-type{margin-top:4px}
.fd-tl li{display:grid;grid-template-columns:86px 1fr;column-gap:14px;padding:9px 0 9px 0;border-top:1px solid rgba(255,255,255,.07)}
.fd-tl li:first-child{border-top:0}
.fd-tl li::before,.fd-tl li::after{display:none}
.fd-tl small{grid-row:1/3;align-self:start;justify-self:start;margin-top:1px;padding:4px 10px;border-radius:999px;background:rgba(245,200,76,.14);border:1px solid rgba(245,200,76,.4);color:var(--gold);font-size:11.5px;white-space:nowrap}
.fd-tl b{grid-column:2;font-size:14.5px}
.fd-tl em{grid-column:2}
.fd-card h3{margin-bottom:6px}
[data-fd].f2-js .fd-tl li{transform:translateY(8px)}
@media (max-width:720px){.fd-tl li{grid-template-columns:70px 1fr;column-gap:10px}.fd-tl small{font-size:10.5px;padding:3px 8px}.fd-tl b{font-size:13.5px}}
@media (min-width:1061px){
  .fd2{grid-template-columns:.92fr 1.18fr;gap:40px}
  .fd-left{justify-content:space-between}
  .fd-left .fd-stats{margin-top:0}
  .fd-left .fd-q{padding:30px 30px 26px 32px}
  .fd-left .fd-q blockquote{font-size:29px}
  .fd-left .fd-stats div{padding:22px 10px}
  .fd-left .fd-stats b{font-size:34px}
  .fd-left .fd-txt{font-size:15.5px}
  .fd-tl li{grid-template-columns:76px 1fr;padding:8px 0}
}
@media (min-width:1061px){.fd-left{justify-content:flex-start}.fd-left .fd-stats{margin:auto 0}.fd-left .fd-txt{margin-top:0}}

/* 1 Nov 2026 (owner, 16:28, option C): founder section as a bento: a navy quote tile and seven milestone tiles (big year or "1st"), popping in one by one on each view */
.fbn{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
.fb-q{grid-row:span 2;margin:0;display:flex;flex-direction:column;padding:28px 28px 24px;border-radius:24px;color:#fff;background:radial-gradient(120% 130% at 0 0,#28559A,#1C3C77 50%,#0F2552);box-shadow:0 30px 60px -36px rgba(15,37,82,.9);position:relative;overflow:hidden}
.fb-q::after{content:"\201D";position:absolute;right:18px;bottom:-40px;font-family:var(--serif);font-size:200px;line-height:1;color:rgba(34,211,197,.12)}
.fb-q .label{color:var(--teal)}
.fb-q blockquote{margin:14px 0 0;font-family:var(--serif);font-size:clamp(22px,2.3vw,28px);line-height:1.3}
.fb-q figcaption{margin-top:auto;padding-top:18px;font-size:13.5px;font-weight:800;color:var(--teal)}
.fb-q figcaption span{display:block;margin-top:3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);font-weight:700}
.fb-t{position:relative;padding:18px 18px 16px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 30px -26px rgba(15,37,82,.8);transition:transform .3s,box-shadow .3s}
@media (hover:hover){.fb-t:hover{transform:translateY(-3px);box-shadow:0 22px 36px -24px rgba(15,37,82,.8)}}
.fb-t b{display:block;font-size:32px;font-weight:800;line-height:1;color:#0FB4AA;letter-spacing:-.01em}
.fb-t p{margin:8px 0 0;font-size:14px;font-weight:700;line-height:1.4;color:var(--deep)}
.fb-t small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--soft)}
.fb-t.gold b{color:#C98612}.fb-t.gold{background:linear-gradient(160deg,#fff,#FFF7E3);border-color:#F3DFA6}
.fb-t.navy b{color:var(--navy)}
.fb-t::before{content:"";position:absolute;left:18px;top:0;width:34px;height:4px;border-radius:0 0 4px 4px;background:#22D3C5}
.fb-t.gold::before{background:#F5C84C}.fb-t.navy::before{background:var(--navy)}
.fb-txt{max-width:820px;margin:22px auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--soft)}.fb-txt b{color:var(--deep)}
[data-fb].b-js>*{opacity:0;transform:translateY(16px) scale(.97)}
[data-fb].b-js.go>*{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.4,1)}
@media (max-width:900px){.fbn{grid-template-columns:1fr 1fr}.fb-q{grid-column:1/-1;grid-row:auto}}
@media (max-width:720px){.fbn{gap:10px}.fb-q{padding:22px 20px 20px}.fb-t{padding:16px 14px 14px}.fb-t b{font-size:26px}.fb-t p{font-size:13px}.fb-t small{font-size:11px}.fb-t.navy{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){[data-fb].b-js>*{opacity:1;transform:none}}
.fb-q::after{bottom:-90px;right:10px}

/* 1 Nov 2026 (owner, 20:39, option B): founder section as a career ladder: quote, counting stats and a line on the left; on the right the career as steps that climb upward (1999 at the bottom, the FPSC 1st position glowing at the top), rising one by one on each view; IELTS and 20+ years as chips below */
.flad{display:grid;grid-template-columns:.95fr 1.15fr;gap:44px;align-items:center}
.fl-q{margin:12px 0 8px;font-family:var(--serif);font-size:clamp(26px,2.8vw,36px);line-height:1.22;color:var(--deep)}
.fl-by{margin:0;font-size:14px;font-weight:800;color:var(--teal-text)}
.fl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.fl-stats div{padding:16px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;box-shadow:0 14px 26px -24px rgba(15,37,82,.8)}
.fl-stats b{display:block;font-size:30px;font-weight:800;line-height:1.1;color:var(--deep);font-variant-numeric:tabular-nums}
.fl-stats .s1 b{color:#0FB4AA}.fl-stats .s3 b{color:#C98612}
.fl-stats small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--soft)}
.fl-txt{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}.fl-txt b{color:var(--deep)}
.fl-k{display:block;margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);text-align:right}
.fl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:10px}
.fl-steps li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 26px -22px rgba(15,37,82,.8)}
.fl-steps .ls1{margin-right:96px}.fl-steps .ls2{margin-left:24px;margin-right:72px}.fl-steps .ls3{margin-left:48px;margin-right:48px}.fl-steps .ls4{margin-left:72px;margin-right:24px}.fl-steps .ls5{margin-left:96px}
.fl-steps b{flex:0 0 62px;text-align:center;padding:5px 0;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--deep);background:#E6FAF7}
.fl-steps p{margin:0;font-size:14px;font-weight:700;line-height:1.35;color:var(--deep)}
.fl-steps small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--soft)}
.fl-steps li.top{background:linear-gradient(135deg,#22D3C5,#0FB4AA);border-color:transparent;box-shadow:0 0 0 5px rgba(34,211,197,.16),0 20px 34px -18px rgba(15,180,170,.9)}
.fl-steps li.top b{background:#fff}
.fl-steps li.top p{color:var(--ink)}
.fl-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px}
.fl-chips span{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--deep)}
[data-fl].l2-js .fl-steps li,[data-fl].l2-js .fl-chips span{opacity:0;transform:translateY(18px)}
[data-fl].l2-js.go .fl-steps li,[data-fl].l2-js.go .fl-chips span{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.4,1)}
.fl-steps .ls1{transition-delay:.15s}.fl-steps .ls2{transition-delay:.4s}.fl-steps .ls3{transition-delay:.65s}.fl-steps .ls4{transition-delay:.9s}.fl-steps .ls5{transition-delay:1.2s}
.fl-chips span:nth-child(1){transition-delay:1.5s}.fl-chips span:nth-child(2){transition-delay:1.65s}
@media (max-width:1060px){.flad{grid-template-columns:1fr;gap:30px}.fl-k{text-align:left}.fl-chips{justify-content:flex-start}}
@media (max-width:720px){
  .fl-stats{gap:8px}.fl-stats b{font-size:22px}.fl-stats small{font-size:10.5px}
  .fl-steps li{padding:11px 12px;gap:10px}.fl-steps b{flex-basis:52px;font-size:11.5px}.fl-steps p{font-size:13px}.fl-steps small{font-size:11px}
  .fl-steps .ls1{margin:0 32px 0 0}.fl-steps .ls2{margin:0 24px 0 8px}.fl-steps .ls3{margin:0 16px 0 16px}.fl-steps .ls4{margin:0 8px 0 24px}.fl-steps .ls5{margin:0 0 0 32px}
}
@media (prefers-reduced-motion:reduce){[data-fl].l2-js .fl-steps li,[data-fl].l2-js .fl-chips span{opacity:1;transform:none}}

/* 1 Nov 2026 (owner, 21:04): ladder v2: grade badges rising on the right of each step (MDCAT, BS-17, BS-18, BS-20, 1st), year pills deepening from pale to teal as the steps climb, a soft rising rail behind the steps, "(BS-20)" never split across lines, line icons in the chips */
.nw{white-space:nowrap}
.fl-right{position:relative}
.fl-steps{position:relative}
.fl-steps::before{content:"";position:absolute;left:30px;right:30px;top:24px;bottom:24px;background:linear-gradient(to top right,rgba(34,211,197,0) 49.6%,rgba(34,211,197,.45) 50%,rgba(34,211,197,0) 50.4%);pointer-events:none;z-index:0}
.fl-steps li{position:relative;z-index:1}
.fl-steps li>div{flex:1}
.fl-steps .gr{flex:0 0 auto;align-self:center;padding:5px 11px;border-radius:10px;font-style:normal;font-size:11.5px;font-weight:900;letter-spacing:.06em;color:var(--navy);background:var(--navy-tint)}
.fl-steps .ls1 .gr{background:#EEF2F8;color:var(--soft)}
.fl-steps .ls5 .gr{background:#fff;color:#0B6F68;box-shadow:0 4px 10px -4px rgba(11,111,104,.6)}
.fl-steps .ls1 b{background:#F0FBF9}.fl-steps .ls2 b{background:#DDF7F3}.fl-steps .ls3 b{background:#C4F1EB}.fl-steps .ls4 b{background:#A6EBE3}
.fl-chips span{display:inline-flex;align-items:center;gap:8px}
.fl-chips svg{width:16px;height:16px;fill:none;stroke:#0FB4AA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){.fl-steps .gr{font-size:10px;padding:4px 7px}.fl-steps::before{display:none}}
.fl-steps::before{background:linear-gradient(to bottom right,rgba(34,211,197,0) 49.6%,rgba(34,211,197,.35) 50%,rgba(34,211,197,0) 50.4%);left:40px;right:40px;top:30px;bottom:30px}

/* 1 Nov 2026 (owner, 21:07, option B): founder section, editorial: a large centred quote, then a five-column milestone strip with big serif years and fine dividers; columns rise in turn and the years count up on each view */
.fed{text-align:center}
.fe-q{max-width:900px;margin:14px auto 10px;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.2;color:var(--deep)}
.fe-by{margin:0;font-size:15px;font-weight:800;color:var(--teal-text)}
.fe-strip{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);margin:40px 0 0;padding:0;border-top:1px solid #C8D6E8;text-align:left}
.fe-strip li{padding:22px 20px 8px;border-left:1px solid #C8D6E8}
.fe-strip li:first-child{border-left:0;padding-left:4px}
.fe-strip b{display:block;font-family:var(--serif);font-weight:600;font-size:44px;line-height:1;color:#0FB4AA;font-variant-numeric:tabular-nums}
.fe-strip li.g b{color:#C98612}
.fe-strip p{margin:12px 0 0;font-size:14.5px;font-weight:700;line-height:1.45;color:var(--deep)}
.fe-strip small{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--soft)}
.fe-txt{max-width:820px;margin:34px auto 0;font-size:15px;line-height:1.6;color:var(--soft)}.fe-txt b{color:var(--deep)}
[data-fe].e-js .fe-strip li{opacity:0;transform:translateY(16px)}
[data-fe].e-js.go .fe-strip li{opacity:1;transform:none;transition:opacity .55s,transform .65s cubic-bezier(.2,1,.3,1)}
.fe-strip li:nth-child(2){transition-delay:.15s}.fe-strip li:nth-child(3){transition-delay:.3s}.fe-strip li:nth-child(4){transition-delay:.45s}.fe-strip li:nth-child(5){transition-delay:.6s}
@media (max-width:1060px){.fe-strip{grid-template-columns:repeat(3,1fr)}.fe-strip li:nth-child(4){border-left:0;padding-left:4px}.fe-strip li:nth-child(n+4){border-top:1px solid #C8D6E8}}
@media (max-width:720px){
  .fe-strip{grid-template-columns:1fr 1fr;margin-top:28px}
  .fe-strip li{padding:16px 12px 10px;border-top:1px solid #C8D6E8}
  .fe-strip li:nth-child(odd){border-left:0;padding-left:2px}.fe-strip li:nth-child(even){border-left:1px solid #C8D6E8}
  .fe-strip li:nth-child(-n+2){border-top:0}
  .fe-strip li:last-child{grid-column:1/-1}
  .fe-strip b{font-size:34px}.fe-strip p{font-size:13px}.fe-strip small{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){[data-fe].e-js .fe-strip li{opacity:1;transform:none}}

/* 1 Nov 2026 (owner, 21:19): DG NCIMC in its own column; 20+ years and IELTS as lines of text below the strip */
.fe-more{list-style:none;margin:26px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px}
.fe-more li{position:relative;padding-left:16px;font-size:15px;font-weight:700;color:var(--deep)}
.fe-more li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#22D3C5}
.fe-txt{margin-top:18px}
@media (max-width:720px){.fe-more{flex-direction:column;align-items:center;gap:6px}.fe-more li{font-size:13.5px}}
@media (max-width:720px){.fe-more li{padding-left:0;text-align:center}.fe-more li::before{position:static;display:inline-block;margin:0 8px 2px 0;vertical-align:middle}}

/* 1 Nov 2026 (owner, 21:23): price card restyled to match the light sections above: white-to-teal card with a fine teal edge, navy serif price that counts up, teal and gold accents, the "includes" side as a clean list whose ticks pop in one by one; the red button kept */
.pc3{background:linear-gradient(160deg,#FFFFFF 0%,#F2FBFA 55%,#E3F8F5 100%) !important;color:var(--ink) !important;box-shadow:0 0 0 1.5px #A6EBE5,0 40px 80px -46px rgba(15,180,170,.9) !important;border:0 !important}
.pc3 .pc2-glow{background:radial-gradient(circle,rgba(34,211,197,.22),transparent 65%)}
.pc3::after{background:radial-gradient(circle,rgba(245,200,76,.18),transparent 65%)}
.pc3 .p-badge{background:var(--navy);color:#fff}
.pc3 .pc2-chip{color:#A56F0A;border-color:#F0D58A;background:#FFF8E6}
.pc3 .pc2-len{color:var(--soft)}
.pc3 .pc2-cur{color:var(--teal-text)}
.pc3 .pc2-amt{background:linear-gradient(180deg,#1C3C77 30%,#0F2552);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.pc3 .pc2-line{color:var(--soft)}.pc3 .pc2-line b{color:var(--teal-text)}
.pc3 .pc2-note{color:var(--soft)}
.pc3 .pc2-trust{border-top-color:var(--line)}
.pc3 .pc2-trust span{color:var(--deep)}
.pc3 .pc2-side{background:rgba(255,255,255,.7);border-left:1px solid var(--line)}
.pc3 .pc2-h{color:var(--teal-text)}
.pc3 .pc2-list li{color:var(--soft);border-bottom-color:var(--line)}
.pc3 .pc2-list li b{color:var(--deep)}
.pc3 .pc2-free{color:var(--soft)}
.pc3 .pc2-pills span{background:#fff;border-color:#A6EBE5;box-shadow:0 8px 18px -12px rgba(15,180,170,.6)}
.pc3 .pc2-pills b{color:var(--deep)}.pc3 .pc2-pills i{color:var(--teal-text)}
@media (max-width:860px){.pc3 .pc2-side{border-left:0;border-top:1px solid var(--line)}}
[data-price].p-js .pc2-list li::before{transform:scale(0)}
[data-price].p-js .pc2-list li{opacity:.35}
[data-price].p-js.go .pc2-list li{opacity:1;transition:opacity .4s}
[data-price].p-js.go .pc2-list li::before{transform:scale(1);transition:transform .45s cubic-bezier(.3,1.8,.5,1)}
[data-price].p-js.go .pc2-list li:nth-child(2),[data-price].p-js.go .pc2-list li:nth-child(2)::before{transition-delay:.15s}
[data-price].p-js.go .pc2-list li:nth-child(3),[data-price].p-js.go .pc2-list li:nth-child(3)::before{transition-delay:.3s}
[data-price].p-js.go .pc2-list li:nth-child(4),[data-price].p-js.go .pc2-list li:nth-child(4)::before{transition-delay:.45s}
[data-price].p-js.go .pc2-list li:nth-child(5),[data-price].p-js.go .pc2-list li:nth-child(5)::before{transition-delay:.6s}
[data-price].p-js.go .pc2-list li:nth-child(6),[data-price].p-js.go .pc2-list li:nth-child(6)::before{transition-delay:.75s}
[data-price].p-js.go .pc2-list li:nth-child(7),[data-price].p-js.go .pc2-list li:nth-child(7)::before{transition-delay:.9s}
@media (prefers-reduced-motion:reduce){[data-price].p-js .pc2-list li{opacity:1}[data-price].p-js .pc2-list li::before{transform:none}}

/* 1 Nov 2026 (owner, 21:52, option F): price shown as a 12-month ring: "2,000 PKR / month" in the centre, PKR 24,000 paid annually beside it; the twelve segments fill one by one on each view */
.pr-ring{display:flex;align-items:center;gap:26px;margin:26px 0 8px}
.pr-r{position:relative;flex:0 0 200px;width:200px;height:200px}
.pr-r svg{width:100%;height:100%;overflow:visible}
.pr-r path{fill:none;stroke-width:9;stroke-linecap:round}
.pr-r .tr path{stroke:#E3EEF9}
.pr-r .fl path{stroke:#0FB4AA}
.pr-r .fl .m12,.pr-r .fl .m11,.pr-r .fl .m10{stroke:#22D3C5}
.pr-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pr-c b{font-family:var(--serif);font-weight:600;font-size:46px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.pr-c small{margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.pr-t{display:flex;flex-direction:column;gap:3px}
.pr-k{font-size:15px;font-weight:700;color:var(--soft)}
.pr-t b{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.1;color:var(--navy)}
.pr-t span:not(.pr-k){font-size:15px;color:var(--soft)}
.pr-t em{align-self:flex-start;margin-top:10px;padding:5px 12px;border-radius:999px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--teal-text);background:#E6FAF7;border:1px solid #A6EBE5}
.pr-small{margin-top:12px;font-size:13px}
[data-price].p-js .pr-r .fl path{opacity:0}
[data-price].p-js.go .pr-r .fl path{opacity:1;transition:opacity .35s ease}
[data-price].p-js.go .pr-r .fl .m1{transition-delay:0.15s}[data-price].p-js.go .pr-r .fl .m2{transition-delay:0.28s}[data-price].p-js.go .pr-r .fl .m3{transition-delay:0.41s}[data-price].p-js.go .pr-r .fl .m4{transition-delay:0.54s}[data-price].p-js.go .pr-r .fl .m5{transition-delay:0.67s}[data-price].p-js.go .pr-r .fl .m6{transition-delay:0.80s}[data-price].p-js.go .pr-r .fl .m7{transition-delay:0.93s}[data-price].p-js.go .pr-r .fl .m8{transition-delay:1.06s}[data-price].p-js.go .pr-r .fl .m9{transition-delay:1.19s}[data-price].p-js.go .pr-r .fl .m10{transition-delay:1.32s}[data-price].p-js.go .pr-r .fl .m11{transition-delay:1.45s}[data-price].p-js.go .pr-r .fl .m12{transition-delay:1.58s}
@media (max-width:860px){.pr-ring{flex-direction:column;align-items:center;text-align:center;gap:16px}.pr-t{align-items:center}.pr-t em{align-self:center}.pr-r{flex-basis:180px;width:180px;height:180px}.pr-c b{font-size:40px}}
@media (prefers-reduced-motion:reduce){[data-price].p-js .pr-r .fl path{opacity:1}}
.pr-r path{stroke-linecap:butt}
@media (min-width:861px){.pc3 .pc2-main{display:flex;flex-direction:column;justify-content:center}.pc3 .pc2-top{margin-bottom:4px}}

/* 1 Nov 2026 (owner, 22:07): "How paying works" with motion: an icon for each step (trial, bank, upload, activated), a progress line running through the four step icons that fills left to right, each step lighting up in turn, the last one turning green-teal "Done"; plays each time it comes into view */
.pay2{position:relative}
.pay2 .ps{position:relative;z-index:1;transition:transform .3s,box-shadow .3s,border-color .4s}
@media (hover:hover){.pay2 .ps:hover{transform:translateY(-4px)}}
.pay2 .ps .n{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#EEF4FB;border:1px solid var(--line);transition:background .5s,border-color .5s,box-shadow .5s}
.pay2 .ps .n svg{width:26px;height:26px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.pay2 .ps-lb{display:inline-block;margin:12px 0 2px;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);background:#F2F5F9;transition:background .5s,color .5s}
.pay2 .ps.hot .n,.pay2 .ps.on .n{background:linear-gradient(135deg,#22D3C5,#0FB4AA);border-color:transparent;box-shadow:0 10px 22px -10px rgba(15,180,170,.9)}
.pay2 .ps.hot .n svg,.pay2 .ps.on .n svg{stroke:#fff}
.pay2 .ps.hot .ps-lb,.pay2 .ps.on .ps-lb{background:#E6FAF7;color:var(--teal-text)}
.pay2 .ps.on{border-color:#A6EBE5;box-shadow:0 0 0 1px #A6EBE5,0 20px 36px -26px rgba(15,180,170,.8)}
.pay-line{position:absolute;left:12.5%;right:12.5%;top:46px;height:4px;border-radius:4px;background:#DCE6F3;z-index:0;display:none}
.pay-line i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:linear-gradient(90deg,#22D3C5,#0FB4AA);box-shadow:0 0 10px rgba(34,211,197,.7)}
@media (min-width:1061px){.price-stack .pay2 .pay-line{display:block;left:calc(12.5% - 4px);right:calc(12.5% - 4px)}}
.pay2 .ps:last-child.on .n{background:linear-gradient(135deg,#2BD49A,#0FB4AA)}
@keyframes pay-pop{40%{transform:scale(1.12)}}
.pay2 .ps.pop .n{animation:pay-pop .5s ease}
@media (prefers-reduced-motion:reduce){.pay2 .ps.pop .n{animation:none}}
@media (max-width:600px){
  .price-stack .pay2 .ps{grid-template-columns:56px 1fr;grid-template-areas:"n lb" "n tx";column-gap:14px;row-gap:0;align-items:start}
  .pay2 .ps .n{grid-area:n}
  .pay2 .ps-lb{grid-area:lb;justify-self:start;margin:2px 0 6px}
  .pay2 .ps>div{grid-area:tx}
}
.pay2 .ps-lb{justify-self:start;width:auto}
@media (min-width:601px){.pay2 .ps-lb{display:table}}

/* 1 Nov 2026 (owner, 22:11): a second ring for the year, like the month ring but gold: 2,000 PKR / month × 12 = 24,000 PKR / year; the gold ring draws round after the month ring fills, and 24,000 counts up */
.pr2{gap:14px;justify-content:flex-start;align-items:center}
.pr2 .pr-r{flex:0 0 172px;width:172px;height:172px}
.pr2 .pr-c b{font-size:38px}
.pr-x{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:15px;font-weight:800;color:var(--soft)}
.pr-x i{font-style:normal;font-size:24px;line-height:1;color:var(--teal-text)}
.pr-y svg{transform:rotate(-90deg)}
.pr-y circle{fill:none;stroke-width:9}
.pr-y .yt{stroke:#FBEFD0}
.pr-y .yv{stroke:url(#none);stroke:#E8A21F;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(245,200,76,.55))}
.pr-y .pr-c b{color:#8A5A06}
.pr-y .pr-c small{color:#A56F0A}
.pr-t2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px;font-size:15px;color:var(--soft)}
.pr-t2 b{color:var(--deep)}
.pr-t2 em{padding:5px 12px;border-radius:999px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--teal-text);background:#E6FAF7;border:1px solid #A6EBE5}
[data-price].p-js .pr-y .yv{stroke-dashoffset:100}
[data-price].p-js.go .pr-y .yv{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) 1.7s}
@media (max-width:860px){
  .pr2{flex-direction:row;justify-content:center;gap:8px}
  .pr2 .pr-r{flex:0 0 132px;width:132px;height:132px}
  .pr2 .pr-c b{font-size:28px}.pr2 .pr-c small{font-size:9.5px;letter-spacing:.1em}
  .pr-x{font-size:12px}.pr-x i{font-size:18px}
  .pr-t2{justify-content:center;text-align:center;font-size:14px}
}
@media (prefers-reduced-motion:reduce){[data-price].p-js .pr-y .yv{stroke-dashoffset:0}}
.pr-y .pr-c b{font-size:34px}
@media (max-width:860px){.pr-y .pr-c b{font-size:25px}}
.pr-y .yv{stroke-linecap:butt}

/* 1 Nov 2026 (owner, 22:17): one big 12-month ring for PKR 24,000 a year, a navy "Paid annually" ribbon below it, then a small 2,000-a-month ring with "That is just PKR 2,000 a month, about PKR 66 a day" */
.pr3{display:flex;flex-direction:column;align-items:center;gap:16px;margin:24px 0 8px;text-align:center}
.pc3 .pc2-top{justify-content:center}
.pc3 .pc2-trust{justify-content:center}
.pr-big{flex:none;width:230px;height:230px}
.pr-big path{stroke-width:8}
.pr-big .pr-c b{font-size:56px;color:var(--navy)}
.pr-big .pr-c small{font-size:12px}
.pr-big .pr-c small.t{margin:0 0 4px;font-size:10.5px;letter-spacing:.16em;color:var(--soft)}
.pr-ann{display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;text-align:left;color:#fff;background:linear-gradient(135deg,#24508F,#1C3C77 55%,#0F2552);box-shadow:0 14px 28px -14px rgba(15,37,82,.8)}
.pr-ann .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#22D3C5,#0FB4AA);color:#0B1B45;font-weight:900}
.pr-ann b{display:block;font-size:16px;letter-spacing:.02em}
.pr-ann em{display:block;font-style:normal;font-size:12px;color:var(--on-dark-soft)}
.pr-mo{display:flex;align-items:center;gap:14px;margin-top:2px;padding:10px 18px 10px 10px;border-radius:20px;background:#fff;border:1px solid var(--line);text-align:left;box-shadow:0 12px 24px -20px rgba(15,37,82,.7)}
.pr-sm{flex:none;width:86px;height:86px}
.pr-sm path{stroke-width:9}
.pr-sm .pr-c b{font-size:20px}
.pr-sm .pr-c small{margin-top:1px;font-size:9px;letter-spacing:.06em}
.pr-mo p{margin:0;font-size:14px;line-height:1.45;color:var(--soft)}
.pr-mo p b{color:var(--teal-text)}
@media (max-width:860px){.pr-big{width:200px;height:200px}.pr-big .pr-c b{font-size:48px}.pr-ann b{font-size:15px}.pr-mo p{font-size:13px}}
.pr-big{width:240px;height:240px}.pr-big .pr-c b{font-size:44px}
.pr-sm .pr-c b{font-size:16.5px}
@media (max-width:860px){.pr-big{width:210px;height:210px}.pr-big .pr-c b{font-size:38px}.pr-mo p br{display:none}}
/* 1 Nov 2026 (owner, 22:46): phones: founder milestones one below the other on a teal timeline; each slides in and its year counts up as it comes into view, one by one (replays when scrolled back) */
@media (max-width:720px){
  .fe-strip{grid-template-columns:1fr !important;position:relative;border-top:0;margin-top:26px;padding-left:30px}
  .fe-strip::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(#22D3C5,#A6EBE5)}
  .fe-strip li{position:relative;grid-column:auto !important;border:0 !important;padding:6px 0 22px 4px !important;text-align:left}
  .fe-strip li::before{content:"";position:absolute;left:-28px;top:14px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #22D3C5;box-shadow:0 0 0 4px rgba(34,211,197,.16)}
  .fe-strip li.g::before{border-color:#E8A21F;box-shadow:0 0 0 4px rgba(245,200,76,.2)}
  .fe-strip b{font-size:38px}
  [data-fe] .fe-strip.m-js li:not(.seen){opacity:0 !important;transform:translateX(-26px) !important}
  [data-fe] .fe-strip.m-js li.seen{opacity:1 !important;transform:none !important;transition:opacity .6s ease,transform .7s cubic-bezier(.2,1.2,.4,1) !important;transition-delay:0s !important}
  [data-fe] .fe-strip.m-js li.seen::before{animation:fe-dot .6s cubic-bezier(.3,1.8,.5,1)}
}
@keyframes fe-dot{0%{transform:scale(0)}100%{transform:scale(1)}}

/* 1 Nov 2026 (owner, 23:00): phones: an elegant "Sign in" pill beside the menu button (top right) */
.m-signin{display:none}
@media (max-width:900px){
  .m-signin{display:inline-flex;align-items:center;gap:7px;margin-left:auto;margin-right:10px;height:40px;padding:0 15px 0 12px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;color:#0B1B45;background:linear-gradient(135deg,#22D3C5,#0FB4AA);box-shadow:0 8px 18px -8px rgba(15,180,170,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s}
  .m-signin:active{transform:scale(.96)}
  .m-signin svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .m-signin+.menu-btn{margin-left:0}
  .hdr:not(.dark) .m-signin{color:#fff;background:linear-gradient(135deg,#24508F,#1C3C77);box-shadow:0 8px 18px -8px rgba(15,37,82,.7)}
  .menu-open .m-signin{visibility:hidden}
}
@media (max-width:340px){.m-signin{padding:0 11px}.m-signin svg{display:none}}