/* ==========================================================================
   tra-pages.css — brings interior pages onto the homepage design system.

   Deliberately styles the markup those pages ALREADY use (.page-hero,
   .section-label, .section-title, .section-subtitle, .container) rather than
   asking each page to be rewritten. A page opts in with two changes: load this
   file, and wrap its body in <div class="trahome">.

   Every value resolves to a token declared in tra-home.css, so these pages move
   with the homepage rather than drifting from it.
   ========================================================================== */

/* ---------- hero: the page's own .page-hero becomes the dark grid hero ----- */
.trahome .page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  padding: 62px 0 68px !important;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%);
}
/* the same micro-grid the homepage hero uses */
.trahome .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.trahome .page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.022em;
  color: #fff; margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.trahome .page-hero p {
  color: rgba(255, 255, 255, .76);
  font-size: 1.04rem; line-height: 1.65; max-width: 62ch; margin: 0;
}
/* the existing eyebrow becomes the brass pill used across the system */
.trahome .page-hero .section-label {
  display: inline-block; margin: 0 0 18px;
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-lt) !important;      /* beats the legacy !important override */
  border: 1px solid rgba(242, 226, 176, .28);
  border-radius: 100px; padding: 6px 16px; background: rgba(242, 226, 176, .06);
}
/* breadcrumbs and links sitting inside the hero */
.trahome .page-hero a { color: var(--brass-hi); }

/* ---------- interior section rhythm --------------------------------------- */
.trahome .section-label {
  display: inline-block; margin: 0 0 12px;
  font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass) !important;
}
.trahome .section-title,
.trahome h2 { font-family: var(--serif); color: var(--navy); letter-spacing: -.015em; }
.trahome .section-subtitle { color: var(--muted); line-height: 1.7; }
.trahome h3 { font-family: var(--serif); color: var(--navy); }

/* Cards these pages already use, given the .jstep treatment: white, thin
   border, restrained corners, controlled elevation. */
.trahome .cert-item,
.trahome .tc-card,
.trahome .mro-directory-card,
.trahome .card {
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .04);
}
.trahome .cert-icon,
.trahome .tc-card .fa-solid {
  color: var(--brass-dk);
}

/* Small brass rule under section heads, matching the homepage's hairline. */
.trahome .section-header { position: relative; }

/* Keep corners restrained site-wide inside the system. */
.trahome .btn,
.trahome .btn-primary,
.trahome .btn-lg { border-radius: 3px; }

/* Links pick up the steel/brass pairing rather than the default blue. */
.trahome .container a:not(.btn):not(.fc-btn):not(.cc-btn):not(.lnk) { color: var(--steel); }
.trahome .container a:not(.btn):not(.fc-btn):not(.cc-btn):not(.lnk):hover { color: var(--navy); }

/* ---------- custom heroes on pages that do not use .page-hero ------------- */
/* flashcards (.fc-head) and the collector network (.cc-hero) carry their own
   hero markup; give them the same ground and eyebrow rather than a rewrite. */
.trahome .fc-head .label,
.trahome .cc-hero .label {
  color: var(--brass-lt); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 800; font-size: .68rem;
}
.trahome .fc-head h1,
.trahome .cc-hero h1 { font-family: var(--serif); }

@media (max-width: 700px) {
  .trahome .page-hero { padding: 44px 0 48px !important; }
}

/* ---------- make the brass actually read ---------------------------------
   style.css carries an older override block (lines 28-31) that forces the hero
   palette with !important. These match its weight so the gold treatment lands. */
.trahome .page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%) !important;
}
/* a brass hairline closing the hero, as on the homepage */
.trahome .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-lt) 18%, var(--brass) 50%, var(--brass-lt) 82%, transparent);
  opacity: .55;
}
/* icons in the pages' own cards take the brass, not the old blue */
.trahome .cert-icon,
.trahome .cert-item .fa-solid,
.trahome .tc-card .fa-solid,
.trahome .mro-dir-icon { color: var(--brass-dk) !important; }
.trahome .cert-icon,
.trahome .mro-dir-icon { background: rgba(166,124,31,.1) !important; }

/* ==========================================================================
   RESTRUCTURED PAGES — the shell now uses the homepage's own sections, so the
   remaining job is the interior blocks these pages already contain.
   ========================================================================== */

/* bright-band rhythm */
.trahome .sec      { background: var(--white); padding: 84px 0; }
.trahome .sec-alt  { background: var(--paper); }

/* the blocks inside each section behave like .sec-head */
.trahome .sec .section-label { color: var(--brass) !important; }
.trahome .sec .section-title {
  font-family: var(--serif); color: var(--navy);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.18; letter-spacing: -.015em;
}
.trahome .sec p { color: var(--muted); line-height: 1.7; }
.trahome .sec strong { color: var(--ink); }

/* the pages' own cards, given the .jstep treatment */
.trahome .role-card,
.trahome .cert-item,
.trahome .tc-card,
.trahome .device-card,
.trahome .lab-item,
.trahome .mro-directory-card {
  background: linear-gradient(180deg, #fff, #fbfcfe) !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
  transition: transform .22s ease, border-color .3s ease, box-shadow .35s ease;
}
.trahome .role-card:hover,
.trahome .cert-item:hover,
.trahome .tc-card:hover,
.trahome .device-card:hover {
  transform: translateY(-3px); border-color: var(--brass-lt) !important;
  box-shadow: 0 14px 34px -20px rgba(10,37,64,.4) !important;
}
.trahome .role-card h4,
.trahome .cert-item h3,
.trahome .tc-card h3 { font-family: var(--serif); color: var(--navy); }
.trahome .role-card .fa-solid,
.trahome .cert-icon,
.trahome .tc-card .fa-solid { color: var(--brass-dk) !important; }

/* tick lists take the brass mark rather than the old blue */
.trahome .check-list .ck,
.trahome .check-list .fa-check {
  color: var(--brass-dk) !important; background: rgba(166,124,31,.1) !important;
}

/* the closing CTA band, shared with the Verified Provider page */
.trahome .acc-cta-band { text-align: center; padding: 84px 0; }
.trahome .acc-cta-band h2 { color: #fff; max-width: 22ch; margin: 0 auto 14px; }
.trahome .acc-cta-band .sub { color: rgba(255,255,255,.72); max-width: 56ch; margin: 0 auto 26px; }
.trahome .acc-cta-band .eyebrow { margin-bottom: 12px; }

/* the system hero replacing .page-hero keeps the homepage's own rules; only the
   width wrapper needs the page container's gutter */
/* .hero is display:flex, so .wrap becomes a flex item and shrink-wraps to its
   content instead of filling the row; the auto margins then centre that narrow
   box, indenting the hero copy well past the body below it. width:100% makes it
   fill. These pages lay their body out in .container, so the hero's wrapper
   takes that same 1160/24 geometry rather than the .wrap default of 1200/28. */
.trahome .page-hero-sys .wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
/* flashcards lays its body out in .wrap rather than .container, so its hero
   keeps the .wrap geometry instead of the .container one used above. */
.trahome .page-hero-sys.hero-wrap-wide .wrap { max-width: 1200px; padding: 0 28px; }

@media (max-width: 700px) {
  .trahome .sec { padding: 56px 0; }
  .trahome .acc-cta-band { padding: 60px 0; }
}

/* ==========================================================================
   CUSTOM-HERO PAGES — these carry their own hero markup (a photo band, an app
   header, a teal gradient), so they are brought onto the palette rather than
   rebuilt. Their layout and behaviour are untouched.
   ========================================================================== */

/* compliance-certs: photo hero */
.trahome .chero {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%) !important;
}
.trahome .chero h1 { font-family: var(--serif); color: #fff; letter-spacing: -.02em; }
.trahome .chero p  { color: rgba(255,255,255,.78); }
.trahome .chero-badge {
  color: var(--brass-lt) !important;
  background: rgba(242,226,176,.08) !important;
  border: 1px solid rgba(242,226,176,.28) !important;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 800; font-size: .68rem;
}
.trahome .chero-badge .fa-solid { color: var(--brass-lt) !important; }

/* collector network: its teal gradient becomes the house navy */
.trahome .cc-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%) !important;
}
.trahome .cc-hero h1 { font-family: var(--serif); letter-spacing: -.02em; }
.trahome .cc-hero .label,
.trahome .cc-brand { color: var(--brass-lt) !important; }
.trahome .cc-btn { border-radius: 3px !important; }
.trahome .stat b, .trahome .stat strong { color: var(--brass-lt) !important; }


/* join-collector-network: intake form page with its own .jn-* hero and card */
.trahome .jn-hero {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%) !important;
}
.trahome .jn-hero h1 { font-family: var(--serif); color: #fff; letter-spacing: -.02em; }
.trahome .jn-hero h1 .fa-solid { color: var(--brass-lt); }
.trahome .jn-hero p { color: rgba(255,255,255,.78); }
.trahome .jn-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-lt) 18%, var(--brass) 50%, var(--brass-lt) 82%, transparent);
  opacity: .55;
}
.trahome .jn-card {
  background: var(--white); border: 1px solid var(--line) !important;
  border-radius: 3px !important; box-shadow: 0 1px 2px rgba(10,37,64,.04);
}
.trahome .jn-group-title { font-family: var(--serif); color: var(--navy); }
.trahome .jn-input:focus { border-color: var(--brass) !important; outline: none; }
.trahome .jn-card .btn, .trahome .jn-card button[type=submit] { border-radius: 3px !important; }

/* forms-library: its own .library-hero, tile grid, steps and FAQ */
.trahome .library-hero {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%) !important;
}
.trahome .library-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-lt) 18%, var(--brass) 50%, var(--brass-lt) 82%, transparent);
  opacity: .55;
}
.trahome .library-hero h1 { font-family: var(--serif); color: #fff; letter-spacing: -.022em; }
.trahome .library-hero p  { color: rgba(255,255,255,.78); }
.trahome .library-hero .badge {
  color: var(--brass-lt) !important;
  background: rgba(242,226,176,.06) !important;
  border: 1px solid rgba(242,226,176,.28) !important;
  border-radius: 100px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; font-size: .68rem;
}
.trahome .library-hero .badge .fa-solid { color: var(--brass-lt) !important; }

.trahome .form-tile {
  background: linear-gradient(180deg,#fff,#fbfcfe) !important;
  border: 1px solid var(--line) !important; border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
  transition: transform .22s ease, border-color .3s ease, box-shadow .35s ease;
}
.trahome .form-tile:hover {
  transform: translateY(-3px); border-color: var(--brass-lt) !important;
  box-shadow: 0 14px 34px -20px rgba(10,37,64,.4) !important;
}
.trahome .form-tile .icon,
.trahome .form-tile .fa-solid { color: var(--brass-dk) !important; }
.trahome .form-tile .name { font-family: var(--serif); color: var(--navy); }

.trahome .section-h { font-family: var(--serif); color: var(--navy); letter-spacing: -.015em; }
.trahome .how-step {
  background: linear-gradient(180deg,#fff,#fbfcfe) !important;
  border: 1px solid var(--line) !important; border-radius: 3px !important;
}
.trahome .how-step .fa-solid { color: var(--brass-dk) !important; }
.trahome .faq-item {
  border: 1px solid var(--line) !important; border-radius: 3px !important;
  background: var(--white) !important;
}
.trahome .faq-item .fa-check { color: var(--brass-dk) !important; }

/* The purchase action is the page's primary CTA, so it takes the same gold
   sheen as the homepage's Olentra button; the secondary stays outlined. */
.trahome .library-hero .btn-buy {
  background: var(--gold-sheen) !important;
  background-size: 220% 100% !important;
  color: #2b2008 !important;
  border: 0 !important; border-radius: 3px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 26px -12px rgba(166,124,31,.7) !important;
}
.trahome .library-hero .btn-buy:hover { background-position: 100% 0 !important; }
.trahome .library-hero .btn-secondary {
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.34) !important; border-radius: 3px !important;
}
.trahome .library-hero .btn-secondary:hover {
  border-color: var(--brass-lt) !important; color: var(--brass-hi) !important;
}
.trahome .library-hero .price { color: #fff; }
.trahome .library-hero .price-was { color: rgba(255,255,255,.5); }
.trahome .library-hero .price-note { color: rgba(255,255,255,.7); }

/* ==========================================================================
   FLASHCARDS — the study app, brought onto the system.
   Its behaviour is untouched; the corners come in from 20px/11px to the
   restrained 3px used everywhere else, and the accents become brass.
   ========================================================================== */
.trahome .fc-wrap { padding-top: 46px; }
.trahome .fc-aura { display: none; }              /* the hero now carries the atmosphere */

.trahome .fc-face {
  border-radius: 3px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg,#fff,#fbfcfe) !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 18px 44px -30px rgba(10,37,64,.35) !important;
}
.trahome .fc-face.fc-back {
  background: linear-gradient(180deg,#fffdf7,#fbf7ec) !important;
  border-color: rgba(166,124,31,.34) !important;
}
.trahome .fc-q, .trahome .fc-a { font-family: var(--serif); color: var(--navy); }
.trahome .fc-tag {
  font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-dk) !important; background: rgba(166,124,31,.1);
  border: 1px solid rgba(166,124,31,.24); border-radius: 100px; padding: 4px 11px;
}
.trahome .fc-hint { color: var(--muted-2, #7d8b9b); }
.trahome .fc-known-flag .fa-solid { color: var(--brass-dk) !important; }

.trahome .fc-btn {
  border-radius: 3px !important;
  border: 1px solid var(--line) !important;
  color: var(--navy) !important;
}
.trahome .fc-btn:hover { border-color: var(--brass-lt) !important; }
.trahome .fc-btn.primary {
  background: var(--gold-sheen) !important; background-size: 220% 100% !important;
  color: #2b2008 !important; border: 0 !important; font-weight: 800 !important;
  box-shadow: 0 10px 26px -12px rgba(166,124,31,.7) !important;
}
.trahome .fc-btn.primary:hover { background-position: 100% 0 !important; }

/* category chips + progress bar take the brass */
.trahome .fc-cats button, .trahome .fc-cats .fc-cat {
  border-radius: 100px !important; border: 1px solid var(--line) !important;
}
.trahome .fc-cats .is-on, .trahome .fc-cats button[aria-pressed="true"] {
  background: rgba(166,124,31,.12) !important; border-color: rgba(166,124,31,.4) !important;
  color: var(--brass-dk) !important;
}
.trahome .fc-bar { background: var(--line-2, #edf1f6) !important; border-radius: 100px; }
.trahome .fc-bar span { background: var(--gold-sheen) !important; border-radius: 100px; }

/* pricing: keeps its photographic hero (a deliberate choice), but takes the
   system's eyebrow, serif headline and brass accents. */
.trahome .page-hero .ph-photo { filter: brightness(1.25) contrast(1.05) saturate(.9); }
.trahome .page-hero .ph-photo::after {
  background: linear-gradient(135deg, rgba(10,37,64,.94) 0%, rgba(20,56,95,.86) 55%, rgba(30,78,121,.78) 100%) !important;
}
.trahome .price-card, .trahome .plan-card, .trahome .tier {
  background: linear-gradient(180deg,#fff,#fbfcfe) !important;
  border: 1px solid var(--line) !important; border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
}
.trahome table th { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.trahome .fa-award, .trahome .fa-certificate { color: var(--brass-dk) !important; }

/* ==========================================================================
   TRAINING MODULES — composition layer.
   One measure, one spacing scale, and grids that remove the orphan rows.
   ========================================================================== */
/* The shared .hero is the homepage's full-screen treatment
   (min-height: calc(100vh - 70px)). On an interior page that spends a whole
   viewport on a heading and a line of copy and pushes the first real section
   below the fold, so every page-level hero sizes to its own content instead.
   The homepage keeps a bare .hero and is deliberately not matched here. */
.trahome .page-hero-sys { min-height: 0; padding: 44px 0 48px; }
.trahome .tm-hero { min-height: 0; padding: 44px 0 48px; }
/* this page's body uses .wrap, so the hero only needs to stop shrink-wrapping */
.trahome .tm-hero > .wrap { width: 100%; }
.trahome .tm-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
}
.trahome .tm-hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.15rem); line-height: 1.06;
  letter-spacing: -.024em; max-width: 15ch; margin: 0 0 18px;
}
.trahome .tm-hero .sub { max-width: 46ch; margin: 0; }
.trahome .tm-hero-art img {
  width: 100%; height: auto; display: block;
  border-radius: 4px !important;
  border: 1px solid rgba(242,226,176,.22);
  box-shadow: 0 30px 70px -34px rgba(4,18,31,.75) !important;
}

/* progress banner — a transition into the modules, not an alert */
.trahome .tm-band { background: var(--paper); padding: 26px 0 0; }
.trahome .tm-band > .wrap > div {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(242,226,176,.18);
  box-shadow: 0 18px 44px -30px rgba(10,37,64,.6) !important;
  padding: 20px 26px !important;
}
.trahome .tm-band a { border-radius: 3px !important; }
.trahome .tm-band a[href='my-progress.php'] {
  background: var(--gold-sheen) !important; background-size: 220% 100% !important;
  color: #2b2008 !important;
}

/* modules — three across, then two centred, so there is no orphan card */
.trahome .tm-modules { padding-top: 40px; }
.trahome .module-chooser {
  display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
.trahome .module-choice-card {
  grid-column: span 2; display: flex; flex-direction: column;
  border-radius: 3px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg,#fff,#fbfcfe) !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
  padding: 26px 24px 24px !important;
  transition: transform .22s ease, border-color .3s ease, box-shadow .35s ease;
}
.trahome .module-choice-card:nth-child(4) { grid-column: 2 / span 2; }
.trahome .module-choice-card:nth-child(5) { grid-column: 4 / span 2; }
.trahome .module-choice-card:hover {
  transform: translateY(-3px);
  border-color: var(--brass-lt) !important;
  box-shadow: 0 16px 38px -22px rgba(10,37,64,.45) !important;
}
/* the flagged module keeps its distinction, as a brass rule rather than a harsh outline */
.trahome .module-choice-card[style*='b3271e'] {
  border-color: rgba(166,124,31,.5) !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), inset 0 2px 0 var(--brass) !important;
}
.trahome .module-choice-card > div[style*='absolute'] {
  background: var(--gold-sheen) !important; color: #2b2008 !important;
  border-radius: 100px !important;
}
.trahome .module-choice-icon { border-radius: 3px !important; }
.trahome .module-choice-card h2 {
  font-size: 1.12rem; line-height: 1.28; min-height: 2.6em; margin: 14px 0 8px;
}
.trahome .module-choice-card > p { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.trahome .module-tags { margin: 12px 0; }
.trahome .module-tag { border-radius: 100px !important; font-size: .68rem !important; }
.trahome .module-sections-preview { margin-top: auto; }
.trahome .module-sections-preview ul li { font-size: .84rem; line-height: 1.5; }
/* every card ends the same way */
.trahome .module-choice-btn {
  margin-top: 18px; align-self: stretch; text-align: center; border-radius: 3px !important;
}

/* certificate — explanation, preview and inclusions as one composition */
.trahome .tm-cert-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: start;
}
.trahome .tm-cert-grid h2 { font-size: 1.25rem; margin: 0 0 12px; }
.trahome .tm-cert-art img { border-radius: 3px !important; border: 1px solid var(--line); }
.trahome .tm-cert-side table { width: 100%; }

/* add-on certificates — four across */
.trahome .tm-addons .picks { background: none !important; padding: 0 !important; }
.trahome .tm-addons .picks .grid {
  grid-template-columns: repeat(4, 1fr) !important; max-width: none !important; gap: 18px !important;
}
.trahome .tm-addons .cert-card {
  border-radius: 3px !important; border-width: 1px !important;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(10,37,64,.04) !important;
}
.trahome .tm-addons .cert-card .btn { margin-top: auto; border-radius: 3px !important; }
/* red reserved for emphasis, as a top rule rather than a full outline */
.trahome .tm-addons .cert-card[style*='7c2d12'],
.trahome .tm-addons .cert-card[style*='b3271e'] {
  border-color: var(--line) !important; background: #fff !important;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), inset 0 2px 0 #b3271e !important;
}

/* free resources — a horizontal strip rather than a boxed interruption */
.trahome .tm-free { background: var(--paper); padding: 30px 0; }
.trahome .tm-free > .wrap > div {
  border: 0 !important; background: none !important; padding: 0 !important;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.trahome .tm-free h2, .trahome .tm-free h3 { margin: 0; font-size: 1.12rem; flex: 0 0 auto; }
.trahome .tm-free p { margin: 0; flex: 1 1 320px; font-size: .92rem; }
.trahome .tm-free a { border-radius: 3px !important; flex: 0 0 auto; }

/* questions — wider measure, separators instead of boxes */
.trahome .faq { background: var(--white); }
.trahome .faq .faq-item {
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; padding: 4px 0 !important;
}
.trahome .faq .faq-item summary { padding: 18px 0 !important; font-size: 1rem; }
.trahome .faq .faq-item summary:hover { color: var(--brass-dk); }
.trahome .faq .faq-item[open] summary { color: var(--navy); }

/* related links kept quiet, close to the footer */
.trahome .related-links { background: var(--paper-2) !important; padding: 30px 0 !important; }
.trahome .related-links a { font-size: .86rem; }

@media (max-width: 1000px) {
  .trahome .tm-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .trahome .tm-cert-grid { grid-template-columns: 1fr; gap: 30px; }
  .trahome .module-chooser { grid-template-columns: repeat(4, 1fr); }
  .trahome .module-choice-card,
  .trahome .module-choice-card:nth-child(4),
  .trahome .module-choice-card:nth-child(5) { grid-column: span 2 !important; }
  .trahome .tm-addons .picks .grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .trahome .module-chooser { grid-template-columns: 1fr; }
  .trahome .module-choice-card,
  .trahome .module-choice-card:nth-child(4),
  .trahome .module-choice-card:nth-child(5) { grid-column: 1 / -1 !important; }
  .trahome .tm-addons .picks .grid { grid-template-columns: 1fr !important; }
  .trahome .module-choice-card h2 { min-height: 0; }
}

/* The original cards centre everything, which makes multi-line descriptions
   ragged and the metadata float. Left alignment gives one scan line. */
.trahome .module-choice-card { text-align: left !important; }
.trahome .module-choice-card h2 { text-align: left; }
.trahome .module-choice-icon { margin: 0 0 4px !important; }
.trahome .module-tags { justify-content: flex-start !important; }
.trahome .module-choice-card > div[style*="absolute"] { top: 14px; right: 14px; }
/* No clamping — the brief keeps all course information. Cards stay equal height
   because the grid stretches them and the button is anchored with margin-top:auto. */
.trahome .module-choice-card > p { overflow: visible; }
/* the icon block is centred by the original rule; align it with the text */
.trahome .module-choice-icon { margin-left: 0 !important; margin-right: auto !important; }
.trahome .module-sections-preview h4 { text-align: left; letter-spacing: .12em; }

/* the section list is now a closed disclosure, matching the FAQ idiom */
.trahome details.module-sections-preview { margin-top: auto; border-top: 1px solid var(--line-2); padding-top: 12px; }
.trahome details.module-sections-preview summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0;
}
.trahome details.module-sections-preview summary::-webkit-details-marker { display: none; }
.trahome details.module-sections-preview summary::after {
  content: "+"; margin-left: auto; color: var(--brass); font-weight: 700; font-size: .95rem;
}
.trahome details.module-sections-preview[open] summary::after { content: "−"; }
.trahome details.module-sections-preview summary:hover { color: var(--brass-dk); }
.trahome details.module-sections-preview .ct {
  background: rgba(166,124,31,.12); color: var(--brass-dk);
  border-radius: 100px; padding: 1px 7px; font-size: .66rem;
}
.trahome details.module-sections-preview ul { margin: 10px 0 0; }
.trahome .module-choice-card > p { margin-bottom: 14px; }

/* ==========================================================================
   MODULES AS ROWS
   Five tall cards meant scrolling to see the catalogue. The same content laid
   out as horizontal rows puts every module on one screen: icon, title, one-line
   description, metadata and action all on a single scan line, with the section
   list still one click away.
   ========================================================================== */
.trahome .tm-modules .module-chooser {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.trahome .tm-modules .module-choice-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 18px 22px !important;
  text-align: left !important;
}

/* icon: smaller, spanning the row */
.trahome .tm-modules .module-choice-icon {
  grid-column: 1; grid-row: 1 / span 3;
  width: 56px !important; height: 56px !important;
  font-size: 1.35rem !important;
  align-self: center; margin: 0 !important;
  border-radius: 3px !important;
}

/* title + description + metadata stack in the middle column */
.trahome .tm-modules .module-choice-card h2 {
  grid-column: 2; grid-row: 1;
  font-size: 1.06rem !important; line-height: 1.25 !important;
  min-height: 0 !important; margin: 0 !important;
}
.trahome .tm-modules .module-choice-card > p {
  grid-column: 2; grid-row: 2;
  margin: 0 !important; font-size: .88rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trahome .tm-modules .module-tags {
  grid-column: 2; grid-row: 3;
  margin: 2px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px;
}
.trahome .tm-modules .module-tag { font-size: .64rem !important; padding: 3px 9px !important; }

/* the section list sits under the row, full width, still collapsed */
.trahome .tm-modules details.module-sections-preview {
  grid-column: 1 / -1; grid-row: 4;
  margin: 10px 0 0 !important; padding-top: 10px !important;
}
.trahome .tm-modules details.module-sections-preview ul {
  columns: 2; column-gap: 30px;
}
.trahome .tm-modules details.module-sections-preview ul li { break-inside: avoid; }

/* action pinned right, vertically centred */
.trahome .tm-modules .module-choice-btn {
  grid-column: 3; grid-row: 1 / span 3;
  align-self: center; margin: 0 !important;
  white-space: nowrap; padding: 11px 20px !important;
}

/* the flagged module keeps a brass rule, and its badge moves inline */
.trahome .tm-modules .module-choice-card > div[style*='absolute'] {
  position: static !important;
  grid-column: 2; grid-row: 1;
  justify-self: end; align-self: center;
  margin-left: 12px;
}

@media (max-width: 860px) {
  .trahome .tm-modules .module-choice-card {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 8px;
  }
  .trahome .tm-modules .module-choice-icon { width: 48px !important; height: 48px !important; grid-row: 1 / span 2; }
  .trahome .tm-modules .module-choice-btn {
    grid-column: 1 / -1; grid-row: 5; align-self: stretch; text-align: center;
  }
  .trahome .tm-modules details.module-sections-preview ul { columns: 1; }
  .trahome .tm-modules .module-choice-card > div[style*='absolute'] {
    grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-left: 0;
  }
}

/* Tighter still: the section list moves onto the metadata line instead of
   claiming its own full-width strip, which was adding ~60px to every row. */
.trahome .tm-modules .module-choice-card { padding: 14px 20px !important; row-gap: 4px; }
.trahome .tm-modules details.module-sections-preview {
  grid-column: 2; grid-row: 4;
  margin: 6px 0 0 !important; padding-top: 0 !important; border-top: 0 !important;
}
.trahome .tm-modules details.module-sections-preview summary {
  display: inline-flex; width: auto; padding: 0 !important; gap: 7px;
}
.trahome .tm-modules details.module-sections-preview summary::after { margin-left: 6px; }
.trahome .tm-modules details.module-sections-preview[open] { grid-column: 1 / -1; }
.trahome .tm-modules details.module-sections-preview ul { margin-top: 8px; }
.trahome .tm-modules .module-choice-card > p { -webkit-line-clamp: 2; }

/* ==========================================================================
   CERTIFICATE COURSES AS ROWS
   Matches the module rows: icon, title, regulation line, description, price and
   action on one scan line, so the whole catalogue reads the same way.
   ========================================================================== */
.trahome .tm-addons .picks .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.trahome .tm-addons .cert-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  column-gap: 22px;
  row-gap: 3px;
  align-items: center;
  padding: 14px 20px !important;
  text-align: left !important;
}

.trahome .tm-addons .cert-card .icon {
  grid-column: 1; grid-row: 1 / span 3;
  width: 56px; height: 56px; border-radius: 3px;
  display: grid; place-items: center; align-self: center;
  font-size: 1.3rem; color: var(--brass-dk);
  background: rgba(166, 124, 31, .1);
  border: 1px solid rgba(166, 124, 31, .22);
}

.trahome .tm-addons .cert-card h3 {
  grid-column: 2; grid-row: 1;
  margin: 0 !important; font-size: 1.06rem; line-height: 1.25;
}
.trahome .tm-addons .cert-card .reg {
  grid-column: 2; grid-row: 2;
  margin: 0 !important;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.trahome .tm-addons .cert-card .blurb {
  grid-column: 2; grid-row: 3;
  margin: 2px 0 0 !important; font-size: .87rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* price sits between the copy and the action, right-aligned and tabular */
.trahome .tm-addons .cert-card .price {
  grid-column: 3; grid-row: 1 / span 3;
  margin: 0 !important; align-self: center; text-align: right;
  font-size: 1.2rem; font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-right: 8px;
}
.trahome .tm-addons .cert-card .price .per {
  display: block; font-size: .68rem; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}

.trahome .tm-addons .cert-card .btn {
  grid-column: 4; grid-row: 1 / span 3;
  align-self: center; margin: 0 !important;
  white-space: nowrap; padding: 11px 20px !important;
}

@media (max-width: 860px) {
  .trahome .tm-addons .cert-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .trahome .tm-addons .cert-card .icon { width: 48px; height: 48px; grid-row: 1 / span 3; }
  .trahome .tm-addons .cert-card .price { grid-column: 3; grid-row: 1 / span 3; }
  .trahome .tm-addons .cert-card .btn {
    grid-column: 1 / -1; grid-row: 4; align-self: stretch; text-align: center;
  }
}

/* ==========================================================================
   FREE RESOURCES / ENROL BAND
   Previously squashed a heading and two paragraphs into flex columns, greyed
   and centred, so the page's only enrol action read as an afterthought. It is
   really two things at once: the free-to-review promise, and the caveat that
   modules alone do not qualify anyone. Both deserve to be legible, so this is a
   dark band with the copy left and the action right.
   ========================================================================== */
.trahome .tm-free {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--steel) 100%);
  padding: 46px 0 !important;
}
.trahome .tm-free::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

/* copy left, action right — not four columns of fragments */
.trahome .tm-free > .wrap > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px; row-gap: 14px;
  align-items: center;
  text-align: left !important;
  border: 0 !important; background: none !important; padding: 0 !important;
}

.trahome .tm-free h2,
.trahome .tm-free h3 {
  grid-column: 1; grid-row: 1;
  font-family: var(--serif); color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2;
  margin: 0 !important; letter-spacing: -.015em;
}
.trahome .tm-free p {
  grid-column: 1;
  margin: 0 !important; color: rgba(255,255,255,.76);
  font-size: .93rem; line-height: 1.65; max-width: 72ch;
}
.trahome .tm-free p:nth-of-type(1) { grid-row: 2; }

/* the second paragraph is the qualification caveat — give it a brass rule so it
   reads as the condition it is, rather than more body copy */
.trahome .tm-free p:nth-of-type(2) {
  grid-row: 3;
  border-left: 2px solid var(--brass); padding-left: 14px;
  color: rgba(255,255,255,.86); font-size: .9rem;
}
.trahome .tm-free p:nth-of-type(2) strong { color: var(--brass-hi); }

/* the action, in the house gold */
.trahome .tm-free a.btn,
.trahome .tm-free a.btn-primary {
  grid-column: 2; grid-row: 1 / span 3;
  align-self: center; justify-self: end;
  background: var(--gold-sheen) !important; background-size: 220% 100% !important;
  color: #2b2008 !important; border: 0 !important; border-radius: 3px !important;
  font-weight: 800 !important; white-space: nowrap;
  padding: 14px 26px !important;
  box-shadow: 0 12px 30px -14px rgba(166,124,31,.75) !important;
  transition: background-position .45s ease, transform .2s ease;
}
.trahome .tm-free a.btn:hover { background-position: 100% 0 !important; transform: translateY(-1px); }

@media (max-width: 860px) {
  .trahome .tm-free > .wrap > div { grid-template-columns: 1fr; }
  .trahome .tm-free a.btn,
  .trahome .tm-free a.btn-primary {
    grid-column: 1; grid-row: 4; justify-self: stretch; text-align: center;
  }
}