/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--surface-page);font:var(--type-body)/var(--neo-leading-body) var(--neo-font-latin);color:var(--text-primary);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--action-primary-hover);text-underline-offset:4px}
h1,h2,h3,p,dl,figure,ul{margin:0}
h1,h2,h3{line-height:var(--neo-leading-tight);letter-spacing:var(--neo-tracking-tight);color:var(--text-heading)}
h1{font-size:var(--type-page-title);font-weight:600;max-width:12ch}
h2{font-size:var(--type-section-title);font-weight:500}
h3{font-size:var(--type-card-title);font-weight:600;letter-spacing:-.02em}
p+p{margin-top:1rem}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:4px}
::selection{background:var(--surface-accent);color:var(--text-heading)}
.wrap{width:min(var(--neo-container-max),calc(100% - var(--neo-gutter-desktop)));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-secondary)}
[hidden]{display:none!important}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--action-primary)}
.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--surface-page);padding:12px;border:1px solid var(--border-subtle)}
.skip:focus{top:12px}

/* Arabic */
html[lang="ar"] body{font-family:var(--neo-font-arabic);line-height:1.9;font-weight:300}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.4}
html[lang="ar"] .eyebrow{letter-spacing:0}
html[lang="ar"] .num{font-family:var(--neo-font-latin)}

/* ============ CMP: header ============ */
.header{height:var(--header-height);position:sticky;top:0;background:var(--surface-page);z-index:40;border-bottom:1px solid var(--border-subtle)}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center}
.logo img{width:110px;height:auto;display:block}
.section-label{padding-inline-start:22px;border-inline-start:1px solid var(--border-subtle);font-size:14px;color:var(--text-secondary)}
.nav{display:flex;align-items:center;gap:26px;margin-inline-start:auto}
.nav a{font-size:14px;text-decoration:none;color:var(--text-primary);padding-block:25px}
.nav a.active{color:var(--action-primary);box-shadow:inset 0 -2px var(--action-primary)}
/* The language link is an Arabic word, so it is set in the Arabic face. Its box
   matches the theme control beside it: 38px, 4px radius, hairline border.
   Alexandria runs optically larger, so it is set a step down to sit level. */
.language{border:var(--neo-border-hair) solid var(--border-subtle);background:var(--surface-page);
  color:var(--text-heading);font-family:var(--neo-font-arabic);font-size:13px;line-height:1;
  padding:0 12px;border-radius:var(--neo-radius-sm);height:38px;min-height:0;text-decoration:none;
  display:inline-flex;align-items:center;transition:.16s}
.language:hover{border-color:var(--action-primary);color:var(--action-primary);
  background:var(--surface-accent)}
.menu-toggle{display:none}

/* ============ CMP: page-nav ============ */
.page-nav{position:sticky;top:var(--header-height);z-index:30;background:var(--surface-page);border-block:1px solid var(--border-subtle)}
.page-nav .wrap{display:flex;gap:32px;overflow:auto;scrollbar-width:none}
.page-nav .wrap::-webkit-scrollbar{display:none}
.page-nav a{padding-block:17px;font-size:13px;white-space:nowrap;text-decoration:none;color:var(--text-secondary);border-bottom:2px solid transparent}
.page-nav a:hover,.page-nav a[aria-current]{color:var(--action-primary);border-color:var(--action-primary)}

/* ============ CMP: buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;
  padding:11px 22px;border:1px solid var(--action-primary);border-radius:4px;background:var(--action-primary);
  color:var(--action-on-primary);font-weight:600;font-size:14px;text-decoration:none;line-height:1.5;transition:background var(--neo-duration);text-align:center}
.btn:hover{background:var(--action-primary-hover)}
.btn.secondary{background:var(--action-secondary-bg);border-color:var(--border-subtle);color:var(--action-secondary-fg)}
.btn.secondary:hover{border-color:var(--action-primary);background:var(--surface-accent)}
.btn.light{background:var(--neo-white);border-color:var(--neo-white);color:var(--neo-plum-900)}
/* the light button keeps a light face on hover; surface-accent is dark in the
   dark appearance and the plum label disappeared against it */
.btn.light:hover{background:var(--neo-white);filter:brightness(.92)}
.btn.full{width:100%}

/* ============ CMP: section shell ============ */
.section{padding-block:var(--space-section);border-bottom:1px solid var(--border-subtle)}
.section-head{max-width:730px;margin-bottom:32px}
.section-head .eyebrow{margin-bottom:14px;color:var(--accent-eyebrow)}
.section-head p{margin-top:16px;color:var(--text-secondary);max-width:65ch}

/* ============ CMP: form ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:15px;max-width:640px}
.form label{font-size:var(--type-support);color:var(--text-heading);display:block}
/* Every text control on the site, not only those inside .form. The notify field
   on /instruments and the lookup on /verify sit outside a .form and were falling
   through to the browser default. */
.pg input[type="text"],.pg input[type="email"],.pg input[type="search"],
.pg input[type="tel"],.pg input:not([type]),.pg select,.pg textarea,
.form input,.form select,.form textarea{display:block;background:var(--surface-raised);border:var(--neo-border-hair) solid var(--border-subtle);color:var(--text-primary);
  border-radius:4px;min-height:46px;width:100%;padding:10px 12px;margin-top:6px;font-size:15px}
.pg input::placeholder,.pg textarea::placeholder,
.form input::placeholder,.form textarea::placeholder{color:var(--text-secondary)}
.form textarea{min-height:7.5rem;resize:vertical;font:inherit;line-height:var(--neo-leading-body)}
.form .optional{color:var(--text-secondary);font-weight:400}
.form .full{grid-column:1/-1}
.form .consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.6}
.form .consent input{width:18px;height:18px;min-height:0;margin:2px 0 0;flex:0 0 18px;accent-color:var(--action-primary)}
.form .fine{grid-column:1/-1;font-size:12px;line-height:1.6;color:var(--text-secondary);margin:0}
/* on dark */
.on-dark .form label{color:var(--text-inverse-2)}
.on-dark .form textarea{background:var(--surface-inverse-2);border-color:var(--border-strong);color:var(--text-inverse)}
.on-dark .form input,.on-dark .form select,.on-dark .form textarea{background:var(--surface-inverse-2);border-color:var(--border-strong);color:var(--text-inverse)}
.on-dark .form input::placeholder{color:var(--text-inverse-2)}
.on-dark .form select option{background:var(--surface-inverse);color:var(--text-inverse)}
.on-dark .form .consent,.on-dark .form .fine{color:var(--text-inverse-2)}
.on-dark .form .fine a,.on-dark .form .consent a{color:var(--text-inverse)}

/* ============ CMP: enquiry panel ============ */
.enquiry{background:var(--surface-inverse);padding:44px;border-radius:var(--panel-radius);color:var(--text-inverse);
  display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-block:60px}
.enquiry h2{color:var(--text-inverse);font-weight:500}
.enquiry p{color:var(--text-inverse-2);margin-top:18px;font-size:15px}
.enquiry .eyebrow{color:#d2b691;margin-bottom:16px}
.enquiry .contact-line{margin-top:22px;font-size:15px}
.enquiry .contact-line a{color:var(--text-inverse);text-decoration:none;border-bottom:1px solid #6f6386}

/* ============ CMP: confirmation ============ */
.confirm{max-width:620px;margin-inline:auto;padding-block:90px;text-align:center}
.confirm .mark{width:56px;height:56px;border-radius:50%;background:var(--surface-accent);color:var(--action-primary);
  display:grid;place-items:center;margin:0 auto 26px}
.confirm .mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.confirm h1{max-width:none;margin-bottom:18px}
.confirm p{color:var(--text-secondary)}
.confirm dl{margin-top:30px;padding-block:24px;border-block:1px solid var(--border-subtle);
  display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:start}
.confirm dt{font-size:12px;color:var(--text-secondary)}
.confirm dd{margin:5px 0 0;font-size:15px;color:var(--text-heading);font-weight:500}
.confirm .actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ============ CMP: footer ============ */
.footer{padding:42px 0 26px;background:var(--surface-sunken);border-top:1px solid var(--border-subtle)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.footer img{width:100px;height:auto;display:block;margin-bottom:18px}
.footer p,.footer a{font-size:14px;color:var(--text-secondary)}
.footer ul{margin:0;display:grid;gap:10px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--action-primary)}
.footer h3{font-size:var(--type-support);margin-bottom:18px;color:var(--text-heading)}
.footer .contact{margin-top:16px;display:grid;gap:6px}
.footer-legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.footer-legal .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px}
.footer-legal .links a{font-size:13px}
.footer-legal .copy{font-size:12px;color:var(--text-secondary);max-width:none;line-height:1.7}

/* ============ CMP: cookie banner ============ */
.cookie{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--surface-inverse);color:var(--text-inverse-2);
  padding:18px 0;box-shadow:0 -6px 24px rgba(37,27,60,.18)}
.cookie .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie p{font-size:14px;max-width:70ch;margin:0}
.cookie a{color:var(--text-inverse)}
.cookie .actions{display:flex;gap:10px;margin-inline-start:auto}
.cookie .btn{min-height:42px;padding:9px 18px}
.cookie .btn.ghost{background:transparent;border-color:var(--border-inverse);color:var(--text-inverse)}

/* ============ CMP: mobile CTA ============ */
.mobile-cta{display:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .wrap{width:calc(100% - 48px)}
  .nav{gap:18px}
  .section-label{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:850px){
  .enquiry{grid-template-columns:1fr;gap:30px;padding:32px}
  .section{padding-block:52px}
}
@media(max-width:640px){
  html{scroll-padding-top:126px}
  .wrap{width:calc(100% - 36px)}
  .header{height:66px}
  .header-inner{gap:14px}
  .logo img{width:90px}
  .language{margin-inline-start:auto}
  .menu-toggle{display:block;border:var(--neo-border-hair) solid var(--border-subtle);background:var(--surface-page);color:var(--text-heading);
    border-radius:4px;width:42px;height:40px;font-size:20px}
  .nav{display:none;position:absolute;top:var(--header-height-sm);inset-inline:0;background:var(--surface-page);padding:10px 20px 20px;
    border-bottom:1px solid var(--border-subtle);box-shadow:0 12px 20px rgba(37,27,60,.04)}
  .nav[data-open="true"]{display:grid;gap:0}
  .nav a{font-size:16px;padding:12px}
  .nav a.active{box-shadow:none;border-inline-start:2px solid var(--action-primary)}
  .page-nav{top:66px}
  .page-nav .wrap{gap:24px}
  .page-nav a{padding-block:13px;font-size:12px}
  .form{grid-template-columns:1fr}
  .form input,.form select{font-size:16px}
  .confirm{padding-block:60px}
  .confirm dl{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer{padding-bottom:100px}
  .cookie .actions{margin-inline-start:0;width:100%}
  .cookie .btn{flex:1}
  .mobile-cta{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:35;background:var(--surface-page);
    border-top:1px solid var(--border-subtle);padding:12px 18px max(12px,env(safe-area-inset-bottom));
    align-items:center;justify-content:space-between;gap:15px;box-shadow:0 -6px 20px rgba(37,27,60,.03)}
  .mobile-cta span{font-size:12px;line-height:1.4;color:var(--text-secondary)}
  .mobile-cta strong{display:block;color:var(--surface-inverse);font-size:14px}
  .mobile-cta .btn{min-height:42px}
  body.cookie-open .mobile-cta{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media print{.header,.page-nav,.cookie,.mobile-cta,.enquiry,.footer,.language,.menu-toggle{display:none!important}}

/* ============ COMPONENT: social icons (footer) ============ */
/* the Arabic link in the footer list is Arabic text too */
/* Arabic in the chrome is set at 13px, the same as the header link. A relative
   size was resolving against a larger parent here and rendering bigger than the
   English beside it. */
.footer a[lang="ar"]{font-family:var(--neo-font-arabic);font-size:13px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:38px;height:38px;border:var(--neo-border-hair) solid var(--border-subtle);border-radius:var(--neo-radius-sm);background:var(--surface-page);
  display:grid;place-items:center;color:var(--text-secondary);transition:.16s}
.social a:hover{border-color:var(--action-primary);color:var(--action-primary);background:var(--surface-accent)}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Theme control — the same shape as the social icons in the footer, so the two
   read as one family: 38px square, hairline border, hollow stroked glyph. */
.themetoggle{width:38px;height:38px;border:var(--neo-border-hair) solid var(--border-subtle);
  border-radius:var(--neo-radius-sm);background:var(--surface-page);display:grid;place-items:center;
  color:var(--text-secondary);transition:.16s;cursor:pointer;margin-inline-start:10px;flex:0 0 auto;
  padding:0}
.themetoggle:hover{border-color:var(--action-primary);color:var(--action-primary);
  background:var(--surface-accent)}
.themetoggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.themetoggle .ico-moon{display:none}
@media (prefers-color-scheme: dark){
  html:not([data-theme]) .themetoggle .ico-sun{display:none}
  html:not([data-theme]) .themetoggle .ico-moon{display:block}
}
[data-theme="dark"] .themetoggle .ico-sun{display:none}
[data-theme="dark"] .themetoggle .ico-moon{display:block}
[data-theme="light"] .themetoggle .ico-sun{display:block}
[data-theme="light"] .themetoggle .ico-moon{display:none}
@media (max-width:700px){ .themetoggle{width:44px;height:44px} }

/* ============ FORCED COLOURS — Windows High Contrast ============ */
/* Supported, not disabled. Keep borders so structure survives. */
@media(forced-colors:active){
  .btn,.form input,.form select,.social a{border:1px solid}
  .nav a.active,.page-nav a[aria-current]{border-bottom:2px solid}
  .cookie,.enquiry{border:1px solid}
}

/* ============ MOBILE — tap targets and logo sizing ============ */
@media(max-width:640px){
  .footer img{width:96px}
  .social a{width:44px;height:44px}
  .language{height:44px}
  .btn{min-height:48px}
  .form input,.form select{min-height:48px}
  .cookie p{font-size:13px}
}


/* ============ COMPONENT: cohort states (shortcode output) ============ */
.state{display:inline-flex;align-items:center;min-height:48px;padding:11px 20px;border:1px solid var(--border-subtle);
  border-radius:4px;font-size:14px;font-weight:600;color:var(--text-secondary);background:var(--surface-sunken)}
.state--full{border-color:var(--accent-focus-ring);color:var(--accent-eyebrow)}
.ccard--later{border-color:var(--border-subtle);opacity:.92}
.ccard--later:before{background:var(--border-subtle)}
.ccard--none:before{background:var(--accent-focus-ring)}
.ccard--none{border-color:var(--border-subtle)}

/* ============ COMPONENT: certificate verification ============ */
.verify{max-width:660px}
.verify__form label{font-size:13px;color:var(--surface-inverse);display:block;margin-bottom:8px}
.verify__row{display:flex;gap:10px}
@media(max-width:560px){.verify__row{flex-direction:column}}
.verify__row input{flex:1;min-height:48px;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:4px;
  font-size:16px;background:var(--surface-raised);color:var(--text-primary);letter-spacing:.02em}
.verify__hint{font-size:13px;color:var(--text-secondary);margin-top:10px}
.verify__result{margin-top:32px;padding:30px;border:var(--neo-border-hair) solid var(--border-subtle);border-radius:var(--card-radius);background:var(--surface-raised);
  box-shadow:0 12px 34px rgba(37,27,60,.035)}
.verify__result h3{font-size:22px;margin-bottom:6px}
.verify__result p{font-size:14px;color:var(--text-secondary);margin-top:10px}
.verify__result--ok{border-color:#cdbdf5}
.verify__result--no h3{color:var(--accent-eyebrow)}
.verify__mark{width:44px;height:44px;border-radius:50%;background:var(--surface-accent);color:var(--action-primary);
  display:grid;place-items:center;margin-bottom:18px}
.verify__mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.verify__result dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border-subtle)}
@media(max-width:560px){.verify__result dl{grid-template-columns:1fr}}
.verify__result dt{font-size:12px;color:var(--text-secondary)}
.verify__result dd{margin:5px 0 0;font-size:15px;color:var(--surface-inverse);font-weight:500}


/* ============ COMPONENT: footer address ============ */
.footer address.contact{font-style:normal;font-size:14px;color:var(--text-secondary);line-height:1.7;margin-top:14px;display:block}


/* ============ GRID ============ */
/* Layout reflows on content, not on device. A card grid states a minimum
   width and fits as many as will fit, so the count is right at every width
   with no breakpoint written and no device assumed. */
.grid{display:grid;gap:var(--neo-grid-gap)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(var(--neo-card-min),100%),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.grid--split{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:var(--neo-space-2xl)}
.grid--split-wide{grid-template-columns:minmax(0,.95fr) minmax(0,1.12fr);gap:var(--neo-space-2xl)}
@media(max-width:850px){
  .grid--split,.grid--split-wide{grid-template-columns:1fr;gap:var(--neo-space-lg)}
}
.stack > * + *{margin-block-start:var(--space-stack)}
.measure{max-width:var(--neo-measure)}

/* ============ APPEARANCE ============ */
/* Dark is a second set of semantic values, not a second stylesheet.
   Everything below reads tokens, so nothing here restates a color. */
html{color-scheme:light dark}
/* dark by system, and by explicit choice */
@media (prefers-color-scheme: dark){
html:not([data-theme]) .fig, html:not([data-theme]) .verify__result, html:not([data-theme]) .ccard{background:var(--surface-raised)}
html:not([data-theme]) .chart rect[fill="#f8f6fd"]{fill:var(--data-plot-bg)}
html:not([data-theme]) .chart line[stroke="#e8e4ed"]{stroke:var(--data-grid)}
html:not([data-theme]) /* Photographs dim slightly against a dark page. This is opt-in on .photo
     rather than a blanket rule on img, html:not([data-theme]) because a blanket rule outranks the
     mark rules below it and silently breaks every logo. */
  .photo{filter:brightness(.92)}
html:not([data-theme]) .logo img, html:not([data-theme]) .footer img{filter:brightness(0) invert(1) opacity(.92)}
}
[data-theme="dark"] .fig, [data-theme="dark"] .verify__result, [data-theme="dark"] .ccard{background:var(--surface-raised)}
[data-theme="dark"] .chart rect[fill="#f8f6fd"]{fill:var(--data-plot-bg)}
[data-theme="dark"] .chart line[stroke="#e8e4ed"]{stroke:var(--data-grid)}
[data-theme="dark"] /* Photographs dim slightly against a dark page. This is opt-in on .photo
     rather than a blanket rule on img, [data-theme="dark"] because a blanket rule outranks the
     mark rules below it and silently breaks every logo. */
  .photo{filter:brightness(.92)}
[data-theme="dark"] .logo img, [data-theme="dark"] .footer img{filter:brightness(0) invert(1) opacity(.92)}



/* ============ TARGETS — WCAG 2.2 SC 2.5.8 ============ */
/* The criterion requires 24x24 CSS pixels at AA. These exceed it, in line
   with Apple's 44pt and Material's 48dp guidance. */
.btn,.form input,.form select,.menu-toggle{min-height:var(--neo-target-action)}
.social a,.page-nav a{min-height:var(--neo-target-min)}


/* ============ COMPONENT: upcoming cohorts (Home) ============ */
.upcoming{display:grid;gap:var(--space-stack);margin:0}
.upcoming__item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:var(--neo-space-md);
  align-items:center;padding:var(--neo-space-sm) 0;border-block-end:1px solid var(--border-subtle)}
.upcoming__code{font-size:var(--type-label);font-weight:600;color:var(--accent-eyebrow);letter-spacing:.06em}
.upcoming__name{font-size:var(--type-body);color:var(--text-heading);text-decoration:none;font-weight:500}
.upcoming__name:hover{color:var(--text-accent)}
.upcoming__dates,.upcoming__fee{font-size:var(--type-support);color:var(--text-secondary)}
.upcoming__none{color:var(--text-secondary)}
@media(max-width:850px){
  .upcoming__item{grid-template-columns:auto 1fr;row-gap:var(--neo-space-2xs)}
  .upcoming__dates,.upcoming__fee{grid-column:2}
  .upcoming__item .btn,.upcoming__item .state{grid-column:2;justify-self:start}
}


/* ============ COMPONENT: credential badges ============ */
.badges{display:flex;flex-wrap:wrap;gap:var(--neo-space-sm);align-items:center;margin:0;padding:0;list-style:none}
.badges a{display:grid;place-items:center;gap:var(--neo-space-3xs);text-decoration:none;
  min-height:var(--neo-target-min);text-align:center}
.badges .plate{padding:var(--neo-space-3xs)}
.badges img{width:56px;height:56px;display:block;object-fit:contain}
.badges span{font-size:var(--type-label);color:var(--text-secondary);letter-spacing:.06em}
.badges a:hover span{color:var(--text-accent)}

/* ============ COMPONENT: partner logo ============ */
/* Supplied marks carry a white background, so they sit on a plate rather than
   being inverted. In light the plate is invisible; in dark it reads as a frame.

   Every mark occupies the SAME BOX regardless of its own aspect ratio, so a
   wide logo and a square one never look like different sizes. The image is
   scaled to fit inside the box; the box is what stays constant. */
.plate{display:inline-flex;align-items:center;justify-content:center;background:var(--neo-white);
  border-radius:var(--neo-radius-sm);padding:var(--neo-space-2xs) var(--neo-space-xs);line-height:0}
/* dark by system, and by explicit choice */
@media (prefers-color-scheme: dark){
html:not([data-theme]) .plate{box-shadow:0 0 0 1px rgba(255,255,255,.10)} }
[data-theme="dark"] .plate{box-shadow:0 0 0 1px rgba(255,255,255,.10)} 


/* Every mark sits in the same box, but each is scaled to its own optical
   weight. A 2.2:1 mark and a 3.4:1 mark filling the same box do not read as
   the same size, so the scale is set per brand rather than per box. */
.logobox{width:148px;height:52px;display:inline-flex;align-items:center;justify-content:center}
.logobox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.logobox--sm{width:104px;height:36px}
.logobox--xs{width:92px;height:30px}

/* per-brand optical scale, applied to the image inside any box */
.logobox img[alt="Strategy Dynamics"]{max-height:78%}
.logobox img[alt="OKRmentors"]{max-height:88%}
.logobox img[alt="NEO&"]{max-height:66%}
.logorow{display:flex;flex-wrap:wrap;gap:var(--neo-space-2xs);align-items:center}

/* ============ COMPONENT: data table ============ */
.dtable{width:100%;border-collapse:collapse}
.dtable th{text-align:start;font-size:var(--type-label);font-weight:600;letter-spacing:.06em;
  color:var(--text-secondary);padding-block:var(--neo-space-2xs);padding-inline-end:var(--neo-space-md);
  border-block-end:var(--neo-border-thick) solid var(--border-subtle);white-space:nowrap;vertical-align:bottom}
.dtable td{padding-inline-end:var(--neo-space-md)}
.dtable th:last-child,.dtable td:last-child{padding-inline-end:0}
.dtable td{padding-block:var(--neo-space-sm);border-block-end:var(--neo-border-hair) solid var(--border-subtle);
  vertical-align:middle;font-size:var(--type-body)}
.dtable td.num,.dtable th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable td.act{text-align:end;width:1%;white-space:nowrap;padding-inline-start:var(--neo-space-lg)}
@media(max-width:850px){
  .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dtable tr{display:grid;gap:var(--neo-space-2xs);padding-block:var(--neo-space-sm);
    border-block-end:var(--neo-border-hair) solid var(--border-subtle)}
  .dtable td{border:0;padding:0}
  .dtable td.act{text-align:start}
  .dtable td[data-label]::before{content:attr(data-label) " · ";color:var(--text-secondary);font-size:var(--type-label)}
}

.upcoming__code{display:block;font-size:var(--type-label);color:var(--accent-eyebrow);letter-spacing:.06em;margin-top:2px}
.upcoming__name{color:var(--text-heading);text-decoration:none;font-weight:500}
.upcoming__name:hover{color:var(--text-accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ============ COMPONENT: cohort row — used on Home and the calendar ============ */
.crow{display:flex;align-items:center;gap:var(--neo-space-sm)}
.crow__badge{flex:0 0 auto}
.crow__badge img{width:40px;height:40px;display:block;object-fit:contain}
.crow__badge .plate{padding:3px}
.crow__text{min-width:0}
.crow__name{color:var(--text-heading);text-decoration:none;font-weight:500;display:block}
.crow__name:hover{color:var(--text-accent)}
.crow__code{display:block;font-size:var(--type-label);color:var(--accent-eyebrow);letter-spacing:.06em;margin-top:2px}
.dtable td.by .plate{padding:var(--neo-space-3xs) var(--neo-space-2xs)}
@media(max-width:850px){
  .dtable td.by{margin-top:var(--neo-space-2xs)}
}



/* Cohort tables — Home and /academy/calendar are one component.
   Fixed columns so nothing reflows between filter selections, and a name column
   wide enough that no credential wraps, which keeps every row the same height. */
@media(min-width:851px){
  .dtable.cohorts{table-layout:fixed}
  .dtable.cohorts .crow__name{white-space:nowrap}
}


/* Discounts. The struck figure always comes BEFORE the price, so the price that
   matters ends at the column edge on every row and sits in the same place in the
   strip whether an offer is running or not. Set by WooCommerce, never by a page. */
.feecell{display:inline-flex;align-items:baseline;gap:10px;justify-content:flex-end}
.fee-was{position:relative;display:inline-block;color:var(--text-secondary);
  font-size:.82em;font-weight:400}
.fee-was::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1px;
  background:currentColor;transform:rotate(-7deg)}
.strip__v .fee-was{color:var(--text-inverse-2);font-size:14px;margin-inline-end:9px}