:root {
  --ink: #1e2a2a;
  --ink-2: #111817;
  --ink-3: #2c403d;
  --paper: #fffaf0;
  --canvas: #f3eee4;
  --line: #d8d1c5;
  --muted: #59645f;
  --yellow: #f6b71e;
  --yellow-soft: #fff0bb;
  --lime: #a8c939;
  --green: #28725c;
  --red: #c84c3c;
  --white: #fffdf7;
  --shadow: 0 16px 40px rgba(30, 42, 42, .12);
  --rail: 248px;
  --radius: 7px 7px 24px 7px;
  --display: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --body: "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0969da; outline-offset: 3px; }
svg { display: block; }
.hidden { display: none !important; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -60px; padding: 9px 14px; color: var(--ink); background: var(--yellow); font-weight: 800; border-radius: 4px; }
.skip-link:focus { top: 10px; }

/* App chrome */
.app-shell { min-height: 100vh; }
.side-rail {
  position: fixed; z-index: 100; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column;
  color: #eef3ef; background: var(--ink-2); border-right: 1px solid #283431;
}
.rail-head { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 0; color: inherit; text-align: left; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-2); background: var(--yellow); border-radius: 4px 4px 13px 4px; transform: rotate(-1deg); }
.brand-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font: 800 15px/1 var(--display); letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; color: #8fa09b; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rail-close { display: none; color: #9ca9a4; font-size: 29px; }
.rail-label { padding: 27px 22px 10px; color: #9eaaa6; font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.rail-nav { display: grid; gap: 4px; padding: 0 12px; }
.rail-nav button { position: relative; width: 100%; height: 47px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: #9eaaa6; border-radius: 5px 5px 14px 5px; text-align: left; font-size: 12px; font-weight: 700; transition: .18s ease; }
.rail-nav button::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; background: var(--yellow); opacity: 0; }
.rail-nav button:hover { color: white; background: rgba(255,255,255,.045); }
.rail-nav button.active { color: var(--ink); background: var(--yellow); }
.rail-nav button.active::before { opacity: 1; }
.rail-nav button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rail-nav button em { margin-left: auto; padding: 3px 6px; color: var(--ink); background: var(--yellow); border-radius: 10px; font-size: 12px; font-style: normal; }
.rail-nav button.active em { color: var(--paper); background: var(--ink); }
.rail-progress { margin: 27px 18px 0; padding: 17px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 5px 5px 18px; }
.rail-progress-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 750; }
.rail-progress-top span { color: #8d9a96; }
.rail-progress-top strong { color: var(--yellow); font: 800 13px var(--display); }
.progress-track { height: 5px; overflow: hidden; background: rgba(255,255,255,.11); border-radius: 99px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--yellow); border-radius: inherit; transition: width .4s ease; }
.rail-progress .progress-track { margin-top: 10px; }
.rail-progress p { margin: 11px 0 0; color: #a8b6b1; font-size: 12px; line-height: 1.5; }
.rail-bottom { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.language-switch { display: flex; width: fit-content; gap: 3px; margin-bottom: 13px; padding: 3px; border: 1px solid #34413e; border-radius: 99px; }
.language-switch button { min-width: 32px; height: 24px; padding: 0 8px; color: #82908b; border-radius: 99px; font-size: 12px; font-weight: 800; }
.language-switch button.active { color: var(--ink); background: var(--yellow); }
.rail-user { width: 100%; display: flex; align-items: center; gap: 10px; color: white; padding: 5px 0; text-align: left; }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: #d8e5e0; border-radius: 50%; font: 800 12px var(--display); }
.rail-user > span:nth-child(2) { min-width: 0; flex: 1; }
.rail-user strong, .rail-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user strong { font-size: 12px; }
.rail-user small { margin-top: 2px; color: #9caaa5; font-size: 12px; }
.rail-user > svg { width: 15px; fill: none; stroke: #a0aea9; stroke-width: 2; }
.main-view { min-height: 100vh; margin-left: var(--rail); }
.mobile-topbar, .rail-scrim { display: none; }

/* Generic */
.page { width: min(100%, 1400px); min-height: 100vh; margin: 0 auto; padding: 32px clamp(26px,4.6vw,72px) 64px; }
.topline { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.topline-left p { margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topline-left .topline-title { margin: 0; font: 700 18px var(--display); letter-spacing: -.03em; }
.topline-actions { display: flex; align-items: center; gap: 9px; }
.status-pill { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: rgba(255,250,240,.68); font-size: 12px; font-weight: 750; }
.status-pill i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 3px rgba(168,201,57,.17); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 5px 5px 12px; }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.section-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #9b6a13; font: 800 12px var(--display); letter-spacing: .13em; text-transform: uppercase; }
.section-kicker i { width: 8px; height: 8px; display: inline-block; background: var(--yellow); border-radius: 50%; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 19px; }
.section-title-row h2 { margin: 0; font: 700 clamp(24px,3vw,32px)/1 var(--display); letter-spacing: -.06em; }
.section-title-row p { max-width: 520px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border-radius: 4px 4px 13px 4px; font-size: 12px; font-weight: 800; transition: .18s ease; }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.button-primary { color: var(--ink); background: var(--yellow); box-shadow: 0 8px 18px rgba(246,183,30,.18); }
.button-primary:hover { transform: translateY(-2px); background: #ffc52d; box-shadow: 0 12px 22px rgba(246,183,30,.24); }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: #2a3a38; transform: translateY(-2px); }
.button-outline { color: var(--ink); background: transparent; border: 1px solid #aeb6b1; }
.button-outline:hover { background: var(--paper); border-color: var(--ink); }
.button-full { width: 100%; }
.text-action { display: inline-flex; align-items: center; gap: 7px; color: #8a5b09; font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.text-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.text-action:hover svg { transform: translateX(3px); }

/* Dashboard hero */
.hero-panel { position: relative; min-height: 355px; display: grid; grid-template-columns: 1.02fr .98fr; overflow: hidden; color: white; background: var(--ink); border-radius: var(--radius); box-shadow: 0 18px 38px rgba(30,42,42,.15); }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(35px,5vw,61px); }
.hero-copy .section-kicker { color: #f9ce62; }
.hero-origin { margin: 0 0 14px; color: #9eaea8; font-size: 12px; font-weight: 700; }
.hero-copy h2 { max-width: 600px; margin: 0; font: 700 clamp(38px,4.6vw,65px)/.95 var(--display); letter-spacing: -.07em; }
.hero-copy h2 span { color: var(--yellow); }
.hero-copy > p { max-width: 535px; margin: 19px 0 25px; color: #bdc9c5; font-size: 13px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
.hero-time { display: inline-flex; align-items: center; gap: 7px; color: #a4b2ae; font-size: 12px; }
.hero-time svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-art { min-height: 355px; background: linear-gradient(90deg,var(--ink),transparent 38%), url('assets/hero-safety.jpg') center/cover no-repeat; }
.hero-tab { position: absolute; right: 0; bottom: 0; min-width: 92px; padding: 13px 18px; color: var(--ink); background: var(--yellow); font: 800 21px var(--display); border-radius: 13px 0 0 0; }
.hero-tab span { color: #4b3500; font-size: 12px; opacity: 1; }

/* Context */
.context-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 14px; }
.company-banner, .impact-banner { position: relative; min-height: 115px; display: flex; align-items: center; gap: 18px; padding: 19px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px 5px 18px; transition: .18s; }
.company-banner:hover, .impact-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,42,42,.08); }
.company-logo { width: 57px; height: 57px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--yellow); border-radius: 5px 5px 17px; }
.company-logo svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.context-label { margin: 0 0 3px; color: #9b6a13; font: 800 12px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.company-banner h3, .impact-banner h3 { margin: 0; font: 700 16px var(--display); letter-spacing: -.03em; }
.company-banner > div:nth-child(2) > p:not(.context-label), .impact-banner p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.company-banner small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.risk-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; max-width: 205px; }
.risk-tags span { padding: 4px 7px; color: #53625d; background: #eee9de; border-radius: 2px 2px 7px; font-size: 12px; font-weight: 750; }
.impact-icon { width: 53px; height: 53px; display: grid; place-items: center; flex: 0 0 auto; color: var(--yellow); background: var(--ink); border-radius: 50%; font: 800 20px var(--display); }
.impact-banner strong { display: block; margin-top: 6px; color: var(--green); font: 800 12px var(--display); }

/* Route ledger */
.route-ledger { margin: 38px 0 42px; }
.ledger-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 13px; }
.ledger-title h3 { margin: 0; font: 700 15px var(--display); }
.ledger-title span { color: var(--muted); font-size: 12px; }
.ledger-stages { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 5px 5px 18px; background: var(--paper); }
.ledger-stage { position: relative; min-width: 0; min-height: 73px; display: flex; align-items: center; gap: 9px; padding: 12px; border-right: 1px solid var(--line); text-align: left; }
.ledger-stage:last-child { border-right: 0; }
.ledger-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #d9d3c8; }
.ledger-stage:hover { background: #fffcf5; }
.ledger-stage.active::after { background: var(--yellow); }
.ledger-stage.complete::after { background: var(--green); }
.ledger-stage > span { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; color: #4f5b56; background: #ede8dd; border-radius: 50%; font: 800 12px var(--display); }
.ledger-stage > span svg, .route-row-number svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.ledger-stage.active > span { color: var(--ink); background: var(--yellow); }
.ledger-stage.complete > span { color: white; background: var(--green); }
.ledger-stage strong, .ledger-stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-stage strong { font-size: 12px; }
.ledger-stage small { margin-top: 3px; color: var(--muted); font-size: 12px; }

/* Challenges */
.challenge-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; }
.challenge-card { position: relative; display: grid; grid-template-columns: 43% 57%; min-height: 222px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: .2s ease; }
.challenge-card::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-top: 7px solid var(--yellow); border-left: 7px solid transparent; }
.challenge-card:hover { transform: translateY(-5px); border-color: #c0b7a8; box-shadow: 0 17px 32px rgba(30,42,42,.12); }
.challenge-visual { position: relative; min-height: 220px; background: #ccd4ce center/cover no-repeat; }
.challenge-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,20,18,.02),rgba(10,20,18,.28)); }
.inspection-label { position: absolute; z-index: 2; left: 11px; top: 11px; padding: 5px 7px; color: white; background: #111817; border: 1px solid #71807b; border-radius: 2px; font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.challenge-number { position: absolute; z-index: 2; left: 12px; bottom: 9px; color: white; font: 800 31px var(--display); letter-spacing: -.08em; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.complete-stamp { position: absolute; z-index: 3; right: 9px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: white; background: var(--green); border-radius: 2px 2px 8px; font: 800 12px var(--display); text-transform: uppercase; }
.complete-stamp svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.challenge-content { min-width: 0; display: flex; flex-direction: column; align-items: start; padding: 20px; }
.challenge-meta { width: 100%; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.challenge-meta span { display: inline-flex; align-items: center; gap: 5px; }
.challenge-meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.point-label { color: #98670e; }
.recommended-tag { display: inline-flex; margin-top: 12px; padding: 4px 6px; color: #365a30; background: #e5efd0; border-radius: 2px 2px 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.challenge-content h3 { margin: 12px 0 7px; font: 700 19px/1.05 var(--display); letter-spacing: -.045em; }
.challenge-content p { display: -webkit-box; overflow: hidden; margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.challenge-content .text-action { margin-top: auto; }

/* Route page */
.page-hero-compact { position: relative; overflow: hidden; padding: 38px 42px; color: white; background: var(--ink); border-radius: var(--radius); }
.page-hero-compact::after { content: "06"; position: absolute; right: 27px; top: -17px; color: rgba(246,183,30,.09); font: 800 135px/1 var(--display); letter-spacing: -.1em; }
.page-hero-compact .section-kicker { color: #f9ce62; }
.page-hero-compact h2 { position: relative; z-index: 1; max-width: 700px; margin: 0; font: 700 clamp(34px,4vw,52px)/1 var(--display); letter-spacing: -.065em; }
.page-hero-compact p { position: relative; z-index: 1; max-width: 650px; margin: 15px 0 0; color: #b4c1bd; font-size: 12px; line-height: 1.55; }
.route-list { display: grid; gap: 11px; margin-top: 25px; }
.route-row { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; min-height: 98px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 5px 5px 18px; transition: .18s; }
.route-row:hover { transform: translateX(4px); box-shadow: 0 10px 25px rgba(30,42,42,.07); }
.route-row-number { align-self: stretch; display: grid; place-items: center; color: var(--ink); background: var(--yellow-soft); font: 800 23px var(--display); }
.route-row.complete .route-row-number { color: white; background: var(--green); }
.route-row-copy { padding: 17px 20px; }
.route-row-copy .route-row-meta { color: #97660e; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.route-row-copy h3 { margin: 4px 0 3px; font: 700 17px var(--display); }
.route-row-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.route-row-action { padding: 16px 22px; }

/* Module detail */
.module-page { min-height: 100vh; padding: 0; background: var(--canvas); }
.module-topbar { min-height: 68px; display: flex; align-items: center; gap: 14px; padding: 12px clamp(26px,4.6vw,72px); background: var(--paper); border-bottom: 1px solid var(--line); }
.back-button { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px 4px 12px; }
.back-button:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.back-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.module-topbar-copy { min-width: 0; flex: 1; }
.module-topbar-copy strong, .module-topbar-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-topbar-copy strong { font: 700 12px var(--display); }
.module-topbar-copy span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.module-topbar-progress { width: 160px; }
.module-topbar-progress small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; text-align: right; }
.module-stage { padding: 29px clamp(26px,4.6vw,72px) 60px; }
.module-cover { position: relative; min-height: 400px; display: grid; grid-template-columns: 1fr .75fr; overflow: hidden; color: white; background: var(--ink); border-radius: var(--radius); }
.module-cover-copy { align-self: center; padding: clamp(38px,5vw,68px); }
.module-cover-copy .section-kicker { color: #f9ce62; }
.module-cover-copy h1 { max-width: 700px; margin: 0; font: 700 clamp(39px,5vw,68px)/.95 var(--display); letter-spacing: -.07em; }
.module-cover-copy p { max-width: 570px; margin: 20px 0 27px; color: #b8c5c1; font-size: 13px; line-height: 1.6; }
.module-stats { display: flex; gap: 20px; margin-bottom: 25px; color: #9fada8; font-size: 12px; font-weight: 700; }
.module-stats span { display: flex; align-items: center; gap: 6px; }
.module-stats svg { width: 15px; height: 15px; fill: none; stroke: var(--yellow); stroke-width: 1.7; }
.module-cover-art { min-height: 400px; background: #53615c center/cover no-repeat; }
.module-cover-art::after { content: ""; position: absolute; top: 0; bottom: 0; left: 48%; width: 17%; background: linear-gradient(90deg,var(--ink),transparent); }
.module-index { position: absolute; right: 0; bottom: 0; min-width: 104px; padding: 16px 22px; color: var(--ink); background: var(--yellow); font: 800 27px var(--display); border-radius: 17px 0 0; }
.learning-layout { display: grid; grid-template-columns: 1fr 310px; gap: 18px; margin-top: 18px; }
.lesson-panel, .module-summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.lesson-panel { padding: 30px; }
.lesson-panel h2, .module-summary h2 { margin: 0; font: 700 21px var(--display); letter-spacing: -.04em; }
.lesson-panel > p { margin: 8px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lesson-points { display: grid; gap: 10px; }
.lesson-point { display: flex; gap: 11px; padding: 13px; background: #f5f0e6; border-radius: 4px 4px 12px; font-size: 12px; line-height: 1.5; }
.lesson-point > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--yellow); border-radius: 50%; font: 800 12px var(--display); }
.module-summary { padding: 25px; }
.summary-list { display: grid; gap: 11px; margin-top: 18px; }
.summary-list div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.summary-list svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 1.8; }
.module-summary .button { margin-top: 23px; }

/* Quiz */
.quiz-stage { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 30px clamp(26px,4.6vw,72px); background: var(--ink); }
.quiz-card { width: min(720px,100%); padding: clamp(28px,5vw,48px); background: var(--paper); border-radius: 7px 7px 28px; box-shadow: 0 25px 70px rgba(0,0,0,.24); }
.quiz-card-illustrated { width: min(1080px,100%); }
.quiz-question-layout { display: grid; grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr); gap: clamp(24px,4vw,48px); align-items: start; }
.quiz-question-photo { position: relative; min-height: 420px; height: 100%; overflow: hidden; margin: 0; background: #263330; border-radius: 5px 5px 20px; }
.quiz-question-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(12,20,18,.82)); pointer-events: none; }
.quiz-question-photo img { width: 100%; height: 100%; min-height: 420px; display: block; object-fit: cover; }
.quiz-question-photo figcaption { position: absolute; z-index: 2; right: 18px; bottom: 17px; left: 18px; display: flex; align-items: center; gap: 8px; color: white; font-size: 12px; font-weight: 750; line-height: 1.45; }
.quiz-question-photo figcaption svg { width: 18px; min-width: 18px; fill: none; stroke: var(--yellow); stroke-width: 1.8; }
.quiz-question-body { min-width: 0; }
.quiz-question-body > p { margin: 0 0 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.quiz-progress strong { font: 800 12px var(--display); white-space: nowrap; }
.quiz-progress .progress-track { flex: 1; background: #e5dfd3; }
.quiz-progress .progress-track span { background: var(--yellow); }
.scenario-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; color: #8a5b09; background: var(--yellow-soft); border-radius: 3px 3px 9px; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.quiz-card h1 { margin: 17px 0 9px; font: 700 clamp(24px,4vw,35px)/1.15 var(--display); letter-spacing: -.05em; }
.quiz-card > p { margin: 0 0 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 4px 4px 12px; background: white; text-align: left; font-size: 12px; line-height: 1.45; transition: .15s; }
.quiz-option > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: #eee9de; border-radius: 50%; font: 800 12px var(--display); }
.quiz-option:hover { border-color: var(--ink); transform: translateX(3px); }
.quiz-option.selected { border-color: var(--ink); background: #f5f0e6; }
.quiz-option.selected > span { color: var(--ink); background: var(--yellow); }
.quiz-option.correct { border-color: #72a28d; color: #16513e; background: #e6f1ec; }
.quiz-option.correct > span { color: white; background: var(--green); }
.quiz-option.wrong { border-color: #d29187; color: #8b3025; background: #faeae6; }
.quiz-option.wrong > span { color: white; background: var(--red); }
.quiz-option:disabled { cursor: default; opacity: 1; }
.quiz-option:disabled:hover { transform: none; }
.quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 23px; }
.quiz-feedback { min-height: 34px; flex: 1; padding: 8px 11px; border-radius: 4px 4px 10px; font-size: 12px; font-weight: 750; }
.quiz-feedback:empty { padding: 0; }
.quiz-feedback.success { color: #15513e; background: #e1f0e9; }
.quiz-feedback.error { color: #923a30; background: #fae9e5; }

/* Forms */
.profile-grid { display: grid; grid-template-columns: 1fr 330px; gap: 18px; margin-top: 24px; }
.form-card, .profile-side-card, .results-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.form-card { padding: 31px; }
.form-card h2, .profile-side-card h2 { margin: 0; font: 700 21px var(--display); }
.form-card > p, .profile-side-card > p { margin: 7px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1/-1; }
.field label { font-size: 12px; font-weight: 800; }
.field input, .field select { width: 100%; height: 44px; padding: 0 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 4px 4px 11px; outline: none; }
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,183,30,.23); }
.consent { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.consent input { margin-top: 1px; accent-color: var(--green); }
.form-actions { grid-column: 1/-1; display: flex; gap: 9px; padding-top: 4px; }
.profile-side-card { align-self: start; padding: 25px; }
.profile-illustration { min-height: 172px; margin-bottom: 22px; background: linear-gradient(rgba(30,42,42,.14),rgba(30,42,42,.14)), url('assets/epi-safety.jpg') center/cover; border-radius: 4px 4px 16px; }
.data-list { display: grid; gap: 12px; }
.data-list div { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.data-list svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 1.8; }

/* Results */
.results-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; margin-top: 24px; }
.score-card { position: relative; overflow: hidden; display: grid; place-items: center; padding: 37px; color: white; background: var(--ink); border-radius: var(--radius); text-align: center; }
.score-card::before { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(246,183,30,.13); border-radius: 50%; }
.score-ring { position: relative; width: 175px; height: 175px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 8; }
.score-ring .ring-base { stroke: rgba(255,255,255,.1); }
.score-ring .ring-progress { stroke: var(--yellow); stroke-linecap: round; }
.score-value { position: absolute; inset: 0; display: grid; place-content: center; }
.score-value strong { color: var(--yellow); font: 800 42px/1 var(--display); }
.score-value span { margin-top: 4px; color: #9caca7; font-size: 12px; }
.score-card h2 { position: relative; margin: 22px 0 6px; font: 700 22px var(--display); }
.score-card p { position: relative; margin: 0; color: #9caca7; font-size: 12px; }
.results-card { padding: 29px; }
.results-card h2 { margin: 0 0 19px; font: 700 20px var(--display); }
.result-rows { display: grid; gap: 8px; }
.result-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 11px; padding: 11px; background: #f3eee4; border-radius: 4px 4px 11px; }
.result-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #83908b; background: white; border-radius: 50%; }
.result-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.result-row.complete .result-icon { color: white; background: var(--green); }
.result-row strong, .result-row span { display: block; }
.result-row strong { font-size: 12px; }
.result-row span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.result-row > em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; }
.results-actions { display: flex; gap: 9px; margin-top: 20px; }

/* WIKAYATIIC governed HSE knowledge base */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.knowledge-promo { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; margin-top: 14px; padding: 19px 21px; color: white; background: linear-gradient(115deg,#164b40,#102d28); border: 1px solid #35665b; border-radius: var(--radius); box-shadow: 0 12px 27px rgba(30,42,42,.12); }
.knowledge-promo-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--ink); background: #76d0b3; border-radius: 5px 5px 17px; }
.knowledge-promo-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.knowledge-promo .section-kicker { margin-bottom: 4px; color: #8de0c5; }
.knowledge-promo h3 { margin: 0; font: 700 19px var(--display); letter-spacing: -.04em; }
.knowledge-promo p { margin: 5px 0 0; color: #abc5bd; font-size: 12px; line-height: 1.45; }
.knowledge-promo-metrics { min-width: 96px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.14); }
.knowledge-promo-metrics strong, .knowledge-promo-metrics span { display: block; }
.knowledge-promo-metrics strong { color: #8de0c5; font: 800 20px var(--display); }
.knowledge-promo-metrics span { color: #90aaa2; font-size: 12px; }
.knowledge-hero { position: relative; min-height: 300px; display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: end; gap: 35px; overflow: hidden; padding: 44px 46px; color: white; background: radial-gradient(circle at 88% 12%,#2a5d51,#111817 51%); border-radius: var(--radius); box-shadow: 0 18px 38px rgba(30,42,42,.16); }
.knowledge-hero::before, .knowledge-hero::after { content: ""; position: absolute; border: 1px solid rgba(118,208,179,.18); border-radius: 50%; }
.knowledge-hero::before { width: 410px; height: 410px; right: -135px; top: -280px; }
.knowledge-hero::after { width: 280px; height: 280px; right: -45px; top: -210px; }
.knowledge-hero > div:first-child { position: relative; z-index: 2; }
.knowledge-hero .section-kicker { color: #8de0c5; }
.knowledge-hero h2 { max-width: 820px; margin: 0; font: 700 clamp(37px,4.7vw,63px)/.97 var(--display); letter-spacing: -.07em; }
.knowledge-hero p { max-width: 760px; margin: 17px 0; color: #b8c9c4; font-size: 12px; line-height: 1.65; }
.knowledge-hero-notes { display: flex; flex-wrap: wrap; gap: 8px 17px; }
.knowledge-policy { display: inline-flex; align-items: center; gap: 7px; color: #8de0c5; font-size: 12px; font-weight: 800; }
.knowledge-policy svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.knowledge-toolbox-cta { margin-top: 15px; }
.knowledge-hero-stamp { position: relative; z-index: 2; display: grid; align-content: center; min-height: 165px; padding: 21px; border: 1px solid rgba(118,208,179,.55); border-radius: 5px 5px 22px; background: rgba(255,255,255,.045); }
.knowledge-hero-stamp strong { color: #8de0c5; font: 800 57px/.9 var(--display); letter-spacing: -.09em; }
.knowledge-hero-stamp span, .knowledge-hero-stamp small { display: block; }
.knowledge-hero-stamp span { margin-top: 8px; color: white; font-size: 12px; font-weight: 800; }
.knowledge-hero-stamp small { margin-top: 17px; padding-top: 10px; color: #879b95; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.knowledge-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; margin-top: 13px; background: var(--line); border: 1px solid var(--line); border-radius: 5px 5px 17px; }
.knowledge-stats article { display: flex; align-items: baseline; gap: 8px; padding: 17px 18px; background: var(--paper); }
.knowledge-stats strong { color: var(--green); font: 800 22px var(--display); }
.knowledge-stats span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.governance-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.governance-strip span { min-height: 31px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #315d51; background: #e4f2ed; border: 1px solid #b9d7cd; border-radius: 99px; font-size: 12px; font-weight: 800; }
.governance-strip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.knowledge-library { margin-top: 35px; }
.knowledge-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.knowledge-toolbar > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.knowledge-card { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: .18s ease; }
.knowledge-card:hover { transform: translateY(-4px); border-color: #9ebcb2; box-shadow: 0 14px 28px rgba(30,42,42,.1); }
.knowledge-card-image { position: relative; aspect-ratio: 16/8; overflow: hidden; background: #dce2df; }
.knowledge-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(12,25,22,.5)); }
.knowledge-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s; }
.knowledge-card:hover .knowledge-card-image img { transform: scale(1.045); }
.knowledge-status { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 850; white-space: nowrap; }
.knowledge-status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.knowledge-status.approved { color: #15513e; background: #dff1e9; border: 1px solid #a8cbbd; }
.knowledge-card-image .knowledge-status { position: absolute; z-index: 2; left: 11px; bottom: 10px; }
.knowledge-card-body { min-height: 235px; display: flex; flex-direction: column; align-items: start; padding: 17px; }
.knowledge-card-meta { width: 100%; display: flex; justify-content: space-between; gap: 10px; color: #527066; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.knowledge-card-meta strong { color: #88948f; font-size: 12px; }
.knowledge-card h3 { margin: 10px 0 7px; font: 700 18px/1.12 var(--display); letter-spacing: -.04em; }
.knowledge-card p { display: -webkit-box; overflow: hidden; margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.knowledge-link-codes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.knowledge-link-codes span { padding: 4px 6px; color: #48685f; background: #e6efeb; border-radius: 3px; font: 800 12px var(--display); }
.knowledge-card .text-action { margin-top: auto; }
.knowledge-detail-stage { padding: 27px clamp(26px,4.6vw,72px) 60px; }
.knowledge-detail-hero { position: relative; min-height: 360px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; color: white; background: #111817; border-radius: var(--radius); }
.knowledge-detail-hero > div { align-self: center; padding: clamp(34px,5vw,60px); }
.knowledge-detail-hero .section-kicker { color: #8de0c5; }
.knowledge-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.knowledge-detail-badges span { padding: 5px 8px; color: #bfe5d9; background: rgba(118,208,179,.1); border: 1px solid rgba(118,208,179,.28); border-radius: 99px; font-size: 12px; font-weight: 800; }
.knowledge-detail-hero h1 { margin: 0; font: 700 clamp(36px,5vw,62px)/.97 var(--display); letter-spacing: -.07em; }
.knowledge-detail-hero p { max-width: 690px; margin: 17px 0 0; color: #b7c6c2; font-size: 12px; line-height: 1.65; }
.knowledge-detail-hero figure { position: relative; min-height: 360px; margin: 0; overflow: hidden; }
.knowledge-detail-hero figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#111817,transparent 37%); }
.knowledge-detail-hero img { width: 100%; height: 100%; display: block; object-fit: cover; }
.knowledge-validation { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; margin-top: 12px; background: var(--line); border: 1px solid var(--line); border-radius: 5px 5px 15px; }
.knowledge-validation > div { padding: 15px 17px; background: var(--paper); }
.knowledge-validation small, .knowledge-validation strong { display: block; }
.knowledge-validation small { color: var(--muted); font-size: 12px; }
.knowledge-validation strong { margin-top: 4px; color: #315d51; font-size: 12px; }
.knowledge-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; margin-top: 18px; }
.knowledge-detail-layout main { display: grid; gap: 12px; }
.knowledge-detail-layout aside { align-self: start; position: sticky; top: 18px; display: grid; gap: 12px; }
.knowledge-detail-block, .knowledge-side-card { padding: 25px 27px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px 5px 18px; }
.knowledge-detail-block p { margin: 0; color: #596761; font-size: 12px; line-height: 1.75; }
.knowledge-detail-block > h3 { margin: 4px 0 10px; font: 750 14px var(--display); }
.knowledge-detail-block ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #596761; font-size: 12px; line-height: 1.65; }
.knowledge-detail-block li::marker { color: var(--green); font-weight: 800; }
.knowledge-detail-block.risk { background: #fff4f1; border-color: #e4b6ae; border-left: 4px solid var(--red); }
.knowledge-detail-block.risk .talk-section-head > span { color: white; background: var(--red); }
.knowledge-detail-block.control { background: #edf5f0; border-color: #b8d0c6; border-left: 4px solid var(--green); }
.knowledge-detail-block.control .talk-section-head > span { color: white; background: var(--green); }
.knowledge-procedure { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.knowledge-procedure article { padding: 17px; background: #f3eee4; border-radius: 4px 4px 13px; }
.knowledge-procedure h3 { margin: 0 0 11px; color: var(--ink); font: 750 13px var(--display); }
.knowledge-anomaly { margin-top: 11px; padding: 15px 17px; color: #83392f; background: #fbebe7; border-radius: 4px 4px 12px; }
.knowledge-anomaly strong { display: block; margin-bottom: 5px; font-size: 12px; }
.knowledge-anomaly p { color: #72453f; }
.knowledge-key-message { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 16px; color: white; background: var(--ink); border-radius: 4px 4px 14px; }
.knowledge-key-message svg { width: 20px; height: 20px; min-width: 20px; fill: none; stroke: #8de0c5; stroke-width: 1.8; }
.knowledge-key-message strong { font: 600 12px/1.6 var(--display); }
.fictional-notice { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; padding: 11px 13px; color: #74530e; background: #fff0bb; border: 1px solid #e1ca77; border-radius: 4px 4px 11px; }
.fictional-notice svg { width: 17px; height: 17px; min-width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fictional-notice strong { font-size: 12px; line-height: 1.45; }
.knowledge-side-card { padding: 22px; box-shadow: 0 10px 25px rgba(30,42,42,.06); }
.knowledge-side-card .section-kicker { margin-bottom: 5px; }
.knowledge-side-card h2 { margin: 0 0 15px; font: 700 18px var(--display); }
.linked-item-list { display: grid; gap: 8px; }
.linked-item-list > div { display: flex; align-items: center; gap: 9px; padding: 10px; background: #f1ece2; border-radius: 4px 4px 11px; }
.linked-item-list > div > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: #8de0c5; border-radius: 50%; font: 800 12px var(--display); }
.linked-item-list strong, .linked-item-list small { display: block; }
.linked-item-list strong { font-size: 12px; }
.linked-item-list small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.source-card article { padding: 12px 0; border-top: 1px solid var(--line); }
.source-card article > strong { display: block; margin-bottom: 8px; font-size: 12px; line-height: 1.4; }
.source-card dl { display: grid; gap: 5px; margin: 0; }
.source-card dl > div { display: flex; justify-content: space-between; gap: 10px; }
.source-card dt, .source-card dd { margin: 0; color: var(--muted); font-size: 12px; }
.source-card dd { color: #315d51; font-weight: 800; text-align: right; }
html[dir="rtl"] .knowledge-promo-metrics { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid rgba(255,255,255,.14); }
html[dir="rtl"] .knowledge-card-image .knowledge-status { left: auto; right: 11px; }
html[dir="rtl"] .knowledge-detail-hero figure::after { background: linear-gradient(-90deg,#111817,transparent 37%); }
html[dir="rtl"] .knowledge-detail-block ul { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .knowledge-detail-block.risk { border-left: 1px solid #e4b6ae; border-right: 4px solid var(--red); }
html[dir="rtl"] .knowledge-detail-block.control { border-left: 1px solid #b8d0c6; border-right: 4px solid var(--green); }
html[dir="rtl"] .source-card dd { text-align: left; }

/* Algerian HSE regulatory reference */
.regulations-hero { position:relative; min-height:300px; display:grid; grid-template-columns:minmax(0,1fr) 175px; align-items:end; gap:35px; overflow:hidden; padding:44px 46px; color:white; background:linear-gradient(125deg,#102522,#183d36 68%,#25584e); border-radius:var(--radius); box-shadow:0 18px 38px rgba(30,42,42,.15); }
.regulations-hero::before { content:"DZ"; position:absolute; right:30px; top:-36px; color:rgba(246,183,30,.09); font:800 155px/1 var(--display); letter-spacing:-.1em; }
.regulations-hero > div { position:relative; z-index:2; }
.regulations-hero .section-kicker { color:#f7cd62; }
.regulations-hero h2 { max-width:850px; margin:0; font:700 clamp(37px,4.7vw,63px)/.97 var(--display); letter-spacing:-.07em; }
.regulations-hero p { max-width:780px; margin:17px 0; color:#bac9c5; font-size:12px; line-height:1.65; }
.regulation-source-links { display:flex; flex-wrap:wrap; align-items:center; gap:9px 18px; }
.regulation-source-badge,.regulation-source-links a { display:inline-flex; align-items:center; gap:7px; color:#f7cd62; font-size:12px; font-weight:800; text-decoration:none; }
.regulation-source-links a { color:#8de0c5; }
.regulation-source-badge svg,.regulation-source-links svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.regulations-hero-metrics { display:grid; align-content:center; min-height:165px; padding:21px; border:1px solid rgba(246,183,30,.48); border-radius:5px 5px 22px; background:rgba(255,255,255,.045); }
.regulations-hero-metrics strong { color:var(--yellow); font:800 57px/.9 var(--display); letter-spacing:-.09em; }
.regulations-hero-metrics span,.regulations-hero-metrics small { display:block; }
.regulations-hero-metrics span { margin-top:8px; color:white; font-size:12px; font-weight:800; }
.regulations-hero-metrics small { margin-top:17px; padding-top:10px; color:#91a39e; border-top:1px solid rgba(255,255,255,.12); font-size:12px; }
.regulation-warning { display:flex; align-items:flex-start; gap:12px; margin-top:12px; padding:16px 18px; color:#74530e; background:#fff6d7; border:1px solid #dfc56b; border-radius:5px 5px 15px; }
.regulation-warning > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:#805b0b; background:#f4d36d; border-radius:50%; }
.regulation-warning svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.regulation-warning strong { display:block; font-size:12px; }
.regulation-warning p { margin:4px 0 0; color:#775f2c; font-size:12px; line-height:1.55; }
.regulation-warning a { display:inline-flex; align-items:center; gap:6px; margin-top:7px; color:#71500b; font-size:12px; font-weight:850; text-decoration:underline; text-underline-offset:3px; }
.regulation-warning a svg { width:14px; height:14px; }
.regulation-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; margin-top:12px; background:var(--line); border:1px solid var(--line); border-radius:5px 5px 15px; }
.regulation-overview > div { padding:15px 17px; background:var(--paper); }
.regulation-overview small,.regulation-overview strong { display:block; }
.regulation-overview small { color:var(--muted); font-size:12px; }
.regulation-overview strong { margin-top:4px; color:#315d51; font-size:12px; }
.regulations-library { margin-top:35px; }
.regulations-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.regulations-groups { display:grid; gap:20px; }
.regulation-group { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:6px 6px 22px; box-shadow:0 9px 25px rgba(30,42,42,.055); }
.regulation-group-head { display:flex; align-items:center; gap:14px; min-height:78px; padding:15px 20px; color:white; background:linear-gradient(110deg,#172522,#25423b); }
.regulation-group-head > span { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:4px 4px 14px; font:800 15px var(--display); }
.regulation-group-head h2 { margin:0; font:700 21px var(--display); letter-spacing:-.04em; }
.regulation-group-head small { display:block; margin-top:4px; color:#94a8a1; font-size:12px; }
.regulation-subcategories { display:grid; gap:0; }
.regulation-subcategory { padding:20px; border-top:1px solid var(--line); }
.regulation-subcategory:first-child { border-top:0; }
.regulation-subcategory > header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:10px; }
.regulation-subcategory > header h3 { margin:0; color:#315d51; font:750 14px var(--display); }
.regulation-subcategory > header span { min-width:26px; height:22px; display:grid; place-items:center; color:#49665e; background:#e4eee9; border-radius:99px; font-size:12px; font-weight:850; }
.regulation-documents { display:grid; gap:7px; }
.regulation-document-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; min-height:78px; padding:11px 12px; background:#f5f0e6; border:1px solid #e0d9cd; border-radius:4px 4px 12px; }
.regulation-source-icon { width:42px; height:48px; display:grid; place-items:center; flex:0 0 auto; color:var(--yellow); background:var(--ink); border-radius:3px 3px 11px; font:850 12px var(--display); letter-spacing:.06em; }
.regulation-document-copy { min-width:0; }
.regulation-document-title { display:block; width:100%; padding:0; color:var(--ink); font:700 12px/1.4 var(--display); text-align:left; }
.regulation-document-title:hover { color:#8a5b09; text-decoration:underline; text-underline-offset:3px; }
.regulation-document-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.regulation-document-tags span { padding:3px 6px; color:#63706b; background:white; border:1px solid #ddd5c9; border-radius:99px; font-size:12px; font-weight:750; }
.regulation-document-actions { display:flex; align-items:center; gap:6px; }
.document-action { min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border-radius:4px 4px 10px; font-size:12px; font-weight:850; text-decoration:none; }
.document-action svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.document-action.official { color:var(--ink); background:var(--yellow); border:1px solid #dda315; }
.document-action:hover { transform:translateY(-1px); box-shadow:0 5px 10px rgba(30,42,42,.1); }
.regulation-card { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 18px; cursor:pointer; transition:.18s ease; }
.regulation-card:hover { transform:translateY(-3px); border-color:#b5aa94; box-shadow:0 12px 25px rgba(30,42,42,.09); }
.regulation-card-top { min-height:39px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 13px; background:#ece7dc; border-bottom:1px solid var(--line); }
.regulation-type { display:inline-flex; padding:5px 8px; color:#5d4a1d; background:#f7d977; border-radius:3px 3px 8px; font-size:12px; font-weight:850; text-transform:uppercase; }
.regulation-status { color:#7b5b16; font-size:12px; font-weight:800; }
.regulation-status.detail { min-height:29px; display:inline-flex; align-items:center; padding:0 10px; background:#fff0bb; border:1px solid #dec574; border-radius:99px; }
.regulation-card-body { min-height:205px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto; column-gap:13px; padding:17px; }
.regulation-reference { grid-row:1/4; width:64px; min-height:72px; display:grid; align-content:center; justify-items:center; padding:9px 6px; color:white; background:var(--ink); border-radius:4px 4px 15px; text-align:center; }
.regulation-reference strong { font:800 12px/1.1 var(--display); word-break:break-word; }
.regulation-reference small { margin-top:6px; color:var(--yellow); font-size:12px; }
.regulation-category { color:#527066; font-size:12px; font-weight:800; text-transform:uppercase; }
.regulation-card h3 { margin:8px 0 12px; font:700 17px/1.22 var(--display); letter-spacing:-.035em; }
.regulation-card-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:800; }
.regulation-card-footer .text-action { font-size:12px; }
.regulation-detail-stage { padding:27px clamp(26px,4.6vw,72px) 60px; }
.regulation-detail-hero { position:relative; overflow:hidden; padding:43px 46px; color:white; background:radial-gradient(circle at 90% 0,#2b5d52,#111817 55%); border-radius:var(--radius); }
.regulation-detail-hero::after { content:"DZ"; position:absolute; right:30px; top:-20px; color:rgba(246,183,30,.09); font:800 145px/1 var(--display); }
.regulation-detail-hero > * { position:relative; z-index:2; }
.regulation-detail-hero .section-kicker { color:#f7cd62; }
.regulation-detail-hero h1 { max-width:900px; margin:16px 0 10px; font:700 clamp(34px,4.5vw,57px)/1.02 var(--display); letter-spacing:-.06em; }
.regulation-detail-hero > p { color:#b6c5c1; font-size:12px; }
.regulation-detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.regulation-detail-hero .button-outline { color:white; border-color:#71827c; }
.regulation-detail-hero .button-outline:hover { color:var(--ink); }
.regulation-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:18px; margin-top:18px; }
.regulation-detail-layout aside { align-self:start; }
.regulation-document-card { padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 18px; }
.regulation-document-card h2 { max-width:880px; margin:0; font:700 clamp(24px,3vw,36px)/1.18 var(--display); letter-spacing:-.045em; }
.regulation-document-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; margin-top:22px; background:var(--line); border:1px solid var(--line); border-radius:4px 4px 13px; }
.regulation-document-meta > div { padding:14px; background:#f5f0e6; }
.regulation-document-meta small,.regulation-document-meta strong { display:block; }
.regulation-document-meta small { color:var(--muted); font-size:12px; }
.regulation-document-meta strong { margin-top:4px; color:#315d51; font-size:12px; }
.official-language-note { display:flex; align-items:center; gap:8px; margin:16px 0 0; color:var(--muted); font-size:12px; }
.official-language-note svg { width:17px; height:17px; fill:none; stroke:var(--green); stroke-width:1.8; }
html[dir="rtl"] .regulations-hero::before,html[dir="rtl"] .regulation-detail-hero::after { right:auto; left:30px; }
html[dir="rtl"] .regulation-card h3,html[dir="rtl"] .regulation-document-title { text-align:right; }


/* Governed regulatory assistant — metadata demonstration */
.regulation-ai-link { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; color:var(--ink); background:var(--yellow); border-radius:99px; font-size:12px; font-weight:850; }
.regulation-ai-link svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.assistant-page { max-width:1400px; }
.assistant-hero { position:relative; min-height:310px; display:grid; grid-template-columns:minmax(0,1fr) 190px; align-items:end; gap:35px; overflow:hidden; padding:46px; color:white; background:radial-gradient(circle at 88% 12%,#2a5d51,#111817 51%); border-radius:var(--radius); box-shadow:0 18px 38px rgba(30,42,42,.16); }
.assistant-hero::before,.assistant-hero::after { content:""; position:absolute; border:1px solid rgba(118,208,179,.18); border-radius:50%; }
.assistant-hero::before { width:410px; height:410px; right:-135px; top:-280px; }
.assistant-hero::after { width:280px; height:280px; right:-45px; top:-210px; }
.assistant-hero > div { position:relative; z-index:2; }
.assistant-hero .section-kicker { color:#8de0c5; }
.assistant-hero h2 { max-width:850px; margin:0; font:700 clamp(38px,4.8vw,64px)/.98 var(--display); letter-spacing:-.07em; }
.assistant-hero p { max-width:750px; margin:17px 0; color:#c1d0cb; font-size:13px; line-height:1.7; }
.assistant-scope { display:inline-flex; align-items:center; gap:7px; color:#8de0c5; font-size:12px; font-weight:800; }
.assistant-scope svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
.assistant-hero-metric { display:grid; align-content:center; min-height:170px; padding:22px; border:1px solid rgba(246,183,30,.48); border-radius:5px 5px 22px; background:rgba(255,255,255,.05); }
.assistant-hero-metric strong { color:var(--yellow); font:800 58px/.9 var(--display); }
.assistant-hero-metric span,.assistant-hero-metric small { display:block; }
.assistant-hero-metric span { margin-top:8px; color:white; font-size:12px; font-weight:800; }
.assistant-hero-metric small { margin-top:15px; padding-top:10px; color:#a9bab5; border-top:1px solid rgba(255,255,255,.13); font-size:12px; }
.assistant-notice { display:flex; align-items:flex-start; gap:12px; margin-top:12px; padding:17px 19px; color:#604607; background:#fff4cc; border:1px solid #d6b850; border-radius:5px 5px 15px; }
.assistant-notice > svg { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; }
.assistant-notice strong { display:block; font-size:13px; }
.assistant-notice p { margin:5px 0 0; font-size:12px; line-height:1.6; }
.assistant-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; margin-top:18px; }
.assistant-chat,.assistant-governance { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 28px rgba(30,42,42,.06); }
.assistant-chat { min-width:0; overflow:hidden; }
.assistant-conversation { min-height:330px; display:grid; align-content:start; gap:15px; padding:24px; background:linear-gradient(180deg,#f7f2e8,#fffaf0); }
.assistant-bubble { display:flex; align-items:flex-start; gap:10px; max-width:900px; }
.assistant-bubble.user { justify-self:end; justify-content:flex-end; width:min(690px,88%); }
.assistant-bubble > div { min-width:0; padding:15px 17px; background:white; border:1px solid var(--line); border-radius:5px 5px 17px; }
.assistant-bubble.user > div { color:white; background:#21463e; border-color:#315f54; border-radius:17px 5px 17px 17px; }
.assistant-bubble p { margin:0; color:#43514c; font-size:14px; line-height:1.65; }
.assistant-bubble.user p { color:white; }
.assistant-bubble.user small { display:block; margin-bottom:4px; color:#a9d9ca; font-size:12px; font-weight:800; }
.assistant-bubble.bot > div > small { display:flex; align-items:center; gap:6px; margin-top:9px; color:#315d51; font-size:12px; font-weight:800; }
.assistant-bubble.bot > div > small svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.assistant-avatar { width:39px; height:39px; display:grid; place-items:center; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:4px 4px 13px; font:900 12px var(--display); }
.assistant-guardrail { display:flex; align-items:flex-start; gap:9px; margin-bottom:13px; padding:12px; color:#694c0c; background:#fff1bd; border:1px solid #dcc366; border-radius:4px 4px 12px; }
.assistant-guardrail svg { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }
.assistant-guardrail p { color:inherit; font-size:12px; }
.assistant-source-title { display:block; margin:14px 0 8px; color:var(--ink); font-size:12px; }
.assistant-reference-list { display:grid; gap:8px; }
.assistant-reference { padding:14px; background:#f5f0e6; border:1px solid #ddd5c8; border-radius:4px 4px 13px; }
.assistant-reference header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.assistant-reference header span { color:#315d51; font-size:12px; font-weight:900; }
.assistant-reference header em { color:#6b4d0b; font-size:12px; font-style:normal; font-weight:800; }
.assistant-reference h4 { margin:8px 0 5px; color:var(--ink); font:750 16px/1.3 var(--display); }
.assistant-reference p { color:var(--muted); font-size:12px; }
.assistant-reference a { min-height:38px; display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:0 11px; color:var(--ink); background:var(--yellow); border:1px solid #d99e0b; border-radius:4px 4px 10px; font-size:12px; font-weight:850; text-decoration:none; }
.assistant-reference a svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.assistant-official-note { display:flex; align-items:flex-start; gap:7px; margin-top:13px !important; padding-top:12px; color:#315d51 !important; border-top:1px solid var(--line); font-size:12px !important; font-weight:750; }
.assistant-official-note svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; }
.assistant-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; padding:16px 18px; background:white; border-top:1px solid var(--line); }
.assistant-form input { width:100%; min-height:51px; padding:0 15px; color:var(--ink); background:#fffdf8; border:1px solid #aeb7b2; border-radius:4px 4px 12px; font-size:15px; outline:none; }
.assistant-form input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(246,183,30,.28); }
.assistant-examples { padding:2px 18px 17px; background:white; }
.assistant-examples > strong { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; }
.assistant-examples > div { display:flex; flex-wrap:wrap; gap:6px; }
.assistant-examples button { min-height:36px; padding:5px 10px; color:#315d51; background:#e6f0ec; border:1px solid #b9d3ca; border-radius:99px; font-size:12px; font-weight:750; }
.assistant-clear { min-height:40px; margin:0 18px 17px; color:#7a372f; font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.assistant-governance { align-self:start; padding:23px; }
.assistant-governance h3 { margin:0 0 18px; font:700 20px/1.25 var(--display); }
.assistant-governance > div { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.assistant-governance > div > span { width:29px; height:29px; display:grid; place-items:center; flex:0 0 auto; color:var(--ink); background:#8de0c5; border-radius:50%; font:800 12px var(--display); }
.assistant-governance p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.assistant-governance .assistant-watch > span { background:#ffe29b; }
.assistant-watch p { display:grid; gap:5px; }
.assistant-watch strong { color:var(--ink); font:700 12px/1.35 var(--display); }
.assistant-watch small { color:var(--muted); font-size:12px; line-height:1.5; }
.assistant-governance .button { margin-top:13px; }
html[dir="rtl"] .assistant-hero::before { right:auto; left:-135px; }
html[dir="rtl"] .assistant-hero::after { right:auto; left:-45px; }

/* Toolbox Talks library */
.toolbox-promo { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; margin-top: 14px; padding: 19px 21px; color: white; background: linear-gradient(115deg,#263c38,var(--ink)); border: 1px solid #3c514c; border-radius: var(--radius); box-shadow: 0 12px 27px rgba(30,42,42,.11); }
.toolbox-promo-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 5px 5px 17px; }
.toolbox-promo-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.toolbox-promo .section-kicker { margin-bottom: 4px; color: #f7ce66; }
.toolbox-promo h3 { margin: 0; font: 700 18px var(--display); letter-spacing: -.04em; }
.toolbox-promo p { margin: 4px 0 0; color: #9eaea8; font-size: 12px; }
.toolbox-promo-progress { min-width: 93px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.13); }
.toolbox-promo-progress strong, .toolbox-promo-progress span { display: block; }
.toolbox-promo-progress strong { color: var(--yellow); font: 800 18px var(--display); }
.toolbox-promo-progress span { color: #82928d; font-size: 12px; }
.toolbox-hero { position: relative; min-height: 270px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 35px; overflow: hidden; padding: 42px 45px; color: white; background: linear-gradient(120deg,var(--ink-2),#2d4540); border-radius: var(--radius); box-shadow: 0 18px 38px rgba(30,42,42,.14); }
.toolbox-hero::before { content: ""; position: absolute; width: 410px; height: 410px; right: -80px; top: -265px; border: 1px solid rgba(246,183,30,.16); border-radius: 50%; }
.toolbox-hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: -15px; top: -205px; border: 1px solid rgba(246,183,30,.13); border-radius: 50%; }
.toolbox-hero-copy { position: relative; z-index: 2; }
.toolbox-hero .section-kicker { color: #f6cf69; }
.toolbox-hero h2 { max-width: 760px; margin: 0; font: 700 clamp(38px,5vw,65px)/.96 var(--display); letter-spacing: -.07em; }
.toolbox-hero p { max-width: 670px; margin: 16px 0 17px; color: #b8c5c1; font-size: 12px; line-height: 1.6; }
.language-note { display: inline-flex; align-items: center; gap: 7px; color: #94a59f; font-size: 12px; font-weight: 700; }
.language-note svg { width: 14px; height: 14px; fill: none; stroke: var(--yellow); stroke-width: 1.8; }
.toolbox-count { position: relative; z-index: 2; min-width: 145px; display: grid; padding: 21px; border: 1px solid rgba(246,183,30,.45); border-radius: 5px 5px 20px; background: rgba(255,255,255,.04); }
.toolbox-count > span { color: var(--yellow); font: 800 12px var(--display); letter-spacing: .14em; }
.toolbox-count strong { color: white; font: 800 55px/.95 var(--display); letter-spacing: -.09em; }
.toolbox-count small { margin-top: 6px; color: #a8b7b2; font-size: 12px; }
.toolbox-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; margin-top: 13px; background: var(--line); border: 1px solid var(--line); border-radius: 5px 5px 17px; }
.toolbox-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 15px 18px; background: var(--paper); }
.toolbox-stat-icon { grid-row: 1/3; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--yellow-soft); border-radius: 50%; }
.toolbox-stat-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.toolbox-stats strong { font: 800 18px/1 var(--display); }
.toolbox-stats small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.toolbox-library { margin-top: 35px; }
.toolbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.toolbox-toolbar > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.talk-search { position: relative; width: min(100%,420px); }
.talk-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; transform: translateY(-50%); }
.talk-search input { width: 100%; height: 43px; padding: 0 13px 0 39px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px 4px 12px; outline: none; font-size: 12px; }
.talk-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,183,30,.22); }
.toolbox-filters { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 19px; padding-bottom: 5px; scrollbar-width: thin; }
.toolbox-chip { flex: 0 0 auto; min-height: 31px; padding: 0 11px; color: #5e6b66; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-weight: 800; }
.toolbox-chip:hover { border-color: var(--ink); }
.toolbox-chip.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.talk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.talk-card { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: .18s ease; }
.talk-card::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; border-top: 8px solid var(--yellow); border-left: 8px solid transparent; }
.talk-card:hover { transform: translateY(-4px); border-color: #bdb4a5; box-shadow: 0 14px 28px rgba(30,42,42,.1); }
.talk-card.complete { border-color: #98b4a9; }
.talk-card.complete::after { border-top-color: var(--green); }
.talk-card-top { min-height: 57px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: #ece7dc; border-bottom: 1px solid var(--line); }
.talk-number { min-width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 3px 3px 11px; font: 800 13px var(--display); }
.talk-card.complete .talk-number { color: white; background: var(--green); }
.talk-card-image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #dce2df; }
.talk-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 65%,rgba(17,24,23,.16)); pointer-events: none; }
.talk-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s ease; }
.talk-card:hover .talk-card-image img { transform: scale(1.045); }
.talk-category { min-width: 0; overflow: hidden; color: #6e7a75; font-size: 12px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.talk-complete { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.talk-complete svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.talk-card-body { min-height: 187px; display: flex; flex-direction: column; align-items: start; padding: 17px; }
.talk-duration { display: inline-flex; align-items: center; gap: 5px; color: #8a5b09; font-size: 12px; font-weight: 800; }
.talk-duration svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.talk-card h3 { margin: 10px 0 7px; font: 700 17px/1.12 var(--display); letter-spacing: -.04em; }
.talk-card p { display: -webkit-box; overflow: hidden; margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.talk-card .text-action { margin-top: auto; }
.load-more-wrap { display: flex; justify-content: center; min-height: 42px; margin-top: 22px; }
.toolbox-empty { grid-column: 1/-1; display: grid; justify-items: center; padding: 55px 20px; background: var(--paper); border: 1px dashed #bbb3a7; border-radius: var(--radius); text-align: center; }
.toolbox-empty > span { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 12px; color: var(--ink); background: var(--yellow-soft); border-radius: 50%; }
.toolbox-empty svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.toolbox-empty strong { font: 700 16px var(--display); }
.toolbox-empty p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* Toolbox visual galleries */
.visual-gallery { margin-top: 18px; padding: 25px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.visual-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.visual-gallery-heading .section-kicker { margin-bottom: 5px; }
.visual-gallery-heading h2 { margin: 0; font: 700 21px var(--display); letter-spacing: -.04em; }
.visual-gallery-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.gallery-count { color: #b9b2a7; font: 800 27px var(--display); }
.visual-gallery-grid { display: grid; grid-template-columns: 1.45fr .775fr .775fr; gap: 10px; }
.visual-photo { position: relative; min-height: 205px; overflow: hidden; padding: 0; border-radius: 5px 5px 17px; background: var(--ink); text-align: left; }
.visual-photo.primary { min-height: 270px; }
.visual-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .28s ease, filter .28s ease; }
.visual-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(12,22,20,.86)); }
.visual-photo > span { position: absolute; z-index: 2; left: 15px; right: 15px; bottom: 14px; color: white; }
.visual-photo small, .visual-photo strong { display: block; }
.visual-photo small { margin-bottom: 4px; color: var(--yellow); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.visual-photo strong { font: 700 12px/1.25 var(--display); }
.visual-photo > em { position: absolute; z-index: 3; right: 10px; top: 10px; width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: rgba(255,250,240,.9); border-radius: 50%; opacity: 0; transform: translateY(-3px); transition: .2s; }
.visual-photo > em svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.visual-photo:hover img { transform: scale(1.04); filter: saturate(1.08); }
.visual-photo:hover > em, .visual-photo:focus-visible > em { opacity: 1; transform: none; }
.image-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(7,13,12,.88); backdrop-filter: blur(8px); }
.image-lightbox figure { width: min(760px,100%); margin: 0; overflow: hidden; background: var(--paper); border-radius: 7px 7px 24px; box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.image-lightbox img { width: 100%; max-height: calc(100vh - 135px); display: block; object-fit: contain; background: #17211f; }
.image-lightbox figcaption { padding: 15px 18px; color: var(--ink); font: 700 13px var(--display); }
.lightbox-close { position: fixed; z-index: 2; right: 22px; top: 18px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 27px; }
body.lightbox-open { overflow: hidden; }

/* Narrated safety animations */
.talk-video-badge { position: absolute; z-index: 2; left: 11px; top: 11px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: white; background: rgba(17,24,23,.88); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; font-size: 12px; font-weight: 800; backdrop-filter: blur(6px); }
.talk-video-badge b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 12px; }
.safety-animation-section { margin-top: 18px; padding: 24px; color: white; background: #111817; border: 1px solid #2f3b38; border-radius: var(--radius); box-shadow: 0 17px 38px rgba(17,24,23,.18); }
.safety-animation-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.safety-animation-heading .section-kicker { color: var(--yellow); }
.safety-animation-heading h2 { margin: 0; font: 750 25px/1 var(--display); letter-spacing: -.04em; }
.safety-animation-heading p { max-width: 670px; margin: 8px 0 0; color: #aab8b3; font-size: 12px; line-height: 1.6; }
.animation-language { flex: 0 0 auto; padding: 7px 10px; color: var(--yellow); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; font-size: 12px; font-weight: 850; }
.safety-animation-player { position: relative; min-height: 345px; overflow: hidden; background: #1d2826; border: 1px solid #40504c; border-radius: 5px 5px 20px; }
.safety-animation-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.animation-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(11,18,17,.86),rgba(11,18,17,.15) 66%),linear-gradient(0deg,rgba(11,18,17,.94),transparent 55%); pointer-events: none; }
.animation-scene-copy { position: absolute; z-index: 2; left: 30px; bottom: 55px; width: min(610px,68%); text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.animation-scene-copy small, .animation-scene-copy strong { display: block; }
.animation-scene-copy small { margin-bottom: 7px; color: var(--yellow); font-size: 12px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.animation-scene-copy strong { font: 750 clamp(22px,3vw,34px)/1.06 var(--display); letter-spacing: -.04em; }
.animation-scene-copy p { margin: 9px 0 0; color: #e0e8e5; font-size: 12px; line-height: 1.55; }
.animation-play { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 7px 17px 7px 8px; color: var(--ink); background: var(--yellow); border-radius: 99px; transform: translate(-50%,-50%); box-shadow: 0 13px 33px rgba(0,0,0,.34); font-size: 12px; font-weight: 850; transition: .2s ease; }
.animation-play > span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 50%; font-size: 13px; }
.animation-play:hover { background: #ffc83a; transform: translate(-50%,-52%); }
.animation-play.playing { left: auto; right: 18px; top: 17px; min-height: 45px; padding: 4px 7px 4px 4px; transform: none; }
.animation-play.playing:hover { transform: none; }
.animation-play.playing > span { width: 35px; height: 35px; }
.animation-play.playing b { display: none; }
.animation-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; min-height: 40px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 16px; color: #cbd6d2; background: rgba(10,16,15,.84); border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 800; }
.animation-progress { height: 4px; overflow: hidden; background: rgba(255,255,255,.2); border-radius: 99px; }
.animation-progress span { display: block; width: 0; height: 100%; background: var(--yellow); transition: width .12s linear; }
.animation-scene-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.animation-scene-tab { min-width: 0; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; padding: 10px 12px; color: #7d8c87; background: rgba(255,255,255,.04); border: 1px solid #303d3a; border-radius: 4px 4px 12px; transition: .2s; }
.animation-scene-tab > span { width: 31px; height: 31px; display: grid; place-items: center; color: #7d8c87; background: #222e2b; border-radius: 50%; font: 800 12px var(--display); }
.animation-scene-tab strong { overflow: hidden; font: 700 12px/1.25 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.animation-scene-tab.active { color: white; background: rgba(246,183,30,.1); border-color: rgba(246,183,30,.5); }
.animation-scene-tab.active > span { color: var(--ink); background: var(--yellow); }
html[dir="rtl"] .talk-video-badge { left: auto; right: 11px; }
html[dir="rtl"] .animation-shade { background: linear-gradient(-90deg,rgba(11,18,17,.86),rgba(11,18,17,.15) 66%),linear-gradient(0deg,rgba(11,18,17,.94),transparent 55%); }
html[dir="rtl"] .animation-scene-copy { left: auto; right: 30px; }
html[dir="rtl"] .animation-play.playing { right: auto; left: 18px; }

/* Lightweight 3D simulations for the remaining Toolbox topics */
.talk-video-badge.three-d { background: rgba(19,53,47,.9); }
.talk-video-badge.three-d b { width: 25px; border-radius: 5px; font-size: 12px; }
.three-d-animation-section { margin-top: 18px; padding: 24px; color: white; background: radial-gradient(circle at 85% 10%,#28483f,#111817 48%); border: 1px solid #375047; border-radius: var(--radius); box-shadow: 0 17px 38px rgba(17,24,23,.18); }
.three-d-animation-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.three-d-animation-heading .section-kicker { color: #77d4b9; }
.three-d-animation-heading h2 { margin: 0; font: 750 25px/1 var(--display); letter-spacing: -.04em; }
.three-d-animation-heading p { max-width: 670px; margin: 8px 0 0; color: #abc0ba; font-size: 12px; line-height: 1.6; }
.three-d-player { position: relative; min-height: 390px; overflow: hidden; background: linear-gradient(145deg,#0e1715,#1b312b); border: 1px solid #405d54; border-radius: 5px 5px 20px; perspective: 1100px; }
.three-d-world { --scene-color:#c84c3c; position: absolute; inset: 0; overflow: hidden; transform-style: preserve-3d; transition: --scene-color .5s ease; }
.three-d-world.scene-1 { --scene-color:#f6b71e; }
.three-d-world.scene-2 { --scene-color:#4fb290; }
.three-d-grid-floor { position: absolute; left: -15%; right: -15%; bottom: -45%; height: 95%; opacity: .35; background-image: linear-gradient(rgba(90,180,151,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(90,180,151,.35) 1px,transparent 1px); background-size: 36px 36px; transform: rotateX(64deg) translateZ(-70px); transform-origin: center top; animation: grid-drift 7s linear infinite; }
.three-d-photo-plane { position: absolute; right: 8%; top: 8%; width: 52%; height: 76%; overflow: hidden; background: #243732; border: 3px solid var(--scene-color); border-radius: 8px 8px 25px; box-shadow: -25px 28px 55px rgba(0,0,0,.42),0 0 35px color-mix(in srgb,var(--scene-color) 30%,transparent); transform: rotateY(-11deg) rotateX(2deg) translateZ(50px); transform-origin: center; transition: border-color .55s,transform .7s ease,filter .7s; animation: plane-float 5s ease-in-out infinite; }
.three-d-photo-plane::after { content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,255,255,.13),transparent 33%),linear-gradient(0deg,rgba(6,13,11,.66),transparent 45%); }
.three-d-photo-plane img { width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.08); transition:filter .6s,transform 8s linear; transform:scale(1.05); }
.three-d-world.scene-0 .three-d-photo-plane img { filter:saturate(.55) contrast(1.12) sepia(.18); transform:scale(1.13); }
.three-d-world.scene-1 .three-d-photo-plane { transform:rotateY(-5deg) rotateX(1deg) translateZ(72px); }
.three-d-world.scene-1 .three-d-photo-plane img { filter:saturate(.9) contrast(1.07); }
.three-d-world.scene-2 .three-d-photo-plane { transform:rotateY(0) rotateX(0) translateZ(90px); }
.three-d-world.scene-2 .three-d-photo-plane img { filter:saturate(1.08) contrast(1.04); transform:scale(1.02); }
.three-d-hazard-marker { position:absolute; z-index:3; right:50%; top:17%; width:66px; height:66px; display:grid; place-items:center; color:white; background:#c84c3c; clip-path:polygon(50% 0,100% 90%,0 90%); transform:translateZ(145px); filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); transition:.55s ease; animation:hazard-pulse 1.2s ease-in-out infinite; }
.three-d-hazard-marker > span { padding-top:14px; font:900 29px var(--display); }
.three-d-hazard-marker i { position:absolute; left:50%; top:50%; width:95px; height:95px; border:1px solid rgba(200,76,60,.55); border-radius:50%; transform:translate(-50%,-40%); animation:ring-pulse 1.6s ease-out infinite; }
.three-d-hazard-marker i:nth-child(3) { animation-delay:.8s; }
.three-d-world.scene-1 .three-d-hazard-marker { opacity:.42; transform:translateZ(35px) scale(.72); }
.three-d-world.scene-2 .three-d-hazard-marker { opacity:0; transform:translateZ(-40px) scale(.45); }
.three-d-barrier { position:absolute; z-index:4; right:42%; top:12%; bottom:18%; width:18%; display:flex; justify-content:space-between; opacity:.15; transform:rotateY(-16deg) translateZ(175px) scale(.8); transition:.65s ease; }
.three-d-barrier i { width:6px; height:100%; background:repeating-linear-gradient(0deg,#f6b71e 0 17px,#1e2a2a 17px 34px); border-radius:99px; box-shadow:0 0 20px rgba(246,183,30,.35); }
.three-d-world.scene-1 .three-d-barrier { opacity:1; transform:rotateY(-7deg) translateZ(175px) scale(1); }
.three-d-world.scene-2 .three-d-barrier { opacity:.55; filter:hue-rotate(65deg); transform:rotateY(0) translateZ(80px) scale(.92); }
.three-d-cube { position:absolute; z-index:5; right:13%; bottom:17%; width:54px; height:54px; opacity:.25; transform-style:preserve-3d; transform:rotateX(-18deg) rotateY(30deg) translateZ(180px); transition:opacity .5s; animation:cube-spin 9s linear infinite; }
.three-d-world.scene-1 .three-d-cube,.three-d-world.scene-2 .three-d-cube { opacity:1; }
.three-d-cube span { position:absolute; inset:0; display:grid; place-items:center; color:#12201d; background:rgba(246,183,30,.9); border:1px solid rgba(255,255,255,.68); font:900 16px var(--display); backface-visibility:visible; }
.cube-front { transform:translateZ(27px); }.cube-back { transform:rotateY(180deg) translateZ(27px); }.cube-right { transform:rotateY(90deg) translateZ(27px); }.cube-left { transform:rotateY(-90deg) translateZ(27px); }.cube-top { transform:rotateX(90deg) translateZ(27px); }.cube-bottom { transform:rotateX(-90deg) translateZ(27px); }
.three-d-particles i { position:absolute; z-index:2; width:7px; height:7px; background:var(--scene-color); border-radius:50%; box-shadow:0 0 13px var(--scene-color); animation:particle-rise 5s ease-in-out infinite; }
.three-d-particles i:nth-child(1){right:12%;bottom:7%;}.three-d-particles i:nth-child(2){right:31%;bottom:12%;animation-delay:-1s}.three-d-particles i:nth-child(3){right:45%;bottom:5%;animation-delay:-2s}.three-d-particles i:nth-child(4){right:21%;bottom:28%;animation-delay:-3s}.three-d-particles i:nth-child(5){right:52%;bottom:19%;animation-delay:-4s}
.three-d-vignette { position:absolute; inset:0; z-index:6; background:linear-gradient(90deg,rgba(7,13,12,.93) 0,rgba(7,13,12,.68) 37%,transparent 68%),linear-gradient(0deg,rgba(7,13,12,.9),transparent 42%); pointer-events:none; }
.three-d-scene-copy { position:absolute; z-index:7; left:29px; bottom:57px; width:min(500px,48%); text-shadow:0 2px 8px rgba(0,0,0,.4); }
.three-d-scene-copy small,.three-d-scene-copy strong { display:block; }
.three-d-scene-copy small { margin-bottom:7px; color:var(--yellow); font-size:12px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.three-d-scene-copy strong { font:750 clamp(22px,3vw,33px)/1.06 var(--display); letter-spacing:-.04em; }
.three-d-scene-copy p { margin:9px 0 0; color:#e0e8e5; font-size:12px; line-height:1.55; }
.three-d-play { position:absolute; z-index:9; left:50%; top:50%; display:flex; align-items:center; gap:11px; min-height:52px; padding:7px 17px 7px 8px; color:var(--ink); background:#6fd0b1; border-radius:99px; transform:translate(-50%,-50%); box-shadow:0 13px 33px rgba(0,0,0,.34); font-size:12px; font-weight:850; transition:.2s ease; }
.three-d-play > span { width:38px; height:38px; display:grid; place-items:center; color:white; background:var(--ink); border-radius:50%; font-size:13px; }
.three-d-play:hover { background:#8be0c4; transform:translate(-50%,-52%); }
.three-d-play.playing { left:auto; right:18px; top:17px; min-height:45px; padding:4px 7px 4px 4px; transform:none; }
.three-d-play.playing:hover { transform:none; }.three-d-play.playing > span { width:35px; height:35px; }.three-d-play.playing b { display:none; }
.three-d-controls { position:absolute; z-index:8; left:0; right:0; bottom:0; min-height:41px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:0 16px; color:#cbd6d2; background:rgba(7,13,12,.88); border-top:1px solid rgba(255,255,255,.12); font-size:12px; font-weight:800; }
.three-d-progress { height:4px; overflow:hidden; background:rgba(255,255,255,.2); border-radius:99px; }.three-d-progress span { display:block; width:0; height:100%; background:#6fd0b1; transition:width .12s linear; }
.three-d-scene-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.three-d-scene-tab { min-width:0; display:grid; grid-template-columns:31px 1fr; align-items:center; gap:9px; padding:10px 12px; color:#7d8c87; background:rgba(255,255,255,.04); border:1px solid #30463f; border-radius:4px 4px 12px; transition:.2s; }
.three-d-scene-tab > span { width:31px; height:31px; display:grid; place-items:center; color:#7d8c87; background:#22332e; border-radius:50%; font:800 12px var(--display); }
.three-d-scene-tab strong { overflow:hidden; font:700 12px/1.25 var(--display); text-overflow:ellipsis; white-space:nowrap; }
.three-d-scene-tab.active { color:white; background:rgba(111,208,177,.1); border-color:rgba(111,208,177,.55); }.three-d-scene-tab.active > span { color:var(--ink); background:#6fd0b1; }
html[dir="rtl"] .three-d-photo-plane { right:auto; left:8%; transform:rotateY(11deg) rotateX(2deg) translateZ(50px); }
html[dir="rtl"] .three-d-hazard-marker { right:auto; left:50%; }
html[dir="rtl"] .three-d-barrier { right:auto; left:42%; transform:rotateY(16deg) translateZ(175px) scale(.8); }
html[dir="rtl"] .three-d-cube { right:auto; left:13%; }
html[dir="rtl"] .three-d-vignette { background:linear-gradient(-90deg,rgba(7,13,12,.93) 0,rgba(7,13,12,.68) 37%,transparent 68%),linear-gradient(0deg,rgba(7,13,12,.9),transparent 42%); }
html[dir="rtl"] .three-d-scene-copy { left:auto; right:29px; }
html[dir="rtl"] .three-d-play.playing { right:auto; left:18px; }
@keyframes grid-drift { to { background-position:0 72px,72px 0; } }
@keyframes plane-float { 0%,100%{margin-top:0}50%{margin-top:-8px} }
@keyframes hazard-pulse { 0%,100%{filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));}50%{filter:drop-shadow(0 10px 26px rgba(200,76,60,.72));} }
@keyframes ring-pulse { from{opacity:.8;transform:translate(-50%,-40%) scale(.45)}to{opacity:0;transform:translate(-50%,-40%) scale(1.35)} }
@keyframes cube-spin { to { transform:rotateX(342deg) rotateY(390deg) translateZ(180px); } }
@keyframes particle-rise { 0%,100%{opacity:0;transform:translateY(30px) translateZ(0)}35%{opacity:1}70%{opacity:.5}90%{opacity:0;transform:translateY(-95px) translateZ(130px)} }

/* Toolbox detail */
.talk-detail-stage { padding: 27px clamp(26px,4.6vw,72px) 60px; }
.talk-detail-hero { position: relative; min-height: 270px; display: flex; align-items: end; overflow: hidden; padding: 39px 44px; color: white; background: linear-gradient(115deg,var(--ink-2),#304843); border-radius: var(--radius); }
.talk-detail-hero::before { content: ""; position: absolute; width: 370px; height: 370px; right: -70px; top: -220px; border: 1px solid rgba(246,183,30,.2); border-radius: 50%; }
.talk-detail-hero > div { position: relative; z-index: 2; max-width: 790px; }
.talk-detail-hero .section-kicker { color: #f6cf69; }
.talk-detail-category { display: inline-flex; padding: 5px 8px; color: var(--ink); background: var(--yellow); border-radius: 2px 2px 8px; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.talk-detail-hero h1 { margin: 13px 0 9px; font: 700 clamp(32px,4.5vw,55px)/.98 var(--display); letter-spacing: -.065em; }
.talk-detail-hero p { max-width: 720px; margin: 0 0 15px; color: #b9c6c2; font-size: 12px; line-height: 1.55; }
.talk-hero-number { position: absolute; right: 28px; top: 13px; color: rgba(246,183,30,.12); font: 800 116px/1 var(--display); letter-spacing: -.1em; }
.talk-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 18px; margin-top: 18px; }
.talk-article { display: grid; gap: 12px; }
.talk-section, .tracking-form-section { padding: 24px 27px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px 5px 18px; }
.talk-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.talk-section-head > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); background: var(--yellow-soft); border-radius: 50%; }
.talk-section-head svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.talk-section-head h2 { margin: 0; font: 700 16px var(--display); letter-spacing: -.03em; }
.talk-section p { margin: 0; color: #596761; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.talk-section ul, .talk-section ol { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: #596761; font-size: 12px; line-height: 1.6; }
.talk-section li::marker { color: var(--green); font-weight: 800; }
.talk-section.warning { background: #fff9e9; border-color: #ead28b; }
.talk-section.warning .talk-section-head > span { color: #8e5e08; background: #f7d66f; }
.talk-section.hazards { background: #f8f2e9; border-color: #dfc9a8; }
.talk-section.hazards .talk-section-head > span { color: white; background: #9a642b; }
.talk-section.hazards li::marker { color: #9a642b; }
.talk-section.stop { background: #fff4f1; border-color: #e4b6ae; border-left: 4px solid var(--red); }
.talk-section.stop .talk-section-head > span { color: white; background: var(--red); }
.workflow-section { background: #f4f7f5; }
.talk-workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.workflow-phase { position: relative; padding: 18px 16px 16px; overflow: hidden; background: white; border: 1px solid #d7dfda; border-radius: 4px 4px 14px; }
.workflow-phase::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--green); }
.workflow-phase:nth-child(2)::before { background: var(--yellow); }
.workflow-phase:nth-child(3)::before { background: var(--ink); }
.workflow-number { position: absolute; right: 12px; top: 8px; color: #dfe5e1; font: 800 27px/1 var(--display); }
.workflow-phase h3 { position: relative; margin: 0 0 12px; padding-right: 29px; color: var(--ink); font: 750 13px var(--display); }
.workflow-phase ul { gap: 7px; font-size: 12px; }
.do-dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.talk-section.positive { background: #edf5f0; border-color: #b8d0c6; }
.talk-section.positive .talk-section-head > span { color: white; background: var(--green); }
.talk-section.negative { background: #fbefec; border-color: #e2bbb4; }
.talk-section.negative .talk-section-head > span { color: white; background: var(--red); }
.talk-section.negative li::marker { color: var(--red); }
.talk-section.field { border-left: 4px solid var(--yellow); }
.case-study { padding: 27px; background: linear-gradient(145deg,#f5f2e9,#eef3f0); border-color: #c8d2cd; }
.case-study-head { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #cfd8d3; }
.case-study-head > span { color: var(--ink); background: var(--yellow); }
.case-study-head > div { min-width: 0; }
.case-study-head small { display: block; margin-top: 4px; color: #77817d; font-size: 12px; font-weight: 700; letter-spacing: .035em; }
.case-facts, .case-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case-analysis-grid { margin-top: 10px; }
.case-block { position: relative; min-width: 0; padding: 18px 17px 17px; overflow: hidden; background: rgba(255,255,255,.82); border: 1px solid #d8dedb; border-radius: 4px 4px 14px; }
.case-block > span { position: absolute; right: 12px; top: 9px; color: #d6ddda; font: 800 25px/1 var(--display); }
.case-block h3 { position: relative; max-width: calc(100% - 28px); margin: 0 0 10px; color: var(--ink); font: 750 12px/1.25 var(--display); }
.case-block p { color: #4f5d58; font-size: 12px; line-height: 1.65; }
.case-block ul { gap: 7px; font-size: 12px; }
.case-block.context { border-top: 3px solid var(--yellow); }
.case-block.event { border-top: 3px solid var(--red); }
.case-block.consequences { border-top: 3px solid #597b72; }
.case-block.analysis { border-top: 3px solid #9a642b; }
.case-block.whys { border-top: 3px solid var(--yellow); }
.case-block.barriers { border-top: 3px solid var(--green); }
.case-block.actions { border-top: 3px solid var(--green); }
.case-block.event li::marker, .case-block.analysis li::marker { color: #9a642b; }
.case-block.whys li::marker { color: #9a642b; font-weight: 850; }
.case-block.barriers li::marker, .case-block.actions li::marker { color: var(--green); }
.case-depth-grid { align-items: stretch; }
.case-action-plan { margin-top: 10px; padding-right: 50px; background: #edf5f0; border-color: #b8d0c6; }
.case-action-plan h3 { max-width: none; }
.case-lesson { display: flex; align-items: flex-start; gap: 13px; margin-top: 10px; padding: 17px 19px; color: white; background: var(--ink); border-radius: 4px 4px 15px; }
.case-lesson > span { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--yellow); border-radius: 50%; }
.case-lesson svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.case-lesson small, .case-lesson strong { display: block; }
.case-lesson small { margin-bottom: 4px; color: var(--yellow); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.case-lesson strong { color: #ecf1ef; font: 600 12px/1.55 var(--display); }
.key-message { display: flex; align-items: center; gap: 15px; padding: 22px 25px; color: white; background: var(--ink); border-radius: var(--radius); }
.key-message > span { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--yellow); border-radius: 50%; }
.key-message svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.key-message small, .key-message strong { display: block; }
.key-message small { margin-bottom: 4px; color: var(--yellow); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.key-message strong { color: #e5ebe8; font: 600 12px/1.5 var(--display); }
.tracking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 16px; }
.field textarea { width: 100%; resize: vertical; padding: 10px 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 4px 4px 11px; outline: none; font: 12px var(--body); }
.field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,183,30,.23); }
.talk-side { align-self: start; position: sticky; top: 18px; }
.talk-side-card { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 27px rgba(30,42,42,.07); }
.talk-side-number { width: 50px; height: 50px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 4px 4px 15px; font: 800 17px var(--display); }
.talk-side h3 { margin: 14px 0 17px; font: 700 18px/1.12 var(--display); letter-spacing: -.04em; }
.talk-side-meta { display: grid; gap: 9px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.talk-side-meta span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.talk-side-meta svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 1.8; }
.talk-side .button { margin-top: 9px; }

/* Modal and toast */
.modal-backdrop { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(10,17,16,.73); backdrop-filter: blur(5px); }
.profile-modal { position: relative; width: min(445px,100%); padding: 34px; background: var(--paper); border-radius: 7px 7px 25px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.modal-close { position: absolute; right: 14px; top: 11px; width: 34px; height: 34px; color: #77837f; font-size: 25px; }
.profile-modal h2 { margin: 0; font: 700 28px var(--display); letter-spacing: -.05em; }
.profile-modal > p { margin: 8px 0 21px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.profile-modal form { display: grid; gap: 13px; }
.privacy-note { display: block; margin-top: 14px; color: #87938e; font-size: 12px; text-align: center; }
.toast-region { position: fixed; z-index: 700; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { min-width: 280px; padding: 13px 16px; color: var(--ink); background: var(--yellow); border: 1px solid #dca114; border-radius: 4px 4px 13px; box-shadow: var(--shadow); font-size: 12px; font-weight: 800; animation: toast-in .22s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* RTL */
html[dir="rtl"] .side-rail { left: auto; right: 0; border-right: 0; border-left: 1px solid #283431; }
html[dir="rtl"] .main-view { margin-left: 0; margin-right: var(--rail); }
html[dir="rtl"] .brand, html[dir="rtl"] .rail-nav button, html[dir="rtl"] .rail-user, html[dir="rtl"] .ledger-stage, html[dir="rtl"] .quiz-option { text-align: right; }
html[dir="rtl"] .rail-nav button::before { left: auto; right: -12px; }
html[dir="rtl"] .rail-nav button em { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .rail-user > svg, html[dir="rtl"] .text-action svg, html[dir="rtl"] .button svg { transform: scaleX(-1); }
html[dir="rtl"] .risk-tags { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hero-art { background-image: linear-gradient(-90deg,var(--ink),transparent 38%),url('assets/hero-safety.jpg'); }
html[dir="rtl"] .hero-tab, html[dir="rtl"] .module-index { right: auto; left: 0; border-radius: 0 17px 0 0; }
html[dir="rtl"] .ledger-stage { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .challenge-card::after { right: auto; left: 0; border-left: 0; border-right: 7px solid transparent; }
html[dir="rtl"] .inspection-label, html[dir="rtl"] .challenge-number { left: auto; right: 11px; }
html[dir="rtl"] .complete-stamp { right: auto; left: 9px; }
html[dir="rtl"] .module-cover-art::after { left: auto; right: 48%; background: linear-gradient(-90deg,var(--ink),transparent); }
html[dir="rtl"] .module-topbar-progress small { text-align: left; }
html[dir="rtl"] .modal-close { right: auto; left: 14px; }
html[dir="rtl"] .text-action:hover svg { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .route-row:hover, html[dir="rtl"] .quiz-option:hover { transform: translateX(-4px); }
html[dir="rtl"] .toolbox-promo-progress { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid rgba(255,255,255,.13); }
html[dir="rtl"] .talk-search svg { left: auto; right: 13px; }
html[dir="rtl"] .talk-search input { padding: 0 39px 0 13px; }
html[dir="rtl"] .talk-card::after { right: auto; left: 0; border-left: 0; border-right: 8px solid transparent; }
html[dir="rtl"] .talk-complete { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .talk-section ul, html[dir="rtl"] .talk-section ol { padding-left: 0; padding-right: 19px; }
html[dir="rtl"] .talk-section.field { border-left: 1px solid var(--line); border-right: 4px solid var(--yellow); }
html[dir="rtl"] .talk-section.stop { border-left: 1px solid #e4b6ae; border-right: 4px solid var(--red); }
html[dir="rtl"] .workflow-number { right: auto; left: 12px; }
html[dir="rtl"] .workflow-phase h3 { padding-right: 0; padding-left: 29px; }
html[dir="rtl"] .case-block > span { right: auto; left: 12px; }
html[dir="rtl"] .case-action-plan { padding-right: 17px; padding-left: 50px; }
html[dir="rtl"] .talk-hero-number { right: auto; left: 28px; }
html[dir="rtl"] .visual-photo { text-align: right; }
html[dir="rtl"] .visual-photo > span { left: 15px; right: 15px; }
html[dir="rtl"] .visual-photo > em { right: auto; left: 10px; }
html[dir="rtl"] .lightbox-close { right: auto; left: 22px; }

/* Print certificate */
@media print {
  .side-rail, .mobile-topbar, .topline, .module-topbar, .talk-side, .safety-animation-section, .three-d-animation-section, .results-card, .results-actions, .tracking-form-section .button { display: none !important; }
  .main-view { margin: 0 !important; }
  .talk-detail-stage { padding: 0; }
  .talk-detail-hero { min-height: auto; padding: 26px; color: var(--ink); background: white; border: 3px solid var(--ink); box-shadow: none; }
  .talk-detail-hero p { color: var(--muted); }
  .talk-detail-layout { display: block; }
  .talk-section, .tracking-form-section, .key-message { break-inside: avoid; margin-top: 9px; }
  .key-message, .case-lesson { color: var(--ink); background: white; border: 2px solid var(--ink); }
  .key-message strong, .case-lesson strong { color: var(--ink); }
  .case-lesson small { color: var(--ink); }
  .page { padding: 20px; }
  .page-hero-compact { text-align: center; }
  .results-layout { display: block; }
  .score-card { min-height: 650px; color: var(--ink); background: white; border: 4px double var(--ink); }
  .score-card::before { border-color: var(--yellow); }
  .score-card p { color: var(--muted); }
}

/* Responsive */
@media (max-width: 1100px) {
  .challenge-card { grid-template-columns: 39% 61%; }
  .context-grid { grid-template-columns: 1fr; }
  .learning-layout, .profile-grid { grid-template-columns: 1fr 270px; }
  .risk-tags { max-width: 280px; }
  .talk-grid { grid-template-columns: repeat(2,1fr); }
  .toolbox-promo { grid-template-columns: auto 1fr auto; }
  .toolbox-promo .button { grid-column: 2/4; justify-self: start; }
}
@media (max-width: 880px) {
  :root { --rail: 232px; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-art { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(90deg,var(--ink),rgba(30,42,42,.2)),url('assets/hero-safety.jpg'); }
  .hero-copy { min-height: 370px; }
  .challenge-list { grid-template-columns: 1fr; }
  .ledger-stages { grid-template-columns: repeat(2,1fr); }
  .ledger-stage:nth-child(2) { border-right: 0; }
  .ledger-stage:nth-child(3) { border-right: 1px solid var(--line); }
  .ledger-stage:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .module-cover { grid-template-columns: 1fr; }
  .quiz-question-layout { grid-template-columns: 1fr; }
  .quiz-question-photo, .quiz-question-photo img { min-height: 270px; }
  .quiz-question-photo { max-height: 340px; }
  .module-cover-art { position: absolute; inset: 0; opacity: .22; }
  .module-cover-copy { position: relative; z-index: 2; min-height: 410px; }
  .learning-layout, .profile-grid, .results-layout { grid-template-columns: 1fr; }
  .profile-side-card { order: -1; }
  .toolbox-stats { grid-template-columns: repeat(2,1fr); }
  .talk-detail-layout { grid-template-columns: 1fr; }
  .talk-side { position: static; grid-row: 1; }
  .talk-side-card { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: center; }
  .talk-side-card h3 { margin: 0; }
  .talk-side-meta, .talk-side .button { grid-column: 1/-1; }
  .visual-gallery-grid { grid-template-columns: 1fr 1fr; }
  .visual-photo.primary { grid-column: 1/-1; }
}
@media (max-width: 700px) {
  .side-rail { left: -255px; width: 248px; box-shadow: 20px 0 60px rgba(0,0,0,.25); transition: left .23s ease; }
  .side-rail.open { left: 0; }
  html[dir="rtl"] .side-rail { left: auto; right: -255px; transition: right .23s ease; }
  html[dir="rtl"] .side-rail.open { right: 0; }
  .rail-close { display: block; }
  .main-view, html[dir="rtl"] .main-view { margin: 66px 0 0; }
  .mobile-topbar { position: fixed; z-index: 90; left: 0; right: 0; top: 0; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: white; background: var(--ink-2); border-bottom: 1px solid #2b3835; }
  .mobile-topbar .brand-mark { width: 35px; height: 35px; }
  .mobile-topbar .brand-copy strong { font-size: 12px; }
  .mobile-menu { width: 40px; height: 40px; padding: 9px; }
  .mobile-menu span { width: 21px; height: 2px; display: block; margin: 4px auto; background: var(--yellow); }
  .rail-scrim.open { position: fixed; z-index: 95; inset: 0; display: block; background: rgba(0,0,0,.5); }
  .page { padding: 20px 16px 48px; }
  .topline { margin-bottom: 17px; }
  .status-pill { display: none; }
  .hero-copy { padding: 30px 24px; }
  .hero-copy h2 { font-size: clamp(38px,12vw,55px); }
  .hero-copy > p { font-size: 12px; }
  .context-grid { gap: 9px; }
  .company-banner, .impact-banner { min-height: 100px; padding: 15px; }
  .risk-tags { display: none; }
  .route-ledger { margin: 29px 0 34px; }
  .ledger-stages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ledger-stage { flex: 0 0 170px; scroll-snap-align: start; border-right: 1px solid var(--line) !important; border-bottom: 0 !important; }
  .ledger-stage:last-child { border-right: 0 !important; }
  .challenge-card { grid-template-columns: 39% 61%; min-height: 210px; }
  .challenge-visual { min-height: 210px; }
  .challenge-content { padding: 16px; }
  .challenge-content h3 { font-size: 17px; }
  .page-hero-compact { padding: 30px 25px; }
  .route-row { grid-template-columns: 54px 1fr; }
  .route-row-action { grid-column: 1/-1; padding: 0 14px 13px; }
  .route-row-action .button { width: 100%; }
  .module-stage { padding: 18px 16px 45px; }
  .module-topbar { padding: 10px 16px; }
  .module-topbar-progress { display: none; }
  .module-cover-copy { padding: 28px 23px 68px; }
  .module-cover-copy h1 { font-size: 42px; }
  .learning-layout { grid-template-columns: 1fr; }
  .lesson-panel { padding: 23px; }
  .quiz-stage { padding: 20px 13px; }
  .quiz-card { padding: 25px 20px; }
  .quiz-footer { align-items: stretch; flex-direction: column; }
  .quiz-footer .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full, .consent, .form-actions { grid-column: auto; }
  .form-card { padding: 24px 20px; }
  .form-actions { flex-direction: column; }
  .form-actions .button { width: 100%; }
  .toolbox-promo { grid-template-columns: auto 1fr; padding: 16px; }
  .toolbox-promo-progress { display: none; }
  .toolbox-promo .button { grid-column: 1/-1; width: 100%; }
  .toolbox-hero { grid-template-columns: 1fr; align-items: start; padding: 31px 25px; }
  .toolbox-count { min-width: 0; grid-template-columns: auto auto 1fr; align-items: end; gap: 10px; }
  .toolbox-count strong { font-size: 40px; }
  .talk-grid { grid-template-columns: 1fr; }
  .toolbox-toolbar { align-items: flex-start; flex-direction: column; }
  .talk-search { width: 100%; }
  .talk-detail-stage { padding: 18px 16px 45px; }
  .talk-detail-hero { min-height: 330px; padding: 30px 24px; }
  .talk-detail-hero h1 { font-size: 37px; }
  .talk-hero-number { font-size: 83px; }
  .visual-gallery { padding: 18px; }
  .visual-gallery-heading { align-items: start; }
  .visual-gallery-grid { grid-template-columns: 1fr; }
  .visual-photo.primary { grid-column: auto; min-height: 230px; }
  .visual-photo { min-height: 205px; }
  .image-lightbox { padding: 13px; }
  .lightbox-close { right: 12px; top: 10px; }
  html[dir="rtl"] .lightbox-close { right: auto; left: 12px; }
  .talk-workflow, .case-facts, .case-analysis-grid, .do-dont-grid, .tracking-grid { grid-template-columns: 1fr; }
  .talk-section, .tracking-form-section { padding: 21px 18px; }
  .case-study { padding: 20px 16px; }
  .detail-print { display: none; }
  .toast-region { left: 13px; right: 13px; bottom: 13px; }
  .toast { min-width: 0; }

  /* Mobile readability — comfortable type and touch targets */
  body { font-size: 16px; }
  .mobile-topbar .brand-copy strong { font-size: 15px; }
  .brand-copy small { font-size: 12px; }
  .rail-label { font-size: 12px; }
  .rail-nav button { min-height: 52px; font-size: 15px; }
  .language-switch button { min-width: 40px; height: 32px; font-size: 12px; }
  .rail-user strong { font-size: 14px; }
  .rail-user small { font-size: 12px; }
  .topline-left p { font-size: 12px; }
  .topline-left .topline-title { font-size: 21px; }
  .section-kicker { font-size: 12px; line-height: 1.4; }
  .section-title-row p, .hero-copy > p, .page-hero-compact p,
  .module-cover-copy p, .toolbox-hero p { font-size: 16px; line-height: 1.7; }
  .button { min-height: 49px; padding: 0 18px; font-size: 15px; }
  .text-action { min-height: 42px; font-size: 14px; }
  .hero-origin, .hero-time { font-size: 13px; }
  .company-banner > div:nth-child(2) > p:not(.context-label), .impact-banner p { font-size: 14px; line-height: 1.6; }
  .company-banner small { font-size: 12px; }
  .challenge-meta { font-size: 12px; }
  .hero-tab span { font-size: 12px; }
  .context-label { font-size: 12px; line-height: 1.4; }
  .ledger-title span { color: var(--muted); font-size: 12px; }
  .ledger-stage > span { font-size: 12px; }
  .ledger-stage strong { font-size: 12px; }
  .ledger-stage small { color: var(--muted); font-size: 12px; line-height: 1.35; }
  .inspection-label, .complete-stamp { font-size: 12px; line-height: 1.3; }
  .recommended-tag { font-size: 12px; line-height: 1.3; }
  .challenge-content p { font-size: 15px; line-height: 1.6; -webkit-line-clamp: 4; }
  .route-row-copy .route-row-meta { font-size: 12px; }
  .route-row-copy p { font-size: 14px; line-height: 1.55; }
  .module-topbar-copy strong { font-size: 14px; }
  .module-topbar-copy span { font-size: 12px; }
  .module-stats { font-size: 12px; }
  .lesson-panel > p { font-size: 15px; line-height: 1.7; }
  .lesson-point { font-size: 15px; line-height: 1.65; }
  .summary-list div { font-size: 14px; }
  .scenario-tag { font-size: 12px; }
  .quiz-card > p, .quiz-question-body > p { font-size: 16px; line-height: 1.7; }
  .quiz-question-photo, .quiz-question-photo img { min-height: 230px; }
  .quiz-question-photo figcaption { font-size: 12px; }
  .quiz-option { min-height: 58px; font-size: 15px; line-height: 1.55; }
  .quiz-feedback { font-size: 14px; line-height: 1.5; }
  .form-card > p, .profile-side-card > p { font-size: 15px; line-height: 1.65; }
  .field label, .consent { font-size: 14px; line-height: 1.5; }
  .field input, .field select, .field textarea { min-height: 48px; font-size: 16px; }
  .data-list div { font-size: 14px; }

  .toolbox-promo p { font-size: 14px; line-height: 1.6; }
  .language-note { font-size: 12px; line-height: 1.5; }
  .toolbox-count small, .toolbox-stats small { font-size: 12px; line-height: 1.35; }
  .toolbox-toolbar > span { font-size: 13px; }
  .talk-search input { height: 50px; font-size: 16px; }
  .toolbox-chip { min-height: 42px; padding: 0 15px; font-size: 13px; }
  .talk-category { font-size: 12px; }
  .talk-duration { font-size: 12px; }
  .talk-card h3 { font-size: 22px; line-height: 1.2; }
  .talk-card p { font-size: 15px; line-height: 1.65; -webkit-line-clamp: 4; }
  .toolbox-empty p { font-size: 14px; }
  .safety-animation-section { padding: 15px; }
  .safety-animation-heading { align-items: flex-start; flex-direction: column; }
  .safety-animation-heading h2 { font-size: 25px; }
  .safety-animation-heading p { font-size: 15px; line-height: 1.65; }
  .animation-language { font-size: 12px; }
  .safety-animation-player { min-height: 440px; }
  .animation-scene-copy { left: 18px; right: 18px; bottom: 59px; width: auto; }
  html[dir="rtl"] .animation-scene-copy { left: 18px; right: 18px; }
  .animation-scene-copy small { font-size: 12px; }
  .animation-scene-copy strong { font-size: 25px; line-height: 1.12; }
  .animation-scene-copy p { font-size: 16px; line-height: 1.6; }
  .animation-play { min-height: 56px; font-size: 15px; }
  .animation-controls { min-height: 46px; font-size: 12px; }
  .animation-scene-tabs { grid-template-columns: 1fr; }
  .animation-scene-tab { min-height: 54px; }
  .animation-scene-tab strong { font-size: 14px; white-space: normal; }
  .three-d-animation-section { padding: 15px; }
  .three-d-animation-heading { align-items: flex-start; flex-direction: column; }
  .three-d-animation-heading h2 { font-size: 25px; }
  .three-d-animation-heading p { font-size: 15px; line-height: 1.65; }
  .three-d-player { min-height: 500px; }
  .three-d-photo-plane, html[dir="rtl"] .three-d-photo-plane { left:8%; right:8%; top:6%; width:auto; height:55%; transform:rotateY(-4deg) rotateX(2deg) translateZ(45px); }
  .three-d-world.scene-1 .three-d-photo-plane, html[dir="rtl"] .three-d-world.scene-1 .three-d-photo-plane { transform:rotateY(3deg) translateZ(65px); }
  .three-d-world.scene-2 .three-d-photo-plane, html[dir="rtl"] .three-d-world.scene-2 .three-d-photo-plane { transform:rotateY(0) translateZ(80px); }
  .three-d-hazard-marker, html[dir="rtl"] .three-d-hazard-marker { left:auto; right:12%; top:11%; }
  .three-d-barrier, html[dir="rtl"] .three-d-barrier { left:12%; right:auto; top:8%; bottom:46%; width:24%; }
  .three-d-cube, html[dir="rtl"] .three-d-cube { left:auto; right:14%; bottom:43%; }
  .three-d-vignette, html[dir="rtl"] .three-d-vignette { background:linear-gradient(0deg,rgba(7,13,12,.97) 0,rgba(7,13,12,.83) 44%,transparent 72%); }
  .three-d-scene-copy, html[dir="rtl"] .three-d-scene-copy { left:18px; right:18px; bottom:60px; width:auto; }
  .three-d-scene-copy small { font-size:12px; }
  .three-d-scene-copy strong { font-size:25px; line-height:1.12; }
  .three-d-scene-copy p { font-size:16px; line-height:1.6; }
  .three-d-play { min-height:56px; font-size:15px; }
  .three-d-controls { min-height:46px; font-size:12px; }
  .three-d-scene-tabs { grid-template-columns:1fr; }
  .three-d-scene-tab { min-height:54px; }
  .three-d-scene-tab strong { font-size:14px; white-space:normal; }
  .visual-gallery-heading p { font-size: 14px; line-height: 1.6; }
  .visual-photo small { font-size: 12px; }
  .visual-photo strong { font-size: 16px; line-height: 1.35; }

  .talk-detail-category { font-size: 12px; }
  .talk-detail-hero p { font-size: 16px; line-height: 1.7; }
  .talk-section-head { align-items: flex-start; }
  .talk-section-head > span { width: 38px; height: 38px; }
  .talk-section-head svg { width: 20px; height: 20px; }
  .talk-section-head h2 { font-size: 21px; line-height: 1.25; }
  .talk-section p { font-size: 16px; line-height: 1.8; }
  .talk-section ul, .talk-section ol { gap: 12px; font-size: 15px; line-height: 1.75; }
  .workflow-phase h3 { font-size: 17px; }
  .workflow-phase ul { font-size: 15px; }
  .case-study-head small { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .case-block { padding: 21px 18px 19px; }
  .case-block h3 { font-size: 17px; line-height: 1.35; }
  .case-block p { font-size: 15px; line-height: 1.75; }
  .case-block ul, .case-block ol { font-size: 15px; line-height: 1.75; }
  .case-action-plan, html[dir="rtl"] .case-action-plan { padding-inline: 18px 50px; }
  .case-lesson small, .key-message small { font-size: 12px; line-height: 1.4; }
  .case-lesson strong, .key-message strong { font-size: 15px; line-height: 1.7; }
  .talk-side h3 { font-size: 22px; }
  .talk-side-meta span { font-size: 13px; }
  .toast { font-size: 14px; }
}
@media (max-width: 430px) {
  .hero-copy { min-height: 420px; }
  .hero-actions .button { width: 100%; }
  .challenge-card { grid-template-columns: 1fr; }
  .challenge-visual { min-height: 175px; }
  .challenge-content { min-height: 185px; }
  .company-logo, .impact-icon { width: 45px; height: 45px; }
  .section-title-row { align-items: start; flex-direction: column; }
}
@media (max-width: 1100px) {
  .knowledge-grid { grid-template-columns: repeat(2,1fr); }
  .knowledge-promo { grid-template-columns: auto 1fr auto; }
  .knowledge-promo .button { grid-column: 2/4; justify-self: start; }
}
@media (max-width: 880px) {
  .knowledge-detail-hero { grid-template-columns: 1fr; }
  .knowledge-detail-hero figure { position: absolute; inset: 0; opacity: .22; }
  .knowledge-detail-hero > div { position: relative; z-index: 2; min-height: 390px; }
  .knowledge-detail-layout { grid-template-columns: 1fr; }
  .knowledge-detail-layout aside { position: static; grid-row: 1; grid-template-columns: 1fr 1fr; }
  .knowledge-validation { grid-template-columns: repeat(2,1fr); }
  .knowledge-procedure { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .knowledge-promo { grid-template-columns: auto 1fr; padding: 16px; }
  .knowledge-promo-metrics { display: none; }
  .knowledge-promo .button { grid-column: 1/-1; width: 100%; }
  .knowledge-promo p { font-size: 14px; line-height: 1.6; }
  .knowledge-hero { grid-template-columns: 1fr; align-items: start; padding: 31px 25px; }
  .knowledge-hero h2 { font-size: clamp(37px,11vw,52px); }
  .knowledge-hero p { font-size: 16px; line-height: 1.7; }
  .knowledge-hero-notes { flex-direction: column; }
  .knowledge-policy { font-size: 12px; line-height: 1.5; }
  .knowledge-hero-stamp { min-height: 0; grid-template-columns: auto 1fr; align-items: end; gap: 10px; }
  .knowledge-hero-stamp strong { font-size: 43px; }
  .knowledge-hero-stamp small { grid-column: 1/-1; }
  .knowledge-stats { grid-template-columns: repeat(2,1fr); }
  .knowledge-stats span { font-size: 12px; }
  .governance-strip span { min-height: 39px; font-size: 12px; }
  .knowledge-toolbar { align-items: flex-start; flex-direction: column; }
  .knowledge-toolbar > span { font-size: 13px; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-card h3 { font-size: 22px; line-height: 1.2; }
  .knowledge-card p { font-size: 15px; line-height: 1.65; }
  .knowledge-card-meta, .knowledge-card-meta strong { font-size: 12px; }
  .knowledge-link-codes span { font-size: 12px; }
  .knowledge-status { min-height: 35px; font-size: 12px; }
  .knowledge-detail-stage { padding: 18px 16px 45px; }
  .knowledge-detail-hero h1 { font-size: 39px; }
  .knowledge-detail-hero p { font-size: 16px; line-height: 1.7; }
  .knowledge-detail-badges span { font-size: 12px; }
  .knowledge-validation { grid-template-columns: 1fr 1fr; }
  .knowledge-validation small { font-size: 12px; }
  .knowledge-validation strong { font-size: 13px; }
  .knowledge-detail-layout aside { grid-template-columns: 1fr; }
  .knowledge-detail-block, .knowledge-side-card { padding: 21px 18px; }
  .knowledge-detail-block p { font-size: 16px; line-height: 1.8; }
  .knowledge-detail-block > h3, .knowledge-procedure h3 { font-size: 18px; }
  .knowledge-detail-block ul { gap: 12px; font-size: 15px; line-height: 1.75; }
  .knowledge-key-message strong { font-size: 15px; line-height: 1.7; }
  .fictional-notice strong { font-size: 14px; line-height: 1.55; }
  .knowledge-side-card h2 { font-size: 22px; }
  .linked-item-list strong { font-size: 14px; }
  .linked-item-list small { font-size: 12px; }
  .source-card article > strong { font-size: 14px; }
  .source-card dt, .source-card dd { font-size: 12px; line-height: 1.4; }
}
@media (max-width: 880px) {
  .regulation-detail-layout { grid-template-columns:1fr; }
  .regulation-document-meta { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .regulations-hero { grid-template-columns:1fr; align-items:start; padding:31px 25px; }
  .regulations-hero h2 { font-size:clamp(37px,11vw,52px); }
  .regulations-hero p { font-size:16px; line-height:1.7; }
  .regulation-source-badge { font-size:12px; }
  .regulations-hero-metrics { min-height:0; grid-template-columns:auto 1fr; align-items:end; gap:10px; }
  .regulations-hero-metrics strong { font-size:43px; }
  .regulations-hero-metrics small { grid-column:1/-1; }
  .regulation-warning p { font-size:14px; line-height:1.6; }
  .regulation-warning strong { font-size:15px; }
  .regulation-warning a { font-size:13px; line-height:1.45; }
  .regulation-overview { grid-template-columns:repeat(2,1fr); }
  .regulation-overview small { font-size:12px; }
  .regulation-overview strong { font-size:13px; }
  .regulations-grid { grid-template-columns:1fr; }
  .regulation-source-links { align-items:flex-start; flex-direction:column; }
  .regulation-source-badge,.regulation-source-links a { font-size:12px; }
  .regulation-group-head { min-height:82px; padding:14px 16px; }
  .regulation-group-head h2 { font-size:20px; line-height:1.25; }
  .regulation-group-head small { font-size:12px; }
  .regulation-subcategory { padding:16px 12px; }
  .regulation-subcategory > header h3 { font-size:17px; line-height:1.3; }
  .regulation-document-row { grid-template-columns:auto minmax(0,1fr); padding:12px; }
  .regulation-document-title { font-size:16px; line-height:1.5; }
  .regulation-document-tags span { font-size:12px; }
  .regulation-document-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr; }
  .document-action { min-height:46px; font-size:14px; }
  .regulation-card-body { min-height:235px; }
  .regulation-type,.regulation-status,.regulation-category { font-size:12px; }
  .regulation-card h3 { font-size:21px; line-height:1.3; }
  .regulation-card-footer,.regulation-card-footer .text-action { font-size:12px; }
  .regulation-detail-stage { padding:18px 16px 45px; }
  .regulation-detail-hero { padding:32px 24px; }
  .regulation-detail-hero h1 { font-size:36px; }
  .regulation-detail-hero > p { font-size:15px; line-height:1.6; }
  .regulation-detail-actions { flex-direction:column; }
  .regulation-detail-actions .button { width:100%; }
  .regulation-document-card { padding:22px 18px; }
  .regulation-document-card h2 { font-size:26px; line-height:1.3; }
  .regulation-document-meta small { font-size:12px; }
  .regulation-document-meta strong { font-size:14px; }
  .official-language-note { font-size:14px; line-height:1.5; }
  .regulation-ai-link { min-height:44px; padding:0 14px; font-size:13px; }
  .assistant-hero { grid-template-columns:1fr; align-items:start; padding:31px 25px; }
  .assistant-hero h2 { font-size:clamp(37px,11vw,52px); }
  .assistant-hero p { font-size:16px; line-height:1.7; }
  .assistant-scope { font-size:13px; line-height:1.5; }
  .assistant-hero-metric { min-height:0; grid-template-columns:auto 1fr; align-items:end; gap:11px; }
  .assistant-hero-metric strong { font-size:43px; }
  .assistant-hero-metric span { font-size:13px; }
  .assistant-hero-metric small { grid-column:1/-1; font-size:12px; }
  .assistant-notice strong { font-size:15px; }
  .assistant-notice p { font-size:14px; line-height:1.65; }
  .assistant-layout { grid-template-columns:1fr; }
  .assistant-governance { grid-row:1; }
  .assistant-conversation { min-height:280px; padding:17px 13px; }
  .assistant-bubble { width:100%; }
  .assistant-bubble.user { width:90%; }
  .assistant-bubble > div { padding:14px; }
  .assistant-bubble p { font-size:15px; line-height:1.7; }
  .assistant-guardrail p,.assistant-reference p,.assistant-official-note { font-size:14px !important; }
  .assistant-reference h4 { font-size:18px; }
  .assistant-reference a { width:100%; min-height:46px; justify-content:center; font-size:14px; }
  .assistant-form { grid-template-columns:1fr; padding:14px; }
  .assistant-form input { min-height:52px; font-size:16px; }
  .assistant-form .button { width:100%; }
  .assistant-examples { padding:3px 14px 15px; }
  .assistant-examples > strong,.assistant-examples button,.assistant-clear { font-size:13px; }
  .assistant-examples button { min-height:42px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .three-d-grid-floor, .three-d-photo-plane, .three-d-hazard-marker,
  .three-d-hazard-marker i, .three-d-cube, .three-d-particles i { animation: none !important; }
}

/* WIKAYATIIC AI HSE ecosystem */
.ai-vision { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:32px; align-items:center; overflow:hidden; margin-top:16px; padding:clamp(28px,4vw,46px); color:white; background:linear-gradient(125deg,#102d28,#164b40 64%,#1f5d4f); border:1px solid #35665b; border-radius:var(--radius); box-shadow:0 16px 34px rgba(30,42,42,.14); }
.ai-vision::before { content:""; position:absolute; width:330px; height:330px; right:-150px; top:-230px; border:1px solid rgba(141,224,197,.2); border-radius:50%; }
.ai-vision-copy { position:relative; z-index:1; }
.ai-vision .section-kicker { color:#8de0c5; }
.ai-vision h1 { max-width:980px; margin:0; font:750 clamp(34px,4.8vw,64px)/.98 var(--display); letter-spacing:-.06em; }
.ai-vision h2 { max-width:870px; margin:18px 0 0; color:#eef9f5; font:700 clamp(18px,2.2vw,25px)/1.25 var(--display); letter-spacing:-.025em; }
.ai-vision p { max-width:820px; margin:12px 0 22px; color:#c0d3cd; font-size:15px; line-height:1.7; }
.ai-vision-mark { position:relative; z-index:1; min-height:175px; display:grid; align-content:center; justify-items:center; padding:22px; background:rgba(255,255,255,.055); border:1px solid rgba(141,224,197,.45); border-radius:7px 7px 24px; }
.ai-vision-mark span { color:#8de0c5; font:850 58px/.85 var(--display); letter-spacing:-.08em; }
.ai-vision-mark strong { margin-top:8px; color:white; font:800 24px/1 var(--display); }
.ai-vision-mark small { margin-top:18px; color:#9eb9b1; font-size:12px; font-weight:800; letter-spacing:.08em; }
.ai-audience-band { display:grid; grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr); gap:20px; align-items:center; margin-top:11px; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 17px; }
.ai-audience-band > strong { font:750 17px/1.35 var(--display); }
.ai-audience-band > div { display:flex; flex-wrap:wrap; gap:8px; }
.ai-audience-band span { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; color:#315d51; background:#e6f2ee; border:1px solid #bfdad1; border-radius:99px; font-size:12px; font-weight:750; }
.ai-audience-band svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.dashboard-ai-capabilities { margin-top:34px; }
.academy-home-panel { margin-top:42px; }
.dashboard-ai-capabilities .section-title-row { align-items:end; }
.ai-capability-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.ai-capability-card { min-height:270px; display:flex; flex-direction:column; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:6px 6px 20px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ai-capability-card:hover { transform:translateY(-3px); border-color:#96b8ad; box-shadow:0 13px 27px rgba(30,42,42,.09); }
.ai-capability-card header { display:flex; align-items:center; justify-content:space-between; }
.ai-capability-card header span { color:var(--green); font:850 13px var(--display); }
.ai-capability-card header svg { width:30px; height:30px; padding:6px; color:var(--ink); background:#8de0c5; border-radius:5px 5px 11px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ai-capability-card h3 { margin:24px 0 9px; font:750 21px/1.15 var(--display); letter-spacing:-.035em; }
.ai-capability-card p { margin:0 0 20px; color:var(--muted); font-size:13px; line-height:1.65; }
.ai-capability-card .text-action { margin-top:auto; align-self:flex-start; }
.ai-hub-page { padding-bottom:60px; }
.ai-hub-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:44px; align-items:center; overflow:hidden; padding:clamp(36px,5.5vw,70px); color:white; background:radial-gradient(circle at 92% 9%,#2a6a5a,#102d28 48%,#101817 83%); border-radius:var(--radius); box-shadow:0 20px 45px rgba(30,42,42,.18); }
.ai-hub-hero::after { content:""; position:absolute; width:480px; height:480px; right:-260px; top:-340px; border:1px solid rgba(141,224,197,.2); border-radius:50%; }
.ai-hub-hero > div:first-child { position:relative; z-index:1; }
.ai-hub-hero .section-kicker { color:#8de0c5; }
.ai-hub-hero h2 { max-width:930px; margin:0; font:700 clamp(42px,5.5vw,72px)/.96 var(--display); letter-spacing:-.065em; }
.ai-hub-hero p { max-width:800px; margin:21px 0 0; color:#bfd0ca; font-size:16px; line-height:1.75; }
.ai-hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.ai-hero-tags span { padding:7px 11px; color:#d6e8e2; background:rgba(255,255,255,.07); border:1px solid rgba(141,224,197,.22); border-radius:99px; font-size:12px; font-weight:750; }
.ai-hub-emblem { position:relative; z-index:1; min-height:220px; display:grid; align-content:center; justify-items:center; padding:25px; background:rgba(255,255,255,.05); border:1px solid rgba(141,224,197,.48); border-radius:7px 7px 28px; }
.ai-hub-emblem span { color:#8de0c5; font:850 72px/.82 var(--display); letter-spacing:-.09em; }
.ai-hub-emblem strong { margin-top:13px; font:800 26px var(--display); }
.ai-hub-emblem small { margin-top:22px; color:#8ea79f; font-size:12px; font-weight:850; letter-spacing:.1em; text-align:center; }
.ai-ecosystem-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:25px; align-items:end; margin:42px 0 18px; }
.ai-ecosystem-intro h2 { max-width:930px; margin:0; font:700 clamp(30px,4vw,50px)/1.02 var(--display); letter-spacing:-.055em; }
.ai-ecosystem-intro p { max-width:800px; margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.65; }
.ai-ecosystem-intro > strong { color:#cdd7d3; font:850 76px/.8 var(--display); letter-spacing:-.08em; }
.ai-risk-tool { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:30px; margin-top:38px; padding:clamp(26px,4vw,44px); background:#f2eee5; border:1px solid var(--line); border-radius:7px 7px 24px; }
.ai-risk-copy h2 { margin:0; font:750 clamp(30px,4vw,46px)/1 var(--display); letter-spacing:-.055em; }
.ai-risk-copy > p { margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.ai-risk-guardrail { display:flex; gap:11px; align-items:flex-start; margin-top:24px; padding:16px; color:#31564c; background:#e1eee9; border:1px solid #b8d4ca; border-radius:5px 5px 14px; }
.ai-risk-guardrail svg { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; }
.ai-risk-guardrail span { font-size:13px; line-height:1.6; }
.ai-risk-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:6px 6px 19px; }
.ai-risk-form .field label { font-size:12px; }
.ai-risk-form .field input,.ai-risk-form .field select { min-height:48px; font-size:14px; }
.ai-risk-form > .button { grid-column:1/-1; min-height:48px; }
.ai-risk-result { grid-column:1/-1; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; min-height:100px; padding:18px 20px; border:1px solid currentColor; border-radius:5px 5px 16px; }
.ai-risk-result small { font-size:13px; font-weight:750; }
.ai-risk-result strong { font:850 44px/.9 var(--display); }
.ai-risk-result strong span { font-size:16px; }
.ai-risk-result em { padding:7px 10px; color:white; background:currentColor; border-radius:99px; font-size:12px; font-style:normal; font-weight:850; }
.ai-risk-result.low { color:#28705a; background:#e4f3ec; }
.ai-risk-result.moderate { color:#8a640d; background:#fff4ce; }
.ai-risk-result.high { color:#a54c2e; background:#fbe9df; }
.ai-risk-result.critical { color:#8b3025; background:#fae3df; }
.ai-risk-pending { grid-column:1/-1; display:flex; align-items:flex-start; gap:9px; margin:0; padding:13px; color:var(--muted); background:#f3eee4; border-radius:5px 5px 13px; font-size:13px; line-height:1.55; }
.ai-risk-pending svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; }
.ai-audience-wide { margin-top:15px; }

@media (max-width:1100px) {
  .ai-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-hub-hero { grid-template-columns:minmax(0,1fr) 190px; gap:28px; }
  .ai-risk-tool { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .ai-vision,.ai-hub-hero { grid-template-columns:1fr; padding:28px 22px; }
  .ai-vision-mark { min-height:135px; grid-template-columns:auto auto; align-items:center; justify-content:center; gap:9px; }
  .ai-vision-mark span { font-size:46px; }
  .ai-vision-mark strong { margin:0; }
  .ai-vision-mark small { grid-column:1/-1; margin-top:4px; }
  .ai-audience-band { grid-template-columns:1fr; }
  .ai-capability-grid { grid-template-columns:1fr; }
  .ai-capability-card { min-height:0; }
  .dashboard-ai-capabilities .section-title-row { align-items:flex-start; }
  .ai-hub-emblem { min-height:155px; }
  .ai-hub-emblem span { font-size:56px; }
  .ai-ecosystem-intro { grid-template-columns:1fr; }
  .ai-ecosystem-intro > strong { display:none; }
  .ai-risk-tool { padding:22px 16px; }
  .ai-risk-form { grid-template-columns:1fr; padding:17px; }
  .ai-risk-form .field,.ai-risk-form > .button,.ai-risk-result,.ai-risk-pending { grid-column:1; }
  .ai-risk-result { grid-template-columns:1fr auto; }
  .ai-risk-result small { grid-column:1/-1; }
}

/* Trust, privacy and human contact */
.site-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin:52px clamp(20px,4.6vw,72px) 28px; padding:26px 0 0; border-top:1px solid var(--line); }
.site-footer-brand { display:flex; align-items:center; gap:13px; }
.site-footer-brand .brand-mark { width:45px; height:45px; flex:0 0 auto; }
.site-footer-brand .brand-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.site-footer-brand strong { font:800 15px var(--display); letter-spacing:.04em; }
.site-footer-brand p { max-width:640px; margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.site-footer nav { display:flex; gap:10px; }
.site-footer nav button,.site-footer nav a { min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 12px; font-size:12px; font-weight:800; text-decoration:none; cursor:pointer; }
.site-footer nav button:hover,.site-footer nav a:hover { border-color:#81a99c; background:#edf5f2; }
.site-footer nav svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.site-footer > small { grid-column:1/-1; color:var(--muted); font-size:12px; }
.trust-hero { padding:clamp(31px,5vw,62px); color:white; background:linear-gradient(125deg,#111817,#17493e); border-radius:var(--radius); }
.trust-hero .section-kicker { color:#8de0c5; }
.trust-hero h2 { max-width:900px; margin:0; font:750 clamp(37px,5vw,65px)/.98 var(--display); letter-spacing:-.06em; }
.trust-hero p { max-width:820px; margin:18px 0 14px; color:#c0d2cc; font-size:16px; line-height:1.75; }
.trust-hero small { color:#9db4ac; font-size:12px; }
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:17px; }
.trust-grid > section { display:flex; gap:16px; padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:6px 6px 18px; }
.trust-grid > section > span { width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; color:#17493e; background:#dff0ea; border-radius:5px 5px 13px; }
.trust-grid svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.trust-grid h3 { margin:0 0 8px; font:750 20px/1.2 var(--display); }
.trust-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.trust-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:19px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:20px; }
.contact-copy,.contact-form { padding:clamp(25px,4vw,42px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); }
.contact-copy { color:white; background:linear-gradient(135deg,#111817,#17493e); }
.contact-copy .section-kicker { color:#8de0c5; }
.contact-copy h2 { margin:0; font:750 clamp(37px,4.8vw,62px)/.98 var(--display); letter-spacing:-.06em; }
.contact-copy > p { margin:17px 0 0; color:#c2d3ce; font-size:15px; line-height:1.75; }
.contact-human-mark { display:flex; align-items:center; gap:12px; margin-top:29px; padding:16px; background:rgba(255,255,255,.07); border:1px solid rgba(141,224,197,.25); border-radius:5px 5px 16px; }
.contact-human-mark > svg { width:44px; height:44px; padding:10px; color:#111817; background:#8de0c5; border-radius:50%; fill:none; stroke:currentColor; stroke-width:1.8; }
.contact-human-mark strong,.contact-human-mark span { display:block; }
.contact-human-mark strong { font:800 15px var(--display); }
.contact-human-mark span { margin-top:3px; color:#a8c0b8; font-size:12px; }
.contact-copy .contact-warning { display:flex; gap:9px; margin-top:22px; padding:14px; color:#ffe8ab; background:rgba(246,183,30,.08); border:1px solid rgba(246,183,30,.26); border-radius:5px 5px 13px; font-size:12px; }
.contact-warning svg { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.contact-form .field label { font-size:12px; }
.contact-form input,.contact-form textarea { width:100%; min-height:48px; padding:12px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:5px 5px 12px; font:14px/1.5 var(--body); outline:none; }
.contact-form textarea { resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(246,183,30,.23); }
.contact-consent { grid-column:1/-1; min-height:44px; display:flex; align-items:flex-start; gap:11px; color:var(--muted); font-size:12px; line-height:1.55; }
.contact-consent input { width:20px; min-width:20px; min-height:20px; margin-top:1px; accent-color:var(--green); }
.contact-form > .button { grid-column:1/-1; }

/* Mobile accessibility floor: readable text and WCAG-sized controls */
@media (max-width:720px) {
  body { font-size:16px; }
  button,.button,.text-action,.document-action,.regulation-source-links a,.assistant-reference a,.site-footer nav button,.site-footer nav a { min-height:44px; }
  .icon-button,.back-button,.mobile-menu,.rail-close,.language-switch button,.lightbox-close { min-width:44px; min-height:44px; }
  .topline-actions,.hero-actions,.form-actions,.results-actions,.language-switch,.site-footer nav,.trust-actions,.rail-nav,.toolbox-filters,.assistant-examples > div,.regulation-source-links,.regulation-detail-actions,.quiz-options { gap:8px; }
  .site-footer { grid-template-columns:1fr; margin:42px 20px 24px; }
  .site-footer nav { display:grid; grid-template-columns:1fr; }
  .site-footer nav button,.site-footer nav a { width:100%; justify-content:center; }
  .site-footer > small { grid-column:1; }
  .trust-grid,.contact-layout,.contact-form { grid-template-columns:1fr; }
  .contact-form .field,.contact-consent,.contact-form > .button { grid-column:1; }
  .trust-grid > section { padding:20px 17px; }
}

/* Wikayati Academy — 17-module internal self-training */
.self-training-promo { display:grid; grid-template-columns:150px minmax(0,1fr) 190px; gap:25px; align-items:center; margin-top:16px; padding:28px; color:white; background:linear-gradient(128deg,#17201e,#203d36); border:1px solid #345b51; border-radius:var(--radius); }
.self-promo-index { width:130px; height:130px; display:grid; place-content:center; text-align:center; color:var(--yellow); background:rgba(255,255,255,.04); border:1px solid rgba(118,208,179,.28); border-radius:8px 8px 30px; font:850 54px/.8 var(--display); }
.self-promo-index span { display:block; margin-top:12px; color:#a8c2ba; font:800 12px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.self-training-promo .section-kicker { color:#8de0c5; }
.self-training-promo h3 { margin:0; font:750 clamp(28px,3.5vw,44px)/1 var(--display); letter-spacing:-.05em; }
.self-training-promo p { max-width:720px; margin:10px 0 14px; color:#bdd0ca; font-size:14px; line-height:1.65; }
.self-promo-tags { display:flex; flex-wrap:wrap; gap:8px; }
.self-promo-tags span { padding:6px 9px; color:#d8eae4; background:rgba(118,208,179,.08); border:1px solid rgba(118,208,179,.2); border-radius:20px; font-size:12px; font-weight:700; }
.self-promo-action { display:flex; flex-direction:column; align-items:flex-start; }
.self-promo-action > strong { color:var(--yellow); font:850 36px/1 var(--display); }
.self-promo-action > small { margin:5px 0 15px; color:#a8c2ba; font-size:12px; }
.self-training-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:30px; align-items:center; padding:clamp(32px,5vw,62px); color:white; background:linear-gradient(125deg,#111817,#164b40 70%,#236654); border-radius:var(--radius); }
.self-training-hero::after { content:"17"; position:absolute; inset-inline-end:-20px; bottom:-58px; color:rgba(255,255,255,.035); font:900 230px/.8 var(--display); }
.self-training-hero > * { position:relative; z-index:1; }
.self-training-hero .section-kicker { color:#8de0c5; }
.self-training-hero h2 { max-width:920px; margin:0; font:750 clamp(38px,5.2vw,68px)/.96 var(--display); letter-spacing:-.065em; }
.self-training-hero p { max-width:770px; margin:19px 0; color:#c2d5cf; font-size:16px; line-height:1.72; }
.self-training-sequence { display:inline-flex; align-items:center; gap:9px; color:#e4f3ee; font-size:13px; font-weight:800; }
.self-training-sequence svg { width:19px; height:19px; fill:none; stroke:#8de0c5; stroke-width:1.8; }
.self-training-dial { width:172px; height:172px; display:grid; place-content:center; justify-self:center; text-align:center; background:radial-gradient(circle closest-side,#153b33 75%,transparent 76%),conic-gradient(var(--yellow) calc(var(--self-progress)*1%),rgba(255,255,255,.11) 0); border-radius:50%; }
.self-training-dial strong { font:850 38px/1 var(--display); }
.self-training-dial span { width:110px; margin-top:7px; color:#abc4bc; font-size:12px; line-height:1.3; }
.self-training-guardrail { display:flex; gap:15px; margin-top:15px; padding:20px 22px; color:#27312e; background:#fff5d7; border:1px solid #e5c970; border-radius:6px 6px 17px; }
.self-training-guardrail > svg { width:26px; height:26px; flex:0 0 auto; fill:none; stroke:#795d0f; stroke-width:1.8; }
.self-training-guardrail strong { font:800 14px var(--display); }
.self-training-guardrail p { margin:4px 0 8px; color:#5e563e; font-size:13px; line-height:1.6; }
.self-training-guardrail a { min-height:44px; display:inline-flex; align-items:center; gap:7px; color:#4b3500; font-size:12px; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.self-training-guardrail a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.self-training-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:15px; }
.self-training-stats article { min-height:112px; display:flex; flex-direction:column; justify-content:center; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:6px 6px 16px; }
.self-training-stats article.weak { cursor:pointer; }
.self-training-stats article.weak:hover { border-color:#ca9b23; background:#fff8e5; }
.self-training-stats strong { font:850 30px/1 var(--display); }
.self-training-stats span { margin-top:7px; color:var(--muted); font-size:12px; line-height:1.35; }
.self-module-section { margin-top:34px; }
.self-phase-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.self-phase-filters button { min-height:44px; padding:0 13px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:4px 4px 11px; font:800 12px var(--body); cursor:pointer; }
.self-phase-filters button.active { color:white; background:var(--ink); border-color:var(--ink); }
.self-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:16px; }
.self-module-card { position:relative; display:grid; grid-template-columns:75px minmax(0,1fr) auto; gap:18px; min-height:250px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:7px 7px 21px; cursor:pointer; transition:.2s ease; }
.self-module-card:hover { transform:translateY(-3px); border-color:#7ba99a; box-shadow:0 15px 32px rgba(20,40,34,.1); }
.self-module-number { display:flex; flex-direction:column; align-items:center; }
.self-module-number > span { width:58px; height:58px; display:grid; place-items:center; color:#14372f; background:#dff0ea; border-radius:6px 6px 17px; font:850 22px var(--display); }
.self-module-number em { margin-top:10px; color:var(--muted); font-size:12px; font-style:normal; font-weight:800; text-align:center; }
.self-module-status { color:#2b6859; font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.025em; }
.self-module-copy h3 { margin:7px 0 8px; font:750 24px/1.05 var(--display); letter-spacing:-.04em; }
.self-module-copy > p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.self-module-meta { display:flex; flex-wrap:wrap; gap:8px 13px; margin-top:14px; color:#61706a; font-size:12px; font-weight:700; }
.self-module-progress { height:5px; overflow:hidden; margin:16px 0 3px; background:#e4e0d7; border-radius:9px; }
.self-module-progress span { display:block; height:100%; background:linear-gradient(90deg,#2c7c69,#76d0b3); }
.self-module-card .text-action { padding-inline:0; }
.self-module-percent { align-self:start; color:#8c6c10; font:850 16px var(--display); }
.self-back { min-height:44px; display:inline-flex; align-items:center; gap:8px; margin-bottom:13px; padding:0; color:var(--ink); background:transparent; border:0; font-size:13px; font-weight:850; cursor:pointer; }
.self-back svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; }
.self-module-hero { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:25px; align-items:center; padding:clamp(29px,4.5vw,52px); color:white; background:linear-gradient(130deg,#14201d,#185343); border-radius:var(--radius); }
.self-module-hero .section-kicker { color:#8de0c5; }
.self-module-hero h2 { margin:0; font:750 clamp(38px,5vw,65px)/.96 var(--display); letter-spacing:-.06em; }
.self-module-hero p { max-width:760px; margin:17px 0 0; color:#bdd0ca; font-size:15px; line-height:1.65; }
.self-module-score { width:120px; height:120px; display:grid; place-content:center; justify-self:end; text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(118,208,179,.35); border-radius:7px 7px 27px; }
.self-module-score strong { color:var(--yellow); font:850 31px/1 var(--display); }
.self-module-score span { width:95px; margin-top:6px; color:#a9c0b9; font-size:12px; line-height:1.25; }
.self-inline-guardrail { min-height:52px; display:flex; align-items:center; gap:10px; padding:11px 15px; color:#5b4a1c; background:#fff3cf; border-inline:1px solid #ead18a; border-bottom:1px solid #ead18a; border-radius:0 0 14px 14px; font-size:12px; line-height:1.5; }
.self-inline-guardrail svg { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }
.self-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0; }
.self-tabs button { min-height:58px; display:flex; align-items:center; justify-content:center; gap:9px; padding:9px 13px; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 14px; font:800 13px var(--body); cursor:pointer; }
.self-tabs button.active { color:white; background:var(--ink); border-color:var(--ink); }
.self-tabs svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.self-lessons { display:grid; gap:12px; }
.self-content-heading { display:flex; align-items:center; gap:13px; padding:21px 24px; background:#dfece7; border-radius:7px 7px 17px; }
.self-content-heading > span { width:45px; height:45px; display:grid; place-items:center; color:white; background:#1b5b4d; border-radius:5px 5px 13px; }
.self-content-heading svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; }
.self-content-heading small { color:#477168; font-size:12px; font-weight:850; text-transform:uppercase; }
.self-content-heading h3 { margin:2px 0 0; font:750 24px var(--display); }
.self-lesson-card { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:7px 7px 18px; }
.self-lesson-card header { display:flex; align-items:center; gap:13px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.self-lesson-card header > span { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; color:#17483e; background:#dff0ea; border-radius:5px 5px 12px; font:850 14px var(--display); }
.self-lesson-card h3 { margin:0; font:750 22px/1.1 var(--display); }
.self-lesson-card ul { display:grid; gap:9px; margin:17px 0; padding:0; list-style:none; }
.self-lesson-card li { position:relative; display:flex; align-items:flex-start; gap:10px; padding-inline-start:20px; color:#3f4c48; font-size:14px; line-height:1.65; }
.self-lesson-card li::before { content:""; position:absolute; inset-inline-start:0; top:.7em; width:7px; height:7px; background:#3b8d78; border-radius:50%; }
.self-lesson-card li.review { display:block; padding:12px 14px 12px 32px; background:#fff7df; border:1px solid #ead69b; border-radius:5px 5px 12px; }
.self-lesson-card li.review::before { inset-inline-start:15px; }
.self-lesson-card li em,.self-revision-list article > em { display:block; margin-bottom:4px; color:#805f08; font-size:12px; font-style:normal; font-weight:900; text-transform:uppercase; }
.self-lesson-card button[disabled],.self-scenario button[disabled] { opacity:.72; cursor:default; }
.self-card-mode,.self-quiz-mode,.self-scenario { max-width:900px; margin:0 auto; }
.self-card-counter,.self-quiz-head { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 4px; }
.self-card-counter strong,.self-quiz-head small { font-size:13px; font-weight:850; }
.self-card-counter span,.self-quiz-head span { color:var(--muted); font-size:12px; }
.self-flashcard { min-height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(27px,6vw,65px); text-align:center; color:white; background:radial-gradient(circle at 80% 15%,rgba(118,208,179,.18),transparent 35%),#14211e; border:1px solid #345b51; border-radius:10px 10px 32px; }
.self-flashcard-label { display:inline-flex; padding:6px 10px; color:#8de0c5; background:rgba(118,208,179,.08); border:1px solid rgba(118,208,179,.2); border-radius:20px; font-size:12px; font-weight:850; }
.self-flashcard h3 { max-width:700px; margin:22px 0; font:750 clamp(28px,4.5vw,47px)/1.05 var(--display); letter-spacing:-.045em; }
.self-flashcard-answer { width:min(680px,100%); padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.self-flashcard-answer small { color:#9eb8b0; font-size:12px; font-weight:850; }
.self-flashcard-answer p { margin:12px 0; color:white; font-size:18px; line-height:1.62; }
.self-flashcard-answer em { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#ffe295; background:rgba(246,183,30,.08); border:1px solid rgba(246,183,30,.25); border-radius:15px; font-size:12px; font-style:normal; }
.self-flashcard-answer svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.self-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.self-card-actions .selected { box-shadow:inset 0 0 0 2px #1b5b4d; }
.self-card-nav { display:grid; grid-template-columns:48px 1fr 48px; gap:8px; align-items:center; margin-top:12px; }
.self-card-nav button { width:48px; height:48px; display:grid; place-items:center; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:5px 5px 13px; cursor:pointer; }
.self-card-nav button:disabled { opacity:.4; cursor:default; }
.self-card-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.self-card-nav span { color:var(--muted); font-size:12px; font-weight:800; text-align:center; }
.self-quiz-head > div { display:flex; align-items:baseline; gap:10px; }
.self-quiz-head strong { font:850 18px var(--display); }
.self-quiz-track { height:6px; overflow:hidden; margin-bottom:12px; background:#ddd8cf; border-radius:10px; }
.self-quiz-track span { display:block; height:100%; background:#2b7a67; }
.self-quiz-card { padding:clamp(24px,4vw,42px); background:var(--paper); border:1px solid var(--line); border-radius:9px 9px 26px; }
.self-quiz-card h3 { margin:18px 0 22px; font:750 clamp(26px,3.4vw,39px)/1.08 var(--display); letter-spacing:-.045em; }
.self-quiz-options { display:grid; gap:9px; }
.self-quiz-options button { min-height:62px; display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; padding:10px 13px; text-align:start; color:var(--ink); background:white; border:1px solid var(--line); border-radius:5px 5px 14px; cursor:pointer; }
.self-quiz-options button > span { width:36px; height:36px; display:grid; place-items:center; color:#285e51; background:#e3f0eb; border-radius:50%; font:850 13px var(--display); }
.self-quiz-options button strong { font-size:13px; line-height:1.5; }
.self-quiz-options button.selected { border-color:#2c7765; box-shadow:0 0 0 2px rgba(44,119,101,.12); }
.self-quiz-options button.correct { background:#e5f5ef; border-color:#3d8f78; }
.self-quiz-options button.wrong { background:#fff0eb; border-color:#bb614b; }
.self-quiz-feedback { display:flex; gap:12px; margin:16px 0 12px; padding:16px; border-radius:5px 5px 14px; }
.self-quiz-feedback.correct { background:#e4f4ee; border:1px solid #9acdbd; }
.self-quiz-feedback.wrong { background:#fff0eb; border:1px solid #e1a898; }
.self-quiz-feedback > svg { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }
.self-quiz-feedback strong { font:850 14px var(--display); }
.self-quiz-feedback p { margin:4px 0; color:#43504c; font-size:13px; line-height:1.55; }
.self-quiz-feedback em { color:#805f08; font-size:12px; font-style:normal; font-weight:850; }
.self-quiz-card > .button { margin-top:5px; }
.self-quiz-result { min-height:430px; display:grid; place-content:center; justify-items:center; padding:40px; text-align:center; color:white; background:linear-gradient(130deg,#14211e,#195646); border-radius:10px 10px 30px; }
.self-quiz-result > span { width:62px; height:62px; display:grid; place-items:center; color:#15372f; background:#8de0c5; border-radius:50%; }
.self-quiz-result svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; }
.self-quiz-result small { margin-top:15px; color:#afc8c0; font-size:12px; font-weight:850; }
.self-quiz-result > strong { margin-top:8px; color:var(--yellow); font:900 70px/.9 var(--display); }
.self-quiz-result > strong em { font-size:20px; font-style:normal; }
.self-quiz-result p { margin:14px 0 20px; color:#d5e4df; }
.self-scenario { padding:clamp(22px,4vw,38px); background:var(--paper); border:1px solid var(--line); border-radius:8px 8px 24px; }
.self-scenario-intro { color:var(--muted); font-size:14px; }
.self-scenario ol { display:grid; gap:9px; margin:22px 0; padding:0; list-style:none; }
.self-scenario li { display:grid; grid-template-columns:46px 1fr; gap:13px; align-items:center; padding:14px; background:#f3f0e9; border-radius:5px 5px 14px; }
.self-scenario li > span { width:42px; height:42px; display:grid; place-items:center; color:white; background:#1b5b4d; border-radius:5px 5px 12px; font:850 13px var(--display); }
.self-scenario li p { margin:0; font-size:14px; line-height:1.55; }
.self-scenario > aside { display:flex; gap:10px; margin:18px 0; padding:15px; color:#5e501f; background:#fff5d7; border:1px solid #ead28a; border-radius:5px 5px 13px; font-size:12px; line-height:1.55; }
.self-scenario > aside svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }
.self-revision-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.self-revision-list article { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:7px 7px 18px; }
.self-revision-list article > span { color:#2b6d5d; font-size:12px; font-weight:850; }
.self-revision-list h3 { margin:7px 0; font:750 20px/1.15 var(--display); }
.self-revision-list p { color:var(--muted); font-size:13px; line-height:1.6; }
.self-empty { grid-column:1/-1; min-height:260px; display:grid; place-content:center; justify-items:center; gap:14px; color:#286958; background:#e5f2ed; border:1px solid #a9cfc3; border-radius:8px 8px 22px; }
.self-empty svg { width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.8; }
.self-empty strong { font:750 18px var(--display); }
@media (max-width:980px) {
  .self-training-promo { grid-template-columns:110px 1fr; }
  .self-promo-index { width:100px; height:100px; font-size:42px; }
  .self-promo-action { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
  .self-promo-action > small { margin:0; }
  .self-training-stats { grid-template-columns:repeat(3,1fr); }
  .self-module-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .self-training-promo { grid-template-columns:1fr; padding:22px 18px; }
  .self-promo-index { width:78px; height:78px; font-size:34px; }
  .self-promo-action { grid-column:1; grid-template-columns:1fr; }
  .self-promo-action .button { width:100%; }
  .self-training-hero { grid-template-columns:1fr; padding:31px 21px; }
  .self-training-dial { width:145px; height:145px; justify-self:start; }
  .self-training-stats { grid-template-columns:1fr 1fr; gap:8px; }
  .self-training-stats article { min-height:96px; }
  .self-phase-filters { justify-content:flex-start; }
  .self-phase-filters button { flex:1 1 calc(50% - 8px); }
  .self-module-card { grid-template-columns:58px 1fr; gap:13px; padding:18px 15px; }
  .self-module-number > span { width:52px; height:52px; }
  .self-module-percent { position:absolute; inset-inline-end:16px; top:18px; }
  .self-module-copy { min-width:0; }
  .self-module-copy h3 { padding-inline-end:48px; }
  .self-module-hero { grid-template-columns:1fr; padding:28px 20px; }
  .self-module-score { justify-self:start; }
  .self-tabs { grid-template-columns:1fr 1fr; }
  .self-tabs button { min-height:52px; }
  .self-content-heading,.self-lesson-card { padding:18px 16px; }
  .self-card-actions { grid-template-columns:1fr; }
  .self-flashcard { min-height:420px; padding:28px 19px; }
  .self-quiz-card { padding:22px 16px; }
  .self-quiz-options button { min-height:68px; grid-template-columns:36px 1fr; }
  .self-revision-list { grid-template-columns:1fr; }
}

.self-exam-promo { display:grid; grid-template-columns:58px minmax(0,1fr) auto auto; gap:18px; align-items:center; margin-top:15px; padding:22px; color:white; background:linear-gradient(120deg,#1a2724,#34301e); border:1px solid #655b35; border-radius:7px 7px 20px; }
.self-exam-promo > span { width:54px; height:54px; display:grid; place-items:center; color:#382b08; background:var(--yellow); border-radius:6px 6px 15px; }
.self-exam-promo svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; }
.self-exam-promo small { color:#dfc978; font-size:12px; font-weight:850; }
.self-exam-promo h2 { margin:3px 0 5px; font:750 25px/1.05 var(--display); }
.self-exam-promo p { margin:0; color:#c9c4ae; font-size:13px; line-height:1.5; }
.self-exam-promo > strong { color:var(--yellow); font:850 30px/1 var(--display); }
.self-exam-promo > strong em { font-size:12px; font-style:normal; }
.self-exam-shell { max-width:940px; margin:0 auto; }
.self-exam-shell > header { display:flex; justify-content:space-between; align-items:end; gap:18px; padding:23px 26px; color:white; background:#17221f; border-radius:8px 8px 0 0; }
.self-exam-shell > header small { color:#a9c0b9; font-size:12px; font-weight:850; }
.self-exam-shell > header h2 { margin:3px 0 0; font:750 29px/1 var(--display); }
.self-exam-shell > header > strong { color:var(--yellow); font:850 36px/1 var(--display); }
.self-exam-shell > header > strong span { color:#9caea8; font-size:14px; }
.self-exam-shell > .self-quiz-track { margin:0; border-radius:0; background:#30423d; }
.self-exam-shell .self-quiz-card { border-top:0; border-radius:0 0 9px 24px; }
.self-exam-result { max-width:940px; margin:0 auto; padding:clamp(26px,5vw,52px); text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:9px 9px 27px; }
.self-exam-result > span { width:62px; height:62px; display:grid; place-items:center; margin:0 auto; color:#173b32; background:#8de0c5; border-radius:50%; }
.self-exam-result > span svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; }
.self-exam-result > small { display:block; margin-top:15px; color:#397363; font-size:12px; font-weight:900; text-transform:uppercase; }
.self-exam-result > strong { display:block; margin-top:8px; color:#183f35; font:900 72px/.9 var(--display); }
.self-exam-result > strong em { font-size:20px; font-style:normal; }
.self-exam-result > p { color:var(--muted); font-size:14px; }
.self-domain-results { max-width:720px; margin:30px auto 0; padding-top:24px; text-align:start; border-top:1px solid var(--line); }
.self-domain-results h2 { margin:0 0 16px; font:750 24px var(--display); }
.self-domain-results > div { display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:6px 13px; align-items:center; margin-top:11px; }
.self-domain-results span { font-size:13px; font-weight:750; }
.self-domain-results strong { justify-self:end; font:850 13px var(--display); }
.self-domain-results i { grid-column:1/-1; height:5px; overflow:hidden; background:#e4e0d7; border-radius:8px; }
.self-domain-results b { display:block; height:100%; background:#378d75; }
.self-exam-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:27px; }
@media (max-width:720px) {
  .self-exam-promo { grid-template-columns:54px 1fr; }
  .self-exam-promo > strong { grid-column:1; }
  .self-exam-promo > .button { grid-column:1/-1; width:100%; }
  .self-exam-shell > header { padding:20px 17px; }
  .self-exam-actions { display:grid; }
}