/* ClaimVision solutions pages (/solutions/*): the shared layout kit and its motion.
   Loaded after site.css. Motion is armed by assets/site.js (section 18): an element with [data-rise]
   gets .sx-armed (its children wait) and then .is-in (they arrive, staggered by --i). Without script,
   or with reduced motion, nothing is armed and everything is simply visible. */

/* ---------- type and page furniture ---------- */
.sx-crumb { font-size: 12px; color: #707070; margin: 0 0 18px; }
.sx-crumb a { color: #707070; text-decoration: none; }
.sx-crumb span { color: #404040; }
.sx-h1 { font-family: var(--font-display); font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--cv-deep-current); margin: 0 0 22px; text-wrap: pretty; max-width: 17ch; }
.sx-first { font-size: 19px; line-height: 1.55; color: var(--cv-deep-current); margin: 0 0 16px; text-wrap: pretty; }
.sx-body { font-size: 16.5px; line-height: 1.7; color: var(--cv-graphite); margin: 0 0 16px; max-width: 64ch; text-wrap: pretty; }
.sx-note { font-size: 13px; line-height: 1.6; color: #6a6a6a; margin: 14px 0 0; max-width: 80ch; }
.sx-related { font-size: 14px; line-height: 1.9; color: #595959; margin: 28px 0 0; }
.sx-related a { color: var(--cv-deep-teal); font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-block; padding: 4px 0; }
.sx-related a:not(:last-child)::after { content: "·"; margin-left: 10px; margin-right: 4px; color: #a7b4bc; font-weight: 400; }
@media (max-width: 600px) { .sx-related a { display: block; } .sx-related a:not(:last-child)::after { content: none; } }
.sx-more { display: inline-block; margin-top: 10px; }
.sx-more::after { content: " →"; }
.sx-related a:hover { color: var(--cv-clear-sky); }
.sx-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sx-tight { padding-top: 40px; padding-bottom: 40px; }
.sx-sec { background: #fff; border-top: 1px solid hsl(210 10% 92%); }
/* arrivals and the laptop's turn move things sideways for a moment; never let that become a horizontal scroll */
main > section, main > figure { overflow-x: clip; }
.sx-sec.alt { background: #fafafa; }
.sx-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.sx-body a, .sx-checks a, .sx-docs a, .sx-chain a, .sx-fit a, .sx-cards a, .sx-vs a, .sx-stages a, .sx-steps a, .cv-faq a, .sx-table a, .sx-note a, .sx-fall-note a, .sx-traps a, .sx-lessons a { color: var(--cv-deep-teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,74,92,.3); }
.sx-body a:hover, .sx-checks a:hover, .sx-docs a:hover, .sx-chain a:hover, .sx-fit a:hover, .sx-cards a:hover, .sx-vs a:hover, .sx-stages a:hover, .sx-steps a:hover, .cv-faq a:hover, .sx-table a:hover, .sx-note a:hover, .sx-fall-note a:hover, .sx-traps a:hover, .sx-lessons a:hover { color: var(--cv-deep-current); border-bottom-color: var(--cv-clear-sky); }
.sx-glance a { color: var(--cv-deep-teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,74,92,.3); }
/* links on dark grounds: one style everywhere (mint with a fine rule), never the browser's blue */
.cv-dark a:not(.cv-btn), .sx-hero.dark .sx-first a, .sx-band-s a, .sx-proof a { color: #9fe3dc; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(159,227,220,.45); }
.cv-dark a:not(.cv-btn):hover, .sx-hero.dark .sx-first a:hover, .sx-band-s a:hover, .sx-proof a:hover { color: #fff; border-bottom-color: #9fe3dc; }
/* keyboard focus: the brand ring, mint on dark grounds */
main a:focus-visible, main button:focus-visible, main summary:focus-visible { outline: 2px solid var(--cv-clear-sky); outline-offset: 3px; border-radius: 4px; }
.cv-dark a:focus-visible, .sx-hero.dark a:focus-visible, .sx-band a:focus-visible { outline-color: #9fe3dc; }
.cv-h2 { text-wrap: balance; }
.sx-head { max-width: 760px; margin-bottom: 30px; }
/* "What we can show today": one callout, on light or dark */
.sx-show { box-sizing: border-box; width: fit-content; margin: 28px 0 0; padding: 18px 22px 20px; border-left: 3px solid var(--cv-aqua); background: var(--cv-mint); border-radius: 0 12px 12px 0 !important; max-width: min(760px, 100%) !important;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.45; color: var(--cv-deep-current); text-wrap: pretty; }
.sx-show > span:first-child { display: block; margin-bottom: 6px; font: 700 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cv-deep-teal); }
.cv-dark .sx-show { background: rgba(255,255,255,.06); color: #fff; border-left-color: #7fd6d1; }
.cv-dark .sx-show > span:first-child { color: #7fd6d1; }
.sx-head .cv-lede { margin-bottom: 0; }

/* ---------- hero: light by default, .dark over a storm clip ---------- */
.sx-hero { position: relative; overflow: clip; background: #fff; border-bottom: 1px solid hsl(210 10% 92%); padding: 64px 0 92px; isolation: isolate; }
.sx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 92% 10%, rgba(51,168,255,.09), transparent 60%), radial-gradient(50% 60% at 70% 100%, rgba(43,188,180,.08), transparent 60%);
}
.sx-hero > .cv-wrap { position: relative; }
.sx-hero .cv-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.sx-hero.dark { background: #00263c; border-bottom: 0; padding: 72px 0 96px; }
.sx-hero.dark::before { display: none; }
.sx-hero.dark .cv-texture { opacity: .5; }
.sx-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,38,60,.92) 0%, rgba(0,38,60,.74) 50%, rgba(0,38,60,.5) 100%), linear-gradient(180deg, rgba(0,38,60,.2) 0%, rgba(0,38,60,.65) 100%); }
.sx-hero.dark .sx-crumb, .sx-hero.dark .sx-crumb a { color: #b9c8d1; }
.sx-hero.dark .sx-crumb span { color: #e6eef2; }
.sx-hero.dark .sx-h1, .sx-hero.dark .sx-first { color: #fff; }
.sx-hero.dark .sx-first a { color: #9fe3dc; }
.sx-hero.dark .sx-body { color: #dce7ed; }
.sx-hero.dark .cv-cap { color: #c3d2da; }

/* ---------- the laptop: a soft blue light behind it and a floor shadow. It sits flat and still: motion is kept for
   arrivals only, so nothing on the page moves for its own sake ---------- */
.sx-stage { position: relative; isolation: isolate; margin: 0; min-width: 0; padding: 12px 0 0; }
/* the light stays behind the laptop and stops above the caption */
.sx-stage .cv-glow, .sx-pair .cv-glow { inset: -8% -6% 16% -6%; }
.sx-stage .cv-glow i, .sx-pair .cv-glow i { animation: none; opacity: .28; filter: blur(64px); }
.sx-stage .cv-glow i:nth-child(2), .sx-pair .cv-glow i:nth-child(2) { background: #7cc4ff; }
.sx-stage .cv-glow i:nth-child(3), .sx-pair .cv-glow i:nth-child(3) { display: none; }
.sx-hero.dark .sx-stage .cv-glow i { opacity: .18; }
.sx-laptop { position: relative; }
.sx-laptop .cv-frame { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
  box-shadow: 0 40px 70px -40px rgba(0,38,60,.55), 0 18px 30px -24px rgba(0,38,60,.45), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.12); }
.sx-laptop::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -36px; height: 28px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,38,60,.26), rgba(0,38,60,0)); filter: blur(4px); }
.sx-hero.dark .sx-laptop::after { background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.sx-laptop .cv-shot { aspect-ratio: 2200 / 1376; }
.sx-laptop .cv-shot.cv-loop { aspect-ratio: 1280 / 712; }
.sx-stage.sx-armed .sx-laptop .cv-frame { transform: translateY(14px); opacity: 0; }
.sx-stage.sx-armed.is-in .sx-laptop .cv-frame { transform: none; opacity: 1; }
.sx-stage.sx-armed > .sx-laptop { opacity: 1 !important; transform: none !important; }

/* callout cards over the laptop's edges: each names something real on that screen */
/* .tr sits top right, just under the window bar so the address stays readable; .bl sits bottom left over the laptop's edge */
.sx-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; min-width: 220px; max-width: 280px;
  background: rgba(255,255,255,.97); border: 1px solid rgba(0,38,60,.08); border-radius: 14px; padding: 10px 15px 10px 10px;
  box-shadow: 0 22px 44px -22px rgba(0,38,60,.45), 0 2px 6px rgba(0,38,60,.08); }
.sx-float.tr { right: -3%; top: 66px; }
.sx-float.bl { left: -6%; top: 64%; }
.sx-float b, .sx-float span { text-wrap: balance; }
.sx-float .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cv-mint); }
.sx-float .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--cv-deep-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-float.warn .ic { background: #fff3e0; } .sx-float.warn .ic svg { stroke: #b45309; }
.sx-float.ok .ic { background: #e3f6ef; } .sx-float.ok .ic svg { stroke: #0f7a55; }
.sx-float b { display: block; font: 700 13.5px/1.3 var(--font-ui); color: var(--cv-deep-current); }
.sx-float span { display: block; font-size: 12px; line-height: 1.4; color: #5d6b75; margin-top: 1px; }
.sx-float .amt { font-family: var(--font-mono); font-weight: 700; color: #b45309; white-space: nowrap; }
.sx-stage .cv-cap { margin-top: 30px; }

/* ---------- staggered arrivals ---------- */
.sx-armed > * { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.sx-armed.is-in > * { opacity: 1; transform: none; }
.sx-armed > .sx-float { transform: translateY(14px) scale(.94); transition-delay: calc(420ms + var(--i, 0) * 120ms); }
.sx-armed.is-in > .sx-float { transform: none; }

/* ---------- at a glance: four capability tiles ---------- */
.sx-glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-glance li { position: relative; background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.sx-glance li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cv-gradient); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sx-glance li:hover::after, .sx-glance.is-in li::after { transform: scaleX(1); }
.sx-glance.is-in li::after { transition-delay: calc(300ms + var(--i, 0) * 120ms); }
.sx-glance svg, .sx-cards .ic svg, .sx-steps .ic svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: var(--cv-mint); fill: none; stroke: var(--cv-deep-teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.sx-glance b { font-family: var(--font-display); font-size: 16px; color: var(--cv-deep-current); }
.sx-glance span { font-size: 14.5px; line-height: 1.55; color: #4a4a4a; }

/* ---------- worked example: a page, its numbered passages and the fields they became ---------- */
.sx-anatomy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 30px; }
.sx-doc { margin: 0; background: #fff; border: 1px solid var(--cv-silver); border-radius: 6px; padding: 26px 30px 20px; box-shadow: 0 24px 50px -32px rgba(0,38,60,.45); font-family: Georgia, "Times New Roman", serif; transform: rotate(-.6deg); position: relative; overflow: hidden; }
.sx-doc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #1c2b36; padding-bottom: 8px; margin-bottom: 16px; font-size: 13px; color: #555; }
.sx-doc-head b { font-size: 15px; color: #1c2b36; letter-spacing: .02em; text-transform: uppercase; }
.sx-line { height: 7px; border-radius: 4px; background: #e6eaee; margin: 0 0 10px; }
.sx-line.w90 { width: 90%; } .sx-line.w80 { width: 80%; } .sx-line.w70 { width: 70%; } .sx-line.w60 { width: 60%; } .sx-line.w50 { width: 50%; } .sx-line.w40 { width: 40%; }
.sx-txt { font-size: 15px; line-height: 1.5; color: #2a2a2a; margin: 4px 0 12px; }
.sx-hand { font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive; color: #22408a; font-size: 15.5px; transform: rotate(-1deg); }
.sx-doc mark { background: rgba(43,188,180,.18); color: inherit; padding: 1px 4px; border-radius: 3px; box-shadow: inset 0 -2px 0 var(--cv-aqua); white-space: nowrap; transition: background .5s ease, box-shadow .5s ease; }
.sx-doc mark::after, .sx-fields li::before { content: attr(data-n); display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--cv-deep-current); color: #fff; font: 700 11px var(--font-ui); vertical-align: 2px; }
.sx-doc mark::after { margin-left: 5px; }
.sx-doc figcaption { font-family: var(--font-ui); font-size: 12.5px; color: #707070; margin-top: 14px; }
/* a scan line passes down the page and each mark lights as it is reached */
.sx-doc::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(43,188,180,0), rgba(43,188,180,.16) 70%, rgba(51,168,255,.5)); }
.sx-anatomy.sx-armed .sx-doc mark { background: transparent; box-shadow: inset 0 0 0 transparent; }
.sx-anatomy.is-in .sx-doc mark { background: rgba(43,188,180,.18); box-shadow: inset 0 -2px 0 var(--cv-aqua); }
.sx-anatomy.is-in .sx-doc::before { animation: sx-scan 2.6s ease-in-out .3s 1 both; }
@keyframes sx-scan { 0% { top: -60px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sx-anatomy.is-in .sx-doc [data-n="1"] { transition-delay: .7s; } .sx-anatomy.is-in .sx-doc [data-n="2"] { transition-delay: 1.2s; }
.sx-anatomy.is-in .sx-doc [data-n="3"] { transition-delay: 1.7s; } .sx-anatomy.is-in .sx-doc [data-n="4"] { transition-delay: 2.2s; }
.sx-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sx-fields li { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "n k" "n v" "n s"; column-gap: 10px; background: #f6fbfb; border: 1px solid rgba(43,188,180,.35); border-radius: 12px; padding: 12px 16px; }
.sx-anatomy.sx-armed .sx-fields li { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.sx-anatomy.is-in .sx-fields li { opacity: 1; transform: none; }
.sx-anatomy.is-in .sx-fields li:nth-child(1) { transition-delay: .9s; } .sx-anatomy.is-in .sx-fields li:nth-child(2) { transition-delay: 1.4s; }
.sx-anatomy.is-in .sx-fields li:nth-child(3) { transition-delay: 1.9s; } .sx-anatomy.is-in .sx-fields li:nth-child(4) { transition-delay: 2.4s; }
.sx-anatomy.sx-armed > * { opacity: 1; transform: none; }
.sx-fields li::before { grid-area: n; margin-top: 2px; }
.sx-fields .k { grid-area: k; font: 600 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #6a6a6a; }
.sx-fields .v { grid-area: v; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--cv-deep-current); }
.sx-fields .v em { display: block; font: 500 13.5px var(--font-ui); color: var(--cv-deep-teal); }
.sx-fields .s { grid-area: s; font-size: 12.5px; color: #707070; margin-top: 2px; }
.sx-fields .s::before { content: "Source: "; font-weight: 600; }
.sx-then { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--cv-deep-current); margin: 40px 0 14px; }

/* field, policy, finding: a chain of three */
.sx-chain { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 0; }
.sx-chain li { position: relative; background: #fff; border: 1px solid var(--cv-silver); padding: 18px 22px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.sx-chain li:first-child { border-radius: 14px 0 0 14px; }
.sx-chain li:last-child { border-radius: 0 14px 14px 0; }
.sx-chain li + li { border-left: 0; }
.sx-chain li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 20px; height: 20px; background: #fff; border-top: 1px solid var(--cv-silver); border-right: 1px solid var(--cv-silver); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.sx-chain .sx-step { font: 700 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cv-aqua); }
.sx-chain b { font-family: var(--font-display); font-size: 17px; color: var(--cv-deep-current); }
.sx-chain span:not(.sx-step) { font-size: 14.5px; line-height: 1.55; color: #4a4a4a; }
.sx-chain .sx-find { background: var(--cv-deep-current); border-color: var(--cv-deep-current); overflow: hidden; }
.sx-chain .sx-find::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 100% 0%, rgba(51,168,255,.28), transparent 60%); }
.sx-chain .sx-find b { color: #fff; font-size: 19px; }
.sx-chain .sx-find span:not(.sx-step) { color: rgba(255,255,255,.82); }
.sx-chain .sx-find .sx-step { color: #7fd6d1; }
.sx-chain .sx-find a { color: #7fd6d1; border-bottom-color: rgba(127,214,209,.4); }

/* ---------- document cards ---------- */
.sx-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.sx-docs article { background: #fff; border: 1px solid var(--cv-silver); border-top: 3px solid var(--cv-aqua); border-radius: 12px; padding: 18px 20px 20px; }
.sx-docs h3 { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--cv-deep-current); margin: 0 0 12px; }
.sx-docs dl { margin: 0; }
.sx-docs dt, .sx-cards dt { font: 600 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #6a6a6a; margin: 10px 0 3px; }
.sx-docs dt:first-child, .sx-cards dt:first-child { margin-top: 0; }
.sx-docs dd, .sx-cards dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: #333; }

/* ---------- numbered cards with an icon (sources of leakage, problems, steps) ---------- */
.sx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: sxc; }
.sx-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-cards > * { position: relative; background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 20px 22px 22px; counter-increment: sxc; }
/* five cards: three across, then two wider ones, so no row has an empty slot */
.sx-cards.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sx-cards.five > * { grid-column: span 2; }
.sx-cards.five > :nth-child(n+4) { grid-column: span 3; }
.sx-cards.num > *::before { content: counter(sxc, decimal-leading-zero); position: absolute; right: 18px; top: 16px; font: 700 12px var(--font-mono); color: #a7b4bc; }
.sx-cards h3 { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--cv-deep-current); margin: 0 0 8px; padding-right: 24px; }
.sx-cards p { font-size: 14.5px; line-height: 1.6; color: #444; margin: 0; }
.sx-cards dl { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #dde3e6; }
.sx-cards dd.us { color: var(--cv-deep-current); font-weight: 600; }
.sx-cards .ic { display: block; }

/* ---------- two ways, side by side: label, then today vs. with ClaimVision ---------- */
.sx-vs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sx-vs-head, .sx-vs li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; }
.sx-vs-head { font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #6a6a6a; padding: 0 0 2px; }
.sx-vs-head span { padding: 0 20px; } .sx-vs-head span:last-child { color: var(--cv-deep-teal); }
.sx-vs li { background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; overflow: hidden; }
.sx-vs li > * { padding: 16px 20px; font-size: 14.5px; line-height: 1.55; }
.sx-vs .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-vs .row { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--cv-deep-current); background: #f7f9fa; }
.sx-vs .old { color: #5b5b5b; position: relative; padding-left: 42px; }
.sx-vs .old::before, .sx-vs .new::before { content: ""; position: absolute; left: 16px; top: 19px; width: 16px; height: 16px; border-radius: 50%; }
.sx-vs .old::before { background: #eceff1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889399' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sx-vs .new { position: relative; padding-left: 42px; color: var(--cv-deep-current); background: linear-gradient(90deg, rgba(43,188,180,.09), rgba(51,168,255,.04)); }
.sx-vs .new::before { background: var(--cv-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* ---------- the money and the photos: text beside a product screen ---------- */
.sx-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.sx-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sx-tiers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; padding: 0; }
.sx-tiers li { font: 700 12.5px var(--font-ui); padding: 6px 12px; border-radius: 999px; border: 1px solid; }
.sx-tiers .g { color: #7a5b00; background: #fff6d6; border-color: #e9c96a; }
.sx-tiers .s { color: #4a5560; background: #eef1f4; border-color: #c3ccd5; }
.sx-tiers .b { color: #7a4523; background: #fbeee4; border-color: #e0b08d; }
.sx-tiers .w { color: #595959; background: #fff; border-color: #c8c8c8; border-style: dashed; font-weight: 600; }
.sx-checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.sx-checks li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.6; color: var(--cv-graphite); }
.sx-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--cv-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sx-checks b { color: var(--cv-deep-current); }

/* ---------- getting the data out ---------- */
.sx-out { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-out li { position: relative; overflow: hidden; background: #0f2f42; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.sx-out li::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; height: 120%; background: radial-gradient(closest-side, rgba(43,188,180,.22), transparent); pointer-events: none; transition: transform .6s ease; }
.sx-out li:hover::after { transform: translate(-12%, -12%); }
.sx-out code { font: 700 15px ui-monospace, "Cascadia Mono", Consolas, monospace; color: #7fd6d1; background: rgba(127,214,209,.1); border: 1px solid rgba(127,214,209,.3); border-radius: 8px; padding: 4px 9px; align-self: flex-start; margin-bottom: 8px; }
.sx-out b { font-family: var(--font-display); font-size: 16px; color: #fff; }
.sx-out span { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.75); }

/* ---------- how it fits ---------- */
.sx-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-fit > div { background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 20px 22px 22px; display: flex; flex-direction: column; }
.sx-fit .sx-more, .sx-cards .sx-more { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.sx-cards > * { display: flex; flex-direction: column; }
.sx-fit h3 { font-family: var(--font-display); font-size: 17px; color: var(--cv-deep-current); margin: 0 0 8px; }
.sx-fit p { font-size: 14.5px; line-height: 1.6; color: #444; margin: 0; }

/* ---------- full-bleed art band with a statement over it, drifting a little slower than the page ---------- */
.sx-band { position: relative; margin: 0; min-height: clamp(340px, 40vw, 540px); display: flex; overflow: hidden; background: #00263c; isolation: isolate; }
.sx-band picture { position: absolute; inset: 0; }
.sx-band img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.04); will-change: transform; }
.sx-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,38,60,.9) 0%, rgba(0,38,60,.62) 38%, rgba(0,38,60,.08) 72%, rgba(0,38,60,0) 100%); }
.sx-band.right::before { background: linear-gradient(270deg, rgba(0,38,60,.94) 0%, rgba(0,38,60,.78) 40%, rgba(0,38,60,.2) 72%, rgba(0,38,60,.05) 100%); }
.sx-band .cv-wrap { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 56px; }
.sx-band.strong::before { background: linear-gradient(90deg, rgba(0,38,60,.94) 0%, rgba(0,38,60,.8) 45%, rgba(0,38,60,.3) 75%, rgba(0,38,60,.08) 100%); }
.sx-band.right .cv-wrap { align-items: flex-end; text-align: right; }
.sx-band-q { margin: 0; max-width: 19ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance;
  background: var(--cv-ink-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.sx-band-s { margin: 16px 0 0; max-width: 44ch; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.84); }
.sx-band-s a { color: #9fe3dc; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(159,227,220,.4); }
@media (forced-colors: active) { .sx-band-q { background: none; -webkit-text-fill-color: currentColor; } }
/* motes of light rising through the band */
.sx-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sx-motes i { position: absolute; bottom: -10px; left: var(--l); width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: #9fe3dc; box-shadow: 0 0 10px 2px rgba(127,214,209,.6); opacity: 0;
  animation: sx-mote var(--d, 14s) linear var(--w, 0s) infinite; }
.sx-motes i:nth-child(3n) { background: #8fcaff; box-shadow: 0 0 10px 2px rgba(51,168,255,.55); }
@keyframes sx-mote { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .6; } 100% { transform: translate(var(--dx, 30px), -560px); opacity: 0; } }

/* ---------- dark proof band ---------- */
.sx-proof { text-align: left; }
.sx-proof .sx-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin: 0 0 16px; max-width: 26ch; color: #fff; text-wrap: balance; }
.sx-proof p { color: rgba(255,255,255,.82); font-size: 16.5px; line-height: 1.65; max-width: 62ch; margin: 0 0 12px; }
.sx-proof a { color: #9fe3dc; font-weight: 600; }

/* ---------- cycle time: where the days go, as two lanes ---------- */
.sx-lanes { background: #fff; border: 1px solid var(--cv-silver); border-radius: 18px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -48px rgba(0,38,60,.5); }
.sx-lane + .sx-lane { margin-top: 22px; }
.sx-lane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 9px; font: 700 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #5b6770; }
.sx-lane.us .sx-lane-h { color: var(--cv-deep-teal); }
.sx-lane-h small { font: 500 12.5px var(--font-ui); letter-spacing: 0; text-transform: none; color: #7a858c; }
.sx-bar { display: flex; height: 46px; gap: 3px; }
.sx-bar > span { position: relative; flex: var(--g) 1 0; min-width: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; font: 600 11.5px var(--font-ui); white-space: nowrap; overflow: hidden; transition: flex-grow 1.4s cubic-bezier(.65,0,.35,1), opacity .6s ease; }
.sx-bar .wait { color: #6f7b83; background: repeating-linear-gradient(135deg, #eef1f3 0 8px, #e3e8eb 8px 16px); }
.sx-bar .work { color: #fff; background: linear-gradient(120deg, #1a4a5c, #0d7aa8); }
.sx-lane.us .sx-bar .work { background: linear-gradient(120deg, #12867f, #2bbcb4); }
.sx-lane.us .sx-bar .read { color: #00263c; background: linear-gradient(120deg, #bfeeea, #9fe3dc); }
.sx-lanes.sx-armed .sx-lane.us .wait { flex-grow: var(--g0); }
.sx-lanes.sx-armed.is-in .sx-lane.us .wait { flex-grow: var(--g); transition-delay: .8s; }
.sx-lanes.sx-armed .sx-lane.us .wait span { opacity: 1; }
.sx-lanes.sx-armed > * { opacity: 1; transform: none; }
.sx-lane .sx-bar .gap { background: none; border: 2px dashed rgba(43,188,180,.5); color: var(--cv-deep-teal); justify-content: flex-start; padding-left: 12px; }
.sx-lanes.sx-armed .sx-bar .gap { opacity: 0; }
.sx-lanes.sx-armed.is-in .sx-bar .gap { opacity: 1; transition: flex-grow 1.4s cubic-bezier(.65,0,.35,1) .8s, opacity .6s ease 1.6s; }
.sx-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #eef1f3; font-size: 12.5px; color: #5b6770; }
.sx-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sx-legend i { width: 22px; height: 12px; border-radius: 4px; display: inline-block; }
.sx-legend .lw { background: repeating-linear-gradient(135deg, #eef1f3 0 5px, #dfe5e8 5px 10px); }
.sx-legend .lk { background: linear-gradient(120deg, #1a4a5c, #0d7aa8); }
.sx-legend .lr { background: linear-gradient(120deg, #bfeeea, #9fe3dc); }

/* five stages, each a card: what the file waits for today, and what is waiting instead */
.sx-stages { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: stg; }
.sx-stages li { counter-increment: stg; position: relative; background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 18px 18px 18px; display: flex; flex-direction: column; }
.sx-stages li::before { content: counter(stg); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-bottom: 12px; background: var(--cv-deep-current); color: #fff; font: 700 13px var(--font-ui); }
.sx-stages li:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: 50px; right: -13px; height: 2px; background: linear-gradient(90deg, var(--cv-aqua), rgba(43,188,180,.15)); }
.sx-stages h3 { font-family: var(--font-display); font-size: 15.5px; line-height: 1.3; color: var(--cv-deep-current); margin: 0 0 10px; }
.sx-stages p { font-size: 13.5px; line-height: 1.55; margin: 0; color: #5b5b5b; }
.sx-stages p + p { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dde3e6; color: var(--cv-deep-current); }
.sx-stages p b { display: block; font: 700 10.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #8a959b; margin-bottom: 3px; }
.sx-stages p + p b { color: var(--cv-aqua); }

/* two product windows, one in front of the other */
.sx-pair { position: relative; isolation: isolate; padding: 10px 6% 50px 0; }
.sx-pair .cv-glow { inset: -10% -6% -8%; }
.sx-win { position: relative; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(0,38,60,.12); box-shadow: 0 30px 60px -30px rgba(0,38,60,.5); }
.sx-win .cv-frame-bar { border-radius: 0; }
.sx-win .cv-shot { aspect-ratio: 2200 / 1376; }
.sx-win.back { width: 82%; }
.sx-win.front { position: absolute; right: 0; bottom: 0; width: 64%; box-shadow: 0 40px 70px -26px rgba(0,38,60,.6); }
.sx-pair .sx-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--font-ui); color: #fff; background: var(--cv-deep-current); padding: 7px 12px; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(0,38,60,.6); }
.sx-pair .sx-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fd6d1; animation: cv-ping 2s ease-out infinite; }
.sx-pair .sx-tag { left: 12px; top: 42px; }
.sx-pair.sx-armed > .front { transform: translate(30px, 40px); }
.sx-pair.sx-armed.is-in > .front { transform: none; transition-delay: .35s; }

/* ---------- a figure set in a table, made readable ---------- */
/* the border sits on the table box, so the caption stays outside it and nothing needs clipping */
.sx-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
.sx-table caption { text-align: left; font: 700 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #6a6a6a; padding: 0 2px 10px; }
.sx-table thead th:first-child { border-top-left-radius: 13px; } .sx-table thead th:last-child { border-top-right-radius: 13px; }
.sx-table tbody tr:last-child > :first-child { border-bottom-left-radius: 13px; } .sx-table tbody tr:last-child > :last-child { border-bottom-right-radius: 13px; }
.sx-table .src { width: 15%; }
.sx-table .src span { white-space: nowrap; }
.sx-table th, .sx-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid #edf0f2; }
.sx-table thead th { background: #00263c; color: #fff; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.sx-table tbody tr:last-child > * { border-bottom: 0; }
.sx-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--cv-deep-current); width: 24%; }
.sx-table tbody tr { transition: background .2s ease; }
.sx-table tbody tr:hover { background: #f6fbfb; }
.sx-table .src { font-size: 13px; }
.sx-table .src span { display: block; font-size: 11.5px; color: #707070; }

/* ---------- leakage: a waterfall from the estimate to what is owed ---------- */
.sx-fall { background: #fff; border: 1px solid var(--cv-silver); border-radius: 18px; padding: 26px 28px 20px; box-shadow: 0 30px 60px -48px rgba(0,38,60,.5); }
.sx-fall-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 13px; color: #6a6a6a; }
.sx-fall-h b { font-family: var(--font-display); font-size: 16px; color: var(--cv-deep-current); }
.sx-fall ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-fall li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 120px; gap: 16px; align-items: center; }
.sx-fall .lab { font-size: 14px; line-height: 1.4; color: #333; }
.sx-fall .lab small { display: block; font-size: 12px; color: #7a858c; }
.sx-fall .trk { position: relative; height: 30px; border-radius: 6px; background: repeating-linear-gradient(90deg, #f3f6f7 0 calc(10% - 1px), #e9eef0 calc(10% - 1px) 10%); }
.sx-fall .bar { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); border-radius: 6px; transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.sx-fall .gross .bar { background: linear-gradient(90deg, #1a4a5c, #0d7aa8); }
.sx-fall .minus .bar { background: repeating-linear-gradient(135deg, #f59e0b 0 6px, #f8b84a 6px 12px); transform-origin: right; }
.sx-fall .net .bar { background: linear-gradient(90deg, #12867f, #2bbcb4); }
.sx-fall .ghost .bar { background: transparent; border: 2px dashed #e08a2a; }
.sx-fall .ghost .lab, .sx-fall .ghost .amt { color: #b45309; }
.sx-fall .amt { text-align: right; font: 700 14.5px var(--font-mono); color: var(--cv-deep-current); }
.sx-fall .minus .amt { color: #b45309; }
.sx-fall .net .amt { color: #0f7a55; }
.sx-fall.sx-armed .bar { transform: scaleX(0); }
.sx-fall.sx-armed.is-in .bar { transform: none; }
.sx-fall.sx-armed > * { opacity: 1; transform: none; }
.sx-fall.is-in li:nth-child(2) .bar { transition-delay: .5s; } .sx-fall.is-in li:nth-child(3) .bar { transition-delay: 1s; }
.sx-fall.is-in li:nth-child(4) .bar { transition-delay: 1.5s; } .sx-fall.is-in li:nth-child(5) .bar { transition-delay: 2.1s; }
.sx-fall-note { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; background: #fff7ec; border: 1px solid #f3d3a6; font-size: 14.5px; line-height: 1.6; color: #5a3a12; }
.sx-fall-note b { color: #7a4a10; }

/* a claim as one bar, with the provisions that change it cut out */
.sx-claim { margin-top: 18px; }
.sx-claimbar { display: flex; height: 54px; border-radius: 10px; overflow: hidden; background: linear-gradient(90deg, #1a4a5c, #0d7aa8); }
.sx-claimbar span { flex: var(--g) 1 0; }
.sx-claimbar .keep { background: transparent; }
.sx-claimbar .cut { position: relative; background: repeating-linear-gradient(135deg, #f59e0b 0 6px, #f8b84a 6px 12px); border-left: 2px solid #fff; transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sx-claim.sx-armed .cut { transform: scaleY(0); }
.sx-claim.sx-armed.is-in .cut { transform: none; }
.sx-claim.sx-armed > * { opacity: 1; transform: none; }
.sx-claim.is-in .cut:nth-of-type(2) { transition-delay: .5s; } .sx-claim.is-in .cut:nth-of-type(3) { transition-delay: .9s; } .sx-claim.is-in .cut:nth-of-type(4) { transition-delay: 1.3s; }
.sx-traps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sx-traps li { background: #fff; border: 1px solid var(--cv-silver); border-left: 4px solid #f59e0b; border-radius: 10px; padding: 14px 16px; }
.sx-traps b { display: block; font-family: var(--font-display); font-size: 15.5px; color: var(--cv-deep-current); }
.sx-traps span { display: block; font-size: 13.5px; line-height: 1.5; color: #555; margin-top: 3px; }
.sx-traps .amt { font: 700 15px var(--font-mono); color: #b45309; margin-top: 8px; }
.sx-traps li.more { border-left-color: var(--cv-aqua); background: #f6fbfb; }

/* ---------- CAT: the queue, two ways ---------- */
.sx-queue { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-q { position: relative; border-radius: 18px; padding: 22px 22px 18px; overflow: hidden; min-height: 330px; }
.sx-q.old { background: #f1f3f5; border: 1px solid #e1e6e9; }
.sx-q.new { background: linear-gradient(160deg, #00263c, #0b3a52); color: #fff; }
.sx-q h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; color: var(--cv-deep-current); }
.sx-q.new h3 { color: #fff; }
.sx-q > p { margin: 0 0 16px; font-size: 13.5px; color: #6a6a6a; }
.sx-q.new > p { color: rgba(255,255,255,.7); }
.sx-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-files li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: #fff; border: 1px solid #e3e8eb; color: #6f7b83; animation: sx-drop .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 120ms); }
.sx-files li::before { content: ""; flex: none; width: 22px; height: 26px; border-radius: 3px; background: linear-gradient(#dfe5e8, #dfe5e8) 5px 7px / 12px 2px no-repeat, linear-gradient(#dfe5e8, #dfe5e8) 5px 12px / 9px 2px no-repeat, linear-gradient(#dfe5e8, #dfe5e8) 5px 17px / 12px 2px no-repeat, #f5f7f8; border: 1px solid #d7dee2; }
.sx-files li em { margin-left: auto; font-style: normal; font: 600 11px var(--font-ui); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.sx-q.old .sx-files li em { background: #e8ecee; color: #6f7b83; }
.sx-q.old .sx-files li.reading { color: var(--cv-deep-current); border-color: #b9c6cd; }
.sx-q.old .sx-files li.reading em { background: #00263c; color: #fff; }
.sx-q.new .sx-files li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.sx-q.new .sx-files li::before { background: linear-gradient(#7fd6d1, #7fd6d1) 5px 7px / 12px 2px no-repeat, linear-gradient(#7fd6d1, #7fd6d1) 5px 12px / 9px 2px no-repeat, linear-gradient(#7fd6d1, #7fd6d1) 5px 17px / 12px 2px no-repeat, rgba(255,255,255,.1); border-color: rgba(127,214,209,.45); }
.sx-q.new .ready em { background: rgba(43,188,180,.2); color: #9fe3dc; border: 1px solid rgba(43,188,180,.45); }
.sx-q.new .judge em { background: rgba(245,158,11,.16); color: #fcd28a; border: 1px solid rgba(245,158,11,.45); }
.sx-q.new .ia em { background: rgba(51,168,255,.16); color: #a9d6ff; border: 1px solid rgba(51,168,255,.45); }
.sx-q.old::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(241,243,245,0), #f1f3f5); pointer-events: none; }
.sx-queue.sx-armed .sx-files li { animation: none; opacity: 0; }
.sx-queue.sx-armed.is-in .sx-files li { animation: sx-drop .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 140ms); }
.sx-queue.sx-armed > * { opacity: 1; transform: none; }
@keyframes sx-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.sx-q.old .reading { position: relative; overflow: hidden; }
.sx-q.old .reading .sweep { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, rgba(51,168,255,0), rgba(51,168,255,.18), rgba(51,168,255,0)); animation: sx-sweep 2.4s ease-in-out infinite; }
@keyframes sx-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* the clock barely moves: normal deadline and the catastrophe extension */
.sx-clock { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sx-clock li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 18px; align-items: center; }
.sx-clock .who b { display: block; font-family: var(--font-display); font-size: 15.5px; color: var(--cv-deep-current); }
.sx-clock .who span { display: block; font-size: 12.5px; color: #6a6a6a; line-height: 1.4; }
.sx-clock .trk { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(90deg, #f3f6f7 0 calc(100% / 9 - 1px), #e7ecee calc(100% / 9 - 1px) calc(100% / 9)); }
.sx-clock .base, .sx-clock .ext { display: flex; align-items: center; padding: 0 10px; font: 700 12px var(--font-ui); white-space: nowrap; transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.sx-clock .base { width: var(--w); background: linear-gradient(90deg, #1a4a5c, #0d7aa8); color: #fff; }
.sx-clock .ext { width: var(--w); background: repeating-linear-gradient(135deg, #2bbcb4 0 6px, #53cbc4 6px 12px); color: #00263c; }
.sx-clock.sx-armed .base, .sx-clock.sx-armed .ext { transform: scaleX(0); }
.sx-clock.sx-armed.is-in .base, .sx-clock.sx-armed.is-in .ext { transform: none; }
.sx-clock.sx-armed.is-in .ext { transition-delay: .9s; }
.sx-clock li.scale { margin-top: -8px; }
.sx-scale { display: flex; justify-content: space-between; font: 500 11px var(--font-mono); color: #8a959b; }

/* ---------- numbered steps (before the season) ---------- */
.sx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
.sx-steps li { counter-increment: st; position: relative; background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 22px 22px 22px; }
.sx-steps li::before { content: counter(st, decimal-leading-zero); display: block; font: 800 34px/1 var(--font-display); background: var(--cv-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
.sx-steps h3 { font-family: var(--font-display); font-size: 17px; color: var(--cv-deep-current); margin: 0 0 8px; }
.sx-steps p { font-size: 14.5px; line-height: 1.6; color: #444; margin: 0; }

/* ---------- capability: an exchange with the claim, played out ---------- */
.sx-chat { background: #fff; border: 1px solid var(--cv-silver); border-radius: 18px; overflow: hidden; box-shadow: 0 34px 70px -44px rgba(0,38,60,.55); }
.sx-chat-h { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid hsl(210 10% 92%); font: 700 13px var(--font-ui); color: var(--cv-deep-current); }
.sx-chat-h svg { width: 16px; height: 16px; fill: none; stroke: var(--cv-aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-chat-h small { margin-left: auto; font: 500 11px var(--font-mono); color: #7a858c; }
.sx-chat-b { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.sx-q-b { align-self: flex-end; max-width: 86%; background: rgba(51,168,255,.09); border: 1px solid rgba(51,168,255,.25); border-radius: 12px 12px 3px 12px; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; color: #00263c; }
.sx-a-b { max-width: 96%; border: 1px solid hsl(210 10% 90%); border-radius: 12px 12px 12px 3px; padding: 15px 17px; }
.sx-a-b > p { font-size: 14.5px; line-height: 1.65; color: #333; margin: 0 0 12px; }
.sx-a-b ol { margin: 0 0 12px; padding: 0 0 0 20px; font-size: 14px; line-height: 1.6; color: #333; }
.sx-a-b ol li + li { margin-top: 6px; }
.sx-cite { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sx-cite span { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-ui); color: var(--cv-deep-teal); background: #f1f8f8; border: 1px solid rgba(43,188,180,.35); border-radius: 999px; padding: 4px 10px; }
.sx-cite span::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4a5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M15 2v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-impact { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid hsl(210 10% 93%); padding-top: 11px; font-size: 12.5px; color: #595959; }
.sx-impact b { font: 700 13px var(--font-mono); color: #b45309; text-align: right; }
.sx-dots { display: inline-flex; gap: 5px; padding: 12px 16px; border: 1px solid hsl(210 10% 90%); border-radius: 12px 12px 12px 3px; align-self: flex-start; }
.sx-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-aqua); animation: sx-dot 1s ease-in-out infinite; }
.sx-dots i:nth-child(2) { animation-delay: .15s; } .sx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.sx-chat-b > .sx-dots { display: none; }
.sx-chat.sx-armed .sx-chat-b > .sx-dots { display: inline-flex; }
.sx-chat.sx-armed > * { opacity: 1; transform: none; }
.sx-chat.sx-armed .sx-q-b, .sx-chat.sx-armed .sx-a-b { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.sx-chat.sx-armed.is-in .sx-q-b { opacity: 1; transform: none; transition-delay: .2s; }
.sx-chat.sx-armed.is-in .sx-chat-b > .sx-dots { animation: sx-gone .3s ease 2s forwards; }
.sx-chat.sx-armed.is-in .sx-a-b { opacity: 1; transform: none; transition-delay: 2.1s; }
.sx-chat.sx-armed .sx-a-b > * { opacity: 0; transition: opacity .5s ease; }
.sx-chat.sx-armed.is-in .sx-a-b > * { opacity: 1; }
.sx-chat.sx-armed.is-in .sx-a-b > :nth-child(1) { transition-delay: 2.3s; } .sx-chat.sx-armed.is-in .sx-a-b > :nth-child(2) { transition-delay: 2.7s; }
.sx-chat.sx-armed.is-in .sx-a-b > :nth-child(3) { transition-delay: 3.1s; } .sx-chat.sx-armed.is-in .sx-a-b > :nth-child(4) { transition-delay: 3.5s; }
@keyframes sx-gone { to { opacity: 0; height: 0; padding: 0; margin: -14px 0 0; border-width: 0; } }
.sx-lessons { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.sx-lessons li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--cv-graphite); }
.sx-lessons li::before { content: attr(data-n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cv-deep-current); color: #7fd6d1; font: 700 14px var(--font-mono); }
.sx-lessons b { color: var(--cv-deep-current); }

/* ---------- reading order: numbered sections, an "At a glance" label, plain diagrams ---------- */
.sx-n { font: 700 11px var(--font-mono); color: var(--cv-aqua); letter-spacing: .04em; margin-right: 2px; }
.cv-dark .sx-n { color: #7fd6d1; }
.sx-glance-h { margin: 0 0 14px; }
/* diagrams are drawings, not product screens: they sit still and say so */
.sx-files li, .sx-pair .sx-tag::before { animation: none; }
.sx-diagram-cap { font-size: 13px; line-height: 1.55; color: #6a6a6a; margin: 12px 0 0; }
.sx-diagram-cap b { color: #4a4a4a; }

/* ---------- prompt-payment rules: what each one requires, counted from when, and what it means ---------- */
.sx-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-rule { background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 20px 22px 18px; display: flex; flex-direction: column; }
.sx-rule h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--cv-deep-current); margin: 0; }
.sx-rule .scope { font-size: 13px; line-height: 1.45; color: #6a6a6a; margin: 3px 0 14px; }
.sx-rule dl { margin: 0; display: grid; gap: 12px; }
.sx-rule .d { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.sx-rule dt { font: 800 26px/1 var(--font-display); color: var(--cv-deep-current); }
.sx-rule dt small { display: block; margin-top: 5px; font: 700 10.5px/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #6a6a6a; }
.sx-rule dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: #333; padding-top: 2px; }
.sx-rule dd em { font-style: normal; color: #6a6a6a; }
.sx-rule .cat dt { color: #12867f; }
.sx-rule .means { margin: 16px 0 0; padding: 12px 14px; background: var(--cv-mint); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--cv-deep-current); }
.sx-rule .means b { display: block; font: 700 10.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--cv-deep-teal); margin-bottom: 3px; }
.sx-rule .src { margin: auto 0 0; padding-top: 12px; font-size: 12.5px; color: #707070; }
.sx-rule .src a { color: var(--cv-deep-teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,74,92,.3); }

/* ---------- what a declared catastrophe changes: usual deadline, then the extended one ---------- */
.sx-shift { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-shift li { background: #fff; border: 1px solid var(--cv-silver); border-radius: 14px; padding: 16px 18px; }
.sx-shift h3 { font-family: var(--font-display); font-size: 16.5px; color: var(--cv-deep-current); margin: 0; }
.sx-shift .what { display: block; font-size: 13.5px; color: #5b5b5b; margin: 2px 0 12px; }
.sx-shift .nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; max-width: 420px; }
.sx-shift .n { min-width: 0; padding: 8px 12px; border-radius: 10px; background: #f3f6f7; }
.sx-shift .n b { display: block; font: 800 22px/1.1 var(--font-display); color: var(--cv-deep-current); }
.sx-shift .n small { display: block; font: 700 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #6a6a6a; margin-top: 2px; }
.sx-shift .n.cat { background: var(--cv-mint); } .sx-shift .n.cat b { color: #12867f; }
.sx-shift .to { align-self: center; color: #8a959b; font-size: 20px; }
.sx-shift-sum { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--cv-aqua); background: #fff; border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; color: var(--cv-deep-current); }
@media (max-width: 760px) { .sx-rules { grid-template-columns: minmax(0, 1fr); } .sx-rule .d { grid-template-columns: 84px minmax(0, 1fr); } .sx-rule dt { font-size: 23px; } }


/* ---------- editorial pass 2 ---------- */
.sx-diagram-top { margin: 0 0 12px; }
.sx-chat.sx-plain { box-shadow: none; background: #fbfcfc; }
/* the queue drawing uses plain words, not product-style status pills */
.sx-files li em { background: none !important; border: 0 !important; padding: 0 !important; font: 600 12px var(--font-ui) !important; }
.sx-q.old .sx-files li em { color: #8a959b !important; }
.sx-q.old .sx-files li.reading em { color: var(--cv-deep-current) !important; }
.sx-q.new .ready em { color: #9fe3dc !important; } .sx-q.new .judge em { color: #fcd28a !important; } .sx-q.new .ia em { color: #a9d6ff !important; }
.sx-q { min-height: 0; }
.sx-rules.three { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sx-rule .means { margin: 0 0 14px; }
.sx-more { color: var(--cv-deep-teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,74,92,.3); }
.sx-more:hover { color: var(--cv-deep-current); border-bottom-color: var(--cv-clear-sky); }
.sx-stage .cv-glow { inset: -8% -6% 22% -6%; }
@media (max-width: 700px) {
  .sx-win.back, .sx-win.front { position: relative; width: 100%; right: auto; bottom: auto; }
  .sx-win.front { margin-top: 14px; }
  .sx-pair { padding: 0; }
}
@media (max-width: 600px) {
  .sx-stage .cv-glow, .sx-pair .cv-glow { display: none; }
  .sx-laptop .cv-shot-loop, .sx-laptop .cv-motion-btn { display: none !important; }
  .sx-bar > span { font-size: 0 !important; }
  .sx-lane .sx-bar .gap { font-size: 11px !important; }
  .sx-related a { white-space: normal; }
  .sx-files li:nth-child(n+5) { display: none; }
}

/* further reading: an odd last card takes the full row */
.cv-more > .cv-more-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  /* five stages: three across, then two wider ones */
  .sx-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sx-stages li { grid-column: span 2; }
  .sx-stages li:nth-child(n+4) { grid-column: span 3; }
  .sx-stages li:nth-child(3)::after { display: none; }
  .sx-win.front .cv-frame-url .sx-path { display: none; }
}
@media (max-width: 900px) {
  .sx-hero .cv-two { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sx-h1 { font-size: 36px !important; }
  .sx-hero { padding: 48px 0 72px; }
  .sx-float.tr { right: 10px; }
  .sx-float.bl { left: 10px; }
  .sx-glance, .sx-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-anatomy, .sx-two, .sx-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sx-flip > figure { order: 2; }
  /* tablet: two columns; an odd last card takes the full row */
  .sx-docs, .sx-fit, .sx-cards, .sx-cards.two, .sx-cards.five, .sx-steps, .sx-traps, .sx-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-cards.five > *, .sx-cards.five > :nth-child(n+4), .sx-stages li, .sx-stages li:nth-child(n+4) { grid-column: auto; }
  .sx-docs > :last-child:nth-child(odd), .sx-fit > :last-child:nth-child(odd), .sx-cards > :last-child:nth-child(odd), .sx-cards.five > :last-child:nth-child(odd),
  .sx-steps > :last-child:nth-child(odd), .sx-traps > :last-child:nth-child(odd), .sx-stages > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sx-stages li::after { display: none; }
  .sx-chain { grid-template-columns: minmax(0, 1fr); }
  .sx-chain li + li { border-left: 1px solid var(--cv-silver); border-top: 0; }
  .sx-chain li:first-child { border-radius: 14px 14px 0 0; }
  .sx-chain li:last-child { border-radius: 0 0 14px 14px; }
  .sx-chain li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -11px; transform: translateX(-50%) rotate(135deg); }
  /* comparison rows stack, and each cell says which side it is */
  .sx-vs-head { display: none; }
  .sx-vs li { grid-template-columns: minmax(0, 1fr); }
  .sx-vs .lbl { position: static; width: auto; height: auto; margin: 0 0 3px; overflow: visible; clip: auto; white-space: normal; display: block; font: 700 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #8a959b; }
  .sx-vs .new .lbl { color: var(--cv-deep-teal); }
  .sx-vs .old::before, .sx-vs .new::before { top: 33px; }
  .sx-fall li { grid-template-columns: minmax(0, 1fr) 110px; gap: 6px 12px; }
  .sx-fall .lab { grid-column: 1 / -1; }
  .sx-clock li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sx-clock li.scale > :first-child { display: none; }
  .sx-band::before, .sx-band.right::before, .sx-band.strong::before { background: linear-gradient(0deg, rgba(0,38,60,.94) 0%, rgba(0,38,60,.7) 55%, rgba(0,38,60,.25) 100%); }
  .sx-band .cv-wrap, .sx-band.right .cv-wrap { justify-content: flex-end; align-items: flex-start; text-align: left; padding-top: 120px; padding-bottom: 40px; }
  .sx-table, .sx-table caption { display: block; }
  .sx-table { border: 0; background: none; }
  .sx-table tbody { display: block; border: 1px solid var(--cv-silver); border-radius: 14px; background: #fff; }
  .sx-table tbody tr:last-child > * { border-radius: 0 !important; }
  .sx-table thead { display: none; }
  .sx-table tr, .sx-table th, .sx-table td { display: block; width: auto !important; }
  .sx-table tbody tr { border-bottom: 1px solid #edf0f2; padding: 6px 0; }
  .sx-table tbody tr:last-child { border-bottom: 0; }
  .sx-table tbody th { border: 0; padding-bottom: 4px; }
  .sx-table td { border: 0; padding-top: 4px; padding-bottom: 4px; }
  .sx-table td[data-label]::before { content: attr(data-label); display: block; font: 700 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #8a959b; }
}
@media (min-width: 901px) {
  /* glance titles that wrap shouldn't push their descriptions out of line */
  .sx-glance b { min-height: 2.6em; line-height: 1.3; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* small laptops in a two-column hero: the cards keep just their title */
  .sx-float { min-width: 0; max-width: 230px; padding: 8px 12px 8px 8px; }
  .sx-float > span:last-child > span { display: none; }
  .sx-float .ic { width: 28px; height: 28px; }
}
@media (max-width: 700px) {
  .sx-float { position: relative; left: auto !important; top: auto !important; right: auto !important; display: inline-flex; margin: 12px 8px 0 0; max-width: none; animation: none; }
  .sx-stage .cv-cap { margin-top: 18px; }
  .sx-laptop .cv-frame { --ry: 0deg; --rx: 0deg; }
  .sx-pair { padding: 0 0 40px; }
}
@media (max-width: 640px) {
  .sx-docs, .sx-fit, .sx-cards, .sx-cards.two, .sx-cards.five, .sx-steps, .sx-traps, .sx-stages, .sx-queue { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sx-h1 { font-size: 30px !important; }
  .sx-first { font-size: 17.5px; }
  .sx-out { grid-template-columns: minmax(0, 1fr); }
  /* glance tiles go compact: icon beside the text */
  .sx-glance { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sx-glance li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .sx-glance svg { grid-row: span 2; margin: 0; }
  .sx-glance span { font-size: 14px; }
  /* the hero cards repeat the tiles below them on a phone */
  .sx-hero .sx-float { display: none; }
  .sx-doc { padding: 20px 18px 16px; transform: none; }
  .sx-lanes, .sx-fall { padding: 20px 16px 16px; }
  .sx-bar { height: 50px; }
  .sx-bar > span { font-size: 9.5px; line-height: 1.1; white-space: normal; text-align: center; padding: 0 2px; }
  .sx-lane .sx-bar .gap { font-size: 11px; }
  .sx-stage .cv-glow, .sx-pair .cv-glow { inset: -6% -2% -6%; }
  .sx-pair .sx-tag { font-size: 11px; padding: 6px 10px; }
  .cv-frame-url .sx-path { display: none; }
  /* the pause control becomes a small round icon so it doesn't cover the screen */
  .sx-laptop .cv-motion-btn { width: 30px; height: 30px; padding: 0; justify-content: center; right: 8px; bottom: 8px; }
  .sx-laptop .cv-motion-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sx-chat-h { flex-wrap: wrap; }
  .sx-chat-h small { margin-left: 0; flex-basis: 100%; }
  .sx-related a { padding: 8px 0; }
}
@media (max-width: 520px) {
  .cv-more-card { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-more-card img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-float, .sx-motes i, .sx-laptop .cv-shot::before, .sx-dots i, .sx-files li, .sx-q.old .reading .sweep, .sx-pair .sx-tag::before { animation: none !important; }
  .sx-motes { display: none; }
  .sx-band img { transform: none; }
}

/* ---------- cycle time: one example claim's timeline. The days run through its five stages, then the waits crunch out ---------- */
.sx-cy { background: #fff; border: 1px solid var(--cv-silver); border-radius: 18px; padding: 26px 28px 24px; box-shadow: 0 30px 60px -48px rgba(0,38,60,.5); }
.sx-cy-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 18px; }
.sx-cy-count { margin: 0; display: flex; align-items: baseline; gap: 10px; color: var(--cv-deep-current); }
.sx-cy-count b { font: 800 clamp(40px, 5vw, 58px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sx-cy-count .pre, .sx-cy-count .post { font: 600 14.5px var(--font-ui); color: #5b6770; }
.sx-cy-count .pre { display: none; font-size: 22px; color: var(--cv-deep-current); }
.sx-cy.is-running .sx-cy-count .pre { display: inline; }
.sx-cy.is-running .sx-cy-count .post { visibility: hidden; }
.sx-cy-modes { display: none; padding: 4px; border-radius: 999px; background: #eef3f5; }
.cv-js .sx-cy-modes { display: inline-flex; }
.sx-cy-modes button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 600 13.5px var(--font-ui); color: #4a5a63; cursor: pointer; transition: background .3s, color .3s; }
.sx-cy-modes button[aria-pressed="true"] { background: var(--cv-deep-current); color: #fff; box-shadow: 0 6px 14px -8px rgba(0,38,60,.6); }
.sx-cy-modes button[data-cy-mode="with"][aria-pressed="true"] { background: linear-gradient(120deg, #12867f, #2bbcb4); }
.sx-cy-modes button:focus-visible { outline: 2px solid var(--cv-clear-sky); outline-offset: 2px; }
.sx-cy-track { position: relative; height: 56px; }
.sx-cy-bar { position: relative; z-index: 1; display: flex; gap: 3px; width: 100%; height: 100%; transition: width 1.2s cubic-bezier(.65,0,.35,1); }
.sx-cy-bar .seg { flex: 1 1 0; min-width: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; font: 600 12px var(--font-ui); white-space: nowrap;
  transition: flex-grow 1.2s cubic-bezier(.65,0,.35,1), background .6s ease, color .6s ease, opacity .3s ease, box-shadow .3s ease; }
.sx-cy-bar .seg em { display: block; font-style: normal; padding: 0 8px; overflow: hidden; text-overflow: clip; transition: opacity .3s ease; }
.sx-cy-bar .seg.tight em { opacity: 0; }
.sx-cy-bar .wait { color: #5f6c74; background: repeating-linear-gradient(135deg, #eef1f3 0 8px, #e3e8eb 8px 16px); }
.sx-cy-bar .work { color: #fff; background: linear-gradient(120deg, #1a4a5c, #0d7aa8); }
.sx-cy[data-mode="with"] .seg:not(.keep) { color: #00263c; background: linear-gradient(120deg, #bfeeea, #9fe3dc); }
.sx-cy.is-running .seg:not(.on):not(.done) { opacity: .38; }
.sx-cy-bar .seg.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cv-aqua); }
.sx-cy-head { position: absolute; z-index: 2; left: 0; top: -9px; bottom: -9px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--cv-deep-current); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.sx-cy-head::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cv-deep-current); box-shadow: 0 0 0 3px #fff; }
.sx-cy.is-running .sx-cy-head { opacity: 1; }
.sx-cy-ghost { position: absolute; inset: 0; border: 2px dashed rgba(43,188,180,.55); border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; font: 700 13px var(--font-ui); color: var(--cv-deep-teal); opacity: 0; transition: opacity .2s ease; }
.sx-cy[data-mode="with"] .sx-cy-ghost { opacity: 1; transition: opacity .5s ease .9s; }
.sx-cy-stages { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sx-cy-stages li { border: 1px solid #e3e9ec; border-radius: 12px; padding: 14px 14px 15px; background: #fbfcfc; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.sx-cy-stages li.on { border-color: var(--cv-aqua); background: #fff; box-shadow: 0 14px 28px -20px rgba(0,38,60,.45); }
.sx-cy-stages h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-family: var(--font-display); font-size: 14.5px; line-height: 1.3; color: var(--cv-deep-current); }
.sx-cy-stages .k { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e3e9ec; color: var(--cv-deep-current); font: 700 11.5px var(--font-ui); transition: background .3s ease, color .3s ease; }
.sx-cy-stages li.on .k, .sx-cy-stages li.done .k { background: var(--cv-deep-current); color: #fff; }
.sx-cy[data-mode="with"] .sx-cy-stages li.on .k, .sx-cy[data-mode="with"] .sx-cy-stages li.done .k { background: #12867f; }
.sx-cy-stages p { margin: 0; font-size: 13px; line-height: 1.5; color: #4f5b62; }
.sx-cy-stages p + p { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dde3e6; }
.sx-cy-stages p b { display: block; margin-bottom: 3px; font: 700 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #8a959b; }
.sx-cy-stages .cv b { color: #12867f; }
/* with the script, a card shows one version at a time; both share one cell so the card never changes height */
.sx-cy[data-mode] .tx { display: grid; }
.sx-cy[data-mode] .tx > p { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; transition: opacity .4s ease, visibility .4s; }
.sx-cy[data-mode="today"] .tx .cv, .sx-cy[data-mode="with"] .tx .now { opacity: 0; visibility: hidden; }

/* ---------- state deadline cards share row lines, so the numbers sit level across the three ---------- */
@supports (grid-template-rows: subgrid) {
  .sx-rules.three .sx-rule { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .sx-rules.three .sx-rule dl { display: contents; }
  .sx-rules.three .sx-rule .d + .d { margin-top: 14px; }
  .sx-rules.three .sx-rule .src { align-self: end; }
}

/* ---------- one example claim: three steps beside one screen that follows them ---------- */
.sx-walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "head screen" "steps screen" "close screen"; grid-template-rows: auto auto 1fr; column-gap: 56px; }
.sx-walk-head { grid-area: head; }
.sx-walk-screen { grid-area: screen; align-self: center; }
.sx-wsteps { grid-area: steps; list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 8px; }
.sx-walk-close { grid-area: close; margin: 0; }
.sx-wsteps li { position: relative; overflow: hidden; padding: 13px 16px 14px; border: 1px solid transparent; border-radius: 12px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sx-wsteps button { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; font: 700 16.5px/1.3 var(--font-display); color: var(--cv-deep-current); }
.sx-wsteps button:focus-visible { outline: 2px solid var(--cv-clear-sky); outline-offset: 4px; border-radius: 6px; }
.sx-wsteps .k { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e3e9ec; font: 700 12.5px var(--font-ui); transition: background .3s ease, color .3s ease; }
.sx-wsteps p { margin: 6px 0 0 36px; font-size: 15px; line-height: 1.6; color: var(--cv-graphite); transition: color .3s ease; }
.sx-wsteps li.is-on { background: #fff; border-color: #dfe7ea; box-shadow: 0 16px 32px -24px rgba(0,38,60,.45); }
.sx-wsteps li.is-on .k { background: var(--cv-aqua); color: #fff; }
.sx-walk.is-js .sx-wsteps li:not(.is-on) p { color: #7a858c; }
.sx-wsteps .t { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--cv-aqua); }
.sx-walk.is-auto .sx-wsteps li.is-on .t { animation: sx-wfill var(--step, 5600ms) linear forwards; }
@keyframes sx-wfill { to { width: 100%; } }
.sx-wshots { position: relative; display: grid; }
.sx-wshots > .cv-shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.sx-wshots > .cv-shot.is-on { opacity: 1; visibility: visible; }
/* the step label sits under the laptop, never on the screenshot */
.sx-wcap { display: grid; justify-items: center; margin-top: 26px; }
.sx-wcap .sx-tag { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.sx-wcap .sx-tag.is-on { opacity: 1; visibility: visible; }
.sx-wcap .sx-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--font-ui); color: #fff; background: var(--cv-deep-current); padding: 7px 12px; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(0,38,60,.6); }
.sx-wcap .sx-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fd6d1; }

/* ---------- full-height breaks: the hourglass band and the family section fill the screen like the sections around them ---------- */
.sx-band.tall { min-height: clamp(440px, 76vh, 820px); }
.sx-band .cv-hero-video { inset: auto; left: 0; top: -10%; width: 100%; height: 120%; transform: scale(1.04); }
.sx-band .cv-motion-btn { z-index: 3; }
.sx-break { min-height: clamp(460px, 78vh, 820px); display: flex; align-items: center; }
.sx-break > .cv-wrap { width: 100%; }
.sx-break .cv-texture { opacity: .44; }

@media (max-width: 1100px) {
  .sx-cy-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sx-cy-stages li { grid-column: span 2; }
  .sx-cy-stages li:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 900px) {
  .sx-walk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "screen" "steps" "close"; grid-template-rows: none; }
  .sx-walk-screen { margin: 8px 0 18px; }
}
@media (max-width: 700px) {
  .sx-cy { padding: 20px 16px 18px; }
  .sx-cy-top { align-items: flex-start; flex-direction: column; }
  .sx-cy-stages { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sx-cy-stages li, .sx-cy-stages li:nth-child(n+4) { grid-column: auto; padding: 12px 14px; }
  .sx-cy-track { height: 46px; }
  .sx-cy-bar .seg em { display: none; }
  .sx-cy-bar .seg::before { content: attr(data-k); font: 700 12px var(--font-ui); }
  .sx-cy-bar .seg.tight::before { content: none; }
  .sx-cy-ghost { font-size: 12px; padding: 0 10px; }
  .sx-wsteps p { margin-left: 0; }
  .sx-wcap { margin-top: 18px; }
  /* on a phone the band's pause control moves to the top corner, clear of the headline */
  .sx-band .cv-motion-btn { top: 12px; bottom: auto; right: 12px; width: 32px; padding: 0; justify-content: center; }
  .sx-band .cv-motion-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cy-bar, .sx-cy-bar .seg, .sx-cy-ghost, .sx-wshots > .cv-shot { transition: none !important; }
  .sx-walk .sx-wsteps .t { display: none; }
}

/* ---------- one example, two ways ([data-modes]): the figure and the switch above it ---------- */
.sx-mode-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 20px; }
.sx-mode-count { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--cv-deep-current); }
.sx-mode-count b { font: 800 clamp(34px, 4.2vw, 50px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sx-mode-count span { font: 600 14.5px var(--font-ui); color: #5b6770; }
.sx-replay { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 11px; border: 1px solid var(--cv-silver); border-radius: 999px; background: #fff; font: 600 12px var(--font-ui); color: var(--cv-deep-teal); cursor: pointer; vertical-align: 1px; }
.sx-replay::before { content: "\21BB"; font-size: 13px; line-height: 1; }
.sx-replay:hover { border-color: var(--cv-aqua); }
.sx-replay:focus-visible { outline: 2px solid var(--cv-clear-sky); outline-offset: 2px; }
.sx-replay[hidden] { display: none; }

/* ---------- leakage: the Sykes waterfall, read two ways ---------- */
.sx-fall[data-modes] .bar { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), left 1s cubic-bezier(.65,0,.35,1), width 1s cubic-bezier(.65,0,.35,1); }
.sx-fall[data-modes] li:nth-child(2) .bar { transition-delay: .35s; }
.sx-fall[data-modes] li:nth-child(3) .bar { transition-delay: .7s; }
.sx-fall[data-modes] li:nth-child(4) .bar { transition-delay: 1.05s; }
.sx-fall[data-mode="missed"] .bar { left: var(--am, var(--a)); width: var(--wm, var(--w)); }
.sx-fall.is-armed .bar { transform: scaleX(0); }
.sx-fall .gap { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  border: 2px dashed #e08a2a; border-radius: 6px; font: 700 12px var(--font-ui); color: #b45309; transition: opacity .5s ease 1.6s; }
.sx-fall .gap em { font-style: normal; padding: 0 6px; }
.sx-fall[data-mode="missed"] .gap, .sx-fall.is-armed .gap { opacity: 0; transition-delay: 0s; }
.sx-fall .dep .lab, .sx-fall .dep .amt { transition: opacity .4s ease; }
.sx-fall[data-mode="missed"] .dep .lab, .sx-fall[data-mode="missed"] .dep .amt { opacity: .45; }
.sx-fall[data-mode="missed"] .net .bar { background: linear-gradient(90deg, #b45309, #e08a2a); }
.sx-fall[data-mode="missed"] .net .amt { color: #b45309; }
.sx-fall .sx-diagram-cap { margin-top: 16px; }

/* ---------- leakage: the Vasquez provisions come off one at a time ---------- */
.sx-claim .sx-fall-h > span b { font: 700 15px var(--font-mono); color: var(--cv-deep-current); }
.sx-claim.sx-seq .cut { transform: scaleY(0); }
.sx-claim.st-1 .cut.c1, .sx-claim.st-2 .cut.c2, .sx-claim.st-3 .cut.c3 { transform: none; }
.sx-claim.sx-seq .sx-traps li { opacity: .35; transition: opacity .4s ease, box-shadow .4s ease; }
.sx-claim.sx-seq.st-1 .sx-traps .t1, .sx-claim.sx-seq.st-2 .sx-traps .t2, .sx-claim.sx-seq.st-3 .sx-traps .t3, .sx-claim.sx-seq.st-4 .sx-traps .t4 { opacity: 1; }
.sx-claim.sx-seq.st-1:not(.st-2) .sx-traps .t1, .sx-claim.sx-seq.st-2:not(.st-3) .sx-traps .t2, .sx-claim.sx-seq.st-3:not(.st-4) .sx-traps .t3, .sx-claim.sx-seq.st-4 .sx-traps .t4 { box-shadow: 0 14px 28px -18px rgba(0,38,60,.45); }

/* ---------- CAT: one queue, read by hand or read first ---------- */
.sx-qx { background: #fff; border: 1px solid var(--cv-silver); border-radius: 18px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -48px rgba(0,38,60,.5); }
.sx-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-qlist li { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid #e3e9ec; border-left: 4px solid #cfd8dd; border-radius: 10px; background: #fbfcfc;
  transition: opacity .4s ease, border-color .4s ease calc(var(--i) * .14s), background .4s ease calc(var(--i) * .14s); }
.sx-qlist .nm { font: 600 14.5px var(--font-ui); color: var(--cv-deep-current); }
.sx-qlist .st { display: grid; justify-items: end; }
.sx-qlist .st em { grid-area: 1 / 1; font: 600 13px var(--font-ui); font-style: normal; transition: opacity .35s ease calc(var(--i) * .14s), visibility .35s calc(var(--i) * .14s); }
.sx-qlist .h { opacity: 0; visibility: hidden; color: #8a959b; }
.sx-qlist .ready { border-left-color: #2bbcb4; } .sx-qlist .ready .r { color: #12867f; }
.sx-qlist .judge { border-left-color: #f59e0b; } .sx-qlist .judge .r { color: #b45309; }
.sx-qlist .ia { border-left-color: #33a8ff; } .sx-qlist .ia .r { color: #0d6fae; }
.sx-qx[data-mode="hand"] .sx-qlist li { border-left-color: #cfd8dd; background: #fbfcfc; }
.sx-qx[data-mode="hand"] .sx-qlist li:not(:first-child) { opacity: .55; }
.sx-qx[data-mode="hand"] .sx-qlist li:first-child { border-left-color: var(--cv-deep-current); background: #fff; }
.sx-qx[data-mode="hand"] .sx-qlist .h { opacity: 1; visibility: visible; transition-delay: 0s; }
.sx-qx[data-mode="hand"] .sx-qlist .r { opacity: 0; visibility: hidden; transition-delay: 0s; }
.sx-qx[data-mode="hand"] .sx-qlist li:first-child .h { color: var(--cv-deep-current); }
.sx-qlist .pg { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--cv-deep-current); opacity: 0; }
.sx-qx[data-mode="hand"]:not(.is-armed) .pg { opacity: 1; animation: sx-qread 9s linear forwards; }
@keyframes sx-qread { to { width: 38%; } }
.sx-qsum { margin: 16px 0 0; padding: 13px 16px; border-left: 3px solid var(--cv-aqua); background: #f6fbfb; border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; color: var(--cv-deep-current); }
.sx-qx[data-mode="hand"] .sx-qsum { border-left-color: #8a959b; background: #f6f8f9; }
.sx-qx + .sx-diagram-cap { margin-top: 12px; }

/* ---------- capability: the lessons step through the answer ---------- */
.sx-walk-qa .sx-walk-screen { align-self: start; }
.sx-walk.is-js [data-for] { transition: opacity .4s ease; }
.sx-walk.is-js [data-for]:not(.is-on) { opacity: .28; }

/* ---------- extraction: the page is read top to bottom, then the fields meet the policy ---------- */
.sx-seq .sx-doc mark { background: transparent; box-shadow: inset 0 0 0 transparent; }
.sx-seq.st-1 .sx-doc mark[data-n="1"], .sx-seq.st-2 .sx-doc mark[data-n="2"], .sx-seq.st-3 .sx-doc mark[data-n="3"], .sx-seq.st-4 .sx-doc mark[data-n="4"] { background: rgba(43,188,180,.18); box-shadow: inset 0 -2px 0 var(--cv-aqua); }
.sx-seq.st-1 .sx-doc::before { animation: sx-scan 3.4s ease-in-out 1 both; }
.sx-seq .sx-fields li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.sx-seq.st-1 .sx-fields li[data-n="1"], .sx-seq.st-2 .sx-fields li[data-n="2"], .sx-seq.st-3 .sx-fields li[data-n="3"], .sx-seq.st-4 .sx-fields li[data-n="4"] { opacity: 1; transform: none; }
.sx-seq .sx-chain li { opacity: .22; transition: opacity .5s ease; }
.sx-seq.st-5 .sx-chain li:nth-child(1), .sx-seq.st-6 .sx-chain li:nth-child(2), .sx-seq.st-7 .sx-chain li:nth-child(3) { opacity: 1; }

/* ---------- dark breaks with a moving texture ---------- */
.sx-break .cv-hero-video { object-fit: cover; }
.sx-break .cv-hero-video.is-playing { opacity: .32; }
.sx-break .cv-motion-btn { z-index: 3; }
.sx-hero.dark > .cv-hero-video { z-index: 0; }

@media (max-width: 700px) {
  .sx-mode-top { align-items: flex-start; flex-direction: column; }
  .sx-cy-modes button { padding: 8px 12px; font-size: 13px; }
  .sx-qx { padding: 20px 16px 18px; }
  .sx-qlist li { padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .sx-qlist .st { justify-items: start; }
  .sx-fall .gap em { font-size: 11px; }
  .sx-hero.dark .cv-motion-btn, .sx-break .cv-motion-btn { top: 12px; bottom: auto; right: 12px; width: 32px; padding: 0; justify-content: center; }
  .sx-hero.dark .cv-motion-btn span, .sx-break .cv-motion-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-fall .bar, .sx-fall .gap, .sx-qlist li, .sx-qlist .st em, .sx-claim .cut, .sx-claim .sx-traps li { transition: none !important; }
  .sx-qlist .pg { display: none; }
}