/* HSE Hub "Safety Knowledge Ecosystem" theme (owner-approved 2026-10-08).
   Dark forest green with a blueprint grid, glass cards, a mint accent for
   interactive states, Clash Display headings and Plus Jakarta Sans text.
   Loaded after styles.css on every page. All visual rules apply only in the
   dark theme (:root[data-theme="dark"]), which is the default; choosing light with the theme
   switch shows the previous light design unchanged. Fonts are self-hosted
   (Clash Display: Fontshare ITF Free Font Licence; Plus Jakarta Sans: SIL OFL). */

@font-face{font-family:'Clash Display';src:url('/assets/fonts/clash-display/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/assets/fonts/clash-display/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-latin-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------- tokens */
:root[data-theme="dark"]{
  color-scheme:dark;
  --eco-deep:#04140e; --eco-deeper:#080d0b; --eco-mint:#10b981; --eco-accent:#3cd070;
  --eco-line:rgba(16,185,129,.16); --eco-line-strong:rgba(60,208,112,.45);
  --eco-glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --eco-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --eco-display:'Clash Display','Plus Jakarta Sans',-apple-system,"Segoe UI",system-ui,sans-serif;
  --eco-ease:cubic-bezier(.16,1,.3,1);
  --ap-font:var(--eco-sans); --font-head:var(--eco-sans); --font-body:var(--eco-sans);
  --bg:#06140f; --bg-alt:#081a13; --surface:#0b2018; --surface-raised:#0e261d;
  --fg:#f1f6f3; --fg-muted:#a9bab2; --fg-subtle:#8a9d93;
  --border:var(--eco-line); --border-strong:rgba(16,185,129,.32);
  --brand:var(--eco-accent); --brand-strong:var(--eco-accent); --brand-soft:rgba(60,208,112,.12);
  --brand-400:var(--eco-accent); --brand-500:var(--eco-mint);
  --accent:var(--eco-accent); --accent-400:var(--eco-accent); --accent-500:var(--eco-accent); --accent-strong:var(--eco-accent);
  --ring:var(--eco-accent);
  --ap-tile:#0b2018; --ap-on-tile:#f1f6f3; --ap-on-tile-muted:#a9bab2; --ap-tile-action:var(--eco-accent);
  --shadow-sm:none; --shadow-md:0 10px 30px -10px rgba(0,0,0,.55); --shadow-lg:0 20px 40px rgba(4,20,14,.5); --shadow-brand:none;
}

/* ---------------------------------------------------------------- canvas */
:root[data-theme="dark"] body{background:radial-gradient(1200px 700px at 15% -10%,rgba(16,185,129,.08),transparent 60%),linear-gradient(180deg,var(--eco-deep),var(--eco-deeper)) fixed;color:var(--fg-muted);font-family:var(--eco-sans)}
/* Blueprint grid with micro-dots where the lines cross */
:root[data-theme="dark"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(16,185,129,.22) 1px,transparent 1.5px) 0 0/48px 48px,
    linear-gradient(rgba(16,185,129,.045) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(16,185,129,.045) 1px,transparent 1px) 0 0/48px 48px}
:root[data-theme="dark"] ::selection{background:rgba(60,208,112,.35);color:#fff}

/* ---------------------------------------------------------------- type */
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] .h1,:root[data-theme="dark"] .h2{font-family:var(--eco-display);font-weight:600;letter-spacing:-.02em;color:var(--fg)}
:root[data-theme="dark"] h4,:root[data-theme="dark"] h5,:root[data-theme="dark"] h6{font-family:var(--eco-sans);color:var(--fg)}
:root[data-theme="dark"] h1:lang(ar),:root[data-theme="dark"] h2:lang(ar),:root[data-theme="dark"] h3:lang(ar),:root[data-theme="dark"] h1:lang(ku),:root[data-theme="dark"] h2:lang(ku),:root[data-theme="dark"] h3:lang(ku){font-family:var(--eco-sans);letter-spacing:0}
:root[data-theme="dark"] .eyebrow{font-family:var(--eco-sans);font-size:12px;font-weight:600;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--fg-subtle)}
:root[data-theme="dark"] .eyebrow .dot,:root[data-theme="dark"] .article-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--eco-accent)}
:root[data-theme="dark"] .badge{background:transparent;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--fg-muted);opacity:.9}
:root[data-theme="dark"] .text-muted,:root[data-theme="dark"] .lede{color:var(--fg-muted)}
:root[data-theme="dark"] a:not(.btn):not(.card):not(.bento-card):hover{color:var(--eco-accent)}

/* ---------------------------------------------------------------- header */
:root[data-theme="dark"] .site-header{background:rgba(4,20,14,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--eco-line);box-shadow:none}
:root[data-theme="dark"] .brand-mark{color:#fff}
:root[data-theme="dark"] .nav-links a,:root[data-theme="dark"] .nav-drop-trigger{font-family:var(--eco-sans);font-size:11.5px;font-weight:600;letter-spacing:.1em !important;text-transform:uppercase !important;white-space:nowrap;color:#c3d3cb}
:root[data-theme="dark"] .nav-links a:hover,:root[data-theme="dark"] .nav-drop-trigger:hover,:root[data-theme="dark"] .nav-links a[aria-current="page"]{color:#fff}
:root[data-theme="dark"] .nav-dropdown-menu{background:#071c14;border:1px solid var(--eco-line);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.45)}
:root[data-theme="dark"] .nav-dropdown-menu a{text-transform:none !important;letter-spacing:0 !important;font-size:14px;font-weight:500}
@media(max-width:1100px){:root[data-theme="dark"] .nav-links{background:#04140e}}
/* Full desktop menu (1321px+): the uppercase tracked links are wider than the default container, so tighten them and drop the dashboard icon (My Dashboard is already in the menu) so the header never pushes the page sideways. */
@media(min-width:1321px){:root[data-theme="dark"] .site-header .nav{max-width:1440px}:root[data-theme="dark"] .nav-links{gap:clamp(10px,1.1vw,20px)}:root[data-theme="dark"] .nav-links a,:root[data-theme="dark"] .nav-drop-trigger{letter-spacing:.06em !important;font-size:11px}:root[data-theme="dark"] .nav-actions{gap:8px}:root[data-theme="dark"] .nav-actions a.theme-toggle[href="/dashboard.html"]{display:none}}

/* ---------------------------------------------------------------- buttons */
:root[data-theme="dark"] .btn{border-radius:8px;font-family:var(--eco-sans);font-size:13px;font-weight:600;letter-spacing:.08em !important;text-transform:uppercase !important;box-shadow:none;transition:background .25s,color .25s,border-color .25s,transform .4s var(--eco-ease)}
:root[data-theme="dark"] .btn-accent,:root[data-theme="dark"] .btn-primary{background:#fff;color:var(--eco-deep);border-color:transparent}
:root[data-theme="dark"] .btn-accent:hover,:root[data-theme="dark"] .btn-primary:hover{background:var(--eco-accent);color:var(--eco-deep)}
:root[data-theme="dark"] .btn-ghost,:root[data-theme="dark"] .btn-hero-secondary,:root[data-theme="dark"] .btn-outline,:root[data-theme="dark"] .btn-secondary{background:transparent;color:#fff;border:1px solid var(--eco-line) !important}
:root[data-theme="dark"] .btn-ghost:hover,:root[data-theme="dark"] .btn-hero-secondary:hover,:root[data-theme="dark"] .btn-outline:hover,:root[data-theme="dark"] .btn-secondary:hover{background:rgba(60,208,112,.08);border-color:var(--eco-line-strong) !important;color:#fff}
:root[data-theme="dark"] :focus-visible{outline:2px solid var(--eco-accent);outline-offset:3px}

/* ---------------------------------------------------------------- surfaces */
:root[data-theme="dark"] .card,:root[data-theme="dark"] .testimonial,:root[data-theme="dark"] .audience-card{background:var(--eco-glass),var(--bg);border:1px solid var(--eco-line);border-radius:24px;box-shadow:none}
:root[data-theme="dark"] .card-hover,:root[data-theme="dark"] .audience-card{transition:transform .5s var(--eco-ease),box-shadow .5s var(--eco-ease),border-color .3s}
:root[data-theme="dark"] .card-hover:hover,:root[data-theme="dark"] .audience-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(4,20,14,.5);border-color:var(--eco-line-strong)}
:root[data-theme="dark"] .card img{border-radius:14px}
:root[data-theme="dark"] .cta-banner{background:radial-gradient(600px 300px at 50% 0%,rgba(16,185,129,.16),transparent 70%),var(--eco-deep);border:1px solid var(--eco-line);border-radius:32px;box-shadow:none}
:root[data-theme="dark"] .cta-banner .hero-glow{display:none}
:root[data-theme="dark"] .cta-banner p{color:var(--fg-muted)}
:root[data-theme="dark"] .quick-access{background:rgba(4,20,14,.6);border-top:1px solid var(--eco-line);border-bottom:1px solid var(--eco-line)}
:root[data-theme="dark"] .quick-access::before{display:none}
:root[data-theme="dark"] .quick-access-inner>*{border-right-color:var(--eco-line)}
:root[data-theme="dark"] .quick-label{font-size:11px;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--fg-subtle)}
:root[data-theme="dark"] .quick-access-inner a{font-size:12px;font-weight:600;letter-spacing:.1em !important;text-transform:uppercase !important;color:#e3ece8}
:root[data-theme="dark"] .quick-access-inner a:hover{background:rgba(60,208,112,.08);color:var(--eco-accent)}
:root[data-theme="dark"] .site-footer{background:#030b08;color:var(--fg-subtle);border-top:1px solid var(--eco-line)}
:root[data-theme="dark"] .site-footer a{color:#c3d3cb;opacity:1}
:root[data-theme="dark"] .site-footer a:hover{color:var(--eco-accent)}
:root[data-theme="dark"] .site-footer h4,:root[data-theme="dark"] .site-footer h5{font-family:var(--eco-sans);font-size:12px;letter-spacing:.12em !important;text-transform:uppercase !important;color:#fff}
:root[data-theme="dark"] .input,:root[data-theme="dark"] input[type="text"],:root[data-theme="dark"] input[type="email"],:root[data-theme="dark"] input[type="search"],:root[data-theme="dark"] input[type="password"],:root[data-theme="dark"] input[type="number"],:root[data-theme="dark"] input[type="date"],:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background-color:#071a12;border-color:var(--eco-line);color:var(--fg)}
:root[data-theme="dark"] .input:focus,:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus{border-color:var(--eco-accent);box-shadow:0 0 0 3px rgba(60,208,112,.2)}
:root[data-theme="dark"] .section-intro h2{color:var(--fg)}
:root[data-theme="dark"] .section-intro>p{color:var(--fg-muted)}

/* ================================================================ HOME PAGE */
/* Hero: the site photo fades into dark green; the title sits in a viewport frame */
:root[data-theme="dark"] .hub-hero{min-height:0;padding-block:clamp(3rem,6vw,5.5rem);color:#fff;text-align:left;align-items:center;isolation:isolate;
  background:var(--eco-hero-bg)}
:root[data-theme="dark"] .hub-hero,:root[data-theme="dark"] .eco-person{--eco-hero-bg:linear-gradient(90deg,#04140e 0%,rgba(4,20,14,.99) 42%,rgba(4,20,14,.8) 58%,rgba(4,20,14,.25) 80%,rgba(4,20,14,.1) 100%),url('/assets/images/hse-hub-hero-replacement.jpg?v=20261003-2') right center/cover no-repeat}
:root[data-theme="dark"] .hub-hero::before,:root[data-theme="dark"] .hub-hero::after,:root[data-theme="dark"] .hub-hero-copy::before{display:none}
:root[data-theme="dark"] .hub-hero-grid{grid-template-columns:1fr}
:root[data-theme="dark"] .hub-hero-copy{position:relative;z-index:2;max-width:820px;padding:clamp(1.5rem,3.5vw,3rem);border:1px solid var(--eco-line);border-radius:24px;
  background:linear-gradient(180deg,rgba(4,20,14,.55),rgba(4,20,14,.3));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 80px rgba(16,185,129,.07),inset 0 0 40px rgba(16,185,129,.04)}
:root[data-theme="dark"] .hub-hero-copy::after{content:"LIVE";position:absolute;top:18px;right:22px;font:600 10px/1 var(--eco-sans);letter-spacing:.2em;color:var(--eco-accent);padding-left:14px;
  background:radial-gradient(circle,var(--eco-accent) 3px,transparent 3.5px) left center/8px 8px no-repeat}
:root[data-theme="dark"] .hub-hero-copy h1{font-family:var(--eco-display);font-weight:600;text-transform:none;color:#fff;font-size:clamp(2.4rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.02em;max-width:none}
:root[data-theme="dark"] .hub-hero-copy h1 span{display:inline;color:#fff}
:root[data-theme="dark"] .hub-hero-copy>p{background:none;border:0;padding:0;margin-top:1.5rem;max-width:560px;color:var(--fg-muted);font-size:1.12rem;line-height:1.45}
:root[data-theme="dark"] .hub-hero .eyebrow-light{color:var(--eco-accent) !important;font-size:12px}
:root[data-theme="dark"] .hub-hero .eyebrow-light .dot{display:inline-block;border-radius:50%;background:var(--eco-accent)}
:root[data-theme="dark"] .trust-row{font-size:11px;font-weight:600;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--fg-subtle)}
:root[data-theme="dark"] .trust-row li::before{border-radius:50%;transform:none;width:6px;height:6px;background:var(--eco-accent);box-shadow:none}
/* Word globe and the worker cut-out (created by home-eco.js), in both
   themes. The script copies the hero's own background onto the cut-out and
   lines the mask up with it, so it matches whichever theme is showing. */
.eco-globe{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.eco-person{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:url('/assets/images/hse-hub-hero-person-mask.png');mask-image:url('/assets/images/hse-hub-hero-person-mask.png');
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hub-hero>.container{position:relative;z-index:2}
@media(max-width:900px){.eco-globe,.eco-person{display:none}}
@media(max-width:900px){
  :root[data-theme="dark"] .hub-hero,:root[data-theme="dark"] .eco-person{--eco-hero-bg:linear-gradient(90deg,rgba(4,20,14,.97),rgba(4,20,14,.86)),url('/assets/images/hse-hub-hero-replacement.jpg?v=20261003-2') right center/cover no-repeat}
}

/* Learn / Train / Certify / Track tiles */
:root[data-theme="dark"] .value-tiles .grid-4{gap:0;counter-reset:tile}
:root[data-theme="dark"] .value-tiles .grid-4>.card{position:relative;min-height:380px;padding:40px !important;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:flex-end;counter-increment:tile}
:root[data-theme="dark"] .value-tiles .grid-4>.card::before{content:"0" counter(tile);position:absolute;top:24px;right:24px;font:600 12px/1 var(--eco-sans);letter-spacing:.12em;opacity:.7}
:root[data-theme="dark"] .value-tiles .grid-4>.card>div:first-child{position:absolute;top:40px;left:40px;width:96px !important;height:96px !important;border-radius:50% !important;background:transparent !important;border:1px solid currentColor;color:inherit !important;opacity:.85}
:root[data-theme="dark"] .value-tiles .grid-4>.card svg{width:40px;height:40px;stroke:currentColor}
:root[data-theme="dark"] .value-tiles .grid-4>.card h3{font-size:2rem;color:inherit}
:root[data-theme="dark"] .value-tiles .grid-4>.card p{font-size:1.02rem !important;line-height:1.35;color:inherit;opacity:.75}
:root[data-theme="dark"] .value-tiles .grid-4>.card:nth-child(1){background:var(--eco-accent);color:var(--eco-deep)}
:root[data-theme="dark"] .value-tiles .grid-4>.card:nth-child(2){background:#0b2219;color:#fff}
:root[data-theme="dark"] .value-tiles .grid-4>.card:nth-child(3){background:#0f2c21;color:#fff}
:root[data-theme="dark"] .value-tiles .grid-4>.card:nth-child(4){background:#13382a;color:#fff}
:root[data-theme="dark"] .value-tiles .grid-4>.card:first-child{border-radius:24px 0 0 24px}
:root[data-theme="dark"] .value-tiles .grid-4>.card:last-child{border-radius:0 24px 24px 0}
@media(max-width:900px){:root[data-theme="dark"] .value-tiles .grid-4>.card,:root[data-theme="dark"] .value-tiles .grid-4>.card:first-child,:root[data-theme="dark"] .value-tiles .grid-4>.card:last-child{border-radius:0;min-height:300px}}

/* Tools bento grid (both themes; glass treatment in dark) */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:16px}
.bento-card{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:1rem;padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--border);color:var(--fg-muted);text-decoration:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.bento-card:hover,.bento-card:focus-visible{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px rgba(4,20,14,.25);color:var(--fg-muted)}
.bento-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--brand),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.bento-card:hover::after,.bento-card:focus-visible::after{opacity:1}
.bento-xl{grid-column:span 2;grid-row:span 2}
.bento-wide{grid-column:span 2}
.bento-bar{grid-column:1/-1;min-height:170px}
.bento-index{margin:-6px 56px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--brand-strong)}
.bento-icon{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);color:var(--brand-strong)}
.bento-xl .bento-icon{width:64px;height:64px;border-radius:18px}
.bento-icon svg{width:22px;height:22px}
/* Label and icon sit in the flow at the top; the text is pushed to the bottom, so a long title can never slide over the icon. */
.bento-body{margin-top:auto}
.bento-xl .bento-icon svg{width:30px;height:30px}
.bento-card h3{font-size:1.25rem;color:var(--fg);margin:0}
.bento-xl h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.bento-card p{margin:.4rem 0 0;font-size:15px;line-height:1.5;max-width:52ch}
.bento-go{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-strong);color:#fff;font-size:18px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bento-card:hover .bento-go{transform:translate(2px,-2px)}
:root[data-theme="dark"] .bento-card{background:var(--eco-glass),var(--bg);border-color:var(--eco-line)}
:root[data-theme="dark"] .bento-card:hover,:root[data-theme="dark"] .bento-card:focus-visible{box-shadow:0 20px 40px rgba(4,20,14,.5)}
:root[data-theme="dark"] .bento-xl{background:radial-gradient(500px 300px at 80% 0%,rgba(16,185,129,.18),transparent 70%),var(--eco-glass),var(--bg)}
:root[data-theme="dark"] .bento-go{background:var(--eco-accent);color:var(--eco-deep)}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento-xl{grid-row:auto}}
@media(max-width:600px){
  .bento{grid-template-columns:1fr}.bento-xl,.bento-wide{grid-column:auto}
  .bento-card{justify-content:flex-start;padding:24px;min-height:0}
  .bento-index{position:static;margin-right:56px}
  .bento-icon,.bento-xl .bento-icon{position:static;width:46px;height:46px;border-radius:14px}
  .bento-xl .bento-icon svg{width:22px;height:22px}
  .bento-xl h3{font-size:1.5rem}
}

/* Featured course: masterclass module with numbered lessons */
.lesson-no{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--brand-strong);min-width:2ch}
.home-course ol li{display:flex;align-items:baseline;gap:1rem}
.btn-pulse{display:inline-flex;align-items:center;gap:.7rem}
.pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#10b981}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#10b981;animation:eco-pulse 1.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes eco-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
:root[data-theme="dark"] .home-course .card{background:var(--eco-deep);border:1px solid var(--eco-line)}
:root[data-theme="dark"] .home-course .card>div{background:radial-gradient(400px 260px at 100% 0%,rgba(16,185,129,.14),transparent 70%),#04140e !important}
:root[data-theme="dark"] .home-course .card .hero-glow{display:none}
:root[data-theme="dark"] .home-course ol{gap:0 !important}
:root[data-theme="dark"] .home-course ol li{padding:.8rem 0;border-top:1px solid var(--eco-line);color:#dbe7e1;font-size:15px}
:root[data-theme="dark"] .home-course .lesson-no{color:var(--eco-accent)}

/* Audience paths */
:root[data-theme="dark"] .audience-card-primary{background:linear-gradient(160deg,rgba(16,185,129,.16),rgba(255,255,255,.02)),var(--bg);color:#fff}
:root[data-theme="dark"] .audience-card h3{color:#fff}
:root[data-theme="dark"] .audience-card strong{color:var(--eco-accent);font-size:12px;letter-spacing:.12em !important;text-transform:uppercase !important}
:root[data-theme="dark"] .audience-number{font:600 12px/1 var(--eco-sans);color:var(--fg-subtle);opacity:1;letter-spacing:.12em}

/* Life-Saving Rules: selectable panels (both themes) + slide-over check */
:root[data-theme="dark"] .critical-risk-section{background:transparent;border-top:1px solid var(--eco-line);border-bottom:1px solid var(--eco-line)}
:root[data-theme="dark"] .critical-risk-section p{color:var(--fg-muted)}
.risk-list.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;background:none;overflow:visible}
.rule-panel{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:6px;align-items:center;text-align:left;
  padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px;font-weight:500;line-height:1.25;cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s cubic-bezier(.16,1,.3,1)}
.rule-panel:hover,.rule-panel:focus-visible{transform:translateY(-3px);border-color:rgba(255,255,255,.6)}
.rule-panel span{padding:0 !important;border:0 !important;background:none}
.rule-no{grid-row:1/3;font-size:12px;font-weight:600;letter-spacing:.12em;opacity:.8}
.rule-cta{grid-column:2;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase !important;opacity:.75}
:root[data-theme="dark"] .rule-panel{border-color:var(--eco-line);background:var(--eco-glass),var(--bg)}
:root[data-theme="dark"] .rule-panel:hover,:root[data-theme="dark"] .rule-panel:focus-visible{border-color:var(--eco-line-strong);box-shadow:0 16px 32px rgba(4,20,14,.5)}
:root[data-theme="dark"] .rule-no{color:var(--eco-accent);opacity:1}
:root[data-theme="dark"] .rule-panel:hover .rule-cta{color:var(--eco-accent);opacity:1}
@media(max-width:600px){.risk-list.rule-grid{grid-template-columns:1fr}}
.rule-sheet{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:none;width:min(480px,100%);padding:0;border:0;border-left:1px solid var(--border);
  background:var(--surface);color:var(--fg-muted);transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.rule-sheet[open].is-open{transform:none}
.rule-sheet::backdrop{background:rgba(2,8,6,.6);backdrop-filter:blur(3px)}
.sheet-inner{padding:28px 30px 40px;display:flex;flex-direction:column;gap:20px;min-height:100%}
.sheet-top{display:flex;align-items:center;justify-content:space-between}
.sheet-live{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase !important;color:var(--brand-strong);display:flex;align-items:center;gap:8px}
.sheet-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff5a4f;animation:eco-rec 1.6s infinite}
@keyframes eco-rec{0%{box-shadow:0 0 0 0 rgba(255,90,79,.55)}100%{box-shadow:0 0 0 10px rgba(255,90,79,0)}}
.sheet-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--fg);font-size:20px;cursor:pointer}
.sheet-close:hover{border-color:var(--brand-strong);color:var(--brand-strong)}
.sheet-frame{border:1px solid var(--border);border-radius:18px;padding:20px;position:relative}
.sheet-frame::before,.sheet-frame::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--brand-strong)}
.sheet-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:18px}
.sheet-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:18px}
.sheet-no{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--brand-strong)}
.rule-sheet h2{font-size:2rem;color:var(--fg);margin:.5rem 0 0}
.sheet-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase !important;color:var(--fg-subtle);margin:0 0 10px}
.sheet-checks,.sheet-questions{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sheet-checks li{display:flex;gap:12px;align-items:flex-start;color:var(--fg);font-size:15px;line-height:1.45}
.sheet-checks li::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;border-radius:5px;border:1.5px solid var(--brand-strong)}
.sheet-questions li{font-size:14.5px;line-height:1.45;padding-left:14px;border-left:2px solid var(--border)}
.sheet-note{font-size:12.5px;line-height:1.5;color:var(--fg-subtle);margin-top:auto}
.sheet-note a{color:var(--brand-strong)}
:root[data-theme="dark"] .rule-sheet{background:linear-gradient(180deg,#071c14,#04140e);border-left-color:var(--eco-line)}

/* ================================================================ MOTION */
/* Cards wipe open left to right, staggered, then their contents fade up
   (eco-theme.js adds html.eco-motion and .eco-cards to card groups). */
html.eco-motion [data-reveal-group].eco-cards>*{opacity:1 !important;transform:none !important}
html.eco-motion .eco-cards>*{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + var(--i,0) * .15s)}
html.eco-motion .eco-cards.is-in>*{clip-path:inset(-60px -60px -60px -60px)}
html.eco-motion .eco-cards>*>*,html.eco-motion .eco-cards>*::before{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:calc(var(--d,0s) + .6s + var(--i,0) * .15s)}
html.eco-motion .eco-cards.is-in>*>*,html.eco-motion .eco-cards.is-in>*::before{opacity:1;transform:none}
:root[data-theme="dark"].eco-motion .value-tiles .eco-cards.is-in>.card>div:first-child{opacity:.85}
html.eco-motion .eco-cards.is-done>*,html.eco-motion .eco-cards.is-done>*>*{clip-path:none;transition:none}
/* Headings slide up word by word out of a text mask */
html.eco-reveal .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
html.eco-reveal .mi{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--w,0) * 45ms)}
html.eco-reveal .is-shown .mi{transform:none}
@media (prefers-reduced-motion: reduce){
  html.eco-motion .eco-cards>*,html.eco-motion .eco-cards>*>*,html.eco-motion .eco-cards>*::before{clip-path:none;opacity:1;transform:none;transition:none}
  html.eco-reveal .mi{transform:none;transition:none}
  .pulse-dot::after,.sheet-live::before{animation:none}
  .rule-sheet,.bento-card,.rule-panel{transition:none}
}

/* ================================================================ ACADEMY */
/* course-apple.css keeps its own tokens on <main>; map them to the theme. */
:root[data-theme="dark"] main{
  --ap-font:var(--eco-sans); --font-head:var(--eco-sans); --font-body:var(--eco-sans);
  --ap-ground:transparent; --ap-surface:#0b2018; --ap-inset:#081a13;
  --ap-ink:#f1f6f3; --ap-muted:#a9bab2; --ap-subtle:#8a9d93;
  --ap-hairline:rgba(16,185,129,.16); --ap-hairline-strong:rgba(16,185,129,.32);
  --ap-action:#3cd070; --ap-action-hover:#62e08f; --ap-action-soft:rgba(60,208,112,.12); --ap-on-action:#04140e;
  --ap-tile:#0b2018; --ap-on-tile:#f1f6f3; --ap-on-tile-muted:#a9bab2; --ap-tile-action:#3cd070;
}

/* ================================================================ NOTICES */
:root[data-theme="dark"] .legal-boundary{background:rgba(234,154,28,.08);border-color:rgba(234,154,28,.35)}
:root[data-theme="dark"] .legal-boundary strong{color:#f3c27a}
:root[data-theme="dark"] .legal-boundary p{color:#d8cdb6}
:root[data-theme="dark"] .legal-boundary.caution{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35)}
:root[data-theme="dark"] .legal-boundary.caution strong{color:#fca5a5}
:root[data-theme="dark"] main .legal-boundary{background:rgba(234,154,28,.08)}
:root[data-theme="dark"] main .legal-boundary strong{color:#f3c27a}
:root[data-theme="dark"] .form-status.is-error{background:rgba(248,113,113,.1);color:#fca5a5}
:root[data-theme="dark"] .form-status.is-success{background:rgba(60,208,112,.1);color:#86efac}
:root[data-theme="dark"] .quiz-option.is-wrong{background:rgba(248,113,113,.1);color:#fca5a5}
:root[data-theme="dark"] .evolution-era-stack span:last-child{color:var(--eco-deep)}
:root[data-theme="dark"]{--slate-100:#0e261d;--slate-50:#0b2018}

/* Laptops and tablets in landscape: keep the title frame clear of the worker. */
@media(min-width:901px) and (max-width:1280px){
  :root[data-theme="dark"] .hub-hero-copy{max-width:56vw}
  :root[data-theme="dark"] .hub-hero-copy h1{font-size:clamp(2.2rem,3.9vw,3.4rem)}
}
/* Legal pages: provider table and in-text links. */
.policy-table{overflow-x:auto;margin:1rem 0 1.25rem;border:1px solid var(--border);border-radius:14px}
.policy-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.policy-table th,.policy-table td{padding:.7rem .9rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--border)}
.policy-table tr:last-child td{border-bottom:0}
.policy-table th{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);background:var(--bg-alt)}
.prose .policy-table a,.prose nav a,.prose p a{color:var(--brand-strong);text-decoration:underline;text-underline-offset:.2em}
/* Drop-down menu (1320px and below): the header's frosted blur would trap the
   fixed menu inside the 65px header bar, letting the page show through below
   it. Switch the blur off while the menu is open so the menu covers the page,
   and use a readable text size for tapping. */
.site-header:has(.nav-links.is-open){-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:1320px){:root[data-theme="dark"] .nav-links a,:root[data-theme="dark"] .nav-drop-trigger{font-size:15px}}