@charset "UTF-8";
/* ============================================================================
   Gilded Noir 1.1.7 — Catto Learning Theme Package 3.0
   A framed ivory plate on a textured obsidian canvas. Black, gold, silver,
   ivory. No palettes are declared, so this file owns every colour decision.

   Section index
     01  Design tokens
     02  Reset and base typography
     03  Outer canvas and shell
     04  Header, standard navigation, breadcrumbs
     05  Plate, hero, page head
     06  Footer
     07  Flash messages
     08  Bootstrap bridge
     09  Headings and prose inside the plate
     10  Buttons and actions
     11  Forms
     12  Tables and data tools
     13  Cards, lists, metrics, empty states
     14  Badges, alerts, progress
     15  Tabs and accordions
     16  Modals and popovers
     17  Catalogue and course detail
     18  Course player and course content
     19  Assessments and results
     20  Certificates
     21  Account and company
     22  Platform administration
     23  Authentication, contact, help, errors
     24  Responsive
     25  Print, motion, focus
     26  1.1.1 targeted refinements
     27  1.1.2 hero geometry and type
     28  1.1.3 imagery + current workspace contracts
     29  1.1.3 targeted homepage + modal repair
     30  1.1.4 pagination and bounded entity lookups
   ========================================================================= */

/* == 01  Design tokens ==================================================== */

.gn-body {
  /* Core material */
  --gn-obsidian: #070708;
  --gn-black: #0f0f10;
  --gn-black-soft: #17171a;
  --gn-carbon: #212125;
  --gn-charcoal: #2d2d31;

  /* Gold */
  --gn-gold: #bfa75d;
  --gn-gold-bright: #ead28a;
  --gn-gold-soft: #dcc98c;
  --gn-gold-deep: #8d7340;
  --gn-gold-ink: #6f5a2f;

  /* Silver */
  --gn-silver: #c9c9c9;
  --gn-silver-deep: #8b8b8b;

  /* Ivory plate */
  --gn-ivory: #f7f4ec;
  --gn-ivory-deep: #efe9db;
  --gn-paper: #fffdf8;

  /* Ink */
  --gn-ink: #17171a;
  --gn-ink-2: #3b3a3c;
  --gn-muted: #6d6659;
  --gn-on-dark: #ece7d8;
  --gn-on-dark-muted: #b3aa9a;

  /* Lines */
  --gn-line: rgba(141, 115, 64, .22);
  --gn-line-strong: rgba(141, 115, 64, .42);
  --gn-line-cool: rgba(23, 23, 26, .10);

  /* Semantic, muted to jewel tones so they never fight the gold */
  --gn-success: #2f6a4a;
  --gn-success-bg: #eef5f0;
  --gn-warn: #8a6314;
  --gn-warn-bg: #faf3e3;
  --gn-danger: #8f2a1f;
  --gn-danger-bg: #f9eeec;
  --gn-info: #3c5570;
  --gn-info-bg: #eef2f7;

  /* Elevation */
  --gn-shadow-plate: 0 34px 90px rgba(0, 0, 0, .55);
  --gn-shadow-sm: 0 2px 6px rgba(35, 28, 12, .06);
  --gn-shadow: 0 10px 26px rgba(35, 28, 12, .09);
  --gn-shadow-lg: 0 22px 54px rgba(35, 28, 12, .16);
  --gn-shadow-raise: 0 3px 0 rgba(111, 90, 47, .28), 0 8px 18px rgba(35, 28, 12, .18);

  /* Geometry */
  --gn-radius-plate: 26px;
  --gn-radius-lg: 16px;
  --gn-radius: 12px;
  --gn-radius-sm: 8px;
  --gn-radius-pill: 999px;

  /* Type */
  --gn-font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --gn-font-ui: "Jost", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --gn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gn-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Rhythm */
  --gn-gutter: clamp(20px, 3.6vw, 52px);
  --gn-shell-width: min(1400px, 100% - 40px);

  /* Diagonal engraving used on the canvas, the plate and section heads */
  --gn-engrave: repeating-linear-gradient(-14deg, rgba(191, 167, 93, .05) 0 14px, transparent 14px 48px);
}

/* == 02  Reset and base typography ======================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.gn-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gn-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gn-on-dark);
  background: var(--gn-obsidian);
  -webkit-font-smoothing: antialiased;
}

.gn-body button, .gn-body input, .gn-body select, .gn-body textarea { font-family: inherit; }
.gn-body button { cursor: pointer; }
:where(.gn-body) a { color: inherit; text-decoration: none; }
.gn-body svg { display: block; }
.gn-body img { max-width: 100%; }

.gn-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.gn-eyebrow {
  display: inline-block;
  font-family: var(--gn-font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
  padding: 7px 13px;
  border: 1px solid var(--gn-line-strong);
  border-radius: var(--gn-radius-pill);
  background: rgba(191, 167, 93, .10);
}
.gn-eyebrow-dark {
  color: var(--gn-gold-bright);
  background: rgba(0, 0, 0, .42);
  border-color: rgba(234, 210, 138, .38);
}

.gn-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gn-gold-bright);
  color: var(--gn-black);
  font-weight: 700;
  border-radius: 0 0 var(--gn-radius) 0;
}
.gn-skip:focus { left: 0; }

/* == 03  Outer canvas and shell =========================================== */

.gn-body {
  background:
    radial-gradient(circle at 12% 12%, rgba(191, 167, 93, .16), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .09), transparent 22%),
    linear-gradient(160deg, #060607 0%, #101012 44%, #0b0b0c 100%);
  background-attachment: fixed;
}

.gn-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--gn-engrave),
    repeating-linear-gradient(14deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 64px);
}

.gn-shell { position: relative; z-index: 1; }

/* == 04  Header, standard navigation, breadcrumbs ========================= */

.gn-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: rgba(10, 10, 11, .90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 201, 201, .14);
  transition: box-shadow .25s ease, background .25s ease;
}
.gn-header-scrolled {
  background: rgba(8, 8, 9, .96);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
}

/* Signature: a gilded ribbon of gold and silver across the top edge. */
.gn-ribbon {
  height: 4px;
  background: linear-gradient(92deg,
    var(--gn-gold-bright) 0%, var(--gn-gold) 18%,
    transparent 18%, transparent 26%,
    rgba(255, 255, 255, .5) 26%, rgba(255, 255, 255, .16) 33%,
    transparent 33%, transparent 100%);
}

.gn-nav-inner {
  width: var(--gn-shell-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
}

.gn-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gn-brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(145deg, #23231f, #09090a);
  border: 1px solid rgba(234, 210, 138, .5);
  color: var(--gn-gold-bright);
  font-family: var(--gn-font-display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(0, 0, 0, .35);
}
.gn-brand-copy { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gn-brand-copy strong {
  font-family: var(--gn-font-display);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gn-brand-copy small {
  font-family: var(--gn-font-ui);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gn-gold);
}

.gn-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 14px;
  border-radius: var(--gn-radius-pill);
  border: 1px solid rgba(191, 167, 93, .34);
  background: rgba(255, 255, 255, .05);
  color: var(--gn-on-dark);
  font-family: var(--gn-font-ui);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gn-primary {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}

.gn-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--gn-radius-pill);
  background: transparent;
  color: var(--gn-on-dark-muted);
  font-family: var(--gn-font-ui);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.gn-nav-link .gn-icon { width: 17px; height: 17px; opacity: .8; }
.gn-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(191, 167, 93, .3); }
.gn-nav-link:hover .gn-icon { opacity: 1; }
.gn-nav-link.active,
.gn-menu.active > .gn-nav-link {
  color: #fff;
  background: linear-gradient(180deg, rgba(191, 167, 93, .2), rgba(191, 167, 93, .08));
  border-color: rgba(234, 210, 138, .55);
}
.gn-nav-link.active .gn-icon,
.gn-menu.active > .gn-nav-link .gn-icon { color: var(--gn-gold-bright); opacity: 1; }

.gn-nav-cta {
  color: var(--gn-black);
  background: linear-gradient(135deg, var(--gn-gold-bright), var(--gn-gold) 58%, var(--gn-gold-deep));
  border-color: rgba(234, 210, 138, .7);
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(191, 167, 93, .22);
}
.gn-nav-cta:hover { color: var(--gn-black); background: linear-gradient(135deg, #f3dfa1, var(--gn-gold-bright) 60%, var(--gn-gold)); }
.gn-nav-cta .gn-icon { opacity: .9; }

.gn-nav-form { margin: 0; }
.gn-nav-signout { border-color: rgba(201, 201, 201, .2); }

/* Dropdowns use the platform hook; only presentation lives here. */
.gn-menu { position: relative; }
.gn-menu > summary { list-style: none; cursor: pointer; }
.gn-menu > summary::-webkit-details-marker { display: none; }
.gn-caret { width: 14px; height: 14px; opacity: .6; transition: transform .18s ease; }
.gn-menu[open] .gn-caret { transform: rotate(180deg); }
.gn-menu[open] > .gn-nav-link { color: #fff; border-color: rgba(234, 210, 138, .55); background: rgba(255, 255, 255, .07); }

.gn-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1060;
  min-width: 250px;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a1a1c, #101011);
  border: 1px solid rgba(201, 201, 201, .18);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.gn-menu-panel nav { display: grid; gap: 2px; }
.gn-menu-panel a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--gn-on-dark-muted);
  font-family: var(--gn-font-ui);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
}
.gn-menu-panel a .gn-icon { width: 16px; height: 16px; color: var(--gn-gold); opacity: .85; }
.gn-menu-panel a:hover { background: rgba(191, 167, 93, .14); color: #fff; }
.gn-menu-panel a:hover .gn-icon { color: var(--gn-gold-bright); opacity: 1; }

/* Breadcrumbs */
.gn-breadcrumb-bar {
  border-top: 1px solid rgba(255, 255, 255, .04);
  background: linear-gradient(90deg, rgba(191, 167, 93, .16), rgba(255, 255, 255, .03) 46%, rgba(191, 167, 93, .07));
}
.gn-breadcrumb-inner { width: var(--gn-shell-width); margin: 0 auto; padding: 10px 0; }
.gn-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--gn-font-ui);
  font-size: .8rem;
  letter-spacing: .03em;
}
.gn-crumb { color: var(--gn-on-dark-muted); }
a.gn-crumb:hover { color: var(--gn-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.gn-crumb.current { color: #fff; font-weight: 600; }
.gn-crumb-sep { color: rgba(255, 255, 255, .22); }

/* == 05  Plate, hero, page head =========================================== */

.gn-stage { padding: 26px 0 48px; }

.gn-plate {
  position: relative;
  width: var(--gn-shell-width);
  margin: 0 auto;
  border-radius: var(--gn-radius-plate);
  overflow: hidden;
  background: linear-gradient(180deg, var(--gn-paper), var(--gn-ivory) 40%, var(--gn-ivory-deep));
  color: var(--gn-ink);
  border: 1px solid rgba(201, 201, 201, .4);
  box-shadow: var(--gn-shadow-plate);
}
.gn-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gn-engrave);
  opacity: .7;
}
.gn-main, .gn-footer { position: relative; z-index: 1; }
/* A modal lives inside .gn-main. Promote that existing theme stacking context
   only while a modal is open so the sticky header and footer cannot paint over
   the dialog. Core still owns modal open/close behaviour. */
.gn-main:has(.modal-backdrop.open:not([hidden])) { z-index: 1200; }

/* The plate opens with a gilded cap: an engraved strip that reads as the top
   edge of a plated panel. Purely decorative, so no page title is repeated. */
.gn-plate-cap {
  height: 7px;
  background: linear-gradient(92deg,
    var(--gn-gold-deep) 0%, var(--gn-gold) 12%, var(--gn-gold-bright) 22%, var(--gn-gold) 32%,
    rgba(139, 139, 139, .7) 32%, rgba(139, 139, 139, .35) 44%,
    rgba(191, 167, 93, .3) 44%, rgba(191, 167, 93, .12) 100%);
}
.gn-family-home .gn-plate-cap { position: relative; z-index: 2; }

.gn-main { padding: 30px var(--gn-gutter) 46px; }
.gn-family-home .gn-main { padding-top: 0; }
.gn-main > :is(.cl-hero, .cl-page-head, .cl-course-head, .hero, .cl-preview-bar, .cl-course-toolbar):first-child { margin-top: -30px; }
.gn-family-home .gn-main > .flash-stack { margin: 24px 0; }

/* == 06  Footer =========================================================== */

.gn-footer {
  position: relative;
  overflow: hidden;
  background: var(--gn-black);
  color: var(--gn-on-dark);
  border-top: 1px solid rgba(191, 167, 93, .3);
}
.gn-footer-art {
  position: absolute;
  inset: 0;
  background-image: url("../img/footer-serpent.jpg");
  background-size: cover;
  background-position: 58% 64%;
}
.gn-footer-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 9, .88) 0%, rgba(8, 8, 9, .56) 42%, rgba(8, 8, 9, .82) 100%),
    linear-gradient(90deg, rgba(8, 8, 9, .93) 0%, rgba(8, 8, 9, .62) 30%, rgba(8, 8, 9, .16) 64%, rgba(8, 8, 9, .52) 100%);
}
.gn-footer-inner { position: relative; z-index: 1; padding: 52px var(--gn-gutter) 26px; }

.gn-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr .8fr .8fr 1fr;
  gap: 34px;
}
.gn-footer h3 {
  margin: 16px 0 12px;
  font-family: var(--gn-font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: #fff;
}
.gn-footer h4 {
  margin: 0 0 16px;
  font-family: var(--gn-font-ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gn-gold);
}
.gn-footer p { margin: 0; color: #c3bbab; line-height: 1.75; max-width: 46ch; }
.gn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gn-footer li a { color: #c3bbab; font-size: .92rem; }
.gn-footer li a:hover { color: var(--gn-gold-bright); }

.gn-social { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.gn-social a {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #1e1e20, #0a0a0b);
  border: 1px solid rgba(191, 167, 93, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .18s ease, border-color .18s ease;
}
.gn-social a:hover { transform: translateY(-2px); border-color: var(--gn-gold-bright); }
.gn-social span {
  font-family: var(--gn-font-ui);
  font-weight: 600;
  font-size: .92rem;
  color: var(--gn-gold-bright);
  text-transform: lowercase;
}

.gn-footer-contact p { margin-bottom: 18px; }

.gn-footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-family: var(--gn-font-ui);
  font-size: .8rem;
  letter-spacing: .04em;
  color: #948c80;
}
.gn-footnote-mark { color: var(--gn-gold-deep); }

/* == 07  Flash messages =================================================== */

.gn-flash-stack, .gn-main .flash-stack { display: grid; gap: 10px; margin-bottom: 24px; }

.gn-main .flash {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--gn-radius);
  border: 1px solid var(--gn-line);
  border-left: 4px solid var(--gn-gold);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-sm);
  color: var(--gn-ink);
  transition: opacity .18s ease, transform .18s ease;
}
.gn-main .flash-mark {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gn-gold);
}
.gn-main .flash-text { flex: 1; font-size: .94rem; }
.gn-main .flash-close {
  border: 0;
  background: transparent;
  color: var(--gn-muted);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 2px;
}
.gn-main .flash-close:hover { color: var(--gn-ink); }
.gn-main .flash-hiding { opacity: 0; transform: translateY(-4px); }

.gn-main .flash-success { border-left-color: var(--gn-success); background: var(--gn-success-bg); }
.gn-main .flash-success .flash-mark { background: var(--gn-success); }
.gn-main .flash-danger, .gn-main .flash-error { border-left-color: var(--gn-danger); background: var(--gn-danger-bg); }
.gn-main .flash-danger .flash-mark, .gn-main .flash-error .flash-mark { background: var(--gn-danger); }
.gn-main .flash-warning { border-left-color: var(--gn-warn); background: var(--gn-warn-bg); }
.gn-main .flash-warning .flash-mark { background: var(--gn-warn); }
.gn-main .flash-info { border-left-color: var(--gn-info); background: var(--gn-info-bg); }
.gn-main .flash-info .flash-mark { background: var(--gn-info); }

/* == 08  Bootstrap bridge ================================================= */
/* The platform always loads Bootstrap 5.3 first. Rather than fight it with
   !important, Gilded Noir redefines the relevant --bs-* custom properties at
   component specificity so Bootstrap renders itself in the theme's material. */

.gn-body {
  --bs-body-font-family: var(--gn-font-body);
  --bs-body-color: var(--gn-ink);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--gn-muted);
  --bs-tertiary-color: var(--gn-muted);
  --bs-emphasis-color: var(--gn-ink);
  --bs-border-color: var(--gn-line);
  --bs-border-radius: var(--gn-radius);
  --bs-border-radius-sm: var(--gn-radius-sm);
  --bs-border-radius-lg: var(--gn-radius-lg);
  --bs-link-color: var(--gn-gold-ink);
  --bs-link-hover-color: var(--gn-gold-deep);
  --bs-link-color-rgb: 111, 90, 47;
  --bs-primary: #bfa75d;
  --bs-primary-rgb: 191, 167, 93;
  --bs-heading-color: var(--gn-ink);
  --bs-code-color: var(--gn-gold-ink);
  --bs-highlight-bg: rgba(191, 167, 93, .28);
}

.gn-main .container,
.gn-main .container-sm,
.gn-main .container-md,
.gn-main .container-lg,
.gn-main .container-xl { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.gn-main .container-fluid { padding-left: 0; padding-right: 0; }
.gn-main .cl-container-wide,
.gn-main .cl-container-course { max-width: 100%; padding-left: 0; padding-right: 0; }

/* Platform pages lean on py-5 / py-lg-6 for their own rhythm; inside the
   plate that doubles the padding the shell has already applied. */
.gn-main > section:first-child > .container.py-5,
.gn-main > section:first-child > .container.py-4 { padding-top: 0 !important; }
.gn-main .py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; }

.gn-main .text-body-secondary, .gn-main .text-muted, .gn-main .muted { color: var(--gn-muted) !important; }
.gn-main .text-primary { color: var(--gn-gold-ink) !important; }
.gn-main .text-danger { color: var(--gn-danger) !important; }
.gn-main .text-info { color: var(--gn-info) !important; }
.gn-main .text-warning { color: var(--gn-warn) !important; }
.gn-main .text-white-50 { color: rgba(255, 255, 255, .7) !important; }
.gn-main .bg-white, .gn-main .bg-body-tertiary { background: var(--gn-paper) !important; }
.gn-main .border, .gn-main .border-top, .gn-main .border-bottom,
.gn-main .border-start, .gn-main .border-end { border-color: var(--gn-line) !important; }
.gn-main .border-info { border-color: var(--gn-line-strong) !important; }
.gn-main .rounded { border-radius: var(--gn-radius) !important; }
.gn-main .shadow-sm { box-shadow: var(--gn-shadow-sm) !important; }

.gn-main .small, .gn-main small { font-size: .84rem; }
.gn-main .lead { font-size: 1.06rem; line-height: 1.72; color: var(--gn-ink-2); }
.gn-main .mono, .gn-main .font-monospace { font-family: var(--gn-font-mono); font-size: .86rem; }
.gn-main .fw-bold, .gn-main .fw-semibold { font-weight: 600; }

/* == 09  Headings and prose inside the plate ============================== */

.gn-main h1, .gn-main h2, .gn-main h3, .gn-main h4, .gn-main h5, .gn-main h6,
.gn-main .h1, .gn-main .h2, .gn-main .h3, .gn-main .h4, .gn-main .h5,
.gn-main .display-1, .gn-main .display-2, .gn-main .display-3,
.gn-main .display-4, .gn-main .display-5, .gn-main .display-6 {
  font-family: var(--gn-font-display);
  font-weight: 400;
  color: var(--gn-ink);
  line-height: 1.16;
  letter-spacing: -.005em;
}
.gn-main .display-1, .gn-main .display-2 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); }
.gn-main .display-3, .gn-main .display-4 { font-size: clamp(2rem, 4vw, 3rem); }
.gn-main .display-5 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.gn-main .display-6 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.gn-main h1 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.gn-main h2, .gn-main .h2 { font-size: 1.6rem; }
.gn-main h3, .gn-main .h3 { font-size: 1.3rem; }
.gn-main h4, .gn-main .h4 { font-size: 1.12rem; }
.gn-main h5, .gn-main .h5 { font-size: 1rem; }

/* Signature: a two-tone gold-to-silver nib under standalone section headings.
   Applied only where a heading introduces a section, never inside cards or
   tables where it would become noise. */
.gn-main .section-head h2,
.gn-main > section > h2,
.gn-main > h2 {
  position: relative;
  padding-bottom: 13px;
}
.gn-main .section-head h2::after,
.gn-main > section > h2::after,
.gn-main > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  height: 5px;
  border-radius: var(--gn-radius-pill);
  background: linear-gradient(90deg, var(--gn-gold) 0 58%, rgba(139, 139, 139, .8) 58% 82%, transparent 82%);
}

.gn-main .eyebrow, .gn-main .cl-kicker, .gn-main .page-kicker {
  display: inline-block;
  font-family: var(--gn-font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main :is(.cl-kicker, .eyebrow, .gn-eyebrow):empty { display: none; }
.gn-main .cl-kicker { padding: 6px 12px; border: 1px solid var(--gn-line-strong); border-radius: var(--gn-radius-pill); background: rgba(191, 167, 93, .1); }
.gn-main .cl-kicker.text-warning, .gn-main .cl-kicker.text-primary, .gn-main .cl-kicker.text-info { color: var(--gn-gold-ink) !important; }

.gn-main .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.gn-main .section-head p { margin: 8px 0 0; color: var(--gn-muted); max-width: 68ch; }
.gn-main .section { margin-top: 30px; }

.gn-main a { color: var(--gn-gold-ink); }
.gn-main a:hover { color: var(--gn-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.gn-main a.btn:hover, .gn-main a.nav-link:hover, .gn-main .list-group-item:hover { text-decoration: none; }

.gn-main .cl-back-link, .gn-main .back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--gn-font-ui);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .cl-back-link:hover, .gn-main .back-link:hover { color: var(--gn-gold-deep); }

.gn-main .divider { height: 1px; margin: 24px 0; background: var(--gn-line); border: 0; }
.gn-main hr { border-color: var(--gn-line); opacity: 1; }

/* == 10  Buttons and actions ============================================== */

.gn-main .btn, .gn-btn {
  --bs-btn-padding-y: .62rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-font-family: var(--gn-font-ui);
  --bs-btn-font-size: .86rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--gn-radius);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-shadow-rgb: 191, 167, 93;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gn-font-ui);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--gn-radius);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.gn-main .btn:active, .gn-btn:active { transform: translateY(1px); }
.gn-main .btn:disabled, .gn-main .btn.disabled, .gn-main .btn[aria-disabled="true"] {
  opacity: .5;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.gn-main .btn-lg { --bs-btn-padding-y: .82rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: .95rem; }
.gn-main .btn-sm { --bs-btn-padding-y: .42rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .78rem; --bs-btn-border-radius: var(--gn-radius-sm); border-radius: var(--gn-radius-sm); }

/* Primary — gilded, raised, with a real pressed state. */
.gn-main .btn-primary, .gn-main .button-primary, .gn-main .btn-accent, .gn-btn-gold {
  --bs-btn-color: #1b1608;
  --bs-btn-bg: linear-gradient(135deg, #f2dfa4, #d4bb74 56%, #b89c5c);
  --bs-btn-border-color: #a78f53;
  --bs-btn-hover-color: #1b1608;
  --bs-btn-hover-bg: linear-gradient(135deg, #f8ebc0, #ddc684 56%, #c4a866);
  --bs-btn-hover-border-color: #c0a75f;
  --bs-btn-active-color: #1b1608;
  --bs-btn-active-bg: linear-gradient(135deg, #c0a662, #ac9257);
  --bs-btn-active-border-color: #8d7340;
  --bs-btn-disabled-color: #4a4232;
  --bs-btn-disabled-bg: #cfc4a6;
  --bs-btn-disabled-border-color: #b9ad8d;
  color: #1b1608;
  background: linear-gradient(135deg, #f2dfa4, #d4bb74 56%, #b89c5c);
  border: 1px solid #a78f53;
  box-shadow: var(--gn-shadow-raise);
}
.gn-main .btn-primary:hover, .gn-main .btn-accent:hover, .gn-btn-gold:hover {
  color: #1b1608;
  background: linear-gradient(135deg, #f8ebc0, #ddc684 56%, #c4a866);
  box-shadow: 0 3px 0 rgba(111, 90, 47, .3), 0 12px 26px rgba(35, 28, 12, .24);
}
.gn-main .btn-primary:active, .gn-btn-gold:active {
  background: linear-gradient(135deg, #c0a662, #ac9257);
  box-shadow: inset 0 2px 5px rgba(60, 46, 14, .35);
}

/* Secondary / soft — ink on paper with a gold hairline. */
.gn-main .btn-secondary, .gn-main .btn-soft, .gn-main .btn-light,
.gn-main .button-secondary, .gn-main .btn-outline-secondary {
  --bs-btn-color: var(--gn-ink);
  --bs-btn-bg: var(--gn-paper);
  --bs-btn-border-color: var(--gn-line-strong);
  --bs-btn-hover-color: var(--gn-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--gn-gold);
  --bs-btn-active-bg: var(--gn-ivory-deep);
  --bs-btn-active-color: var(--gn-ink);
  --bs-btn-active-border-color: var(--gn-gold-deep);
  color: var(--gn-ink);
  background: var(--gn-paper);
  border: 1px solid var(--gn-line-strong);
  box-shadow: var(--gn-shadow-sm);
}
.gn-main .btn-secondary:hover, .gn-main .btn-soft:hover, .gn-main .btn-light:hover,
.gn-main .btn-outline-secondary:hover {
  color: var(--gn-ink);
  background: #fff;
  border-color: var(--gn-gold);
  box-shadow: var(--gn-shadow);
}

/* Outline — the quiet default for secondary navigation actions. */
.gn-main .btn-outline-primary {
  --bs-btn-color: var(--gn-gold-ink);
  --bs-btn-border-color: var(--gn-gold);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #1b1608;
  --bs-btn-hover-bg: var(--gn-gold);
  --bs-btn-hover-border-color: var(--gn-gold-deep);
  --bs-btn-active-color: #1b1608;
  --bs-btn-active-bg: var(--gn-gold-deep);
  --bs-btn-active-border-color: var(--gn-gold-deep);
  color: var(--gn-gold-ink);
  background: transparent;
  border: 1px solid var(--gn-gold);
}
.gn-main .btn-outline-primary:hover { color: #1b1608; background: var(--gn-gold); }

.gn-main .btn-ghost, .gn-btn-outline {
  color: var(--gn-ink-2);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
.gn-main .btn-ghost:hover { color: var(--gn-ink); background: rgba(191, 167, 93, .14); border-color: var(--gn-line); }

/* Destructive — garnet, never gold, so it can never be mistaken for save. */
.gn-main .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8f2a1f;
  --bs-btn-border-color: #74211a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a03328;
  --bs-btn-hover-border-color: #8f2a1f;
  --bs-btn-active-bg: #74211a;
  --bs-btn-active-color: #fff;
  color: #fff;
  background: #8f2a1f;
  border: 1px solid #74211a;
  box-shadow: 0 2px 0 rgba(74, 21, 16, .4), var(--gn-shadow-sm);
}
.gn-main .btn-danger:hover { color: #fff; background: #a03328; }
.gn-main .btn-outline-danger {
  --bs-btn-color: var(--gn-danger);
  --bs-btn-border-color: rgba(143, 42, 31, .5);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gn-danger);
  --bs-btn-hover-border-color: var(--gn-danger);
  color: var(--gn-danger);
  border: 1px solid rgba(143, 42, 31, .5);
  background: transparent;
}
.gn-main .btn-outline-danger:hover { color: #fff; background: var(--gn-danger); }

.gn-main .btn-warn {
  color: #fff;
  background: var(--gn-warn);
  border: 1px solid #6f4f10;
}
.gn-main .btn-warn:hover { background: #9c711a; color: #fff; }

.gn-main .btn-active, .gn-main .badge.active-theme {
  color: #fff;
  background: var(--gn-success);
  border: 1px solid #245239;
}

/* Buttons rendered on dark platform surfaces (hero bands, preview bars). */
.gn-main .btn-outline-light {
  --bs-btn-color: #f6efe0;
  --bs-btn-border-color: rgba(234, 210, 138, .55);
  --bs-btn-hover-color: #1b1608;
  --bs-btn-hover-bg: var(--gn-gold-bright);
  --bs-btn-hover-border-color: var(--gn-gold-bright);
  color: #f6efe0;
  border: 1px solid rgba(234, 210, 138, .55);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}
.gn-main .btn-outline-light:hover { color: #1b1608; background: var(--gn-gold-bright); }

/* Footer and hero buttons live outside .gn-main. */
.gn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .78rem 1.4rem;
  border-radius: var(--gn-radius);
  border: 1px solid transparent;
  font-family: var(--gn-font-ui);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .05em;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.gn-btn-gold { border-color: #a78f53; box-shadow: var(--gn-shadow-raise); }
.gn-btn-outline {
  color: #f2ead9;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(234, 210, 138, .5);
}
.gn-btn-outline:hover { color: #1b1608; background: var(--gn-gold-bright); border-color: var(--gn-gold-bright); }

.gn-main .row-actions, .gn-main .toolbar, .gn-main .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.gn-main .row-actions form, .gn-main .toolbar form { margin: 0; }

/* Actions must stay legible when they are packed into a table row. */
.gn-main td .btn, .gn-main .list-item .btn, .gn-main .row-actions .btn { box-shadow: none; }
.gn-main td .btn-primary, .gn-main .list-item .btn-primary { box-shadow: 0 2px 0 rgba(111, 90, 47, .26); }

/* == 11  Forms ============================================================ */

/* Field labels only. Labels that wrap selectable content - price variants,
   role choices, assessment options - keep normal body typography. */
.gn-main :is(label, .form-label):not(.form-check):not(.form-check-label):not(.cl-option):not(.role-check):not(.editor-choice):not([class*="border"]) {
  display: block;
  margin-bottom: 7px;
  font-family: var(--gn-font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gn-ink-2);
}

/* :where() keeps this at single-class specificity so component rules below
   (search fields, input groups, editors) can override without !important. */
.gn-main :where(
  input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]),
  select, textarea, .form-control, .form-select) {
  width: 100%;
  padding: .68rem .85rem;
  font-family: var(--gn-font-body);
  font-size: .95rem;
  color: var(--gn-ink);
  background-color: var(--gn-paper);
  border: 1px solid var(--gn-line-strong);
  border-radius: var(--gn-radius);
  box-shadow: inset 0 1px 2px rgba(35, 28, 12, .05);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gn-main :where(textarea) { min-height: 120px; line-height: 1.6; }
.gn-main :where(input, select, textarea, .form-control, .form-select):focus {
  outline: 0;
  background: #fff;
  border-color: var(--gn-gold);
  box-shadow: 0 0 0 3px rgba(191, 167, 93, .26);
}
.gn-main input::placeholder, .gn-main textarea::placeholder { color: #a49b8b; }
.gn-main :where(input, select, textarea, .form-control):disabled {
  background: var(--gn-ivory-deep);
  color: var(--gn-muted);
  cursor: not-allowed;
}
.gn-main :where(select, .form-select) {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d7340' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 17px;
  padding-right: 2.2rem;
}

.gn-main :where(.form-check-input, input[type="checkbox"], input[type="radio"]) {
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--gn-line-strong);
  background-color: var(--gn-paper);
}
.gn-main .form-check-input:checked { background-color: var(--gn-gold-deep); border-color: var(--gn-gold-deep); }
.gn-main .form-check-input:focus { border-color: var(--gn-gold); box-shadow: 0 0 0 3px rgba(191, 167, 93, .26); }
.gn-main .form-check-label, .gn-main .form-check label {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--gn-font-body);
  font-size: .94rem;
  font-weight: 400;
  color: var(--gn-ink);
}

.gn-main :is(.cl-option, .role-check, .editor-choice, label[class*="border"]) {
  font-family: var(--gn-font-body);
  font-size: .94rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gn-ink);
}
.gn-main label[class*="border"] strong { font-family: var(--gn-font-display); font-size: 1.12rem; }
.gn-main label[class*="border"] small { color: var(--gn-muted); }
.gn-main label[class*="border"]:has(input:checked) {
  border-color: var(--gn-gold-deep) !important;
  background: rgba(191, 167, 93, .14);
}

.gn-main .help, .gn-main .form-text {
  margin-top: 7px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--gn-muted);
}
.gn-main .is-invalid, .gn-main :where(input, select, textarea):user-invalid {
  border-color: rgba(143, 42, 31, .6);
  box-shadow: 0 0 0 3px rgba(143, 42, 31, .16);
}
.gn-main .invalid-feedback { color: var(--gn-danger); font-size: .82rem; }

.gn-main .form-grid, .gn-main .grid-2 > form.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.gn-main .field { min-width: 0; }
.gn-main .field.full, .gn-main .form-grid .full { grid-column: 1 / -1; }

.gn-main fieldset { border: 1px solid var(--gn-line); border-radius: var(--gn-radius-lg); padding: 18px 20px; margin: 0 0 20px; }
.gn-main legend {
  float: none;
  width: auto;
  padding: 0 8px;
  font-family: var(--gn-font-display);
  font-size: 1.05rem;
  color: var(--gn-ink);
}

.gn-main .input-group { flex-wrap: nowrap; }
.gn-main .input-group-text {
  background: var(--gn-ivory-deep);
  border: 1px solid var(--gn-line-strong);
  color: var(--gn-muted);
  font-size: .86rem;
  border-radius: var(--gn-radius);
}
.gn-main .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gn-main .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.gn-main .cl-honeypot { position: absolute; left: -9999px; }
.gn-main .cl-password-control input { margin: 0; }
.gn-main .cl-password-toggle {
  border: 1px solid var(--gn-line-strong);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
  color: var(--gn-ink-2);
  padding: 0 .8rem;
}

/* == 12  Tables and data tools ============================================ */

.gn-main .table-wrap, .gn-main .table-responsive {
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-sm);
  overflow: auto;
}
.gn-main .card .table-wrap, .gn-main .card .table-responsive { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

.gn-main table, .gn-main .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gn-ink);
  --bs-table-border-color: var(--gn-line);
  --bs-table-striped-bg: rgba(191, 167, 93, .06);
  --bs-table-striped-color: var(--gn-ink);
  --bs-table-hover-bg: rgba(191, 167, 93, .13);
  --bs-table-hover-color: var(--gn-ink);
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .92rem;
  color: var(--gn-ink);
}

.gn-main thead th, .gn-main .table > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 16px;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--gn-font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
  background: linear-gradient(180deg, var(--gn-ivory-deep), #e8e1d0);
  border-bottom: 2px solid var(--gn-line-strong);
  white-space: nowrap;
}
.gn-main tbody td, .gn-main .table > tbody td {
  padding: 13px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--gn-line-cool);
  border-bottom: 0;
}
.gn-main tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .55); }
.gn-main tbody tr:nth-child(even) { background: rgba(191, 167, 93, .055); }
.gn-main tbody tr:hover { background: rgba(191, 167, 93, .14); }
.gn-main tbody tr[hidden] { display: none; }
.gn-main tbody td strong { font-weight: 600; }
.gn-main .table > :not(caption) > * > * { box-shadow: none; }
.gn-main caption { padding: 12px 16px; color: var(--gn-muted); font-size: .84rem; caption-side: bottom; }

/* Platform-provided filters keep their own markup; this styles it. */
.gn-main .search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
  flex: 1 1 260px;
  max-width: 420px;
}
.gn-main .search-wrap input { padding-left: 2.4rem; }
.gn-main .search-icon {
  position: absolute;
  left: .85rem;
  z-index: 1;
  color: var(--gn-gold-deep);
  font-size: 1rem;
  pointer-events: none;
}
.gn-main .activity-filters, .gn-main .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(239, 233, 219, .7));
}
.gn-main .activity-filters .field, .gn-main .toolbar .field { margin: 0; min-width: 170px; }

/* Theme-added client filter, permitted by THEME-COMPONENTS.md section 6. */
.gn-main .gn-table-search { margin: 0 0 12px; }
.gn-main .gn-table-search-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--gn-font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .gn-table-search-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gn-main .gn-table-search-input { max-width: 420px; }
.gn-main .gn-table-search-count { font-size: .8rem; color: var(--gn-muted); font-family: var(--gn-font-ui); letter-spacing: .04em; }
.gn-main .gn-table-empty-result tbody::after {
  content: "No rows match that search.";
  display: block;
  padding: 20px 16px;
  color: var(--gn-muted);
  font-style: italic;
}

/* == 13  Cards, lists, metrics, empty states ============================== */

.gn-main .card,
.gn-main .stat-card, .gn-main .cl-stat,
.gn-main .panel, .gn-main .notice, .gn-main .contact-card,
.gn-main .admin-wide-card, .gn-main .cl-summary-card, .gn-main .cl-start-card {
  --bs-card-bg: var(--gn-paper);
  --bs-card-border-color: var(--gn-line);
  --bs-card-border-radius: var(--gn-radius-lg);
  --bs-card-inner-border-radius: var(--gn-radius);
  --bs-card-cap-bg: var(--gn-ivory-deep);
  --bs-card-color: var(--gn-ink);
  position: relative;
  background: var(--gn-paper);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  box-shadow: var(--gn-shadow-sm);
  color: var(--gn-ink);
}
/* A gold hairline appears along the top edge of an interactive card. */
.gn-main .card::before, .gn-main .stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--gn-radius-lg) var(--gn-radius-lg) 0 0;
  background: linear-gradient(90deg, var(--gn-gold) 0 34%, rgba(139, 139, 139, .55) 34% 52%, transparent 52%);
  opacity: 0;
  transition: opacity .2s ease;
}
.gn-main .card:hover::before, .gn-main .stat-card:hover::before { opacity: 1; }
.gn-main .card > .card-body { padding: 22px; }
.gn-main .card-header {
  padding: 16px 22px;
  background: linear-gradient(180deg, var(--gn-ivory-deep), rgba(239, 233, 219, .5));
  border-bottom: 1px solid var(--gn-line);
  font-family: var(--gn-font-ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .card h2, .gn-main .card h3 { margin-top: 0; }
.gn-main .card > .section-head { padding: 20px 22px 0; margin-bottom: 16px; }
.gn-main .card > .section-head + .list,
.gn-main .card > .section-head + .form-grid,
.gn-main .card > .section-head + .table-wrap { padding: 0 22px 22px; }
.gn-main .card > .list:last-child, .gn-main .card > .form-grid:last-child { padding-bottom: 22px; }

.gn-main .grid { display: grid; gap: 20px; }
.gn-main .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gn-main .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gn-main .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gn-main .stat-card, .gn-main .cl-stat {
  padding: 22px;
  background: linear-gradient(170deg, var(--gn-paper), var(--gn-ivory));
}
.gn-main .stat-value, .gn-main .cl-stat strong {
  display: block;
  font-family: var(--gn-font-display);
  font-size: 2.3rem;
  line-height: 1.05;
  color: var(--gn-ink);
}
.gn-main .stat-label, .gn-main .cl-stat span {
  display: block;
  margin-top: 8px;
  font-family: var(--gn-font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .stat-note { margin-top: 5px; font-size: .82rem; color: var(--gn-muted); }

.gn-main .list, .gn-main .cl-data-list, .gn-main .list-group {
  display: grid;
  gap: 0;
  border-radius: var(--gn-radius);
  overflow: hidden;
}
.gn-main .list-item, .gn-main .list-group-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--gn-paper);
  border: 1px solid var(--gn-line);
  border-bottom: 0;
  color: var(--gn-ink);
}
.gn-main .list-item:first-child, .gn-main .list-group-item:first-child { border-radius: var(--gn-radius) var(--gn-radius) 0 0; }
.gn-main .list-item:last-child, .gn-main .list-group-item:last-child { border-bottom: 1px solid var(--gn-line); border-radius: 0 0 var(--gn-radius) var(--gn-radius); }
.gn-main .list-item:only-child, .gn-main .list-group-item:only-child { border-radius: var(--gn-radius); }
.gn-main .list-item:nth-child(even) { background: rgba(191, 167, 93, .05); }
.gn-main .list-item:hover { background: rgba(191, 167, 93, .11); }
.gn-main .list-item strong { display: block; font-weight: 600; font-size: .98rem; }
.gn-main .list-item p { margin: 4px 0 0; font-size: .86rem; color: var(--gn-muted); }
.gn-main .list-item form { margin: 0; }

.gn-main .empty, .gn-main .cl-empty-state {
  padding: 44px 26px;
  text-align: center;
  border: 1px dashed var(--gn-line-strong);
  border-radius: var(--gn-radius-lg);
  background: repeating-linear-gradient(-14deg, rgba(191, 167, 93, .06) 0 12px, transparent 12px 40px), var(--gn-ivory);
  color: var(--gn-muted);
}
.gn-main .empty h3, .gn-main .cl-empty-state h3 { margin: 0 0 8px; color: var(--gn-ink); }
.gn-main .cl-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--gn-line-strong);
  background: var(--gn-paper);
  font-family: var(--gn-font-display);
  font-size: 1.3rem;
  color: var(--gn-gold-deep);
}

.gn-main .notice, .gn-main .cl-callout, .gn-main .callout {
  padding: 18px 20px;
  border-left: 4px solid var(--gn-gold);
  background: linear-gradient(180deg, var(--gn-paper), rgba(191, 167, 93, .08));
}
.gn-main .notice strong, .gn-main .cl-callout strong { display: block; margin-bottom: 5px; font-family: var(--gn-font-display); font-size: 1.05rem; }
.gn-main .cl-warning-panel, .gn-main .warning, .gn-main .danger-zone {
  padding: 18px 20px;
  border: 1px solid rgba(143, 42, 31, .3);
  border-left: 4px solid var(--gn-danger);
  border-radius: var(--gn-radius);
  background: var(--gn-danger-bg);
  color: #5f1c14;
}
.gn-main .cl-warning-panel strong, .gn-main .danger-zone strong { color: var(--gn-danger); }

.gn-main .chip-row, .gn-main .role-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-main .avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(145deg, #23231f, #0d0d0e);
  border: 1px solid rgba(234, 210, 138, .45);
  color: var(--gn-gold-bright);
  font-family: var(--gn-font-display);
  font-size: 1.1rem;
}

/* == 14  Badges, alerts, progress ========================================= */

.gn-main .badge {
  --bs-badge-padding-x: .6em;
  --bs-badge-padding-y: .42em;
  --bs-badge-border-radius: var(--gn-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .4em .68em;
  font-family: var(--gn-font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--gn-radius-sm);
  border: 1px solid var(--gn-line-strong);
  background: rgba(191, 167, 93, .14);
  color: var(--gn-gold-ink);
}
.gn-main .badge.good, .gn-main .badge.success, .gn-main .text-bg-success {
  color: var(--gn-success) !important;
  background: var(--gn-success-bg) !important;
  border-color: rgba(47, 106, 74, .35);
}
.gn-main .badge.warn, .gn-main .badge.warning, .gn-main .text-bg-warning {
  color: var(--gn-warn) !important;
  background: var(--gn-warn-bg) !important;
  border-color: rgba(138, 99, 20, .35);
}
.gn-main .badge.danger, .gn-main .text-bg-danger {
  color: var(--gn-danger) !important;
  background: var(--gn-danger-bg) !important;
  border-color: rgba(143, 42, 31, .35);
}
.gn-main .badge.info, .gn-main .text-bg-info {
  color: var(--gn-info) !important;
  background: var(--gn-info-bg) !important;
  border-color: rgba(60, 85, 112, .3);
}
.gn-main .text-bg-light, .gn-main .text-bg-secondary {
  color: var(--gn-ink-2) !important;
  background: var(--gn-ivory-deep) !important;
  border-color: var(--gn-line);
}
.gn-main .text-bg-primary {
  color: #1b1608 !important;
  background: var(--gn-gold-soft) !important;
  border-color: var(--gn-gold-deep);
}
.gn-main .badge.permanent, .gn-main .cl-badge-soft {
  color: var(--gn-gold-ink) !important;
  background: rgba(191, 167, 93, .16) !important;
  border-color: var(--gn-line-strong);
}

.gn-main .alert {
  --bs-alert-border-radius: var(--gn-radius-lg);
  position: relative;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--gn-line);
  border-left: 4px solid var(--gn-gold);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  color: var(--gn-ink);
  box-shadow: var(--gn-shadow-sm);
}
.gn-main .alert-success { border-left-color: var(--gn-success); background: var(--gn-success-bg); color: #1f4a33; }
.gn-main .alert-warning { border-left-color: var(--gn-warn); background: var(--gn-warn-bg); color: #6c4d10; }
.gn-main .alert-danger { border-left-color: var(--gn-danger); background: var(--gn-danger-bg); color: #5f1c14; }
.gn-main .alert-info, .gn-main .alert-primary { border-left-color: var(--gn-info); background: var(--gn-info-bg); color: #2c3f53; }
.gn-main .alert h4, .gn-main .alert .alert-heading { margin-top: 0; font-size: 1.05rem; }

.gn-main .progress, .gn-main .cl-progress-lg {
  --bs-progress-bg: var(--gn-ivory-deep);
  --bs-progress-border-radius: var(--gn-radius-pill);
  height: 9px;
  overflow: hidden;
  background: var(--gn-ivory-deep);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-pill);
}
.gn-main .progress span, .gn-main .progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gn-gold-deep), var(--gn-gold) 55%, var(--gn-gold-bright));
  border-radius: var(--gn-radius-pill);
  transition: width .4s ease;
}
.gn-main .cl-progress-lg { height: 14px; }

/* == 15  Tabs and accordions ============================================== */
/* Open/active switching is platform JavaScript; only the surface is theme. */

.gn-main .panel-tabs, .gn-main .cl-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 22px;
  padding: 5px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: linear-gradient(180deg, var(--gn-ivory-deep), rgba(239, 233, 219, .55));
}
.gn-main .tab-btn, .gn-main .cl-admin-tabs a {
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: var(--gn-radius);
  background: transparent;
  color: var(--gn-muted);
  font-family: var(--gn-font-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.gn-main .tab-btn:hover, .gn-main .cl-admin-tabs a:hover { color: var(--gn-ink); background: rgba(255, 255, 255, .7); }
.gn-main .tab-btn.active, .gn-main .cl-admin-tabs a.active {
  color: var(--gn-ink);
  background: var(--gn-paper);
  border-color: var(--gn-line-strong);
  box-shadow: var(--gn-shadow-sm), inset 0 -3px 0 var(--gn-gold);
}

.gn-main details:not(.gn-menu):not(.account-menu):not(.rl-account-menu) {
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  overflow: hidden;
  margin-bottom: 12px;
}
.gn-main details > summary:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--gn-font-display);
  font-size: 1.04rem;
  color: var(--gn-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(239, 233, 219, .6));
  transition: background .16s ease;
}
.gn-main details > summary::-webkit-details-marker { display: none; }
.gn-main details > summary:not(.btn)::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid var(--gn-gold-deep);
  border-bottom: 2px solid var(--gn-gold-deep);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.gn-main details[open] > summary:not(.btn)::after { transform: rotate(-135deg) translateY(-2px); }
.gn-main details[open] > summary:not(.btn) { background: rgba(191, 167, 93, .14); border-bottom: 1px solid var(--gn-line); }
.gn-main details > summary:not(.btn):hover { background: rgba(191, 167, 93, .1); }
.gn-main details > *:not(summary) { padding: 18px; }
.gn-main details > .cl-help-body, .gn-main .cl-help-body { padding: 18px; }
.gn-main .cl-help-item { margin-bottom: 12px; }

.gn-main details > summary.btn { display: inline-flex; list-style: none; }
.gn-main details:has(> summary.btn) { border: 0; background: transparent; overflow: visible; margin-bottom: 0; }
.gn-main .popover-form, .gn-main .theme-popover-form {
  position: absolute;
  z-index: 1040;
  min-width: 280px;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--gn-line-strong);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-lg);
}

/* == 16  Modals and popovers ============================================== */
/* Visibility is owned by catto-platform.css; this styles the surface only. */

.gn-main .modal-backdrop, .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(6, 6, 7, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  width: min(680px, 100%);
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--gn-radius-plate);
  border: 1px solid rgba(201, 201, 201, .4);
  background: linear-gradient(180deg, var(--gn-paper), var(--gn-ivory));
  color: var(--gn-ink);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gn-line);
  background: linear-gradient(180deg, rgba(191, 167, 93, .16), transparent);
}
.modal-head h3 { margin: 0; font-family: var(--gn-font-display); font-weight: 400; font-size: 1.35rem; color: var(--gn-ink); }
.modal-body { padding: 24px; }
.modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--gn-line);
  background: rgba(239, 233, 219, .6);
}
.close-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gn-line);
  border-radius: 50%;
  background: var(--gn-paper);
  color: var(--gn-muted);
  font-size: 1.3rem;
  line-height: 1;
}
.close-btn:hover { color: var(--gn-ink); border-color: var(--gn-gold); background: #fff; }

/* == 17  Catalogue and course detail ====================================== */

.gn-main .course-card, .gn-main .cl-course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--gn-paper);
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  box-shadow: var(--gn-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gn-main .course-card:hover, .gn-main .cl-course-card:hover {
  transform: translateY(-3px);
  border-color: var(--gn-line-strong);
  box-shadow: var(--gn-shadow-lg);
}
.gn-main .course-cover, .gn-main .cl-course-cover {
  position: relative;
  height: 148px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .16) 0 12px, transparent 12px 40px),
    linear-gradient(140deg, #1b1b1e, #0b0b0c 70%);
  border-bottom: 1px solid var(--gn-line);
}
.gn-main img.cl-course-cover { object-fit: cover; width: 100%; }
.gn-main .cl-course-cover-placeholder span {
  font-family: var(--gn-font-display);
  font-size: 2.6rem;
  color: var(--gn-gold-bright);
}
.gn-main .course-level {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: .4em .7em;
  border-radius: var(--gn-radius-sm);
  border: 1px solid rgba(234, 210, 138, .45);
  background: rgba(0, 0, 0, .55);
  font-family: var(--gn-font-ui);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gn-gold-bright);
}
.gn-main .course-body { display: flex; flex-direction: column; flex: 1; padding: 20px; gap: 4px; }
.gn-main .course-title, .gn-main .cl-course-card h3 {
  font-family: var(--gn-font-display);
  font-size: 1.2rem;
  line-height: 1.28;
  color: var(--gn-ink);
}
.gn-main .course-meta {
  margin-top: 4px;
  font-family: var(--gn-font-ui);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .course-body p { margin: 10px 0 0; font-size: .9rem; color: var(--gn-muted); flex: 1; }
.gn-main .course-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: rgba(191, 167, 93, .09);
}
.gn-main .course-price strong { font-family: var(--gn-font-display); font-size: 1.15rem; color: var(--gn-ink); }
.gn-main .course-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gn-line);
}
.gn-main .course-footer form { margin: 0; }
.gn-main .favourite { font-size: 1.2rem; line-height: 1; color: var(--gn-gold-ink); padding: .3rem .5rem; }
.gn-main .favourite:hover { color: var(--gn-gold-bright); background: rgba(191, 167, 93, .18); }

/* Platform hero and page-head bands rendered inside the plate.
   Appearance applies wherever the band occurs; the full-bleed geometry is
   applied only to direct children of the main column, so a band nested in an
   Administration panel or a grid cell stays inside its container. */
.gn-main .cl-hero, .gn-main .cl-page-head, .gn-main .cl-course-head, .gn-main .contact-page-head, .gn-main .hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  padding: 40px var(--gn-gutter);
  border-radius: var(--gn-radius-lg);
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .1) 0 14px, transparent 14px 48px),
    linear-gradient(125deg, #131315 0%, #1d1d20 46%, #0c0c0d 100%);
  color: #f1ead9;
  border: 1px solid rgba(191, 167, 93, .28);
}
.gn-main > .cl-hero, .gn-main > .cl-page-head, .gn-main > .cl-course-head,
.gn-main > .contact-page-head, .gn-main > .hero,
.gn-main > section > .cl-hero, .gn-main > section > .cl-page-head {
  margin-left: calc(-1 * var(--gn-gutter));
  margin-right: calc(-1 * var(--gn-gutter));
  border-radius: 0;
  border-top: 1px solid rgba(191, 167, 93, .28);
  border-bottom: 1px solid rgba(191, 167, 93, .28);
}
.gn-main > .cl-hero:first-child, .gn-main > .cl-page-head:first-child,
.gn-main > .cl-course-head:first-child, .gn-main > .hero:first-child { border-top: 0; }

.gn-main .cl-hero h1, .gn-main .cl-hero h2, .gn-main .cl-page-head h1, .gn-main .cl-page-head h2,
.gn-main .hero h1, .gn-main .hero h2, .gn-main .cl-course-head h1 { color: #fff; }
.gn-main .cl-hero p, .gn-main .cl-hero .lead, .gn-main .cl-hero li,
.gn-main .cl-page-head p, .gn-main .cl-page-head .lead,
.gn-main .hero p, .gn-main .cl-course-head p { color: #d6cdb9; }
.gn-main .cl-hero .cl-kicker, .gn-main .cl-page-head .cl-kicker, .gn-main .hero .eyebrow, .gn-main .cl-course-head .cl-kicker {
  color: var(--gn-gold-bright) !important;
  background: rgba(0, 0, 0, .38);
  border-color: rgba(234, 210, 138, .34);
}
.gn-main .cl-hero .cl-back-link, .gn-main .cl-page-head .cl-back-link { color: var(--gn-gold-bright); }
.gn-main .cl-hero .badge, .gn-main .cl-course-head .badge, .gn-main .cl-page-head .badge {
  color: var(--gn-gold-bright) !important;
  background: rgba(0, 0, 0, .4) !important;
  border-color: rgba(234, 210, 138, .34);
}
.gn-main .hero-content { position: relative; z-index: 1; max-width: 760px; }
.gn-main .min-vh-hero { min-height: auto; }

/* Home hero — the platform owns the copy; the theme supplies the orb
   photograph, the veil and the crop. The silk and gold ribbons read as
   texture behind the headline, with the orb clear of the text column. */
.gn-family-home .gn-main .cl-hero {
  min-height: 480px;
  display: flex;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  margin-top: 0;
  border-top: 0;
  background: var(--gn-black);
}
.gn-family-home .gn-main .cl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-orb.jpg");
  background-size: cover;
  background-position: 68% 58%;
  transform: scaleX(-1);
}
.gn-family-home .gn-main .cl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 6, 7, .93) 0%, rgba(6, 6, 7, .82) 30%, rgba(6, 6, 7, .42) 55%, rgba(6, 6, 7, .28) 74%, rgba(6, 6, 7, .58) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, .5) 0%, transparent 26%, transparent 68%, rgba(6, 6, 7, .62) 100%);
}
.gn-family-home .gn-main .cl-hero > * { position: relative; z-index: 1; }

.gn-main .cl-hero-panel {
  padding: 26px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid rgba(234, 210, 138, .42);
  background: rgba(10, 10, 11, .52);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.gn-main .cl-hero-panel h2 { font-size: 1.35rem; color: #fff; }
.gn-main .cl-hero-panel ul { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.gn-main .cl-hero-panel li { color: #d6cdb9; font-size: .92rem; }

.gn-main .cl-feature-band {
  margin: 30px calc(-1 * var(--gn-gutter)) 0;
  padding: 40px var(--gn-gutter);
  background: linear-gradient(180deg, rgba(191, 167, 93, .1), rgba(255, 255, 255, .4));
  border-top: 1px solid var(--gn-line);
}
.gn-main .cl-feature { padding: 24px; border-radius: var(--gn-radius-lg); border: 1px solid var(--gn-line); background: var(--gn-paper); height: 100%; }
.gn-main .cl-feature > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--gn-line-strong);
  background: rgba(191, 167, 93, .12);
  font-family: var(--gn-font-display);
  color: var(--gn-gold-deep);
}
.gn-main .cl-feature h3 { font-size: 1.15rem; }
.gn-main .cl-feature p { margin: 8px 0 0; color: var(--gn-muted); font-size: .92rem; }

.gn-main .cl-summary-card, .gn-main .cl-data-list { padding: 20px; }
.gn-main .cl-summary-card div, .gn-main .cl-data-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--gn-line-cool);
}
.gn-main .cl-summary-card div:last-child, .gn-main .cl-data-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.gn-main .cl-summary-card span, .gn-main .cl-data-list dt {
  font-family: var(--gn-font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}
.gn-main .cl-summary-card strong, .gn-main .cl-data-list dd { margin: 0; font-family: var(--gn-font-display); font-size: 1.15rem; color: var(--gn-ink); }

.gn-main .cl-sticky-card { position: sticky; top: 130px; }
.gn-main .cl-start-card { border-color: var(--gn-line-strong); box-shadow: var(--gn-shadow); }
.gn-main .cl-step-badge {
  display: inline-block;
  padding: .4em .8em;
  border-radius: var(--gn-radius-pill);
  border: 1px solid var(--gn-line-strong);
  background: rgba(191, 167, 93, .14);
  font-family: var(--gn-font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gn-gold-ink);
}

.gn-main .cl-module-list { display: grid; gap: 0; border-radius: var(--gn-radius); overflow: hidden; }
.gn-main .cl-module-row, .gn-main .cl-module-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--gn-paper);
  border: 1px solid var(--gn-line);
  border-bottom: 0;
  color: var(--gn-ink);
}
.gn-main .cl-module-list > :first-child { border-radius: var(--gn-radius) var(--gn-radius) 0 0; }
.gn-main .cl-module-list > :last-child { border-bottom: 1px solid var(--gn-line); border-radius: 0 0 var(--gn-radius) var(--gn-radius); }
.gn-main .cl-module-row:nth-child(even), .gn-main .cl-module-link:nth-child(even) { background: rgba(191, 167, 93, .05); }
.gn-main .cl-module-link:hover { background: rgba(191, 167, 93, .13); text-decoration: none; }
.gn-main .cl-module-row small { display: block; margin-top: 3px; font-size: .82rem; color: var(--gn-muted); }
.gn-main .cl-module-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid var(--gn-line-strong);
  background: linear-gradient(145deg, #1e1e21, #0c0c0d);
  color: var(--gn-gold-bright);
  font-family: var(--gn-font-display);
  font-size: 1.02rem;
}

.gn-main .cl-prose { max-width: 74ch; }
.gn-main .cl-prose h2, .gn-main .cl-prose h3 { margin-top: 1.8em; }
.gn-main .cl-prose p, .gn-main .cl-prose li { line-height: 1.78; color: var(--gn-ink-2); }
.gn-main .cl-prose img { border-radius: var(--gn-radius); border: 1px solid var(--gn-line); }
.gn-main .cl-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gn-gold);
  font-family: var(--gn-font-display);
  font-size: 1.15rem;
  color: var(--gn-ink);
}

/* == 18  Course player and course content ================================= */

.gn-family-course-player .gn-main, .gn-family-assessment .gn-main { padding-top: 0; }

.gn-main .cl-preview-bar, .gn-main .cl-preview-banner {
  margin: 0 calc(-1 * var(--gn-gutter)) 24px;
  padding: 12px var(--gn-gutter);
  background: linear-gradient(90deg, #2a2118, #1a1a1c 60%);
  border-bottom: 1px solid rgba(234, 210, 138, .35);
  color: #f1ead9;
  font-family: var(--gn-font-ui);
  font-size: .85rem;
}
.gn-main .cl-preview-bar strong { color: var(--gn-gold-bright); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.gn-main .cl-preview-bar form { margin: 0; }

.gn-main .cl-course-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 calc(-1 * var(--gn-gutter)) 26px;
  padding: 16px var(--gn-gutter);
  background: linear-gradient(180deg, var(--gn-ivory-deep), rgba(239, 233, 219, .4));
  border-bottom: 1px solid var(--gn-line);
}
.gn-main .cl-course-toolbar > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.gn-main .cl-course-toolbar > * > div { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gn-main .cl-course-toolbar a { font-family: var(--gn-font-ui); font-size: .82rem; font-weight: 600; letter-spacing: .05em; }
.gn-main .cl-course-toolbar span { font-family: var(--gn-font-display); font-size: 1.08rem; color: var(--gn-ink); }

.gn-main .cl-course-nav {
  position: sticky;
  top: 130px;
  padding: 18px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid var(--gn-line);
  background: linear-gradient(170deg, var(--gn-paper), var(--gn-ivory));
  box-shadow: var(--gn-shadow-sm);
}
.gn-main .cl-course-nav nav { display: grid; gap: 3px; margin-top: 14px; }
.gn-main .cl-course-nav nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--gn-radius);
  color: var(--gn-ink-2);
  font-size: .9rem;
  line-height: 1.4;
}
.gn-main .cl-course-nav nav a span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--gn-line);
  background: rgba(191, 167, 93, .12);
  font-family: var(--gn-font-ui);
  font-size: .74rem;
  font-weight: 600;
  color: var(--gn-gold-ink);
}
.gn-main .cl-course-nav nav a:hover { background: rgba(191, 167, 93, .12); text-decoration: none; }
.gn-main .cl-course-nav nav a.active {
  background: linear-gradient(145deg, #1d1d20, #0d0d0e);
  color: #f2ead9;
  box-shadow: var(--gn-shadow-sm);
}
.gn-main .cl-course-nav nav a.active span { background: var(--gn-gold); border-color: var(--gn-gold-bright); color: #1b1608; }

.gn-main .cl-module-header { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 2px solid var(--gn-line-strong); }
.gn-main .cl-outcomes {
  padding: 22px 24px;
  margin-bottom: 28px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid var(--gn-line-strong);
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .07) 0 12px, transparent 12px 42px),
    linear-gradient(180deg, var(--gn-paper), rgba(191, 167, 93, .1));
}
.gn-main .cl-outcomes h2, .gn-main .cl-outcomes h3 { margin-top: 0; font-size: 1.15rem; }
.gn-main .cl-outcomes ul, .gn-main .outcomes ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.gn-main .cl-outcomes li { color: var(--gn-ink-2); }

/* Imported course CSS is scoped by the platform beneath this wrapper. These
   rules are defaults only, so a course can still style its own content. */
.gn-main .cl-course-content { max-width: 78ch; font-size: 1rem; line-height: 1.78; color: var(--gn-ink-2); }
.gn-main .cl-course-content > * + * { margin-top: 1.1em; }
.gn-main .cl-course-content h2, .gn-main .cl-course-content h3, .gn-main .cl-course-content h4 {
  margin-top: 2em;
  color: var(--gn-ink);
}
.gn-main .cl-course-content img { border-radius: var(--gn-radius); border: 1px solid var(--gn-line); }
.gn-main .cl-course-content table { border: 1px solid var(--gn-line); border-radius: var(--gn-radius); overflow: hidden; }
.gn-main .cl-course-content pre, .gn-main .cl-content-terminal {
  padding: 16px 18px;
  border-radius: var(--gn-radius);
  border: 1px solid #2c2c30;
  background: #101012;
  color: #dcd5c4;
  font-family: var(--gn-font-mono);
  font-size: .86rem;
  overflow: auto;
}
.gn-main .cl-course-content code { font-family: var(--gn-font-mono); font-size: .88em; color: var(--gn-gold-ink); }
.gn-main .cl-course-content pre code { color: inherit; }
.gn-main .cl-course-content blockquote {
  margin: 1.5em 0;
  padding-left: 20px;
  border-left: 3px solid var(--gn-gold);
  color: var(--gn-ink);
}
.gn-main .cl-course-content .figure, .gn-main .cl-course-content .fig-cap {
  font-size: .86rem;
  color: var(--gn-muted);
}

.gn-main .cl-module-summary {
  padding: 20px 22px;
  margin-top: 30px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid var(--gn-line);
  background: linear-gradient(180deg, var(--gn-paper), var(--gn-ivory));
}
.gn-main .cl-module-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--gn-line-strong);
}

/* == 19  Assessments and results ========================================== */

.gn-main .cl-assessment-section { max-width: 860px; }
.gn-main .cl-section-heading { font-family: var(--gn-font-display); font-size: 1.3rem; margin: 32px 0 16px; }

.gn-main .cl-question, .gn-main .cl-question-focus {
  padding: 24px;
  margin-bottom: 18px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-sm);
}
.gn-main .cl-question legend, .gn-main .cl-question-text {
  font-family: var(--gn-font-display);
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--gn-ink);
  padding: 0;
  margin-bottom: 16px;
}
.gn-main .cl-question legend small { display: block; margin-top: 6px; font-family: var(--gn-font-ui); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gn-gold-ink); }
.gn-main .cl-question-number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--gn-line-strong);
  background: linear-gradient(145deg, #1e1e21, #0c0c0d);
  color: var(--gn-gold-bright);
  font-family: var(--gn-font-display);
  font-size: .95rem;
}

/* Option layout is enforced by catto-platform.css; only skin it here. */
.gn-main .cl-option {
  padding: 13px 15px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.gn-main .cl-option:hover { border-color: var(--gn-gold); background: rgba(191, 167, 93, .09); }
.gn-main .cl-option:has(input:checked) {
  border-color: var(--gn-gold-deep);
  background: rgba(191, 167, 93, .17);
  box-shadow: inset 3px 0 0 var(--gn-gold-deep);
}
.gn-main .cl-option:focus-within { box-shadow: 0 0 0 3px rgba(191, 167, 93, .3); }

.gn-main .cl-countdown, .gn-main .cl-assessment-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border-radius: var(--gn-radius);
  border: 1px solid var(--gn-line-strong);
  background: linear-gradient(145deg, #1d1d20, #0d0d0e);
  color: var(--gn-gold-bright);
  font-family: var(--gn-font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.gn-main .cl-assessment-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid var(--gn-line-strong);
  background: linear-gradient(180deg, rgba(191, 167, 93, .14), var(--gn-paper));
}
.gn-main .cl-assessment-submit span { color: var(--gn-muted); font-size: .88rem; }

.gn-main .cl-result-score, .gn-main .cl-result-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding: 30px;
  margin-bottom: 26px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid rgba(191, 167, 93, .34);
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .1) 0 14px, transparent 14px 48px),
    linear-gradient(125deg, #16161a, #23231f 55%, #0d0d0e);
  color: #f2ead9;
}
.gn-main .cl-result-score strong, .gn-main .cl-result-ring strong {
  font-family: var(--gn-font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gn-gold-bright);
}
.gn-main .cl-result-score span, .gn-main .cl-result-ring span {
  font-family: var(--gn-font-ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #cec5b2;
}
.gn-main .cl-result-score h1, .gn-main .cl-result-score h2, .gn-main .cl-result-hero h2 { color: #fff; }
.gn-main .cl-result-ring {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(234, 210, 138, .5);
  background: rgba(0, 0, 0, .38);
}
.gn-main .cl-grade-chip {
  display: inline-block;
  padding: .4em .9em;
  border-radius: var(--gn-radius-pill);
  border: 1px solid rgba(234, 210, 138, .5);
  background: rgba(191, 167, 93, .2);
  font-family: var(--gn-font-display);
  font-size: 1.1rem;
  color: var(--gn-gold-bright);
}

.gn-main .cl-answer-review { display: grid; gap: 14px; }
.gn-main .cl-answer-review article {
  padding: 18px 20px;
  border: 1px solid var(--gn-line);
  border-left: 4px solid var(--gn-muted);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
}
.gn-main .cl-answer-review article.correct { border-left-color: var(--gn-success); background: var(--gn-success-bg); }
.gn-main .cl-answer-review article.incorrect { border-left-color: var(--gn-danger); background: var(--gn-danger-bg); }
.gn-main .cl-explanation { margin-top: 10px; font-size: .9rem; color: var(--gn-ink-2); }

.gn-main .cl-question-editor, .gn-main .cl-option-editor {
  padding: 20px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  margin-bottom: 14px;
}
.gn-main .cl-option-editor { background: var(--gn-ivory); padding: 14px 16px; }
.gn-main .cl-rich-editor, .gn-main .ck.ck-editor { border-radius: var(--gn-radius); }
.gn-main .ck-editor__editable_inline { min-height: 220px; background: #fff; }

/* == 20  Certificates ===================================================== */

.gn-family-certificate .gn-main { padding-top: 34px; }
.gn-main .cl-certificate {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px;
  border-radius: var(--gn-radius-plate);
  background: linear-gradient(150deg, #16161a, #23231f 48%, #0d0d0e);
  box-shadow: var(--gn-shadow-lg);
}
.gn-main .cl-certificate-border {
  padding: clamp(28px, 5vw, 62px);
  border: 2px solid rgba(234, 210, 138, .6);
  border-radius: var(--gn-radius-lg);
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .09) 0 14px, transparent 14px 50px),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  text-align: center;
  color: #f2ead9;
}
.gn-main .cl-certificate h1 {
  font-family: var(--gn-font-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--gn-gold-bright);
  letter-spacing: .02em;
}
.gn-main .cl-certificate h2 { font-family: var(--gn-font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); color: #fff; }
.gn-main .cl-certificate-copy { max-width: 62ch; margin: 18px auto; color: #cec5b2; line-height: 1.8; }
.gn-main .cl-certificate small, .gn-main .cl-certificate-signature small {
  font-family: var(--gn-font-ui);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a89f8d;
}
.gn-main .cl-certificate-grade {
  display: inline-block;
  margin-top: 18px;
  padding: .5em 1.2em;
  border-radius: var(--gn-radius-pill);
  border: 1px solid rgba(234, 210, 138, .55);
  background: rgba(191, 167, 93, .18);
  font-family: var(--gn-font-display);
  font-size: 1.25rem;
  color: var(--gn-gold-bright);
}
.gn-main .cl-certificate-signature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 26px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(234, 210, 138, .3);
}
.gn-main .cl-certificate-signature strong { display: block; font-family: var(--gn-font-display); font-size: 1.1rem; color: #fff; }
.gn-main .cl-certificate-preview-frame {
  padding: 20px;
  border: 1px dashed var(--gn-line-strong);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-ivory);
}
.gn-main .cl-placeholder-list code {
  padding: .2em .45em;
  border-radius: 5px;
  background: rgba(191, 167, 93, .16);
  color: var(--gn-gold-ink);
}

/* == 21  Account and company ============================================== */

.gn-main .card > .profile-head:only-child { border-radius: var(--gn-radius-lg); }
.gn-main .profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 26px;
  border-radius: var(--gn-radius-lg) var(--gn-radius-lg) 0 0;
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .1) 0 14px, transparent 14px 48px),
    linear-gradient(125deg, #16161a, #23231f 60%, #0d0d0e);
  color: #f2ead9;
}
.gn-main .profile-head .avatar { width: 72px; height: 72px; font-size: 1.5rem; border-color: rgba(234, 210, 138, .6); }
.gn-main .profile-meta h2 { margin: 0; font-family: var(--gn-font-display); font-size: 1.7rem; color: #fff; }
.gn-main .profile-meta p { margin: 6px 0 0; color: #c3bbab; }
.gn-main .profile-head .badge {
  color: var(--gn-gold-bright) !important;
  background: rgba(0, 0, 0, .4) !important;
  border-color: rgba(234, 210, 138, .35);
}

.gn-main .profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.gn-main .profile-summary-item {
  padding: 16px;
  text-align: center;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: linear-gradient(170deg, var(--gn-paper), var(--gn-ivory));
}
.gn-main .profile-summary-item strong { display: block; font-family: var(--gn-font-display); font-size: 1.7rem; color: var(--gn-ink); }

.gn-main .person {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.gn-main .person .avatar { width: 40px; height: 40px; border-radius: 11px; font-size: .88rem; }
.gn-main .person strong { display: block; font-weight: 600; }

.gn-main .timeline { display: grid; gap: 0; }
.gn-main .timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px 0 14px 4px;
  border-bottom: 1px solid var(--gn-line-cool);
}
.gn-main .timeline-item:last-child { border-bottom: 0; }
.gn-main .timeline-dot {
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gn-gold);
  box-shadow: 0 0 0 4px rgba(191, 167, 93, .18);
}
.gn-main .timeline-item strong { font-weight: 600; }
.gn-main .timeline-item p { margin: 3px 0 0; font-size: .84rem; color: var(--gn-muted); }

.gn-main .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gn-main .quick-action {
  display: block;
  padding: 18px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gn-main .quick-action:hover { transform: translateY(-2px); border-color: var(--gn-gold); box-shadow: var(--gn-shadow); text-decoration: none; }
.gn-main .quick-action strong { display: block; font-family: var(--gn-font-display); font-size: 1.1rem; color: var(--gn-ink); }
.gn-main .quick-action span { display: block; margin-top: 5px; font-size: .85rem; color: var(--gn-muted); }

/* == 22  Platform administration ========================================== */

.gn-main .admin-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.gn-main .admin-nav {
  position: sticky;
  top: 130px;
  display: grid;
  gap: 3px;
  padding: 14px;
  border-radius: var(--gn-radius-lg);
  border: 1px solid rgba(191, 167, 93, .3);
  background:
    repeating-linear-gradient(-14deg, rgba(191, 167, 93, .08) 0 14px, transparent 14px 48px),
    linear-gradient(180deg, #1c1c1f, #0e0e0f);
  box-shadow: var(--gn-shadow);
}
.gn-main .admin-nav button, .gn-main .admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--gn-radius);
  background: transparent;
  color: var(--gn-on-dark-muted);
  text-align: left;
  font-family: var(--gn-font-ui);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition: color .16s ease, background .16s ease;
}
.gn-main .admin-nav button:hover, .gn-main .admin-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  text-decoration: none;
}
.gn-main .admin-nav button.active, .gn-main .admin-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(191, 167, 93, .28), rgba(191, 167, 93, .1));
  border-color: rgba(234, 210, 138, .5);
  box-shadow: inset 3px 0 0 var(--gn-gold-bright);
}

.gn-main .admin-workspace { min-width: 0; }
.gn-main .admin-panel, .gn-main .admin-panel-wide { min-width: 0; }
.gn-main .admin-panel > .grid,
.gn-main .admin-panel > .card,
.gn-main .admin-panel > .table-wrap,
.gn-main .admin-panel > .toolbar,
.gn-main .admin-panel > .notice { margin-bottom: 22px; }
.gn-main .admin-panel > *:last-child { margin-bottom: 0; }

.gn-main .admin-reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.gn-main .admin-settings-layout, .gn-main .admin-person-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.gn-main .admin-person-side { position: sticky; top: 130px; }
.gn-main .admin-person-records > .card { margin-bottom: 18px; }
.gn-main .admin-person-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.gn-main .admin-person-summary { display: grid; gap: 10px; }
.gn-main .admin-wide-card { padding: 22px; }
.gn-main .theme-explainer-grid, .gn-main .help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.gn-main .role-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gn-main .role-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
  cursor: pointer;
}
.gn-main .role-check:hover { border-color: var(--gn-gold); background: rgba(191, 167, 93, .08); }
.gn-main .role-check:has(input:checked) { border-color: var(--gn-gold-deep); background: rgba(191, 167, 93, .15); }
.gn-main .role-check input { margin-top: 3px; }
.gn-main .role-check span { display: block; font-weight: 600; font-size: .92rem; color: var(--gn-ink); }
.gn-main .role-check small { display: block; margin-top: 3px; font-size: .8rem; color: var(--gn-muted); }

.gn-main .editor-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gn-main .editor-choice {
  display: block;
  padding: 18px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: var(--gn-paper);
  cursor: pointer;
}
.gn-main .editor-choice:has(input:checked) { border-color: var(--gn-gold-deep); background: rgba(191, 167, 93, .13); box-shadow: var(--gn-shadow-sm); }

.gn-main .activity-details pre, .gn-main .audit-metadata {
  padding: 14px 16px;
  border-radius: var(--gn-radius);
  background: #101012;
  color: #dcd5c4;
  font-family: var(--gn-font-mono);
  font-size: .82rem;
  overflow: auto;
}
.gn-main .diagnostics-panel > summary { font-family: var(--gn-font-display); }
.gn-main .cl-import-module summary { font-family: var(--gn-font-ui); font-size: .92rem; }
.gn-main .cl-import-preview { border: 1px solid var(--gn-line); border-radius: var(--gn-radius-lg); padding: 18px; background: var(--gn-paper); }

/* == 23  Authentication, contact, help, errors ============================ */

.gn-family-auth .gn-main, .gn-family-error .gn-main { max-width: 720px; margin: 0 auto; }
.gn-main .contact-form, .gn-main .contact-card { max-width: 720px; }
.gn-main .cl-narrow { max-width: 680px; }
.gn-main .cl-medium { max-width: 860px; }

.gn-family-error .gn-main { text-align: center; padding-top: 50px; padding-bottom: 60px; }
.gn-family-error .gn-main h1, .gn-family-error .gn-main .display-1 { color: var(--gn-gold-deep); }

.gn-main .cl-help-accordion { display: grid; gap: 10px; }
.gn-main .s-summary { font-family: var(--gn-font-ui); font-weight: 600; }

/* == 24  Responsive ======================================================= */

@media (max-width: 1200px) {
  .gn-main .admin-shell { grid-template-columns: 1fr; }
  .gn-main .admin-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 6px;
  }
  .gn-main .admin-nav button, .gn-main .admin-nav a { white-space: nowrap; }
  .gn-main .admin-settings-layout, .gn-main .admin-person-layout { grid-template-columns: 1fr; }
  .gn-main .admin-person-side, .gn-main .cl-sticky-card, .gn-main .cl-course-nav { position: static; }
  .gn-main .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .gn-nav-toggle { display: inline-flex; }
  .gn-primary {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    margin: 12px 0 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .gn-nav-open .gn-primary { display: flex; }
  .gn-nav-inner { flex-wrap: wrap; }
  .gn-nav-link { justify-content: flex-start; width: 100%; border-radius: var(--gn-radius); }
  .gn-menu { width: 100%; }
  .gn-menu-panel {
    position: static;
    width: 100%;
    margin: 4px 0 6px;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
  }
  .gn-menu-panel a { padding-left: 26px; }
  .gn-nav-form { width: 100%; }
  .gn-caret { margin-left: auto; }
  .gn-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .gn-main .grid-3, .gn-main .grid-2, .gn-main .form-grid { grid-template-columns: 1fr; }
  .gn-main .cl-result-score, .gn-main .cl-result-hero { gap: 18px; padding: 22px; }
}

@media (max-width: 760px) {
  .gn-body { --gn-shell-width: min(1400px, 100% - 20px); --gn-gutter: 18px; }
  .gn-stage { padding: 14px 0 30px; }
  .gn-plate { border-radius: 18px; }
  .gn-main .grid-4 { grid-template-columns: 1fr; }
  .gn-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .gn-footer-inner { padding: 38px var(--gn-gutter) 22px; }
  .gn-main .section-head { flex-direction: column; align-items: flex-start; }
  .gn-main .search-wrap { max-width: 100%; }
  .gn-main thead th { position: static; }
  .gn-main .cl-hero, .gn-main .cl-page-head, .gn-main .cl-course-head, .gn-main .hero { padding: 28px var(--gn-gutter); }
  .gn-main .stat-value, .gn-main .cl-stat strong { font-size: 1.9rem; }
  .gn-main .modal-backdrop { padding: 12px; }
  .modal-body, .modal-head, .modal-foot { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 520px) {
  .gn-brand-copy small { display: none; }
  .gn-main .btn { width: auto; }
  .gn-main .list-item, .gn-main .cl-assessment-submit, .gn-main .cl-module-actions { flex-direction: column; align-items: stretch; }
  .gn-main .list-item .btn, .gn-main .cl-module-actions .btn { width: 100%; }
  .gn-social a { width: 44px; height: 44px; }
}

/* == 25  Print, motion, focus ============================================= */

.gn-body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gn-gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
.gn-main :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--gn-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gn-body *, .gn-body *::before, .gn-body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gn-main .card:hover, .gn-main .course-card:hover, .gn-main .quick-action:hover,
  .gn-main .cl-course-card:hover, .gn-social a:hover { transform: none; }
}

@media print {
  .gn-canvas, .gn-header, .gn-footer, .gn-plate-cap,
  .gn-skip, .gn-flash-stack, .flash-stack, .cl-preview-bar,
  .gn-main .admin-nav, .gn-main .row-actions, .gn-main .toolbar,
  .gn-main .gn-table-search { display: none !important; }
  .gn-body { background: #fff !important; color: #000; }
  .gn-stage { padding: 0; }
  .gn-plate {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
  .gn-plate::before { display: none; }
  .gn-main { padding: 0; }
  .gn-main .card, .gn-main .table-wrap { box-shadow: none; break-inside: avoid; }
  .gn-main .cl-certificate {
    background: #fff;
    box-shadow: none;
    padding: 0;
  }
  .gn-main .cl-certificate-border { border-color: #8d7340; background: #fff; }
  .gn-main .cl-certificate h1, .gn-main .cl-certificate-grade { color: #6f5a2f; }
  .gn-main .cl-certificate h2, .gn-main .cl-certificate-signature strong { color: #000; }
  .gn-main .cl-certificate-copy, .gn-main .cl-certificate small { color: #333; }
}

/* == 26  Gilded Noir 1.1.1 targeted refinements ===========================
   These rules deliberately preserve the accepted 1.1.0 composition and
   change only the defects identified during browser review. */

/* Navigation icons remain decorative, but they must be clearly visible. */
.gn-nav-link .gn-icon,
.gn-menu-panel a .gn-icon {
  color: var(--gn-gold-bright);
  opacity: 1;
  width: 18px;
  height: 18px;
}
.gn-nav-link .gn-icon { filter: drop-shadow(0 0 4px rgba(234, 210, 138, .16)); }
.gn-caret { color: var(--gn-gold); opacity: .9; }

/* The consolidated Administration markup already contains its own aria-hidden
   toggle glyph. Gilded Noir uses the theme chevron generated by summary::after,
   so hide the platform glyph rather than showing two arrows. */
.gn-main .cl-admin-section-summary .cl-admin-section-toggle { display: none !important; }
.gn-main .cl-admin-workspace { display: grid; gap: 12px; }
.gn-main .cl-admin-workspace > .cl-admin-section { margin-bottom: 0; }
.gn-main .cl-admin-section-summary {
  align-items: center;
  justify-content: flex-start;
}
.gn-main .cl-admin-section-summary::after { margin-left: auto; }
.gn-main .cl-admin-section-title { font-weight: 600; }
.gn-main .cl-admin-section-description {
  margin-left: 2px;
  color: var(--gn-muted);
  font-family: var(--gn-font-body);
  font-size: .84rem;
  font-weight: 400;
}

/* Home hero: preserve the polished sphere as the focal subject. On desktop the
   artwork remains on the left while both text blocks occupy the right column.
   No copy or panel is allowed to cover the sphere. */
.gn-family-home .gn-main > .cl-hero {
  margin-left: 0;
  margin-right: 0;
  border: 1px solid rgba(191, 167, 93, .34);
  border-radius: 24px;
  box-shadow: 0 18px 38px rgba(21, 17, 9, .14);
}
.gn-family-home .gn-main .cl-hero {
  min-height: 540px;
  padding: 36px clamp(18px, 2.8vw, 36px);
}
.gn-family-home .gn-main .cl-hero::before {
  background-position: center center;
  transform: none;
}
.gn-family-home .gn-main .cl-hero::after {
  background:
    linear-gradient(270deg, rgba(6, 6, 7, .96) 0%, rgba(6, 6, 7, .86) 40%, rgba(6, 6, 7, .46) 57%, rgba(6, 6, 7, .10) 72%, rgba(6, 6, 7, .03) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, .25) 0%, transparent 28%, transparent 70%, rgba(6, 6, 7, .48) 100%);
}
.gn-family-home .gn-main .cl-hero .row {
  display: grid;
  grid-template-columns: minmax(300px, 43%) minmax(0, 57%);
  align-content: center;
  align-items: center !important;
  min-height: 468px;
}
.gn-family-home .gn-main .cl-hero .row > .col-lg-7,
.gn-family-home .gn-main .cl-hero .row > .col-lg-5 {
  width: 100%;
  max-width: none;
  padding-left: clamp(18px, 3vw, 46px);
  padding-right: 0;
}
.gn-family-home .gn-main .cl-hero .row > .col-lg-7 {
  grid-column: 1;
  padding-top: 16px !important;
  padding-bottom: 10px !important;
}
.gn-family-home .gn-main .cl-hero .row > .col-lg-5 {
  grid-column: 2;
  display: block !important;
  padding-top: 0;
  padding-bottom: 16px;
}
.gn-family-home .gn-main .cl-hero .display-2 {
  font-size: clamp(2.15rem, 3.4vw, 3.2rem);
  max-width: 15ch;
}
.gn-family-home .gn-main .cl-hero .lead { max-width: 50ch; }
.gn-family-home .gn-main .cl-hero-panel {
  margin-top: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(8, 8, 9, .66);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.gn-family-home .gn-main .cl-hero-panel h2 {
  margin: 7px 0 8px;
  font-size: 1.12rem;
}
.gn-family-home .gn-main .cl-hero-panel ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 5px;
  margin-top: 8px;
}
.gn-family-home .gn-main .cl-hero-panel li { font-size: .82rem; }

/* Contact page head is one of the dark page bands. Its heading must inherit the
   light-on-dark palette just like the other platform page-head variants. */
.gn-main .contact-page-head h1,
.gn-main .contact-page-head h2 { color: #fff; }
.gn-main .contact-page-head p { color: #d6cdb9; }
.gn-main .contact-page-head .eyebrow { color: var(--gn-gold-bright); }

/* Footer artwork should be visible rather than buried below two dark veils.
   The source image stays in an isolated artwork layer so a future theme release
   can replace it without altering footer content/layout. */
.gn-footer-art {
  filter: brightness(1.28) contrast(1.03) saturate(1.06);
  background-position: 58% 64%;
}
.gn-footer-veil {
  background:
    linear-gradient(180deg, rgba(8, 8, 9, .58) 0%, rgba(8, 8, 9, .22) 43%, rgba(8, 8, 9, .55) 100%),
    linear-gradient(90deg, rgba(8, 8, 9, .82) 0%, rgba(8, 8, 9, .46) 30%, rgba(8, 8, 9, .06) 64%, rgba(8, 8, 9, .24) 100%);
}
.gn-social a {
  color: var(--gn-gold-bright);
  border-color: rgba(234, 210, 138, .48);
}
.gn-social-icon {
  width: 23px;
  height: 23px;
  color: currentColor;
  filter: drop-shadow(0 0 5px rgba(234, 210, 138, .18));
}
.gn-social a:hover { color: #fff2c8; }

@media (max-width: 991.98px) {
  /* On narrow screens the artwork gets its own visual zone above the copy so
     the sphere is never used as a text background. Bootstrap already hides the
     secondary learning panel below lg. */
  .gn-family-home .gn-main .cl-hero {
    min-height: 0;
    padding: 260px 18px 26px;
    background: var(--gn-black);
  }
  .gn-family-home .gn-main .cl-hero::before {
    background-size: auto 320px;
    background-repeat: no-repeat;
    background-position: 22% 18px;
  }
  .gn-family-home .gn-main .cl-hero::after {
    background: linear-gradient(180deg, rgba(6, 6, 7, .02) 0 35%, rgba(6, 6, 7, .68) 55%, rgba(6, 6, 7, .96) 72% 100%);
  }
  .gn-family-home .gn-main .cl-hero .row {
    display: block;
    min-height: 0;
  }
  .gn-family-home .gn-main .cl-hero .row > .col-lg-7 {
    width: 100%;
    padding: 0 !important;
  }
  .gn-family-home .gn-main .cl-hero .row > .col-lg-5 { display: none !important; }
  .gn-family-home .gn-main .cl-hero .display-2 {
    font-size: clamp(2rem, 8vw, 2.7rem);
    max-width: 18ch;
  }
}

@media (max-width: 560px) {
  .gn-family-home .gn-main > .cl-hero { border-radius: 18px; }
  .gn-family-home .gn-main .cl-hero { padding-top: 225px; }
  .gn-family-home .gn-main .cl-hero::before {
    background-size: auto 270px;
    background-position: 18% 12px;
  }
  .gn-main .cl-admin-section-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .gn-main .cl-admin-section-description {
    flex-basis: calc(100% - 28px);
    margin-left: 0;
  }
}

/* == 27  Gilded Noir 1.1.2 hero geometry and type =========================
   The 1.1.0/1.1.1 visual system is frozen. These rules only correct the home
   hero's plate fit, corner geometry and type scale. The polished sphere remains
   protected from text and panel overlap. */

/* The platform main column carries horizontal gutters. Pull only the home hero
   back across those gutters so the artwork reaches both edges of the boxed
   plate. Do not narrow it with an inner max-width or side margin. */
.gn-family-home .gn-main > .cl-hero {
  width: auto;
  margin-left: calc(-1 * var(--gn-gutter));
  margin-right: calc(-1 * var(--gn-gutter));
  border-left: 0;
  border-right: 0;
  border-radius: 24px 24px 0 0;
}

/* Increase the marketing hierarchy without changing the right-column layout
   that keeps the sphere visible on the left. */
.gn-family-home .gn-main .cl-hero .display-2 {
  font-size: clamp(2.45rem, 3.9vw, 3.65rem);
  line-height: 1.04;
  max-width: 15ch;
}
.gn-family-home .gn-main .cl-hero .lead {
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.62;
}
.gn-family-home .gn-main .cl-hero .cl-kicker {
  font-size: .76rem;
}
.gn-family-home .gn-main .cl-hero-panel {
  padding: 22px 24px;
}
.gn-family-home .gn-main .cl-hero-panel .cl-kicker {
  font-size: .74rem;
}
.gn-family-home .gn-main .cl-hero-panel h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.28rem, 1.7vw, 1.5rem);
  line-height: 1.2;
}
.gn-family-home .gn-main .cl-hero-panel ul {
  row-gap: 7px;
}
.gn-family-home .gn-main .cl-hero-panel li {
  font-size: .9rem;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .gn-family-home .gn-main > .cl-hero {
    border-radius: 22px 22px 0 0;
  }
  .gn-family-home .gn-main .cl-hero .display-2 {
    font-size: clamp(2.2rem, 7.8vw, 3rem);
  }
}

@media (max-width: 560px) {
  .gn-family-home .gn-main > .cl-hero {
    border-radius: 18px 18px 0 0;
  }
}



/* == 28  Gilded Noir 1.1.3 imagery + current workspace contracts =========
   1.1.2 remains the visual baseline. These rules change only the supplied
   imagery, current workspace headers, footer navigation and the home hero's
   composition. */

/* Home: the photograph is a full-width image stage at the top of the ivory
   plate. Platform-owned text follows in a separate dark information band, so
   the abacus, scales and parchment are not obscured by copy. */
.gn-family-home .gn-main > .cl-hero {
  width: calc(100% + (var(--gn-gutter) * 2));
  max-width: none;
  margin-left: calc(var(--gn-gutter) * -1);
  margin-right: calc(var(--gn-gutter) * -1);
  margin-top: -30px;
  padding: clamp(450px, 48vw, 650px) var(--gn-gutter) 46px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: #0d0d0e;
}
.gn-family-home .gn-main .cl-hero::before {
  inset: 0 0 auto 0;
  height: clamp(430px, 45vw, 620px);
  background: url("../img/hero-abacus.jpg") center center / cover no-repeat;
  transform: none;
  opacity: 1;
}
.gn-family-home .gn-main .cl-hero::after {
  inset: auto 0 0 0;
  height: 190px;
  background: linear-gradient(180deg,rgba(13,13,14,0),rgba(13,13,14,.96) 40%,#0d0d0e 78%);
}
.gn-family-home .gn-main .cl-hero .row {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.75fr);
  gap: clamp(26px,4vw,64px);
  align-items: end;
  margin: 0;
}
.gn-family-home .gn-main .cl-hero .row > [class*="col-"] { width: auto; max-width: none; padding: 0; }
.gn-family-home .gn-main .cl-hero .display-2 { font-size: clamp(2.75rem,4.4vw,4.35rem); line-height: .98; max-width: 16ch; }
.gn-family-home .gn-main .cl-hero .lead { font-size: clamp(1.08rem,1.4vw,1.3rem); line-height: 1.65; max-width: 56ch; }
.gn-family-home .gn-main .cl-hero-panel {
  background: rgba(22,20,16,.82);
  border: 1px solid rgba(217,183,92,.42);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
  padding: 24px 26px;
  backdrop-filter: blur(8px);
}
.gn-family-home .gn-main .cl-hero-panel h2 { font-size: clamp(1.5rem,2vw,1.9rem); }
.gn-family-home .gn-main .cl-hero-panel li { font-size: .94rem; line-height: 1.55; }

/* Account, Company and Administration use the retained serpent only as a
   restrained header texture, not as a dominant footer subject. */
:is(.gn-family-admin,.gn-family-account,.gn-family-company) .gn-main > .section-head:first-child,
.gn-family-admin .gn-main > .cl-admin-section-page-head:first-child,
.gn-family-company .gn-main .cl-company-section > .section-head:first-child {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #151515;
  color: #fff;
  border-color: rgba(200,164,73,.4);
}
:is(.gn-family-admin,.gn-family-account,.gn-family-company) .gn-main > .section-head:first-child::before,
.gn-family-admin .gn-main > .cl-admin-section-page-head:first-child::before,
.gn-family-company .gn-main .cl-company-section > .section-head:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/section-serpent.jpg") 56% 43% / cover no-repeat;
  opacity: .32; filter: saturate(.75) contrast(1.08);
}
:is(.gn-family-admin,.gn-family-account,.gn-family-company) .gn-main > .section-head:first-child::after,
.gn-family-admin .gn-main > .cl-admin-section-page-head:first-child::after,
.gn-family-company .gn-main .cl-company-section > .section-head:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,rgba(10,10,10,.93),rgba(10,10,10,.62) 60%,rgba(10,10,10,.78));
}
:is(.gn-family-admin,.gn-family-account,.gn-family-company) .section-head:first-child :is(h1,h2,p,.eyebrow),
.gn-family-admin .cl-admin-section-page-head:first-child :is(h1,h2,p,.eyebrow) { color: inherit; }

/* One visible disclosure marker only. Core emits .cl-admin-section-toggle;
   suppress browser-native markers so Account/Company/Admin accordions match. */
.cl-admin-section > summary { list-style: none; }
.cl-admin-section > summary::-webkit-details-marker { display: none; }
.cl-admin-section > summary::marker { content: ""; }

/* Footer: polished sphere replaces the serpent, with enough illumination to
   remain a visual element rather than disappearing beneath a dark veil. */
.gn-footer-art {
  background-image: url("../img/footer-orb.jpg");
  background-position: 22% 52%;
  background-size: cover;
  filter: brightness(.9) saturate(1.02);
  opacity: .9;
}
.gn-footer-veil {
  background: linear-gradient(90deg,rgba(8,8,9,.78),rgba(8,8,9,.70) 48%,rgba(8,8,9,.88));
}
.gn-footer-grid-v113 { grid-template-columns: minmax(0,1.45fr) minmax(180px,.65fr) minmax(220px,.8fr); }
.gn-footer-links ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 18px; }
.gn-social-icon,.gn-icon { stroke: currentColor; fill: none; opacity: 1; }

/* Activity filters should consume the available application width instead of
   being squeezed to the right by theme toolbar styling. */
.gn-main .activity-filters { width: 100%; max-width: none; }
.gn-main .activity-filters form { width: 100%; }

@media (max-width: 991.98px) {
  .gn-family-home .gn-main > .cl-hero {
    padding-top: clamp(360px,68vw,520px);
    border-radius: 20px 20px 0 0;
  }
  .gn-family-home .gn-main .cl-hero::before { height: clamp(350px,64vw,500px); }
  .gn-family-home .gn-main .cl-hero .row { grid-template-columns: 1fr; }
  .gn-family-home .gn-main .cl-hero .row > .col-lg-7,
  .gn-family-home .gn-main .cl-hero .row > .col-lg-5 { grid-column: 1; }
  .gn-family-home .gn-main .cl-hero .row > .col-lg-5 { display: block !important; }
  .gn-footer-grid-v113 { grid-template-columns: 1fr 1fr; }
  .gn-footer-lead { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .gn-family-home .gn-main > .cl-hero { padding-top: 320px; border-radius: 16px 16px 0 0; padding-bottom: 32px; }
  .gn-family-home .gn-main .cl-hero::before { height: 300px; background-position: 50% 50%; }
  .gn-family-home .gn-main .cl-hero .display-2 { font-size: clamp(2.2rem,11vw,3rem); }
  .gn-footer-grid-v113 { grid-template-columns: 1fr; }
  .gn-footer-links ul { grid-template-columns: 1fr 1fr; }
}


/* == 29  Gilded Noir 1.1.3 targeted homepage + modal repair ===============
   Preserve the existing 1.1.3 design. These rules change only the explicitly
   requested homepage composition and Company modal usability. */

/* The system name belongs directly on the hero artwork. Keep it large,
   sans-serif and legible without changing the platform-owned marketing copy. */
.gn-family-home .gn-main > .gn-home-system-name {
  position: absolute;
  z-index: 5;
  top: clamp(74px, 7.5vw, 118px);
  left: calc(var(--gn-gutter) * -1);
  width: calc(100% + (var(--gn-gutter) * 2));
  padding: 0 clamp(34px, 5.5vw, 86px);
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(3.15rem, 6vw, 6.25rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 3px 10px rgba(0,0,0,.92), 0 12px 34px rgba(0,0,0,.72);
  pointer-events: none;
}

/* Keep the existing image stage. The information band beneath it retains its
   black character but uses one thin, equal-width diagonal texture throughout. */
.gn-family-home .gn-main > .cl-hero {
  background: repeating-linear-gradient(
    45deg,
    #0c0c0d 0 8px,
    #151516 8px 16px
  );
}

/* The image overlay now exists only to protect title legibility on the artwork;
   it no longer creates a large gradient wash through the information band. */
.gn-family-home .gn-main .cl-hero::after {
  inset: 0 0 auto 0;
  height: clamp(430px, 45vw, 620px);
  background: linear-gradient(90deg, rgba(5,5,6,.68) 0%, rgba(5,5,6,.34) 36%, rgba(5,5,6,.08) 62%, rgba(5,5,6,.02) 100%);
}

/* The two platform-owned information blocks are peers: one balanced row,
   rather than a stacked column, on desktop widths. */
.gn-family-home .gn-main .cl-hero .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}
.gn-family-home .gn-main .cl-hero .row > .col-lg-7,
.gn-family-home .gn-main .cl-hero .row > .col-lg-5 {
  min-width: 0;
}

/* Company create/edit forms are substantial administration forms. Give them
   enough working width while keeping the core-owned viewport scrolling. */
.gn-body .modal-card {
  width: min(900px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}

@media (max-width: 991.98px) {
  .gn-family-home .gn-main > .gn-home-system-name {
    top: clamp(62px, 9vw, 92px);
    padding-inline: clamp(24px, 6vw, 52px);
    font-size: clamp(2.7rem, 8vw, 4.6rem);
  }
  .gn-family-home .gn-main .cl-hero .row {
    grid-template-columns: 1fr;
  }
  .gn-family-home .gn-main .cl-hero .row > .col-lg-7,
  .gn-family-home .gn-main .cl-hero .row > .col-lg-5 {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .gn-family-home .gn-main > .gn-home-system-name {
    top: 50px;
    font-size: clamp(2.2rem, 11vw, 3.35rem);
  }
}

/* == 30  Gilded Noir 1.1.4 pagination and bounded entity lookups ==========
   Catto Learning 0.5.7.6 introduced two new core-owned functional controls:
   the shared pagination row on every standalone list, and the bounded entity
   lookup that replaced the whole-table <select> pickers on Activity, Credits
   and the person profile.

   Core owns their markup and behaviour. This section supplies presentation
   only, using the existing Gilded Noir tokens so both controls read as part of
   the plate rather than as unstyled platform fallbacks. No core class is
   renamed and no functional rule is overridden.
   ======================================================================== */

/* -- Pagination row ------------------------------------------------------ */

.gn-main .pagination-row {
  gap: 1rem 1.25rem;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-sm);
}

/* A pagination row that follows a framed table reads as one unit with it. */
.gn-main .table-wrap + .pagination-row,
.gn-main .card + .pagination-row { margin-top: 1rem; }

.gn-main .pagination-summary {
  font-family: var(--gn-font-ui);
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--gn-ink);
}

.gn-main .pagination-pages {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gn-muted);
}

.gn-main .pagination-controls { gap: .55rem; }

/* Previous/Next are peers, so they get equal visual weight and a stable width
   that stops the row shifting as the labels toggle between states. */
.gn-main .pagination-controls .btn,
.gn-main .pagination-controls .is-disabled {
  min-width: 6.25rem;
  justify-content: center;
}

/* The disabled edge state is a <span>, not a <button>, so it needs its own
   treatment rather than inheriting :disabled. */
.gn-main .pagination-row .is-disabled {
  display: inline-flex;
  align-items: center;
  padding: .42rem .8rem;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-sm);
  background: transparent;
  color: var(--gn-muted);
  font-family: var(--gn-font-ui);
  font-size: .78rem;
  font-weight: 600;
}

.gn-main .pagination-page-size { gap: .55rem; }

.gn-main .pagination-page-size label {
  margin: 0;
  font-family: var(--gn-font-ui);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gn-muted);
}

.gn-main .pagination-page-size select {
  width: auto;
  min-width: 5.25rem;
  padding-top: .38rem;
  padding-bottom: .38rem;
  font-size: .82rem;
}

/* -- Bounded entity lookup ----------------------------------------------- */

.gn-main .entity-lookup .lookup-selected {
  margin: .3rem 0 .55rem;
  font-size: .86rem;
  color: var(--gn-ink);
}

.gn-main .entity-lookup .lookup-selected strong {
  font-family: var(--gn-font-ui);
  color: var(--gn-gold-ink);
}

.gn-main .entity-lookup .lookup-selected .muted { color: var(--gn-muted); }

/* The search box inherits the shared field treatment from section 11; it only needs the
   native search decorations removed so it matches the other plate inputs exactly. */
.gn-main .entity-lookup .lookup-search { width: 100%; }
.gn-main .entity-lookup .lookup-search::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

.gn-main .entity-lookup .lookup-results-panel { margin-top: .4rem; }

.gn-main .lookup-results {
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius);
  background: var(--gn-paper);
  box-shadow: var(--gn-shadow-sm);
  overflow: hidden auto;
}

.gn-main .lookup-results li + li { border-top: 1px solid var(--gn-line); }

.gn-main .lookup-result {
  padding: .55rem .8rem;
  font-family: var(--gn-font-body);
  color: var(--gn-ink);
  transition: background-color .12s ease;
}

.gn-main .lookup-result:hover,
.gn-main .lookup-result:focus-visible {
  background: rgba(191, 167, 93, .13);
  outline: none;
}

.gn-main .lookup-result:focus-visible { box-shadow: inset 0 0 0 2px var(--gn-gold); }

.gn-main .lookup-result-label { font-family: var(--gn-font-ui); font-weight: 600; }
.gn-main .lookup-result-detail { color: var(--gn-muted); }

.gn-main .lookup-hint {
  color: var(--gn-muted);
  font-size: .8rem;
  font-style: italic;
}

.gn-main .lookup-clear { margin-top: .45rem; }

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .gn-main .pagination-row { padding: .75rem .85rem; }
  .gn-main .pagination-controls .btn,
  .gn-main .pagination-row .is-disabled { flex: 1 1 0; min-width: 0; }
  .gn-main .pagination-page-size { justify-content: space-between; width: 100%; }
}

/* --- Company management (core v0.5.8.3 Round A) -------------------------------
   Core owns the markup, the search semantics and the selection boundary. These
   rules are presentation only: they place the "Administering company" banner and
   the dataset search bar into the Gilded Noir surface treatment. Core defines
   each control completely, so nothing here is required for them to work. */
.gn-main .company-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--gn-line-strong);
  border-radius: var(--gn-radius-lg);
  background: rgba(191, 167, 93, .08);
}
.gn-main .company-context-label {
  font-family: var(--gn-font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .75;
}
.gn-main .company-context-name {
  font-family: var(--gn-font-display);
  font-size: 1.12rem;
  line-height: 1.2;
}
.gn-main .dataset-search {
  padding: 14px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--gn-line);
  border-radius: var(--gn-radius-lg);
  background: rgba(255, 255, 255, .02);
}
.gn-main .company-picker-results .table-wrap {
  border-radius: var(--gn-radius-sm);
}

/* A suspended company is a state an administrator has to be able to see at a
   glance in a list of otherwise ordinary rows. */
.gn-main .badge.suspended, .gn-main .company-suspended-badge {
  color: var(--gn-danger);
  background: var(--gn-danger-bg);
  border-color: rgba(150, 46, 46, .38);
}