/* explore.css (V4 Explore page, Verlin 2026-10-21): one-page explorer. Industry tabs; each industry's banner is a
   scroll-through scenario (headline on the left stays put, See / Know / Intervene light up on the right); then roles
   down the side with See / Know / Intervene for that role in that industry; a closing blade for that industry.
   Brand colours only: navy, Instant blue, orange. Thin 1px full borders; nothing moves under the cursor. */
.inst-x { --x-navy: #0d1520; --x-blue: var(--wp--preset--color--brand-blue, #138dcd); --x-orange: var(--wp--preset--color--brand-orange, #f89c1d);
  --x-line: rgba(13, 21, 32, .13); --x-muted: rgba(29, 29, 31, .72); --x-head: 104px; background: #fff; }
.inst-x .inst-rd-eyebrow { margin: 0 0 .8rem; font: 650 .82rem/1.3 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #c26a00; }

/* intro + industry tabs */
.inst-x-intro { background: #fff; }
/* Verlin 2026-10-22: more air around the title and the industry tabs */
.inst-x-intro .inst-rd-wrap { padding-top: clamp(3.5rem, 6.5vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.inst-x-intro .inst-rd-eyebrow { margin-bottom: 1.1rem; }
.inst-x-intro h1 { margin: 0 0 1rem; font: 600 clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem)/1.14 var(--wp--preset--font-family--jost, sans-serif); letter-spacing: -.01em; color: var(--x-navy); }
.inst-x-sub { margin: 0 0 clamp(2rem, 3.6vw, 3rem); font: 400 clamp(1.05rem, .95rem + .4vw, 1.25rem)/1.55 var(--wp--preset--font-family--instrument, sans-serif); color: var(--x-muted); }
.inst-x-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.inst-x-tabs button { display: flex; align-items: center; gap: .85rem; padding: .55rem 1rem .55rem .55rem; border: 1px solid var(--x-line); border-radius: 14px;
  background: #fff; color: var(--x-navy); font: 600 1.05rem/1.2 var(--wp--preset--font-family--jost, sans-serif); text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
.inst-x-tabs button img { width: 56px; height: 42px; object-fit: cover; border-radius: 9px; flex: none; }
.inst-x-tabs button:hover { border-color: var(--x-blue); }
.inst-x-tabs button[aria-selected="true"] { border-color: var(--x-blue); box-shadow: 0 0 0 1px var(--x-blue); background: #f1f8fd; }
.inst-x-tabs button:focus-visible, .inst-x-roles button:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; }

/* industry banner: a tall scroll-through scene. The photo stays pinned behind it; the headline stays put on the left. */
.inst-x-splash { position: relative; background: #0d1520; color: #fff; }
.inst-x-splash[hidden] { display: none; }
.inst-x-splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--bg-accent-warm, #ff9f0a), transparent 70%); }
/* the photo is clipped to the banner (overflow: clip keeps sticky working) and pinned under the header while it scrolls */
.inst-x-splash-bg { position: absolute; inset: 0; overflow: hidden; overflow: clip; z-index: 0; }
.inst-x-splash-pin { position: sticky; top: var(--x-head); height: calc(100vh - var(--x-head)); }
.inst-x-splash-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inst-x-splash-pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 18, 30, .9) 0%, rgba(10, 18, 30, .7) 45%, rgba(10, 18, 30, .5) 100%); }
.inst-x-splash.is-in .inst-x-splash-bg img { animation: x-fade .6s ease both; }
.inst-x-splash.is-in .inst-x-splash-copy > * { animation: x-rise .5s ease both; }
.inst-x-splash.is-in .inst-x-splash-copy > :nth-child(2) { animation-delay: .06s; }
.inst-x-splash.is-in .inst-x-splash-copy > :nth-child(3) { animation-delay: .12s; }
.inst-x-splash.is-in .inst-x-splash-copy > :nth-child(4) { animation-delay: .18s; }
.inst-x-splash-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
  padding-top: clamp(5.5rem, 14vh, 9.5rem); padding-bottom: clamp(7rem, 20vh, 12.5rem); }
.inst-x-splash-copy { position: sticky; top: calc(var(--x-head) + 2rem); }
@media (max-height: 820px) { .inst-x-splash h2 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3rem); } .inst-x-lead { margin-top: 1.2rem; } .inst-x-lead li { padding: .6rem 0; font-size: 1rem; } }
.inst-x-splash h2 { max-width: 12em; margin: 0 0 1.2rem; font: 600 clamp(2.3rem, 1.4rem + 2.8vw, 3.9rem)/1.16 var(--wp--preset--font-family--jost, sans-serif); letter-spacing: -.01em; color: #fff; }
.inst-x-splash p { margin: 0; max-width: 34em; font: 400 clamp(1.05rem, .95rem + .4vw, 1.25rem)/1.55 var(--wp--preset--font-family--instrument, sans-serif); color: rgba(255, 255, 255, .88); }
.inst-x-splash .inst-x-how { margin-top: 1.6rem; max-width: 30em; font-size: 1.02rem; color: #fff; }
.inst-x-how span { display: inline-block; margin-right: .35rem; color: var(--x-orange); font-weight: 700; }
.inst-x-lead { margin: 1.8rem 0 0; padding: 0; list-style: none; max-width: 34em; }
.inst-x-lead li { padding: .85rem 0; border-top: 1px solid rgba(234, 241, 248, .18); font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.inst-x-lead li:last-child { border-bottom: 1px solid rgba(234, 241, 248, .18); }
.inst-x-lead b { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; font: 600 1.15rem/1.3 var(--wp--preset--font-family--jost, sans-serif); color: #fff; }
.inst-x-lead i { width: 9px; height: 9px; border-radius: 50%; }
.inst-x-lead--see i { background: var(--x-blue); }
.inst-x-lead--know i { background: var(--x-orange); }
.inst-x-lead--intervene i { background: #eaf1f8; }
.inst-x-splash .inst-x-note { margin-top: 1.3rem; font-size: .95rem; font-style: italic; color: rgba(234, 241, 248, .72); }

/* the scenario: See, Know, Intervene down the right, joined by a line that fills as each one lights up */
.inst-x-scn { position: relative; margin: 0; padding: 0 0 0 2.4rem; list-style: none; }
.inst-x-scn::before { content: ""; position: absolute; left: .55rem; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: rgba(234, 241, 248, .16); }
.inst-x-scn::after { content: ""; position: absolute; left: .55rem; top: 1.6rem; width: 2px; height: calc((100% - 3.2rem) * var(--x-fill, 0)); border-radius: 2px;
  background: linear-gradient(180deg, var(--x-blue), var(--x-orange), #eaf1f8); transition: height .25s linear; }
.inst-x-step { position: relative; margin: 0 0 clamp(2.5rem, 11vh, 6.5rem); padding: 1.5rem 1.6rem 1.6rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
  background: rgba(10, 18, 30, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .38; transition: opacity .45s, border-color .45s, box-shadow .45s; }
.inst-x-step:last-child { margin-bottom: 0; }
.inst-x-step::before { content: ""; position: absolute; left: calc(-2.4rem + .55rem - 6px); top: 1.85rem; width: 14px; height: 14px; border-radius: 50%; background: #0d1520;
  border: 2px solid rgba(234, 241, 248, .35); box-sizing: border-box; transition: background-color .45s, border-color .45s, box-shadow .45s; }
.inst-x-step[data-on] { opacity: 1; }
.inst-x-step--see[data-on] { border-color: rgba(19, 141, 205, .7); }
.inst-x-step--know[data-on] { border-color: rgba(248, 156, 29, .7); }
.inst-x-step--intervene[data-on] { border-color: rgba(234, 241, 248, .7); }
.inst-x-step--see[data-on]::before { background: var(--x-blue); border-color: var(--x-blue); box-shadow: 0 0 12px rgba(19, 141, 205, .8); }
.inst-x-step--know[data-on]::before { background: var(--x-orange); border-color: var(--x-orange); box-shadow: 0 0 12px rgba(248, 156, 29, .8); }
.inst-x-step--intervene[data-on]::before { background: #eaf1f8; border-color: #eaf1f8; box-shadow: 0 0 12px rgba(234, 241, 248, .8); }
.inst-x-step-k { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem !important; font: 650 .78rem/1.2 var(--wp--preset--font-family--instrument, sans-serif) !important;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(234, 241, 248, .8) !important; font-size: .9rem !important; }
.inst-x-step-k i { width: 8px; height: 8px; border-radius: 50%; }
.inst-x-step-k time { margin-left: auto; font-size: 1rem; font-weight: 600; letter-spacing: .04em; color: rgba(234, 241, 248, .8); }
.inst-x-alerts, .inst-x-hitl { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.inst-x-alert { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .85rem; border: 1px solid rgba(234, 241, 248, .16); border-radius: 10px;
  background: rgba(255, 255, 255, .04); font-size: 1.05rem; line-height: 1.4; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.inst-x-alert + .inst-x-alert { margin-top: .5rem; }
.inst-x-alert b { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #8fd0f2; }
.inst-x-alert--predict { border-color: rgba(248, 156, 29, .45); }
.inst-x-alert--predict b { color: var(--x-orange); }
.inst-x-step[data-on] .inst-x-alert { opacity: 1; transform: none; }
.inst-x-step[data-on] .inst-x-alert:nth-child(2) { transition-delay: .25s; }
.inst-x-step[data-on] .inst-x-alert:nth-child(3) { transition-delay: .5s; }
.inst-x-sub-k { margin: 1.2rem 0 .5rem !important; font: 650 .8rem/1.2 var(--wp--preset--font-family--instrument, sans-serif) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--x-orange) !important; }
.inst-x-cause ul { margin: 0; padding: 0; list-style: none; }
.inst-x-cause li { position: relative; padding-left: 1rem; font-size: 1.05rem; line-height: 1.45; color: #fff; }
.inst-x-cause li + li { margin-top: .4rem; }
.inst-x-cause li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--x-orange); }
.inst-x-hitl li { position: relative; display: flex; flex-direction: column; padding: .55rem 0 .55rem 2rem; border-top: 1px solid rgba(234, 241, 248, .12); font-size: 1rem; line-height: 1.45; color: rgba(234, 241, 248, .85); }
.inst-x-hitl li b { font-size: 1.05rem; color: #fff; }
.inst-x-hitl li::before { content: "✓"; position: absolute; left: 0; top: .65rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(234, 241, 248, .35);
  border-radius: 50%; font-size: .7rem; color: transparent; transition: background-color .35s, border-color .35s, color .35s; }
.inst-x-step[data-on] .inst-x-hitl li:nth-child(-n+2)::before,
.inst-x-step.is-approved .inst-x-hitl li::before { background: var(--x-blue); border-color: var(--x-blue); color: #fff; }
.inst-x-step[data-on] .inst-x-hitl li:nth-child(2)::before { transition-delay: .4s; }
.inst-x-step.is-approved .inst-x-hitl li:nth-child(3)::before { transition-delay: .3s; }
.inst-x-hitl li.inst-x-hitl-next::before { content: "→"; border: 1px dashed rgba(248, 156, 29, .8); color: var(--x-orange); }
.inst-x-step.is-approved .inst-x-hitl li.inst-x-hitl-next::before { background: rgba(248, 156, 29, .16); border-color: var(--x-orange); color: var(--x-orange); transition-delay: .6s; }
.inst-x-hitl li.inst-x-hitl-next b { color: var(--x-orange); }
/* the result of the scenario */
.inst-x-result { margin-top: 1.1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid rgba(143, 208, 242, .45); border-radius: 12px; background: rgba(19, 141, 205, .14);
  opacity: 0; transform: translateY(6px); transition: opacity .45s .9s, transform .45s .9s; }
.inst-x-step.is-approved .inst-x-result { opacity: 1; transform: none; }
.inst-x-result .inst-x-sub-k { margin-top: 0 !important; color: #8fd0f2 !important; }
.inst-x-result ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.inst-x-result li { display: flex; flex-direction: column; gap: .2rem; font-size: .92rem; line-height: 1.35; color: rgba(234, 241, 248, .85); }
.inst-x-result li b { font: 600 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.1 var(--wp--preset--font-family--jost, sans-serif); color: #fff; }
.inst-x-step--see .inst-x-step-k i { background: var(--x-blue); }
.inst-x-step--know .inst-x-step-k i { background: var(--x-orange); }
.inst-x-step--intervene .inst-x-step-k i { background: #eaf1f8; }
.inst-x-step h3 { margin: 0 0 .6rem; font: 600 clamp(1.45rem, 1.15rem + .8vw, 1.85rem)/1.22 var(--wp--preset--font-family--jost, sans-serif); color: #fff; }
.inst-x-step > p:not(.inst-x-step-k) { font-size: 1.1rem; line-height: 1.55; color: rgba(234, 241, 248, .85); }
.inst-x-rows { margin: 1.1rem 0 0; padding: 0; }
.inst-x-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid rgba(234, 241, 248, .14); }
.inst-x-rows dt { font-size: 1rem; color: rgba(234, 241, 248, .72); }
.inst-x-rows dd { margin: 0; font: 600 1.06rem/1.3 var(--wp--preset--font-family--instrument, sans-serif); color: #fff; text-align: right; }
.inst-x-up, .inst-x-down { margin-left: .3rem; font-size: .72rem; }
.inst-x-up { color: var(--x-orange); }
.inst-x-down { color: #8fd0f2; }

/* the approval inside Intervene: approved a moment after Intervene lights up */
.inst-x-card { margin-top: 1.1rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(4, 12, 22, .55); color: #eaf1f8; }
.inst-x-card p { max-width: none; }
.inst-x-splash .inst-x-card-k { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .8rem; font: 650 .72rem/1.2 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: rgba(234, 241, 248, .7); }
.inst-x-wait { padding: .2rem .55rem; border: 1px solid rgba(248, 156, 29, .6); border-radius: 999px; color: var(--x-orange); letter-spacing: .04em; transition: color .35s, border-color .35s; }
.inst-x-splash .inst-x-card-who { margin-bottom: .3rem; font-size: .95rem; font-weight: 600; color: var(--x-orange); }
.inst-x-splash .inst-x-card-what { margin-bottom: .9rem; font: 600 1.18rem/1.35 var(--wp--preset--font-family--jost, sans-serif); color: #fff; }
.inst-x-splash .inst-x-card-gain { margin-bottom: .9rem; font-size: .92rem; color: #8fd0f2; }
.inst-x-splash .inst-x-card-flow { margin-bottom: 1rem; font-size: 1rem; line-height: 1.5; color: rgba(234, 241, 248, .85); }
.inst-x-splash .inst-x-card-act { position: relative; min-height: 2.4rem; }
.inst-x-approve, .inst-x-done { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; min-height: 2.4rem; transition: opacity .35s, transform .35s; }
.inst-x-approve { padding: 0 1.2rem; border-radius: 999px; background: var(--x-blue); color: #fff; font-weight: 600; font-size: .92rem; }
.inst-x-done { opacity: 0; transform: translateY(6px); font-size: .92rem; font-weight: 600; color: #fff; }
.inst-x-card.is-done .inst-x-approve { opacity: 0; transform: scale(.96); }
.inst-x-card.is-done .inst-x-done { opacity: 1; transform: none; }
.inst-x-card.is-done .inst-x-wait { border-color: rgba(143, 208, 242, .6); color: #8fd0f2; }

/* explore by role */
.inst-x-explorer { background: var(--bg-page, #f5f5f7); }
.inst-x-explorer > .inst-rd-wrap { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.inst-x-explorer-head { max-width: 58rem; margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); }
.inst-x-explorer-head h2 { margin: 0 0 .7rem; font: 600 clamp(2rem, 1.4rem + 1.8vw, 2.9rem)/1.16 var(--wp--preset--font-family--jost, sans-serif); color: var(--x-navy); }
.inst-x-explorer-head > p:last-child { margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--x-muted); }
[data-x-for][hidden] { display: none; }
.inst-x-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: start; }
.inst-x-roles { position: sticky; top: calc(var(--x-head) + 24px); }
.inst-x-roles-k { margin: 0 0 .9rem; font: 650 .78rem/1.3 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); }
.inst-x-roles [role="tablist"] { display: flex; flex-direction: column; gap: .5rem; }
.inst-x-roles button { display: block; width: 100%; padding: .85rem 1.1rem; border: 1px solid var(--x-line); border-radius: 12px; background: #fff; color: var(--x-navy);
  font: 600 1rem/1.3 var(--wp--preset--font-family--instrument, sans-serif); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.inst-x-roles button:hover { border-color: var(--x-blue); }
.inst-x-roles button[aria-selected="true"] { border-color: var(--x-navy); background: var(--x-navy); color: #fff; }
.inst-x-panel { padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--x-line); border-radius: 20px; background: #fff; }
.inst-x-panel[hidden] { display: none; }
.inst-x-panel.is-in > * { animation: x-rise .45s ease both; }
.inst-x-panel.is-in > :nth-child(2) { animation-delay: .04s; }
.inst-x-panel.is-in > :nth-child(3) { animation-delay: .08s; }
.inst-x-panel.is-in > :nth-child(4) { animation-delay: .12s; }
.inst-x-panel.is-in > :nth-child(5) { animation-delay: .16s; }
.inst-x-panel-k { margin: 0 0 .35rem; font: 650 .82rem/1.3 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--x-blue); }
.inst-x-panel h3 { margin: 0 0 .5rem; font: 600 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1.18 var(--wp--preset--font-family--jost, sans-serif); color: var(--x-navy); }
.inst-x-line { margin: 0 0 1.1rem; font-size: 1.2rem; line-height: 1.5; color: var(--x-navy); }
.inst-x-watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 1.8rem; font-size: 1.02rem; line-height: 1.5; color: var(--x-muted); }
.inst-x-watch span { font: 650 .74rem/1.2 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--x-blue); }
.inst-x-ski { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.inst-x-ski li { padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--x-line); border-radius: 14px; background: #fff; }
.inst-x-ski-k { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; font: 650 .76rem/1.2 var(--wp--preset--font-family--instrument, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--x-muted); }
.inst-x-ski-k i { width: 9px; height: 9px; border-radius: 50%; }
.inst-x-see .inst-x-ski-k i { background: var(--x-blue); }
.inst-x-know .inst-x-ski-k i { background: var(--x-orange); }
.inst-x-intervene .inst-x-ski-k i { background: var(--x-navy); }
.inst-x-ski h4 { margin: 0 0 .5rem; font: 600 1.2rem/1.25 var(--wp--preset--font-family--jost, sans-serif); color: var(--x-navy); }
.inst-x-ski ul { margin: 0; padding: 0; list-style: none; }
.inst-x-ski ul li { position: relative; padding: 0 0 0 1rem; border: 0; border-radius: 0; font-size: 1rem; line-height: 1.5; color: #1d1d1f; }
.inst-x-ski ul li + li { margin-top: .45rem; }
.inst-x-ski ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--x-navy); opacity: .55; }

/* recap: Instant blue, between the light explorer and the navy close */
.inst-x-recap { background: linear-gradient(135deg, #0e6a9c 0%, var(--x-blue) 100%); color: #fff; }
.inst-x-recap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.inst-x .inst-x-recap .inst-rd-eyebrow { color: #ffd08a; }
.inst-x-recap h2 { margin: 0 0 1rem; font: 600 clamp(2rem, 1.4rem + 1.9vw, 3rem)/1.16 var(--wp--preset--font-family--jost, sans-serif); color: #fff; }
.inst-x-recap-lede { margin: 0 0 1.6rem; font-size: 1.15rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.inst-x-recap-pts { margin: 0; padding: 0; list-style: none; }
.inst-x-recap-pts li { position: relative; padding: .85rem 0 .85rem 2rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 1.02rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.inst-x-recap-pts li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.inst-x-recap-pts li::before { content: "✓"; position: absolute; left: 0; top: .85rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; color: var(--x-blue); font-size: .72rem; font-weight: 700; }
.inst-x-recap-pts b { color: #fff; }
.inst-x-recap-shot { margin: 0; }
.inst-x-recap-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(4, 20, 40, .55); }
.inst-x-recap-shot img[hidden], .inst-x-recap-pts[hidden] { display: none; }
.inst-x-recap-shot figcaption { margin-top: .9rem; font-size: .85rem; color: rgba(255, 255, 255, .78); }

/* close: navy, so it stands apart from the light explorer above it and the footer below it */
.inst-x .v3s .plat-close { background: radial-gradient(60% 80% at 50% 0%, rgba(19, 141, 205, .22), transparent 70%), #13283f; color: #fff; text-align: center; padding-block: clamp(4.5rem, 10vh, 7rem); }
.inst-x .v3s .plat-close-h { max-width: none; margin: 0 auto; color: #fff; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.14; }
.inst-x .plat-close .inst-x-close-p { max-width: 44ch; margin: 1rem auto 1.8rem; font-size: 1.15rem; line-height: 1.55; color: rgba(234, 241, 248, .82); }
.inst-x .plat-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; }
.inst-x .v3s .plat-close .btn--ghost { color: #fff !important; border-color: rgba(234, 241, 248, .55); }
.inst-x-top { margin: 2.2rem 0 0; }
.inst-x-w2, .inst-x-card.is-done .inst-x-w1 { display: none; }
.inst-x-card.is-done .inst-x-w2 { display: inline; }
.inst-x .v3s .inst-x-top a { color: rgba(234, 241, 248, .9) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(234, 241, 248, .35); padding-bottom: 2px; }
.inst-x .v3s .inst-x-top a:hover { color: #fff !important; border-color: #fff; }

@keyframes x-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) { .inst-x-ski { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .inst-x { --x-head: 100px; }
  .inst-x-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-x-splash-grid { grid-template-columns: minmax(0, 1fr); padding-top: 3rem; padding-bottom: 4rem; }
  .inst-x-splash-copy { position: static; }
  .inst-x-step { margin-bottom: 1.6rem; }
  .inst-x-grid { grid-template-columns: minmax(0, 1fr); }
  .inst-x-recap-grid { grid-template-columns: minmax(0, 1fr); }
  .inst-x-roles { position: static; }
  .inst-x-roles [role="tablist"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .inst-x-result ul { grid-template-columns: minmax(0, 1fr); }
  .inst-x-tabs button { font-size: .95rem; gap: .6rem; }
  .inst-x-tabs button img { width: 44px; height: 34px; }
  .inst-x-roles button { padding: .75rem .8rem; font-size: .92rem; }
  .inst-x-scn { padding-left: 1.8rem; }
  .inst-x-step::before { left: calc(-1.8rem + .55rem - 6px); }
  .inst-x-step { padding: 1.2rem 1.2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .inst-x *, .inst-x *::before, .inst-x *::after { animation: none !important; transition: none !important; }
  .inst-x-step, .inst-x-alert, .inst-x-result { opacity: 1; transform: none; }
  .inst-x-card .inst-x-approve { opacity: 0; } .inst-x-card .inst-x-done { opacity: 1; transform: none; }
}
/* Verlin 2026-10-22: See / Know / Intervene starts a little lower than the headline */
@media (min-width: 901px) { .inst-x-scn { margin-top: clamp(2.5rem, 9vh, 5.5rem); } }