/* =====================================================================
   Reusable content blocks on fixed templates (inc/page-blocks.php)
   ---------------------------------------------------------------------
   The Accessibility Audit landing has its own isolated stylesheet and
   dequeues the global theme sheets, so neither css/home.css (body.home) nor
   assets/styles/service-v2.css (body.service-v2) reaches a block placed there.
   This file gives the blocks the same appearance, scoped to the slot wrapper
   `.qm-page-blocks`, and is loaded only on a page whose slot has rows.

   - Tokens and section chrome: the values the Service copy uses.
   - Agents: GENERATED from the "Agent cards" rules in service-v2.css
     (`body.service-v2 ` -> `.qm-page-blocks `, url() rebased for this folder).
     Re-generate rather than hand-edit if that block changes.
   - The video banner, the Video block and the video component itself live in
     video-blocks.css, which is loaded alongside this file.

   Plain ASCII only.
   ===================================================================== */

/* ---- Tokens + base ---- */
.qm-page-blocks {
  --h-card: rgba(255, 255, 255, 0.03);
  --h-border: rgba(255, 255, 255, 0.09);
  --h-green: #3fe3b6;
  --h-purple: #8e6cff;
  --h-radius: 14px;
  --h-radius-lg: 22px;
  --h-pill: 999px;
  --sv-white: #F9F7FF;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #ffffff;
  line-height: 1.6;
}
.qm-page-blocks *,
.qm-page-blocks *::before,
.qm-page-blocks *::after { box-sizing: border-box; }
.qm-page-blocks img { max-width: 100%; height: auto; }
.qm-page-blocks h2,
.qm-page-blocks h3 { margin: 0; color: #ffffff; font-family: inherit; font-weight: 700; line-height: 1.12; }
.qm-page-blocks p { margin: 0; }

/* ---- Section chrome (as on Services) ---- */
.qm-page-blocks .home-section {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background: #08060D;
}
.qm-page-blocks .home-section > .container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 19px;
}
.qm-page-blocks .home-section .home-section__head {
  max-width: 1000px;
  margin: 0 auto 45px;
  text-align: center;
}
.qm-page-blocks .home-section .home-section__head h2 {
  margin: 0;
  color: #F9F7FF;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.qm-page-blocks .home-section .home-section__head p {
  margin: 14px 0 0;
  color: #CCCBD2;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.4;
}
.qm-page-blocks .home-section .home-accent-text-purple { color: #7D51F1; }
.qm-page-blocks .home-section .home-accent-text-green  { color: #00CCA6; }

/* The section button (the Video block's optional button), as on Services. */
.qm-page-blocks .home-section .home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.qm-page-blocks .home-section .home-btn svg { flex: none; }
.qm-page-blocks .home-section .home-btn:hover { gap: 20px; }
.qm-page-blocks .home-section .home-btn--green { background: #00CCA6; color: #05221C; }
.qm-page-blocks .home-section .home-btn--green svg path { stroke: #05221C; }
.qm-page-blocks .home-section .home-btn:focus-visible { outline: 2px solid #CBB9F9; outline-offset: 3px; }

/* ---- Agent cards ---- */
.qm-page-blocks .home-product__text > :first-child { margin-top: 0; }
.qm-page-blocks .home-product__text > :last-child { margin-bottom: 0; }
.qm-page-blocks .home-agents__diagram { display: grid; grid-template-columns: minmax(0, 288px) minmax(0, 592px) minmax(0, 288px); justify-content: center; column-gap: 16px; align-items: center; }
.qm-page-blocks .home-agents__col { display: flex; flex-direction: column; gap: 16px; }
.qm-page-blocks .home-agent-card { height: 161px; background: var(--h-card); border: 1px solid var(--h-border); border-radius: var(--h-radius); padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color 1.4s cubic-bezier(0.4, 0, 0.2, 1), background 1.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.qm-page-blocks .home-agent-card.is-active { border-color: #046654; background: rgba(6, 66, 60, 0.12); box-shadow: 0 0 0 1px rgba(6, 66, 60, 0.4), 0 11px 27px rgba(6, 66, 60, 0.22); }
.qm-page-blocks .home-agent-card__ico { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; margin-bottom: 13px; background: #00886F; transition: background 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.qm-page-blocks .home-agent-card.is-active .home-agent-card__ico { background: #00CCA6; }
.qm-page-blocks .home-agent-card__glyph { width: 20px; height: 20px; background-color: #68DCC7; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; transition: background-color 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.qm-page-blocks .home-agent-card.is-active .home-agent-card__glyph { background-color: #00886F; }
.qm-page-blocks .home-agent-card__ico img { width: 100%; height: 100%; display: block; opacity: 0.5; }
.qm-page-blocks .home-agent-card.is-active .home-agent-card__ico img { opacity: 1; }
.qm-page-blocks .home-agent-card__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.qm-page-blocks .home-agent-card__sub { color: var(--sv-white); font-size: 14px; }
.qm-page-blocks .home-agents__center { display: flex; }
.qm-page-blocks .home-agents__node { position: relative; width: 100%; height: 338px; border-radius: 999px; border: 0.5px solid transparent; background: linear-gradient(#08070E, #08070E) padding-box, conic-gradient(from var(--agent-angle, 45deg), #046654 0deg, #0D1A18 180deg, #046654 360deg) border-box; background-origin: border-box; background-clip: padding-box, border-box; transition: --agent-angle 1.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 26px; }
.qm-page-blocks .home-agents__node::before { content: ""; position: absolute; inset: -45%; background: radial-gradient(circle 640px at center, rgba(6, 66, 60, 1) 0%, rgba(6, 66, 60, 0.82) 16%, rgba(6, 66, 60, 0.58) 31%, rgba(6, 66, 60, 0.38) 46%, rgba(6, 66, 60, 0.22) 62%, rgba(6, 66, 60, 0.1) 80%, rgba(6, 66, 60, 0) 100%); filter: blur(60px); z-index: 0; transform-origin: center; transform: rotate(var(--agent-angle, 45deg)) translateY(-250px); will-change: transform; }
.qm-page-blocks .home-agents__node > * { position: relative; z-index: 1; }
.qm-page-blocks .home-agents__node-eyebrow { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.qm-page-blocks .home-agents__node-title { font-size: clamp(21px, 2.4vw, 32px); font-weight: 500; color: #00cca6; line-height: 1.1; }
.qm-page-blocks .home-agents__node-sub { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin-top: 10px; }
.qm-page-blocks .home-agents__node-dot { color: var(--h-green); font-size: 0.6em; vertical-align: middle; }
.qm-page-blocks .home-agents__products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 35px; }
/* HOVER JITTER FIX (QA, 2026-10-08): the hover is read off .home-product-cell,
   which never moves; the card inside lifts. Hovering the card itself, its 6px
   lift slid the bottom edge out from under a cursor parked there, the hover
   dropped, the card fell back under the cursor - a loop that jittered the card
   and its button. The cell is the grid item and stretches, so the card keeps
   filling it (equal heights as before). */
.qm-page-blocks .home-product-cell { display: flex; min-width: 0; }
.qm-page-blocks .home-product-cell > .home-product { flex: 1 1 auto; min-width: 0; }
.qm-page-blocks .home-product { position: relative; border-radius: var(--h-radius-lg); padding: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s ease; }
.qm-page-blocks .home-product-cell:hover > .home-product { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.qm-page-blocks .home-product-cell:hover > .home-product--purple { border-color: rgba(142, 108, 255, 0.6); }
.qm-page-blocks .home-product-cell:hover > .home-product--green { border-color: rgba(63, 227, 182, 0.6); }
.qm-page-blocks .home-product--purple { background: url("../../images/purple-back.png?v=3") center / 100% 100% no-repeat; border: 1px solid rgba(142, 108, 255, 0.35); }
.qm-page-blocks .home-product--green { background: url("../../images/green-back.png?v=3") center / 100% 100% no-repeat; border: 1px solid rgba(63, 227, 182, 0.35); }
.qm-page-blocks .home-product__badge { align-self: flex-start; padding: 5px 11px; border-radius: var(--h-pill); font-size: 10px; font-weight: 700; border: 1px solid currentColor; margin-bottom: 24px; }
.qm-page-blocks .home-product--purple .home-product__badge { color: var(--h-purple); }
.qm-page-blocks .home-product--green .home-product__badge { color: var(--h-green); }
/* font-weight is DECLARED, not inherited from the <h3> default.

   The card only ever looked bold because the surfaces it shipped on - the
   homepage and Service v2 - do not load dist/styles/main_new.css, so the UA's
   bold <h3> survived. Add the section to a Default-template page or the Page
   Builder, where that sheet IS loaded, and its Bootstrap-style heading rule
   takes the title down to 400 and the card reads unstyled. Measured: 700 on the
   homepage and on service-v2, 400 on page-flexible.

   Stating the weight here makes the component carry its own appearance instead
   of depending on which global sheet a template happens to load. */
.qm-page-blocks .home-product .home-product__title { font-size: 18px; font-weight: 700; margin: 0 0 24px; }
.qm-page-blocks .home-product .home-product__text { color: rgba(255, 255, 255, 0.9); font-size: 12px; line-height: 1.6; margin: 0 0 32px; }
.qm-page-blocks .home-product__foot { margin-top: auto; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: var(--h-radius); background: rgba(0, 0, 0, 0.28); color: #fff; font-size: 11px; font-weight: normal; text-decoration: none; transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease; }
.qm-page-blocks .home-product__foot-ico { display: inline-flex; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease; }
.qm-page-blocks .home-product--purple .home-product__foot-ico { color: var(--h-purple); }
.qm-page-blocks .home-product--green .home-product__foot-ico { color: var(--h-green); }
.qm-page-blocks .home-product__foot-text { text-align: center; }
.qm-page-blocks .home-product__foot--static { cursor: default; }
.qm-page-blocks .home-product-cell:hover > .home-product--purple .home-product__foot { background: var(--h-purple); color: #0c0a18; }
.qm-page-blocks .home-product-cell:hover > .home-product--green .home-product__foot { background: var(--h-green); color: #07120f; }
.qm-page-blocks .home-product-cell:hover > .home-product .home-product__foot-ico { left: calc(100% - 32px); color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .qm-page-blocks .home-agents__node { transition: none; }
}
@media (max-width: 1040px) {
  .qm-page-blocks .home-agents__diagram { grid-template-columns: 1fr; justify-content: stretch; column-gap: 0; row-gap: 18px; }
  .qm-page-blocks .home-agents__center { order: -1; }
  .qm-page-blocks .home-agents__col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
  .qm-page-blocks .home-agent-card { height: auto; min-height: 120px; }
  .qm-page-blocks .home-agents__node { width: 100%; height: auto; min-height: 192px; }
  .qm-page-blocks .home-agents__products { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .qm-page-blocks .home-agents__diagram { grid-template-columns: 1fr 1fr; column-gap: 13px; row-gap: 13px; }
  .qm-page-blocks .home-agents__col { display: contents; }
  .qm-page-blocks .home-agents [data-agent="tl"] { order: 1; }
  .qm-page-blocks .home-agents [data-agent="tr"] { order: 2; }
  .qm-page-blocks .home-agents__center { order: 3; grid-column: 1 / -1; }
  .qm-page-blocks .home-agents [data-agent="bl"] { order: 4; }
  .qm-page-blocks .home-agents [data-agent="br"] { order: 5; }
}


/* ---- At-rules the agents glow depends on ---- */
@property --agent-angle { syntax: "<angle>"; inherits: true; initial-value: 45deg; }