/* Shared Hsela Mak chrome, extracted from the main site so every page matches. */
:root{--pad:clamp(1rem, 4vw, 3rem);--hdr-h:4.4rem;--display:"Big Shoulders Text", "Arial Narrow", Impact, sans-serif;--text:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--hdr-l:url("/assets/img/hsela-mak-logo-header-light.webp");--hdr-d:url("/assets/img/hsela-mak-logo-header-dark.webp");--wm-d:url("/assets/img/hsela-mak-logo-footer.webp");--surf:#131315;--surf-ink:#f4efe6;--surf-dim:rgba(244, 239, 230, .62);--surf-line:rgba(255, 255, 255, .12);--hot:#f59e5b;--hot-strong:#e8602c;color-scheme:light;--bg:#f1f1ef;--ink:#0a0a0a;--ink-dim:rgba(10, 10, 10, .68);--line:rgba(10, 10, 10, .18);--hot-t:#c2531a;--accent:#0a0a0a;--dark:0;--hdr:var(--hdr-l);--hdr-ar:5.914;--np:7;--n:8;--slot:100svh;--fig-h:min(82svh, 150vw);--floor:calc(max(4.5rem, 6svh) + env(safe-area-inset-bottom, 0px));--gap:min(calc(var(--fig-h) * .28), 12vw);--su:.4;--G:min(calc(var(--fig-h) * .34), 13.4vw);--st:.6;--lift:0px;--dsc:0;--team-range:calc(var(--np) * var(--slot) - 10svh) calc(var(--np) * var(--slot) + 40svh);--word:#b7bdbf;--glow:rgba(255, 255, 255, .9);--rim:rgba(0, 0, 0, 0);--ring:rgba(10, 10, 10, .12);--shine:#000;--ghost:#c4c9cb}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#000;--ink:#f6f6f4;--ink-dim:rgba(246, 246, 244, .72);--line:rgba(246, 246, 244, .2);--hot-t:#f59e5b;--accent:#f6f6f4;--dark:1;--hdr:var(--hdr-d);--hdr-ar:5.294;--word:#f6f6f4;--glow:rgba(235, 235, 232, .5);--rim:rgba(255, 255, 255, .5);--ring:rgba(255, 255, 255, .26);--shine:#fff;--ghost:rgba(246, 246, 244, .13)}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#000;--ink:#f6f6f4;--ink-dim:rgba(246, 246, 244, .72);--line:rgba(246, 246, 244, .2);--hot-t:#f59e5b;--accent:#f6f6f4;--dark:1;--hdr:var(--hdr-d);--hdr-ar:5.294;--word:#f6f6f4;--glow:rgba(235, 235, 232, .5);--rim:rgba(255, 255, 255, .5);--ring:rgba(255, 255, 255, .26);--shine:#fff;--ghost:rgba(246, 246, 244, .13)}

.chips{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none }
.chips li{
  padding: .32rem .75rem; border-radius: 999px;
  border: 1px solid var(--surf-line);
  font-size: .82rem; font-weight: 500; color: var(--surf-ink);
}
/* scroll reveal (only when scripts run and motion is allowed) */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity: 0; translate: 0 16px; transition: opacity .6s ease var(--rd, 0s), translate .6s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s) }
  .js .reveal.is-in{ opacity: 1; translate: 0 0 }
}
html.is-loading, html.menu-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:1rem;line-height:1.5;overflow-x:clip}
*, *::before, *::after{box-sizing:border-box}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:80rem;margin-inline:auto;padding-inline:var(--pad)}
.blk{padding-block:clamp(2rem, 6vw, 5rem)}
.surf{position:relative;overflow:hidden;border-radius:clamp(20px, 3vw, 32px);color:var(--surf-ink);background:radial-gradient(60% 90% at var(--gx, 88%) var(--gy, 0%), rgba(214, 84, 40, .34), transparent 62%), radial-gradient(45% 60% at 28% 108%, rgba(255, 236, 205, .10), transparent 70%), var(--surf);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -34px rgba(0, 0, 0, .55)}
.surf em{font-style:italic;font-weight:600;color:var(--hot)}
.h2{margin:0 0 clamp(1.25rem, 3vw, 2.5rem);font-size:clamp(2.2rem, 5.4vw, 4.4rem);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.h2 em{font-style:italic;font-weight:600;color:var(--hot-t)}
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.7rem .7rem .7rem 1.5rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:1rem;font-weight:600;text-decoration:none;box-shadow:0 16px 34px -14px rgba(0, 0, 0, .55)}
.btn i{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--hot-strong);color:#fff}
.btn svg{width:.9rem;height:.9rem}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem 1rem}
.btn--ghost{padding:.95rem 1.6rem;background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn--light{background:var(--surf-ink);color:#131315;box-shadow:none}
.btn{border:0;cursor:pointer;font-family:inherit}
.btn--ghost{border:1px solid var(--line)}
.sec-lead{margin:-.5rem 0 clamp(1.25rem, 3vw, 2rem);max-width:60ch;color:var(--ink-dim);font-size:clamp(1.05rem, 1.5vw, 1.2rem);line-height:1.6}
.logo-tile{position:relative;display:block;margin:0;overflow:hidden;border-radius:16px;background:#fff;aspect-ratio:3 / 2;box-shadow:0 0 0 1px rgba(10, 10, 10, .07), 0 16px 32px -24px rgba(0, 0, 0, .65)}
.logo-tile img{display:block;width:100%;height:100%;object-fit:cover}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .8rem;padding:.3rem .8rem;border:1px solid var(--surf-line);border-radius:999px;color:var(--hot);font-size:.85rem;font-weight:600}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--hot-strong)}
@property --o-s1{syntax: "<angle>"; inherits: false; initial-value: 0deg}
@property --o-s2{syntax: "<angle>"; inherits: false; initial-value: 0deg}
@property --o-s3{syntax: "<angle>"; inherits: false; initial-value: 0deg}
@property --o-rotation{syntax: "<angle>"; inherits: false; initial-value: 0deg}
@property --o-mesh-x-0{syntax: "<percentage>"; inherits: false; initial-value: 85%}
@property --o-mesh-y-0{syntax: "<percentage>"; inherits: false; initial-value: 80%}
@property --o-mesh-c-0{syntax: "<color>"; inherits: false; initial-value: hsla(150.88, 62%, 73%, 1)}
@property --o-mesh-s-start-0{syntax: "<percentage>"; inherits: false; initial-value: 9%}
@property --o-mesh-s-end-0{syntax: "<percentage>"; inherits: false; initial-value: 55%}
@property --o-mesh-x-1{syntax: "<percentage>"; inherits: false; initial-value: 60%}
@property --o-mesh-y-1{syntax: "<percentage>"; inherits: false; initial-value: 24%}
@property --o-mesh-c-1{syntax: "<color>"; inherits: false; initial-value: hsla(220, 100%, 72%, 1)}
@property --o-mesh-s-start-1{syntax: "<percentage>"; inherits: false; initial-value: 5%}
@property --o-mesh-s-end-1{syntax: "<percentage>"; inherits: false; initial-value: 72%}
@property --o-mesh-x-2{syntax: "<percentage>"; inherits: false; initial-value: 13%}
@property --o-mesh-y-2{syntax: "<percentage>"; inherits: false; initial-value: 82%}
@property --o-mesh-c-2{syntax: "<color>"; inherits: false; initial-value: hsla(297.79, 100%, 55%, 0.49)}
@property --o-mesh-s-start-2{syntax: "<percentage>"; inherits: false; initial-value: 5%}
@property --o-mesh-s-end-2{syntax: "<percentage>"; inherits: false; initial-value: 52%}
@property --o-mesh-x-3{syntax: "<percentage>"; inherits: false; initial-value: 24%}
@property --o-mesh-y-3{syntax: "<percentage>"; inherits: false; initial-value: 7%}
@property --o-mesh-c-3{syntax: "<color>"; inherits: false; initial-value: hsla(182, 72%, 68%, 1)}
@property --o-mesh-s-start-3{syntax: "<percentage>"; inherits: false; initial-value: 13%}
@property --o-mesh-s-end-3{syntax: "<percentage>"; inherits: false; initial-value: 68%}
@keyframes hm-o-s1{to{ --o-s1: 360deg }}
@keyframes hm-o-s2{to{ --o-s2: 360deg }}
@keyframes hm-o-s3{to{ --o-s3: 360deg }}
@keyframes hm-o-mesh{0%{ --o-mesh-x-0: 85%; --o-mesh-y-0: 80%; --o-mesh-c-1: hsla(220, 100%, 82%, 1); --o-mesh-x-1: 60%; --o-mesh-y-1: 24%; --o-mesh-x-2: 13%; --o-mesh-y-2: 82%; --o-mesh-x-3: 24%; --o-mesh-y-3: 7% }
  100%{ --o-mesh-x-0: 31%; --o-mesh-y-0: 94%; --o-mesh-c-1: hsla(220, 82%, 95%, 1); --o-mesh-x-1: 2%; --o-mesh-y-1: 25%; --o-mesh-x-2: 98%; --o-mesh-y-2: 20%; --o-mesh-x-3: 95%; --o-mesh-y-3: 92% }}
@keyframes hm-o-grain{0.0%{ transform: translate(1px, 6px) }
  3.33%{ transform: translate(-12px, 8px) }
  6.67%{ transform: translate(15px, -10px) }
  10.0%{ transform: translate(-8px, 14px) }
  13.33%{ transform: translate(11px, -6px) }
  16.67%{ transform: translate(-14px, -9px) }
  20.0%{ transform: translate(9px, 13px) }
  23.33%{ transform: translate(-7px, -15px) }
  26.67%{ transform: translate(13px, 7px) }
  30.0%{ transform: translate(-10px, -11px) }
  33.33%{ transform: translate(6px, -8px) }
  36.67%{ transform: translate(-15px, 12px) }
  40.0%{ transform: translate(14px, -7px) }
  43.33%{ transform: translate(-9px, 15px) }
  46.67%{ transform: translate(8px, -13px) }
  50.0%{ transform: translate(-13px, -6px) }
  53.33%{ transform: translate(12px, 10px) }
  56.67%{ transform: translate(-6px, -14px) }
  60.0%{ transform: translate(10px, 9px) }
  63.33%{ transform: translate(-11px, -12px) }
  66.67%{ transform: translate(7px, 14px) }
  70.0%{ transform: translate(-14px, -8px) }
  73.33%{ transform: translate(15px, 11px) }
  76.67%{ transform: translate(-8px, -15px) }
  80.0%{ transform: translate(9px, 6px) }
  83.33%{ transform: translate(-12px, -10px) }
  86.67%{ transform: translate(13px, 15px) }
  90.0%{ transform: translate(-10px, 7px) }
  93.33%{ transform: translate(11px, -14px) }
  96.67%{ transform: translate(-7px, 13px) }
  100.0%{ transform: translate(14px, -9px) }}
.hm-orb__blob{position:relative;width:54px;aspect-ratio:1;overflow:hidden;background-color:hsla(358, 0%, 100%, 1);background-image:radial-gradient(circle at var(--o-mesh-x-0) var(--o-mesh-y-0), var(--o-mesh-c-0) var(--o-mesh-s-start-0), transparent var(--o-mesh-s-end-0)), radial-gradient(circle at var(--o-mesh-x-1) var(--o-mesh-y-1), var(--o-mesh-c-1) var(--o-mesh-s-start-1), transparent var(--o-mesh-s-end-1)), radial-gradient(circle at var(--o-mesh-x-2) var(--o-mesh-y-2), var(--o-mesh-c-2) var(--o-mesh-s-start-2), transparent var(--o-mesh-s-end-2)), radial-gradient(circle at var(--o-mesh-x-3) var(--o-mesh-y-3), var(--o-mesh-c-3) var(--o-mesh-s-start-3), transparent var(--o-mesh-s-end-3));--o-depth:.3;--o-rotation:0deg;--o-angle0:0.00deg;--o-p1-0:0deg;--o-p2-0:0deg;--o-p3-0:0deg;--o-rand0:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-0)) + 0.3 * sin(var(--o-s2) + var(--o-p2-0)) + 0.2 * sin(var(--o-s3) + var(--o-p3-0))));--o-d0:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand0) * var(--o-depth));--o-x0:calc((50 + var(--o-d0) * cos(var(--o-rotation) + var(--o-angle0))) * 1%);--o-y0:calc((50 + var(--o-d0) * sin(var(--o-rotation) + var(--o-angle0))) * 1%);--o-angle1:51.43deg;--o-p1-1:137.5deg;--o-p2-1:222.5deg;--o-p3-1:360.1deg;--o-rand1:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-1)) + 0.3 * sin(var(--o-s2) + var(--o-p2-1)) + 0.2 * sin(var(--o-s3) + var(--o-p3-1))));--o-d1:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand1) * var(--o-depth));--o-x1:calc((50 + var(--o-d1) * cos(var(--o-rotation) + var(--o-angle1))) * 1%);--o-y1:calc((50 + var(--o-d1) * sin(var(--o-rotation) + var(--o-angle1))) * 1%);--o-angle2:102.86deg;--o-p1-2:275deg;--o-p2-2:85deg;--o-p3-2:80.2deg;--o-rand2:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-2)) + 0.3 * sin(var(--o-s2) + var(--o-p2-2)) + 0.2 * sin(var(--o-s3) + var(--o-p3-2))));--o-d2:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand2) * var(--o-depth));--o-x2:calc((50 + var(--o-d2) * cos(var(--o-rotation) + var(--o-angle2))) * 1%);--o-y2:calc((50 + var(--o-d2) * sin(var(--o-rotation) + var(--o-angle2))) * 1%);--o-angle3:154.29deg;--o-p1-3:52.5deg;--o-p2-3:307.5deg;--o-p3-3:200.3deg;--o-rand3:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-3)) + 0.3 * sin(var(--o-s2) + var(--o-p2-3)) + 0.2 * sin(var(--o-s3) + var(--o-p3-3))));--o-d3:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand3) * var(--o-depth));--o-x3:calc((50 + var(--o-d3) * cos(var(--o-rotation) + var(--o-angle3))) * 1%);--o-y3:calc((50 + var(--o-d3) * sin(var(--o-rotation) + var(--o-angle3))) * 1%);--o-angle4:205.71deg;--o-p1-4:190deg;--o-p2-4:170deg;--o-p3-4:320.4deg;--o-rand4:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-4)) + 0.3 * sin(var(--o-s2) + var(--o-p2-4)) + 0.2 * sin(var(--o-s3) + var(--o-p3-4))));--o-d4:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand4) * var(--o-depth));--o-x4:calc((50 + var(--o-d4) * cos(var(--o-rotation) + var(--o-angle4))) * 1%);--o-y4:calc((50 + var(--o-d4) * sin(var(--o-rotation) + var(--o-angle4))) * 1%);--o-angle5:257.14deg;--o-p1-5:327.5deg;--o-p2-5:32.5deg;--o-p3-5:80.5deg;--o-rand5:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-5)) + 0.3 * sin(var(--o-s2) + var(--o-p2-5)) + 0.2 * sin(var(--o-s3) + var(--o-p3-5))));--o-d5:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand5) * var(--o-depth));--o-x5:calc((50 + var(--o-d5) * cos(var(--o-rotation) + var(--o-angle5))) * 1%);--o-y5:calc((50 + var(--o-d5) * sin(var(--o-rotation) + var(--o-angle5))) * 1%);--o-angle6:308.57deg;--o-p1-6:105deg;--o-p2-6:255deg;--o-p3-6:200.6deg;--o-rand6:calc(0.5 + 0.5 * (0.5 * sin(var(--o-s1) + var(--o-p1-6)) + 0.3 * sin(var(--o-s2) + var(--o-p2-6)) + 0.2 * sin(var(--o-s3) + var(--o-p3-6))));--o-d6:calc(50 * (1 - var(--o-depth)) + 50 * var(--o-rand6) * var(--o-depth));--o-x6:calc((50 + var(--o-d6) * cos(var(--o-rotation) + var(--o-angle6))) * 1%);--o-y6:calc((50 + var(--o-d6) * sin(var(--o-rotation) + var(--o-angle6))) * 1%);--o-mx0:calc((var(--o-x0) + var(--o-x1)) / 2);--o-my0:calc((var(--o-y0) + var(--o-y1)) / 2);--o-mx1:calc((var(--o-x1) + var(--o-x2)) / 2);--o-my1:calc((var(--o-y1) + var(--o-y2)) / 2);--o-mx2:calc((var(--o-x2) + var(--o-x3)) / 2);--o-my2:calc((var(--o-y2) + var(--o-y3)) / 2);--o-mx3:calc((var(--o-x3) + var(--o-x4)) / 2);--o-my3:calc((var(--o-y3) + var(--o-y4)) / 2);--o-mx4:calc((var(--o-x4) + var(--o-x5)) / 2);--o-my4:calc((var(--o-y4) + var(--o-y5)) / 2);--o-mx5:calc((var(--o-x5) + var(--o-x6)) / 2);--o-my5:calc((var(--o-y5) + var(--o-y6)) / 2);--o-mx6:calc((var(--o-x6) + var(--o-x0)) / 2);--o-my6:calc((var(--o-y6) + var(--o-y0)) / 2);clip-path:circle(50%);transform:scale(calc(.85 + var(--o-depth) * .5));animation:hm-o-s1 7s linear infinite, hm-o-s2 11s linear infinite, hm-o-s3 13s linear infinite, hm-o-mesh 10s linear infinite alternate}
@supports (clip-path: shape(from 0% 0%, move to 100% 100%)){.hm-orb__blob{clip-path:content-box shape( from var(--o-mx6) var(--o-my6), curve to var(--o-mx0) var(--o-my0) with var(--o-x0) var(--o-y0), curve to var(--o-mx1) var(--o-my1) with var(--o-x1) var(--o-y1), curve to var(--o-mx2) var(--o-my2) with var(--o-x2) var(--o-y2), curve to var(--o-mx3) var(--o-my3) with var(--o-x3) var(--o-y3), curve to var(--o-mx4) var(--o-my4) with var(--o-x4) var(--o-y4), curve to var(--o-mx5) var(--o-my5) with var(--o-x5) var(--o-y5), curve to var(--o-mx6) var(--o-my6) with var(--o-x6) var(--o-y6) );border-radius:0;transform:scale(calc(1 + var(--o-depth)))}}
.hm-reader{position:fixed;z-index:90;width:76px;height:76px;right:max(14px, env(safe-area-inset-right, 0px));bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
.hm-orb{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hm-orb:focus-visible{outline:2px solid var(--hot-t);outline-offset:2px}
.hm-orb__wrap{display:grid;place-items:center;width:100%;height:100%;pointer-events:none;filter:url(#hm-edge) url(#hm-glow) drop-shadow(0 8px 16px rgba(0, 0, 0, .3));transition:scale .3s ease}
.hm-orb:hover .hm-orb__wrap{scale:1.07}
.hm-orb::after{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 0 rgba(150, 200, 255, .5)}
.hm-reader.is-speaking .hm-orb::after{opacity:1;animation:hm-ring 1.8s ease-out infinite}
@keyframes hm-ring{to{ box-shadow: 0 0 0 16px rgba(150, 200, 255, 0); }}
@supports (-moz-appearance: none){.hm-orb__wrap{filter:drop-shadow(0 8px 16px rgba(0, 0, 0, .3))}}
.hm-orb__grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:#fff;filter:url(#hm-grain);mix-blend-mode:multiply;opacity:.4;animation:hm-o-grain 1s infinite steps(1)}
.hm-reader.is-paused .hm-orb__blob, .hm-reader.is-paused .hm-orb__grain{animation-play-state:paused}
.hm-reader__panel{position:absolute;right:0;bottom:calc(100% + 8px);width:min(19rem, calc(100vw - 2rem));padding:1.15rem;border-radius:22px;color:var(--surf-ink);background:radial-gradient(70% 90% at 90% 0%, rgba(214, 84, 40, .26), transparent 62%), var(--surf);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -24px rgba(0, 0, 0, .75)}
.hm-reader__panel[hidden], .hm-reader__status[hidden]{display:none}
@media (prefers-reduced-motion: no-preference){.hm-reader__panel{animation:hm-pop .22s ease-out}}
@keyframes hm-pop{from{ opacity: 0; translate: 0 8px }}
.hm-reader__title{margin:0 0 .3rem;font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.hm-reader__hint{margin:0 0 1rem;color:var(--surf-dim);font-size:.92rem;line-height:1.5}
.hm-reader__actions{display:flex;gap:.55rem}
.hm-reader__go, .hm-reader__close{padding:.72rem 1.05rem;border-radius:999px;font:600 .95rem/1.2 var(--text);cursor:pointer}
.hm-reader__go{flex:1;border:0;background:var(--surf-ink);color:#131315}
.hm-reader__go[disabled]{opacity:.45;cursor:not-allowed}
.hm-reader__close{border:1px solid var(--surf-line);background:transparent;color:var(--surf-ink)}
.hm-reader__go:focus-visible, .hm-reader__close:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.hm-reader__status{position:absolute;right:calc(100% + 4px);top:50%;translate:0 -50%;white-space:nowrap;padding:.55rem .95rem;border-radius:999px;background:var(--surf);color:var(--surf-ink);font:600 .86rem/1 var(--text);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 28px -14px rgba(0, 0, 0, .7)}
@media (max-width: 600px){.hm-reader{width:66px;height:66px}}
@media (max-width: 600px){.hm-orb__blob{width:47px}}
@media (max-width: 600px){.hm-reader__status{right:0;top:auto;bottom:calc(100% + 2px);translate:none}}
@media (prefers-reduced-motion: reduce){.hm-orb__blob, .hm-orb__grain{animation:none}}
@media (prefers-reduced-motion: reduce){.hm-orb__wrap{transition:none}}
@media (prefers-reduced-motion: reduce){.hm-reader.is-speaking .hm-orb::after{animation:none;box-shadow:0 0 0 4px rgba(150, 200, 255, .55)}}
.hm-social{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0;--hm-s-line:var(--surf-line);--hm-s-ink:var(--surf-dim);--hm-s-hover:var(--surf-ink);--hm-s-ring:var(--hot)}
.hm-social--page{margin:.15rem 0 0;--hm-s-line:var(--line);--hm-s-ink:var(--ink-dim);--hm-s-hover:var(--ink);--hm-s-ring:var(--hot-t)}
.hm-social .hm-social__link{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;margin:0;border:1px solid var(--hm-s-line);border-radius:50%;background:transparent;color:var(--hm-s-ink);text-decoration:none;transition:translate .25s ease, color .2s ease, border-color .2s ease, background-color .2s ease}
.hm-social .hm-social__link svg{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.hm-social .hm-social__link:hover{translate:0 -3px;color:var(--hm-s-hover);border-color:var(--hm-s-ring);background-color:rgba(232, 96, 44, .14)}
.hm-social .hm-social__link:focus-visible{outline:2px solid var(--hm-s-ring);outline-offset:3px;color:var(--hm-s-hover)}
@media (prefers-reduced-motion: reduce){.hm-social .hm-social__link{transition:color .2s ease, border-color .2s ease}}
@media (prefers-reduced-motion: reduce){.hm-social .hm-social__link:hover{translate:none}}
.foot-bar{padding-right:calc(var(--pad) + 5rem)}
html{ scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5.4rem) }
/* the skip link stays out of sight until a keyboard user tabs to it */
.skip{ position: absolute; left: -999px; top: .6rem; z-index: 300; padding: .6rem 1rem; border-radius: 999px; background: #fff; color: #000; font-weight: 600; text-decoration: none }
.skip:focus{ left: .75rem }
/* ───────── Shared header and phone menu ───────── */
.sh-hdr{ position: fixed; inset: 0 0 auto; z-index: 60; padding: calc(env(safe-area-inset-top, 0px) + .75rem) max(var(--pad), env(safe-area-inset-right, 0px)) .75rem max(var(--pad), env(safe-area-inset-left, 0px)); background: transparent; transition: translate .5s cubic-bezier(.2, .7, .2, 1), background-color .3s ease }
.sh-hdr.is-solid{ background: var(--bg); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.sh-hdr.is-hidden{ translate: 0 -110% }
.sh-in{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 80rem; margin-inline: auto }
.sh-brand{ display: block; justify-self: start; padding: .65rem 0; text-decoration: none }
.sh-logo{ display: block; width: clamp(8.5rem, 15vw, 11.5rem); aspect-ratio: var(--hdr-ar) / 1; background: var(--hdr) left center / contain no-repeat }
.sh-nav{ display: flex; gap: clamp(1.4rem, 3.2vw, 2.8rem) }
.sh-nav a{ position: relative; padding: .6rem 0; font-family: 'Montserrat', var(--text); font-size: 1rem; font-weight: 500; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap }
.sh-nav a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale .35s ease }
.sh-nav a:hover::after, .sh-nav a[aria-current="true"]::after{ scale: 1 1 }
.sh-nav a[aria-current="true"]{ font-weight: 700 }
/* each link keeps the width of its bold version, so the menu does not shift when the current page changes */
.sh-nav a{ display: inline-flex; flex-direction: column; align-items: center }
.sh-nav a::before{ content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none }
.sh-right{ justify-self: end; display: flex; align-items: center; gap: .7rem }
.sh-pill{ display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: scale .25s ease }
.sh-pill:hover{ scale: 1.04 }
.sh-pill svg{ width: .8rem; height: .8rem }
.sh-brochure{ display: none; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s }
.sh-brochure:hover{ background: color-mix(in srgb, var(--ink) 8%, transparent) }
.sh-brochure svg{ width: 1rem; height: 1rem }
@media (min-width: 1180px){ .sh-brochure{ display: inline-flex } }
.sh-icon{ display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer }
.sh-icon svg{ width: 1.1rem; height: 1.1rem }
.sh-burger{ display: none }
.sh-burger i{ display: block; width: 1.05rem; height: 2px; margin: 2.5px 0; background: currentColor; transition: translate .3s ease, rotate .3s ease, opacity .2s }
.menu-open .sh-burger i:nth-child(1){ translate: 0 4.5px; rotate: 45deg }
.menu-open .sh-burger i:nth-child(2){ opacity: 0 }
.menu-open .sh-burger i:nth-child(3){ translate: 0 -4.5px; rotate: -45deg }
.sh-menu{ position: fixed; inset: 0; z-index: 55; display: grid; align-content: center; gap: 1.6rem; padding: calc(env(safe-area-inset-top, 0px) + 5.4rem) max(var(--pad), env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px)); background: var(--bg); overflow-y: auto; visibility: hidden; clip-path: circle(0 at calc(100% - 2.6rem - env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-top, 0px) + 2.6rem)); transition: clip-path .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .6s }
.menu-open .sh-menu{ visibility: visible; clip-path: circle(150% at calc(100% - 2.6rem - env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-top, 0px) + 2.6rem)); transition: clip-path .6s cubic-bezier(.2, .7, .2, 1) }
.sh-menu ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem }
.sh-menu li a{ display: inline-block; padding: .25rem 0; font-size: clamp(2.2rem, 11vw, 3.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.1; text-decoration: none; translate: 0 30px; opacity: 0; transition: translate .5s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--k) * 50ms), opacity .4s ease calc(.2s + var(--k) * 50ms) }
.sh-menu li a[aria-current="true"]{ color: var(--hot-t) }
.menu-open .sh-menu li a{ translate: 0 0; opacity: 1 }
.sh-menu-foot{ display: grid; gap: .6rem; justify-items: start; color: var(--ink-dim); font-size: 1rem; line-height: 1.6 }
.sh-menu-foot a:not(.btn){ text-decoration: none; border-bottom: 1px solid var(--hot-t) }
html.menu-open{ overflow: hidden }

/* ───────── Shared footer: calm, with room to breathe ───────── */
.sh-foot{ margin-top: clamp(4rem, 9vw, 7rem); background: #0b0b0c; color: var(--surf-ink); border-top: 1px solid rgba(255, 255, 255, .08) }
.sh-foot-in{ display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); max-width: 80rem; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) var(--pad) clamp(2.2rem, 4vw, 3.2rem) }
.sh-foot-logo{ display: block; width: min(14rem, 100%); aspect-ratio: 5.914 / 1; background: var(--wm-d) left center / contain no-repeat }
.sh-foot-brand p{ margin: 1.2rem 0 0; max-width: 30ch; color: var(--surf-dim); line-height: 1.65; font-size: 1rem }
.sh-foot-brand .sh-foot-ac{ margin-top: .8rem; color: var(--surf-ink); opacity: .85; font-size: .95rem }
.sh-foot-brand .hm-social{ margin-top: 1.4rem }
.sh-foot h2{ margin: 0 0 1.1rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--surf-dim) }
.sh-foot ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem }
.sh-foot li a{ display: inline-block; padding: .42rem 0; color: var(--surf-ink); opacity: .82; font-size: 1rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere }
.sh-foot li a:hover{ opacity: 1 }
.sh-places{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem clamp(2rem, 4vw, 4rem); max-width: 80rem; margin-inline: auto; padding: 1.8rem var(--pad); border-top: 1px solid rgba(255, 255, 255, .08) }
.sh-places p{ margin: 0; color: var(--surf-dim); font-size: .95rem; line-height: 1.6 }
.sh-places b{ display: block; margin-bottom: .2rem; color: var(--surf-ink); font-weight: 600 }
.sh-foot-bar{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; max-width: 80rem; margin-inline: auto; padding: 1.3rem calc(var(--pad) + 4.5rem) calc(1.6rem + env(safe-area-inset-bottom, 0px)) var(--pad); border-top: 1px solid rgba(255, 255, 255, .08); color: var(--surf-dim); font-size: .9rem }
.sh-foot-bar a{ color: var(--surf-dim); text-decoration: none; border-bottom: 1px solid var(--surf-line); padding-bottom: .1rem }
@media (max-width: 1000px){
  .sh-nav{ display: none } .sh-burger{ display: grid } .sh-in{ grid-template-columns: 1fr auto }
  .sh-foot-in{ grid-template-columns: repeat(3, minmax(0, 1fr)) } .sh-foot-brand{ grid-column: 1 / -1 }
}
@media (max-width: 640px){
  .sh-pill{ display: none } .sh-icon{ width: 2.75rem; height: 2.75rem }
  .sh-foot-in{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.5rem } .sh-places{ grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 400px){ .sh-foot-in{ grid-template-columns: minmax(0, 1fr) } }
@media (prefers-reduced-motion: reduce){ .sh-menu, .sh-menu li a, .sh-hdr{ transition: none } }
/* ───────── Gold accent: used for the main brochure and price-book downloads only ───────── */
.btn--gold, .btn.btn--gold{ flex-direction: row-reverse; gap: .7rem; padding-inline: 1.7rem; color: #1b1407; background: linear-gradient(100deg, #94754c 0%, #b39460 36%, #cfb27c 68%, #e6d6b1 100%); border: 1px solid rgba(255, 240, 200, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(70, 48, 12, .28), 0 14px 30px -14px rgba(201, 170, 114, .7); transition: filter .25s ease, translate .25s ease, box-shadow .25s ease }
.btn--gold i, .btn.btn--gold i{ background: transparent !important; color: inherit; width: 1.15rem; height: 1.15rem; box-shadow: none }
.btn--gold i svg{ width: 100%; height: 100% }
.btn--gold:hover{ filter: brightness(1.07) saturate(1.05); translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 18px 34px -14px rgba(201, 170, 114, .85) }
.btn--gold:active{ translate: 0 0; filter: brightness(.97) }
.btn--gold:focus-visible, .sh-brochure:focus-visible{ outline: 2px solid #ebdcb8; outline-offset: 3px }
.sh-brochure{ color: #1b1407; background: linear-gradient(100deg, #94754c 0%, #b39460 36%, #cfb27c 68%, #e6d6b1 100%); border-color: rgba(255, 240, 200, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) }
.sh-brochure:hover{ background: linear-gradient(100deg, #a2825a 0%, #c0a06d 36%, #d9bf8c 68%, #f0e2c0 100%); filter: none }
.svc-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: clamp(1.2rem, 3vw, 2rem) }
.svc-foot p{ margin: 0; color: var(--ink-dim); line-height: 1.5 }
.hero-eyebrow{ margin: 0 0 1.1rem }

/* ───────── About: a small Skip, and the footer's location line and shake switch ───────── */
.skip-pill{ position: fixed; z-index: 80; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .55rem 0 1.1rem; border-radius: 999px; font: 600 .9rem var(--text); color: #f4efe6; text-decoration: none; background: rgba(19, 19, 21, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(245, 158, 91, .55), 0 14px 30px -14px rgba(0, 0, 0, .7); opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity .3s ease, translate .3s ease, visibility 0s .3s }
.skip-pill.is-on{ opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s }
.skip-pill i{ display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #e8602c; color: #fff } .skip-pill i svg{ width: .9rem; height: .9rem }
.skip-pill:hover{ box-shadow: inset 0 0 0 1px #f59e5b, 0 14px 30px -14px rgba(0, 0, 0, .7) } .skip-pill:focus-visible{ outline: 2px solid #f59e5b; outline-offset: 3px }
.sh-places a{ color: inherit; text-underline-offset: .3em }
.sh-shake{ border: 0; background: none; padding: .5rem 0; color: inherit; font: inherit; opacity: .75; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; min-height: 2.75rem }
.sh-shake[hidden]{ display: none }
@media (max-width: 600px){ .skip-pill{ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }

/* ───────── "Click here" hint: small, thin, and gone after a few seconds ───────── */
.hm-tip{
  position: absolute; right: calc(100% + 2px); top: 50%; translate: 8px -50%; white-space: nowrap; pointer-events: none;
  padding: .45rem .8rem; border-radius: 999px; font: 300 .82rem/1 var(--text); letter-spacing: .06em;
  color: #f4efe6; background: rgba(12, 12, 14, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 0; transition: opacity .45s ease, translate .45s ease;
}
.hm-tip::after{ content: ""; position: absolute; left: 100%; top: 50%; width: 6px; height: 6px; margin-left: -3px; translate: 0 -50%; rotate: 45deg; background: rgba(12, 12, 14, .78); box-shadow: 1px -1px 0 rgba(255, 255, 255, .14) }
.hm-tip.is-on{ opacity: 1; translate: 0 -50% }
.hm-reader.is-speaking .hm-tip{ display: none }
@media (max-width: 600px){ .hm-tip{ right: calc(100% - 4px); font-size: .78rem } }
@media (prefers-reduced-motion: reduce){ .hm-tip{ transition: opacity .2s linear; translate: 0 -50% } }

/* ───────── Brochure chooser and download message ───────── */
html.bro-open{ overflow: hidden }
.bro{ position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .22s ease }
.bro[hidden]{ display: none } .bro.is-on{ opacity: 1 }
.bro-back{ position: absolute; inset: 0; background: rgba(0, 0, 0, .64); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.bro-box{ position: relative; width: min(100%, 31rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; padding: clamp(1.3rem, 4vw, 2rem); border-radius: 26px; color: #f4efe6; background: radial-gradient(520px circle at 100% 0%, rgba(232, 96, 44, .22), transparent 60%), #131315; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -30px rgba(0, 0, 0, .85); translate: 0 14px; transition: translate .28s cubic-bezier(.2, .7, .2, 1) }
.bro.is-on .bro-box{ translate: 0 0 } .bro-box:focus{ outline: none }
.bro-x{ position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #f4efe6; font-size: 1.6rem; line-height: 1; cursor: pointer }
.bro-x:hover{ background: rgba(255, 255, 255, .16) } .bro-x:focus-visible, .bro-actions button:focus-visible, .bro-actions a:focus-visible, .bro-toast button:focus-visible{ outline: 2px solid #ebdcb8; outline-offset: 2px }
.bro-box h2{ margin: 0 3rem .4rem 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1 }
.bro-box p{ margin: 0; color: rgba(244, 239, 230, .78); line-height: 1.55; font-size: .98rem }
.bro-list{ list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .75rem }
.bro-opt{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; min-height: 5.4rem; padding: .9rem 1rem; border: 0; border-radius: 20px; color: inherit; text-align: left; font: inherit; cursor: pointer; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); transition: background-color .2s ease, box-shadow .2s ease }
.bro-opt:hover{ background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(235, 220, 184, .6) }
.bro-opt:focus-visible{ outline: 2px solid #ebdcb8; outline-offset: 3px } .bro-opt[disabled]{ opacity: .55; cursor: progress } .bro-opt[aria-busy="true"]{ opacity: 1; box-shadow: inset 0 0 0 1px rgba(235, 220, 184, .85) }
.bro-ic, .bro-go{ display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50% } .bro-ic svg{ width: 1.45rem; height: 1.45rem } .bro-go svg{ width: 1.1rem; height: 1.1rem }
.bro-ic{ color: #f59e5b; background: rgba(255, 255, 255, .08) } .bro-go{ color: #1b1407; background: linear-gradient(100deg, #94754c 0%, #cfb27c 60%, #e6d6b1 100%) }
.bro-t b{ display: block; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.25 } .bro-t small{ display: block; margin: .25rem 0 .4rem; color: rgba(244, 239, 230, .75); font-size: .9rem; line-height: 1.4 }
.bro-t em{ font-style: normal; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 239, 230, .66) }
.bro-status{ min-height: 1.5rem; margin-top: 1rem !important; font-size: .95rem !important } .bro.is-done .bro-status{ color: #ebdcb8 } .bro.is-error .bro-status{ color: #ffb4a8 }
.bro-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-top: .7rem } .bro-actions[hidden], .bro-toast[hidden], #bro-toast-retry[hidden], #bro-open[hidden]{ display: none }
.bro-actions button, .bro-toast button#bro-toast-retry{ min-height: 2.75rem; padding: 0 1.3rem; border: 0; border-radius: 999px; color: #1b1407; font: 700 .95rem var(--text); cursor: pointer; background: linear-gradient(100deg, #94754c 0%, #cfb27c 60%, #e6d6b1 100%) }
.bro-actions a{ display: inline-flex; align-items: center; min-height: 2.75rem; color: #f4efe6; text-underline-offset: .3em }
.bro-toast{ position: fixed; z-index: 119; left: 50%; bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .8rem; width: max-content; max-width: min(92vw, 30rem); padding: .55rem .6rem .55rem 1.1rem; border-radius: 18px; color: #f4efe6; font-size: .95rem; line-height: 1.4; background: rgba(19, 19, 21, .97); box-shadow: inset 0 0 0 1px rgba(235, 220, 184, .4), 0 20px 50px -20px rgba(0, 0, 0, .8); opacity: 0; translate: -50% 16px; transition: opacity .22s ease, translate .28s cubic-bezier(.2, .7, .2, 1) }
.bro-toast.is-on{ opacity: 1; translate: -50% 0 } .bro-toast-x{ flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #f4efe6; font-size: 1.4rem; cursor: pointer }
@media (max-width: 600px){
  .bro{ place-items: end center; padding: 0 }
  .bro-box{ width: 100%; border-radius: 26px 26px 0 0; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - .8rem); padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)) }
  .bro-opt{ grid-template-columns: minmax(0, 1fr) auto; gap: .7rem } .bro-ic{ display: none }
}
@media (prefers-reduced-motion: reduce){ .bro, .bro-box, .bro-toast{ transition: none } .bro-box{ translate: 0 0 } }

.wrap{ padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)) }
.cap{ font-size: max(.78rem, 12px) }
.maplink{ display: inline-flex; align-items: center; min-height: 2.75rem }
/* ═════════════════════ Hsela Academy ═════════════════════
   Built on the main site's tokens (--bg, --ink, --hot …). Each course carries its own accent:
   digital marketing = brand orange, AI = violet, website development = emerald. */
:root{
  --acc:#f59e5b; --acc-strong:#e8602c; --acc-t:#a3420f; --acc-h:#c2531a; --acc-rgb:232,96,44; --acc-soft:rgba(232,96,44,.1);
  --card:#ffffff; --card-2:#f7f6f3; --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 50px -32px rgba(20,14,8,.35);
  --r-l:clamp(20px, 2.6vw, 30px); --r-m:18px; --r-s:12px;
  --hdr-space:calc(env(safe-area-inset-top, 0px) + 4.9rem);
  --ok:#157a46; --err:#b42318;
}
.acc-ai{ --acc:#a78bfa; --acc-strong:#7c5cf0; --acc-t:#5f41c9; --acc-h:#6a4bd6; --acc-rgb:124,92,240; --acc-soft:rgba(124,92,240,.1) }
.acc-web{ --acc:#34d399; --acc-strong:#0e9f6e; --acc-t:#08664a; --acc-h:#0b7350; --acc-rgb:14,159,110; --acc-soft:rgba(14,159,110,.1) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --acc-t:#f59e5b; --acc-h:#f59e5b; --card:#111113; --card-2:#17171a; --shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 60px -40px rgba(0,0,0,.9); --ok:#4ade80; --err:#ff8a80 }
  :root:not([data-theme="light"]) .acc-ai{ --acc-t:#bba6ff; --acc-h:#bba6ff }
  :root:not([data-theme="light"]) .acc-web{ --acc-t:#52e3b0; --acc-h:#52e3b0 }
}
:root[data-theme="dark"]{ --acc-t:#f59e5b; --acc-h:#f59e5b; --card:#111113; --card-2:#17171a; --shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 60px -40px rgba(0,0,0,.9); --ok:#4ade80; --err:#ff8a80 }
:root[data-theme="dark"] .acc-ai{ --acc-t:#bba6ff; --acc-h:#bba6ff }
:root[data-theme="dark"] .acc-web{ --acc-t:#52e3b0; --acc-h:#52e3b0 }

html{ scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 8.5rem) }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased }
img{ max-width:100% }
[hidden]{ display:none !important }
:where(.ac) a:focus-visible, :where(.ac) button:focus-visible, :where(.ac) summary:focus-visible, :where(.ac) input:focus-visible, :where(.ac) select:focus-visible, :where(.ac) textarea:focus-visible{ outline:2px solid var(--acc-t); outline-offset:3px }
.skip{ position:absolute; left:-999px; top:.6rem; z-index:300; padding:.6rem 1rem; border-radius:999px; background:#fff; color:#000; font-weight:600; text-decoration:none }
.skip:focus{ left:.75rem }
.btn:hover{ translate:0 -2px } .btn{ transition:translate .25s ease, box-shadow .25s ease, background-color .25s ease }
.btn i{ background:var(--acc-strong) }
.btn--ghost:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent) }
.btn--block{ width:100%; justify-content:space-between }
@media (prefers-reduced-motion: reduce){ .btn:hover{ translate:none } }

/* ── type ── */
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem; padding:.34rem .85rem; border:1px solid var(--line); border-radius:999px; color:var(--acc-t); font-size:.85rem; font-weight:600; letter-spacing:.01em; background:color-mix(in srgb, var(--bg) 70%, transparent) }
.eyebrow::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--acc-strong); box-shadow:0 0 0 4px rgba(var(--acc-rgb), .18) }
.h2 em, .ac-h1 em{ color:var(--acc-h) }
.sec-head{ display:grid; gap:0; justify-items:start; margin-bottom:clamp(1.6rem, 4vw, 3rem) }
.sec-head .h2{ margin-bottom:.9rem; max-width:18ch }
.sec-head--center{ justify-items:center; text-align:center }
.sec-head--center .h2{ max-width:20ch }
.sec-head--center .sec-lead{ margin-inline:auto }
.sec-head--split{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); align-items:end; gap:1rem clamp(2rem, 6vw, 6rem) }
.sec-head--split .sec-lead{ margin:0 }
.sec-lead{ margin-top:0 }
.muted{ color:var(--ink-dim) }

/* ── hero ── */
.ac-hero{ position:relative; isolation:isolate; overflow:hidden; padding:calc(var(--hdr-space) + clamp(1.5rem, 5vw, 4rem)) 0 clamp(3rem, 7vw, 6rem) }
.ac-hero::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:min(70vw, 900px); aspect-ratio:1; z-index:-2; background:radial-gradient(closest-side, rgba(var(--acc-rgb), .2), transparent 70%); pointer-events:none }
.ac-hero::after{ content:""; position:absolute; inset:auto auto -30% -20%; width:min(60vw, 700px); aspect-ratio:1; z-index:-2; background:radial-gradient(closest-side, rgba(var(--acc-rgb), .08), transparent 70%); pointer-events:none }
.ac-hero canvas.bg3d{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.75; pointer-events:none; -webkit-mask:linear-gradient(to bottom, #000 55%, transparent); mask:linear-gradient(to bottom, #000 55%, transparent) }
.ac-hero-in{ display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); align-items:center; gap:clamp(2rem, 5vw, 5rem) }
.crumb{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.2rem; padding:0; list-style:none; font-size:.9rem; color:var(--ink-dim) }
.crumb li+li::before{ content:"/"; margin-right:.4rem; opacity:.6 }
.crumb a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent } .crumb a:hover{ color:var(--ink); border-color:currentColor }
.ac-h1{ margin:0 0 1.2rem; font-size:clamp(2.7rem, 6.6vw, 5.9rem); font-weight:700; line-height:.98; letter-spacing:-.05em; text-wrap:balance }
.ac-h1 em{ font-style:italic; font-weight:600 }
.ac-lead{ margin:0 0 1.8rem; max-width:56ch; color:var(--ink-dim); font-size:clamp(1.05rem, 1.45vw, 1.24rem); line-height:1.62 }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1rem; margin-bottom:1.8rem }
.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none }
.facts li{ display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; border:1px solid var(--line); border-radius:999px; font-size:.86rem; font-weight:500; color:var(--ink); background:color-mix(in srgb, var(--bg) 82%, transparent) }
.facts svg{ width:1rem; height:1rem; color:var(--acc-t); flex:none }

/* price */
.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .8rem; margin:0 0 1.6rem }
.price .now{ font-size:clamp(2rem, 3.6vw, 2.8rem); font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums }
.price .was{ color:var(--ink-dim); font-size:1.1rem; font-weight:500; font-variant-numeric:tabular-nums }
.price .was s{ text-decoration-thickness:2px; text-decoration-color:rgba(var(--acc-rgb), .8) }
.price .save{ align-self:center; padding:.28rem .7rem; border-radius:999px; background:rgba(var(--acc-rgb), .14); color:var(--acc-t); font-size:.82rem; font-weight:700; letter-spacing:.02em }
.price .note{ flex-basis:100%; margin:.2rem 0 0; color:var(--ink-dim); font-size:.9rem }
.surf .price .was{ color:var(--surf-dim) } .surf .price .note{ color:var(--surf-dim) } .surf .price .save{ color:var(--acc); background:rgba(var(--acc-rgb), .2) }

/* hero visuals: sample product screens drawn with HTML and CSS (decorative) */
.mock{ position:relative; min-height:clamp(320px, 38vw, 480px); perspective:1400px }
.win{ position:absolute; border-radius:20px; background:var(--card); color:var(--ink); box-shadow:var(--shadow), 0 0 0 1px var(--line); overflow:hidden }
.win-bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--ink-dim) }
.win-bar i{ width:.6rem; height:.6rem; border-radius:50%; background:var(--line) } .win-bar i:nth-child(1){ background:#ff5f57 } .win-bar i:nth-child(2){ background:#febc2e } .win-bar i:nth-child(3){ background:#28c840 }
.win-bar b{ margin-left:.5rem; font-weight:600; color:var(--ink) }
.win-bar .live{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem } .win-bar .live::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2) }
.tag-sample{ position:absolute; right:.7rem; bottom:.6rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); opacity:.8 }
@media (prefers-reduced-motion: no-preference){
  .float-a{ animation:float 7s ease-in-out infinite } .float-b{ animation:float 8s ease-in-out -2s infinite } .float-c{ animation:float 9s ease-in-out -4s infinite }
  @keyframes float{ 50%{ translate:0 -10px } }
}

/* DM dashboard */
.dash{ inset:6% 4% auto 0; padding-bottom:1.6rem }
.kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; padding:1rem }
.kpi{ padding:.75rem .8rem; border-radius:14px; background:var(--card-2) }
.kpi span{ display:block; font-size:.72rem; color:var(--ink-dim); letter-spacing:.04em }
.kpi b{ display:block; margin-top:.2rem; font-size:clamp(1.05rem, 1.7vw, 1.4rem); letter-spacing:-.03em }
.kpi em{ font-style:normal; font-size:.72rem; font-weight:700; color:var(--ok) }
.bars{ display:flex; align-items:flex-end; gap:3.5%; height:clamp(110px, 12vw, 150px); padding:0 1rem; border-bottom:1px dashed var(--line); margin:0 1rem }
.bars i{ flex:1; height:var(--h); border-radius:8px 8px 3px 3px; background:linear-gradient(to top, rgba(var(--acc-rgb), .55), var(--acc)); transform-origin:bottom }
.bars i:last-child{ background:linear-gradient(to top, var(--acc-strong), #ffb98a) }
@media (prefers-reduced-motion: no-preference){ .is-in .bars i, .ac-hero .bars i{ animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d, 0) * 70ms + 300ms) } @keyframes grow{ from{ scale:1 0 } } }
.chans{ display:flex; gap:.4rem; padding:.9rem 1rem 0; flex-wrap:wrap } .chans span{ padding:.25rem .6rem; border-radius:999px; border:1px solid var(--line); font-size:.72rem; font-weight:600 }
.toast{ position:absolute; right:-2%; bottom:6%; display:flex; align-items:center; gap:.7rem; width:min(78%, 290px); padding:.85rem 1rem; border-radius:16px; background:#0e0e10; color:#f4efe6; box-shadow:0 24px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) }
.toast .ic{ display:grid; place-items:center; flex:none; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--acc-strong); color:#fff } .toast .ic svg{ width:1.1rem; height:1.1rem }
.toast b{ display:block; font-size:.86rem } .toast small{ display:block; color:rgba(244,239,230,.66); font-size:.75rem }

/* AI chat */
.chat{ inset:4% 2% auto 4%; padding-bottom:1.4rem }
.msg{ margin:1rem 1rem 0; padding:.85rem 1rem; border-radius:16px; font-size:.9rem; line-height:1.5; max-width:88% }
.msg--me{ margin-left:auto; background:var(--ink); color:var(--bg); border-bottom-right-radius:5px }
.msg--ai{ background:var(--card-2); border-bottom-left-radius:5px }
.msg--ai .who{ display:flex; align-items:center; gap:.45rem; margin-bottom:.5rem; font-size:.75rem; font-weight:700; color:var(--acc-t) }
.msg--ai .who::before{ content:""; width:1.1rem; height:1.1rem; border-radius:50%; background:conic-gradient(from 90deg, var(--acc), var(--acc-strong), #f59e5b, var(--acc)) }
.line{ display:block; height:.55rem; margin:.45rem 0; border-radius:99px; background:linear-gradient(90deg, rgba(var(--acc-rgb), .35), rgba(var(--acc-rgb), .12)); width:var(--w, 100%) }
@media (prefers-reduced-motion: no-preference){ .line{ transform-origin:left; animation:type 1.3s cubic-bezier(.3,.6,.3,1) both; animation-delay:calc(var(--d, 0) * 220ms + 600ms) } @keyframes type{ from{ scale:0 1; opacity:0 } } }
.typing{ display:inline-flex; gap:.25rem; margin:1rem 0 0 1rem; padding:.6rem .8rem; border-radius:14px; background:var(--card-2) }
.typing i{ width:.4rem; height:.4rem; border-radius:50%; background:var(--acc-t); opacity:.4 }
@media (prefers-reduced-motion: no-preference){ .typing i{ animation:blink 1.2s infinite } .typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s } @keyframes blink{ 40%{ opacity:1; translate:0 -2px } } }
.chips-float{ position:absolute; display:flex; flex-direction:column; gap:.55rem; right:-2%; bottom:4% }
.chip-f{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:999px; background:#0e0e10; color:#f4efe6; font-size:.82rem; font-weight:600; box-shadow:0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) }
.chip-f::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--acc) }

/* Web code editor + preview */
.code{ inset:2% 14% auto 0; background:#0d1117; color:#c9d1d9; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) }
.code .win-bar{ border-color:rgba(255,255,255,.08); color:#8b949e } .code .win-bar b{ color:#e6edf3 }
.code pre{ margin:0; padding:1rem 1.1rem 1.3rem; font:500 clamp(.72rem, 1vw, .84rem)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow:hidden; white-space:pre }
.code .t{ color:#7ee787 } .code .a{ color:#79c0ff } .code .s{ color:#a5d6ff } .code .c{ color:#8b949e } .code .k{ color:#ff7b72 } .code .p{ color:#d2a8ff }
.preview{ inset:auto 0 0 auto; width:62%; padding-bottom:1rem }
.pv-hero{ margin:.9rem; padding:1rem; border-radius:14px; background:linear-gradient(135deg, rgba(var(--acc-rgb), .22), rgba(var(--acc-rgb), .06)) }
.pv-hero .line{ background:var(--ink); opacity:.85; height:.7rem } .pv-hero .line + .line{ opacity:.35; height:.45rem }
.pv-btn{ display:inline-block; margin-top:.6rem; width:40%; height:1.4rem; border-radius:999px; background:var(--acc-strong) }
.pv-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin:0 .9rem } .pv-row i{ height:2.6rem; border-radius:10px; background:var(--card-2) }
.score{ position:absolute; left:-4%; bottom:10%; display:grid; place-items:center; width:6.2rem; aspect-ratio:1; border-radius:50%; background:#0e0e10; color:#4ade80; box-shadow:0 20px 40px -18px rgba(0,0,0,.7) }
.score svg{ position:absolute; inset:.45rem; width:calc(100% - .9rem); height:calc(100% - .9rem); rotate:-90deg }
.score b{ font-size:1.6rem; letter-spacing:-.04em } .score small{ position:absolute; bottom:-1.6rem; width:max-content; color:var(--ink-dim); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase }

/* Academy landing: three course windows stacked */
.stack{ min-height:clamp(420px, 42vw, 540px) }
.stack .win{ width:64%; padding-bottom:1rem }
.stack .w1{ left:0; top:0; z-index:1 } .stack .w2{ right:0; top:38%; z-index:2 } .stack .w3{ left:4%; bottom:0; width:58%; z-index:3 }
.stack .w1{ --acc:#f59e5b; --acc-strong:#e8602c; --acc-rgb:232,96,44 } .stack .w2{ --acc:#a78bfa; --acc-strong:#7c5cf0; --acc-rgb:124,92,240 } .stack .w3{ --acc:#34d399; --acc-strong:#0e9f6e; --acc-rgb:14,159,110 }
.stack .mini{ display:flex; align-items:center; gap:.8rem; padding:1rem 1rem .3rem }
.stack .mini .ic{ display:grid; place-items:center; flex:none; width:2.6rem; height:2.6rem; border-radius:12px; background:rgba(var(--acc-rgb), .16); color:var(--acc-strong) }
.stack .mini .ic svg{ width:1.35rem; height:1.35rem }
.stack .mini b{ display:block; font-size:1rem; letter-spacing:-.02em } .stack .mini small{ color:var(--ink-dim); font-size:.78rem }
.stack .bars{ height:70px; margin-top:.6rem } .stack .w2 .line{ margin:.5rem 1rem } .stack .w3 pre{ margin:.5rem 1rem 0; font:500 .72rem/1.6 ui-monospace, Menlo, Consolas, monospace; color:var(--ink-dim); white-space:pre; overflow:hidden }
.stack .w3 pre b{ color:var(--acc-strong); font-weight:600 }
/* ── sub navigation on course pages ── */
.subnav{ position:sticky; top:calc(env(safe-area-inset-top, 0px) + 4.75rem); z-index:50; border-block:1px solid var(--line); background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:top .35s ease }
html:has(.sh-hdr.is-hidden) .subnav{ top:env(safe-area-inset-top, 0px) }
.subnav-in{ display:flex; align-items:center; gap:1rem; max-width:80rem; margin-inline:auto; padding-inline:max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)) }
.subnav ul{ display:flex; gap:clamp(.2rem, 1.6vw, 1.4rem); margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; flex:1 }
.subnav ul::-webkit-scrollbar{ display:none }
.subnav ul a{ display:inline-flex; align-items:center; min-height:3rem; padding:0 .45rem; color:var(--ink-dim); font-size:.92rem; font-weight:600; text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent }
.subnav ul a:hover{ color:var(--ink) } .subnav ul a.is-on{ color:var(--ink); border-bottom-color:var(--acc-strong) }
.subnav .mini-price{ display:flex; align-items:center; gap:.8rem; flex:none; font-variant-numeric:tabular-nums }
.subnav .mini-price b{ font-size:1.05rem; letter-spacing:-.02em } .subnav .mini-price s{ color:var(--ink-dim); font-size:.85rem }
.subnav .btn{ padding:.45rem .45rem .45rem 1.1rem; font-size:.9rem; box-shadow:none } .subnav .btn i{ width:1.8rem; height:1.8rem }
@media (max-width: 760px){ .subnav .mini-price{ display:none } }

/* ── cards and grids ── */
.tile{ position:relative; display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.2rem, 2.2vw, 1.6rem); border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); box-shadow:var(--shadow); transition:translate .3s ease, border-color .3s ease, box-shadow .3s ease }
.tile:hover{ translate:0 -4px; border-color:rgba(var(--acc-rgb), .55); box-shadow:var(--shadow), 0 20px 40px -26px rgba(var(--acc-rgb), .6) }
.tile h3{ margin:0; font-size:1.12rem; font-weight:700; letter-spacing:-.02em; line-height:1.25 }
.tile p{ margin:0; color:var(--ink-dim); font-size:.97rem; line-height:1.58 }
.ico{ display:grid; place-items:center; width:2.8rem; height:2.8rem; margin-bottom:.4rem; border-radius:14px; background:rgba(var(--acc-rgb), .13); color:var(--acc-t) }
.ico svg{ width:1.35rem; height:1.35rem }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
@media (prefers-reduced-motion: reduce){ .tile, .tile:hover{ transition:none; translate:none } }

/* pillars (landing) */
.pillars{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--line) }
.pillar{ padding:clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.4vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem) 0 }
.pillar + .pillar{ padding-left:clamp(1rem, 2.4vw, 2.2rem); border-left:1px solid var(--line) }
.pillar .n{ display:block; margin-bottom:1.6rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-t) }
.pillar h3{ margin:0 0 .6rem; font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:700; letter-spacing:-.035em; line-height:1.08 }
.pillar p{ margin:0; color:var(--ink-dim); line-height:1.62; max-width:34ch }

/* course cards (landing) */
.courses{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.9rem, 1.8vw, 1.4rem) }
.course{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-l); background:var(--surf); color:var(--surf-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.8); transition:translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease }
.course:hover{ translate:0 -6px; box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .7), 0 40px 70px -40px rgba(var(--acc-rgb), .7) }
.course-art{ position:relative; height:clamp(150px, 15vw, 190px); background:radial-gradient(70% 90% at 80% 0%, rgba(var(--acc-rgb), .55), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(var(--acc-rgb), .2), transparent 70%), #0c0c0e; overflow:hidden }
.course-art svg{ position:absolute; inset:auto 1.2rem 1rem auto; width:62%; height:auto }
.course-art .num{ position:absolute; left:1.4rem; top:1.2rem; font-size:.8rem; font-weight:700; letter-spacing:.16em; color:rgba(244,239,230,.75) }
.course-body{ display:flex; flex-direction:column; gap:.9rem; flex:1; padding:clamp(1.3rem, 2.2vw, 1.8rem) }
.course h3{ margin:0; font-size:clamp(1.45rem, 2.2vw, 1.9rem); font-weight:700; letter-spacing:-.035em; line-height:1.08 }
.course p{ margin:0; color:var(--surf-dim); line-height:1.6 }
.course .chips li{ font-size:.78rem }
.course .price{ margin:auto 0 0; padding-top:1rem; border-top:1px solid var(--surf-line) }
.course .price .now{ font-size:1.9rem }
.course .price .was{ color:var(--surf-dim) } .course .price .save{ color:var(--acc); background:rgba(var(--acc-rgb), .22) }
.acc-ai.course .price .save{ color:#c4b5fd } .acc-web.course .price .save{ color:#6ee7b7 }
.course-cta{ display:flex; flex-wrap:wrap; gap:.6rem }
.course-cta .btn{ flex:1 1 auto; justify-content:space-between }
.course-cta .btn--ghost{ color:var(--surf-ink); border-color:rgba(255,255,255,.28); justify-content:center } .course-cta .btn--ghost:hover{ background:rgba(255,255,255,.08) }
.course .btn:not(.btn--ghost){ background:var(--surf-ink); color:#131315 }
.course a.stretch{ color:inherit; text-decoration:none } .course a.stretch:hover{ text-decoration:underline; text-underline-offset:.2em }
@media (prefers-reduced-motion: reduce){ .course, .course:hover{ transition:none; translate:none } }

/* surf (dark) panels follow the page accent */
.surf.acc-glow{ background:radial-gradient(60% 90% at var(--gx, 88%) var(--gy, 0%), rgba(var(--acc-rgb), .36), transparent 62%), radial-gradient(45% 60% at 28% 108%, rgba(255, 236, 205, .08), transparent 70%), var(--surf) }
.surf .h2 em, .surf em{ color:var(--acc) }
.surf .sec-lead{ color:var(--surf-dim) }
.acc-ai .surf em, .acc-ai .surf .h2 em{ color:#c4b5fd } .acc-web .surf em, .acc-web .surf .h2 em{ color:#6ee7b7 }

/* stats band */
.statband{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(.8rem, 2.4vw, 2.4rem); padding:clamp(1.6rem, 4vw, 3rem) }
.statband dt{ margin:0; padding-bottom:.8rem; border-bottom:1px solid var(--surf-line); font-size:clamp(2.4rem, 5.4vw, 4.4rem); font-weight:700; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.statband dd{ margin:.8rem 0 0; font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--surf-dim) }
.statband > div{ min-width:0 }

/* benefits bento */
.bento{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.bento .tile{ grid-column:span 3; min-height:12rem; justify-content:space-between }
.bento .tile:nth-child(1), .bento .tile:nth-child(4){ grid-column:span 4 } .bento .tile:nth-child(2), .bento .tile:nth-child(3){ grid-column:span 2 }
.bento .tile:nth-child(1){ background:radial-gradient(80% 120% at 100% 0%, rgba(var(--acc-rgb), .16), transparent 60%), var(--card) }
.bento .tile .big{ font-size:clamp(2.6rem, 4vw, 3.4rem); font-weight:700; letter-spacing:-.05em; line-height:1; color:var(--acc-t) }

/* outcomes checklist */
.split{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(2rem, 6vw, 6rem); align-items:start }
.checks{ display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line) }
.checks li{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1rem; align-items:start; padding:1.05rem 0; border-bottom:1px solid var(--line); font-size:clamp(1.02rem, 1.4vw, 1.15rem); line-height:1.5 }
.checks svg{ width:1.5rem; height:1.5rem; margin-top:.05rem; padding:.25rem; border-radius:50%; background:rgba(var(--acc-rgb), .14); color:var(--acc-t) }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin:0; padding:0; list-style:none; counter-reset:s }
.steps li{ position:relative; padding:1.6rem 1.4rem 0 0; counter-increment:s }
.steps li::before{ content:"0" counter(s); display:block; margin-bottom:1rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; color:var(--acc-t) }
.steps li::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--acc-strong), rgba(var(--acc-rgb), .15)) }
.steps h3{ margin:0 0 .4rem; font-size:1.3rem; letter-spacing:-.03em } .steps p{ margin:0; color:var(--ink-dim); line-height:1.55 }

/* training modes */
.modes{ margin-top:clamp(2.2rem, 5vw, 3.4rem) }
.modes .tile ul{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; padding:0; list-style:none }
.modes .tile li{ padding:.25rem .65rem; border-radius:999px; background:var(--card-2); font-size:.8rem; font-weight:500 }

/* logos */
.logos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(.6rem, 1.4vw, 1rem) }
.logos .logo-tile{ aspect-ratio:3 / 2 }

/* mentors */
.mentors{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.mentor{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1.2rem; align-items:center; padding:1.2rem; border:1px solid var(--line); border-radius:var(--r-m); background:var(--card) }
.mentor .ph{ display:grid; place-items:end center; width:6.5rem; aspect-ratio:1; overflow:hidden; border-radius:50%; background:radial-gradient(circle at 50% 30%, rgba(var(--acc-rgb), .45), rgba(var(--acc-rgb), .12)) }
.mentor .ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 10% }
.mentor .ph span{ align-self:center; font-size:2rem; font-weight:700; letter-spacing:-.04em; color:var(--acc-t) }
.mentor h3{ margin:0; font-size:1.2rem; letter-spacing:-.02em } .mentor .role{ margin:.15rem 0 .5rem; color:var(--acc-t); font-size:.88rem; font-weight:600 } .mentor p{ margin:0; color:var(--ink-dim); line-height:1.55; font-size:.96rem }
/* curriculum accordion */
.curri{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); counter-reset:m }
.curri > li{ border-bottom:1px solid var(--line); counter-increment:m }
.curri details > summary{ display:grid; grid-template-columns:3.2rem minmax(0, 1fr) auto; align-items:center; gap:1rem; padding:1.15rem 0; cursor:pointer; list-style:none }
.curri details > summary::-webkit-details-marker{ display:none }
.curri summary::before{ content:counter(m, decimal-leading-zero); font-size:.85rem; font-weight:700; letter-spacing:.1em; color:var(--acc-t) }
.curri summary h3{ margin:0; font-size:clamp(1.1rem, 1.8vw, 1.4rem); font-weight:600; letter-spacing:-.025em; line-height:1.25 }
.curri summary small{ display:block; margin-top:.15rem; color:var(--ink-dim); font-size:.85rem; font-weight:500 }
.plus{ position:relative; display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%; transition:rotate .3s ease, background-color .3s ease }
.plus::before, .plus::after{ content:""; position:absolute; width:.8rem; height:2px; border-radius:2px; background:currentColor } .plus::after{ rotate:90deg; transition:rotate .3s ease }
details[open] > summary .plus{ background:var(--ink); color:var(--bg); border-color:var(--ink) } details[open] > summary .plus::after{ rotate:0deg }
.curri .body{ padding:0 0 1.3rem 4.2rem }
.curri .body ul{ display:grid; gap:.55rem; margin:0; padding:0; list-style:none }
.curri .body li{ display:flex; gap:.7rem; color:var(--ink-dim); line-height:1.5 } .curri .body li::before{ content:""; flex:none; width:.45rem; height:.45rem; margin-top:.55rem; border-radius:50%; background:var(--acc-strong) }
.curri-foot{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:1.4rem; color:var(--ink-dim); font-size:.95rem }
@media (prefers-reduced-motion: reduce){ .plus, .plus::after{ transition:none } }

/* tools cloud */
.cloud{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; list-style:none }
.cloud li{ padding:.6rem 1.05rem; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:.95rem; font-weight:600; letter-spacing:-.01em; transition:border-color .2s ease, translate .2s ease }
.cloud li:hover{ border-color:rgba(var(--acc-rgb), .6); translate:0 -2px }

/* projects */
.projects{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.project{ display:flex; flex-direction:column; justify-content:space-between; gap:2.4rem; min-height:14rem; padding:clamp(1.4rem, 2.6vw, 2.2rem) }
.project .pn{ font-size:.8rem; font-weight:700; letter-spacing:.16em; color:var(--acc) }
.project h3{ margin:0 0 .5rem; font-size:clamp(1.35rem, 2.2vw, 1.8rem); font-weight:700; letter-spacing:-.03em; line-height:1.1 }
.project p{ margin:0; color:var(--surf-dim); line-height:1.6; max-width:46ch }
.acc-ai .project .pn{ color:#c4b5fd } .acc-web .project .pn{ color:#6ee7b7 }

/* careers */
.roles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(1.5rem, 4vw, 4rem); margin:0; padding:0; list-style:none; border-top:1px solid var(--line) }
.roles li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.2rem 1rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line) }
.roles h3{ margin:0; font-size:1.15rem; letter-spacing:-.02em } .roles p{ grid-column:1; margin:0; color:var(--ink-dim); font-size:.95rem; line-height:1.5 }
.roles svg{ grid-row:1 / span 2; grid-column:2; width:1.2rem; height:1.2rem; color:var(--acc-t) }
.note-line{ margin:1.2rem 0 0; color:var(--ink-dim); font-size:.92rem }

/* pricing */
.pricing{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(1.5rem, 4vw, 4rem); align-items:center; padding:clamp(1.6rem, 4.5vw, 3.6rem) }
.pricing .h2{ margin-bottom:1rem; font-size:clamp(2rem, 4.4vw, 3.6rem) }
.pricing .price .now{ font-size:clamp(3rem, 6vw, 4.8rem) }
.incl{ display:grid; gap:.75rem; margin:0 0 1.6rem; padding:0; list-style:none }
.incl li{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.8rem; align-items:start; color:var(--surf-ink); line-height:1.5 }
.incl svg{ width:1.3rem; height:1.3rem; padding:.2rem; border-radius:50%; background:rgba(var(--acc-rgb), .25); color:var(--acc) }
.acc-ai .incl svg{ color:#c4b5fd } .acc-web .incl svg{ color:#6ee7b7 }
.pricing .btn{ background:var(--surf-ink); color:#131315 }
.coupon-hint{ display:flex; align-items:center; gap:.6rem; margin:1rem 0 0; color:var(--surf-dim); font-size:.92rem }
.coupon-hint svg{ width:1.1rem; height:1.1rem; color:var(--acc); flex:none }
.secure{ display:flex; align-items:center; gap:.55rem; margin:1rem 0 0; color:var(--surf-dim); font-size:.86rem } .secure svg{ width:1rem; height:1rem; flex:none }

/* FAQ */
.faq{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line) }
.faq li{ border-bottom:1px solid var(--line) }
.faq summary{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:1rem; align-items:center; padding:1.2rem 0; cursor:pointer; list-style:none; font-size:clamp(1.05rem, 1.6vw, 1.25rem); font-weight:600; letter-spacing:-.02em; line-height:1.35 }
.faq summary::-webkit-details-marker{ display:none }
.faq .ans{ padding:0 3.4rem 1.3rem 0; color:var(--ink-dim); line-height:1.65; max-width:70ch }
.faq .ans a{ color:var(--ink); text-underline-offset:.2em }
.faq-wrap{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(2rem, 6vw, 6rem); align-items:start }
.faq-wrap .side p{ color:var(--ink-dim); line-height:1.6 }

/* final CTA */
.final{ text-align:center; padding:clamp(2.6rem, 7vw, 5.6rem) clamp(1.4rem, 4vw, 3rem) }
.final .h2{ max-width:16ch; margin-inline:auto; font-size:clamp(2.4rem, 6.5vw, 5.2rem) }
.final p{ margin:0 auto 2rem; max-width:44ch; color:var(--surf-dim); font-size:clamp(1rem, 1.5vw, 1.15rem); line-height:1.6 }
.final .cta-row .btn:not(.btn--ghost){ background:var(--surf-ink); color:#131315 }
.final .btn--ghost{ color:var(--surf-ink); border-color:rgba(255,255,255,.3) } .final .btn--ghost:hover{ background:rgba(255,255,255,.08) }

/* contact */
.contact-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(.8rem, 1.6vw, 1.2rem) }
.contact-grid a.tile, .contact-grid div.tile{ color:var(--ink); text-decoration:none }
.contact-grid .tile b{ font-size:1.05rem; letter-spacing:-.01em; overflow-wrap:anywhere } .contact-grid .tile span{ color:var(--ink-dim); font-size:.9rem }
.contact-grid .tile.wa{ background:#0e0e10; color:#f4efe6; border-color:transparent } .contact-grid .tile.wa span{ color:rgba(244,239,230,.7) } .contact-grid .tile.wa .ico{ background:#25d366; color:#06210f }

/* for whom */
.who .tile h3{ font-size:1.2rem }

/* sticky mobile enrol bar */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:58; display:none; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem max(1rem, env(safe-area-inset-right, 0px)) calc(.7rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); translate:0 110%; transition:translate .35s ease }
.sticky-cta.is-on{ translate:0 0 }
.sticky-cta .p b{ display:block; font-size:1.2rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums } .sticky-cta .p s{ color:var(--ink-dim); font-size:.82rem } .sticky-cta .p small{ color:var(--acc-t); font-weight:700; font-size:.78rem; margin-left:.3rem }
.sticky-cta .btn{ padding:.5rem .5rem .5rem 1.1rem; box-shadow:none } .sticky-cta .btn i{ width:2rem; height:2rem }
@media (max-width: 860px){ .sticky-cta{ display:flex } html.has-sticky .hm-reader{ bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px)) } }
@media (prefers-reduced-motion: reduce){ .sticky-cta{ transition:none } }

/* legal pages */
.prose{ max-width:46rem }
.prose h2{ margin:2.4rem 0 .8rem; font-size:clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing:-.025em; line-height:1.2 }
.prose p, .prose li{ color:var(--ink-dim); line-height:1.7 } .prose ul{ padding-left:1.2rem } .prose li{ margin:.35rem 0 }
.prose a{ color:var(--ink); text-underline-offset:.2em } .prose strong{ color:var(--ink) }
.prose .updated{ font-size:.92rem }
.legal-note{ padding:1rem 1.2rem; border-left:3px solid var(--acc-strong); border-radius:0 12px 12px 0; background:var(--card-2) }

/* footer legal links (also added to the main site) */
.sh-legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem }
.sh-shake{ opacity:1; color:var(--surf-dim) }
/* ═════════ Enrolment ═════════ */
.enrol-hero{ padding:calc(var(--hdr-space) + clamp(1rem, 4vw, 3rem)) 0 clamp(1.4rem, 3vw, 2.4rem) }
.enrol-hero .ac-h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); margin-bottom:.8rem }
.progress{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:1.4rem 0 0; padding:0; list-style:none; counter-reset:p }
.progress li{ display:flex; align-items:center; gap:.6rem; color:var(--ink-dim); font-weight:600; font-size:.95rem; counter-increment:p }
.progress li::before{ content:counter(p); display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--line); font-size:.85rem }
.progress li.is-on{ color:var(--ink) } .progress li.is-on::before{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.progress li.is-done::before{ content:"✓"; background:var(--acc-strong); border-color:var(--acc-strong); color:#fff }
.enrol{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, .85fr); gap:clamp(1.4rem, 3.4vw, 3rem); align-items:start; padding-bottom:clamp(3rem, 8vw, 6rem) }
.panel{ padding:clamp(1.3rem, 3vw, 2.2rem); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--shadow) }
.panel + .panel{ margin-top:1.2rem }
.panel h2{ display:flex; align-items:center; gap:.7rem; margin:0 0 .4rem; font-size:clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing:-.03em }
.panel h2 .n{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--ink); color:var(--bg); font-size:.9rem }
.panel > p.hint{ margin:0 0 1.3rem; color:var(--ink-dim) }
.pick{ display:grid; gap:.7rem; margin:0; padding:0; border:0 }
.pick legend{ padding:0; margin-bottom:.7rem }
.opt{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1.5px solid var(--line); border-radius:16px; background:var(--card); cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease }
.opt:hover{ border-color:rgba(var(--acc-rgb), .55) }
.opt input{ position:absolute; opacity:0; width:1px; height:1px }
.opt .dot{ display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; border:2px solid var(--line) }
.opt .dot::after{ content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--acc-strong); scale:0; transition:scale .2s ease }
.opt:has(input:checked){ border-color:var(--acc-strong); background:rgba(var(--acc-rgb), .06); box-shadow:0 0 0 4px rgba(var(--acc-rgb), .12) }
.opt:has(input:checked) .dot{ border-color:var(--acc-strong) } .opt:has(input:checked) .dot::after{ scale:1 }
.opt:has(input:focus-visible){ outline:2px solid var(--acc-t); outline-offset:3px }
.opt .t b{ display:block; font-size:1.05rem; letter-spacing:-.02em } .opt .t small{ color:var(--ink-dim); font-size:.86rem; line-height:1.4 }
.opt .pr{ text-align:right; font-variant-numeric:tabular-nums } .opt .pr b{ display:block; font-size:1.1rem } .opt .pr s{ color:var(--ink-dim); font-size:.82rem }
.opt.acc-dm{ --acc-strong:#e8602c; --acc-rgb:232,96,44 } .opt.acc-ai{ --acc-strong:#7c5cf0; --acc-rgb:124,92,240 } .opt.acc-web{ --acc-strong:#0e9f6e; --acc-rgb:14,159,110 }
.fields{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem 1.1rem }
.field{ display:grid; gap:.4rem; align-content:start; min-width:0 }
.field.full{ grid-column:1 / -1 }
.field label, .field .lbl{ font-weight:600; font-size:.95rem }
.field label .opt-tag{ margin-left:.35rem; color:var(--ink-dim); font-weight:500; font-size:.85rem }
.field input, .field select, .field textarea{ width:100%; min-height:3.1rem; padding:.75rem .95rem; border:1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius:14px; background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease }
.field textarea{ min-height:5.5rem; resize:vertical }
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size:.35rem .35rem; background-repeat:no-repeat; padding-right:2.4rem }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:color-mix(in srgb, var(--ink) 40%, transparent) }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--acc-strong); box-shadow:0 0 0 4px rgba(var(--acc-rgb), .14); outline:none }
.field .help{ color:var(--ink-dim); font-size:.84rem }
.field .err{ display:none; color:var(--err); font-size:.88rem; font-weight:600 }
.field.has-err input, .field.has-err select, .field.has-err textarea{ border-color:var(--err) }
.field.has-err .err{ display:block }
.more{ margin-top:1.2rem; border-top:1px solid var(--line) }
.more > summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; cursor:pointer; list-style:none; font-weight:600 }
.more > summary::-webkit-details-marker{ display:none }
.more > summary small{ color:var(--ink-dim); font-weight:500 }
.consent{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.8rem; align-items:start; margin-top:1.3rem; font-size:.95rem; line-height:1.55; color:var(--ink-dim) }
.consent input{ width:1.3rem; height:1.3rem; margin:.1rem 0 0; accent-color:var(--acc-strong) }
.consent a{ color:var(--ink); text-underline-offset:.2em }
.consent.has-err{ color:var(--err) }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden }
.form-msg{ margin:1rem 0 0; padding:.85rem 1rem; border-radius:12px; font-weight:600; line-height:1.5 }
.form-msg[hidden]{ display:none }
.form-msg.bad{ background:color-mix(in srgb, var(--err) 12%, transparent); color:var(--err) }
.form-msg.ok{ background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok) }
.pay-btn{ width:100%; justify-content:space-between; margin-top:1.4rem; padding-block:.8rem; font-size:1.05rem }
.pay-btn[disabled]{ opacity:.6; cursor:progress; translate:none }
.pay-btn .spin{ display:none }
.pay-btn[aria-busy="true"] .spin{ display:inline-block } .pay-btn[aria-busy="true"] .arr{ display:none }
.spin{ width:1.1rem; height:1.1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite }
@keyframes spin{ to{ rotate:360deg } }
.trust{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1rem 0 0; padding:0; list-style:none; color:var(--ink-dim); font-size:.86rem }
.trust li{ display:flex; align-items:center; gap:.4rem } .trust svg{ width:1rem; height:1rem; color:var(--ok) }

/* order summary */
.summary{ position:sticky; top:calc(var(--hdr-space) + 1rem); padding:clamp(1.3rem, 3vw, 2rem) }
.summary h2{ margin:0 0 1.1rem; font-size:1.2rem; letter-spacing:-.02em }
.summary .course-name{ display:flex; align-items:center; gap:.8rem; padding:0 0 1.1rem; border-bottom:1px solid var(--surf-line) }
.summary .course-name .ic{ display:grid; place-items:center; flex:none; width:2.6rem; height:2.6rem; border-radius:12px; background:rgba(var(--acc-rgb), .22); color:var(--acc) } .summary .course-name .ic svg{ width:1.3rem; height:1.3rem }
.summary .course-name b{ display:block; font-size:1.05rem } .summary .course-name small{ color:var(--surf-dim); font-size:.85rem }
.lines{ display:grid; gap:.7rem; margin:1.1rem 0; padding:0 0 1.1rem; border-bottom:1px solid var(--surf-line) }
.lines div{ display:flex; justify-content:space-between; gap:1rem; color:var(--surf-dim); font-variant-numeric:tabular-nums }
.lines dd{ margin:0; color:var(--surf-ink) } .lines dt{ margin:0 }
.lines .disc dd{ color:#6ee7b7 } .lines s{ color:var(--surf-dim) }
.total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.total span{ color:var(--surf-dim) } .total b{ font-size:clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.saving{ margin:.6rem 0 0; color:#6ee7b7; font-weight:600; font-size:.92rem }
.coupon{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--surf-line) }
.coupon label{ display:block; margin-bottom:.5rem; font-weight:600; font-size:.92rem }
.coupon .row{ display:flex; gap:.5rem }
.coupon input{ flex:1; min-width:0; min-height:2.9rem; padding:.6rem .9rem; border:1.5px solid rgba(255,255,255,.22); border-radius:12px; background:rgba(255,255,255,.06); color:var(--surf-ink); font:inherit; text-transform:uppercase; letter-spacing:.06em }
.coupon input::placeholder{ text-transform:none; letter-spacing:0; color:rgba(244,239,230,.55) }
.coupon input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(var(--acc-rgb), .25) }
.coupon button{ flex:none; min-height:2.9rem; padding:0 1.1rem; border:0; border-radius:12px; background:var(--surf-ink); color:#131315; font-family:inherit; font-weight:700; font-size:.92rem; line-height:1; cursor:pointer }
.coupon button:disabled{ opacity:.6; cursor:progress }
.coupon .msg{ min-height:1.4rem; margin:.55rem 0 0; font-size:.9rem; font-weight:600 }
.coupon .msg.ok{ color:#6ee7b7 } .coupon .msg.bad{ color:#ffb4ab }
.coupon .applied{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem .9rem; border-radius:12px; background:rgba(110,231,183,.12); color:#6ee7b7; font-weight:700 }
.coupon .applied button{ min-height:2.2rem; padding:0 .8rem; background:transparent; color:var(--surf-ink); border:1px solid rgba(255,255,255,.25) }
.summary .help-line{ margin:1.2rem 0 0; color:var(--surf-dim); font-size:.88rem; line-height:1.55 } .summary .help-line a{ color:var(--surf-ink) }

/* results */
.result{ text-align:center; padding:clamp(2rem, 6vw, 4rem) clamp(1.3rem, 4vw, 3rem) }
.result .badge-ic{ display:grid; place-items:center; width:5rem; height:5rem; margin:0 auto 1.4rem; border-radius:50%; background:rgba(21,122,70,.14); color:var(--ok) }
.result .badge-ic svg{ width:2.4rem; height:2.4rem }
.result.fail .badge-ic{ background:color-mix(in srgb, var(--err) 14%, transparent); color:var(--err) }
.result.wait .badge-ic{ background:rgba(var(--acc-rgb), .14); color:var(--acc-t) }
.result h2{ justify-content:center; margin:0 0 .7rem; font-size:clamp(1.9rem, 4vw, 2.8rem); letter-spacing:-.04em }
.result p{ max-width:46ch; margin:0 auto 1rem; color:var(--ink-dim); line-height:1.6 }
.result .rid{ display:inline-flex; flex-direction:column; gap:.2rem; margin:.6rem auto 1.4rem; padding:.9rem 1.4rem; border:1px dashed var(--line); border-radius:14px }
.result .rid small{ color:var(--ink-dim); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase } .result .rid b{ font:700 1.35rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.06em }
.result .cta-row{ margin-top:.6rem }
@media (prefers-reduced-motion: no-preference){ .result .badge-ic svg path{ stroke-dasharray:40; stroke-dashoffset:40; animation:draw .7s .2s ease forwards } @keyframes draw{ to{ stroke-dashoffset:0 } } }
.resume{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.4rem; margin:0 0 1.2rem; padding:1rem 1.2rem; border:1px solid rgba(var(--acc-rgb), .45); border-radius:16px; background:rgba(var(--acc-rgb), .08) }
.resume[hidden]{ display:none }
.resume p{ margin:0; line-height:1.5 } .resume .acts{ display:flex; flex-wrap:wrap; gap:.6rem }
.resume button{ min-height:2.6rem; padding:0 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:inherit; font-weight:600; font-size:.9rem; line-height:1; cursor:pointer }
.resume button.primary{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.noscript{ padding:1rem 1.2rem; border-radius:14px; background:var(--card-2); font-weight:600 }
.enrol-page .hm-reader{ display:none }
.test-banner{ margin:0 0 1rem; padding:.7rem 1rem; border-radius:12px; background:#fff4e5; color:#7a4100; font-size:.9rem; font-weight:600 }
.test-banner[hidden]{ display:none }
/* ═════════ Responsive ═════════ */
@media (max-width: 1100px){
  .grid-4, .contact-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .statband{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 980px){
  .ac-hero-in, .split, .faq-wrap, .pricing, .enrol, .sec-head--split{ grid-template-columns:minmax(0, 1fr) }
  .mock{ min-height:clamp(300px, 70vw, 440px); max-width:560px; width:100% }
  .courses{ grid-template-columns:minmax(0, 1fr); max-width:560px }
  .grid-3, .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .bento .tile, .bento .tile:nth-child(n){ grid-column:auto }
  .pillars{ grid-template-columns:minmax(0, 1fr) }
  .pillar, .pillar + .pillar{ padding:1.5rem 0; border-left:0; border-bottom:1px solid var(--line) }
  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.6rem 0 }
  .summary{ position:static }
  .enrol-side{ order:-1 }
}
@media (max-width: 680px){
  .grid-3, .grid-2, .grid-4, .bento, .projects, .roles, .mentors, .logos, .contact-grid, .fields{ grid-template-columns:minmax(0, 1fr) }
  .logos{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .statband{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.4rem 1rem }
  .steps{ grid-template-columns:minmax(0, 1fr) }
  .hero-cta .btn{ width:100%; justify-content:space-between }
  .hero-cta .btn--ghost{ justify-content:center }
  .curri .body{ padding-left:0 }
  .curri details > summary{ grid-template-columns:2.4rem minmax(0, 1fr) auto }
  .faq .ans{ padding-right:0 }
  .mentor{ grid-template-columns:minmax(0, 1fr); text-align:left }
  .opt{ grid-template-columns:auto minmax(0, 1fr); } .opt .pr{ grid-column:2; text-align:left; display:flex; gap:.5rem; align-items:baseline }
  .kpis{ gap:.4rem; padding:.8rem } .kpi{ padding:.55rem .6rem }
  .toast{ right:0; width:86% }
  .chips-float{ right:0 }
  .code{ inset:0 6% auto 0 } .preview{ width:70% }
  .score{ left:0; width:5.2rem }
  .stack{ min-height:440px } .stack .win{ width:86% } .stack .w2{ top:31% } .stack .w3{ left:0; width:80% }
  .resume{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 400px){
  .statband dt{ font-size:2.3rem }
  .course-cta{ flex-direction:column } .course-cta .btn{ width:100% }
}
@media print{
  .sh-hdr, .sh-menu, .hm-reader, .sticky-cta, .subnav, canvas{ display:none !important }
  .ac-hero{ padding-top:1rem }
}

.sh-menu li:nth-child(1) a{ --k:0 } .sh-menu li:nth-child(2) a{ --k:1 } .sh-menu li:nth-child(3) a{ --k:2 } .sh-menu li:nth-child(4) a{ --k:3 } .sh-menu li:nth-child(5) a{ --k:4 } .sh-menu li:nth-child(6) a{ --k:5 }
.sr-svg{ position:absolute }
.bars i:nth-child(1){ --h:34%; --d:0 }.bars i:nth-child(2){ --h:46%; --d:1 }.bars i:nth-child(3){ --h:40%; --d:2 }.bars i:nth-child(4){ --h:58%; --d:3 }.bars i:nth-child(5){ --h:52%; --d:4 }.bars i:nth-child(6){ --h:70%; --d:5 }.bars i:nth-child(7){ --h:64%; --d:6 }.bars i:nth-child(8){ --h:82%; --d:7 }.bars i:nth-child(9){ --h:96%; --d:8 }
.line:nth-child(1){ --w:92%; --d:0 }.line:nth-child(2){ --w:100%; --d:1 }.line:nth-child(3){ --w:86%; --d:2 }.line:nth-child(4){ --w:64%; --d:3 }.line:nth-child(5){ --w:78%; --d:4 }
.msg--ai .line:nth-child(2){ --w:96% } .msg--ai .line:nth-child(3){ --w:88%; --d:1 } .msg--ai .line:nth-child(4){ --w:70%; --d:2 } .msg--ai .line:nth-child(5){ --w:52%; --d:3 }