/* ---------- Outcome Apps overview ---------- */
.oa-hero { padding-block:56px 48px; }
.oa-hero h1 { max-width:12ch; }
.oa-live { padding-block:16px 104px; }
.oa-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.oa-card { --t:var(--tint-iris); --ti:var(--iris-ink); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:340px; padding:32px 32px 28px; border-radius:var(--r-lg); background:var(--t); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-card); transition:transform .25s var(--ease), box-shadow .25s; }
.oa-card > * { position:relative; }
.oa-card::before { content:""; position:absolute; inset:0; background:radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.6), transparent 62%); opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
.oa-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-float); }
.oa-card:hover::before { opacity:1; }
.oa-card.rose { --t:var(--tint-rose); --ti:var(--rose-ink); } .oa-card.sky { --t:var(--tint-sky); --ti:var(--sky-ink); } .oa-card.aqua { --t:var(--tint-aqua); --ti:var(--aqua-ink); }
.oa-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.oa-name { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--ti); }
.oa-name::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--ti); }
.oa-for { font-size:13.5px; color:var(--ink-muted); }
.oa-card h2 { margin:6px 0 0; max-width:18ch; font-size:clamp(26px, 2.6vw, 34px); line-height:1.12; font-weight:500; letter-spacing:-.024em; text-wrap:balance; }
.oa-metric { font-size:15px; color:var(--ink-muted); }
.oa-move { margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding-top:18px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.oa-move b { font-size:30px; line-height:1; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.oa-move .from { color:var(--ink-muted); } .oa-move .to { color:var(--ti); }
.oa-move > span { color:var(--ink-subtle); }
.oa-move small { flex-basis:100%; font-size:12.5px; color:var(--ink-subtle); }
.oa-go { position:absolute !important; right:28px; bottom:28px; display:flex; align-items:center; gap:12px; font-size:0; }
.oa-card:hover .circle { background:var(--ti); transform:translateX(3px); }
.oa-note { margin:20px 0 0; font-size:13px; color:var(--ink-subtle); }
.oa-how { padding-block:96px; background:var(--mist); }
.oa-how h2, .oa-by h2 { margin:0; font-size:clamp(30px, 3.4vw, 46px); line-height:1.06; font-weight:500; letter-spacing:-.03em; }
.oa-steps { list-style:none; margin:48px 0 0; padding:0; counter-reset:s; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--ink); }
.oa-steps li { counter-increment:s; display:flex; flex-direction:column; gap:10px; padding:24px 28px 0 0; }
.oa-steps li + li { padding-left:28px; border-left:1px solid var(--line); }
.oa-steps b { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600; letter-spacing:-.01em; }
.oa-steps b::before { content:counter(s); flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:13px; }
.oa-steps span { font-size:16px; line-height:25px; color:var(--ink-muted); }
.oa-by { padding-block:112px 120px; }
.oa-key { margin:40px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:14px; color:var(--ink-muted); }
.oa-key .k { width:16px; height:16px; border-radius:5px; }
.oa-key .k.live { background:var(--tint-iris); box-shadow:inset 0 0 0 1.5px var(--iris-ink); }
.oa-key .k.req { margin-left:18px; border:1.5px dashed var(--line-control); }
.oa-rows { margin-top:24px; border-top:1px solid var(--line); }
.oa-row { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.oa-ind { display:inline-flex; align-items:center; gap:8px; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.oa-ind svg { width:15px; height:15px; transition:transform .2s; }
a.oa-ind:hover svg { transform:translateX(3px); }
.oa-chain { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.oa-chain li { position:relative; display:flex; }
.oa-chain:not(.flat) li + li::before { content:""; position:absolute; left:-12px; top:50%; width:12px; border-top:1.5px solid var(--line-control); }
.oa-chip { flex:1; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:12px; text-decoration:none; color:var(--ink); }
.oa-chip b { font-size:15.5px; font-weight:600; line-height:21px; }
.oa-chip span { font-size:13.5px; line-height:19px; color:var(--ink-muted); }
.oa-chip em { margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:12.5px; font-weight:600; }
.oa-chip em svg { width:13px; height:13px; transition:transform .2s; }
.oa-chip.live { --gt:var(--tint-iris); --gi:var(--iris-ink); background:var(--gt); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--gi) 40%, transparent); }
.oa-chip.live.rose { --gt:var(--tint-rose); --gi:var(--rose-ink); } .oa-chip.live.sky { --gt:var(--tint-sky); --gi:var(--sky-ink); } .oa-chip.live.aqua { --gt:var(--tint-aqua); --gi:var(--aqua-ink); }
.oa-chip.live em { color:var(--gi); }
.oa-chip.live:hover em svg { transform:translateX(3px); }
.oa-chip.req { border:1.5px dashed var(--line-control); }
.oa-chip.req em { color:var(--ink-subtle); font-weight:500; }
@media (max-width: 1080px) {
  .oa-grid { grid-template-columns:1fr; }
  .oa-steps { grid-template-columns:1fr; border-top:0; }
  .oa-steps li, .oa-steps li + li { padding:20px 0 24px; border-left:0; border-top:1px solid var(--ink); }
  .oa-row { grid-template-columns:1fr; gap:14px; }
  .oa-chain { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .oa-chain li + li::before { display:none; }
}
@media (max-width: 640px) {
  .oa-card { min-height:0; padding:24px 22px 22px; border-radius:22px; }
  .oa-go { position:static !important; align-self:flex-end; }
  .oa-how { padding-block:72px; } .oa-by { padding-block:80px; } .oa-live { padding-bottom:72px; }
  .oa-chain { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .oa-card, .oa-card::before, .oa-chip em svg { transition:none; } }