/* =====================================================================
   Extra design styles (Dashboard: Brand and Logo, Colours and Fonts, Design style).
   "Minimalist" sits on the Corporate Light layout (white header, light footer).
   "Dark Glow" sits on the Classic Dark layout.
   They apply only when <html data-skin="minimal"> or <html data-skin="glow"> is set; with any other
   design these rules do nothing.
   ===================================================================== */

/* ---------------------------------------------------------------------
   MINIMALIST: white space, hairline borders, flat black buttons, no shadows or gradients
   --------------------------------------------------------------------- */
html[data-skin="minimal"][data-design] {
  --shadow-sm: none; --shadow: none; --shadow-lg: 0 24px 48px -36px rgba(0, 0, 0, .28);

  & body { letter-spacing: .01em; }
  & h1, & h2, & h3, & h4 { font-weight: var(--hw, 500); letter-spacing: -.02em; }
  & h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.1; }
  & h2 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); }
  & h3 { font-size: 1.15rem; }
  & .hl, & h1 em, & h2 em, & h3 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--c-primary); }

  /* small labels */
  & .eyebrow { background: none; padding: 0; border-radius: 0; color: var(--c-muted); letter-spacing: .2em; font-weight: 500; }
  & .eyebrow::before { display: none; }
  & .bg-brand .eyebrow, & .cta-box .eyebrow { background: none; color: rgba(255, 255, 255, .7); }

  /* buttons: flat, black, quiet */
  & .btn:not(.btn-link) { box-shadow: none; font-weight: 500; letter-spacing: .02em; border-width: 1px; padding: .85rem 1.5rem; }
  & .btn:not(.btn-link):hover { transform: none; box-shadow: none; filter: none; }
  & .btn-primary { background: var(--c-heading); color: #fff; border-color: var(--c-heading); }
  & .btn-primary:hover { background: #000; border-color: #000; color: #fff; }
  & .btn-outline, & .btn-ghost { background: transparent; color: var(--c-heading); border-color: var(--c-heading); backdrop-filter: none; }
  & .btn-outline:hover, & .btn-ghost:hover { background: var(--c-heading); color: #fff; border-color: var(--c-heading); }
  & .btn-light { background: #fff; color: var(--c-heading); border-color: var(--c-border); }
  & .btn-light:hover { background: var(--c-heading); color: #fff; }
  & .bg-brand .btn-primary, & .cta-box .btn-primary, & .formula .btn-primary, & .aside-cta .btn-primary { background: #fff; color: var(--c-heading); border-color: #fff; }
  & .bg-brand .btn-outline, & .bg-brand .btn-ghost, & .cta-box .btn-outline, & .cta-box .btn-ghost, & .aside-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
  & .bg-brand .btn-outline:hover, & .bg-brand .btn-ghost:hover, & .cta-box .btn-ghost:hover, & .cta-box .btn-outline:hover { background: #fff; color: var(--c-heading); }

  /* header */
  & .nav-link:hover, & .nav-item.active > .nav-link { background: none; color: var(--c-heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
  & .site-header.scrolled, & body[data-hero="0"] .site-header, & body.nav-open .site-header { box-shadow: 0 1px 0 var(--c-border); backdrop-filter: none; background: rgba(255, 255, 255, .96); }
  & .sub { box-shadow: var(--shadow-lg); border-radius: var(--radius); }

  /* heroes and sections: plain white, one hairline */
  & .hero, & .hero-page { background: #fff; }
  & .hero-page { border-bottom: 1px solid var(--c-border); }
  & .hero-home:not(.hero-split)::before { background: linear-gradient(95deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 45%, rgba(255, 255, 255, .06) 85%); }
  & .hero-home.tp-c:not(.hero-split)::before { background: rgba(255, 255, 255, .92); }
  & .hv-frame { box-shadow: none; border-radius: var(--ib-r, var(--radius)); border: 1px solid var(--c-border); }
  & .float-card { box-shadow: none; border-radius: var(--radius); }
  & .bg-alt, & .bg-dark, & .bg-tint { background: #FAFAFA; }
  & .decor { display: none; }
  & .bg-dark .card { background: #fff; }
  & .bg-brand { background: var(--c-heading); color: #fff; }
  & .formula, & .cta-box, & .contact-info, & .aside-cta, & .tier-hi { background: var(--c-heading); }
  & .cta-box { box-shadow: none; }

  /* cards and boxes: a hairline, nothing else */
  & .card, & .post-card, & .course, & .tier, & .stat, & .team-card, & .wb-card { box-shadow: none; border: 1px solid var(--c-border); border-radius: var(--radius); }
  & .card:hover, & .post-card:hover, & .course:hover, & .tier:hover, & .team-card:hover { box-shadow: none; transform: none; border-color: var(--c-heading); }
  & .card-ico { background: none; border: 1px solid var(--c-border); color: var(--c-heading); border-radius: var(--radius); }
  & .card:hover .card-ico { background: none; color: var(--c-heading); transform: none; border-color: var(--c-heading); }
  & .card-num { -webkit-text-fill-color: var(--c-border); color: var(--c-border); }
  & .chips li, & .mq-chips .mq-item { background: none; border: 1px solid var(--c-border); }
  & .stat + .stat { border-left: 1px solid var(--c-border); }

  /* forms */
  & .form input, & .form select, & .form textarea { border: 1px solid var(--c-border); border-radius: var(--radius); background-color: #fff; }
  & .form input:focus, & .form select:focus, & .form textarea:focus { border-color: var(--c-heading); box-shadow: none; outline: 0; }
  & #progress { height: 2px; }
}

/* ---------------------------------------------------------------------
   DARK GLOW: near-black pages, transparent buttons with a travelling glow border and an animated fill
   --------------------------------------------------------------------- */
@property --wx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes wx-ring { to { --wx-ang: 360deg; } }
@keyframes wx-shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

html[data-skin="glow"][data-design] {
  --glow-a: var(--c-cyan, #22D3EE); --glow-b: var(--c-primary, #3B82F6);

  /* buttons (the owner's own gradient fills, data-fill, and text links are left alone) */
  & .btn:not(.btn-link):not([data-fill]):not([data-look]) {
    position: relative; isolation: isolate; background: transparent; color: #fff; border: 2px solid transparent; box-shadow: none;
    background-image: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--glow-a) 16%, transparent) 50%, transparent 100%); background-size: 200% 100%;
    animation: wx-shimmer 5.5s linear infinite;
    text-shadow: 0 0 14px color-mix(in srgb, var(--glow-a) 45%, transparent);
    transition: color .3s, text-shadow .3s, transform .2s;
  }
  & .btn:not(.btn-link):not([data-fill]):not([data-look])::before {             /* the glowing border: a bright arc travels round a faint full ring */
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
    background: conic-gradient(from var(--wx-ang), transparent 0 38%, var(--glow-a) 62%, var(--glow-b) 80%, transparent 96%), linear-gradient(color-mix(in srgb, var(--glow-a) 32%, transparent), color-mix(in srgb, var(--glow-a) 32%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: wx-ring 3.6s linear infinite;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--glow-a) 70%, transparent));
  }
  & .btn:not(.btn-link):not([data-fill]):not([data-look])::after {              /* the fill: sweeps in from the left on hover and keyboard focus */
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, var(--glow-a), var(--glow-b) 60%, var(--glow-a)); background-size: 200% 100%;
    clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.2, .7, .2, 1);
    animation: wx-shimmer 3s linear infinite;
  }
  & .btn:not(.btn-link):not([data-fill]):not([data-look]):hover, & .btn:not(.btn-link):not([data-fill]):not([data-look]):focus-visible { color: #04101C; text-shadow: none; transform: translateY(-2px); box-shadow: 0 0 30px -6px color-mix(in srgb, var(--glow-a) 70%, transparent); }
  & .btn:not(.btn-link):not([data-fill]):not([data-look]):hover::after, & .btn:not(.btn-link):not([data-fill]):not([data-look]):focus-visible::after { clip-path: inset(0 0 0 0); }
  & .btn-primary:not([data-fill]):not([data-look]) { box-shadow: 0 0 26px -8px color-mix(in srgb, var(--glow-a) 60%, transparent), inset 0 0 18px -10px var(--glow-a); }
  & .btn-outline:not([data-fill]):not([data-look]), & .btn-light:not([data-fill]):not([data-look]), & .btn-ghost:not([data-fill]):not([data-look]) { box-shadow: inset 0 0 16px -12px var(--glow-a); }
  & .btn[disabled]::before, & .btn[disabled]::after { animation: none; }

  /* cards and boxes: dark glass with a faint glow on hover */
  & .card, & .post-card, & .course, & .tier, & .stat, & .team-card, & .wb-card { background: color-mix(in srgb, var(--c-surface) 82%, transparent); border-color: color-mix(in srgb, var(--glow-a) 16%, var(--c-border)); backdrop-filter: blur(6px); }
  & .card:hover, & .post-card:hover, & .course:hover, & .tier:hover, & .team-card:hover { border-color: color-mix(in srgb, var(--glow-a) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow-a) 22%, transparent), 0 16px 44px -20px color-mix(in srgb, var(--glow-a) 55%, transparent); }
  & .eyebrow { color: var(--glow-a); }
  /* bright brand blocks become deep glass so white text stays readable */
  & .cta-box, & .formula, & .contact-info, & .aside-cta, & .tier-hi, & .bg-brand { background: linear-gradient(135deg, #0A1830, #0B2A52 55%, #0A1830); border: 1px solid color-mix(in srgb, var(--glow-a) 30%, transparent); box-shadow: 0 0 60px -34px var(--glow-a); color: #fff; }
  & .form input, & .form select, & .form textarea { background-color: color-mix(in srgb, var(--c-surface) 85%, transparent); border-color: color-mix(in srgb, var(--glow-a) 18%, var(--c-border)); color: var(--c-heading); }
  & .form input:focus, & .form select:focus, & .form textarea:focus { border-color: var(--glow-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow-a) 22%, transparent); outline: 0; }
}

/* motion off, or a visitor who asks for less motion: the glow stays, nothing moves */
html[data-motion="off"][data-skin="glow"] .btn::after, html[data-motion="off"][data-skin="glow"] .btn::before, html[data-motion="off"] .btn[data-look]::after, html[data-motion="off"] .btn[data-look]::before, html[data-motion="off"] .btn[data-look], html[data-motion="off"] .box-glow :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box)::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="glow"] .btn, html[data-skin="glow"] .btn::before, html[data-skin="glow"] .btn::after, .btn[data-look], .btn[data-look]::before, .btn[data-look]::after, .box-glow :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box)::before { animation: none !important; }
}

/* ---------------------------------------------------------------------
   PER-SECTION BOX LOOK (Style box, Border and shape, Box look): the cards and boxes inside one section
   box-flat | box-soft | box-glow | box-glass; empty = the site design decides
   --------------------------------------------------------------------- */
html .sec { --bx-a: var(--c-primary); }
html[data-design="classic"] .sec, html .sec.bg-brand, html .sec.bg-dark { --bx-a: var(--c-cyan, var(--c-primary)); }
html .box-flat :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box) { background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: none; backdrop-filter: none; border-radius: var(--radius); }
html .box-flat :is(.card, .post-card, .course, .tier, .team-card, .wb-card):hover { box-shadow: none; transform: none; border-color: var(--c-heading); }
html .box-soft :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box) { background: var(--c-surface); border: 1px solid transparent; box-shadow: 0 14px 34px -18px rgba(11, 37, 69, .28); backdrop-filter: none; border-radius: var(--radius); }
html .box-soft :is(.card, .post-card, .course, .tier, .team-card, .wb-card):hover { box-shadow: 0 22px 46px -18px rgba(11, 37, 69, .38); }
html .box-glow :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box) { position: relative; isolation: isolate; background: color-mix(in srgb, var(--c-surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--bx-a) 22%, transparent); box-shadow: 0 0 14px -8px var(--bx-a); backdrop-filter: none; border-radius: var(--radius); }
html .box-glow :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box)::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none; background: conic-gradient(from var(--wx-ang), transparent 0 52%, var(--bx-a) 76%, var(--c-accent, var(--bx-a)) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: wx-ring 4s linear infinite; filter: drop-shadow(0 0 3px var(--bx-a)); }
html .box-glow :is(.card, .post-card, .course, .tier, .team-card, .wb-card):hover { border-color: color-mix(in srgb, var(--bx-a) 40%, transparent); box-shadow: 0 0 18px -6px var(--bx-a); }
html .box-glass :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box) { background: color-mix(in srgb, var(--c-surface) 55%, transparent); border: 1px solid color-mix(in srgb, #fff 45%, transparent); box-shadow: 0 10px 30px -18px rgba(11, 37, 69, .3); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-radius: var(--radius); }
html[data-design="classic"] .box-glass :is(.card, .post-card, .course, .tier, .team-card, .wb-card, .tl-card, .res-box) { border-color: color-mix(in srgb, #fff 16%, transparent); background: color-mix(in srgb, #fff 7%, transparent); }

/* ---------------------------------------------------------------------
   PER-BUTTON EFFECTS (Button effect field on any button; works on every design)
   data-look="minimal" flat | "glow" glowing border + sweep fill | "shine" animated fill
   --------------------------------------------------------------------- */
.btn[data-look] { --lk-a: var(--c-primary); --lk-b: var(--c-accent, var(--c-primary)); --lk-txt: var(--c-heading); --lk-hov: #fff; }
html[data-design="classic"] .btn[data-look], .bg-brand .btn[data-look], .cta-box .btn[data-look], .formula .btn[data-look], .aside-cta .btn[data-look], .contact-info .btn[data-look], .tier-hi .btn[data-look] { --lk-txt: #fff; --lk-a: var(--c-cyan, var(--c-primary)); --lk-b: var(--c-primary); --lk-hov: #04101C; }

/* a button that also has its own gradient fill: the effect uses the fill's two colours */
html .btn[data-look][data-fill] { --lk-a: var(--fa); --lk-b: var(--fb); --lk-hov: var(--ft); }
html .btn[data-look="minimal"][data-fill]:not(.btn-link) { background-image: none !important; background-color: var(--fa); border: 1px solid var(--fa) !important; box-shadow: none; filter: none; border-radius: 2px; font-weight: 500; letter-spacing: .02em; }
html .btn[data-look="minimal"][data-fill]:not(.btn-link):hover { transform: none; box-shadow: none; filter: none; opacity: .85; }
html .btn[data-look="glow"][data-fill]:not(.btn-link) { background-color: transparent; background-image: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--fa) 16%, transparent) 50%, transparent 100%) !important; background-size: 200% 100%; color: var(--lk-txt) !important; border: 2px solid transparent !important; }
html .btn[data-look="glow"][data-fill]:not(.btn-link):hover, html .btn[data-look="glow"][data-fill]:not(.btn-link):focus-visible { color: var(--ft) !important; }
html .btn[data-look="shine"][data-fill]:not(.btn-link) { background-image: linear-gradient(100deg, var(--fa), var(--fb), var(--fa)) !important; background-size: 220% 100%; animation: wx-shimmer 4s linear infinite; }

/* minimal: flat, no shadow, no gradient */
html .btn[data-look="minimal"]:not(.btn-link):not([data-fill]) { background: var(--c-heading); background-image: none; color: var(--c-bg); border: 1px solid var(--c-heading); box-shadow: none; text-shadow: none; filter: none; border-radius: 2px; font-weight: 500; letter-spacing: .02em; }
html .btn[data-look="minimal"]:not(.btn-link):not([data-fill]):hover { transform: none; box-shadow: none; filter: none; opacity: .85; }
html .btn[data-look="minimal"].btn-outline:not([data-fill]), html .btn[data-look="minimal"].btn-ghost:not([data-fill]) { background: transparent; color: var(--lk-txt); border-color: currentColor; }
html .btn[data-look="minimal"].btn-outline:not([data-fill]):hover, html .btn[data-look="minimal"].btn-ghost:not([data-fill]):hover { opacity: 1; background: var(--lk-txt); color: var(--c-bg); border-color: var(--lk-txt); }
html .btn[data-look="minimal"].btn-light:not([data-fill]) { background: #fff; color: #111; border-color: #fff; }

/* glow: transparent, a bright arc travels round the border, fill sweeps in on hover and focus */
html .btn[data-look="glow"]:not(.btn-link) {
  position: relative; isolation: isolate; background: transparent; color: var(--lk-txt); border: 2px solid transparent; box-shadow: none;
  background-image: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--lk-a) 14%, transparent) 50%, transparent 100%); background-size: 200% 100%;
  animation: wx-shimmer 5.5s linear infinite; transition: color .3s, transform .2s, box-shadow .3s;
}
html .btn[data-look="glow"]:not(.btn-link)::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--wx-ang), transparent 0 38%, var(--lk-a) 62%, var(--lk-b) 80%, transparent 96%), linear-gradient(color-mix(in srgb, var(--lk-a) 32%, transparent), color-mix(in srgb, var(--lk-a) 32%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: wx-ring 3.6s linear infinite; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lk-a) 60%, transparent));
}
html .btn[data-look="glow"]:not(.btn-link)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, var(--lk-a), var(--lk-b) 60%, var(--lk-a)); background-size: 200% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.2, .7, .2, 1); animation: wx-shimmer 3s linear infinite;
}
html .btn[data-look="glow"]:not(.btn-link):hover, html .btn[data-look="glow"]:not(.btn-link):focus-visible { color: var(--lk-hov); transform: translateY(-2px); box-shadow: 0 0 28px -6px color-mix(in srgb, var(--lk-a) 65%, transparent); }
html .btn[data-look="glow"]:not(.btn-link):hover::after, html .btn[data-look="glow"]:not(.btn-link):focus-visible::after { clip-path: inset(0 0 0 0); }

/* shine: a solid fill whose colours slowly flow */
html .btn[data-look="shine"]:not(.btn-link):not([data-fill]) {
  background: linear-gradient(100deg, var(--lk-a), var(--lk-b), var(--lk-a)); background-size: 220% 100%; color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  animation: wx-shimmer 4s linear infinite; box-shadow: none;
}
html .btn[data-look="shine"]:not(.btn-link):not([data-fill]):hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--lk-a) 80%, transparent); }