/* Training tab -- internal marketing/onboarding page. Own stylesheet
   (not folded into style.css) because this page's visual language --
   big bragging hero, per-channel mini-diagrams, one large branching
   journey diagram -- is entirely its own thing, used nowhere else in the
   app. Reuses the app's existing dark theme tokens (--bg/--surface/
   --brand/etc., defined in style.css's :root) so it still feels like
   part of AutoLink CRM, not a bolted-on microsite. */

.training-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px 120px;
}

/* ================= Landing: 3-column, mirrors staff_login.html =================
   Everything under .tr-landing is a scoped adaptation of the sign-in
   page's own outer layout (same class shapes, renamed tr-land-*, custom
   properties scoped to .tr-landing instead of :root) so it can sit
   inside this app-shell page without leaking variables/resets into the
   rest of the app or colliding with base.html's own .brand/.wordmark-
   style names. The left (DEALER OPS TERMINAL) and right (How It Works)
   columns are copied verbatim in spirit -- same content, same visual
   treatment, including its pre-existing amber-tinted accents on a few
   glows/gradients (a quirk already present in the real sign-in page,
   left as-is rather than "fixed" here). Only the middle column is new. */
.tr-landing {
    --land-bg: #0B0C0E;
    --land-panel: #16181C;
    --land-panel-2: #101114;
    --land-line: #26292F;
    --land-text: #ECEDEE;
    --land-text-dim: #8A8F98;
    --land-text-faint: #565A62;
    --land-amber: #4FD1C5;
    --land-amber-dim: #2C7A72;
    --land-cyan: #4FD1C5;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--land-bg);
    color: var(--land-text);
    overflow: hidden;
    margin-bottom: 0;
    /* True full-bleed, edge to edge, regardless of how deeply nested this
       is inside .training-page's max-width:1100px/centered wrapper or
       <main class="page">'s own padding (style.css) -- neither is safe
       to change globally since other pages rely on them. This is the
       standard "break a child out of a centered, padded ancestor"
       technique: 50vw/-50vw cancels out to exactly the viewport width,
       no matter what padding or max-width sits between this element and
       <body>. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Cancels <main class="page">'s 24px padding + .training-page's own
       8px top padding, so this section sits flush against the topbar
       instead of floating in a visible gap of page background. */
    margin-top: -32px;
}
.tr-landing, .tr-landing * { box-sizing: border-box; }

.tr-land-split { display: flex; min-height: 100vh; }

.tr-land-stage {
    flex: 1.3;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 64px;
    background:
        radial-gradient(ellipse 900px 500px at 20% 15%, rgba(242,169,59,0.07), transparent 60%),
        var(--land-panel-2);
    border-right: 1px solid var(--land-line);
    overflow: hidden;
}
.tr-land-brand { position: relative; z-index: 2; }
.tr-land-brand-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tr-land-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--land-amber);
    box-shadow: 0 0 12px 2px rgba(242,169,59,0.6);
}
.tr-land-brand-mark span {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--land-text-dim);
}
.tr-land-wordmark {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 76px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 18px 0 14px;
    color: var(--land-text);
}
.tr-land-sub {
    display: block;
    font-weight: 500;
    font-size: 24px;
    color: var(--land-text-dim);
    letter-spacing: 0;
    margin-top: 6px;
}
.tr-land-tagline { max-width: 380px; color: var(--land-text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
.tr-land-cluster { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 28px; margin: 40px 0; }
.tr-land-gauge { position: relative; width: 168px; height: 168px; }
.tr-land-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-land-gauge-track { fill: none; stroke: var(--land-line); stroke-width: 6; }
.tr-land-gauge-fill {
    fill: none;
    stroke: var(--land-amber);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 402;
    stroke-dashoffset: 402;
    animation: tr-land-sweep 1.8s cubic-bezier(.22,.9,.3,1) 0.3s forwards;
    filter: drop-shadow(0 0 6px rgba(242,169,59,0.5));
}
@keyframes tr-land-sweep { to { stroke-dashoffset: 90; } }
.tr-land-gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr-land-num { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--land-text); }
.tr-land-unit { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--land-text-faint); letter-spacing: 0.1em; margin-top: 4px; }
.tr-land-readouts { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.tr-land-readout-row { display: flex; align-items: baseline; gap: 10px; font-family: 'Space Mono', monospace; font-size: 12px; }
.tr-land-k { color: var(--land-text-faint); min-width: 92px; letter-spacing: 0.04em; }
.tr-land-v { color: var(--land-text); font-size: 13px; }
.tr-land-v.tr-land-up { color: var(--land-cyan); }
.tr-land-waveform { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 3px; height: 32px; margin-top: 6px; }
.tr-land-waveform span {
    width: 3px;
    background: var(--land-cyan);
    opacity: 0.55;
    border-radius: 1px;
    animation: tr-land-bar 1.6s ease-in-out infinite;
}
@keyframes tr-land-bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.tr-land-foot-note {
    position: relative;
    z-index: 2;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--land-text-faint);
    letter-spacing: 0.04em;
    border-top: 1px solid var(--land-line);
    padding-top: 18px;
}

/* ---- Middle column: new Log in / Sign up pitch ---- */
.tr-land-middle {
    flex: 1;
    min-width: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--land-bg);
    text-align: center;
}
.tr-land-middle-inner { width: 100%; max-width: 360px; }
.tr-land-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.08;
    color: var(--land-amber);
    margin: 0 0 32px;
}
.tr-land-checklist {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.tr-land-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--land-text-dim);
    line-height: 1.4;
}
.tr-land-checklist svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--land-cyan);
    background: rgba(79,209,197,0.12);
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
.tr-land-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tr-land-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .15s ease, transform .1s ease, background .15s ease, border-color .15s ease;
}
.tr-land-btn--filled { background: var(--land-amber); color: #072522; }
.tr-land-btn--filled:hover { filter: brightness(1.08); }
.tr-land-btn--filled:active { transform: translateY(1px); }
.tr-land-btn--outline { background: transparent; color: var(--land-cyan); border-color: var(--land-amber-dim); }
.tr-land-btn--outline:hover { background: rgba(79,209,197,0.08); border-color: var(--land-cyan); }

/* ---- Right column: How It Works, copied verbatim ---- */
.tr-land-how {
    flex: 1.1;
    min-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 44px;
    background: var(--land-panel-2);
    border-left: 1px solid var(--land-line);
    overflow: hidden;
}
.tr-land-eyebrow {
    position: relative; z-index: 2;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--land-text-dim);
    margin-bottom: 10px;
}
.tr-land-how h2 {
    position: relative; z-index: 2;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
    color: var(--land-text);
}
.tr-land-steps { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.tr-land-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--land-panel);
    border: 1px solid var(--land-line);
    border-radius: 10px;
    padding: 14px 16px;
    opacity: 0.4;
    transform: translateX(8px);
    transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.tr-land-step.active {
    opacity: 1;
    transform: translateX(0);
    border-color: var(--land-amber-dim);
    box-shadow: 0 0 20px -8px rgba(79,209,197,0.4);
}
.tr-land-step-num {
    flex-shrink: 0;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--land-text-faint);
    letter-spacing: 0.1em;
    padding-top: 2px;
    transition: color .5s ease;
}
.tr-land-step.active .tr-land-step-num { color: var(--land-cyan); }
.tr-land-step h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--land-text); }
.tr-land-step p { font-size: 11.5px; color: var(--land-text-dim); line-height: 1.45; margin: 0; }

@media (max-width: 1150px) and (min-width: 861px) {
    .tr-land-stage { flex: 1; }
    .tr-land-how { flex: 0.85; min-width: 260px; padding: 40px 28px; }
}
@media (max-width: 860px) {
    .tr-land-split { flex-direction: column; }
    .tr-land-stage { border-right: none; border-bottom: 1px solid var(--land-line); padding: 40px 32px; }
    .tr-land-wordmark { font-size: 52px; }
    .tr-land-cluster { display: none; }
    .tr-land-middle { min-width: 0; padding: 32px 24px; }
    .tr-land-how { border-left: none; border-top: 1px solid var(--land-line); padding: 40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-land-gauge-fill, .tr-land-waveform span { animation: none; }
}

/* ---------- Reveal-on-scroll (shared by every section below) ---------- */
/* IntersectionObserver in training.js adds .is-visible; everything
   starts faded/offset and settles into place once scrolled to. Kept to
   a single cheap transform+opacity pair -- no layout-affecting
   properties -- so this stays smooth even with many nodes on screen. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible { transition: none; transform: none; opacity: 1; }
}

/* ================= Hero ================= */
.tr-hero {
    padding: 72px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.tr-eyebrow {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-text);
    background: var(--brand-bg);
    border: 1px solid var(--brand-dim);
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.tr-hero h1 {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -.01em;
    margin: 0 0 20px;
    color: var(--text);
}
.tr-hero h1 span {
    color: var(--brand-text);
}
.tr-hero .tr-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 40px;
}
.tr-stat-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tr-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 28px;
    min-width: 190px;
}
.tr-stat .tr-stat-num {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    color: var(--brand-text);
    line-height: 1;
}
.tr-stat .tr-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}
.tr-stat--you {
    border-color: var(--attention);
    background: var(--attention-bg);
}
.tr-stat--you .tr-stat-num { color: var(--attention); }

/* ================= Section shell (shared) ================= */
.tr-section {
    padding: 64px 0;
    border-bottom: 1px solid var(--border);
}
.tr-section:last-of-type { border-bottom: none; }
.tr-kicker {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
}
.tr-section h2 {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    margin: 0 0 14px;
    color: var(--text);
}
.tr-section > .tr-lede {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 680px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* ================= Channel cards (Text / Call / Email) ================= */
.tr-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 860px) {
    .tr-channels { grid-template-columns: 1fr; }
}
.tr-channel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tr-channel-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-dim);
}
.tr-channel-card--call .tr-channel-icon { background: var(--attention-bg); border-color: var(--attention); }
.tr-channel-card--email .tr-channel-icon { background: rgba(167, 139, 250, .14); border-color: var(--violet); }
.tr-channel-card h3 {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}
.tr-channel-card p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* Mini per-channel flow diagram -- a horizontal row of steps with an
   animated pulse that travels step-to-step on a loop (training.js adds
   .tr-mini-active to one step at a time; CSS just handles the visual
   state, JS owns the timing so all three cards can run independently). */
.tr-mini-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.tr-mini-step {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 9px;
    white-space: nowrap;
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.tr-mini-step.tr-mini-active {
    background: var(--brand-bg);
    border-color: var(--brand-dim);
    color: var(--brand-text);
    transform: translateY(-2px);
}
.tr-channel-card--call .tr-mini-step.tr-mini-active { background: var(--attention-bg); border-color: var(--attention); color: var(--attention); }
.tr-channel-card--email .tr-mini-step.tr-mini-active { background: rgba(167,139,250,.16); border-color: var(--violet); color: var(--violet); }
.tr-mini-arrow {
    color: var(--text-faint);
    font-size: 12px;
}

/* ================= The big journey diagram ================= */
.tr-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* A generic connector: a short vertical animated line between two rows.
   The dash-flow animation suggests movement/direction without being
   busy -- a slow, subtle marching-ants effect on a single line. */
.tr-connector {
    width: 2px;
    min-height: 34px;
    background: repeating-linear-gradient(to bottom, var(--brand-dim) 0 6px, transparent 6px 12px);
    background-size: 2px 24px;
    animation: tr-flow 1.1s linear infinite;
    position: relative;
}
.tr-connector--split { min-height: 26px; }
@keyframes tr-flow {
    from { background-position: 0 0; }
    to { background-position: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-connector { animation: none; }
}

.tr-connector-label {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    margin: 6px 0;
    text-align: center;
    max-width: 320px;
}
.tr-connector-label--warn { color: var(--attention); border-color: var(--attention); }
.tr-connector-label--danger { color: var(--hot); border-color: var(--hot); }
.tr-connector-label--brand { color: var(--brand-text); border-color: var(--brand-dim); }

/* A node: the basic box every stage of the journey is drawn as. */
.tr-node {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    min-width: 190px;
    max-width: 320px;
}
.tr-node-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
}
.tr-node-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.tr-node--start { border-color: var(--brand-dim); background: var(--brand-bg); }
.tr-node--start .tr-node-title { color: var(--brand-text); }
.tr-node--success { border-color: #2f9e5f; background: var(--green-bg); }
.tr-node--success .tr-node-title { color: var(--green-text); }
.tr-node--final-sold { border-color: #2f9e5f; background: var(--green-bg); box-shadow: 0 0 0 3px rgba(74,222,128,.08); }
.tr-node--final-sold .tr-node-title { color: var(--green-text); }
.tr-node--final-lost { border-color: var(--hot); background: var(--hot-bg); }
.tr-node--final-lost .tr-node-title { color: var(--hot); }
.tr-node--pending { border-color: var(--attention); background: var(--attention-bg); }
.tr-node--pending .tr-node-title { color: var(--attention); }
.tr-node--compliance { border-color: var(--text-faint); background: var(--surface-2); }
.tr-node--compliance .tr-node-title { color: var(--text-muted); }
.tr-node--manual {
    border: 1.5px dashed var(--gold);
    background: rgba(234, 179, 8, .08);
}
.tr-node--manual .tr-node-title { color: var(--gold); }
.tr-node--voicemail { border-color: var(--attention); }
.tr-node--parallel { border-color: var(--violet); background: rgba(167,139,250,.08); }
.tr-node--parallel .tr-node-title { color: var(--violet); }

/* Attempt tracker chips -- shown under "Reached, no appointment set" */
.tr-attempts {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.tr-attempt-chip {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 11px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--text-faint);
    background: var(--surface-2);
}
.tr-attempt-chip.is-lit {
    border-color: var(--brand-dim);
    color: var(--brand-text);
    background: var(--brand-bg);
}

/* Branch row -- two or more lanes side by side, each its own vertical
   mini-flow, connected up top to a single incoming connector and (via
   .tr-branch-bar, a simple horizontal splitter bar) fanned out visually. */
.tr-branch {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.tr-branch-lane {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 220px;
    max-width: 340px;
    gap: 0;
}
.tr-lane-tag {
    font-family: 'Space Mono', 'Inter', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* The splitter bar: a horizontal line spanning the branch's lanes, with
   a short vertical stub dropping into each lane -- the classic
   flowchart "one line becomes many" shape, built from plain borders. */
.tr-splitter {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 26px;
}
.tr-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--border);
}
.tr-splitter-drop {
    position: absolute;
    top: 0;
    width: 2px;
    height: 26px;
    background: var(--border);
}

/* Loop-back connector (6-hour reset, no-show re-enrollment) -- a dashed
   curved arrow rendered as a small inline SVG, styled to match. */
.tr-loopback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
}
.tr-loopback svg { color: var(--attention); }
.tr-loopback .tr-connector-label { margin: 0; }

/* Racing pair (email escalation's two parallel cadences) */
.tr-race {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.tr-race-vs {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-faint);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Merge point -- two incoming lines collapse into one node underneath;
   drawn as the mirror image of .tr-splitter. */
.tr-merger {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 26px;
}
.tr-merger::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--brand-dim);
}
.tr-merger-drop {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 26px;
    background: var(--brand-dim);
}

/* Manual-touchpoint callout strip at the very end of the diagram */
.tr-manual-strip {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.tr-manual-card {
    border: 1.5px dashed var(--gold);
    background: rgba(234, 179, 8, .07);
    border-radius: 16px;
    padding: 20px 26px;
    max-width: 260px;
    text-align: center;
}
.tr-manual-card .tr-manual-emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.tr-manual-card h4 {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 20px;
    margin: 0 0 6px;
    color: var(--gold);
}
.tr-manual-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Closing banner */
.tr-closer {
    text-align: center;
    padding: 80px 0 40px;
}
.tr-closer h2 {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 14px;
}
.tr-closer p {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .tr-hero { padding: 48px 0 40px; }
    .training-page { padding: 8px 16px 100px; }
    .tr-branch { gap: 16px; }
}