/* ============================================================
   medtrainit IMAT — v2 · "Spec Column"
   ------------------------------------------------------------
   A sibling of the edtrainit homepage, not a stranger. The brand
   tokens, the button language, the glass pill nav, the card radii
   and the shadow ladder are all carried over from style.css so the
   two pages read as one company.

   The LAYOUT is new and belongs to this page alone:
     · a sticky product sub-bar under the shared edtrainit masthead
     · pricing surfaced in the hero (client analytics: visitors go
       straight for the plans)
     · every section is a two-column "spec sheet" — a sticky label
       column on the left, content on the right
     · a sticky enrol bar that follows the reader down the page
   ============================================================ */

:root{
  /* ---- Brand (frozen — identical to style.css) ---- */
  --ink:#000000;
  --ink-2:#555555;
  --ink-3:#767676;
  --teal-deep:#0B3F46;
  --teal:#34A1A3;
  --teal-light:#43C4B5;
  --mint:#43C4B5;
  --mint-soft:#FFFFFF;

  /* ---- Surfaces (frozen) ---- */
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;
  --band-bg:#FFFFFF; /* score band — adopted from v3 tint-2, the one deeper tint */
  --surface:#FFFFFF;
  --surface-tint:#FFFFFF;
  --line:#E3E3E3;
  --line-2:#E3E3E3;
  --warn:#555555;
  --warn-soft:#FFFFFF;

  /* ---- On dark ---- */
  --dk:#000000;
  --dk-2:#0B3F46;
  --dk-line:rgba(255,255,255,.14);
  --dk-2-txt:rgba(255,255,255,.68);
  --dk-3-txt:rgba(255,255,255,.46);

  /* ---- Radii (frozen) ---- */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:34px;
  --r-pill:999px;

  /* ---- Shadows (frozen) ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.03);
  --sh-2:0 2px 6px rgba(0,0,0,.05), 0 12px 24px -12px rgba(0,0,0,.12);
  --sh-3:0 8px 20px -8px rgba(0,0,0,.10), 0 30px 60px -24px rgba(11,63,70,.22);
  --sh-4:0 20px 44px -18px rgba(11,63,70,.30), 0 48px 90px -40px rgba(0,0,0,.30);
  --sh-cta:0 10px 24px -8px rgba(11,63,70,.55), 0 2px 6px rgba(11,63,70,.3);

  /* ---- Gradients (frozen) ---- */
  --grad-cta:linear-gradient(135deg,#34A1A3 0%,#34A1A3 45%,#0B3F46 100%);
  --grad-mint:linear-gradient(135deg,var(--mint) 0%,var(--teal) 100%);

  /* ---- Teal spectrum (v7 highlight rhythm — all derived from
     the frozen brand tokens above; no new hues) ---- */
  --teal-50:#FFFFFF;
  --teal-100:#FFFFFF;  /* = mint-soft */
  --teal-200:#43C4B5;  /* = teal-light */
  --teal-300:#34A1A3;
  --teal-400:#43C4B5;  /* = mint */
  --teal-500:#34A1A3;  /* = teal */
  --teal-600:#0B3F46;  /* = teal-deep */
  --teal-800:#0B3F46;

  /* ---- Type (frozen) ---- */
  --display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.32s;

  --max:1240px;
  --pad:clamp(20px,5vw,44px);

  /* --nav-h is remeasured from the real bar on load and resize (see the
     JS). This is the no-JS fallback for the 62px full-width masthead. */
  --nav-h:62px;        /* masthead */
  --sub-h:54px;        /* section tabs bar */
  --label-w:260px;     /* spec-sheet label column */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--sub-h) + 16px);
}
body{
  font-family:var(--body);
  font-size:17px;line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* The browser's own `[hidden] { display: none }` is a bare attribute rule, so
   ANY class rule that sets `display` outranks it. Several things here are
   toggled with the hidden attribute and also carry a display-setting class
   (.modal is a grid, .grid2 is a grid, .field is a flex) — without this they
   would all render, and the invisible partner modal would sit over the whole
   page eating clicks. Keep this above the components that rely on it. */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--teal-light);color:var(--teal-deep)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:var(--r-pill);font-weight:600}
.skip:focus{left:12px;top:12px}

*:focus{outline:none}
*:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ============================================================
   SHARED PRIMITIVES — carried over from the homepage
   ============================================================ */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:var(--r-pill);padding:7px 15px 7px 12px;
  box-shadow:var(--sh-1);
}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--grad-mint);box-shadow:0 0 0 3px rgba(67,196,181,.18)}

.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--teal-deep);
  background:var(--mint-soft);border-radius:var(--r-pill);padding:5px 11px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:16px;font-weight:600;line-height:1;
  padding:16px 26px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;will-change:transform;text-align:center;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.btn span{transition:transform var(--dur) var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn-primary{background:var(--grad-cta);color:#fff;
  box-shadow:var(--sh-cta),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-3px);
  box-shadow:0 16px 34px -10px rgba(11,63,70,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:active{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--line-2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--sh-1)}
.btn-ghost:hover{color:var(--teal-deep);border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--sh-2)}
.btn-mint{background:var(--grad-mint);color:var(--ink);font-weight:700;
  box-shadow:0 10px 24px -8px rgba(67,196,181,.55)}
.btn-mint:hover{transform:translateY(-3px);box-shadow:0 16px 34px -10px rgba(67,196,181,.7)}
.btn-sm{font-size:14px;padding:11px 18px}
.btn-lg{font-size:17px;padding:18px 32px}
.btn-block{width:100%}

.link{color:var(--teal-deep);font-weight:500;border-bottom:1px solid rgba(52,161,163,.35);
  transition:border-color var(--dur) var(--ease)}
.link:hover{border-color:var(--teal)}

/* ============================================================
   ANNOUNCEMENT RIBBON
   ============================================================ */







/* ============================================================
   MASTHEAD — full-width sticky bar (content holds the max-width)
   ============================================================ */
.nav{position:sticky;top:0;z-index:110;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease)}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav.is-scrolled{box-shadow:var(--sh-1)}

.brand{display:inline-flex;align-items:center;gap:11px;flex:none;
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand-badge{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad-cta);color:#fff;font-size:15px;font-weight:800;box-shadow:var(--sh-1)}
.brand-r,.brand-tm{font-size:12px;vertical-align:super;font-weight:600;color:var(--teal-deep);margin-left:-10px}
.brand-logo{width:30px;height:30px;border-radius:9px;display:block;flex:none;box-shadow:var(--sh-1)}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links>li{position:relative}
.nav-links a,.nav-links .nav-dd-toggle{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  padding:9px 13px;border-radius:var(--r-pill);cursor:pointer;background:none;border:0;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav-links a:hover,.nav-links .nav-dd-toggle:hover{color:var(--teal-deep);background:rgba(52,161,163,.08)}
.nav-links a.is-here{color:var(--teal-deep);background:var(--mint-soft);font-weight:600}
.nav-dd-arrow{font-size:11px;color:var(--teal);transition:transform var(--dur) var(--ease)}
.nav-dd-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;list-style:none;padding:8px;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dd:hover .nav-dd-arrow,.nav-dd:focus-within .nav-dd-arrow{transform:rotate(180deg)}
.nav-dd-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:14px;border-radius:var(--r-xs);white-space:nowrap;padding:10px 13px;width:100%}

/* Scoped to .nav-links so it outranks the `.nav-links a` reset above,
   which would otherwise strip the gradient and leave white-on-white. */



.hamburger{display:none;width:44px;height:44px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);border-radius:14px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}
.hamburger span{width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .hamburger span:nth-child(2){opacity:0}
.nav.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-panel{display:none}

/* ============================================================
   PRODUCT SUB-BAR — sticky, horizontal, scrollable on small screens
   ============================================================ */
.subbar{position:sticky;top:calc(var(--nav-h) - 1px);z-index:105;
  margin-bottom:-1px;padding-top:1px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-top:0;border-bottom:0}
.subbar-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:18px;height:var(--sub-h)}
.subbar-brand{display:inline-flex;align-items:baseline;gap:7px;flex:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;color:#fff}
.subbar-brand i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--mint);text-transform:uppercase}
.subnav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;flex:1;scroll-snap-type:x proximity;justify-content:center;justify-content:safe center}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;scroll-snap-align:start;
  font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  padding:7px 12px;border-radius:var(--r-pill);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.subnav a:hover{color:var(--teal-deep);background:rgba(52,161,163,.08)}
.subnav a.is-active{color:var(--teal-deep);background:var(--mint-soft);font-weight:600}
.subbar-progress{height:2px;background:transparent;position:relative;margin-top:-2px}
.subbar-progress i{display:block;height:2px;width:0;background:var(--grad-mint);
  transition:width .12s linear}

/* ============================================================
   HERO — headline, pillars and the two plans, all above the fold
   ============================================================ */
.hero{position:relative;padding:clamp(34px,5vw,54px) 0 clamp(40px,5vw,60px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 50% at 88% 0%,rgba(67,196,181,.20),transparent 64%),
    radial-gradient(44% 46% at 2% 88%,rgba(52,161,163,.14),transparent 62%)}
.hero .wrap{position:relative;z-index:1}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.hero-copy{max-width:880px}
.hero-lede{max-width:100%}

.hero-h1{font-family:var(--display);font-weight:800;
  font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.035em;
  color:var(--ink);margin-top:20px}
.hero-h1 em{font-style:normal;background:linear-gradient(120deg,var(--teal),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{margin-top:20px;font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;
  color:var(--ink-2);max-width:56ch}

.syllabus{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:22px}
.syllabus li{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;
  color:var(--teal-deep);background:rgba(255,255,255,.8);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:6px 13px;box-shadow:var(--sh-1)}


.pillar{background:rgba(255,255,255,.78);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--sh-1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(52,161,163,.28)}



/* --- Plan preview cards, in the hero --- */


















/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.55)}
.trust-inner{max-width:var(--max);margin:0 auto;padding:22px var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tstat-val{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);
  line-height:1;letter-spacing:-.03em;color:var(--teal-deep)}
.tstat-lbl{margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}

/* ============================================================
   SPEC-SHEET SECTION GRID — the page's layout signature
   ============================================================ */
.sec{padding:clamp(56px,7vw,84px) 0;position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:var(--label-w) minmax(0,1fr);
  gap:clamp(28px,4vw,54px);align-items:start}
.sec-label{position:sticky;top:calc(var(--nav-h) + var(--sub-h) + 24px)}
.sec-title{font-family:var(--display);font-weight:800;
  font-size:clamp(26px,2.9vw,36px);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);margin-top:16px}
.sec-title em{font-style:normal;background:linear-gradient(120deg,var(--teal),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-note{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sec-body > * + *{margin-top:clamp(20px,2.6vw,28px)}

.minor{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.prose{font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:72ch}
.prose + .prose{margin-top:14px}
.fineprint{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-3);line-height:1.6}

/* ============================================================
   01 — WHY MEDTRAINIT (bento)
   ============================================================ */

.why{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.why:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(52,161,163,.28)}
.why-lead{grid-column:span 2;background:var(--grad-cta);border-color:transparent;
  box-shadow:var(--sh-cta);color:#fff}
/* Eight items with the first spanning both columns leaves the last one
   stranded beside a gap — let it span instead. */

.why-lead:hover{box-shadow:0 18px 40px -12px rgba(11,63,70,.6)}


.why-title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:7px}
.why-lead .why-title{color:#fff;font-size:20px}
.why-text{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.why-lead .why-text{color:rgba(255,255,255,.88);font-size:15.5px}

/* ============================================================
   02 — PRICING (full detail)
   ============================================================ */

.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--sh-2);position:relative;
  display:flex;flex-direction:column}















/* Progressive disclosure — key highlights stay visible, the full
   contents open on demand (adopted from v3). */










.ticks{list-style:none;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;
  border-radius:50%;background:var(--mint-soft);box-shadow:inset 0 0 0 1px rgba(52,161,163,.28)}
.ticks li::after{content:"";position:absolute;left:5px;top:8.5px;width:6px;height:3px;
  border-left:1.8px solid var(--teal-deep);border-bottom:1.8px solid var(--teal-deep);
  transform:rotate(-45deg)}
.ticks li strong{color:var(--ink);font-weight:700}
/* shared content looks identical in both plans (client request) */
.plan .ticks li strong{color:var(--teal-deep)}






/* ============================================================
   03 — GUIDED JOURNEY (timeline)
   ============================================================ */
.journey{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  counter-reset:jstep;position:relative}
.journey::before{display:none}
.jstep{position:relative;color:#fff;border:1px solid rgba(11,63,70,.4);
  border-radius:var(--r-lg);padding:72px 20px 20px;box-shadow:0 16px 34px -14px rgba(11,63,70,.55);
  overflow:hidden;background:
    radial-gradient(60% 50% at 85% 0%,rgba(67,196,181,.35),transparent 60%),
    linear-gradient(160deg,#0B3F46 0%,#0B3F46 55%,#0B3F46 100%);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.jstep:hover{transform:translateY(-4px);box-shadow:0 22px 44px -14px rgba(11,63,70,.65);border-color:rgba(67,196,181,.55)}
.jstep::before{counter-increment:jstep;content:counter(jstep,decimal-leading-zero);
  position:absolute;top:16px;left:18px;display:inline-block;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--teal-light);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:6px 12px}
.jstep-when{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;
  line-height:1.2;color:#fff;margin-bottom:8px}
.jstep-phase{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);
  background:var(--mint-soft);border-radius:var(--r-pill);padding:5px 11px;margin-bottom:10px}


/* ============================================================
   04 — COMPARE TABLE
   ============================================================ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-1)}
table{border-collapse:collapse;width:100%;min-width:640px}

















/* ============================================================
   05 — DASHBOARD  (the existing edtrainit dashboard, ported)
   ============================================================ */
.dash-wrap{position:relative;max-width:920px;margin:0 auto}
/* Dashboard card runs full section width: header stacks above instead of
   sitting in the narrow label/body grid next to the card. */
.sec-dash .sec-grid{display:block}
.sec-dash .sec-label{position:static;max-width:none}
.sec-dash .sec-body{margin-top:clamp(24px,3vw,36px)}
.sec-dash .dash-wrap{max-width:none}
.dash-wrap::before{content:"";position:absolute;inset:-10px 20px -20px;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(67,196,181,.28),transparent 72%);filter:blur(30px)}
.dash{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(16px,2.2vw,22px);box-shadow:var(--sh-4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.dash:hover{transform:translateY(-4px);box-shadow:0 24px 50px -18px rgba(11,63,70,.4),0 48px 90px -40px rgba(0,0,0,.3);border-color:rgba(52,161,163,.35)}
.dash-bar{display:flex;align-items:center;gap:8px;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--line)}
.dash-bar .d{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.dash-bar .d:first-child{background:#34A1A3}
.dash-bar .d:nth-child(2){background:#34A1A3}
.dash-bar .d:nth-child(3){background:var(--mint)}
.dash-bar .url{margin-left:12px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  background:var(--bg-2);border-radius:var(--r-pill);padding:6px 14px}
.dash-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:10px;margin-bottom:14px}
.dash-name{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.dash-day{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.dash-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.sbox{padding:14px;background:var(--surface-tint);border:1px solid var(--line);border-radius:var(--r-md)}
.sbox.hero-stat{background:var(--grad-cta);border-color:transparent;box-shadow:var(--sh-cta)}
.sbox-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.sbox.hero-stat .sbox-lbl{color:rgba(255,255,255,.8)}
.sbox-val{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;
  letter-spacing:-.03em;color:#fff}
.sbox-suffix{font-size:15px;color:rgba(255,255,255,.75);font-weight:600}
.sbox-trend{margin-top:6px;font-size:12.5px;color:var(--teal-light);font-weight:600}
.sbox-list{font-size:13.5px;line-height:1.6;color:var(--ink)}
.sbox-verdict{font-size:13px;line-height:1.5;color:var(--ink-2)}
.dash-map{margin-bottom:16px}
.map-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.map-title{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.map-legend{display:flex;flex-wrap:wrap;gap:10px}
.leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3)}
.leg i{width:11px;height:11px;border-radius:4px;display:inline-block}
.sw-closed{background:var(--teal-deep)}
.sw-prog{background:var(--teal-light)}
.sw-flight{background:#FFFFFF;border:1px solid #E3E3E3}
.sw-empty{background:#FFFFFF;border:1px solid var(--line)}
.map-row{display:grid;grid-template-columns:74px repeat(8,1fr);gap:6px;align-items:center;margin-bottom:6px}
.map-row:last-child{margin-bottom:0}
.map-label{font-size:12px;font-weight:500;color:var(--ink)}
.cell{height:16px;border-radius:5px}
.c-closed{background:var(--teal-deep)}
.c-prog{background:var(--teal-light)}

.c-empty{background:#FFFFFF;border:1px solid var(--line)}
.dash-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:14px;
  margin-bottom:12px;border-top:1px solid var(--line)}
.dfoot-title{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.dfoot-item{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
.dfoot-item:last-child{border-bottom:none}
.dfoot-time{color:var(--ink-3);font-size:12px;white-space:nowrap}
.dfoot-body{font-size:14px;line-height:1.55;color:var(--ink-2)}
.dash-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-top:14px;border-top:1px solid var(--line)}
.dash-private{font-size:13px;color:var(--ink-3)}
.dash-updated{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.dash-after{margin-top:22px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.dash-disclaimer{margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-3)}
/* Dashboard fits one viewport (client review): compact density scoped to
   .sec-dash — trims section + card spacing so the whole section reads
   without scrolling on typical desktop heights. Nothing is removed. */
.sec-dash{padding:clamp(24px,4vh,54px) 0}
.sec-dash .sec-title{font-size:clamp(24px,2.4vw,30px)}
.sec-dash .sec-note{margin-top:8px}
.sec-dash .sec-body{margin-top:clamp(16px,2.5vh,24px)}
.sec-dash .dash{padding:14px}
.sec-dash .dash-bar{padding-bottom:10px;margin-bottom:12px}
.sec-dash .dash-head{margin-bottom:10px}
.sec-dash .dash-name{font-size:16px}
.sec-dash .dash-summary{gap:8px;margin-bottom:12px}
.sec-dash .sbox{padding:10px 12px}
.sec-dash .sbox-lbl{margin-bottom:6px}
.sec-dash .sbox-val{font-size:24px}
.sec-dash .sbox-trend{margin-top:4px}
.sec-dash .dash-map{margin-bottom:12px}
.sec-dash .map-head{margin-bottom:8px}
.sec-dash .map-row{gap:5px;margin-bottom:4px}
.sec-dash .cell{height:13px}
.sec-dash .dash-foot{gap:12px;padding-top:10px;margin-bottom:8px}
.sec-dash .dfoot-title{margin-bottom:6px}
.sec-dash .dfoot-item{padding:5px 0}
.sec-dash .dash-base{padding-top:10px}
.sec-dash .dash-after{margin-top:14px;font-size:15.5px}
.sec-dash .dash-disclaimer{margin-top:10px}

/* ============================================================
   06 — WHAT IS IMAT
   ============================================================ */
.sec-exam .prose{max-width:100%}
.sec-exam .sec-body > * + *{margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fact{position:relative;background:var(--surface);border:1px solid rgba(52,161,163,.18);
  border-radius:var(--r-md);padding:18px 18px 16px;box-shadow:var(--sh-1);text-align:left;
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.fact::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-mint)}
.fact:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(52,161,163,.35)}
.fact-val{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,42px);
  line-height:1;letter-spacing:-.04em;color:var(--teal-deep)}
.fact-lbl{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  background:var(--mint-soft);border-radius:var(--r-pill);padding:5px 11px}
.fact-warn{border-color:rgba(194,69,60,.35);background:var(--warn-soft)}
.fact-warn::before{background:linear-gradient(90deg,#34A1A3,var(--warn))}
.fact-warn .fact-val{color:var(--warn)}
.fact-warn .fact-lbl{color:#0B3F46;background:#FFFFFF}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.bullets{list-style:none;display:grid;gap:9px;margin-top:12px}
.bullets li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.bullets li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--teal-light);box-shadow:0 0 0 3px rgba(67,196,181,.28)}

.struct th,.struct td{padding:14px 18px;text-align:left;font-size:14.5px;
  border-bottom:1px solid var(--line)}
.struct thead th{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-tint)}
.struct tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.struct td{color:var(--ink-2)}
.struct .num{text-align:right;font-family:var(--mono);font-weight:500;color:var(--ink)}
.struct tfoot th,.struct tfoot td{font-weight:700;color:var(--ink);background:var(--surface-tint);border-bottom:0}
.struct tfoot .num{font-weight:700}

.marks{list-style:none;display:grid;gap:10px;margin-top:12px}
.marks li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}





/* ============================================================
   07 — WHY SCORE MATTERS  (light band, adopted from v3)
   The one section that has to feel like a moment earns it with a
   deeper teal tint and white cards — not a black ground — so it
   sits inside the page family instead of breaking it.
   ============================================================ */
.band{background:var(--band-bg);color:var(--ink);padding:clamp(60px,8vw,96px) 0;
  position:relative;overflow:hidden;border-block:1px solid rgba(52,161,163,.16)}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 44% at 86% 2%,rgba(255,255,255,.7),transparent 62%)}
.band .wrap{position:relative;z-index:1}
.band-title{font-family:var(--display);font-weight:800;
  font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.035em;color:var(--ink);margin-top:18px}
.band-title em{font-style:normal;color:var(--teal-deep)}
.band-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start;margin-top:22px}
.band-lede{font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.gap-tag{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:16px 22px;text-align:center;min-width:170px;box-shadow:var(--sh-1)}
.gap-lbl,.gap-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.gap-val{font-family:var(--display);font-weight:800;font-size:46px;line-height:1.05;
  letter-spacing:-.04em;color:var(--teal-deep);margin:4px 0}
.gap-sub i{font-style:normal;margin:0 5px;opacity:.5}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--teal-light)}
/* Score-card hover: lift + glow, mint accent bar sweeps in, figure highlights */
#score .scard{position:relative;overflow:hidden}
#score .scard::before{content:"";position:absolute;top:0;left:18px;right:18px;height:3px;
  border-radius:0 0 3px 3px;background:var(--grad-mint);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
#score .scard:hover{transform:translateY(-6px);box-shadow:var(--sh-3),0 18px 44px -16px rgba(52,161,163,.45);
  border-color:rgba(52,161,163,.45)}
#score .scard:hover::before{transform:scaleX(1)}
#score .scard-fig{transition:color .3s var(--ease)}
#score .scard:hover .scard-fig{color:var(--teal-deep)}
.scard-out{background:linear-gradient(160deg,var(--mint-soft),var(--surface) 70%);
  border-color:var(--teal-light)}
.scard-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.scard-head i{font-style:normal;color:var(--teal-deep)}
.scard-fig{font-family:var(--display);font-weight:800;font-size:44px;line-height:.95;
  letter-spacing:-.045em;color:var(--ink);display:flex;align-items:flex-end;gap:9px;margin-bottom:12px}
.scard-fig em{font-style:normal;font-family:var(--body);font-size:12.5px;font-weight:500;
  line-height:1.25;letter-spacing:0;color:var(--ink-3);padding-bottom:5px}
.scard-text{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.scard-text b{color:var(--ink);font-weight:600}
.scard-text em{font-style:italic;color:var(--teal-deep)}
.scard > *:last-child{margin-bottom:0}

.xgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:auto;padding-top:20px}
.xgrid i{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--bg-2);border:1px solid var(--line);
  font-style:normal;font-size:12px;color:var(--ink-3)}

.eq{display:flex;align-items:stretch;gap:7px;margin-top:auto;padding-top:20px}
.eq-box{flex:1;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-xs);padding:10px 6px;text-align:center}
.eq-box b{display:block;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink)}
.eq-box span{display:block;margin-top:4px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.eq-strong{background:var(--mint-soft);border-color:var(--teal-light)}
.eq-strong b{color:var(--teal-deep)}
.eq-op{display:grid;place-items:center;font-size:13px;color:var(--ink-3)}
.prog{height:4px;border-radius:var(--r-pill);background:var(--line);margin-top:14px;overflow:hidden}
.prog-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad-mint);
  transition:width 1.1s var(--ease)}
.prog-fill.in{width:21%}
.prog-lbl{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.bars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:auto;padding-top:20px;position:relative}
.bar-num{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink-3)}
.bar-num span{font-size:13px;font-weight:600;opacity:.7}
.bar-up{color:var(--teal-deep)}
.bar-track{height:120px;display:flex;align-items:flex-end;margin-top:8px}
.bar{width:100%;height:0;border-radius:var(--r-xs) var(--r-xs) 4px 4px;position:relative;
  display:flex;align-items:flex-start;justify-content:center;padding-top:7px;
  transition:height 1.1s var(--ease)}
.bar.in{height:var(--h)}
.bar span{font-family:var(--mono);font-size:10px;font-weight:700}
.bar-dim{background:#E3E3E3}
.bar-dim span{color:#0B3F46}
.bar-mint{background:linear-gradient(180deg,var(--mint),var(--teal))}
.bar-mint span{color:var(--ink)}
.bar-cap{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.35}
.bar-delta{position:absolute;right:-4px;top:38px;font-family:var(--mono);font-weight:700;
  font-size:13px;color:var(--teal-deep)}

.scard-thresh{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.scard-thresh em{font-style:normal;color:var(--teal-deep)}
.scale{position:relative;height:6px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--line),rgba(67,196,181,.5));margin-top:24px}
.scale-tick{position:absolute;left:26%;top:-20px;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
.scale-tick::after{content:"";position:absolute;left:50%;top:15px;width:1px;height:8px;background:var(--line-2)}
.scale-pin{position:absolute;left:64%;top:-4px;width:12px;height:14px;border-radius:var(--r-pill);
  background:var(--mint);box-shadow:0 0 0 4px rgba(67,196,181,.22)}
.scale-ends{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.scale-lbl{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-deep)}
.scale-lbl i{font-style:normal;margin:0 5px;opacity:.5}
.unis{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.uni{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:9px 11px;font-size:12px;color:var(--ink-2)}
.uni b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--teal-deep)}
.scard-note{margin-top:12px;font-family:var(--mono);font-size:9.5px;line-height:1.5;color:var(--ink-3)}

.band-callout{margin-top:28px;background:var(--teal-deep);border-radius:var(--r-md);
  padding:16px 28px;text-align:center;box-shadow:var(--sh-2);
  font-family:var(--display);font-weight:600;font-size:clamp(15px,1.8vw,18px);
  line-height:1.45;letter-spacing:-.01em;color:#fff}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 18px;margin-top:28px}
.band-cta-note{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-3)}

/* ============================================================
   08 — FACULTY
   ============================================================ */
.people{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.person{position:relative;min-width:0;perspective:1200px;
  background:transparent;border:none;box-shadow:none;
  padding:0;overflow:visible;min-height:178px;
  transition:transform .4s var(--ease)}
.person-flip{position:relative;width:100%;min-height:178px;height:100%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .7s var(--ease);outline:none}
.person:hover .person-flip,.person:focus-within .person-flip,.person-flip:focus-visible{transform:rotateY(180deg)}
.person-front,.person-back{position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease)}
.person-front{background:var(--teal-deep);border:1px solid var(--teal-deep);color:#fff}
.person:hover .person-front,.person:hover .person-back,
.person:focus-within .person-front,.person:focus-within .person-back{box-shadow:var(--sh-3);border-color:rgba(52,161,163,.30)}
.person-front{display:flex;align-items:center;gap:18px;min-width:0}
/* soft mint bloom in the top-right corner, revealed on hover */
.person-front::after{content:"";position:absolute;right:-60px;top:-60px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease)}
.person:hover .person-front::after{opacity:1}
/* oversized ghost initials, taken from the list item's data-ini */
.person-front::before{content:attr(data-ini);position:absolute;right:14px;bottom:-16px;z-index:0;
  font-family:var(--display);font-weight:800;font-size:76px;letter-spacing:-.05em;
  color:#fff;opacity:.12;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.person:hover .person-front::before{opacity:.2;transform:translateY(-4px)}
.person-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.person-back-name{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.person-back-text{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.person-front .person-photo{position:relative;z-index:1;width:72px;height:72px;flex:none;
  display:block;object-fit:cover;object-position:center 20%;
  background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.9);border-radius:var(--r-md);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.45);
  transition:transform .45s var(--ease),border-radius .45s var(--ease),border-color .45s var(--ease)}
.person:hover .person-photo,.person:focus-within .person-photo{
  transform:rotate(-3deg) scale(1.05);border-radius:var(--r-lg);border-color:#fff}
.person-body{position:relative;z-index:1;min-width:0}
.person-name{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.9vw,19px);
  line-height:1.25;letter-spacing:-.02em;color:#fff}
.person-role{margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);font-weight:500}
.person-rule{display:block;margin-top:10px;width:34px;height:2px;border-radius:2px;
  background:var(--mint);transition:width .45s var(--ease)}
.person:hover .person-rule{width:64px}
.people-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
  margin-top:16px;background:var(--surface-tint);border:1px solid var(--line);
  border-radius:var(--r-md);padding:15px 22px;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal-deep)}
.people-band i{font-style:normal;opacity:.35}

/* ============================================================
   09 — FAQ
   ============================================================ */
.qa{display:grid;gap:10px}
.qa-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.qa-item[open]{border-color:rgba(52,161,163,.3);box-shadow:var(--sh-2)}
.qa-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--ink)}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary:hover{color:var(--teal-deep)}
.qa-mark{position:relative;width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--mint-soft);transition:transform var(--dur) var(--ease)}
.qa-mark::before,.qa-mark::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--teal-deep);border-radius:2px;transform:translate(-50%,-50%)}
.qa-mark::before{width:10px;height:1.8px}
.qa-mark::after{width:1.8px;height:10px;transition:opacity var(--dur) var(--ease)}
.qa-item[open] .qa-mark{transform:rotate(180deg)}
.qa-item[open] .qa-mark::after{opacity:0}
.qa-body{padding:0 22px 20px;font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:78ch}
.qa-body p + p{margin-top:11px}

/* ============================================================
   PARTNER BAND + MODAL
   ============================================================ */
.partner{background:var(--grad-cta);color:#fff;padding:clamp(38px,5vw,54px) 0;position:relative;overflow:hidden}
.partner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 70% at 88% 0%,rgba(67,196,181,.3),transparent 62%)}



.partner .btn-ghost{background:#fff;color:var(--teal-deep);border-color:#fff}
.partner .btn-ghost:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.8);box-shadow:none}

.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;
  transition:opacity var(--dur) var(--ease)}
.modal.is-open .modal-scrim{opacity:1}
.modal-card{position:relative;z-index:1;width:min(520px,100%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl);padding:clamp(26px,4vw,38px);
  box-shadow:var(--sh-4);opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  scrollbar-width:thin;scrollbar-color:rgba(52,161,163,.45) transparent}
.modal-card::-webkit-scrollbar{width:6px}
.modal-card::-webkit-scrollbar-track{background:transparent}
.modal-card::-webkit-scrollbar-thumb{background:rgba(52,161,163,.45);border-radius:999px}
.modal-card::-webkit-scrollbar-thumb:hover{background:rgba(52,161,163,.7)}
#partnerModal .modal-card{width:min(560px,100%);overflow-x:hidden}
.modal.is-open .modal-card{opacity:1;transform:none}
.modal-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  font-size:22px;line-height:1;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.modal-x:hover{color:var(--ink);border-color:var(--ink-3)}
.modal-title{font-family:var(--display);font-weight:800;font-size:clamp(21px,3vw,26px);
  letter-spacing:-.03em;line-height:1.15;color:var(--ink);padding-right:40px}
.modal-sub{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}



/* ============================================================
   FORM
   ============================================================ */
.form{margin-top:4px}
.form-modal{margin-top:22px;display:grid;gap:14px}
.fs{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(20px,3vw,28px);box-shadow:var(--sh-1)}
.fs + .fs{margin-top:16px}
.fs-legend{display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:20px}
.fs-legend i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);
  background:var(--mint-soft);border-radius:var(--r-pill);padding:5px 11px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid2 + .grid2,.grid2 + .fs-inline,.fs-inline + .grid2{margin-top:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field label b{color:var(--warn);font-weight:600}
/* optional marker — smaller than the label and fading out from the label ink
   so optional fields still read as secondary at a glance */
.field label .field-opt{
  margin-left:6px;
  font-family:var(--mono);
  font-size:11px;
  /* font-weight:500; */
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--ink-3);
}
.field input,.field select{
  width:100%;padding:13px 15px;font-size:15px;
  background:var(--surface-tint);border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.field input:focus,.field select:focus{background:var(--surface);border-color:var(--teal);box-shadow:none;outline:none}
.field input[aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 3px rgba(194,69,60,.12)}
.hint{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3)}

.fs-inline{border:0;margin-top:16px}
.fs-inline legend{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:10px;padding:0}
.fs-inline legend b{color:var(--warn);font-weight:600}
.choices{display:flex;flex-wrap:wrap;gap:9px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:14.5px;color:var(--ink-2);
  background:var(--surface-tint);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:10px 18px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.choice span::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-2);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.choice:hover span{border-color:var(--teal-light)}
.choice input:checked + span{color:var(--teal-deep);font-weight:600;
  background:var(--mint-soft);border-color:rgba(52,161,163,.35)}
.choice input:checked + span::before{border-color:var(--teal-deep);
  box-shadow:inset 0 0 0 3.5px var(--mint-soft),inset 0 0 0 9px var(--teal-deep)}
.choice input:focus-visible + span{outline:2px solid var(--teal);outline-offset:3px}

.qblock + .qblock{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.is-conditional{margin-top:16px}
.notice{margin-top:18px;background:var(--bg-2);border-left:3px solid var(--teal-light);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.form-foot{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.form-alt{font-size:14px;color:var(--ink-2)}
.form-alt a{color:var(--teal-deep);font-weight:600}
.form-status{margin-top:14px;font-size:14px;line-height:1.55;color:var(--teal-deep)}
.form-status a{text-decoration:underline}
.form-status.is-error{color:var(--warn)}
.form-status:empty{display:none}

/* ============================================================
   STICKY ENROL BAR
   ============================================================ */
.enrol{position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -18px rgba(0,0,0,.28);
  transform:translateY(110%);transition:transform .4s var(--ease)}
.enrol.is-up{transform:none}
.enrol-inner{max-width:var(--max);margin:0 auto;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:16px}
.enrol-prices{display:flex;align-items:center;gap:20px;min-width:0;flex:1 1 auto}
.enrol-price{display:flex;align-items:baseline;gap:7px;white-space:nowrap;min-width:0}
.enrol-amt{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink);flex:none}
.enrol-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right cluster: both CTAs + dismiss stay together as one group pinned right,
   so no loose gap opens up between "Start a free trial" and the ×. */
.enrol-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.enrol-actions .btn{white-space:nowrap}
.enrol-x{width:32px;height:32px;border-radius:50%;flex:none;margin-left:2px;
  border:1px solid transparent;background:transparent;color:var(--ink-3);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.enrol-x:hover{color:var(--ink);border-color:var(--line);background:var(--surface)}
/* The footer reserves clearance for the fixed bar — release it once the
   bar is dismissed so no empty strip is left behind. */
body.enrol-off .footer{padding-bottom:0}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--surface);border-top:1px solid var(--line);padding-bottom:70px}
.footer-top{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 32px;
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand .brand{margin-bottom:12px}
.footer-line{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.footer-h{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin-bottom:13px}
.footer-col a{display:block;font-size:14px;color:var(--ink-2);padding:4px 0;
  transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--teal-deep)}
.footer-base{max-width:var(--max);margin:0 auto;padding:18px var(--pad);
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px 24px;font-size:12.5px;color:var(--ink-3)}
.footer-base i{font-style:normal;opacity:.5;margin:0 7px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  :root{--label-w:220px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  
}

@media(max-width:980px){
  .nav-links{display:none}
  .hamburger{display:flex}
  /* Auto-hide chrome while reading: scroll down parks the header stack
     and the bottom bar off-screen; scroll up brings them back. */
  .nav,.subbar{transition:transform .35s var(--ease),box-shadow var(--dur) var(--ease)}
  body.head-hidden .nav{transform:translateY(-101%)}
  body.head-hidden .subbar{transform:translateY(calc(-100% - var(--nav-h)))}
  body.head-hidden .enrol.is-up{transform:translateY(110%)}
  .mobile-panel{display:block;max-height:0;overflow:hidden;padding:0 var(--pad);
    transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease);opacity:0}
  .nav.menu-open .mobile-panel{max-height:75vh;opacity:1;overflow-y:auto;padding-bottom:12px}
  .mp-inner{max-width:var(--max);margin:12px auto 0;padding:14px;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
    display:grid;gap:2px}
  .mp-inner a,.mp-sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 15px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--ink-2);
    background:none;border:0;cursor:pointer;width:100%;text-align:left}
  .mp-inner a:hover,.mp-sub-toggle:hover{background:rgba(52,161,163,.07);color:var(--teal-deep)}
  .mp-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);padding-left:12px}
  .mp-sub-toggle[aria-expanded="true"] + .mp-sub{max-height:200px}
  .mp-sub a{font-size:14px;color:var(--ink-3)}
  
  

  .sec-grid{grid-template-columns:1fr;gap:26px}
  .sec-label{position:static}
  .trust-inner{grid-template-columns:repeat(2,1fr);gap:20px}
  .journey{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .journey::before{display:none}
  .jstep{padding:70px 18px 18px;min-height:0}
  .jstep::before{top:18px;left:18px}
  .jstep .jstep-ico{top:16px}
  .people{grid-template-columns:1fr}
  .band-top{grid-template-columns:1fr;align-items:start}
}

@media(max-width:820px){
  .dash-summary{grid-template-columns:1fr}
  .dash-foot{grid-template-columns:1fr;gap:20px}
  
  .facts{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  
}

@media(max-width:860px){
  .enrol-inner{gap:14px}
  .enrol-prices{gap:14px}
  .enrol-actions{gap:8px}
}

@media(max-width:720px){
  body{font-size:16px}
  :root{--sub-h:50px}
  
  
  .why-lead{grid-column:span 1}
  .cards{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  
  .enrol-inner{gap:12px}
  .enrol-prices{gap:12px}
  .enrol-amt{font-size:17px}
  .enrol-lbl{font-size:9.5px}
  .enrol .btn{padding:12px 18px;font-size:14px}
  .enrol-x{width:28px;height:28px;font-size:16px}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px}
  .footer-brand{grid-column:span 2}
}

/* ----- Tables become stacked cards: same data, no horizontal scroll ----- */
@media(max-width:640px){
  .table-scroll{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  table{min-width:0}

  
  
  
  
  
  
  
  
  
  
  
  

  .struct,.struct tbody,.struct tfoot,.struct tr,.struct th,.struct td{display:block;width:auto}
  .struct thead{display:none}
  .struct tbody tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:16px 18px;margin-bottom:10px;box-shadow:var(--sh-1)}
  .struct tbody tr:last-child{margin-bottom:0}
  .struct tbody th{padding:0 0 6px;border:0;white-space:normal;
    font-family:var(--display);font-weight:700;font-size:15px}
  .struct tbody td{padding:0;border:0}
  .struct tbody td.num{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--line);text-align:left}
  .struct tbody td.num::before{content:"Questions";font-family:var(--mono);font-size:10px;
    font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
  .struct tfoot tr{display:flex;justify-content:space-between;align-items:center;gap:14px;
    background:var(--surface-tint);border:1px solid var(--line);border-radius:var(--r-md);
    padding:14px 18px}
  .struct tfoot th{border:0;padding:0}
  .struct tfoot td{border:0;padding:0}
  .struct tfoot td:empty{display:none}
  .struct tfoot .num{text-align:right}

  
  .enrol-actions .btn-ghost{display:none}
}

@media(max-width:480px){
  .map-row{grid-template-columns:58px repeat(8,1fr);gap:4px}
  .journey{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .enrol-inner{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:8px}
  .enrol-price:nth-child(3){display:none}
  .enrol-amt{font-size:16px}
  .enrol-lbl{font-size:9px}
  .enrol .btn-primary{padding:11px 14px;font-size:13px}
  .bars{grid-template-columns:1fr 1fr;gap:10px}
  .eq-box span{font-size:8px}
  .footer-top{grid-template-columns:1fr}
  .footer-brand{grid-column:span 1}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1;transform:none}
  .enrol{transform:none}
  body.head-hidden .nav,body.head-hidden .subbar,body.head-hidden .enrol.is-up{transform:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .nav, .subbar, .enrol, .modal, .partner{display:none!important}
  body{background:#fff;font-size:12pt}
  .sec-grid{grid-template-columns:1fr}
  .band{background:#fff;color:#000}
  html.js .reveal{opacity:1;transform:none}
}

/* ============================================================
   V6 HERO REMIX — background language from v5, subject chips
   and pillar treatment from v4. Everything else (tokens, type,
   layout, sections) is untouched v2.
   ============================================================ */

/* ---- icon sprite (decorative, never rendered) ---- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---- v5 background atmosphere, scoped to the v6 hero ---- */
.hero-v6{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 55%,var(--bg) 100%)}
.hero-v6::before{content:none}
.hero-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-v6 .wrap{position:relative;z-index:1}
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.55}
.orb-a{width:520px;height:520px;left:-160px;top:-140px;
  background:radial-gradient(closest-side,rgba(67,196,181,.35),transparent 70%);
  animation:orbDrift 14s ease-in-out infinite}
.orb-b{width:620px;height:620px;right:-200px;top:6%;
  background:radial-gradient(closest-side,rgba(52,161,163,.28),transparent 70%);
  animation:orbDrift 18s ease-in-out infinite reverse}
.orb-c{width:420px;height:420px;left:38%;bottom:-220px;
  background:radial-gradient(closest-side,rgba(67,196,181,.5),transparent 70%);
  animation:orbDrift 16s ease-in-out infinite}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.06)}}
.hero-grid-tex{position:absolute;inset:0;
  background-image:radial-gradient(rgba(11,63,70,.16) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 20%,#000 30%,transparent 75%);
          mask-image:radial-gradient(70% 60% at 30% 20%,#000 30%,transparent 75%);
  opacity:.5}
.hero-stars{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero-eq{position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:rgba(11,63,70,.22);animation:floatY 11s ease-in-out infinite}
.eq-1{left:4%;top:16%}.eq-2{left:44%;top:8%;animation-delay:-3s}
.eq-3{right:6%;top:22%;animation-delay:-5s}.eq-4{left:8%;bottom:14%;animation-delay:-2s}
.eq-5{right:38%;bottom:8%;animation-delay:-7s}
.hero-dna{position:absolute;left:1.5%;top:22%;width:64px;height:190px;
  color:rgba(52,161,163,.35);animation:floatY 12s ease-in-out infinite}
.hero-mol{position:absolute;right:2%;bottom:10%;width:150px;
  color:rgba(52,161,163,.3);animation:floatY 10s ease-in-out infinite reverse}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- v4 headline underline, drawn once on reveal ---- */
.hero-v6 .hero-h1{position:relative}
.hero-v6 .hero-h1 em{position:relative;display:inline-block}
.hero-v6 .hero-h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  border-radius:2px;background:var(--grad-mint);opacity:.34;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s .5s var(--ease)}
html.js .hero-v6 .hero-h1.in em::after{transform:scaleX(1)}

/* ---- v4 subject rail: icon per chip, art slides in on hover ---- */
.subjects{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin-top:24px}
.subj{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;
  color:var(--teal-deep);background:rgba(255,255,255,.82);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  /* hover space is reserved up front, so the reveal never changes the
     chip width and never pushes siblings onto a new line */
  padding:7px 34px 7px 11px;box-shadow:var(--sh-1);overflow:hidden;cursor:default;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .4s var(--ease),background .4s var(--ease)}
.subj-ico{width:16px;height:16px;flex:none;color:var(--teal);
  transition:transform .45s var(--ease),color .45s var(--ease)}
.subj span{position:relative;z-index:1}
.subj-art{position:absolute;right:5px;top:50%;width:30px;height:30px;
  color:var(--teal);opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(8px) scale(.85) rotate(-12deg);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.subj:hover{transform:translateY(-2px);border-color:rgba(52,161,163,.4);
  background:rgba(255,255,255,.96);box-shadow:var(--sh-2)}
.subj:hover .subj-ico{transform:scale(1.12) rotate(-8deg);color:var(--teal-deep)}
.subj:hover .subj-art{opacity:.25;transform:translateY(-50%) translateX(0) scale(1) rotate(0)}

/* ---- right column: v4 pillar treatment with watermark glyphs ---- */








/* ---- v4 trust-strip icons (v12 original, restored) ---- */
.tstat{position:relative;padding-left:40px}
.tstat-ico{position:absolute;left:0;top:1px;width:26px;height:26px;color:var(--teal);
  opacity:.5;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.tstat-ico svg{width:100%;height:100%}
.tstat:hover .tstat-ico{transform:translateY(-2px) scale(1.1);opacity:.85}
.tstat-val{font-variant-numeric:tabular-nums}

/* ---- section 02 pricing atmosphere (from v4): blurred glow,
   grid substrate + bottom-left line-art icon. Content untouched. ---- */
.sec-pricing{position:relative;overflow:clip;
  --ease-soft:cubic-bezier(.4,.14,.3,1);
  --deco:1;--sci-ink:rgba(11,63,70,.16)}
.sec-pricing > .wrap{position:relative;z-index:1}
/* Pricing heading uses the exact same size as "Why medtrainit IMAT" (.sec-title) */
.sec-pricing .sec-title{font-size:clamp(26px,2.9vw,36px);line-height:1.1;letter-spacing:-.03em}
.atmos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:var(--deco)}
.aur{position:absolute;border-radius:50%;filter:blur(58px);opacity:.5}
.aur-5{width:38vw;height:38vw;max-width:520px;max-height:520px;bottom:-18%;right:-10%;
  background:radial-gradient(closest-side,rgba(52,161,163,.22),transparent 70%);
  animation:drift-a 28s var(--ease-soft) infinite alternate}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}
                   to{transform:translate3d(-4%,5%,0) scale(1.1)}}
.tex{position:absolute;inset:0}
.tex-dot{
  background-image:radial-gradient(rgba(11,63,70,.16) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(72% 62% at 50% 40%,#000,transparent 78%)}
.tex-grid{
  background-image:linear-gradient(rgba(11,63,70,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,63,70,.11) 1px,transparent 1px);
  background-size:84px 84px;opacity:.65;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 30%,#000,transparent 80%);
          mask-image:radial-gradient(80% 70% at 30% 30%,#000,transparent 80%)}
.sci{position:absolute;color:var(--sci-ink);opacity:.9}
.sci-e{width:clamp(150px,17vw,210px);bottom:6%;left:-4%;transform:rotate(11deg)}
.sci-f{width:clamp(160px,18vw,220px);top:-8%;right:6%;transform:rotate(-14deg)}
.sci-g{width:clamp(180px,20vw,250px);bottom:-6%;left:-5%;transform:rotate(7deg)}
.sci-i{width:clamp(140px,15vw,190px);bottom:8%;left:-4%;transform:rotate(12deg)}
.sci-l{width:clamp(180px,20vw,250px);top:6%;left:-5%;transform:rotate(-10deg)}
.aur-4{width:34vw;height:34vw;max-width:460px;max-height:460px;top:-14%;left:-8%;
  background:radial-gradient(closest-side,rgba(67,196,181,.24),transparent 70%);
  animation:drift-b 30s var(--ease-soft, ease) infinite alternate}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.06)}
                   to{transform:translate3d(6%,-4%,0) scale(.96)}}

/* ---- announcement ribbon: single line, scrolls only on overflow ---- */








@keyframes ribbonScroll{to{transform:translateX(-50%)}}

/* ---- section 06 exam structure table (from v4): deeper wrapper
   shadow + row hover highlight. Content untouched. ---- */
.sec-exam .table-scroll{position:relative;box-shadow:var(--sh-2)}
.sec-exam .struct tbody tr{transition:background .3s var(--ease)}
.sec-exam .struct tbody tr:hover{background:var(--surface-tint)}

/* ---- section 06 exam (from v4): dot substrate + bottom-left flask.
   Content untouched. ---- */
.sec-exam{position:relative;overflow:clip;
  --sci-ink:rgba(11,63,70,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(245,248,248,.4))}
.sec-exam > .wrap{position:relative;z-index:1}

/* ---- section 07 gap band (from v4): glow + grid + top-left target
   only (right sigma omitted per request). Content untouched. ---- */
.band-gap{--ease-soft:cubic-bezier(.4,.14,.3,1);--sci-ink:rgba(11,63,70,.16)}
.band-gap > .wrap{position:relative;z-index:1}
.band-gap .btn-mint{background:#fff;color:var(--teal-deep);box-shadow:var(--sh-3)}
.band-gap .btn-mint:hover{background:var(--mint-soft);color:var(--teal-deep);
  transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(11,63,70,.55)}
.tex-tech{
  background-image:linear-gradient(rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(rgba(67,196,181,.16) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,120px 40px;opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,transparent);
          mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 60%,transparent)}

/* ---- section 05 dashboard (from v4): technical grid, soft glow +
   bottom-left chart line art. Content untouched. ---- */
.sec-dash{position:relative;overflow:clip;
  --sci-ink:rgba(11,63,70,.16);
  background:linear-gradient(180deg,var(--bg-2) 0%,#FFFFFF 46%,var(--bg-2) 100%)}
.sec-dash > .wrap{position:relative;z-index:1}

/* ---- section 03 journey (from v4): grid substrate, top-right line
   art, gradient timeline + glyph per stage. Content untouched. ---- */
.sec-journey{position:relative;overflow:clip;
  --sci-ink:rgba(11,63,70,.16)}
.sec-journey > .wrap{position:relative;z-index:1}
.sec-journey .journey::before{display:none}
.sec-journey .jstep{position:relative}
.jstep-ico{position:absolute;top:14px;right:14px;width:48px;height:48px;padding:11px;
  display:block;color:#fff;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);border-radius:15px;opacity:1;pointer-events:none;
  box-shadow:none;
  transition:transform .45s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.jstep-ico svg{width:100%;height:100%}
.jstep:hover .jstep-ico{transform:translateY(-3px) scale(1.06);background:var(--mint);color:var(--teal-deep)}

/* ---- section 01 right-end line art (from v4) ---- */
.sec-why{overflow:clip}
.sec-why > .wrap{position:relative;z-index:1}
.why-side-ico{position:absolute;top:4%;right:-48px;z-index:0;
  width:clamp(170px,19vw,240px);height:auto;
  color:rgba(11,63,70,.16);pointer-events:none;
  transform:rotate(-8deg);animation:floatY 13s ease-in-out infinite}
.why-side-ico svg,.why-side-ico use{width:100%;height:100%}

/* ---- section 01: infinite why slider (single row, gentle loop) ---- */
.why-marquee{overflow:hidden;padding:14px 0 38px;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.why-track{display:flex;gap:14px;width:max-content;align-items:stretch;
  transition:transform .55s var(--ease);will-change:transform;cursor:grab;
  -webkit-user-select:none;user-select:none}
.why-track.is-drag{transition:none;cursor:grabbing}
/* at the start position the left fade drops away; at the end the right fade does */
.why-marquee.at-start{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,#000 0%,#000 96%,transparent)}
.why-marquee.at-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 100%)}
.why-marquee.at-start.at-end{-webkit-mask-image:none;mask-image:none}
.why-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:4px}
.why-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--teal-deep);font-size:19px;line-height:1;
  cursor:pointer;box-shadow:var(--sh-1);display:grid;place-items:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.why-arrow:hover:not(:disabled){border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-2)}
.why-arrow:disabled{opacity:.35;cursor:default}
/* grid items must be allowed to shrink, or the max-content track
   forces the whole column wider than the viewport on small screens */
.sec-grid > *{min-width:0}
/* no edge fade on tablet and below (~900px and under) */
@media(max-width:980px){
  .why-marquee{-webkit-mask-image:none;mask-image:none}
  /* full-bleed slider: cancel the wrap padding on both sides */
  .sec-why .sec-body{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .page-drops{width:22vw}
}
@media(max-width:560px){
  .sec-why .sec-note{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere;max-width:100%}
}
.why-track .why{flex:0 0 272px;min-height:260px;margin:0;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease),background .45s var(--ease)}
.why-track .why-lead{grid-column:auto}
/* uniform base: the lead card drops its gradient … */
.why-track .why-lead{background:var(--surface);border-color:var(--line);
  box-shadow:var(--sh-1);color:inherit}
.why-track .why-lead:hover{box-shadow:0 14px 30px -12px rgba(11,63,70,.35),0 30px 60px -24px rgba(0,0,0,.18)}

.why-track .why-lead .why-title{color:var(--ink);font-size:17px}
.why-track .why-lead .why-text{color:var(--ink-2);font-size:14.5px}
.why-track .why-title, .why-track .why-text{transition:color .35s var(--ease)}
/* … hovered cards stay white — only the border takes the accent,
   with a deeper shadow so the lift reads clearly */
.why-track .why:hover{background:var(--surface);border-color:var(--teal);
  box-shadow:0 14px 30px -12px rgba(11,63,70,.35),0 30px 60px -24px rgba(0,0,0,.18)}

.why-track .why:hover .why-title{color:var(--ink)}
.why-track .why:hover .why-text{color:var(--ink-2)}
/* ghost watermark icon, top-right */
.why-ico{position:absolute;top:10px;right:10px;width:74px;height:74px;margin:0;
  color:var(--teal);opacity:.1;pointer-events:none;
  transition:transform .5s var(--ease),opacity .5s var(--ease),color .35s var(--ease)}
.why-ico svg{width:100%;height:100%}
.why-track .why:hover .why-ico{transform:scale(1.15) rotate(-8deg);opacity:.28}
.why-lead .why-ico{background:none;color:var(--teal)}

/* ---- section 06 exam cards (adapted from sample/code.html):
   white tactile cards; marking rows are full-width tinted mono rows.
   Wording unchanged. ---- */
.exam-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.exam-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px;box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.exam-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(52,161,163,.28)}
.mark-rows{display:grid;gap:8px;margin-top:14px}
.mark-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:12.5px;line-height:1.5;
  border-radius:10px;padding:10px 14px;margin:0}
.mark-row b{font-weight:700;white-space:nowrap}
.mark-row.plus{background:var(--mint-soft);color:var(--teal-deep)}
.mark-row.minus{background:var(--warn-soft);color:var(--warn)}
.mark-row.zero{background:var(--bg-2);color:var(--ink-2)}
.exam-card .bullets{margin-top:14px}
@media(max-width:820px){
  .exam-cards{grid-template-columns:1fr}
}

/* ---- page-wide bubble fields (echo the hero motes, CSS-only) ---- */
.bubbles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bubble{position:absolute;left:var(--x);bottom:-14px;width:var(--s);height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(67,196,181,.5),rgba(52,161,163,.18) 70%);
  opacity:0;animation:bubbleRise var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes bubbleRise{
  0%{transform:translateY(0) scale(.75);opacity:0}
  12%{opacity:var(--o)}
  85%{opacity:var(--o)}
  100%{transform:translateY(-46vh) scale(1.05);opacity:0}}
.trust{position:relative}
.trust-inner{position:relative;z-index:1}
.partner .bubble{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(255,255,255,.12) 70%)}
@media(prefers-reduced-motion:reduce){
  .bubbles{display:none}
}
@media print{
  .bubbles{display:none!important}
}

/* ---- page ambient: fixed light/dark theme wash, left droplets,
   right orbital rings. Sits behind everything, never intercepts. ---- */
.page-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.page-wash{position:absolute;inset:0;
  background:
    radial-gradient(42% 30% at 8% 6%,rgba(67,196,181,.14),transparent 65%),
    radial-gradient(36% 28% at 92% 18%,rgba(11,63,70,.12),transparent 65%),
    radial-gradient(30% 26% at 12% 42%,rgba(11,63,70,.10),transparent 65%),
    radial-gradient(40% 30% at 88% 55%,rgba(67,196,181,.12),transparent 65%),
    radial-gradient(34% 30% at 8% 74%,rgba(52,161,163,.12),transparent 65%),
    radial-gradient(44% 32% at 90% 88%,rgba(11,63,70,.14),transparent 65%),
    radial-gradient(30% 24% at 45% 96%,rgba(67,196,181,.10),transparent 65%)}
.page-drops{position:absolute;top:0;bottom:0;left:0;width:14vw;overflow:hidden}
.pdrop{position:absolute;bottom:-26px;left:var(--x);width:var(--s);height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(67,196,181,.55),rgba(52,161,163,.20) 70%);
  opacity:0;animation:pdropRise var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes pdropRise{
  0%{transform:translateY(0) scale(.7);opacity:0}
  12%{opacity:var(--o)}
  85%{opacity:var(--o)}
  100%{transform:translateY(-108vh) scale(1.05);opacity:0}}
/* ---- hero orbital rings: cropped by the hero edge, multi-motion ---- */
.hero-rings{position:absolute;top:50%;right:-130px;width:min(30vw,380px);height:auto;
  transform:translateY(-50%);color:rgba(52,161,163,.30);pointer-events:none}
.rg-spin-a,.rg-spin-b,.rg-spin-c{transform-box:fill-box;transform-origin:center}
.rg-spin-a{animation:rgSpin 80s linear infinite}
.rg-spin-b{animation:rgSpinRev 60s linear infinite}
.rg-spin-c{animation:rgSpin 50s linear infinite}
@keyframes rgSpin{to{transform:rotate(360deg)}}
@keyframes rgSpinRev{to{transform:rotate(-360deg)}}
.rg-pulse{transform-box:fill-box;transform-origin:center;
  animation:rgPulse 3s ease-in-out infinite}
@keyframes rgPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
  .page-ambient{display:none}
}
@media print{
  .page-ambient{display:none!important}
}

/* ---- v6 hero responsive + motion guards ---- */

@media(max-width:720px){
  .hero-eq,.hero-dna,.hero-mol,.hero-rings{display:none}
  
  .why-side-ico{display:none}
  .sec-note{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
  .why-track .why{flex-basis:244px;min-height:240px}
}
@media(prefers-reduced-motion:reduce){
  .orb,.hero-eq,.hero-dna,.hero-mol{animation:none!important}
  .hero-stars{display:none}
}
@media print{
  .hero-atmos,.sprite{display:none!important}
}

/* ============================================================
   V7 SPECTRUM — every section owns a teal shade. Content and
   decoration layers are untouched; only grounds change.
   Rhythm: light → tint → white → tint → white → saturated →
   white → DEEP → tint → white → tint → deep.
   ============================================================ */
.sec + .sec{border-top:1px solid rgba(52,161,163,.18)}

/* trust strip: solid highlight band */
.trust{background:var(--teal-100);border-top:1px solid rgba(52,161,163,.22);border-bottom:1px solid rgba(52,161,163,.22)}

/* 01 why: palest wash */
.sec-why{background:linear-gradient(180deg,var(--teal-50),rgba(239,249,247,0) 130%)}

/* 02 pricing: clean white so the cards pop */
.sec-pricing{background:var(--surface)}

/* 03 journey: light tint */
.sec-journey{background:linear-gradient(180deg,var(--teal-100) 0%,rgba(214,245,238,.45) 100%)}

/* 04 compare: clean white for table legibility */
#compare{background:var(--surface)}

/* 05 dashboard: saturated performance ground */
.sec-dash{background:linear-gradient(180deg,var(--teal-100) 0%,var(--teal-200) 130%)}

/* 06 exam: clean white for tables and long reading */
.sec-exam{background:var(--surface)}

/* 08 faculty: palest wash */
#faculty{background:linear-gradient(180deg,var(--teal-50),rgba(239,249,247,0) 130%)}

/* 09 faq: calm white for long reading */
#faq{background:var(--surface)}

/* 10 register: palest wash into the finale */
#register{background:var(--teal-50)}

/* ============================================================
   V7 SCORE BAND — deep teal moment. Cards stay white with ink
   text (they pop on the dark ground); surrounding copy goes
   white; faint decoration is relit for dark ground.
   ============================================================ */
.band{background:linear-gradient(160deg,#0B3F46 0%,var(--teal-800) 55%,var(--teal-600) 135%);
  color:#fff;border-block:1px solid rgba(255,255,255,.14)}
.band::before{background:radial-gradient(44% 44% at 86% 2%,rgba(67,196,181,.28),transparent 62%)}
.band .kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  color:#fff;box-shadow:none}
.band-title{color:#fff}
.band-title em{color:var(--mint)}
.band-lede{color:rgba(255,255,255,.78)}
.gap-tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20);box-shadow:none}
.gap-lbl,.gap-sub{color:rgba(255,255,255,.62)}
.gap-val{color:var(--mint)}
.band-callout{background:var(--grad-mint);color:var(--teal-800);box-shadow:var(--sh-3)}
.band-cta-note{color:rgba(255,255,255,.62)}
.band-gap{--sci-ink:rgba(67,196,181,.24)}
.band-gap .tex-grid{
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}

/* ============================================================
   06 + 07 RHYTHM — squeeze the exam section, fit the score
   band to one viewport (desktop). min-height (never fixed
   height) so content always grows instead of clipping.
   ============================================================ */
/* 06: tighter section padding + block rhythm */
#imat{padding:clamp(36px,4vw,52px) 0}
#imat .sec-body > * + *{margin-top:14px}
#imat .facts{gap:8px}
#imat .exam-cards{gap:12px}

/* 07: fill the viewport, vertically centred */
#score{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(36px,5vh,60px) 0}
#score > .wrap{width:100%}
#score .band-title{font-size:clamp(24px,2.6vw,34px);margin-top:12px}
#score .band-top{margin-top:14px;gap:20px}
#score .gap-tag{padding:10px 18px;min-width:150px;margin-top:-10px}
#score .gap-val{font-size:34px;margin:2px 0}
#score .cards{margin-top:20px;gap:12px}
#score .scard{padding:18px}
#score .scard-head{margin-bottom:12px}
#score .scard-fig{font-size:34px;margin-bottom:8px}
#score .xgrid{padding-top:14px}
#score .eq{padding-top:14px}
#score .bars{padding-top:14px}
#score .bar-track{height:84px}
#score .scale{margin-top:18px}
#score .unis{margin-top:10px}
#score .scard-note{margin-top:8px}
#score .band-callout{margin-top:18px;padding:12px 24px;color:#fff}
#score .band-cta{margin-top:18px}

/* print: deep band must return to black-on-white */
@media print{
  .band{background:#fff!important;color:#000!important}
  .band-title,.band-lede,.gap-val,.gap-lbl,.gap-sub,.band-cta-note{color:#000!important}
  .band-title em{color:#000!important}
  .band .kicker{background:none!important;color:#000!important;border-color:#000!important}
  .band-callout{background:none!important;color:#000!important;box-shadow:none!important}
  .trust{background:#fff!important}
  .trust .tstat-val,.trust .tstat-lbl{color:#000!important}
  .sec-dash{background:#fff!important}
  .sec-dash .sec-title,.sec-dash .sec-note,.sec-dash .dash-after,.sec-dash .dash-disclaimer{color:#000!important}
  .sec-dash .sec-title em{color:#000!important}
  .sec-dash .kicker{background:none!important;color:#000!important;border-color:#000!important}
}

/* ============================================================
   V7 BOLD PASS — unmissable section rhythm, still 100% teal.
   Lessons from the edusetin reference (structure only, never
   its identity): saturated stat band, dark product showcase,
   solid tinted bands, a visible marker on every section.
   ============================================================ */

/* 3px gradient rhythm bar across the top of every section */
.sec::after{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--grad-mint);z-index:2;pointer-events:none}

/* trust strip: saturated gradient band, white ink */
.trust{background:var(--grad-cta);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.trust .tstat-val{color:#fff}
.trust .tstat-lbl{color:rgba(255,255,255,.82)}
.trust .tstat-ico{color:rgba(255,255,255,.8)}

/* solid tinted bands — no more whisper washes */
.sec-why{background:linear-gradient(180deg,var(--teal-100),var(--teal-50))}
.sec-journey{background:var(--teal-100)}
#faculty{background:var(--teal-100)}
#register{background:linear-gradient(180deg,var(--teal-100),var(--teal-50))}

/* dashboard: deep teal product showcase. The light dashboard card
   is untouched — only the surrounding copy is relit. */
.sec-dash{background:linear-gradient(165deg,#0B3F46 0%,var(--teal-800) 60%,var(--teal-600) 135%)}
.sec-dash .kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  color:#fff;box-shadow:none}
.sec-dash .sec-title{color:#fff}
.sec-dash .sec-title em{background:linear-gradient(120deg,var(--teal-200),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-dash .sec-note{color:rgba(255,255,255,.75)}
.sec-dash .dash-after{color:rgba(255,255,255,.8)}
.sec-dash .dash-disclaimer{color:rgba(255,255,255,.55)}
.sec-dash{--sci-ink:rgba(67,196,181,.24)}
.sec-dash .tex-tech{
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
                   linear-gradient(rgba(67,196,181,.20) 1px,transparent 1px)}

/* ============================================================
   V8 DARK-TO-LIGHT — the page descends through teal shades:
   deep lab hero → teal trust → vivid why → airy mid tints →
   white reading sections → glowing mid score → light mint finale.
   Content and layout untouched; ink recalibrated per ground.
   ============================================================ */

/* ---- STEP 1 · hero: deepest lab ---- */
.hero-v6{background:linear-gradient(165deg,#0B3F46 0%,var(--teal-800) 60%,var(--teal-600) 130%)}
.hero-v6 .kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  color:#fff;box-shadow:none}
.hero-v6 .hero-h1{color:#fff}
.hero-v6 .hero-h1 em{background:linear-gradient(115deg,var(--teal-200),var(--mint) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-v6 .hero-lede{color:rgba(255,255,255,.8)}



.hero-v6 .subj{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}
.hero-v6 .subj-ico{color:var(--mint)}
.hero-v6 .subj-art{color:var(--mint)}
.hero-v6 .subj:hover{background:rgba(255,255,255,.13);border-color:rgba(67,196,181,.6)}
.hero-v6 .subj:hover .subj-ico{color:#fff}


.hero-v6 .hero-grid-tex{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px)}
.hero-v6 .hero-eq{color:rgba(255,255,255,.35)}
.hero-v6 .hero-dna{color:rgba(67,196,181,.4)}
.hero-v6 .hero-mol{color:rgba(67,196,181,.35)}
.hero-v6 .hero-rings{color:rgba(67,196,181,.4)}

#top .bubble{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(67,196,181,.16) 70%)}
#top .pdrop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(67,196,181,.18) 70%)}

/* ---- STEP 2 · trust: solid deep teal ---- */
.trust{background:var(--teal-600);border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}

/* ---- STEP 3 · why: vivid teal, white label, cards tinted to belong ---- */
.sec-why{background:
  radial-gradient(50% 45% at 12% 0%,rgba(67,196,181,.35),transparent 65%),
  linear-gradient(165deg,var(--teal-600) 0%,var(--teal-500) 70%,var(--teal-400) 140%)}
.sec-why .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);
  color:#fff;box-shadow:none}
.sec-why .sec-title{color:#fff}
.sec-why .sec-title em{background:linear-gradient(115deg,var(--teal-200),var(--mint) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-why .sec-note{color:rgba(255,255,255,.78)}
#why .why-side-ico{color:rgba(255,255,255,.22)}
/* cards pick up a whisper of the ground tint so they sit in it,
   blooming to pure white on hover */
.sec-why .why{background:#FFFFFF;border-color:rgba(255,255,255,.55)}
.sec-why .why-ico{opacity:.16}
.sec-why .why:hover .why-ico{opacity:.3}

/* ---- STEP 4 · pricing: airy mid tint, ink reading ---- */
.sec-pricing{background:linear-gradient(180deg,var(--teal-200),var(--teal-100) 120%)}

/* ---- STEP 5 · journey: soft tint ---- */
.sec-journey{background:var(--teal-100)}

/* ---- STEP 6 · compare + exam + faq: calm white ---- */
#compare,#faq{background:var(--surface)}

/* ---- STEP 7 · dashboard + register: palest washes ---- */
.sec-dash{background:linear-gradient(180deg,var(--teal-50),rgba(239,249,247,0) 140%)}
.sec-dash .kicker{background:rgba(255,255,255,.7);border-color:var(--line-2);
  color:var(--teal-deep);box-shadow:var(--sh-1)}
.sec-dash .sec-title{color:var(--ink)}
.sec-dash .sec-title em{background:linear-gradient(120deg,var(--teal),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-dash .sec-note{color:var(--ink-2)}
.sec-dash .dash-after{color:var(--ink-2)}
.sec-dash .dash-disclaimer{color:var(--ink-3)}
.sec-dash{--sci-ink:rgba(11,63,70,.16)}
.sec-dash .tex-tech{
  background-image:linear-gradient(rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(rgba(67,196,181,.16) 1px,transparent 1px)}
#register{background:var(--teal-50)}

/* ---- STEP 8 · score: glowing mid-teal ember (lighter than hero) ---- */
.band{background:linear-gradient(160deg,var(--teal-600) 0%,var(--teal-500) 60%,var(--teal-400) 135%)}
.band-title em{color:#fff}
.gap-val{color:#fff}
.band-cta-note{color:rgba(255,255,255,.78)}

/* ---- STEP 9 · partner finale: light mint CTA, deep ink ---- */
.partner{background:linear-gradient(135deg,var(--teal-400) 0%,var(--teal-300) 60%,var(--teal-200) 130%)}


.partner::before{background:radial-gradient(40% 70% at 88% 0%,rgba(255,255,255,.5),transparent 62%)}
.partner .btn-ghost{background:#fff;color:var(--teal-deep);border-color:#fff}
.partner .btn-ghost:hover{background:var(--teal-800);color:#fff;border-color:var(--teal-800);box-shadow:none}

/* ---- V8 sub nav: deep teal page bar (this page = IMAT) ---- */
.subbar{background:linear-gradient(135deg,var(--teal-800) 0%,var(--teal-600) 100%);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:0}
.subnav a{color:rgba(255,255,255,.78)}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.subnav a.is-active{color:var(--teal-800);background:var(--mint-soft);font-weight:600}

/* print: dark grounds return to black-on-white */
@media print{
  .hero-v6{background:#fff!important}
  .hero-v6 .hero-h1, .hero-v6 .hero-lede{color:#000!important}
  .hero-v6 .hero-h1 em{color:#000!important}
  .hero-v6 .kicker,.sec-why .kicker{background:none!important;color:#000!important;border-color:#000!important}
  .sec-why{background:#fff!important}
  .sec-why .sec-title,.sec-why .sec-note{color:#000!important}
  .sec-why .sec-title em{color:#000!important}
}

/* ============================================================
   V8 MOSAIC — hero stays deep dark; everything after it becomes
   a varied light rhythm (white ↔ light teals at mixed depths).
   Only the mid-teal score ember stays saturated as the highlight.
   ============================================================ */

/* trust: fresh light-mint band, ink figures */
.trust{background:var(--teal-100);border-top:1px solid rgba(52,161,163,.22);border-bottom:1px solid rgba(52,161,163,.22)}
.trust .tstat-val{color:var(--teal-deep)}
.trust .tstat-lbl{color:var(--ink-2)}
.trust .tstat-ico{color:var(--teal)}

/* why: palest wash, light label, white cards */
.sec-why{background:linear-gradient(180deg,var(--teal-50),rgba(239,249,247,0) 130%)}
.sec-why .kicker{background:rgba(255,255,255,.7);border-color:var(--line-2);
  color:var(--teal-deep);box-shadow:var(--sh-1)}
.sec-why .sec-title{color:var(--ink)}
.sec-why .sec-title em{background:linear-gradient(120deg,var(--teal),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-why .sec-note{color:var(--ink-2)}
.sec-why .why{background:var(--surface);border-color:var(--line)}
.sec-why .why-ico{opacity:.1}
.sec-why .why:hover .why-ico{opacity:.28}
#why .why-side-ico{color:rgba(11,63,70,.16)}

/* pricing: clean white sheet so the plan cards pop between tints */
.sec-pricing{background:var(--surface)}

/* dashboard: mid-light performance ground, ink copy — deepened a step for contrast */
.sec-dash{background:linear-gradient(180deg,#34A1A3,var(--teal-200) 130%)}
.sec-dash .kicker{background:rgba(255,255,255,.7);border-color:var(--line-2);
  color:var(--teal-deep);box-shadow:var(--sh-1)}
.sec-dash .sec-title{color:var(--ink)}
.sec-dash .sec-title em{background:linear-gradient(120deg,var(--teal),var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-dash .sec-note{color:var(--ink-2)}
.sec-dash .dash-after{color:var(--ink-2)}
.sec-dash .dash-disclaimer{color:var(--ink-3)}
.sec-dash{--sci-ink:rgba(11,63,70,.16)}
.sec-dash .tex-tech{
  background-image:linear-gradient(rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,63,70,.14) 1px,transparent 1px),
                   linear-gradient(rgba(67,196,181,.16) 1px,transparent 1px)}

/* ============================================================
   V9 LAYOUT — stacked sections. No sticky side labels: each
   section head sits on top, content flows full-width beneath.
   Content, colors and motion untouched.
   ============================================================ */
.sec-grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,30px)}
.sec-label{position:static;}

/* ============================================================
   V9 HERO REFINEMENTS — highlighted platforms label, visible
   platform icons, subject chips fitted max three per line.
   ============================================================ */
/* platforms label: highlighted pill */



/* platform cards: visible icon tile instead of faint watermark */



/* left-column CTA fills the gap under the subject chips.
   Primary carries the animated sweep (moved over from the removed
   right-side banner): gradient shift + light sheen + arrow slide. */
.hero-left-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.hero-left-note{flex-basis:100%;margin-top:2px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-3)}
.hero-left-cta .btn-primary{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,#43C4B5 0%,#34A1A3 35%,#34A1A3 60%,#0B3F46 100%);
  background-size:220% 220%;background-position:0% 50%;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-position .8s var(--ease)}
.hero-left-cta .btn-primary::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .9s var(--ease)}
.hero-left-cta .btn-primary:hover{background-position:95% 50%}
.hero-left-cta .btn-primary:hover::before{transform:translateX(120%)}
@media(prefers-reduced-motion:reduce){.hero-left-cta .btn-primary,.hero-left-cta .btn-primary::before{transition:none}}
/* subject chips: flex rows that always fill edge to edge —
   three fill the first row, the remaining two stretch full width */
.hero-copy .subjects{display:flex;flex-wrap:wrap}
.hero-copy .subj{flex:1 1 26%;justify-content:center;text-align:center}
@media(max-width:560px){
  .hero-copy .subj{flex-basis:44%}
}

/* ============================================================
   V9 HERO FIT — laptop first screen: hero + trust (5/15/2/12)
   visible without scrolling. Compact vertical rhythm on desktop
   only; mobile/tablet untouched. Short screens compress further.
   ============================================================ */
@media(min-width:1024px){
  /* fill the first screen without ever clipping: flex centers hero
     content in the leftover space after the sticky bars + trust strip.
     No max-height — if content runs taller (small zoom, large text),
     the hero grows instead of cutting text. */
  .hero{display:flex;align-items:center;
    min-height:calc(100vh - var(--nav-h) - var(--sub-h) - 118px);
    min-height:calc(100svh - var(--nav-h) - var(--sub-h) - 118px);
    padding:24px 0 22px}
  .hero .wrap{width:100%}
  .hero-grid{gap:clamp(22px,3vw,40px)}
  .hero-h1{font-size:clamp(30px,3.2vw,44px);margin-top:14px}
  .hero-lede{margin-top:12px;font-size:16.5px}
  .hero-copy .subjects{margin-top:14px;gap:7px}
  
  
  
  
  
  
  .trust-inner{padding:13px var(--pad);gap:16px}
  .tstat-val{font-size:23px}
  .tstat-lbl{margin-top:5px;font-size:12.5px;line-height:1.4}
}
/* short laptop screens (~700-800px height): hide card ticks to
   guarantee hero + trust clear the fold */
@media(min-width:1024px) and (max-height:820px){
  .hero{padding:20px 0 18px}
  .hero-left-cta{margin-top:14px}
  .hero-left-cta .btn{padding:13px 20px;font-size:14.5px}
  .hero-h1{font-size:clamp(28px,3vw,38px)}
  .hero-lede{font-size:15.5px}
  
  
  
  .trust-inner{padding:10px var(--pad)}
  .tstat-val{font-size:21px}
}

/* ============================================================
   V9 WHY CARDS — visible icon tile, highlighted title, gradient
   top bar and stronger border so each card pops on the wash.
   ============================================================ */
#why .sec-note{max-width:90ch}
.sec-why .why{background:var(--surface);border:1px solid rgba(52,161,163,.25);
  box-shadow:var(--sh-2)}
.sec-why .why::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-mint);pointer-events:none}
.sec-why .why-ico{position:static;display:grid;place-items:center;
  width:42px;height:42px;margin-bottom:14px;border-radius:13px;
  background:var(--mint-soft);border:1px solid rgba(52,161,163,.25);
  color:var(--teal-deep);opacity:1}
.sec-why .why-ico svg{width:22px;height:22px}
.sec-why .why:hover .why-ico{transform:translateY(-2px);opacity:1}
.sec-why .why-title{color:var(--teal-deep);font-size:18px}
.sec-why .why-title::after{content:"";display:block;width:34px;height:3px;
  margin-top:8px;border-radius:3px;background:var(--grad-mint)}

/* ============================================================
   V9 HERO VARIANT B — dark platform cards + price CTA banner
   ============================================================ */





























/* ============================================================
   V12 CONSULTATION — dark guidance card (per reference visual):
   deep green ground, green check bullets, contact row.
   ============================================================ */














/* ============================================================
   V12 PARTNERSHIP — full section for consultancies: benefit
   ticks beside a mint CTA panel with the enquiry dialog.
   ============================================================ */
.sec-partner{background:linear-gradient(180deg,var(--teal-50),rgba(239,249,247,0) 130%)}
.partner-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:stretch}
.partner-ticks{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--sh-1);align-content:center;justify-content:center;display:flex;flex-direction:column;gap:12px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.partner-ticks:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:rgba(52,161,163,.35)}
.partner-ticks li{padding-left:24px}
.partner-ticks li::before{content:"✓";width:auto;height:auto;background:none;box-shadow:none;
  border-radius:0;color:var(--teal-deep);font-weight:700;font-size:15px;top:1px}
.partner-ticks li::after{display:none}
.partner-ticks li strong{color:var(--ink)}
.partner-cta{display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:var(--grad-cta);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,2.8vw,30px);
  box-shadow:var(--sh-cta);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.partner-cta:hover{transform:translateY(-4px);box-shadow:0 22px 44px -14px rgba(11,63,70,.65)}
.partner-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 88% 0%,rgba(67,196,181,.35),transparent 62%)}
.partner-cta > *{position:relative;z-index:1}
.partner-cta-text{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.9)}
.partner-cta .btn-ghost{background:#fff;color:var(--teal-deep);border-color:#fff}
.partner-contact{font-size:14px;color:rgba(255,255,255,.85)}
.partner-contact i{font-style:normal;opacity:.4;margin:0 6px}
.partner-contact .link{color:#fff;border-color:rgba(255,255,255,.5)}
.partner-contact .link:hover{border-color:#fff}
@media(max-width:980px){.partner-grid{grid-template-columns:1fr}}
@media(min-width:981px) and (max-width:899px){.partner-grid{grid-template-columns:1fr}} /* ensure */ 
@media(min-width:981px){.partner-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

/* ============================================================
   V13 HERO — cyclic IMAT 2027 roadmap (per sample reference).
   Two-column hero; orbit is fluid and stacks under 1080px via
   the existing .hero-grid collapse. Vanilla CSS, brand tokens only.
   ============================================================ */
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}
.hero-copy{max-width:640px}
/* --- right column: banner + orbit --- */

/* --- right column: redesigned IMAT 2027 planner graphic (links to pricing) --- */






/* desktop: cap the square planner by viewport height so nav + subnav +
   hero + trust strip (5/15/2/12) all fit on the first screen */

/* --- planner pill: light header above the open arc (static, not a link) --- */




/* --- central callout: the plan CTA filling the middle of the arc --- */









/* --- orbit stage --- */









/* node positions: horseshoe arc opened 45° at the top for the planner pill
   (rigid +22.5° rotation of the closed-circle geometry; ring artwork
   carries the same rotation so flow arrows stay aligned) */








/* journey gradient: dark (1) → light (8), white text on dark, ink on light */





























/* ============================================================
   V13 SAMPLE-DARK CHROME — main nav, trust strip and hero take
   the stitch reference palette (#0B3F46 family). Dropdown menus
   stay light cards for readability.
   ============================================================ */
.hero-v6{background:linear-gradient(165deg,#0B3F46 0%,var(--teal-800) 60%,var(--teal-600) 130%)}
.trust{background:var(--teal-100);border-top:1px solid rgba(52,161,163,.22);border-bottom:1px solid rgba(52,161,163,.22)}
.trust .tstat-val{color:var(--teal-deep)}
.trust .tstat-lbl{color:var(--ink-2)}
.trust .tstat-ico{color:var(--teal)}

/* V13 hero stacks one-by-one below 1080px (overrides the 2-col rule above) */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero-copy{max-width:720px}
  
}

/* ============================================================
   PRICING V2 — comparison table (medtrainit-imat-pricing-v2.html)
   ============================================================ */


























/* ============================================================
   REVIEW PASS — 19 Oct 2026
   ============================================================ */

/* Accent that lost contrast when the teals collapsed to three */
.sec-title em, .hero-h1 em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#43C4B5;-webkit-text-fill-color:#43C4B5;
}
.sec-title em{color:#0B3F46;-webkit-text-fill-color:#0B3F46;font-style:normal;
  text-decoration:none;border-bottom:0}
.sec-title em::after{display:none}

/* Links: black, no underline */
a.link{color:#000;text-decoration:none;border-bottom:0}
a.link:hover{color:#0B3F46}

/* Hero: two actions sit side by side */
.hero-left-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-left-cta .hero-left-note{flex:1 1 100%;margin-top:4px}

/* ---- Planner banner: a picture that reads as an invitation ---- */







@keyframes plannerBreathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.035);opacity:.35}
}

@keyframes plannerPulse{
  0%{box-shadow:0 0 0 0 rgba(67,196,181,.5)}
  70%{box-shadow:0 0 0 26px rgba(67,196,181,0)}
  100%{box-shadow:0 0 0 0 rgba(67,196,181,0)}
}



/* ---- Plan inclusions: the access footnote ---- */
.plan-fine{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.5;
  color:rgba(0,0,0,.56);font-weight:400;
}

/* ---- Payment options ---- */








/* ---- Journey stages now carry bullet detail ---- */
.jstep-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.jstep-list li{
  position:relative;padding-left:17px;font-size:14px;line-height:1.55;
  color:rgba(0,0,0,.74);
}
.jstep-list li::before{
  content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:#34A1A3;
}
.sec-journey .jstep-list li{color:rgba(255,255,255,.80)}
.sec-journey .jstep-list li::before{background:#43C4B5}



/* figure was a row flex, so the caption sat beside the artwork */







/* Rings drawn on the link itself — they then always match the artwork */







/* Dashboard section: the product screenshot carries the colour, so the
   surround goes white. Dark heading text on mid teal was failing contrast. */
.sec-dash{background:#FFFFFF}
.sec-dash .sec-title,.sec-dash .sec-title em{color:#000}
.sec-dash .sec-note{color:rgba(0,0,0,.70)}
.sec-dash{--sci-ink:rgba(11,63,70,.10)}
.hero-left-note-bright{color:rgba(255,255,255,.80)}

/* ============================================================
   COLOUR DISTRIBUTION — 19 Oct
   Flat colour instead of gradients, and the pale mint washes
   removed, so the page reads as white with two deliberate
   blocks of deep teal (the hero and the score argument).
   ============================================================ */
#top.hero,.hero{background:#0B3F46}
#score{background:#0B3F46}
#why,.sec-why{background:#FFFFFF}
#partner,.sec-partner{background:#FFFFFF}
.sec-pricing, .sec-journey{background:#FFFFFF}
.kicker{background:#FFFFFF;border:1px solid #E3E3E3;color:#0B3F46;box-shadow:none}
.kicker::before{background:#34A1A3;box-shadow:none}
.hero .kicker{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#FFFFFF}
#score .kicker{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#FFFFFF}

/* ---- Registration: email verification, WhatsApp country code, field messages ---- */
.verify-row,.wa-row{display:flex;gap:10px;align-items:stretch}
.verify-row input,.wa-row input{flex:1;min-width:0}
.verify-row .btn{flex:none;white-space:nowrap}
.wa-row select{flex:0 0 42%;max-width:240px;min-width:0;padding:13px 10px;font-size:15px;background:var(--surface-tint);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink)}
.wa-row select:focus{background:var(--surface);border-color:var(--teal);outline:none}
.verified{font-size:14px;font-weight:600;color:var(--teal-deep)}
.field-err{font-size:13px;line-height:1.4;color:#C2453C;margin-top:-2px}
.field input[aria-invalid="true"]{border-color:#C2453C}
.otp-ov{position:fixed;inset:0;z-index:100;background:rgba(10,20,30,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.otp-box{background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:24px;width:100%;max-width:440px;box-shadow:var(--sh-3)}
.otp-ov-top{z-index:400}
/* Login link for already-enrolled students: sub-nav end and sticky bar */
.subnav a.subnav-login{margin-left:6px;border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:600}
.subnav a.subnav-login:hover{background:#fff;color:var(--teal-800)}
.enrol-login{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;
  font-size:14px;font-weight:600;line-height:1;color:var(--teal-deep);
  padding:11px 14px;border:1px solid var(--teal);border-radius:var(--r-pill)}
.enrol-login:hover{background:var(--teal);color:#fff}
.otp-box h3{margin:0 0 8px;font-size:22px}
.otp-box p{margin:0 0 12px;font-size:15px;line-height:1.5}
.otp-label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.otp-input{width:100%;padding:13px 15px;font-size:17px;letter-spacing:.12em;background:var(--surface-tint);border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:10px}
.otp-input:focus{background:var(--surface);border-color:var(--teal);outline:none}
.otp-err{color:#C2453C;font-size:14px}
.otp-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---- Registration row alignment: email + Verify and WhatsApp + country code.
   Every control in these rows shares one height and starts from the left edge. ---- */
.verify-row,.wa-row{width:100%;gap:10px;align-items:stretch}
.verify-row input,.wa-row input{flex:1 1 0;width:auto;min-width:0;height:48px;padding:0 14px;text-align:left}
.verify-row .btn{flex:0 0 auto;height:48px;padding:0 20px;font-size:15px;border-radius:var(--r-sm)}
.wa-row select{flex:0 0 38%;width:auto;min-width:0;max-width:none;height:48px;padding:0 10px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Verify/WhatsApp rows: keep the input compact and left-aligned inside the field */
.field .verify-row,.field .wa-row{width:100%;justify-content:flex-start}
.verify-row .btn{padding:13px 18px}

/* Resend code: dark, inert and no hover effect until the countdown ends */
.otp-btns .btn:disabled,.otp-btns .btn:disabled:hover{background:#555;border-color:#555;color:#ddd;cursor:not-allowed;transform:none;box-shadow:none;opacity:.85}
.otp-btns .btn:disabled:hover span{transform:none}

/* ---- Registration form: stay inside the viewport on every screen.
   <fieldset> defaults to min-width:min-content, which stretches the form past narrow screens. ---- */
#register fieldset,#register .fs,#register .fs-inline{min-width:0;max-width:100%}
#register .form,#register .form-modal,#register .field,#register .grid2>*{min-width:0;max-width:100%}
#register .field input,#register .field select{max-width:100%;min-width:0}
#partnerModal .form,#partnerModal .form-modal,#partnerModal .field{min-width:0;max-width:100%}
#partnerModal .field input,#partnerModal .field select{max-width:100%;min-width:0}
#partnerModal .wa-row{min-width:0}
@media(max-width:720px){
  #register .grid2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
  .fs{padding:18px 14px}
  .verify-row{flex-wrap:wrap}
  .verify-row input{flex:1 1 100%}
  .verify-row .btn{flex:1 1 100%;justify-content:center}
  .wa-row select{flex:0 0 40%}
  .form-foot .btn{width:100%;justify-content:center}
}

/* ™ until the UKIPO certificate lands; own metrics, not ®'s kerning */
.brand-tm{font-size:11px;margin-left:-9px;letter-spacing:0;position:relative;top:-5px}

/* Terms and privacy sit on the footer's bottom rule */
.footer-base a{color:inherit;text-decoration:underline;text-underline-offset:2px;opacity:.85}
.footer-base a:hover{opacity:1}

/* The 53/72 card is an illustration of marks lost, never a promised gain */
.scard-ill{
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.10);
  font-size:12.5px;line-height:1.55;color:rgba(0,0,0,.55);
}
.scard-out .scard-ill,.band .scard-ill{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.18)}