/* Fonts used by the console scenes (same faces the product ships). */
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* A scene is a piece of the real console. It sets its own type and colour so the page
   around it can look like anything. */
.cs.scene { background: transparent; text-align: left; width: 100%; container-type: inline-size; cursor: default; user-select: none; -webkit-user-select: none; }
.cs.scene * { pointer-events: none; }

/* console window */
.cs .win { background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; }
.cs .win .top { height: 48px; padding: 0 18px; }
.cs .win .crumb .i { width: 14px; height: 14px; color: var(--text-3); }
.cs .win-body { position: relative; }
.cs .tbl-clip { height: 412px; overflow: hidden; }
.cs .tbl { table-layout: fixed; }
.cs .tbl tbody tr { cursor: default; }
.cs .tabs { overflow: hidden; white-space: nowrap; }
.cs .tab { flex: none; }

/* small shared moves */
.cs .fadeable { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.cs .fadeable.off { opacity: 0; transform: translateY(6px); }
.cs .pop { animation: cs-pop-in .32s var(--ease) both; }
@keyframes cs-pop-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.cs .btn.press { transform: scale(.96); }
.cs .btn.busy { opacity: .7; }
.cs .spin { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cs-spin .7s linear infinite; display: inline-block; }

/* 1 passport */
.cs .sc-passport { display: grid; justify-items: center; gap: 18px; padding: 8px 0 0; }
.cs .sc-passport .passport { max-width: 400px; }
.cs .sc-passport .p-name { min-height: 22px; }
.cs .sc-passport .chips { min-height: 22px; }
.cs .sc-under { height: 40px; display: grid; place-items: center; position: relative; width: 100%; }
.cs .sc-under > * { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease); }
.cs .sc-under .gone, .cs .sc-under .off { opacity: 0; transform: translateY(6px); }
.cs .sc-under .toast { animation: none; }

/* 5 evidence */
.cs .sc-evidence { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.cs .ev-card { border: 1px solid var(--line-2); border-radius: var(--r-3); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .3s; }
.cs .ev-card.ok { border-color: var(--allow); }
.cs .ev-card.bad { border-color: var(--deny); }
.cs .ev-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cs .ev-head b { font-weight: 600; }
.cs .ev-head.ok { color: var(--allow); } .cs .ev-head.no { color: var(--deny); } .cs .ev-head.wait { color: var(--text-2); }
.cs .ev-msg { font-size: 12.5px; }
.cs .chain { min-height: 58px; align-content: flex-start; }
.cs .chain i { animation-duration: .2s; }
.cs .callout { align-items: center; }
.cs .callout .i { flex: none; }

@container (max-width: 620px) {
  .cs .c-why, .cs .c-seq { display: none; }
  .cs .tbl th:nth-child(1) { width: 132px !important; }
  .cs .tbl th:nth-child(2) { width: 0 !important; padding: 0; overflow: hidden; }
  .cs .tbl td:nth-child(2) { display: none; }
  .cs .tbl th:nth-child(2) { display: none; }
  .cs .tab:nth-child(n+4) { display: none; }
  .cs .callout { flex-wrap: wrap; }
  .cs .callout .btn { width: 100%; }
  .cs .sc-evidence { padding: 14px; }
  .cs .chain i { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs .fadeable.off, .cs .sc-under .off { opacity: 1; transform: none; }
  .cs .chain i { opacity: 1; transform: none; }
}

/* "by FRAME" endorsement beside the product name */
.by-frame { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 12.5px; font-weight: 450; letter-spacing: 0; opacity: .78; height: 20px; }
.by-frame svg { height: 13px; width: auto; display: block; }
@media (max-width: 420px) { .by-frame { gap: 5px; padding-left: 9px; } .by-frame svg { height: 11px; } }

/* page styles must not leak into console text */
.cs .mono { text-transform: none; color: inherit; line-height: inherit; }

/* lifted layers: flat pages ignore --z, the 3D world reads it as real depth */
.cs.scene { position: relative; transform-style: preserve-3d; }
.cs .lift { transform: translateZ(var(--z, 0px)); }
.cs .lift.fadeable.off { transform: translateZ(var(--z, 0px)) translateY(10px) scale(.98); }
.cs .ptr { position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; transition: translate .7s var(--ease), opacity .25s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cs .ptr.on { opacity: 1; }
.cs .tbl-clip.short { height: 204px; }

/* 3 approval */
.cs .sc-approval { position: relative; padding: 0 0 150px; transform-style: preserve-3d; }
.cs .sc-approval .ticket { position: absolute; right: -24px; bottom: 0; width: min(440px, 92%); box-shadow: var(--shadow-3); }
.cs .tk-sub { font-size: 13px; margin-top: 4px; }
.cs .tk-note { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.cs .tk-note .i { color: var(--allow); }
.cs .ticket-head b { font-weight: 600; font-size: 14px; }

/* 4 policy */
.cs .sc-policy { position: relative; padding: 0 0 215px; transform-style: preserve-3d; }
.cs .pol-list { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.cs .pol-lede { font-size: 13.5px; margin-bottom: 6px; }
.cs .rsent b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; background: var(--bg-3); padding: 2px 6px; border-radius: 5px; }
.cs .rhead .i { color: var(--text-3); }
.cs .dd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 2px; border: 1px solid var(--line-2); border-radius: 99px; vertical-align: middle; transition: transform .12s var(--ease); }
.cs .dd .i { transform: rotate(90deg); width: 13px; height: 13px; }
.cs .dd.press { transform: scale(.96); }
.cs .menu { position: absolute; min-width: 170px; animation: none; z-index: 6; }
.cs .menu .opt { display: flex; height: 32px; align-items: center; padding: 0 6px; border-radius: 5px; }
.cs .menu .opt.on { background: var(--bg-hover); }
.cs .pol-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 4px; }
.cs .input.v { display: flex; align-items: center; height: 34px; font-size: 12.5px; white-space: nowrap; }
.cs .tryit { position: absolute; right: -24px; bottom: 0; width: 300px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-3); }
.cs .tryit .field { gap: 4px; }
.cs .tryit .label { font-size: 12px; color: var(--text-3); }
.cs .tryit .try-result { min-height: 74px; font-size: 12.5px; }
.cs .tryit .verdict { padding: 10px 12px; }
.cs .tryit .verdict b { font-size: 14px; }
.cs .tryit .verdict span { font-size: 12.5px; }

/* evidence, when 3D blocks stand in for the flat cells */
.cs.fx .chain { background: transparent; border-style: dashed; }

@container (max-width: 620px) {
  .cs .sc-approval { padding-bottom: 190px; }
  .cs .sc-approval .ticket, .cs .tryit { right: -8px; }
  .cs .tbl-clip.short th:nth-child(1) { width: 150px !important; }
  .cs .sc-policy { padding-bottom: 345px; }
  .cs .checks { min-height: 132px; }
  .cs.fx .chain { min-height: 92px; }
  .cs .pol-foot .faint, .cs .pol-foot .input { display: none; }
  .cs .rsent { font-size: 13px; }
}

.cs .checks { min-height: 78px; }
.cs .sc-evidence .chain { min-height: 62px; }

/* ---------- brand marks ---------- */
.cs .bl, .bl { display: inline-block; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: -3px; }
.cs .app { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }

/* ---------- story ---------- */
.cs .sc-swarm { position: relative; height: 520px; transform-style: preserve-3d; }
.cs .ask { position: absolute; white-space: nowrap; font: 400 13px var(--mono); color: var(--text-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; box-shadow: var(--shadow-2); }
.cs .ask b { color: var(--text); font-weight: 500; }
.cs .term { background: #0b0c0e; color: #c9cad2; border: 1px solid #23242b; border-radius: 12px; overflow: hidden; font: 400 13px/1.9 var(--mono); }
.cs .term-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #1c1d23; color: #7b7c87; font-size: 12px; }
.cs .term-top i { width: 9px; height: 9px; border-radius: 50%; background: #2c2d35; }
.cs .term-top span { margin-left: 8px; }
.cs .term-body { padding: 14px 16px; min-height: 190px; }
.cs .ln { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.cs .ln .at { color: #6c6d78; flex: none; }
.cs .term .who { color: #8f90a0; width: 118px; flex: none; }
.cs .amt.sel { background: #2b55f0; color: #fff; }
.cs .amt.caret::after { content: ""; display: inline-block; width: 7px; height: 14px; background: #c9cad2; vertical-align: -2px; margin-left: 1px; animation: cs-pulse2 1s steps(2) infinite; }
.cs .term-foot { padding: 9px 16px; border-top: 1px solid #1c1d23; font-size: 12px; color: #6c6d78; }
.cs .term-foot.warn { color: #f0b057; }
.cs .revw { padding: 20px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-3); }
.cs .revw-top, .cs .rep-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cs .q { display: flex; flex-direction: column; gap: 8px; }
.cs .ql { font-size: 15px; font-weight: 550; }
.cs .ans { min-height: 44px; display: flex; gap: 8px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r-2); background: var(--allow-bg); font-size: 13.5px; }
.cs .ans .ok { color: var(--allow); margin-top: 2px; }
.cs .ans.empty { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); }

/* ---------- fleet, receipt check, coverage ---------- */
.cs .sc-fleet, .cs .sc-ticket, .cs .sc-coverage, .cs .sc-export, .cs .sc-integrations { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cs .sc-fleet { padding-bottom: 0; }
.cs .fl-head { display: flex; align-items: flex-end; gap: 12px; }
.cs .fl-head .faint { font-size: 12.5px; }
.cs .fl-n { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.cs .fl-n b { font-size: 22px; font-weight: 600; color: var(--text); margin-right: 6px; font-variant-numeric: tabular-nums; }
.cs .fl-apps { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-2); }
.cs .tbl-clip.fl { height: 244px; margin: 0 -20px; }
.cs .rq { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.cs .rq .code { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.cs .rq .hl { color: var(--allow); }
.cs .rq-res { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; flex-wrap: wrap; }
.cs .rq-why { font-size: 12.5px; }
.cs .sc-ticket { min-height: 380px; }
.cs .cv-log { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 8px 12px; font: 400 12.5px/2.3 var(--mono); }
.cs .cv-log .ln b { font-weight: 500; }
.cs .cv-log .at { color: var(--text-3); }
.cs .cv-log .ln.flag { background: var(--deny-bg); margin: 0 -12px; padding: 0 12px; }
.cs .cv-m { min-width: 104px; display: flex; justify-content: flex-end; }
.cs .cv-sum { font-size: 13.5px; padding: 12px 14px; border-radius: var(--r-2); background: var(--deny-bg); color: var(--text); }
.cs .cv-sum b { color: var(--deny); }

/* ---------- roadmap ---------- */
.cs .bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }
.cs .bar.plain { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; }
.cs .win-body > .bar:last-child { border-bottom: 0; border-top: 1px solid var(--line); }
.cs .meter { height: 6px; border-radius: 6px; background: var(--bg-3); overflow: hidden; min-width: 60px; }
.cs .meter i { display: block; height: 100%; width: 0; background: var(--allow); border-radius: 6px; transition: width .9s var(--ease), background .3s; }
.cs .meter i.over { background: var(--esc); }
.cs .rp-out { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.cs .stepper { display: inline-grid; place-items: center; min-width: 28px; height: 26px; border: 1px solid var(--line-2); border-radius: 6px; font-variant-numeric: tabular-nums; }
.cs .tbl-clip.tm { height: 204px; }
.cs .sc-alerts { position: relative; padding: 0 0 70px; transform-style: preserve-3d; }
.cs .msg { padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-3); max-width: 460px; }
.cs .msg-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cs .msg-top .faint { margin-left: auto; font-size: 12px; }
.cs .msg-body { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.cs .msg.mail { position: absolute; right: 0; bottom: 0; width: min(360px, 86%); font-size: 13px; }
.cs .rep { padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-3); min-height: 380px; }
.cs .rep h2 { font-size: 20px; margin-top: 10px; }
.cs .rep-rows { display: flex; flex-direction: column; margin-top: 12px; }
.cs .rep-row { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.cs .rep-row .ok { color: var(--allow); margin-top: 2px; }
.cs .rep-row b { display: block; font-weight: 550; }
.cs .rep-row .muted { font-size: 12.5px; }
.cs .picks.one { grid-template-columns: 1fr; }
.cs .toggle-row.tall { padding: 12px 0; }
.cs .toggle-row b { font-weight: 550; }
.cs .toggle-row .mono { font-size: 12px; }
.cs .rec { box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 18px; }
.cs .rec .life li { grid-template-columns: 22px 1fr; }
.cs .sc-export { min-height: 250px; }

@container (max-width: 620px) {
  .cs .sc-swarm { height: 440px; }
  .cs .ask { font-size: 11.5px; padding: 5px 8px; }
  .cs .term { font-size: 11px; }
  .cs .term .who { display: none; }
  .cs .fl-head { flex-wrap: wrap; }
  .cs .sc-fleet .code, .cs .rq .code { font-size: 11px; }
  .cs .tbl-clip.fl th:nth-child(3), .cs .tbl-clip.fl td:nth-child(3) { display: none; }
  .cs .cv-log { font-size: 11px; }
  .cs .cv-log .at { display: none; }
  .cs .cv-m { min-width: 0; }
}

/* mid widths: drop the Why column before the action text gets squeezed */
@container (max-width: 780px) { .cs .c-why { display: none; } }