/* Exacting Agents product page (/exacting-agents/). Loaded after site.css and scanyourvibe.css (the shared
   product-page kit: hero layout, report window, segmented tabs, early-access form, sticky CTA); this file adds
   only what is specific to Exacting Agents, prefixed xa-. The HTML ships the final state of the hero run
   (data-phase="done"); exacting-agents.js plays it from the start when motion is allowed. */

.xa .syv-word { color: #8A8D94; }
.xa .syv-word b { font-weight: 800; color: #F3F1EC; }
.xa-presents { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8A8D94; }
.xa-presents::after { content: ""; flex: 0 1 120px; height: 1px; background: #2B2D33; }
.xa-sign { margin: 4px 0 -8px; font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.01em; color: var(--ac, #E8663F); }

/* ---- hero window: Studio with one work item ---- */
.xa-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); height: 476px; }
.xa-nav { background: #141519; border-right: 1px solid rgba(255,255,255,0.05); padding: 14px 8px; }
.xa-nav-proj { margin: 0 0 10px; padding: 0 8px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #E4E6EA; }
.xa-nav-proj i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #3A3D44, #23252B); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.xa-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.xa-nav li { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #9A9DA4; }
.xa-nav li.is-on { background: rgba(255,255,255,0.07); color: #F3F1EC; }
.xa-nav li b { min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 10.5px; line-height: 17px; text-align: center; color: #C9CBD0; }
.xa-nav li.is-ask b { background: var(--ac, #E8663F); color: #15161A; }
.xa-main { min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.xa-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.xa-k { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #878A92; }
.xa-title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: #F3F1EC; }
.xa-rail { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.xa-rail li { position: relative; padding-top: 9px; font-size: 11px; font-weight: 600; color: #878A92; transition: color .3s; }
.xa-rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: #2B2D33; transition: background-color .3s; }
.xa-rail li.is-past { color: #B9BBC0; }
.xa-rail li.is-past::before { background: rgba(99,198,154,0.7); }
.xa-rail li.is-now { color: #F3F1EC; }
.xa-rail li.is-now::before { background: var(--ac, #E8663F); }
.xa-steps { display: flex; flex-direction: column; }
.xa-step { margin: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 38px; font-size: 13px; color: #E4E6EA; border-bottom: 1px solid rgba(255,255,255,0.04); }
.xa-step span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xa-step em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); font-size: 11px; font-weight: 600; color: #9A9DA4; white-space: nowrap; }
.xa-many b { width: 6px; height: 6px; border-radius: 50%; background: #9A9DA4; }
.xa-step.is-review em { background: rgba(99,198,154,0.12); color: #7FD3AE; }
.xa-ico { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #3A3D44; }
.xa-step.is-live .xa-ico { box-shadow: inset 0 0 0 1.5px rgba(232,102,63,0.35); }
.xa-step.is-live .xa-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--ac, #E8663F); animation: xaSpin .8s linear infinite; }
.xa-step.is-done .xa-ico { box-shadow: none; background: rgba(99,198,154,0.9); }
.xa-step.is-done .xa-ico::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6px; border: solid #101116; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.xa-step:not(.is-live):not(.is-done) { color: #8A8D94; }
@keyframes xaSpin { to { transform: rotate(360deg); } }
.xa-dec { margin: 6px 0; padding: 11px 13px 12px; border-radius: 8px; background: #1E1F24; border: 1px solid rgba(232,102,63,0.35); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.7); overflow: hidden; }
.xa-dec p { margin: 0; }
.xa-dec-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #9A9DA4; }
.xa-dec-pill { padding: 1px 8px; border-radius: 999px; background: rgba(232,102,63,0.15); font-weight: 700; color: #F0956F; }
.xa-dec-q { margin-top: 7px !important; font-size: 13px; line-height: 1.45; color: #F3F1EC; }
.xa-dec-q code { font-size: 12px; color: #F3B49C; }
.xa-dec-a { margin-top: 10px !important; display: flex; gap: 8px; }
.xa-opt { padding: 5px 11px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); font-size: 12px; font-weight: 600; color: #E4E6EA; transition: background-color .2s, border-color .2s, color .2s; }
.xa-opt.is-picked { background: #F3F1EC; border-color: #F3F1EC; color: #15161A; }
.xa-dec-done { display: none; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #C9CBD0; }
.xa-dec-done i { width: 14px; height: 14px; border-radius: 50%; background: rgba(99,198,154,0.9); position: relative; }
.xa-dec-done i::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6px; border: solid #101116; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.xa-dec.is-answered { padding: 8px 12px; border-color: rgba(255,255,255,0.07); background: transparent; box-shadow: none; }
.xa-dec.is-answered .xa-dec-h, .xa-dec.is-answered .xa-dec-q, .xa-dec.is-answered .xa-dec-a { display: none; }
.xa-dec.is-answered .xa-dec-done { display: flex; }
.xa-sb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: 30px; padding: 5px 14px; background: #121317; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: #9A9DA4; }
.xa-sb-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #C9CBD0; }
.xa-sb-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sev-ok); transition: background-color .3s; }
.xa-win:not([data-phase="done"]) .xa-sb-status i { background: #8A8D94; }
.xa-win[data-phase="decide"] .xa-sb-status i { background: var(--ac, #E8663F); }
.xa-sb-time { margin-left: auto; transition: opacity .4s; }
.xa-sb-time b { color: #F3F1EC; }
.xa-win:not([data-phase="done"]) .xa-sb-time { opacity: 0; }
@media (max-width: 640px) {
  .xa-body { grid-template-columns: minmax(0, 1fr); height: 500px; }
  .xa-nav { display: none; }
  .xa-main { padding: 14px; }
  .xa-rail li { font-size: 0; }                    /* phones: the bars alone, the current phase named below */
  .xa-rail li.is-now { font-size: 10.5px; }
  .xa-step { font-size: 12.5px; }
  .xa-sb-time { margin-left: 0; }
}

/* ---- B: hand-over rows (what you do today → what the agents take over) ---- */
.xa-handover .syv-gap-ok::before { content: "—"; color: #5A5D66; }
.xa-handover .syv-gap-bad::before { content: "✓"; color: var(--ac, #E8663F); }
.xa .syv-gap-k-r { color: var(--ac, #E8663F); }

/* ---- C: the work item, phase by phase ---- */
.xa .syv-lab .syv-sev { background: rgba(255,255,255,0.07); color: #C9CBD0; }
.xa-rows { margin: 18px 0 0; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.06); }
.xa-rows p { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 15px; line-height: 1.5; color: #E4E6EA; }
.xa-rows b { font-size: 12px; font-weight: 700; color: #8A8D94; }
.xa-rows code { font-size: 13px; color: #F3B49C; }
.xa-rows-steps p { grid-template-columns: 28px minmax(0, 1fr); }
.xa-rows-steps b { font-family: var(--mono); font-weight: 500; color: var(--ac, #E8663F); }
.xa-rows-run b { justify-self: start; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; line-height: 18px; background: rgba(255,255,255,0.07); color: #C9CBD0; }
.xa-rows-run b.is-done { background: rgba(99,198,154,0.12); color: #7FD3AE; }
.xa-rows-run b.is-live { background: rgba(232,102,63,0.14); color: #F0956F; }
.xa-rows-run b.is-ask { background: transparent; box-shadow: inset 0 0 0 1px rgba(232,102,63,0.6); color: #F0956F; }
.xa-rows-run b.is-na { background: transparent; box-shadow: inset 0 0 0 1px #3A3D44; color: #9A9DA4; }
.xa-verdict i { background: var(--sev-ok) !important; }
@media (max-width: 640px) {
  .xa-rows p { grid-template-columns: 1fr; gap: 4px; }
  .xa-rows-steps p { grid-template-columns: 24px minmax(0, 1fr); }
}

/* ---- D: four promises ---- */
.xa-trust .ex-wrap { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.xa-promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.xa-promises li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: clamp(22px, 3vw, 32px) clamp(0px, 2vw, 28px) clamp(22px, 3vw, 32px) 0; border-bottom: 1px solid var(--line); }
.xa-promises li:nth-child(odd) { border-right: 1px solid var(--line); }
.xa-promises li:nth-child(even) { padding-left: clamp(16px, 3vw, 36px); }
.xa-pn { grid-row: 1 / 3; font-family: var(--mono); font-size: 13px; color: var(--ac, #E8663F); padding-top: 6px; }
.xa-promises h3 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.xa-promises p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #A9ACB3; }
.xa-note { margin: clamp(24px, 3vw, 36px) 0 0; max-width: 720px; padding-left: 14px; border-left: 2px solid #3A3D44; font-size: 14.5px; line-height: 1.6; color: #9A9DA4; }
@media (max-width: 760px) {
  .xa-promises { grid-template-columns: 1fr; }
  .xa-promises li:nth-child(odd) { border-right: 0; }
  .xa-promises li:nth-child(even) { padding-left: 0; }
}

/* ---- E: Studio / Platform previews ---- */
.xa-mode { min-height: 0; }
.xa-mode-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0 16px !important; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; color: #E4E6EA; }
.xa-mode-row:last-child { border-bottom: 0; }
.xa-mode-row b { font-size: 12.5px; font-weight: 600; color: #8A8D94; }
.xa-mode-row .ok { color: #7FD3AE; font-weight: 600; }
.xa-mode-tech .xa-mode-row { font-family: var(--mono); font-size: 12.5px; }
.xa-mode-tech .xa-mode-row b { font-family: var(--mono); font-weight: 500; font-size: 12px; }
@media (max-width: 640px) { .xa-mode-row { grid-template-columns: 1fr; gap: 2px; } }

@media (prefers-reduced-motion: reduce) {
  .xa-step.is-live .xa-ico::after { animation: none; }
  .xa-rail li, .xa-rail li::before, .xa-sb-time, .xa-sb-status i { transition: none !important; }
}