/* Solutions pages: small pieces of the product (fragments), outcome rows, and the seat grid. Builds on console.css. */

/* ===== fragment card ===== */
.fx{background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px;display:grid;gap:9px;align-content:start;font:400 13px/1.45 var(--sans);text-align:left;min-width:0;box-shadow:0 30px 60px -28px #000000A6,0 0 0 1px #FFFFFF26}
.fx .k-ch{font-size:12.5px}
.fx-note{font-size:12px;line-height:17px;color:var(--ink-muted)}
.k-tab.t4>div{grid-template-columns:1.5fr .8fr .8fr .5fr}
.k-tab.t4>div>:nth-child(n+2){text-align:right}
.mini-chain{display:flex;align-items:center;gap:0;padding:4px 0}
.mini-chain i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:600 10px/1 var(--sans);font-style:normal;position:relative;z-index:1}
.mini-chain i.now{background:var(--signal)}
.mini-chain u{flex:1;height:2px;background:var(--ink);opacity:.9;min-width:18px}
.mini-chain u.dim{background:var(--line-strong);opacity:.5}
.spark{display:block;width:100%;height:auto}

/* ===== hero cluster ===== */
.hcols{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding-bottom:clamp(48px,6vw,88px)}
.hcols .dhero-in{padding:0}
.dhero.dsplit{padding-bottom:0}
.fx-cluster{position:relative;display:grid;justify-items:center;align-content:center;min-height:340px;--px:0;--py:0}
.fx-cluster .fx{width:min(410px,100%);transform:translate3d(calc(var(--px) * 16px),calc(var(--py) * 12px),0);transition:transform .5s var(--ease);animation:fxin .9s var(--ease-enter) .15s both}
@keyframes fxin{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@media (max-width:980px){
  .hcols{grid-template-columns:1fr}
  .fx-cluster{min-height:0;padding-top:6px}
  .fx-cluster .fx{width:100%;transform:none;animation:none}
}

/* ===== outcome rows ===== */
.oc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(28px,4vw,56px) 0}
.oc+.oc{border-top:1px solid var(--line)}
.oc.flip .oc-t{order:2}
@media (max-width:900px){.oc{grid-template-columns:minmax(0,1fr)}.oc.flip .oc-t{order:0}}
.oc-t{display:grid;gap:14px;align-content:center}
.oc-n{font:500 13px/1 var(--mono);color:var(--signal)}
.oc-t h3{font:600 clamp(28px,3vw,38px)/1.08 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.oc-t p{font-size:18px;line-height:27px;color:var(--ink-2);max-width:46ch}
.oc-t ul{display:grid;gap:8px;margin-top:2px}
.oc-t li{position:relative;padding-left:24px;font-size:16px;line-height:24px;color:var(--ink-muted)}
.oc-t li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:5px;border-left:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal);transform:rotate(-45deg)}
.oc-v{display:grid;gap:14px;justify-items:center;align-content:center;padding:clamp(28px,4vw,56px);border-radius:26px;background:radial-gradient(120% 100% at 15% 0%,#FFFFFF,#E9EFF9 72%);box-shadow:inset 0 0 0 1px #FFFFFFB0,0 0 0 1px var(--line);min-height:260px}
.oc-v .fx{width:min(400px,100%);box-shadow:0 22px 44px -24px #01182F5C,0 0 0 1px var(--line);transition:transform var(--d-gentle) var(--ease-enter)}
.oc.in .oc-v .fx:hover{transform:translateY(-3px)}
.oc.rv .oc-v .fx{opacity:0;translate:0 16px;transition:opacity var(--d-gentle) var(--ease-enter),translate var(--d-gentle) var(--ease-enter),transform var(--d-gentle) var(--ease-enter)}
.oc.in .oc-v .fx{opacity:1;translate:0 0}

/* ===== seat grid (hub) ===== */
.sgc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:clamp(48px,6vw,88px)}
@media (max-width:1040px){.sgc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sgc-grid{grid-template-columns:1fr}}
.sgc{position:relative;display:grid;gap:16px;align-content:start;padding:20px;border-radius:22px;background:#FFFFFF10;box-shadow:inset 0 0 0 1px #FFFFFF22;overflow:hidden;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform var(--d-base) var(--ease),background var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.sgc::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),#0266FC33,transparent 65%);opacity:0;transition:opacity var(--d-gentle) var(--ease);pointer-events:none}
.sgc:hover{transform:translateY(-4px);background:#FFFFFF18;box-shadow:inset 0 0 0 1px #6FA0FF80,0 30px 60px -30px #000}
.sgc:hover::before{opacity:1}
.sgc-v{display:grid;padding:14px;border-radius:14px;background:#FFFFFF0D;height:172px;overflow:hidden;align-content:center}
.sgc-v .fx{box-shadow:0 14px 30px -18px #000A,0 0 0 1px #FFFFFF26}
.sgc h3{font:600 24px/1.15 var(--sans);letter-spacing:-.025em;color:#fff}
.sgc p{font-size:16px;line-height:24px;color:#B4C0D4}
.sgc em{font-style:normal;font:600 15px/1 var(--sans);color:#fff;display:inline-flex;gap:6px;align-items:center}
.sgc em .arr{transition:transform var(--d-quick) var(--ease)}
.sgc:hover em .arr{transform:translateX(3px)}

/* ===== trust band ===== */
.trustband .sec-head{margin:0}

@media (max-width:760px){
  .oc-t h3{font-size:30px}.oc-t p{font-size:18px}.oc-t li{font-size:17px;line-height:25px}
  .fx{font-size:13.5px}
  .sgc h3{font-size:26px}.sgc p{font-size:17px}
  .k-tab.t4>div{grid-template-columns:1.4fr .8fr .8fr .5fr}
  .k-tab.t4>div>:nth-child(4),.k-tab.t4>div>:nth-child(5){display:block}
  /* seat previews fade out where the frame crops them, instead of slicing through a line */
  .sgc-v{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  /* the outcome switcher's visual hugs its fragment, keeping the list close beneath it */
  .ox-p .oc-v{min-height:0;padding:22px 16px}
  .oc-v{padding:24px 16px;min-height:0}
}
@media (prefers-reduced-motion:reduce){.fx-cluster .fx{animation:none}.oc.rv .oc-v .fx{opacity:1;translate:0 0}}

/* ===== outcome switcher: list on the left, one stage on the right ===== */
.ox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.ox-list{display:grid;gap:6px}
.ox-i{position:relative;display:grid;gap:0;text-align:left;padding:18px 22px 20px;border-radius:18px;overflow:hidden;transition:background var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.ox-i:hover{background:#FFFFFF8C}
.ox-i[aria-selected="true"]{background:var(--paper);box-shadow:var(--shadow-2)}
.ox-i .oc-n{margin-bottom:10px}
.ox-i b{font:600 clamp(19px,1.7vw,22px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink-muted);transition:color var(--d-base) var(--ease)}
.ox-i[aria-selected="true"] b,.ox-i:hover b{color:var(--ink)}
.ox-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ox-d>span{overflow:hidden;font-size:16px;line-height:24px;color:var(--ink-2);opacity:0;transition:opacity .4s var(--ease)}
.ox-i[aria-selected="true"] .ox-d{grid-template-rows:1fr}
.ox-i[aria-selected="true"] .ox-d>span{opacity:1;padding-top:8px;transition-delay:.1s}
.ox-bar{position:absolute;left:22px;right:22px;bottom:10px;height:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .3s var(--ease)}
.ox-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--avus-blue);transform:scaleX(0);transform-origin:left}
.ox-i[aria-selected="true"] .ox-bar{opacity:1}
.ox-i.run .ox-bar::after{animation:oxbar var(--dur,6500ms) linear forwards}
.ox.paused .ox-i.run .ox-bar::after{animation-play-state:paused}
@keyframes oxbar{to{transform:scaleX(1)}}
.ox-stage{position:sticky;top:calc(var(--header-h) + 40px);display:grid}
.ox-p,.oc+.ox-p{grid-area:1/1;display:block;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(12px) scale(.99);transition:opacity .45s var(--ease),transform .6s var(--ease-enter),visibility 0s linear .45s}
.ox-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease-enter),visibility 0s}
.ox-p .oc-v{min-height:clamp(340px,34vw,440px)}
/* fragments build in each time their pane opens */
.ox-p .oc-v .fx{opacity:0;translate:0 16px;transition:opacity var(--d-gentle) var(--ease-enter) .1s,translate var(--d-gentle) var(--ease-enter) .1s}
.ox-p.in .oc-v .fx{opacity:1;translate:0 0}
.ox-p .oc-v .fx .k-row,.ox-p .oc-v .fx .k-note,.ox-p .oc-v .fx .k-lrow,.ox-p .oc-v .fx .k-chk li,.ox-p .oc-v .fx .k-act{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-enter),transform .5s var(--ease-enter)}
.ox-p.in .oc-v .fx .k-row,.ox-p.in .oc-v .fx .k-note,.ox-p.in .oc-v .fx .k-lrow,.ox-p.in .oc-v .fx .k-chk li,.ox-p.in .oc-v .fx .k-act{opacity:1;transform:none}
@media (max-width:900px){
  .ox{grid-template-columns:minmax(0,1fr)}
  .ox-stage{position:relative;top:0;order:-1;grid-template-columns:minmax(0,1fr)}
  .ox-p .oc-v{min-height:300px}
}
@media (prefers-reduced-motion:reduce){.ox-p .oc-v .fx,.ox-p .oc-v .fx .k-row,.ox-p .oc-v .fx .k-note,.ox-p .oc-v .fx .k-lrow,.ox-p .oc-v .fx .k-chk li,.ox-p .oc-v .fx .k-act{opacity:1;transform:none;translate:0 0}}