/* Facil.AI review pair (overview + agents/gateways). Review-only.
   Loads after coolestate.css + site.css and only adds fr-* classes.
   Ground: dark industrial navy. Blooms: blue or orange, two colours max per gradient. */
:root {
  --fr-ground: #000C17;
  --fr-ink: #06090D;
  --fr-ink-2: #0B1017;
  --fr-navy: #071A2C;
  --fr-panel: #0E1A28;
  --fr-line: rgba(183, 196, 211, 0.16);
  --fr-line-strong: rgba(183, 196, 211, 0.32);
  --fr-fg: #F5F6F8;
  --fr-fg-2: #B7C4D3;
  --fr-fg-3: #93A3B6;
  --fr-blue: #3BA0FF;
  --fr-blue-soft: #8FC0E8;
  --fr-orange: #FF8A45;
}
.fr-page { background: var(--fr-ink); color: var(--fr-fg); }
.fr-page main { display: block; }
.fr-page h1, .fr-page h2, .fr-page h3 { font-family: var(--ff-display); color: var(--fr-fg); margin: 0; text-wrap: balance; }
.fr-page p { text-wrap: pretty; }
.fr-page a:focus-visible, .fr-page button:focus-visible, .fr-page summary:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 3px; border-radius: 4px; }
.fr-page .eyebrow { color: var(--fr-blue-soft); letter-spacing: 0.12em; }
.fr-page .lede { color: var(--fr-fg-2); }
.fr-page .btn--secondary { color: var(--fr-fg); border-color: var(--fr-line-strong); }
.fr-page .btn--secondary:hover { border-color: var(--fr-fg); background: rgba(245, 246, 248, 0.08); }
.fr-page .btn { white-space: normal; text-align: left; max-width: 100%; }
.fr-page .btn--text { color: var(--fr-blue-soft); }
.fr-page .btn--text:hover { color: var(--fr-fg); }

.fr-sec { padding-block: clamp(72px, 9vw, 128px); position: relative; border-top: 1px solid var(--fr-line); }
.fr-sec--ink2 { background: var(--fr-ink-2); }
.fr-sec--navy { background: radial-gradient(70% 90% at 88% 0%, rgba(24, 137, 189, 0.20), rgba(24, 137, 189, 0) 70%), var(--fr-navy); }
.fr-sec--warm { background: radial-gradient(60% 80% at 6% 100%, rgba(255, 106, 26, 0.13), rgba(255, 106, 26, 0) 70%), var(--fr-ink); }
.fr-h2 { font-size: clamp(30px, 3.4vw + 0.4rem, 54px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; }
.fr-h3 { font-size: clamp(20px, 1.2vw + 0.5rem, 25px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; }
.fr-mono { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-fg-3); }
.fr-head { display: grid; gap: 18px; max-width: 760px; }
.fr-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.fr-split .lede { max-width: 54ch; }
.fr-key { color: var(--fr-orange); }

/* ---------- Hero (approved Aurora visual) ---------- */
.fr-hero { position: relative; background: var(--fr-ground); isolation: isolate; padding: clamp(150px, 15vw, 210px) 0 clamp(56px, 6vw, 88px); min-height: min(100vh, 940px); display: flex; flex-direction: column; justify-content: flex-end; }
.fr-hero__aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.fr-hero__aurora > div { width: 100%; height: 100%; position: relative; }
/* Static stand-in for the Aurora shader when WebGL2 is unavailable (and for captures); hidden once the canvas mounts. */
.fr-hero__aurora { background: radial-gradient(60% 75% at 0% 0%, rgba(24, 137, 189, 0.62), rgba(24, 137, 189, 0) 72%), radial-gradient(55% 70% at 100% 0%, rgba(255, 122, 51, 0.42), rgba(255, 122, 51, 0) 72%); }
.fr-hero__aurora:has(canvas) { background: none; }
.fr-hero__fade { position: absolute; inset: auto 0 0 0; height: 22%; z-index: -1; background: linear-gradient(180deg, rgba(0, 12, 23, 0), var(--fr-ground)); pointer-events: none; }
.fr-hero__inner { display: grid; gap: 26px; }
.fr-page .crumb, .fr-page .eyebrow, .fr-mono, .fr-map__label { margin: 0; }
.fr-hero__mark { width: 112px; height: auto; display: block; }
.fr-hero__title { font-size: clamp(46px, 7vw, 112px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; max-width: 14ch; }
.fr-hero__title span { display: block; }
.fr-hero__title span + span { color: var(--fr-blue-soft); }
.fr-hero__lede { font-size: clamp(18px, 1.1vw + 0.6rem, 23px); line-height: 1.45; color: #D4DDE7; max-width: 46ch; margin: 0; }
.fr-hero .actions { gap: 12px 14px; align-items: center; }
.fr-hero .btn { min-height: 52px; padding: 14px 22px; }
.fr-hero--compact { min-height: 0; padding-bottom: clamp(48px, 5vw, 72px); }
.fr-hero--compact .fr-hero__title { font-size: clamp(40px, 5.4vw, 84px); max-width: 16ch; }
.fr-facts { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fr-line-strong); }
.fr-facts li { padding: 20px 20px 4px 0; display: grid; gap: 6px; }
.fr-facts li + li { padding-left: 20px; border-left: 1px solid var(--fr-line); }
.fr-facts b { font-family: var(--ff-display); font-weight: 500; font-size: clamp(24px, 2vw, 32px); letter-spacing: -0.02em; color: var(--fr-fg); line-height: 1.1; }
.fr-facts span { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-fg-3); line-height: 1.5; }
.fr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.fr-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--fr-line-strong); border-radius: 4px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-fg); text-decoration: none; }
.fr-jump a:hover { border-color: var(--fr-blue); background: rgba(59, 160, 255, 0.10); }

/* ---------- Why / benefits ---------- */
.fr-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); }
.fr-why .fr-head { max-width: 900px; }
.fr-why .fr-head .lede { max-width: 46ch; }
.fr-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; }
.fr-benefits li { background: var(--fr-ink); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; }
.fr-benefits p { margin: 0; color: var(--fr-fg-2); font-size: 16px; line-height: 1.55; }
.fr-ic { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; border: 1px solid rgba(59, 160, 255, 0.35); background: rgba(59, 160, 255, 0.08); color: var(--fr-blue-soft); }
.fr-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Image band ---------- */
.fr-band { position: relative; margin: 0; border-top: 1px solid var(--fr-line); background: var(--fr-ink); }
.fr-band img { display: block; width: 100%; height: auto; aspect-ratio: 2752 / 1536; max-height: 620px; object-fit: cover; filter: saturate(0.85) contrast(1.08) brightness(0.92); }
.fr-band figcaption { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(18px, 3vw, 40px); max-width: min(520px, calc(100% - 40px)); background: rgba(6, 9, 13, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--fr-line); border-radius: 8px; padding: 18px 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.fr-band figcaption b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: clamp(19px, 1.4vw, 24px); letter-spacing: -0.01em; color: var(--fr-fg); line-height: 1.3; }
.fr-band figcaption span { display: block; margin-top: 8px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-blue-soft); }

/* ---------- Where it fits ---------- */
.fr-fits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fr-fit { border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; background: var(--fr-panel); display: grid; grid-template-rows: auto 1fr; }
.fr-fit img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85) contrast(1.06); }
.fr-fit__body { padding: 22px 22px 26px; display: grid; gap: 10px; align-content: start; }
.fr-fit__body p { margin: 0; color: var(--fr-fg-2); font-size: 16px; line-height: 1.55; }
.fr-tag { justify-self: start; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-blue-soft); border: 1px solid rgba(143, 192, 232, 0.35); border-radius: 999px; padding: 4px 10px; }
.fr-tag--support { color: var(--fr-orange); border-color: rgba(255, 138, 69, 0.4); }
.fr-checks { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--fr-line); }
.fr-checks li { padding: 20px 0 0 30px; position: relative; color: var(--fr-fg-2); font-size: 16px; line-height: 1.55; }
.fr-checks li::before { content: ""; position: absolute; left: 0; top: 25px; width: 14px; height: 8px; border-left: 2px solid var(--fr-blue); border-bottom: 2px solid var(--fr-blue); transform: rotate(-45deg); }
.fr-checks b { color: var(--fr-fg); font-weight: 500; }

/* ---------- Agent family ---------- */
.fr-agents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; }
.fr-agents > li { background: var(--fr-ink-2); }
.fr-agent { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2vw, 28px); height: 100%; color: inherit; text-decoration: none; transition: background var(--d-base) var(--ease-out); }
a.fr-agent:hover { background: #121D2B; }
a.fr-agent:hover .fr-agent__go { color: var(--fr-fg); }
.fr-agent h3 { font-size: clamp(19px, 1vw + 0.6rem, 23px); font-weight: 500; letter-spacing: -0.01em; }
.fr-agent p { margin: 0; color: var(--fr-fg-2); font-size: 15.5px; line-height: 1.55; }
.fr-agent__go { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-blue-soft); margin-top: 4px; }
.fr-agents__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 28px; }
.fr-agents__foot p { margin: 0; color: var(--fr-fg-2); max-width: 60ch; }

/* ---------- Proof ---------- */
.fr-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; border: 1px solid var(--fr-line-strong); border-radius: 8px; padding: clamp(28px, 4vw, 56px); background: rgba(14, 26, 40, 0.7); }
.fr-proof__num { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: clamp(88px, 11vw, 176px); line-height: 0.88; letter-spacing: -0.05em; color: var(--fr-fg); font-variant-numeric: tabular-nums; }
.fr-proof__num small { display: block; margin-top: 18px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-orange); line-height: 1.5; }
.fr-proof__body { display: grid; gap: 16px; }
.fr-proof__body p { margin: 0; color: var(--fr-fg-2); font-size: 17px; line-height: 1.55; max-width: 56ch; }
.fr-proof__body .fr-h3 { max-width: 30ch; }
.fr-proof dl { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--fr-line); }
.fr-proof dl div { padding: 14px 14px 0 0; }
.fr-proof dl div + div { padding-left: 14px; border-left: 1px solid var(--fr-line); }
.fr-proof dt { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-fg-3); }
.fr-proof dd { margin: 6px 0 0; font-family: var(--ff-display); font-size: 19px; font-weight: 500; color: var(--fr-fg); }
.fr-ext::after { content: " \2197"; }

/* ---------- Process ---------- */
.fr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: step; }
.fr-steps li { counter-increment: step; border-top: 2px solid var(--fr-blue); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.fr-steps li::before { content: "0" counter(step); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fr-blue-soft); }
.fr-steps p { margin: 0; color: var(--fr-fg-2); font-size: 16px; line-height: 1.55; }

/* ---------- Equipment family map (detail page) ---------- */
.fr-map { margin: 0; border: 1px solid var(--fr-line-strong); border-radius: 8px; padding: clamp(20px, 3vw, 40px); background: radial-gradient(60% 70% at 50% 0%, rgba(24, 137, 189, 0.16), rgba(24, 137, 189, 0) 70%), var(--fr-ink-2); }
.fr-map__layer { display: grid; gap: 12px; }
.fr-map__label { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-fg-3); display: flex; gap: 10px; align-items: center; }
.fr-map__label i { font-style: normal; color: var(--fr-blue-soft); }
.fr-map__families { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 4fr 3fr 1.6fr; gap: 12px; }
.fr-fam { border: 1px solid var(--fr-line-strong); border-radius: 8px; padding: 16px; background: rgba(6, 9, 13, 0.6); display: grid; gap: 12px; align-content: start; }
.fr-fam h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.fr-fam ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fr-fam li a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(59, 160, 255, 0.35); border-radius: 4px; background: rgba(59, 160, 255, 0.07); color: var(--fr-fg); text-decoration: none; font-size: 15px; }
.fr-fam li a:hover { background: rgba(59, 160, 255, 0.16); border-color: var(--fr-blue); }
.fr-fam li a svg { width: 18px; height: 18px; fill: none; stroke: var(--fr-blue-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fr-map__link { height: 34px; position: relative; }
.fr-map__link::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0; border-left: 2px dashed rgba(143, 192, 232, 0.5); }
.fr-map__link span { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-fg-3); white-space: nowrap; }
.fr-map__bar { border-radius: 8px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.fr-map__bar b { font-family: var(--ff-display); font-weight: 500; font-size: 18px; color: var(--fr-fg); }
.fr-map__bar span { color: var(--fr-fg-2); font-size: 15px; }
.fr-map__bar--bms { border: 1px solid var(--fr-line-strong); background: rgba(183, 196, 211, 0.06); }
.fr-map__bar--gw { border: 1px solid rgba(59, 160, 255, 0.55); background: rgba(59, 160, 255, 0.10); }
.fr-map__bar--ai { border: 1px solid rgba(255, 138, 69, 0.5); background: rgba(255, 106, 26, 0.08); }
.fr-map__bar--ai img { width: 64px; height: auto; display: block; }
.fr-map figcaption { margin-top: 18px; color: var(--fr-fg-3); font-size: 14px; line-height: 1.55; }

/* ---------- Agent detail cards ---------- */
.fr-agent-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fr-acard { border: 1px solid var(--fr-line); border-radius: 8px; background: var(--fr-panel); padding: 22px; display: grid; gap: 12px; align-content: start; scroll-margin-top: 110px; height: 100%; }
.fr-acard:target { border-color: var(--fr-blue); box-shadow: 0 0 0 1px var(--fr-blue); }
.fr-acard h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.fr-acard p { margin: 0; color: var(--fr-fg-2); font-size: 15.5px; line-height: 1.55; }
.fr-acard dl { margin: 4px 0 0; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--fr-line); }
.fr-acard dt { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-fg-3); }
.fr-acard dd { margin: 0; color: var(--fr-fg); font-size: 15px; line-height: 1.5; }

/* ---------- Gateway ---------- */
.fr-gw { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.fr-gw__media { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--fr-line); }
.fr-gw__media img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; object-fit: cover; filter: saturate(0.85) contrast(1.06); }
.fr-gw__flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.fr-gw__flow li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--fr-line); }
.fr-gw__flow li:last-child { border-bottom: 1px solid var(--fr-line); }
.fr-gw__flow b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 19px; color: var(--fr-fg); margin-bottom: 4px; }
.fr-gw__flow p { margin: 0; color: var(--fr-fg-2); font-size: 16px; line-height: 1.55; }
.fr-gw__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; }
.fr-gw__facts div { background: var(--fr-ink); padding: 18px 20px; }
.fr-gw__facts dt { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-fg-3); }
.fr-gw__facts dd { margin: 6px 0 0; font-family: var(--ff-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 26px); color: var(--fr-fg); letter-spacing: -0.015em; }

/* ---------- Compatibility ---------- */
.fr-compat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.fr-eco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fr-line); }
.fr-eco li { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--fr-line); display: grid; gap: 2px; }
.fr-eco b { font-family: var(--ff-display); font-weight: 500; font-size: 18px; color: var(--fr-fg); }
.fr-eco span { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-fg-3); }
.fr-logos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; }
.fr-logos li { background: var(--fr-ink); display: grid; place-items: center; padding: 22px 16px; min-height: 92px; }
.fr-logos img { display: block; max-width: 100%; height: auto; max-height: 48px; width: auto; }
.fr-note { margin: 16px 0 0; color: var(--fr-fg-3); font-size: 14.5px; line-height: 1.55; }

/* ---------- Resources ---------- */
.fr-res { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fr-res a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px; border: 1px solid var(--fr-line); border-radius: 8px; background: var(--fr-panel); color: inherit; text-decoration: none; transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); }
.fr-res a:hover { border-color: var(--fr-blue); background: #122033; }
.fr-res b { font-family: var(--ff-display); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--fr-fg); letter-spacing: -0.01em; }
.fr-res p { margin: 0; color: var(--fr-fg-2); font-size: 15.5px; line-height: 1.55; }
.fr-res .fr-agent__go { margin-top: 6px; }

/* ---------- Pair link + CTA ---------- */
.fr-pair { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--fr-line-strong); border-radius: 8px; background: var(--fr-panel); }
.fr-pair b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 26px); color: var(--fr-fg); letter-spacing: -0.015em; }
.fr-pair p { margin: 6px 0 0; color: var(--fr-fg-2); max-width: 56ch; }
.fr-cta { background: radial-gradient(55% 90% at 100% 100%, rgba(255, 106, 26, 0.16), rgba(255, 106, 26, 0) 70%), var(--fr-ground); }
.fr-cta__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.fr-cta__grid .stack { display: grid; gap: 22px; }
.fr-cta .btn { min-height: 52px; padding: 14px 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .fr-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-agents, .fr-agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-map__families { grid-template-columns: 1fr 1fr; }
  .fr-map__families > li:first-child { grid-column: 1 / -1; }
  .fr-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fr-split, .fr-why, .fr-proof, .fr-gw, .fr-compat, .fr-cta__grid { grid-template-columns: 1fr; align-items: start; }
  .fr-fits, .fr-steps, .fr-res, .fr-checks { grid-template-columns: 1fr; }
  .fr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .fr-facts li:nth-child(n+3) { border-top: 1px solid var(--fr-line); }
  .fr-band figcaption { position: static; max-width: none; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; backdrop-filter: none; background: var(--fr-ink-2); }
}
@media (max-width: 600px) {
  .fr-benefits, .fr-agents, .fr-agent-grid, .fr-map__families, .fr-eco { grid-template-columns: 1fr; }
  .fr-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* QA 8 Oct: the bound 'Software gateway' value needs a full-width cell at phone width */
  .fr-gw__facts { grid-template-columns: 1fr; }
  /* an odd final logo spans both columns so no empty tile is left */
  .fr-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fr-proof dl { grid-template-columns: 1fr; }
  .fr-proof dl div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--fr-line); }
  .fr-hero .actions .btn, .fr-cta .actions .btn { width: 100%; justify-content: space-between; }
  .fr-map__link span { white-space: normal; max-width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page *, .fr-page *::before, .fr-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.fr-benefits .fr-h3 { font-size: clamp(19px, 0.8vw + 0.6rem, 22px); }

/* ===== Refinement r3 (8 Oct): collaboration accents, info tiles, evidence, logos, thumbnails ===== */
/* Soft blooms: each gradient is one colour fading to transparent, anchored to opposite corners so they never overlap */
.fr-sec--family { background: radial-gradient(48% 70% at 92% 0%, rgba(24, 137, 189, 0.22), rgba(24, 137, 189, 0) 70%), radial-gradient(38% 55% at 4% 100%, rgba(255, 106, 26, 0.12), rgba(255, 106, 26, 0) 70%), var(--fr-navy); }
.fr-sec--collab { background: radial-gradient(42% 70% at 100% 0%, rgba(255, 106, 26, 0.16), rgba(255, 106, 26, 0) 70%), radial-gradient(34% 60% at 0% 100%, rgba(24, 137, 189, 0.14), rgba(24, 137, 189, 0) 70%), var(--fr-ink); }
.fr-sec--gw { background: radial-gradient(40% 60% at 0% 0%, rgba(24, 137, 189, 0.16), rgba(24, 137, 189, 0) 70%), radial-gradient(36% 55% at 100% 100%, rgba(255, 106, 26, 0.13), rgba(255, 106, 26, 0) 70%), var(--fr-ink); }
.fr-page .fr-eyebrow--collab { color: var(--fr-orange); }
.fr-steps--collab li { border-top-color: var(--fr-orange); }
.fr-steps--collab li::before { color: var(--fr-orange); }
.fr-sec--gw .fr-gw__flow .fr-ic { border-color: rgba(255, 138, 69, 0.45); background: rgba(255, 106, 26, 0.08); color: var(--fr-orange); }
.fr-lockup { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(28px, 3vw, 40px); }
.fr-lockup img { display: block; height: 44px; width: auto; }
.fr-lockup img + span + img { height: 40px; }
.fr-lockup span { font-family: var(--ff-display); font-size: 22px; color: var(--fr-orange); line-height: 1; }
.fr-page .fr-btn--collab { border-color: rgba(255, 138, 69, 0.6); }
.fr-page .fr-btn--collab:hover { border-color: var(--fr-orange); background: rgba(255, 106, 26, 0.12); }

/* Overview agent tiles are information, not links */
li.fr-agent { cursor: default; }
.fr-sec--family .fr-agents__foot { justify-content: flex-start; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--fr-line); padding-top: 28px; }

/* Evidence: the published plant-efficiency chart */
.fr-evidence { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; border: 1px solid var(--fr-line-strong); border-radius: 8px; padding: clamp(20px, 3vw, 40px); background: rgba(14, 26, 40, 0.7); }
.fr-evidence__fig { margin: 0; }
.fr-evidence__fig img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--fr-line); }
.fr-evidence__fig figcaption { margin-top: 12px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.6; color: var(--fr-fg-3); }
.fr-proof__body .fr-evidence__num { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: clamp(64px, 7vw, 112px); line-height: 0.9; letter-spacing: -0.05em; color: var(--fr-fg); }
.fr-evidence__num small { display: block; margin-top: 14px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-orange); line-height: 1.5; }

/* Compatibility marks: the supplied logo files reversed to white on the dark ground */
.fr-logos--white img { filter: brightness(0) invert(1); opacity: 1; }
/* Legibility (QA 8 Oct): the supplied marks are small 1x files, so each one renders at its own pixel size
   (no downscaling) in a roomier cell; only the shortest mark, Honeywell EBI (19px), is lifted. */
.fr-logos--white { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-logos--white li { min-height: 116px; padding: 28px 22px; }
.fr-logos--white img { max-height: none; max-width: 100%; image-rendering: -webkit-optimize-contrast; }
.fr-logos--white img[src*="honeywell"] { width: 148px; height: auto; }
/* Trane's mark is a white T knocked out of a red disc; a flat silhouette would erase it, so its tones are mapped to greys instead */
.fr-logos--white img[src*="trane"] { filter: grayscale(1) brightness(1.7) contrast(1.6); opacity: 1; }

/* Resource thumbnails: the official covers, cropped to one card ratio */
.fr-res__thumb { display: block; margin: -24px -24px 6px; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--fr-line); border-radius: 8px 8px 0 0; background: var(--fr-ink-2); }
.fr-res__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--d-slow) var(--ease-out); }
.fr-res a:hover .fr-res__thumb img { transform: scale(1.03); }
.fr-res a { overflow: hidden; }

/* Lighter, more legible HVAC photography without losing the photographic grade */
.fr-fit img.fr-img-lift { filter: brightness(1.6) contrast(1.05) saturate(0.95); transform: scale(1.7); transform-origin: 74% 57%; }
.fr-fit__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.fr-fit__media img { height: 100%; }
.fr-band--lift img { filter: saturate(0.88) contrast(1.06) brightness(1.08); }

@media (max-width: 860px) {
  .fr-evidence { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fr-logos--white { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-logos--white li { min-height: 96px; padding: 20px 12px; }
  .fr-logos--white img[src*="honeywell"] { width: 140px; }
}
@media (max-width: 600px) {
  .fr-lockup img { height: 36px; }
  .fr-lockup img + span + img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-res a:hover .fr-res__thumb img { transform: none; }
}

/* Client-supplied gateway logo pack, scoped to the Facil.AI agents and gateway page. */
.fr-compat-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); border-radius: 8px; overflow: hidden; }
.fr-compat-card { min-width: 0; background: var(--fr-ink); display: grid; grid-template-rows: minmax(92px, 1fr) auto; }
.fr-compat-card__mark { min-width: 0; min-height: 104px; padding: 20px 16px 12px; display: grid; place-items: center; }
.fr-compat-card__mark img { display: block; width: auto; max-width: 100%; height: auto; max-height: 62px; object-fit: contain; }
.fr-compat-card__label { min-width: 0; padding: 12px 14px 14px; border-top: 1px solid var(--fr-line); display: grid; gap: 5px; }
.fr-compat-card__label strong { color: var(--fr-fg); font-family: var(--ff-display); font-size: 16px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.fr-compat-card__label span { color: var(--fr-fg-3); font-family: var(--ff-mono); font-size: 10px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .fr-compat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fr-compat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fr-compat-card__mark { min-height: 94px; padding: 18px 12px 10px; } .fr-compat-card__label { padding: 10px 12px 12px; } }