/* ==========================================================================
   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;
}
/* Card titles link to their own course page where one exists. Kept visually identical to a
   plain heading so the row still scans as a list — the affordance is the hover. */
.trahome .cert-card h3 .card-title-link{
  color: inherit; text-decoration: none;
}
.trahome .cert-card h3 .card-title-link:hover,
.trahome .cert-card h3 .card-title-link:focus-visible{
  color: var(--brass-dk, #7a5a11);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}/* 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;
  }
}

/* ==========================================================================
   ROW LIST
   pricing.html and business-solutions.html use the same horizontal rows as
   training-modules: icon, name,
   citation, one-line description, price and action on a single scan line.
   Written out in full rather than bolted onto the .tm-addons selectors, so a
   change here can never reach training-modules.
   ========================================================================== */
.trahome .row-list .picks { padding: 0; }
.trahome .row-list .picks .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  max-width: none !important;
}
.trahome .row-list .cert-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  column-gap: 22px; row-gap: 3px;
  align-items: center;
  padding: 16px 20px !important;
  text-align: left !important;
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.trahome .row-list .cert-card:hover {
  border-color: rgba(166,124,31,.45) !important;
  box-shadow: 0 14px 34px -24px rgba(4,18,31,.4);
}
.trahome .row-list .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 .row-list .cert-card h3 {
  grid-column: 2; grid-row: 1;
  margin: 0 !important; font-size: 1.06rem; line-height: 1.25;
}
.trahome .row-list .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 .row-list .cert-card .blurb {
  grid-column: 2; grid-row: 3;
  margin: 3px 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;
}
/* The flagship card says the most, and was the one being cut off mid-sentence. These cards
   are rows rather than columns, so letting one run taller costs no alignment anywhere.
   MUST sit after BOTH two-line clamps above (.tm-addons and .row-list) — they carry the
   same specificity as this, so position in the file is what decides the winner. */
.trahome .cert-card.is-flagship .blurb {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.trahome .row-list .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: 10px;
}
.trahome .row-list .cert-card .price .per {
  display: block; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .04em;
}
.trahome .row-list .cert-card .btn {
  grid-column: 4; grid-row: 1 / 3; align-self: end;
  margin: 0 !important; white-space: nowrap; padding: 11px 20px !important;
}

/* cart.js injects an "Add to cart" button after every buy link, which lands as
   a fifth item in a four-column row. The action stays, but as a quiet text link
   under Enroll rather than a second button competing with it. */
.trahome .row-list .cert-card .tra-atc {
  grid-column: 4; grid-row: 3; align-self: start; justify-self: center;
  margin: 5px 0 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--muted) !important; font-size: .76rem !important; font-weight: 600 !important;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  width: auto !important; min-width: 0 !important; white-space: nowrap;
}
.trahome .row-list .cert-card .tra-atc:hover { color: var(--steel) !important; }
.trahome .row-list .cert-card .tra-atc i { display: none; }

@media (max-width: 860px) {
  .trahome .row-list .cert-card { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 7px; }
  .trahome .row-list .cert-card .icon { width: 48px; height: 48px; grid-row: 1 / span 3; }
  .trahome .row-list .cert-card .price { grid-column: 3; grid-row: 1 / span 3; text-align: right; }
  .trahome .row-list .cert-card .btn { grid-column: 1 / -1; grid-row: 4; align-self: stretch; text-align: center; }
  .trahome .row-list .cert-card .tra-atc { grid-column: 1 / -1; grid-row: 5; justify-self: start; }
}
/* narrow phones: the price takes its own line rather than squeezing the name */
@media (max-width: 560px) {
  .trahome .row-list .cert-card { grid-template-columns: 44px minmax(0, 1fr); }
  .trahome .row-list .cert-card .icon { width: 44px; height: 44px; grid-row: 1 / span 3; }
  .trahome .row-list .cert-card .price {
    grid-column: 2; grid-row: 4; text-align: left; padding-right: 0; margin-top: 6px !important;
  }
  .trahome .row-list .cert-card .btn { grid-row: 5; }
  .trahome .row-list .cert-card .tra-atc { grid-row: 6; }
}

/* ==========================================================================
   PRICING CATEGORY TABS
   The three pricing groups are panes rather than four screens of scrolling.
   Squared to sit with the rest of the system rather than reading as a
   consumer pricing pill.
   ========================================================================== */
.trahome .pr-tabbar { padding: 46px 0 0; background: var(--white); }
.trahome .pr-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  padding: 6px; margin: 0 auto; width: fit-content; max-width: 100%;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px;
}
.trahome .pr-tab {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: .95rem; font-weight: 700; color: var(--navy);
  background: transparent; padding: 12px 28px; border-radius: 3px;
  transition: background .18s ease, color .18s ease;
}
.trahome .pr-tab:hover { background: rgba(10,37,64,.06); }
.trahome .pr-tab[aria-selected="true"] {
  background: var(--navy); color: #fff;
  box-shadow: 0 8px 20px -12px rgba(4,18,31,.7);
}
.trahome .pr-tab:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
/* the tab bar already separates the panes from the hero */
.trahome .pr-pane { padding-top: 34px; }
.trahome .pr-pane[hidden] { display: none; }

@media (max-width: 560px) {
  .trahome .pr-tabs { width: 100%; }
  .trahome .pr-tab { flex: 1 1 auto; padding: 11px 12px; font-size: .84rem; }
}

/* .chq paints the band white, but the global h1,h2,h3 rule sets navy on the
   heading itself — so a closing CTA heading rendered navy-on-navy unless the
   band happened to carry its own rule. Cover every .chq band. */
.trahome .chq h2, .trahome .chq h3 { color: #fff; }

/* ==========================================================================
   PROVIDER NETWORK  (accreditation.php)
   Two tiers: CollectorConnect is open, the Provider Network is selected from
   it. The distinction is the whole page, so it is shown rather than described.
   ========================================================================== */
.trahome .pn-hero .pn-stand {
  margin: 10px 0 0; font-family: var(--serif); font-size: 1.14rem;
  color: var(--brass-lt); max-width: 52ch; line-height: 1.4;
}
.trahome .pn-hero .pn-sub2 {
  margin: 14px 0 0; font-size: 1rem; color: rgba(255,255,255,.72);
  max-width: 66ch; line-height: 1.65;
}
.trahome .pn-hero .pn-sub2 strong { color: #fff; font-weight: 600; }
.trahome .pn-hero .pn-free {
  margin: 24px 0 0; padding: 13px 20px; border-radius: 3px; max-width: 76ch;
  background: rgba(200,162,75,.13); border: 1px solid rgba(200,162,75,.4);
  color: #f4ead2; font-size: .95rem; line-height: 1.6;
}

.trahome .pn-tiers {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch;
}
.trahome .pn-tier {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 24px 26px;
}
.trahome .pn-tier.pn-open { border-left: 3px solid var(--steel-lt); }
.trahome .pn-tier.pn-sel  { border-left: 3px solid var(--brass); }
.trahome .pn-tier .pn-tag {
  display: block; margin-bottom: 8px; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
}
.trahome .pn-tier.pn-open .pn-tag { color: var(--steel); }
.trahome .pn-tier.pn-sel  .pn-tag { color: var(--brass-dk); }
.trahome .pn-tier h3 { font-size: 1.14rem; margin: 0 0 8px; }
.trahome .pn-tier p  { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.trahome .pn-arrow   { display: grid; place-items: center; color: var(--brass); font-size: 1.5rem; }

.trahome .pn-crit, .trahome .pn-recv {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 34px;
}
.trahome .pn-crit li, .trahome .pn-recv li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0; border-top: 1px solid var(--line); font-size: .97rem;
}
.trahome .pn-crit li::before, .trahome .pn-recv li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass);
  flex: none; margin-top: 11px;
}

/* The Provider Network seal, under the "what you receive" list. Centred and
   flow-level so it needs no grid of its own and stacks correctly on mobile. */
.trahome .pn-seal { margin: 30px 0 0; text-align: center; }
.trahome .pn-seal img { width: 128px; height: 128px; display: block; margin: 0 auto 12px; }
.trahome .pn-seal figcaption {
  font-size: .84rem; color: var(--muted); max-width: 340px;
  margin: 0 auto; line-height: 1.55;
}

.trahome .pn-path {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px;
}
.trahome .pn-step {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 19px 21px;
}
/* the final step is the outcome, not another action the provider takes */
.trahome .pn-step.pn-last { border-color: rgba(166,124,31,.5); background: rgba(166,124,31,.05); }
.trahome .pn-step .pn-n {
  display: block; margin-bottom: 7px; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .1em; color: var(--brass);
}
.trahome .pn-step h3 { font-size: .98rem; margin: 0 0 5px; }
.trahome .pn-step p  { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.55; }

.trahome .pn-note {
  margin-top: 22px; background: var(--paper); border: 1px solid var(--line);
  border-left: 2px solid var(--brass); border-radius: 3px; padding: 20px 24px; max-width: 84ch;
}
.trahome .sec-alt .pn-note { background: var(--white); }
.trahome .pn-note p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.trahome .pn-note p + p { margin-top: 10px; }
.trahome .pn-note strong { color: var(--ink); }

@media (max-width: 820px) {
  .trahome .pn-tiers { grid-template-columns: 1fr; }
  .trahome .pn-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ==========================================================================
   HOW TRAINING WORKS
   Two parallel routes in, three steps, and one closed block of requirements.
   The study route takes steel and the live route takes brass, so they read as
   equal choices while the accent still marks the one that converts.
   ========================================================================== */
.trahome .hiw-acts { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.trahome .hiw-acts .btn-ghost-light {
  background: transparent; border: 1px solid rgba(255,255,255,.34); color: #fff;
}
.trahome .hiw-acts .btn-ghost-light:hover {
  background: rgba(255,255,255,.08); border-color: var(--brass-lt);
}

.trahome .hiw-paths {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px; align-items: stretch;
}
.trahome .hiw-path {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 28px 30px;
}
.trahome .hiw-path.hiw-study { border-top: 3px solid var(--steel-lt); }
.trahome .hiw-path.hiw-live  { border-top: 3px solid var(--brass); }
.trahome .hiw-tag {
  display: inline-block; align-self: flex-start; margin-bottom: 13px;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 3px;
}
.trahome .hiw-study .hiw-tag {
  color: var(--steel); background: rgba(30,78,121,.08); border: 1px solid rgba(30,78,121,.22);
}
.trahome .hiw-live .hiw-tag {
  color: var(--brass-dk); background: rgba(166,124,31,.1); border: 1px solid rgba(166,124,31,.3);
}
.trahome .hiw-path h3 { font-size: 1.26rem; margin: 0 0 8px; }
.trahome .hiw-path > p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.6; }
.trahome .hiw-path ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.trahome .hiw-path li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: .95rem;
}
.trahome .hiw-path li:first-child { border-top: 0; }
.trahome .hiw-path li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; margin-top: 9px;
}
.trahome .hiw-study li::before { background: var(--steel-lt); }
.trahome .hiw-live  li::before { background: var(--brass); }
.trahome .hiw-go { margin: auto 0 0; }
.trahome .hiw-go .btn { display: block; text-align: center; }
.trahome .hiw-note { margin-top: 20px; color: var(--muted); font-size: .96rem; }

.trahome .hiw-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
.trahome .hiw-step {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 24px 26px;
}
.trahome .hiw-step .hiw-n {
  display: block; margin-bottom: 9px; font-family: var(--mono);
  font-size: .69rem; letter-spacing: .11em; color: var(--brass);
}
.trahome .hiw-step h3 { font-size: 1.04rem; margin: 0 0 7px; }
.trahome .hiw-step p  { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.58; }

/* the requirements are the only figures left on the page, so the block is
   built to look finished rather than like the start of an explanation */
.trahome .hiw-reqs {
  border: 1px solid var(--line); border-radius: 3px; background: var(--white);
  overflow: hidden; max-width: 860px;
}
.trahome .hiw-req {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
  padding: 18px 24px; border-top: 1px solid var(--line);
}
.trahome .hiw-req:first-child { border-top: 0; }
.trahome .hiw-req h3 { font-size: 1.02rem; margin: 0; }
.trahome .hiw-req .hiw-val {
  margin: 0; font-family: var(--mono); font-size: .89rem; color: var(--navy);
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trahome .hiw-req .hiw-val b {
  font-family: var(--serif); font-size: 1.28rem; color: var(--brass-dk); margin-right: 4px;
}
.trahome .hiw-after { margin-top: 18px; max-width: 74ch; }
.trahome .hiw-after p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.62; }
.trahome .hiw-after p + p { margin-top: 10px; }

.trahome .hiw-gets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px;
}
.trahome .hiw-get { padding: 18px 0; border-top: 1px solid var(--line); }
.trahome .hiw-get h3 { font-size: 1rem; margin: 0 0 5px; }
.trahome .hiw-get p  { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }

@media (max-width: 720px) {
  .trahome .hiw-req { grid-template-columns: 1fr; gap: 6px; }
  .trahome .hiw-req .hiw-val { text-align: left; }
}