/**
 * Techromatic — Homepage Brand Styles
 * Namespace: .tr-* (Techromatic-specific)
 *
 * Palette (all hardcoded hex values live here, not in the parent):
 *   Ivory:          #FBFCEF  — primary background
 *   Lavender:       #CECAE2  — secondary light surface
 *   Celadon:        #BAD5BD  — tertiary light surface (swingable)
 *   Evergreen:      #0D2C11  — primary text, dark CTA bg
 *   Lime Green:     #3ACD48  — CTA buttons, hover accent
 *   Indigo Velvet:  #3D3172  — eyebrow badges, accent text, list borders
 *
 * Section rhythm: Ivory → Lavender → Celadon → Ivory → Lavender → Celadon → Dark
 */

/* ===================================================================
   EYEBROW PILL VARIANTS
   Lavender = problem / context framing (pain, cases sections)
   Celadon  = operational / process sections
   =================================================================== */

/* Lavender bracket — problem framing eyebrows */
.tr-eyebrow--indigo {
    color: var(--mv-color-indigo);
    background: var(--tr-lav-muted);
}

/* Celadon bracket — operational / process eyebrow */
.tr-eyebrow--celadon {
    color: var(--mv-color-evergreen);
    background: var(--tr-cel-soft);
}

/* ===================================================================
   HERO — Ivory base, dual atmospheric gradient blobs
   Celadon top-right + Lavender bottom-left
   =================================================================== */

.mv-hero.tr-hero {
    /* Pull hero up into the site-content padding area so the gradient
       background fills behind the floating pill header */
    margin-top: calc(-1 * (var(--mv-header-top) + var(--mv-header-height) + 24px));
    /* Full viewport height — border-box ensures padding is INCLUDED in 100vh */
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Restore content offset: header clearance only; no extra breathing room needed */
    padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 32px);
    padding-bottom: 40px;
    background-color: var(--mv-color-ivory);
    background-image:
        linear-gradient(
            135deg,
            rgba(140, 195, 148, 0.35) 0%,
            transparent 35%,
            transparent 55%,
            rgba(140, 128, 185, 0.35) 100%
        );
    position: relative;
    overflow: hidden;
}

/* Canvas ASCII field */
#tr-hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    /* width/height controlled exclusively by JS — no CSS override */
}

/* Keep text above canvas — centered layout */
.mv-hero.tr-hero .mv-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.tr-hero .mv-hero__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h1);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h1);
    line-height: var(--tr-leading-h1);
    max-width: 760px;
    margin: 0 auto 24px;
    color: var(--mv-color-evergreen);
}

.tr-hero .mv-hero__subtitle {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
    max-width: 560px;
    margin: 0 auto 36px;
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA 4.6:1 on ivory (was --mv-text-60, 3.9:1 — fail for 18px normal) */
}

/* Actions row — centered, injected via append_html */
.mv-hero.tr-hero .mv-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tr-hero .mv-eyebrow {
    margin-bottom: 20px;
    color: var(--mv-color-indigo);
    background: var(--tr-lav-muted);
    border-color: var(--tr-ind-muted);
}

/* Hero CTAs — Evergreen fill / Ivory text / Lime accent (light bg context) */
.mv-hero.tr-hero .mv-ascii-btn {
    --ascii-bg:       var(--mv-color-evergreen);
    --ascii-bg-hover: #122e16;
    --ascii-color:    var(--mv-color-ivory);
    --ascii-accent:   var(--mv-color-lime);
    font-size: 15px;
    padding: 15px 28px;
}

/* Hero stroke CTA — Ivory fill so text is readable over ASCII canvas */
.mv-hero.tr-hero .mv-ascii-btn--stroke,
.mv-hero.tr-hero .mv-ascii-btn--stroke:hover,
.mv-hero.tr-hero .mv-ascii-btn--stroke:focus-visible {
    --ascii-color:  var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
    background: var(--mv-color-ivory) !important;
}

/* ===================================================================
   METRICS BAND — compose-013 layout, Indigo Velvet background.
   Centered eyebrow + headline above a light-purple inset panel.
   Inside: 4 equal-width KPI columns, centered, vertical dividers.
   =================================================================== */

.tr-metrics-band {
    background: linear-gradient(150deg, #4c4191 0%, var(--mv-color-indigo) 48%, #2d2360 100%);
    position: relative;
    z-index: 2;
    padding: 80px 0 88px;
}

/* ── Header: centered eyebrow + headline above the panel ── */
.tr-metrics-band__header {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tr-metrics-band__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-ivory);
    background: var(--tr-lav-muted);
    border: none;
    padding: var(--tr-eyebrow-padding);
    border-radius: 3px;
    margin-bottom: 0; /* gap on parent flex handles spacing */
    position: relative;
}

.tr-metrics-band__eyebrow::before,
.tr-metrics-band__eyebrow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: 0.65;
    pointer-events: none;
}

.tr-metrics-band__eyebrow::before {
    left: 0;
    border-left: 1px solid currentColor;
}

.tr-metrics-band__eyebrow::after {
    right: 0;
    border-right: 1px solid currentColor;
}

.tr-metrics-band__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-ivory);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    margin: 0;
}

/* ── Inset panel — light-purple frosted container (compose-013 surface) ── */
.tr-metrics-band__panel {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-metrics-band__panel > .tr-metrics-band__grid {
    background: var(--tr-iv-subtle);
    border: 1px solid var(--tr-iv-muted);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
}

/* ── Grid: strict repeat(4, 1fr) — equal columns, no gap ── */
.tr-metrics-band__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* ── Each KPI cell: centered, equal padding, border-right divider ── */
.tr-metrics-band__item {
    padding: 36px 28px;
    border-right: 1px solid var(--tr-iv-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tr-metrics-band__item:last-child {
    border-right: none;
}

/* ── Glitch keyframes (exp-015 pattern) — 3s cycle, fires at tail ── */
@keyframes trKpiGlitch1 {
    0%,  88%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
    90%  { clip-path: inset(8%  0 58% 0); transform: translateX(-5px); }
    92%  { clip-path: inset(52% 0 22% 0); transform: translateX( 5px); }
    95%  { clip-path: inset(30% 0 48% 0); transform: translateX(-3px); }
    97%  { clip-path: inset(72% 0 6%  0); transform: translateX( 4px); }
}

@keyframes trKpiGlitch2 {
    0%,  84%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
    86%  { clip-path: inset(22% 0 48% 0); transform: translateX( 4px); }
    89%  { clip-path: inset(60% 0 14% 0); transform: translateX(-4px); }
    93%  { clip-path: inset(40% 0 36% 0); transform: translateX( 2px); }
    96%  { clip-path: inset(15% 0 65% 0); transform: translateX(-3px); }
}

/* ── Value (the big number) ── */
.tr-metrics-band__value {
    font-family: var(--tr-font-display);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h1);
    color: var(--mv-color-ivory);
    line-height: var(--tr-leading-display);
    display: block;
    position: relative;
}

/* Glitch layers — Lime Green + Lavender channels */
.tr-metrics-band__value::before,
.tr-metrics-band__value::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--tr-font-display);
    font-size: inherit;
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h1);
    line-height: var(--tr-leading-display);
    text-align: center;
    pointer-events: none;
}

.tr-metrics-band__value::before {
    color: var(--mv-color-lime);
}

.tr-metrics-band__value::after {
    color: var(--tr-lav-strong);
}

@media (prefers-reduced-motion: no-preference) {
    .tr-metrics-band__value::before { animation: trKpiGlitch1 3s infinite; }
    .tr-metrics-band__value::after  { animation: trKpiGlitch2 3s infinite; }
}

/* ── Label (uppercase descriptor) ── */
.tr-metrics-band__label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    text-transform: uppercase;
    letter-spacing: var(--tr-tracking-caps);
    color: var(--tr-light-tertiary); /* 0.65 — WCAG AA 5.0:1 on dark; labels are 12px uppercase (AA-large threshold) */
    display: block;
    margin-top: 8px;
}

/* ── Count-up reveal animation ── */
@keyframes trMetricReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tr-metrics-band__item {
    opacity: 0;
}

.tr-metrics-band__item.is-counted {
    animation: trMetricReveal 0.7s var(--tr-ease-spring) forwards;
}

.tr-metrics-band__item.is-counted:nth-child(2) { animation-delay: 120ms; }
.tr-metrics-band__item.is-counted:nth-child(3) { animation-delay: 240ms; }
.tr-metrics-band__item.is-counted:nth-child(4) { animation-delay: 360ms; }

/* ── Note (monospace sub-line, Lime Green at 70%) ── */
.tr-metrics-band__note {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    color: var(--tr-lime-strong);
    display: block;
    margin-top: 6px;
    line-height: var(--tr-leading-label);
}

/* ===================================================================
   TECHROBOTIC CROSS-SELL — contained callout box
   Lives within the content area between metrics band and divider.
   =================================================================== */

.tr-crosssell {
    background: var(--mv-color-ivory);
    padding: 88px 0 0;
}

.tr-crosssell__box {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 48px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(135deg, var(--mv-color-indigo) 0%, #4a3d8a 100%);
    border: 1px solid var(--tr-ind-muted);
    border-radius: var(--tr-radius-md);
    position: relative;
    overflow: hidden;
}

.tr-crosssell__field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.tr-crosssell__content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.tr-crosssell__action {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tr-crosssell__eyebrow {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--mv-color-lime);
    margin-bottom: 12px;
}

.tr-crosssell__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-ivory);
    margin: 0 0 12px;
}

.tr-crosssell__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-iv-strong);
    margin: 0;
    max-width: 620px;
}

.tr-crosssell__body strong {
    color: var(--mv-color-ivory);
    font-weight: var(--tr-weight-bold);
}

.tr-crosssell__action .mv-ascii-btn {
    --ascii-bg: var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color: var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
}

@media (max-width: 768px) {
    .tr-crosssell__box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 28px 24px;
    }
}

/* ===================================================================
   SECTION DIVIDER — animated line-draw <hr>
   =================================================================== */

.tr-section-divider {
    display: none;
}

/* ===================================================================
   PAIN SECTION — Celadon surface with dot-grid texture
   =================================================================== */

.tr-pain-section {
    padding: var(--tr-space-section-xl) 0;
    background: var(--mv-color-ivory);
    border-bottom: 1px solid var(--mv-hairline);
}

.tr-pain-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Sticky header — floats alongside pain nodes as user scrolls */
.tr-pain-section__primary {
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 40px);
}

.tr-pain-section__primary .mv-eyebrow {
    margin-bottom: 20px;
}

.tr-pain-section__primary .mv-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    margin-bottom: 20px;
    color: var(--mv-color-evergreen);
}

.tr-pain-section__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA 4.6:1 on ivory (was --mv-text-60, 3.9:1 — fail for 16px body) */
    margin: 0;
}

/* ── Nodes column (compose-028 pattern, numberless) ── */
.tr-pain-nodes {
    position: relative;
    padding-left: 32px;
}

/* Vertical connector — per-item so the line stops exactly at the last node.
   Each segment runs from this node's center to the next node's center:
   top: 15px (node center) + height: calc(100% + 28px) reaches next node center. */
.tr-pain-nodes__item {
    position: relative;
    margin-bottom: 28px;
    cursor: default;
}

.tr-pain-nodes__item:last-child {
    margin-bottom: 0;
}

.tr-pain-nodes__item::after {
    content: '';
    position: absolute;
    left: -28px;   /* center = -28 + 1 = -27px = node center (-32 + 5) */
    top: 15px;     /* matches node center: top(10) + radius(5) = 15 */
    height: calc(100% + 28px);
    width: 2px;
    background: var(--tr-ind-muted);
    border-radius: 2px;
    pointer-events: none;
}

.tr-pain-nodes__item:last-child::after {
    display: none;
}

/* Node dot — vertically centered with first line of title text.
   H5 line-height 1.35 × ~22px = ~29.7px → line center at ~14.85px.
   Node is 10px tall → top = 14.85 - 5 ≈ 10px → center at 15px. */
.tr-pain-nodes__node {
    position: absolute;
    left: -32px;   /* left edge at 32px - 32px = 0px from container left */
    top: 10px;     /* center = top(10) + radius(5) = 15px ≈ H5 first-line center */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mv-color-indigo);
    box-shadow: 0 0 0 3px var(--tr-ind-border);
    transition: transform 0.3s var(--tr-ease-spring),
                box-shadow 0.3s ease;
    z-index: 1;
}

.tr-pain-nodes__item:hover .tr-pain-nodes__node {
    transform: scale(1.5);
    box-shadow: 0 0 0 5px var(--tr-ind-muted);
}

.tr-pain-nodes__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 6px;
    transition: color 0.2s ease;
}

.tr-pain-nodes__item:hover .tr-pain-nodes__title {
    color: var(--mv-color-indigo);
}

.tr-pain-nodes__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA 4.6:1 on ivory (was 0.58, ~3.8:1 — fail for 14px body) */
    margin: 0;
    transition: color 0.2s ease;
}

.tr-pain-nodes__item:hover .tr-pain-nodes__body {
    color: var(--tr-text-secondary); /* 0.75 — hover state (was 0.78, already passing — nearest token) */
}

/* ===================================================================
   CASE SNAPSHOTS — Overlap-up sticky cards.
   Cards use position:sticky so each one scrolls up and covers the
   previous. Z-index ascending (1→3) makes later cards sit on top.
   Pure CSS — no JS animation required.
   =================================================================== */

.tr-cases-section {
    background: var(--mv-color-ivory);
    padding-top: var(--tr-space-section-xl);
    border-top: 1px solid var(--tr-ev-subtle);
}

.tr-cases-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-cases-section__header {
    margin-bottom: 56px;
}

.tr-cases-section__header .mv-eyebrow {
    margin-bottom: 20px;
}

.tr-cases-section__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA 4.6:1 on ivory (was --mv-text-60, 3.9:1 — fail for 16px body) */
    max-width: 560px;
    margin-top: 16px;
    margin-bottom: 0;
}

.tr-cases-section__heading {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0;
}

/* ── Stack container ───────────────────────────────────────── */

.tr-cases-stack {
    position: relative;
}

/* Dot indicators — hidden on desktop, shown on mobile via media query */
.tr-cases-dots {
    display: none;
}

/* ── Cards — sticky overlap-up ─────────────────────────────── */

.tr-case-entry {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px var(--tr-ev-border);
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 40px);
}

.tr-case-entry--green {
    background: var(--mv-color-evergreen);
    z-index: 1;
}

.tr-case-entry--purple {
    background: var(--mv-color-indigo);
    z-index: 2;
}

.tr-case-entry--celadon {
    background: var(--mv-color-celadon);
    z-index: 3;
}

/* Gap between cards in the scroll flow */
.tr-case-entry + .tr-case-entry {
    margin-top: 56px;
}

/* ── Celadon card overrides (light bg) ─────────────────────── */

.tr-case-entry--celadon .tr-case-stats {
    border-right-color: var(--tr-ev-border);
}

.tr-case-entry--celadon .tr-case-stat__num {
    color: var(--mv-color-indigo);
}

.tr-case-entry--celadon .tr-case-stat__lbl {
    color: var(--tr-text-tertiary); /* 0.65 — 11px label on celadon needs AA 4.5:1 */
}

.tr-case-entry--celadon .tr-case-content__company {
    color: var(--tr-text-tertiary); /* 0.65 — raised from 0.60; 12px uppercase on celadon */
}

.tr-case-entry--celadon .tr-case-content__industry {
    color: var(--tr-text-tertiary); /* 0.65 — 12px industry label on celadon needs AA 4.5:1 */
}

.tr-case-entry--celadon .tr-case-content__title {
    color: var(--mv-color-evergreen);
}

.tr-case-entry--celadon .tr-case-split {
    border-top-color: var(--tr-ev-border);
}

.tr-case-entry--celadon .tr-case-split__badge--before {
    background: var(--tr-ind-muted);
    color: var(--mv-color-indigo);
}

.tr-case-entry--celadon .tr-case-split__badge--after {
    background: var(--tr-ev-muted);
    color: var(--mv-color-evergreen);
}

.tr-case-entry--celadon .tr-case-split__col p {
    color: var(--tr-text-tertiary); /* 0.65 — raised from 0.55; 14px body text on celadon needs AA */
}

.tr-case-entry--celadon .tr-case-quote {
    border-top-color: var(--tr-ev-border);
}

.tr-case-entry--celadon .tr-case-quote p {
    color: var(--tr-ev-strong);
}

.tr-case-entry--celadon .tr-case-quote cite {
    color: var(--tr-text-tertiary); /* 0.65 — 12px citation on celadon needs AA 4.5:1 */
}

/* ── Card inner layout ─────────────────────────────────────── */

.tr-case-entry__inner {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 0 56px;
    padding: 56px 60px;
}

/* ── Stats column ──────────────────────────────────────────── */

.tr-case-stats {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 4px;
    padding-right: 48px;
    border-right: 1px solid var(--tr-iv-border);
    white-space: nowrap;
}

.tr-case-stat__num {
    display: block;
    font-family: var(--tr-font-display);
    font-size: clamp(44px, 3.8vw, 64px);
    font-weight: var(--tr-weight-bold);
    line-height: var(--tr-leading-display);
    color: var(--mv-color-lime);
    letter-spacing: var(--tr-tracking-h3);
}

.tr-case-entry--purple .tr-case-stat__num {
    color: var(--mv-color-celadon);
}

.tr-case-stat__lbl {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    text-transform: uppercase;
    letter-spacing: var(--tr-tracking-caps-wide);
    color: var(--tr-light-tertiary); /* 0.65 — 11px uppercase label on dark needs AA 4.5:1 (5.0:1) */
    margin-top: 6px;
    line-height: var(--tr-leading-snug);
}

/* ── Content column ────────────────────────────────────────── */

.tr-case-content__meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.tr-case-content__company {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tr-tracking-wide);
    color: var(--tr-cel-strong);
}

.tr-case-entry--purple .tr-case-content__company {
    color: var(--tr-lav-strong);
}

.tr-case-content__industry {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--tr-light-tertiary); /* 0.65 — 12px industry label on dark needs AA 4.5:1 (5.0:1) */
}

.tr-case-content__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-ivory);
    margin-top: 8px;
    margin-bottom: 16px;
}

/* ── Before / After split ─────────────────────────────────── */

.tr-case-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-top: 16px;
    border-top: 1px solid var(--tr-iv-subtle);
    margin-bottom: 24px;
}

.tr-case-split__badge {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tr-tracking-caps-wide);
    border-radius: 3px;
    padding: 3px 9px;
    margin-bottom: 10px;
}

.tr-case-split__badge--before {
    background: var(--tr-lav-muted);
    color: var(--mv-color-ivory);
}

.tr-case-split__badge--after {
    background: var(--tr-cel-muted);
    color: var(--mv-color-ivory);
}

.tr-case-split__col p {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-secondary); /* 0.75 — body text on dark needs strong readability */
    margin: 0;
}

/* ── Pullquote ────────────────────────────────────────────── */

.tr-case-quote {
    margin: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--tr-iv-subtle);
}

.tr-case-quote p {
    font-family: var(--tr-font-display);
    font-style: italic;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-iv-strong);
    margin: 0 0 8px;
}

.tr-case-quote cite {
    font-family: var(--tr-font-body);
    font-style: normal;
    font-size: var(--tr-size-label);
    font-weight: 400;
    letter-spacing: var(--tr-tracking-caps-sm);
    color: var(--tr-light-tertiary); /* 0.65 — 12px citation on dark needs AA 4.5:1 (5.0:1) */
}

/* ===================================================================
   CTA FINAL — Evergreen dark closing section (unchanged)
   =================================================================== */

.tr-cta-final {
    background: var(--mv-color-ivory);
    padding-bottom: var(--tr-space-section-xl);
    text-align: center;
}

.tr-cta-final__inset {
    background: linear-gradient(150deg, #1a4d22 0%, var(--mv-color-evergreen) 50%, #091e0c 100%);
    border-radius: 20px;
    padding: 96px 80px;
    position: relative;
    overflow: hidden;
}

/* Subtle lime glow */
.tr-cta-final__inset::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 65% at 50% 35%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Dot-grid texture */
.tr-cta-final__inset::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.04;
    pointer-events: none;
    border-radius: inherit;
}

/* Button colors — ivory bg on dark inset */
.tr-cta-final__inset .mv-ascii-btn {
    --ascii-bg:       var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-indigo);
}

.tr-cta-final__inner {
    position: relative;
    z-index: 1;
}

.tr-cta-final__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--tr-lime-strong);
    background: var(--tr-lime-subtle);
    border: none;
    padding: var(--tr-eyebrow-padding);
    border-radius: 3px;
    margin-bottom: 20px;
    position: relative;
}

.tr-cta-final__eyebrow::before,
.tr-cta-final__eyebrow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: 0.65;
    pointer-events: none;
}

.tr-cta-final__eyebrow::before {
    left: 0;
    border-left: 1px solid currentColor;
}

.tr-cta-final__eyebrow::after {
    right: 0;
    border-right: 1px solid currentColor;
}

.tr-cta-final__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-ivory);
    max-width: 780px;
    margin: 0 auto 20px;
}

.tr-cta-final__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-secondary); /* 0.75 — body text on dark CTA band */
    max-width: 560px;
    margin: 0 auto 36px;
}

.tr-cta-final__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ===================================================================
   CTA BAND
   Ivory outer section, dark-green gradient inset container.
   =================================================================== */

.tr-cta-band {
    background: var(--mv-color-ivory);
    padding: var(--tr-space-section-xl) 0;
}

.tr-cta-band__wrap {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-cta-band__inset {
    background: linear-gradient(150deg, #1a4d22 0%, var(--mv-color-evergreen) 50%, #091e0c 100%);
    border-radius: 20px;
    padding: 96px 80px;
    position: relative;
    overflow: hidden;
}

/* Subtle lime glow */
.tr-cta-band__inset::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 65% at 50% 35%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Dot-grid texture */
.tr-cta-band__inset::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.04;
    pointer-events: none;
    border-radius: inherit;
}

.tr-cta-band__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Terminal code motif — slow upward scroll */
.tr-cta-band__code-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.tr-cta-band__code-track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    animation: trCodeScroll 60s linear infinite;
}

.tr-code-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 5%;
}

.tr-code-block.--right {
    align-items: flex-end;
    text-align: right;
}

.tr-code-block span {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-snug);
    color: var(--tr-lime-border);
    white-space: nowrap;
    letter-spacing: 0.02em;
    user-select: none;
}

@keyframes trCodeScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-cta-band__code-track { animation: none; }
}

/* Ivory-background button on dark green inset */
.tr-cta-band__btn.mv-ascii-btn {
    --ascii-bg:       var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-indigo);
}

/* ===================================================================
   RESPONSIVE — Tablet (≤1024px)
   =================================================================== */

@media (max-width: 1024px) {
    /* Hero centering — ensure symmetric padding */
    .mv-hero.tr-hero {
        align-items: center;
    }

    .mv-hero.tr-hero .mv-hero__inner {
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    .tr-pain-section__inner {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 0 24px;
    }

    .tr-pain-section__primary {
        position: static;
    }

    .tr-cases-section__inner {
        padding: 0 24px;
    }

    /* Case cards: keep sticky stack on tablet, single-column inner layout */
    .tr-case-entry__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 44px 40px;
    }

    .tr-case-stats {
        flex-direction: row;
        gap: 36px;
        border-right: none;
        border-bottom: 1px solid var(--tr-iv-border);
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 32px;
        margin-bottom: 0;
    }

}


/* ===================================================================
   RESPONSIVE — Mobile (≤768px)
   =================================================================== */

@media (max-width: 768px) {
    /* Disable sticky overlap on mobile — horizontal scroll instead */
    .tr-case-entry {
        position: static;
    }

    /* Hero inner: horizontal gutter to prevent text touching screen edges */
    .mv-hero.tr-hero .mv-hero__inner {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .tr-hero .mv-hero__headline {
        font-size: 40px;
    }

    .tr-hero .mv-hero__subtitle {
        font-size: var(--tr-size-body);
    }

    .tr-hero .mv-hero__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* KPI — 2×2 grid on mobile */
    .tr-metrics-band__header {
        padding: 0 16px;
        margin-bottom: 32px;
    }

    .tr-metrics-band__panel {
        padding: 0 16px;
    }

    .tr-metrics-band__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-metrics-band__item {
        padding: 28px 20px;
        border-bottom: 1px solid var(--tr-iv-muted);
    }

    /* 2nd column: no right border */
    .tr-metrics-band__item:nth-child(2n) {
        border-right: none;
    }

    /* Last row (items 3–4): no bottom border */
    .tr-metrics-band__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .tr-pain-section {
        padding: var(--tr-space-section-sm) 0;
    }

    .tr-pain-section__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 16px;
    }

    /* Case snapshots — horizontal scroll-snap carousel on mobile */
    .tr-cases-section {
        padding-top: var(--tr-space-section-sm);
    }

    .tr-cases-section__inner {
        padding: 0 16px;
    }

    .tr-cases-stack {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        /* Let cards bleed to screen edge for peek effect */
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hide scrollbar but keep functionality */
    .tr-cases-stack::-webkit-scrollbar { display: none; }
    .tr-cases-stack { -ms-overflow-style: none; scrollbar-width: none; }

    .tr-case-entry {
        flex: 0 0 calc(100vw - 48px);
        scroll-snap-align: center;
        margin-top: 0;
    }

    .tr-case-entry + .tr-case-entry {
        margin-top: 0;
    }

    .tr-case-entry__inner {
        padding: 28px 24px;
        gap: 20px;
    }

    .tr-case-stats {
        gap: 16px;
        flex-wrap: wrap;
        padding-bottom: 20px;
    }

    .tr-case-stat__num {
        font-size: 36px;
    }

    .tr-case-stat__lbl {
        margin-top: 4px;
    }

    .tr-case-content__title {
        margin-bottom: 16px;
    }

    /* Hide before/after on mobile — stats + quote tell the story */
    .tr-case-split {
        display: none;
    }

    .tr-case-quote {
        padding-top: 16px;
    }

    /* Dot indicators — visible on mobile only */
    .tr-cases-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 24px;
    }

    .tr-cases-dots__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--tr-ev-border);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .tr-cases-dots__dot.is-active {
        background: var(--mv-color-indigo);
        transform: scale(1.25);
    }

    /* CTA final */
    .tr-cta-final {
        padding-bottom: var(--tr-space-section-sm);
    }

    .tr-cta-final__inset {
        padding: 72px 40px;
        border-radius: 14px;
    }

    .tr-cta-final__inset .mv-ascii-btn {
        width: 100%;
        justify-content: center;
    }

    /* CTA Band — match content gutter, full-width green inset */
    .tr-cta-band__wrap {
        padding: 0 16px;
    }

    .tr-cta-band__inset {
        padding: 60px 28px;
        border-radius: 16px;
    }
}

/* ===================================================================
   ACCESSIBILITY — Focus-visible ring (homepage scope)
   Lime Green ring on all interactive elements for keyboard nav.
   =================================================================== */

.mv-ascii-btn:focus-visible {
    outline: 2px solid var(--mv-color-indigo);
    outline-offset: 3px;
}

/* ===================================================================
   HERO — Micro-proof strip
   Small attestation line rendered below CTA buttons, inside the hero.
   =================================================================== */

.tr-hero__micro-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: 500;
    letter-spacing: var(--tr-tracking-caps-sm);
    color: var(--tr-text-tertiary); /* 0.65 — 4.6:1 on ivory; 12px labels need AA 4.5:1 */
    gap: 0;
}

.tr-hero__micro-proof span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.tr-hero__micro-proof span + span::before {
    content: '·';
    margin: 0 10px;
    opacity: 0.5;
}


/* ===================================================================
   PILLARS — Scroll-driven 2-col sticky section
   Desktop: 240vh tall. Left panel sticky (header top + active text
   bottom + horizontal 3-segment progress bar). Right: full-bleed
   image crossfade. Mobile: static single-column stack.
   =================================================================== */

.tr-pillars-section {
    position: relative;
    height: 240vh;
    background: var(--mv-color-ivory);
    border-top: 1px solid var(--mv-hairline);
}

/* Sticky 2-col grid: [50% content] [50% image — full-bleed to viewport right]
   Gap absorbed into panel padding-right so the image takes exactly half the screen. */
.tr-pillars-section__grid {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

/* === LEFT PANEL (col 1) === */
.tr-pillars-panel {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    /* padding-top clears the sticky nav; 56px below nav = matches padding-bottom for parity */
    padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 40px);
    padding-right: 80px;  /* absorbs the former gap column */
    padding-bottom: 56px;
    /* Align copy left edge with nav pill's outer left border.
       Nav pill left = gutter (24px) on narrow viewports, (100vw - 1420px)/2 on wide. */
    padding-left: max(var(--mv-header-gutter), calc((100vw - 1420px) / 2));
    background: var(--mv-color-ivory);
}

.tr-pillars-panel__header {
    flex-shrink: 0;
    margin-bottom: 0;
}

.tr-pillars-panel__headline.mv-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin-bottom: 0;
}

/* === ACCESSIBILITY LIST (visually hidden, JS reads from it) === */
.tr-pillars-list--a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === BOTTOM GROUP: bar + active text pushed to panel bottom === */
.tr-pillars-panel__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* === HORIZONTAL PROGRESS BAR ===
   Single continuous fill (clip-path driven by JS) with 2 ivory dividers
   creating the visual 3-segment look. Gradient spans full bar width always. */
.tr-pillars-hbar {
    position: relative;
    height: 4px;
    background: var(--mv-border); /* grey track */
    border-radius: 2px;
}

/* Full-width lime→indigo gradient, progressively revealed from left by JS */
.tr-pillars-hbar__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--mv-color-lime), var(--mv-color-indigo));
    border-radius: 2px;
    clip-path: inset(0 100% 0 0); /* fully clipped on init; JS sets inset(0 X% 0 0) */
    will-change: clip-path;
}

/* Ivory dividers at 1/3 and 2/3 — create the visual segment gap over the gradient */
.tr-pillars-hbar__div {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    background: var(--mv-color-ivory);
    transform: translateX(-50%);
    z-index: 2;
}

.tr-pillars-hbar__div[data-div="1"] { left: calc(100% / 3); }
.tr-pillars-hbar__div[data-div="2"] { left: calc(200% / 3); }

/* === ACTIVE PILLAR TEXT === */
.tr-pillars-active {
    display: flex;
    flex-direction: column;
}

.tr-pillars-active__number {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--mv-color-indigo);
    margin-bottom: 8px;
}

.tr-pillars-active__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin: 0 0 12px;
}

.tr-pillars-active__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA 4.6:1 on ivory (was --mv-text-60, 3.9:1 — fail for 16px body) */
    margin: 0;
}

/* Fade transition when switching active pillar */
.tr-pillars-active--transitioning {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.tr-pillars-active--entering {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.32s ease 0.08s, transform 0.32s var(--tr-ease-spring) 0.08s;
}

/* === RIGHT MEDIA PANEL (col 2) — exactly 50% of screen width === */
.tr-pillars-media {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    background: var(--mv-color-evergreen);
}

/* Pillars scroll nudge — removed */

/* ASCII darkness canvas overlay — sits above images, renders only in darkest areas */
.tr-pillars-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: block;
}

/* Mobile canvases: hidden on desktop (desktop uses #tr-pillars-canvas inside .tr-pillars-media) */
.tr-pillars-canvas--mobile { display: none; }
@media (max-width: 768px) {
    .tr-pillars-canvas--mobile { display: block; }
}

/* Individual slides — crossfade via opacity */
.tr-pillars-media__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.65s ease;
}

.tr-pillars-media__slide--active {
    opacity: 1;
}

/* Source videos: hidden — frames are extracted and drawn to .tr-pillars-frame-canvas */
.tr-pillars-video {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Frame display canvas: fills slide, acts as the visible media */
.tr-pillars-media__slide .tr-pillars-frame-canvas {
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.04);
    transition: transform 0.65s var(--tr-ease-spring);
}

.tr-pillars-media__slide--active .tr-pillars-frame-canvas {
    transform: scale(1);
}

/* Legacy img rules kept for fallback */
.tr-pillars-media__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 0.65s var(--tr-ease-spring);
}

.tr-pillars-media__slide--active img {
    transform: scale(1);
}

/* Placeholder panels — replaced by real images when supplied */
.tr-pillars-media__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 40px 40px 56px; /* bottom matches left panel padding-bottom */
}

.tr-pillars-media__placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 47px, var(--tr-iv-wash) 48px),
        repeating-linear-gradient(90deg, transparent, transparent 47px, var(--tr-iv-wash) 48px);
    pointer-events: none;
}

.tr-pillars-media__placeholder--0 {
    background:
        radial-gradient(ellipse at 75% 25%, var(--mv-bg-celadon-subtle) 0%, transparent 65%),
        var(--mv-color-evergreen);
}

.tr-pillars-media__placeholder--1 {
    background:
        radial-gradient(ellipse at 25% 70%, var(--tr-ind-soft) 0%, transparent 65%),
        var(--mv-color-evergreen);
}

.tr-pillars-media__placeholder--2 {
    background:
        radial-gradient(ellipse at 65% 35%, var(--mv-bg-lavender-subtle) 0%, transparent 65%),
        var(--mv-color-evergreen);
}

.tr-pillars-media__placeholder-label {
    position: relative;
    z-index: 1;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-light-decorative); /* 0.40 — decorative placeholder label on dark */
}

/* Scroll hint chevron — replaced by .tr-pillars-nudge pill */
@media (min-width: 1025px) {
    .tr-pillars-media::after {
        content: none; /* hidden — nudge pill replaces this */
        position: absolute;
        bottom: 28px;
        left: 50%;
        width: 22px;
        height: 22px;
        border-right: 2.5px solid var(--tr-iv-mid);
        border-bottom: 2.5px solid var(--tr-iv-mid);
        transform: translateX(-50%) rotate(45deg);
        pointer-events: none;
        z-index: 4;
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
    }

    @media (prefers-reduced-motion: no-preference) {
        .tr-pillars-media::after {
            animation: trScrollHint 2.4s ease-in-out infinite;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .tr-pillars-media::after {
            opacity: 0.35;
        }
    }
}

@keyframes trScrollHint {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0)   rotate(45deg); }
    60%       { opacity: 0.85; transform: translateX(-50%) translateY(7px) rotate(45deg); }
}

/* === RESPONSIVE === */

/* Short viewports on desktop only (≤780px height, ≥1025px wide): exit scroll-driven sticky — show as normal static 2-col section */
@media (min-width: 1025px) and (max-height: 780px) {
    .tr-pillars-section {
        height: auto;
    }

    .tr-pillars-section__grid {
        position: static;
        height: auto;
    }

    /* Standard section padding — not the sticky nav-clearance formula */
    .tr-pillars-panel {
        padding-top: var(--tr-space-section-sm);
        padding-bottom: var(--tr-space-section-sm);
    }

    /* Ensure image panel fills reasonable height beside the pillar list */
    .tr-pillars-media {
        min-height: 400px;
    }

    /* CSS fallback: show first slide (JS also calls activate(0) via scrollable ≤ 0 path) */
    .tr-pillars-media__slide { opacity: 0; }
    .tr-pillars-media__slide--active { opacity: 1; }

    /* Hide interactive bar + active text — not needed in static mode */
    .tr-pillars-panel__bottom {
        display: none;
    }

    /* Reveal all 3 pillars as a styled vertical list with lime counters */
    .tr-pillars-list--a11y {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        counter-reset: pillar;
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
        list-style: none;
        padding: 0;
    }

    .tr-pillars-list--a11y li {
        counter-increment: pillar;
    }

    /* Lime "01 / 02 / 03" counter — mirrors active text number style */
    .tr-pillars-list--a11y li::before {
        content: '0' counter(pillar);
        display: block;
        font-family: var(--tr-font-body);
        font-size: var(--tr-size-label);
        font-weight: var(--tr-weight-heading);
        letter-spacing: var(--tr-tracking-wide);
        text-transform: uppercase;
        color: var(--mv-color-indigo);
        margin-bottom: 8px;
    }

    .tr-pillars-list--a11y h3 {
        font-family: var(--tr-font-display);
        font-size: var(--tr-size-h3);
        font-weight: var(--tr-weight-heading);
        letter-spacing: var(--tr-tracking-h3);
        line-height: var(--tr-leading-h3);
        color: var(--mv-color-evergreen);
        margin: 0 0 10px;
    }

    .tr-pillars-list--a11y p {
        font-family: var(--tr-font-body);
        font-size: var(--tr-size-body);
        line-height: var(--tr-leading-body);
        color: var(--tr-text-tertiary); /* 0.65 — WCAG AA on ivory (was --mv-text-60) */
        margin: 0;
    }
}

@media (max-width: 768px) {
    /* Disable scroll-driven sticky layout on mobile */
    .tr-pillars-section {
        height: auto;
    }

    .tr-pillars-section__grid {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Desktop image panel hidden on mobile — images are inline with each pillar card */
    .tr-pillars-media {
        display: none;
    }

    /* Panel: section padding top/bottom, 24px horizontal gutter */
    .tr-pillars-panel {
        padding: var(--tr-space-section-sm) 24px;
    }

    /* Hide the interactive bottom group on mobile */
    .tr-pillars-panel__bottom {
        display: none;
    }

    /* Show the a11y list as the visible content on mobile */
    .tr-pillars-list--a11y {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin-top: 32px;
    }

    /* Each pillar card: image+overlay on top, body text below */
    .tr-pillars-list--a11y li {
        list-style: none;
    }

    /* Image wrapper bleeds to panel edges (cancels the 24px gutter) */
    .tr-pillars-list__img-wrap {
        position: relative;
        margin-left: -24px;
        margin-right: -24px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .tr-pillars-list__img-wrap img,
    .tr-pillars-list__img-wrap .tr-pillars-frame-canvas {
        width: 100%;
        aspect-ratio: 16 / 9;
        display: block;
    }

    .tr-pillars-list__img-wrap img {
        object-fit: cover;
    }

    /* Title overlay: gradient fade from bottom, number + heading in Ivory */
    .tr-pillars-list__img-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 24px 20px;
        background: linear-gradient(to top, var(--tr-ev-strong) 0%, transparent 100%);
    }

    .tr-pillars-list__img-num {
        display: block;
        font-family: var(--tr-font-body);
        font-size: var(--tr-size-label);
        font-weight: var(--tr-weight-heading);
        letter-spacing: var(--tr-tracking-wide);
        text-transform: uppercase;
        color: var(--mv-color-lime);
        margin-bottom: 6px;
    }

    /* h3 inside overlay — h3 scale for prominence closer to desktop size */
    .tr-pillars-list--a11y .tr-pillars-list__img-overlay h3 {
        font-family: var(--tr-font-display);
        font-size: var(--tr-size-h3);
        font-weight: var(--tr-weight-heading);
        letter-spacing: var(--tr-tracking-h3);
        line-height: var(--tr-leading-h3);
        color: var(--mv-color-ivory);
        margin: 0;
    }

    .tr-pillars-list--a11y p {
        font-family: var(--tr-font-body);
        font-size: var(--tr-size-body);
        line-height: var(--tr-leading-body);
        color: var(--tr-text-tertiary); /* 0.65 — WCAG AA on ivory (was --mv-text-60) */
        margin: 0;
    }
}

/* Short-viewport fallback on desktop only: collapse img-wrap to just its text (title),
   hide the actual image and the gradient overlay background */
@media (min-width: 1025px) and (max-height: 780px) {
    .tr-pillars-list__img-wrap {
        position: static;
        overflow: visible;
        margin: 0;
    }

    .tr-pillars-list__img-wrap img,
    .tr-pillars-list__img-wrap .tr-pillars-video,
    .tr-pillars-list__img-wrap .tr-pillars-frame-canvas {
        display: none;
    }

    .tr-pillars-list__img-overlay {
        position: static;
        background: none;
        padding: 0;
    }

    /* Number is already rendered by li::before counter */
    .tr-pillars-list__img-num {
        display: none;
    }
}

/* ===================================================================
   SCENARIOS ACCORDION — Standalone premium section
   Replaces outcomes card grid + process steps.
   Two-column desktop: sticky header left, accordion right.
   Ivory background, no dot-grid, full 1420px content width.
   Uses <details>/<summary> — zero JS.
   =================================================================== */

.tr-scenarios-section {
    padding: var(--tr-space-section-xl) 0;
    background: var(--mv-color-ivory);
    border-top: 1px solid var(--mv-hairline);
    border-bottom: 1px solid var(--mv-hairline);
}

.tr-scenarios-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: start;
}

/* Sticky header — floats alongside accordion as user scrolls items */
.tr-scenarios-section__header {
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 40px);
}

.tr-scenarios-section__headline.mv-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-text);
    margin-bottom: 20px;
}

.tr-scenarios-section__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA on ivory (was --mv-text-60) */
    margin: 0;
}

.tr-scenarios-section__actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-gap-md);
    margin-top: 36px;
}

/* Stroke button on ivory bg: override border/text to Evergreen */
.tr-scenarios-section__actions .mv-ascii-btn--stroke {
    --ascii-color:  var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
}

/* === Individual accordion item === */
.tr-scenario-item {
    border-bottom: 1px solid var(--mv-hairline-mid);
}

.tr-scenario-item:first-child {
    border-top: 1px solid var(--mv-hairline-mid);
}

.tr-scenario-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 16px;
    margin: 0 -16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    gap: 24px;
    background: transparent;
    border-radius: var(--tr-radius-sm);
    transition: color 0.2s var(--tr-ease-out), background 0.15s var(--tr-ease-out);
    user-select: none;
}

.tr-scenario-item summary::-webkit-details-marker { display: none; }

/* Chevron arrow — CSS border-based, points down, flips up when open */
.tr-scenario-item summary::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--mv-text-40);
    border-bottom: 2px solid var(--mv-text-40);
    transform: rotate(45deg); /* V pointing down */
    margin-top: 5px;
    transition: transform 0.3s var(--tr-ease-spring), border-color 0.2s var(--tr-ease-out);
}

.tr-scenario-item[open] summary::after {
    transform: rotate(-135deg); /* points up */
    border-color: var(--mv-color-indigo);
}

.tr-scenario-item[open] summary {
    color: var(--mv-color-indigo);
}

.tr-scenario-item summary:hover {
    color: var(--mv-color-indigo);
    background: var(--tr-ind-wash);
}

.tr-scenario-item summary:hover::after {
    border-color: var(--mv-color-indigo);
}

/* Expanded body — smooth reveal */
@keyframes trAccordionReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tr-scenario-item__body {
    padding-bottom: 28px;
    animation: trAccordionReveal 0.35s var(--tr-ease-spring) both;
}

.tr-scenario-item__body > p {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA on ivory (was --mv-text-60) */
    margin: 0 0 20px;
    max-width: 600px;
}

/* "What you see" artifact callout — Celadon left-border inset */
.tr-scenario-item__artifact {
    padding: 14px 18px;
    background: var(--mv-bg-celadon-subtle);
    border-left: 2px solid var(--mv-color-celadon);
    border-radius: 0 var(--tr-radius-sm) var(--tr-radius-sm) 0;
    max-width: 600px;
}

.tr-scenario-item__artifact-label {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-tertiary);
    margin-bottom: 4px;
    line-height: var(--tr-leading-label);
}

.tr-scenario-item__artifact-note {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary); /* 0.65 — WCAG AA on ivory (was --mv-text-60) */
    margin: 0;
}

/* === Responsive === */

@media (max-width: 1024px) {
    .tr-scenarios-section__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
    }

    .tr-scenarios-section__header {
        position: static;
    }
}

@media (max-width: 768px) {
    .tr-scenarios-section {
        padding: var(--tr-space-section-sm) 0;
    }

    .tr-scenarios-section__inner {
        padding: 0 16px;
        gap: 32px;
    }

    .tr-scenario-item summary {
        font-size: var(--tr-size-body);
        padding: 22px 16px;
        letter-spacing: var(--tr-tracking-h6);
    }
}

/* ===================================================================
   TERMINAL SECTION
   Dark evergreen background, ivory browser chrome, dark terminal body.
   =================================================================== */

.tr-terminal-section {
    background: var(--mv-color-evergreen);
    padding: 88px 0;
    position: relative;
    /* no overflow: hidden — it would clip the browser drop shadow */
}

.tr-terminal-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* ASCII canvas field — ivory chars on dark green */
#tr-terminal-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    /* width/height set by JS */
}

.tr-terminal-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2; /* above dot-grid and canvas */
}

/* ── Scroll-past nudge (shared) — eyebrow bracket + opaque fill ── */
.tr-scroll-nudge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mv-color-evergreen);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.tr-scroll-nudge__text {
    color: var(--mv-color-ivory);
    white-space: nowrap;
}

.tr-scroll-nudge__arrow {
    color: var(--mv-color-lime);
    flex-shrink: 0;
}

/* ── Terminal nudge positioning ── */
.tr-terminal-nudge {
    display: flex;
    width: fit-content;
    margin: -12px auto 0;
    position: relative;
    z-index: 4;
    animation: trNudgeBounce 2.4s ease-in-out infinite;
}

@keyframes trNudgeBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

.tr-eyebrow--lime {
    background: var(--tr-lime-border);
    color: var(--mv-color-lime);
    border-color: var(--tr-lime-soft);
}

/* ── Browser chrome ── */

.tr-browser {
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 2px 8px  rgba(0, 0, 0, 0.55),
        0 12px 32px rgba(0, 0, 0, 0.50),
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.09);
}

.tr-browser__chrome {
    background: var(--mv-color-ivory);
    display: flex;
    align-items: center;
    padding: 16px 16px;
    position: relative; /* anchor for absolutely-centred URL bar */
}

.tr-browser__dots {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tr-browser__dot {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

.tr-browser__dot--red    { background: #FF5F57; }
.tr-browser__dot--yellow { background: #FEBC2E; }
.tr-browser__dot--green  { background: #28C840; }

.tr-browser__url-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    padding: 5px 10px;
    max-width: 340px;
    width: calc(100% - 120px); /* won't overlap the dots */
}

.tr-browser__url-icon {
    color: var(--tr-ev-soft);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tr-browser__url-text {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    color: var(--tr-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split-pane layout ── */

.tr-split {
    display: grid;
    grid-template-columns: 1fr 5px 1fr;
    grid-template-rows: min-content;
}

.tr-split__pane {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tr-split__pane--terminal {
    grid-column: 1;
    min-width: 320px;
    position: relative;
}

.tr-split__pane--terminal .tr-terminal {
    position: absolute;
    inset: 0;
}

.tr-split__pane--doc {
    grid-column: 3;
    min-width: 320px;
}

/* Draggable divider */
.tr-split__divider {
    grid-column: 2;
    cursor: col-resize;
    background: #161B22;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.tr-split__divider:hover,
.tr-split__divider:active {
    background: var(--mv-color-lime);
}

.tr-split__divider-grip {
    width: 3px;
    height: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.2s ease;
}

.tr-split__divider:hover .tr-split__divider-grip,
.tr-split__divider:active .tr-split__divider-grip {
    border-color: rgba(0, 0, 0, 0.3);
}

/* ── Terminal pane ── */

.tr-terminal {
    background: #0D1117;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tr-terminal__tabbar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 16px;
    background: #161B22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.tr-terminal__tab {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    color: rgba(255, 255, 255, 0.35);
    padding: 10px 14px;
    cursor: default;
    border-bottom: 2px solid transparent;
    letter-spacing: 0;
}

.tr-terminal__tab--active {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: var(--mv-color-lime);
}

.tr-terminal__body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: hidden;
    box-sizing: border-box;
}

/* Shared monospace base for all terminal text */
.tr-terminal__prompt-prefix,
.tr-terminal__cmd,
.tr-terminal__output {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-md);
    line-height: var(--tr-leading-body-lg);
    margin: 0;
    padding: 0;
    word-break: break-word;
}

.tr-terminal__history-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.tr-terminal__prompt-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tr-terminal__prompt-prefix {
    color: var(--mv-color-lime);
    flex-shrink: 0;
    white-space: nowrap;
}

.tr-terminal__cmd {
    color: #E6EDF3;
}

.tr-terminal__cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--mv-color-lime);
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: trCursorBlink 1s step-end infinite;
}

@keyframes trCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.tr-terminal__output {
    color: rgba(230, 237, 243, 0.6);
}

.tr-terminal__output--dim  { color: rgba(230, 237, 243, 0.35); }
.tr-terminal__output--warn { color: #9B5CF6; }
.tr-terminal__output--ok   { color: var(--mv-color-lime); }

/* ── Document pane (rendered markdown) ── */

.tr-doc {
    background: #1C2128;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tr-doc__tabbar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #161B22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.tr-doc__tab {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    color: rgba(255, 255, 255, 0.55);
    padding: 10px 14px;
    cursor: default;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-doc__tab--active {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.tr-doc__tab-icon {
    opacity: 0.5;
}

.tr-doc__body {
    padding: 28px 32px;
    box-sizing: border-box;
}

.tr-doc__rendered {
    max-width: 520px;
}

.tr-doc__h1 {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    color: #E6EDF3;
    margin: 0 0 20px;
    line-height: var(--tr-leading-snug);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

.tr-doc__meta {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    color: rgba(230, 237, 243, 0.35);
    margin: 0 0 20px;
    letter-spacing: 0.02em;
}

.tr-doc__h2 {
    font-family: var(--tr-font-body);
    font-size: 15px;
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-lime);
    margin: 20px 0 6px;
    line-height: var(--tr-leading-snug);
}

.tr-doc__h2:first-of-type {
    margin-top: 0;
}

.tr-doc__h2-hash {
    color: rgba(230, 237, 243, 0.2);
    margin-right: 6px;
    font-weight: 400;
}

.tr-doc__text {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    line-height: var(--tr-leading-body-lg);
    color: rgba(230, 237, 243, 0.7);
    margin: 0 0 4px;
}

.tr-doc__badge {
    display: inline-block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 3px;
}

.tr-doc__badge--green {
    background: var(--tr-lime-border);
    color: var(--mv-color-lime);
}

.tr-doc__table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 4px;
}

.tr-doc__table td {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-label);
    color: rgba(230, 237, 243, 0.7);
    padding: 3px 0;
    border: none;
}

.tr-doc__td-label {
    color: rgba(230, 237, 243, 0.4);
    width: 90px;
}

.tr-doc__list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.tr-doc__list li {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    line-height: var(--tr-leading-body-lg);
    color: rgba(230, 237, 243, 0.7);
    padding-left: 18px;
    position: relative;
}

.tr-doc__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: rgba(230, 237, 243, 0.25);
}

/* Scroll chevron — same as pillars section */
.tr-doc__chevron {
    width: 18px;
    height: 18px;
    border-right: 2px solid rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    transform: rotate(45deg);
    margin: 24px auto 0;
    animation: trScrollHint 2.5s ease-in-out infinite;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .tr-terminal-section {
        padding: 56px 0;
    }

    .tr-terminal-section__inner {
        padding: 0 16px;
    }

    /* Browser chrome not needed on mobile stacked layout */
    .tr-browser__chrome {
        display: none;
    }

    /* Remove browser wrapper styling — panes are separate containers on mobile */
    .tr-browser {
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        background: transparent;
    }

    .tr-split {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .tr-split__pane--doc {
        order: 1;
        width: auto;
        min-width: 0;
        background: var(--tr-color-evergreen);
        border-radius: 10px;
        overflow: hidden;
        box-shadow:
            0 2px 8px  rgba(0, 0, 0, 0.35),
            0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .tr-split__pane--terminal {
        order: 3;
        position: relative;
        height: 200px;
        min-width: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow:
            0 2px 8px  rgba(0, 0, 0, 0.35),
            0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .tr-split__divider {
        display: none;
    }

    .tr-terminal__tabbar,
    .tr-doc__tabbar {
        display: none;
    }

    .tr-terminal__body {
        height: auto;
        padding: 16px 20px;
        flex: 1;
        overflow-y: hidden;
    }

    .tr-terminal__prompt-prefix,
    .tr-terminal__cmd,
    .tr-terminal__output {
        font-size: 11.5px;
        line-height: var(--tr-leading-body-lg);
    }

    .tr-doc__body {
        padding: 24px 20px;
    }

    .tr-doc__h1 {
        font-size: var(--tr-size-body-lg);
    }

    .tr-doc__footnote {
        margin-bottom: 20px;
    }

    .tr-doc__chevron {
        display: none;
    }
}

/* ===================================================================
   RESPONSIVE — Ultra-small mobile (≤480px)
   =================================================================== */

@media (max-width: 480px) {
    .tr-hero .mv-hero__headline {
        font-size: 32px;
    }

    .tr-metrics-band__value {
        font-size: clamp(28px, 8vw, 44px);
    }

    .tr-crosssell__box {
        flex-direction: column;
        padding: 28px 20px;
        gap: 20px;
    }

    .tr-crosssell__headline {
        font-size: var(--tr-size-h4);
    }

    .tr-pain-nodes__title {
        font-size: var(--tr-size-body);
    }

    .tr-case-entry__inner {
        padding: 24px 20px;
    }
}