/* TMN Flow for LeadingReach: the few additions to tmn-flow.css for the partner-review page. tmn-flow.css itself is unchanged. */

/* Who does what: 3 gold nodes on 1 rule, all filled, right under the hero */
.roles {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line-2);
}
.roles-title {
  max-width: none;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 560;
  font-stretch: 106%;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.roles .tiers { margin-top: clamp(2rem, 4vw, 2.75rem); }
.roles-tiers .tier-node {
  border-style: solid;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 10px var(--gold);
}

/* The schematic names LeadingReach and its descriptor, and lets the referral reason wrap */
.lr-pf-title { display: grid; gap: 0.1em; line-height: 1.1; }
.lr-pf-title small { font-size: 0.6em; font-weight: 500; letter-spacing: 0; color: #7a8594; }
.pf-detail .lr-reason { grid-column: 1 / -1; }
.pf-detail .lr-reason dd { white-space: normal; text-wrap: pretty; }

/* LeadingReach's own reported results, set apart from the connection's delivery record */
.partner-proof {
  max-width: 46rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.partner-proof h3 { font-size: 1.125rem; font-weight: 560; letter-spacing: -0.01em; }
.partner-proof p { margin-top: 0.6rem; max-width: 40em; font-size: 1.0625rem; color: var(--ink-2); }
.partner-proof .fine-print { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-3); }
.partner-proof a,
.lr-prompt a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.partner-proof a:hover,
.lr-prompt a:hover { text-decoration-color: var(--ink); }

/* The review: 1 column, no form. The call books on Trevor's calendar, and LeadingReach is 1 link away */
.lr-review .review-grid { grid-template-columns: minmax(0, 1fr); }
.lr-review .review-copy { max-width: 44rem; }
.lr-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.lr-prompt { margin-top: 1.25rem; max-width: 36em; font-size: 1.0625rem; color: var(--ink-2); }

/* LeadingReach's own wordmark, at its native 8 to 1 proportions */
.lr-logo { display: inline-block; width: auto; height: 1.05em; vertical-align: -0.2em; }
.lr-logo-line { display: block; margin-bottom: 0.45rem; }
.lr-logo-role { height: 1.5rem; vertical-align: middle; }

/* Over the dark stage the header shows LeadingReach's own white wordmark. The ink one stays in the accessibility tree. */
.lr-logo-swap { position: relative; display: inline-block; vertical-align: -0.2em; }
.lr-logo-swap .lr-logo { vertical-align: top; transition: opacity 0.25s ease; }
.lr-logo-swap .lr-logo-white { position: absolute; top: 0; left: 0; max-width: none; opacity: 0; }
/* The white wordmark takes the ink one's width (its own proportions are 1 pixel in 40 wider), so nothing sticks out of the swap */
.lr-logo-swap .lr-logo-white { width: 100%; height: auto; }
.site-header.is-on-dark .lr-logo-swap .lr-logo-ink { opacity: 0; }
.site-header.is-on-dark .lr-logo-swap .lr-logo-white { opacity: 1; }

/* Phones: the longer partner label needs the full width, so the 2 hero actions stack. The general page stacks them only under 370px. */
@media (max-width: 640px) {
  .lr .hero-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ===== v2 story: handoff, 2 proof sources, buyer questions, compact managed service ===== */

/* Grounds alternate so neighbors stay distinct */
.handoff { padding: var(--section) 0; background: var(--paper-2); }
.lr-proof { padding: var(--section) 0; }
.lr .reporting { background: var(--paper-2); border-bottom: 0; }
.lr-managed { background: var(--paper); border-top: 1px solid var(--line-2); }

/* The handoff: 3 steps on 1 gold rail, text beside a labeled illustration */
.handoff-intro { max-width: 46rem; }
.handoff-intro p { margin-top: 1.2rem; max-width: 36em; font-size: 1.125rem; color: var(--ink-2); }
.handoff-steps { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0 0 0 2.4rem; list-style: none; }
.handoff-steps::before { content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; left: 0.62rem; width: 2px; background: linear-gradient(180deg, var(--gold), rgb(201 164 76 / 0.25)); }
.handoff-step { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.25rem clamp(2rem, 5vw, 4rem); align-items: start; }
.handoff-node { position: absolute; top: 0.3rem; left: -2.4rem; width: 1.35rem; height: 1.35rem; border: 2px solid var(--gold); border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 10px var(--gold); }
.handoff-text h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); font-weight: 560; font-stretch: 106%; letter-spacing: -0.02em; text-wrap: balance; }
.handoff-text p { margin-top: 0.6rem; max-width: 32em; color: var(--ink-3); }
.handoff-visual { min-width: 0; }
.handoff-caption { margin-top: 0.7rem; font-size: 0.875rem; color: var(--ink-3); }
.handoff .mini-card { box-shadow: var(--shadow-2); border: 1px solid var(--line); }
.handoff .mini-map b { background: #fff; color: var(--ink); }
.handoff .mini-map em { border: 1px solid var(--line); }

/* 2 proof sources, side by side and never blended */
.lr-proof h2 { max-width: none; }
.lr-proof-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.lr-proof-source h3 { font-size: 1.125rem; font-weight: 560; letter-spacing: -0.01em; }
.lr-proof .proof { margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 1.25rem; }
/* In the 2-column proof the speed result takes its own row, so it reads on 1 line, and the 2 reliability results share the next */
.lr-proof .proof-item:first-child { grid-column: 1 / -1; }
.lr-proof .partner-proof { max-width: none; margin-top: 0; padding-top: 0; border-top: 0; }
.lr-proof .partner-proof > p:first-of-type { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* The managed service, compact, with keeping the website as the offer */
.lr-plan { display: grid; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; max-width: 34em; color: var(--ink-2); }
.lr-plan b { color: var(--ink); font-weight: 600; }
.lr-offer { display: grid; gap: 1rem; }
.lr-rebuild { max-width: 34em; color: var(--ink-3); font-size: 1rem; }

/* The close: 1 primary action, a plain note on where it goes, TMN as a quiet second path */
.lr-help { margin-top: 0.75rem; max-width: 36em; font-size: 0.9375rem; color: var(--ink-3); }
.lr-review .founder { margin-top: 2rem; }
.lr-film-note { margin-top: 1rem; max-width: 46em; }

@media (max-width: 899px) {
  .handoff-step { grid-template-columns: minmax(0, 1fr); }
  .lr-proof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lr-proof .proof { grid-template-columns: minmax(0, 1fr); }
  .handoff-steps { padding-left: 2rem; }
  .handoff-node { left: -2rem; }
}

/* Phones: the review button wraps to 2 balanced lines instead of running into its own edges */
@media (max-width: 420px) {
  .lr-review .button-lg { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-block: 0.8rem; }
}

/* ===== LeadingReach brand (Oct 1, 2026, for review) =====
   From LeadingReach's Brand Guidelines v2 (Sep 8, 2026): the official full logo, Poppins headlines, Inter body and subheads,
   green #004D43 and mint #CCEFDF, the approved neutrals (#000000, #434343, #193133, #E9E8E4, #FFFFFF), light surfaces for
   dense text, and no gradients on brand colors. Everything below is scoped to this page (body.lr); tmn-flow.css is unchanged.
   Kept on purpose: the 3 sample practices in "Designed around your practice" keep their own colors, because they show a
   practice's brand, not LeadingReach's. TMN's own logo keeps its colors. The film and its poster are frozen assets. */
@font-face { font-family: "LR Poppins"; src: url("fonts/lr-poppins-400.v20261001.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "LR Inter"; src: url("fonts/lr-inter-400.v20261001.woff2") format("woff2"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "LR Inter"; src: url("fonts/lr-inter-600.v20261001.woff2") format("woff2"); font-weight: 501 900; font-style: normal; font-display: swap; }

.lr {
  --lr-green: #004D43;
  --lr-mint: #CCEFDF;
  --lr-ink: #193133;
  --lr-gray: #434343;
  --lr-stone: #E9E8E4;
  --paper: #FFFFFF;
  --paper-2: #E9E8E4;
  --surface: #FFFFFF;
  --ink: #193133;
  --ink-2: #434343;
  --ink-3: #434343;
  --line: #E9E8E4;
  --line-2: #E9E8E4;
  --gold: #004D43;
  --gold-2: #CCEFDF;
  --gold-ink: #004D43;
  --stage: #193133;
  --stage-ink: #FFFFFF;
  --stage-muted: #CCEFDF;
  --pr: #004D43;
  --pr-soft: #CCEFDF;
  --ok: #004D43;
  --sans: "LR Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lr-display: "LR Poppins", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-1: 0 1px 2px rgb(25 49 51 / 0.06), 0 6px 18px -6px rgb(25 49 51 / 0.1);
  --shadow-2: 0 1px 2px rgb(25 49 51 / 0.06), 0 14px 34px -12px rgb(25 49 51 / 0.16), 0 44px 90px -30px rgb(25 49 51 / 0.2);
  --shadow-device: 0 2px 4px rgb(25 49 51 / 0.08), 0 24px 48px -18px rgb(25 49 51 / 0.3), 0 60px 110px -40px rgb(25 49 51 / 0.3);
  background: #FFFFFF;
  color: var(--lr-ink);
}
.lr .scene, .lr .hs-scene { --pr: #004D43; }

/* Type: Poppins at its normal weight for headlines and figures, Inter for body, Inter SemiBold for subheads */
.lr h1, .lr h2, .lr .display, .lr .roles-title, .lr .proof-item b, .lr .brand-word {
  font-family: var(--lr-display);
  font-weight: 400;
  font-stretch: normal;
}
.lr h1, .lr .display { letter-spacing: -0.025em; }
.lr h2 { letter-spacing: -0.02em; }
.lr h3, .lr .partner-proof h3, .lr .lr-proof-source h3, .lr .handoff-text h3 { font-family: var(--sans); font-weight: 600; font-stretch: normal; letter-spacing: -0.01em; }
.lr .button, .lr summary, .lr .fit-tab { font-family: var(--sans); }

/* Actions: primary green, white text. No gold, no shine, no navy. */
.lr .button-ink,
.lr .button-gold {
  background: var(--lr-green);
  border-color: var(--lr-green);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgb(25 49 51 / 0.2), 0 10px 24px -12px rgb(25 49 51 / 0.45);
}
.lr .button-ink:hover,
.lr .button-gold:hover { background: var(--lr-ink); border-color: var(--lr-ink); color: #FFFFFF; box-shadow: 0 1px 2px rgb(25 49 51 / 0.2), 0 14px 28px -12px rgb(25 49 51 / 0.5); }
.lr .button-ink::before, .lr .button-ink::after, .lr .button-gold::before, .lr .button-gold::after { content: none; }
.lr .button-line { background: #FFFFFF; border-color: var(--lr-green); color: var(--lr-green); }
.lr .button-line:hover { background: var(--lr-mint); border-color: var(--lr-green); color: var(--lr-green); }
.lr :focus-visible { outline-color: var(--lr-green); }

/* The 4 trust checks (hero and security): a white check on a green disc, so the check reads */
.lr .trust-check { background: var(--lr-green); }
.lr .trust-check svg { stroke: #FFFFFF; }

/* Surfaces: flat, light, no glow */
.lr .hero-light { background: none; }
.lr .scroll-progress span { background: var(--lr-green); box-shadow: none; }
.lr .review, .lr .lr-review { background: var(--lr-mint); background-image: none; }

/* The hero schematic: LeadingReach colors on the connector and the referral list */
.lr .phone { background: var(--lr-ink); }
.lr .phone-island { background: #000000; }
.lr .phone-screen, .lr .ph-status, .lr .pp-input, .lr .pf-title, .lr .pf-name, .lr .pf-detail dd, .lr .mini-card, .lr .mini-map em { color: var(--lr-ink); }
.lr .pf-mark { background: var(--lr-green); color: #FFFFFF; }
.lr .pf-bell b { background: var(--lr-green); color: #FFFFFF; }
.lr .pf-toast { background: var(--lr-ink); box-shadow: 0 1.2em 2.4em -1em rgb(25 49 51 / 0.5); }
.lr .pf-toast-icon { background: var(--lr-mint); color: var(--lr-green); }
.lr .pf-cursor { filter: drop-shadow(0 0.25em 0.4em rgb(25 49 51 / 0.3)); }
.lr .pf-new { background: var(--lr-mint); border-top-color: var(--lr-green); border-bottom-color: var(--lr-mint); }
.lr .pf-new::before { background: var(--lr-green); }
.lr #thread-gold stop { stop-color: var(--lr-green); }
.lr .thread-halo { stroke: var(--lr-mint); }
.lr .thread-inner { stroke: var(--lr-mint); }
.lr .thread-spark { stroke: #FFFFFF; }
.lr .thread-packet { fill: #FFFFFF; stroke: var(--lr-green); }
.lr .thread-ripple { stroke: var(--lr-green); }
.lr .thread-node { fill: #FFFFFF; stroke: var(--lr-green); }

.lr .ph-done-text, .lr .pf-bell { color: var(--lr-gray); }
.lr .device.platform { border-color: rgb(25 49 51 / 0.08); }
.lr .pf-toast-text span { color: var(--lr-mint); }
.lr .pf-cursor path { fill: var(--lr-ink); }
.lr .fit-tab[aria-selected="true"] { box-shadow: 0 1px 2px rgb(25 49 51 / 0.08), 0 4px 12px -4px rgb(25 49 51 / 0.14); }

/* The illustrated phone, LeadingReach view and browser: the approved neutrals only */
.lr .pp-head, .lr .pf-top, .lr .pf-row, .lr .pf-side { border-color: var(--lr-stone); }
.lr .pp-kind, .lr .pp-sub, .lr .ph-done-meta, .lr .lr-pf-title small, .lr .pf-search, .lr .pf-status, .lr .pf-nav { color: var(--lr-gray); }
.lr .pp-label { color: var(--lr-ink); }
.lr .pp-input { background: var(--lr-stone); border-color: var(--lr-stone); }
.lr .pp-select svg path, .lr .pf-search svg circle, .lr .pf-search svg path { stroke: var(--lr-gray); }
.lr .ph-done-ring { fill: var(--lr-mint); }
.lr .pf-side { background: #FFFFFF; }
.lr .pf-nav.is-active { background: var(--lr-mint); color: var(--lr-green); }
.lr .pf-search, .lr .browser-url, .lr .fit-tabs { background: var(--lr-stone); }
.lr .pp-select svg { color: var(--lr-gray); }
.lr .device.platform { color: var(--lr-ink); }
.lr .pf-cols, .lr .pf-cols span, .lr .pf-empty, .lr .pf-detail dt { color: var(--lr-gray); }
.lr .mini-field em { background: #FFFFFF; border-color: var(--lr-stone); }
.lr .mini-field.is-ok em { background: var(--lr-mint); border-color: var(--lr-mint); }
.lr .mini-field b { color: var(--lr-ink); }
.lr .browser-bar { background: #FFFFFF; }

/* The handoff: 1 solid green rail, green rings */
.lr .handoff-steps::before { background: var(--lr-green); }
.lr .mini-map i { background: var(--lr-green); box-shadow: none; }
.lr .mini-map b, .lr .handoff .mini-map b { border-color: var(--lr-green); background: #FFFFFF; color: var(--lr-ink); }

/* The film: the frame stays as rendered. Its controls take the brand: a white play disc with a green mark. */
.lr .film-play { background: linear-gradient(0deg, rgb(0 0 0 / 0.66), rgb(0 0 0 / 0.16) 42%, transparent 70%); }
.lr .film-play-disc { background: #FFFFFF; color: var(--lr-green); box-shadow: 0 0 0 8px rgb(255 255 255 / 0.18), 0 12px 30px -8px rgb(0 0 0 / 0.55); }
.lr .film-play:hover .film-play-disc { background: var(--lr-mint); box-shadow: 0 0 0 12px rgb(255 255 255 / 0.22), 0 16px 36px -8px rgb(0 0 0 / 0.6); }
.lr .film-play-len { color: #FFFFFF; }
.lr .film-video::cue { background: rgb(0 0 0 / 0.82); }
.lr .film-frame { background: #000000; }

/* The managed-service offer: a light mint card, since it carries a list (no dark surface for dense text) */
.lr .option::before, .lr .option::after, .lr .option-ink::after { content: none; background: none; }
.lr .option-ink { background: var(--lr-mint); background-image: none; border-color: var(--lr-mint); color: var(--lr-ink); box-shadow: none; }
.lr .option-ink h3, .lr .option-ink li, .lr .option-ink .checks { color: var(--lr-ink); }
.lr .option-ink .option-for { color: var(--lr-gray); }

/* The security path: 1 solid green line, a green key node */
.lr .path-nodes::after { background: var(--lr-green); box-shadow: none; }
.lr .path-node-key .path-icon { border-color: var(--lr-green); background: var(--lr-green); color: #FFFFFF; }
.lr .path-icon::after { border-color: var(--lr-green); }

@media (max-width: 760px) {
  .lr .film-play-disc { box-shadow: 0 0 0 5px rgb(255 255 255 / 0.18), 0 8px 20px -6px rgb(0 0 0 / 0.55); }
}