/* BEGIN tokens: generated by tools/tokens.mjs from tools/tokens.json (copy of moby-exam_engine/web/tokens.json). Do not edit by hand. */
:root {
  --t-grad-1: #742774;
  --t-grad-2: #b0399c;
  --t-grad-3: #e8457a;
  --t-grad-4: #ff9a5a;
  --t-accent-grad: linear-gradient(120deg, #742774 0%, #b0399c 40%, #e8457a 75%, #ff9a5a 100%);
  --t-focus-halo: 0 0 0 5px color-mix(in srgb, #b0399c 22%, transparent);
  --t-radius: 18px;
  --t-radius-sm: 12px;
  --t-radius-pill: 999px;
  --t-font: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --t-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --t-dur-fast: 150ms;
  --t-dur-base: 300ms;
  --t-dur-slow: 600ms;
  --t-ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-ease-spring: cubic-bezier(.2, 1.5, .4, 1);
  --t-menu-bg: rgba(255,255,255,.97);
  --t-chrome-1: #f4f3f8;
  --t-chrome-2: #e9e7f1;
  --t-chrome-line: #dcd9e6;
  --t-flag-bg: #fff7e0;
  --t-flag-ink: #8a5a00;
  --t-bg: #f6f5fb;
  --t-bg-2: #ffffff;
  --t-ink: #1c1830;
  --t-ink-2: #4a4560;
  --t-ink-3: #69647d;
  --t-line: #e4e1ef;
  --t-brand: #742774;
  --t-brand-2: #0066ff;
  --t-brand-3: #e8457a;
  --t-glass: rgba(255,255,255,.72);
  --t-glass-line: rgba(255,255,255,.6);
  --t-shadow: 0 1px 2px rgba(28,24,48,.06), 0 8px 28px rgba(28,24,48,.08);
  --t-shadow-lg: 0 2px 6px rgba(28,24,48,.08), 0 24px 60px rgba(28,24,48,.16);
  --t-ok: #0e7c56;
  --t-ok-bg: #e6f6ef;
  --t-note: #2563eb;
  --t-note-bg: #eaf1ff;
  --t-tip: #8a5a00;
  --t-tip-bg: #fff6e0;
  --t-diff: #c4122f;
  --t-diff-bg: #fff0f2;
  --t-gold: #e0a100;
  --t-on-ok: #ffffff;
  --t-cue: #b0399c;
  --t-stage-foot: #fbfafd;
  --t-focus-ring: #742774;
  --t-l-menu-bg: rgba(255,255,255,.97);
  --t-l-chrome-1: #f4f3f8;
  --t-l-chrome-2: #e9e7f1;
  --t-l-chrome-line: #dcd9e6;
  --t-l-flag-bg: #fff7e0;
  --t-l-flag-ink: #8a5a00;
  --t-l-bg: #f6f5fb;
  --t-l-bg-2: #ffffff;
  --t-l-ink: #1c1830;
  --t-l-ink-2: #4a4560;
  --t-l-ink-3: #69647d;
  --t-l-line: #e4e1ef;
  --t-l-brand: #742774;
  --t-l-brand-2: #0066ff;
  --t-l-brand-3: #e8457a;
  --t-l-glass: rgba(255,255,255,.72);
  --t-l-glass-line: rgba(255,255,255,.6);
  --t-l-shadow: 0 1px 2px rgba(28,24,48,.06), 0 8px 28px rgba(28,24,48,.08);
  --t-l-shadow-lg: 0 2px 6px rgba(28,24,48,.08), 0 24px 60px rgba(28,24,48,.16);
  --t-l-ok: #0e7c56;
  --t-l-ok-bg: #e6f6ef;
  --t-l-note: #2563eb;
  --t-l-note-bg: #eaf1ff;
  --t-l-tip: #8a5a00;
  --t-l-tip-bg: #fff6e0;
  --t-l-diff: #c4122f;
  --t-l-diff-bg: #fff0f2;
  --t-l-gold: #e0a100;
  --t-l-on-ok: #ffffff;
  --t-l-cue: #b0399c;
  --t-l-stage-foot: #fbfafd;
  --t-l-focus-ring: #742774;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --t-bg: #0f0d18;
    --t-bg-2: #181527;
    --t-ink: #f1eefb;
    --t-ink-2: #c4bfd8;
    --t-ink-3: #9a94b3;
    --t-line: #2b2740;
    --t-brand: #d78ad7;
    --t-brand-2: #7aa7ff;
    --t-brand-3: #ff7aa2;
    --t-glass: rgba(24,21,39,.74);
    --t-glass-line: rgba(255,255,255,.08);
    --t-menu-bg: rgba(28,24,46,.97);
    --t-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
    --t-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
    --t-ok: #4fd1a1;
    --t-ok-bg: #0e2a20;
    --t-note: #7aa7ff;
    --t-note-bg: #111d38;
    --t-tip: #f2c66d;
    --t-tip-bg: #2a2110;
    --t-diff: #ff6b81;
    --t-diff-bg: #34101a;
    --t-chrome-1: #231f36;
    --t-chrome-2: #1c1830;
    --t-chrome-line: #34304c;
    --t-flag-bg: #2a2110;
    --t-flag-ink: #f2c66d;
    --t-on-ok: #062217;
    --t-cue: #f08bd8;
    --t-stage-foot: #1c1830;
    --t-focus-ring: #e9a8e9;
  }
}
/* END tokens */

/* tosarion.com additions to the template: a visible keyboard focus ring, the logo, dark mode, motion that
   honours reduced motion, and page classes. Colours, fonts and easing come from the token block above
   (the portals' tokens); css/style.css uses the same variables. */

/* The portals' font, self-hosted (the CSP allows fonts from this site only; the template's Google Fonts are gone). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); }
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn, #topnav .navigation-menu > li > a, .form-control { font-family: var(--t-font) !important; }

/* Keyboard focus: always visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--t-focus-ring); outline-offset: 2px; border-radius: 4px; box-shadow: var(--t-focus-halo); }

/* The logo: the portals' vector wordmark, dark text on light pages and white text in dark mode (never white on white). */
#topnav .logo { display: inline-flex; align-items: center; height: 74px; }
#topnav .logo .site-logo { display: block; height: 34px; width: auto; }
#topnav .logo .site-logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) { #topnav .logo .site-logo-on-light { display: none; } #topnav .logo .site-logo-on-dark { display: block; } }
/* The menu button's three lines (a button now, not a link without a name). */
#topnav .navbar-toggle span.lines { background: none; height: 18px; width: 25px; margin: 28px 0 26px 10px; }
.site-search-menu { width: 300px; }
#topnav .navbar-toggle { background: none; }
.site-search-icon { color: var(--t-ink); }

/* The fixed header covers the top of the first section on phones: keep page headings clear of it. */
html { scroll-padding-top: 84px; }
@media (max-width: 991px) { .site-first { padding-top: 110px !important; } }

/* Motion: the portals' easing for hovers; nothing moves with reduced motion. */
.btn, .card, a { transition-timing-function: var(--t-ease-out); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Dark mode: the device's preference. The template is light-only; these rules repaint its surfaces with the portals' dark tokens. */
@media (prefers-color-scheme: dark) {
  body { background-color: var(--t-bg); color: var(--t-ink-2); }
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title, .text-dark { color: var(--t-ink) !important; }
  p, li, .text-muted, .para-desc { color: var(--t-ink-2) !important; }
  .bg-light, .bg-white, section.bg-light, .section.bg-light { background-color: var(--t-bg) !important; }
  .card, .bg-white.card, .shadow.card, .dropdown-menu, .form-control, .form-select { background-color: var(--t-bg-2) !important; border-color: var(--t-line) !important; color: var(--t-ink) !important; }
  .form-control::placeholder { color: var(--t-ink-3); }
  .border, .border-top, .border-bottom { border-color: var(--t-line) !important; }
  #topnav, #topnav.nav-sticky, #topnav.bg-white { background-color: color-mix(in srgb, var(--t-bg-2) 94%, transparent) !important; box-shadow: 0 1px 0 var(--t-line); }
  #topnav .navigation-menu > li > a, #topnav .navigation-menu > li > a:hover { color: var(--t-ink) !important; }
  #topnav .navigation-menu > li.active > a, #topnav .navigation-menu > li > a:hover { color: var(--t-brand) !important; }
  #topnav .navbar-toggle span { background-color: var(--t-ink); }
  #navigation { background-color: var(--t-bg-2); }
  a:not(.btn) { color: var(--t-brand); }
  .text-primary { color: var(--t-brand) !important; }
  table, .table { color: var(--t-ink-2); --bs-table-bg: transparent; --bs-table-color: var(--t-ink-2); }
}

/* Contrast fixes (axe, 2026-10-19): the call-to-action's grey text on the dark photo overlay, and outline buttons in dark mode. */
.section-title > .para-desc.text-white-50 { color: rgba(255, 255, 255, .86) !important; }

/* The template's preloader (still on the Privacy and Terms pages) can never trap a page: it lets go after
   1.5 s even if app.js never runs or a resource hangs. Other pages have no preloader. */
#preloader { animation: site-preloader-release .3s ease 1.5s forwards; }
@keyframes site-preloader-release { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Home hero: the first slide is the background without JavaScript; js/hero.js rotates the slides. */
#hero-images { background: #1c1830 url(../images/bg/first-image-1920.webp) center / cover no-repeat; }
@media (max-width: 960px) { #hero-images { background-image: url(../images/bg/first-image-960.webp); } }

/* Home call to action: its photo, fixed behind the text (scrolls normally with reduced motion and on phones). */
.site-cta-bg { background: #1c1830 url(../images/bg/Start-AI-Journey-1920.webp) center / cover no-repeat fixed; }
@media (max-width: 960px) { .site-cta-bg { background-image: url(../images/bg/Start-AI-Journey-960.webp); background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .site-cta-bg { background-attachment: scroll; } }
.site-overlay-60 { opacity: .6; }

/* About page: the picture beside the feature list. It sits beside the text from the lg breakpoint (992px),
   where its column does, and stacks above it below that. */
.site-about-img { background: url(../img/bg-page.jpg) center / cover no-repeat; }
@media (max-width: 991.98px) { .features .container-fluid .padding-less.img { position: relative !important; height: 300px !important; } }

/* Home "Industry insights" cards: the tag and Read More links show on hover, on keyboard focus, and
   always on touch screens (no invisible links in the tab order). */
.blog:focus-within .image .blog-tag, .blog:focus-within .image .link { opacity: 1; }
@media (hover: none) { .blog .image .blog-tag, .blog .image .link { opacity: 1; } }
.blog .image img { width: 100%; height: auto; }

/* Mobile menu: js/app.js toggles .open on #navigation (see also css/noscript.css). */
@media (max-width: 991.98px) { #navigation.open { display: block; } }

/* Contact form: hidden until js/contact.js wires it (css/noscript.css keeps it hidden without JavaScript;
   the email address beside it always works). */
.site-contact-note { font-size: .9rem; }
.form-control[aria-invalid="true"] { border-color: #dc3545 !important; }

/* Bootstrap's own colours follow the tokens too: links, outline buttons and the primary colour are the brand. */
:root { --bs-primary: var(--t-l-brand); --bs-primary-rgb: 116, 39, 116; --bs-link-color: var(--t-brand); --bs-link-color-rgb: 116, 39, 116; --bs-link-hover-color: var(--t-brand); --bs-body-font-family: var(--t-font); }
a:not(.btn) { color: var(--t-brand); }
.btn-outline-primary, .btn-link { color: var(--t-brand); border-color: var(--t-brand); }
.btn-link { border-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible { color: #fff; background-color: var(--t-l-brand); border-color: var(--t-l-brand); }
@media (prefers-color-scheme: dark) {
  :root { --bs-link-color-rgb: 215, 138, 215; }
  .btn-outline-primary:hover, .btn-outline-primary:focus-visible { color: var(--t-bg); background-color: var(--t-brand); border-color: var(--t-brand); }
  .text-danger { color: var(--t-diff) !important; }
  /* The hero's scroll-down arrow keeps a visible icon on its round button. */
  .home-shape-arrow .arrow-icon { background-color: var(--t-bg-2) !important; color: var(--t-ink) !important; }
}

/* Legal pages: a fact the Captain still has to supply shows as a marked placeholder. */
.site-placeholder { background: var(--t-flag-bg, #fff7e0); color: var(--t-tip); padding: 0 .25em; border-radius: 4px; font-weight: 600; }
.site-legal h2 { color: var(--t-ink); }