/* Xchainge case study, part 2: feature tiles, the challenge ledger, the on-screen legend,
   results and responsive rules. */

/* ---------- four feature tiles ---------- */
.xc-gates { background: var(--cs-bg); }
.cs-s.xc-gates { padding-top: 80px; }
.xc-feat { --g: rgb(255 255 255 / 7%); --s: rgb(143 220 245 / 32%); --a: #8fdcf5; --m: rgb(255 255 255 / 24%); --k: #5be3b5; }
.xc-feat:nth-child(even) { --g: rgb(255 255 255 / 70%); --s: rgb(15 95 122 / 22%); --a: #0f5f7a; --m: rgb(15 95 122 / 22%); --k: #138a66; }
.xc-art { margin: -6px -8px 6px; }
.xc-art svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xc-art .g { fill: var(--g); stroke: var(--s); stroke-width: 1.2; }
.xc-art .g.o { opacity: .55; }
.xc-art .a { stroke: var(--a); stroke-width: 2.5; }
.xc-art .k { stroke: var(--k); stroke-width: 2.5; }
.xc-art .m { stroke: var(--m); stroke-width: 3; }
.xc-art .w { stroke-width: 12; }
.xc-art .ds { stroke-dasharray: 4 6; }
.xc-art .mf, .xc-art .mf rect { fill: var(--m); }
.xc-art .af, .xc-art .ad { fill: var(--a); }
.xc-art .ad { filter: drop-shadow(0 0 6px var(--a)); }
.xc-art .kf { fill: var(--k); }
.xc-art .t { fill: var(--a); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.xc-art .sh { fill: var(--a); opacity: .18; filter: blur(8px); }
.xc-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 56px 0 0; padding: 0; list-style: none; }
.xc-feat { display: grid; align-content: start; gap: 12px; padding: 28px 26px 30px; border-radius: 22px; background: linear-gradient(160deg, var(--xc-teal), #0b3f52); color: var(--white); }
.xc-feat:nth-child(even) { background: linear-gradient(160deg, #e3f2fa, var(--xc-ice)); color: var(--xc-deep); }
.xc-feat__art { width: 120px; height: 48px; margin-bottom: 10px; overflow: visible; fill: none; stroke: var(--xc-glow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xc-feat__art rect { fill: rgb(143 220 245 / 45%); stroke: none; }
.xc-feat__art circle:last-child { fill: currentcolor; stroke: none; }
.xc-feat:nth-child(even) .xc-feat__art { stroke: var(--xc-teal); }
.xc-feat:nth-child(even) .xc-feat__art rect { fill: rgb(15 95 122 / 35%); }
.xc-feat__arc { stroke-width: 7; stroke-dasharray: 20 6; }
.xc-feat h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.xc-feat p { margin: 0; font-size: 15px; line-height: 1.6; color: rgb(255 255 255 / 75%); }
.xc-feat:nth-child(even) p { color: var(--cs-muted); }

/* ---------- the challenge ledger ---------- */
.xc-ledger { background: var(--xc-ice-2); }
.xc-table { margin-top: 56px; border: 1px solid var(--cs-line); border-radius: 22px; background: var(--white); overflow: hidden; }
.xc-table__head, .xc-table__row { display: grid; grid-template-columns: 88px minmax(0, 1.15fr) minmax(0, 1fr) 128px; gap: 28px; align-items: start; padding: 20px 28px; }
.xc-table__head { padding-block: 14px; background: var(--xc-deep); font-family: var(--xc-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / 70%); }
.xc-table__row { border-top: 1px solid var(--cs-line); font-size: 15px; line-height: 1.6; color: var(--cs-muted); }
.xc-table__row:nth-child(odd) { background: #fbfdfe; }
.xc-table__row b { font-weight: 600; color: var(--cs-ink); }
.xc-ref { font-family: var(--xc-mono); font-size: 13px; font-weight: 600; line-height: 1.85; color: var(--xc-teal); }
.xc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: rgb(15 95 122 / 10%); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--xc-teal); }
.xc-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1fa37a; }

/* ---------- on screen ---------- */
.xc-look { background: linear-gradient(180deg, var(--cs-bg), var(--xc-ice-2)); }
.xc-look__grid { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 56px clamp(48px, 6vw, 96px); align-items: center; }
.xc-glass--iso { border-color: rgb(15 95 122 / 18%); background: rgb(255 255 255 / 70%); box-shadow: 0 40px 70px -40px rgb(11 37 49 / 45%); }
.xc-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.xc-legend li { padding: 14px 0; border-top: 1px solid var(--cs-line); font-size: 14.5px; line-height: 1.55; color: var(--cs-muted); }
.xc-legend b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--cs-ink); }

/* ---------- lending + payments flows (each screen at its own size, never stretched) ---------- */
.xc-flows { background: linear-gradient(180deg, var(--xc-ice-2), var(--white)); }
.xc-flows__label { display: flex; align-items: center; gap: 12px; margin: clamp(48px, 5vw, 72px) 0 24px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--cs-ink); }
.xc-flows__label span { padding: 5px 10px; border-radius: 6px; background: var(--xc-deep); font-family: var(--xc-mono); font-size: 11px; letter-spacing: .18em; color: var(--xc-glow); }
.xc-flows__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 960px; margin: 0 auto; padding: 0; list-style: none; counter-reset: xc; }
.xc-flows__grid li { display: grid; align-content: start; gap: 16px; counter-increment: xc; }
.xc-flows__grid .xc-glass { justify-self: center; border-color: rgb(15 95 122 / 18%); background: rgb(255 255 255 / 70%); box-shadow: 0 40px 70px -44px rgb(11 37 49 / 40%); }
.xc-flows__grid p { max-width: 560px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--cs-muted); }
.xc-flows__grid p::before { content: counter(xc, decimal-leading-zero) "  "; font-family: var(--xc-mono); font-size: 12px; font-weight: 600; color: var(--xc-teal); }
.xc-flows__grid b { font-weight: 600; color: var(--cs-ink); }

/* ---------- results ---------- */

.xc-out { position: relative; overflow: hidden; isolation: isolate; background: #0b2530; color: var(--white); }
.xc-out::before, .xc-out::after { content: none; display: none; }


.xc-out .cs-accent { color: var(--xc-glow); }
.xc-out .cs-lead { color: rgb(255 255 255 / 70%); }
.xc-out__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(48px, 6vw, 112px); align-items: start; }
.xc-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.xc-ticks li { display: grid; gap: 8px; padding: 26px 0; border-top: 1px solid rgb(255 255 255 / 14%); }
.xc-ticks li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.xc-ticks h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.xc-ticks h3::before { content: "▲"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: rgb(91 227 181 / 14%); font-size: 11px; color: var(--xc-up); }
.xc-ticks p { margin: 0; font-size: 15px; line-height: 1.6; color: rgb(255 255 255 / 70%); }
.xc-ticks h3::before { content: none; }
.xc-tick-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: rgb(91 227 181 / 12%); border: 1px solid rgb(91 227 181 / 22%); color: var(--xc-up); }
.xc-ico { width: 20px; height: 20px; overflow: visible; }
.xc-ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.xc-ticks.is-in .xc-ico [pathLength], .xc-ticks li.is-in .xc-ico [pathLength], .xc-ticks li[data-rv] .xc-ico [pathLength] { animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) both; }
.xc-ticks li:nth-child(2) .xc-ico [pathLength] { animation-delay: .15s; }
.xc-ticks li:nth-child(3) .xc-ico [pathLength] { animation-delay: .3s; }
.xc-ticks li:nth-child(4) .xc-ico [pathLength] { animation-delay: .45s; }
.xc-ticks li:nth-child(5) .xc-ico [pathLength] { animation-delay: .6s; }
@keyframes xc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.xc-ico, .xc-ico * { transform-box: view-box; }
.xc-ico--zap { transform-origin: 12px 12px; animation: xc-zap 2.6s ease-in-out 1.6s infinite; }
@keyframes xc-zap { 0%, 62%, 100% { transform: none; filter: none; } 68% { transform: translateY(-2px) scale(1.22) rotate(-8deg); filter: drop-shadow(0 0 6px rgb(91 227 181 / 90%)); } 74% { transform: translateY(1px) scale(.94); filter: none; } 80% { transform: scale(1.1); filter: drop-shadow(0 0 4px rgb(91 227 181 / 70%)); } 88% { transform: none; filter: none; } }
.xc-ico--smile { transform-origin: 12px 12px; animation: xc-bob 3s ease-in-out 1.6s infinite; }
.xc-ico__eye { transform-origin: 12px 9.5px; animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .15s both, xc-blink 3.6s ease-in-out 2s infinite !important; }
@keyframes xc-bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2.5px) rotate(-12deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-2.5px) rotate(12deg); } }
@keyframes xc-blink { 0%, 88%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
.xc-ico__ring { transform-origin: 12px 12px; animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .3s both, xc-ring 2s ease-out 1.8s infinite !important; }
@keyframes xc-ring { 0% { transform: scale(.4); opacity: 1; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }
.xc-ico--shield { transform-origin: 12px 12px; animation: xc-shield 3.2s ease-in-out 2.2s infinite; }
@keyframes xc-shield { 0%, 40%, 100% { transform: none; filter: none; } 50% { transform: scale(1.14); filter: drop-shadow(0 0 5px rgb(91 227 181 / 75%)); } 60% { transform: none; filter: none; } }
.xc-ico--shield .xc-ico__check { animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .45s both, xc-check 3.2s ease-in-out 2.2s infinite; }
@keyframes xc-check { 0%, 15% { stroke-dashoffset: 0; } 30% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
.xc-ico__l1 { animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .6s both, xc-stack 2.4s ease-in-out 2s infinite !important; }
.xc-ico__l2 { animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .6s both, xc-stack 2.4s ease-in-out 2.12s infinite !important; }
.xc-ico__l3 { animation: xc-draw 1.4s cubic-bezier(.6,0,.2,1) .6s both, xc-stack 2.4s ease-in-out 2.24s infinite !important; }
@keyframes xc-stack { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } }
.xc-ticks li.rv-pending:not(.rv-in) .xc-ico, .xc-ticks li.rv-pending:not(.rv-in) .xc-ico * { animation-play-state: paused !important; }
.xc-ticks li:hover .xc-ico { scale: 1.15; }
.xc-ico { transition: scale .3s cubic-bezier(.3,1.6,.5,1); }
.xc-ticks li:hover .xc-tick-ico { background: rgb(91 227 181 / 22%); box-shadow: 0 0 16px rgb(91 227 181 / 30%); }
.xc-tick-ico { transition: background .3s, box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { .xc-ico, .xc-ico * { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .xc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xc-feat:nth-child(3) { background: linear-gradient(160deg, #e3f2fa, var(--xc-ice)); color: var(--xc-deep); }
  .xc-feat:nth-child(4) { background: linear-gradient(160deg, var(--xc-teal), #0b3f52); color: var(--white); }
  .xc-feat:nth-child(3) p { color: var(--cs-muted); }
  .xc-feat:nth-child(4) p { color: rgb(255 255 255 / 75%); }
  .xc-feat:nth-child(3) .xc-feat__art { stroke: var(--xc-teal); }
  .xc-feat:nth-child(4) .xc-feat__art { stroke: var(--xc-glow); }
  .xc-feat:nth-child(3) { --g: rgb(255 255 255 / 70%); --s: rgb(15 95 122 / 22%); --a: #0f5f7a; --m: rgb(15 95 122 / 22%); --k: #138a66; }
  .xc-feat:nth-child(4) { --g: rgb(255 255 255 / 7%); --s: rgb(143 220 245 / 32%); --a: #8fdcf5; --m: rgb(255 255 255 / 24%); --k: #5be3b5; }
}
@media (max-width: 1000px) {
  .xc-hero__top, .xc-terminal, .xc-look__grid, .xc-out__grid { grid-template-columns: 1fr; }
  .xc-board { width: min(100%, 560px); }
  .xc-glass--hero, .xc-glass--iso { justify-self: center; }
  .xc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xc-table__head, .xc-table__row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 110px; gap: 18px; padding-inline: 20px; }
}
@media (max-width: 720px) {
  .xc-board { padding: 14px 14px 12px; }
  .xc-f { font-size: 14px; }
  .xc-glass { padding: 7px; border-radius: 16px; }
  .xc-glass img { border-radius: 10px; }
  .xc-meta > div:last-child { grid-column: 1 / -1; }
  .xc-tile { width: 34px; height: 44px; font-size: 22px; }
  .xc-feats { grid-template-columns: 1fr; }
  .xc-table { border-radius: 18px; }
  .xc-table__head { display: none; }
  .xc-table__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 20px; }
  .xc-table__row > :nth-child(2), .xc-table__row > :nth-child(3) { grid-column: 1 / -1; }
  .xc-table__row > :nth-child(4) { grid-row: 1; grid-column: 2; }
  .xc-table__row > :nth-child(3)::before { content: "What we designed. "; font-weight: 600; color: var(--cs-ink); }
  .xc-legend, .xc-ticks, .xc-flows__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .xc-c.is-flip { animation: none; }
}

/* ---------- lending & payments as a scroll journey: the steps scroll on the left, one sticky glass
   frame on the right swaps to each step's screen and resizes to that screen's own ratio (never cropped). ---------- */
.xc-flows { background: radial-gradient(50% 40% at 90% 0%, rgb(143 220 245 / 20%), transparent 70%), linear-gradient(180deg, var(--xc-ice-2), var(--white)); }
.xc-jr { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); margin-top: clamp(48px, 5vw, 72px); }
.xc-jr__steps { margin: 0; padding: 0 0 30vh; list-style: none; }
.xc-jr__step { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72vh; }
.xc-jr__flow { position: absolute; left: 0; right: 0; bottom: calc(50% + 90px); max-width: 420px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--cs-line); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--cs-ink); }
.xc-jr__text { display: grid; gap: 10px; max-width: 420px; opacity: .32; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease); }
.xc-jr__step.is-on .xc-jr__text { opacity: 1; transform: none; }
.xc-jr__n { font-family: var(--xc-mono); font-size: 12.5px; font-weight: 600; color: var(--xc-teal); }
.xc-jr__text h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.02em; color: var(--cs-ink); }
.xc-jr__text p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--cs-muted); }
.xc-jr__inline { display: none; }

.xc-jr__stage { position: sticky; top: max(96px, calc(50vh - 300px)); align-self: start; display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 0 clamp(20px, 2.4vw, 32px); }
.xc-jr__track { grid-row: 1 / 3; position: relative; border-radius: 3px; background: var(--cs-line); }
.xc-jr__track i { position: absolute; inset: 0 0 auto; height: var(--p, 0%); border-radius: 3px; background: linear-gradient(180deg, var(--xc-glow), var(--xc-teal)); transition: height .2s linear; }
.xc-jr__frame { position: relative; width: 100%; max-width: 784px; height: var(--fh, auto); border-color: rgb(15 95 122 / 18%); background: rgb(255 255 255 / 70%); box-shadow: 0 50px 90px -50px rgb(11 37 49 / 45%); transition: height .6s var(--ease); overflow: hidden; }
.xc-jr__shot { position: absolute; inset: 10px; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .5s ease, transform .7s var(--ease); }
.xc-jr__shot:first-child { position: relative; inset: auto; }
.xc-jr__shot.is-on { opacity: 1; transform: none; }
.xc-jr__shot img { display: block; width: 100%; height: auto; border-radius: 14px; }
.xc-jr__now { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 0; font-size: 14px; color: var(--cs-faint); }
.xc-jr__now span { font-family: var(--xc-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--xc-teal); }
.xc-jr__now b { font-weight: 600; color: var(--cs-ink); }

@media (max-width: 900px) {
  .xc-jr { grid-template-columns: minmax(0, 1fr); }
  .xc-jr__stage { display: none; }
  .xc-jr__steps { padding: 0; }
  .xc-jr__step { min-height: 0; margin-bottom: 56px; }
  .xc-jr__flow { position: static; margin: 0 0 28px; }
  .xc-jr__text { opacity: 1; transform: none; margin-bottom: 20px; }
  .xc-jr__inline { display: block; width: fit-content; max-width: 100%; border-color: rgb(15 95 122 / 18%); background: rgb(255 255 255 / 70%); }
}
@media (prefers-reduced-motion: reduce) { .xc-jr__text, .xc-jr__shot, .xc-jr__frame, .xc-jr__track i { transition: none; } }