/* ==========================================================================
   TamRank - Features redesign (overview + detail skeleton)
   Warm base, dark spotlights, emerald accent. Built on the theme's own tokens
   (variables.css); no hardcoded brand colours here. Scope root: .tr-features
   ========================================================================== */

.tr-features {
    --trf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --trf-border: var(--tr-color-surface);          /* #ECEAE7 */
    --trf-radius-card: 16px;
    --trf-radius-block: 24px;
    --trf-hero-top: 150px;
    /* Offset that clears the fixed floating nav (bottom ~82px front-end). */
    --trf-nav-offset: 100px;
    color: var(--tr-color-slate-700);
    font-family: var(--tr-font-family);
}

/* With the WP admin bar the nav drops to top:42px, so push everything down. */
.admin-bar .tr-features { --trf-nav-offset: 132px; }

.tr-features *,
.tr-features *::before,
.tr-features *::after { box-sizing: border-box; }

.tr-features section { position: relative; }

.tr-wrap { max-width: var(--tr-container-max, 1200px); margin: 0 auto; }
.tr-wrap--narrow { max-width: 860px; }

/* --------------------------------------------------------------------------
   Buttons (self-contained so the pages stay pixel-faithful regardless of the
   global .tr-btn styling used by the reused header/footer)
   -------------------------------------------------------------------------- */
.trf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    border-radius: 8px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
}
.trf-btn svg { flex: none; }

.trf-btn--primary {
    background: var(--tr-color-primary);
    color: #fff;
    border-color: var(--tr-color-primary);
}
.trf-btn--primary:hover {
    background: var(--tr-color-primary-hover);
    border-color: var(--tr-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.trf-btn--secondary {
    background: transparent;
    color: var(--tr-color-slate-900);
    border-color: var(--tr-color-slate-300);
}
.trf-btn--secondary:hover {
    border-color: var(--tr-color-primary);
    color: var(--tr-color-primary-hover);
}

/* On dark blocks */
.trf-btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.25); background: transparent; }
.trf-btn--on-dark:hover { border-color: var(--tr-color-primary); color: var(--tr-color-primary); }

/* Text/arrow link */
.trf-tlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tr-color-primary-hover);
    text-decoration: none;
}
.trf-tlink:hover { text-decoration: underline; }
.trf-tlink--down svg { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

/* Tier badge (caption, never an organizing principle) */
.tr-tier {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 9999px;
    flex: none;
    white-space: nowrap;
}
.tr-tier--free { background: var(--tr-color-surface); color: var(--tr-color-slate-500); }
.tr-tier--pro  { background: var(--tr-color-primary-light); color: var(--tr-color-primary-hover); }

.tr-check { color: var(--tr-color-primary); flex: none; }
.tr-star  { color: var(--tr-color-primary); font-size: 0.8em; }

/* Eyebrow chip */
.trf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tr-color-slate-500);
}
.trf-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tr-color-primary); flex: none; }

/* Editorial feature rows */
.tr-rows { border-top: 2px solid var(--trf-border); }
.tr-row {
    border-bottom: 1px solid var(--trf-border);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 13px 4px;
}
.tr-row .tr-check { align-self: center; }
.tr-row__name { margin: 0; font-size: 14px; font-weight: 700; color: var(--tr-color-slate-900); flex: 0 0 235px; }
.tr-row__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tr-color-slate-500); flex: 1 1 300px; }
.tr-row .tr-tier { margin-left: auto; align-self: center; }

/* Shot Frame (browser chrome + screenshot slot) */
.tr-shot {
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tr-shot__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--tr-color-base);
    border-bottom: 1px solid var(--trf-border);
    flex: none;
}
.tr-shot__dots { display: flex; gap: 6px; flex: none; }
.tr-shot__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.tr-shot__dots i:nth-child(1) { background: #ef4444; }
.tr-shot__dots i:nth-child(2) { background: #f59e0b; }
.tr-shot__dots i:nth-child(3) { background: #22c55e; }
.tr-shot__url {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--tr-color-slate-400);
    font-family: var(--trf-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tr-shot__view { flex: 1; min-height: 200px; display: grid; place-items: center; background: #fff; }
.tr-shot__view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-shot__note {
    padding: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tr-color-slate-400);
    text-align: center;
    max-width: 420px;
}

/* Dark block shell (spotlights, free-forward, final CTA) */
.trf-dark {
    background: linear-gradient(135deg, var(--tr-color-slate-800) 0%, var(--tr-color-slate-900) 100%);
    border-radius: var(--trf-radius-block);
    color: #fff;
}
.trf-dark--glow-right { background: radial-gradient(700px 320px at 75% 0%, rgba(16, 185, 129, 0.18), transparent 70%), linear-gradient(135deg, var(--tr-color-slate-800) 0%, var(--tr-color-slate-900) 100%); }
.trf-dark--glow-left  { background: radial-gradient(700px 320px at 20% 0%, rgba(16, 185, 129, 0.16), transparent 70%), linear-gradient(135deg, var(--tr-color-slate-800) 0%, var(--tr-color-slate-900) 100%); }
.trf-dark--glow-center { background: radial-gradient(700px 320px at 50% 0%, rgba(16, 185, 129, 0.18), transparent 70%), linear-gradient(135deg, var(--tr-color-slate-800) 0%, var(--tr-color-slate-900) 100%); }

.trf-eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--tr-color-primary); }

/* ==========================================================================
   OVERVIEW (archive-feature.php)
   ========================================================================== */

.trf-ov-hero { padding: var(--trf-hero-top) 24px 56px; text-align: center; }
.trf-ov-hero__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.trf-ov-hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--tr-color-slate-900);
}
.trf-ov-hero h1 span { color: var(--tr-color-primary); }
.trf-ov-hero__lead { margin: 0; max-width: 560px; font-size: 1.125rem; line-height: 1.625; color: var(--tr-color-slate-500); }
.trf-ov-hero__cta { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.trf-launched-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Route layer */
.trf-route { padding: 48px 24px 32px; }
.trf-route__head { max-width: 640px; margin: 0 0 32px; }
.trf-route__head h2,
.trf-inv__head h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tr-color-slate-900);
}
.trf-route__head p,
.trf-inv__head p { margin: 0; font-size: 15px; line-height: 1.625; color: var(--tr-color-slate-500); }
.trf-route__head a,
.trf-inv__head a { color: var(--tr-color-primary-hover); font-weight: 600; text-decoration: none; }
.trf-route__head a:hover { text-decoration: underline; }

.trf-route__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.trf-pillar {
    background: #ffffff;
    border: 1px solid var(--trf-border);
    border-radius: var(--trf-radius-card);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
    transition: all 200ms ease;
}
.trf-pillar:hover { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); transform: translateY(-2px); }
.trf-pillar__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trf-pillar__ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.trf-pillar__ico--free { background: var(--tr-color-slate-800); color: var(--tr-color-primary); }
.trf-pillar__ico--pro  { background: var(--tr-color-primary-light); color: var(--tr-color-primary-hover); }
.trf-pillar h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--tr-color-slate-900); }
.trf-pillar__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tr-color-slate-500); }
.trf-pillar__list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.trf-pillar__item { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--tr-color-slate-700); }
.trf-pillar__item .tr-check { margin-top: 2px; }

/* Inventory */
.trf-inv { padding: 64px 24px 32px; scroll-margin-top: var(--trf-nav-offset); }
.trf-inv__head { max-width: 640px; margin: 0 0 24px; }
.trf-inv__cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.trf-inv__index {
    flex: 1 1 200px;
    max-width: 260px;
    position: sticky;
    top: var(--trf-nav-offset);
    max-height: calc(100vh - var(--trf-nav-offset) - 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trf-inv__index-label { margin: 0 0 10px; padding-left: 12px; font-size: 11.5px; font-weight: 700; color: var(--tr-color-slate-400); }
.trf-inv__index a {
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
    color: var(--tr-color-slate-500);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 150ms ease;
}
.trf-inv__index a:hover { color: var(--tr-color-primary-hover); }
.trf-inv__index a.is-active { color: var(--tr-color-primary-hover); border-left-color: var(--tr-color-primary); background: rgba(16, 185, 129, 0.06); }
.trf-inv__body { flex: 999 1 480px; min-width: 0; }

.trf-cat { scroll-margin-top: var(--trf-nav-offset); margin-bottom: 56px; }
.trf-cat:last-child { margin-bottom: 8px; }
.trf-cat__head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.trf-cat__ico { width: 42px; height: 42px; border-radius: 10px; background: var(--tr-color-slate-800); display: flex; align-items: center; justify-content: center; flex: none; }
.trf-cat__ttl { display: flex; flex-direction: column; }
.trf-cat__ttl h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--tr-color-slate-900); }
.trf-cat__ttl p { margin: 2px 0 0; font-size: 13px; color: var(--tr-color-slate-400); }
.trf-cat__indepth { margin-left: auto; flex: none; font-size: 13.5px; }
.trf-cat__stack { display: flex; flex-direction: column; gap: 14px; }

/* Showcase card */
.trf-showcase {
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: var(--trf-radius-card);
    padding: 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    text-decoration: none;
    color: inherit;
    transition: all 200ms ease;
}
a.trf-showcase:hover { border-color: rgba(16, 185, 129, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.trf-showcase__shot { width: 100%; }
.trf-showcase__shot .tr-shot { height: 250px; }
.trf-showcase__body { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.trf-showcase__ttl { display: flex; align-items: center; gap: 10px; }
.trf-showcase__ttl h4 { margin: 0; font-size: 19px; font-weight: 700; color: var(--tr-color-slate-900); }
.trf-showcase__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tr-color-slate-500); }

/* Free-forward dark block */
.trf-freefwd { padding: 48px 24px; }
.trf-freefwd__inner { padding: clamp(40px, 6vw, 72px); text-align: center; }
.trf-freefwd h2 { margin: 0 0 16px; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.trf-freefwd p { margin: 0 auto 28px; max-width: 640px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); }

/* Closing CTA */
.trf-closing { padding: 56px 24px 88px; text-align: center; }
.trf-closing__inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.trf-closing h2 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; color: var(--tr-color-slate-900); }
.trf-closing__lead { margin: 0; font-size: 15px; line-height: 1.625; color: var(--tr-color-slate-500); }
.trf-closing__pro { color: var(--tr-color-slate-700); font-weight: 600; text-decoration: none; }
.trf-closing__pro:hover { color: var(--tr-color-primary-hover); }

/* ==========================================================================
   DETAIL (single-feature.php) - the 8-block skeleton
   ========================================================================== */

.trf-d-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tr-color-slate-500);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 200ms ease;
}
.trf-d-back:hover { color: var(--tr-color-primary-hover); }
.trf-d-back svg { transform: rotate(180deg); }

/* 1 · Hero */
.trf-d-hero { padding: var(--trf-hero-top) 24px 56px; }
.trf-d-hero__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.trf-d-hero__copy { flex: 1 1 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.trf-d-hero__copy h1 {
    margin: 0;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--tr-color-slate-900);
}
.trf-d-hero__copy h1 span { color: var(--tr-color-primary); }
.trf-d-hero__lead { margin: 0; max-width: 540px; font-size: 1.1rem; line-height: 1.65; color: var(--tr-color-slate-500); }
.trf-d-hero__shot { flex: 1 1 400px; max-width: 560px; }
.trf-d-hero__shot .tr-shot { height: 380px; }

/* Stat pills */
.trf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.trf-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tr-color-slate-500);
}
.trf-pill b { font-family: var(--trf-mono); font-weight: 700; color: var(--tr-color-slate-900); }

.trf-d-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Section headings shared across detail blocks */
.trf-sec { padding: 48px 24px; }
.trf-sec--tight { padding: 32px 24px; }
.trf-h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tr-color-slate-900);
}
.trf-sub { margin: 0 0 20px; font-size: 15px; color: var(--tr-color-slate-500); }

/* 2 · Sub-features */
.trf-subfeat__group-h { margin: 24px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tr-color-slate-400); }
.trf-subfeat__shot { margin-top: 24px; }
.trf-subfeat__shot .tr-shot { height: 400px; }

/* 3 & 5 · Spotlights */
.trf-spot__inner {
    padding: clamp(32px, 5vw, 60px);
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: center;
}
.trf-spot__copy { flex: 1 1 320px; }
.trf-spot__copy h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.trf-spot__copy p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.65); }
.trf-spot__eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.trf-spot__eyebrow-row .trf-eyebrow { margin: 0; }
.tr-tier--on-dark { background: rgba(255, 255, 255, 0.12); color: #fff; }
.trf-spot__visual { flex: 1 1 380px; min-width: 0; }

/* proof card scaffolding used by spotlight visuals */
.trf-proof {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.trf-proof__mono { font-family: var(--trf-mono); }
.trf-proof table { width: 100%; border-collapse: collapse; }
.trf-proof__scroll { overflow-x: auto; }

/* 4 · Use cases */
.trf-uc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.trf-uc {
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: var(--trf-radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trf-uc__label { font-size: 11.5px; font-weight: 700; color: var(--tr-color-primary-hover); }
.trf-uc h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--tr-color-slate-900); line-height: 1.35; }
.trf-uc p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tr-color-slate-500); }

/* 6 · Tier strip */
.trf-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.trf-tier-card {
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: var(--trf-radius-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trf-tier-card--free { border-top: 3px solid var(--tr-color-primary); }
.trf-tier-card--pro  { border-top: 3px solid var(--tr-color-slate-800); }
.trf-tier-card__ttl { display: flex; align-items: baseline; gap: 10px; }
.trf-tier-card__ttl h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--tr-color-slate-900); }
.trf-tier-card__list { display: flex; flex-direction: column; gap: 9px; }
.trf-tier-card__item { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--tr-color-slate-700); }
.trf-tier-card__item .tr-check { margin-top: 2px; }
.trf-tier-card__note { margin: 4px 0 0; font-size: 12.5px; color: var(--tr-color-slate-400); }
.trf-tier__foot { margin: 16px 0 0; font-size: 13.5px; color: var(--tr-color-slate-500); }
.trf-tier__foot a { color: var(--tr-color-primary-hover); font-weight: 600; text-decoration: none; }
.trf-tier__foot a:hover { text-decoration: underline; }

/* Variant A "one piece of PRO": this cluster + a grid of other PRO thumbnails */
.trf-anchor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.trf-anchor__others { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trf-anchor__thumb {
    background: #fff;
    border: 1px solid var(--trf-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
}
.trf-anchor__thumb h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--tr-color-slate-900); }
.trf-anchor__thumb p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tr-color-slate-500); }
.trf-anchor__thumb .tr-tier { align-self: flex-start; }

/* 7 · FAQ */
.trf-faq { padding: 16px 24px 32px; }
.trf-faq__list { border-bottom: 1px solid var(--trf-border); }
.trf-faq h2 { margin: 0 0 24px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; color: var(--tr-color-slate-900); text-align: center; }
.trf-faq details { border-top: 1px solid var(--trf-border); padding: 24px 4px; }
.trf-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tr-color-slate-900);
    cursor: pointer;
    list-style: none;
}
.trf-faq summary::-webkit-details-marker { display: none; }
.trf-faq__chev { flex: none; color: var(--tr-color-slate-400); transition: transform 200ms ease; }
.trf-faq details[open] .trf-faq__chev { transform: rotate(180deg); }
.trf-faq details p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--tr-color-slate-500); max-width: 640px; }

/* 8 · Final CTA */
.trf-final { padding: 32px 24px 88px; }
.trf-final__inner { padding: clamp(40px, 6vw, 72px); text-align: center; }
.trf-final h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.trf-final p { margin: 0 auto 28px; max-width: 520px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.65); }
.trf-final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .trf-inv__index { display: none; }
}
@media (max-width: 680px) {
    .tr-features { --trf-hero-top: 120px; }
    .trf-d-hero__grid { gap: 32px; }
    .tr-row__name { flex: 1 1 100%; }
    .trf-anchor-grid { grid-template-columns: 1fr; }
    .trf-cat__indepth { margin-left: 0; flex: 1 1 100%; }
}

/* Reveal-on-scroll (shared) */
.trf-fade { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.trf-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .trf-fade { opacity: 1; transform: none; transition: none; }
}