/* Animated product tiles and the pinned Products stage. */
.tile{position:relative;overflow:hidden;border:1px solid var(--line);min-height:0}
.tile canvas{display:block;width:100%;height:100%}
.tile-white,.tile-beige{background:var(--wash)}
.tile-dark,.tile-olive{background:#1d1e1b;border-color:#393b35;color:#ecebe4}

/* Terminal tile (Promethean) */
.term{display:flex;flex-direction:column;font:.78rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.term-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2f312c}
.term-switch{display:flex;border:1px solid #393b35}.term-switch button{border:0;background:none;color:#a3a59a;padding:2px 10px;font:inherit;cursor:pointer}
.term-switch button[aria-pressed=true]{background:#c9ae4b;color:#161715}
.term-squares{display:flex;gap:5px}.term-squares i{width:9px;height:9px;border:1px solid #4a4d44;transition:background .25s,border-color .25s}
.term-squares i.lit,.term-squares i:hover{background:#c9ae4b;border-color:#c9ae4b}
.term pre{margin:0;padding:12px 14px;flex:1;overflow:hidden;white-space:pre-wrap;color:#c3c5ba}
.term .g{color:#c9ae4b}.term .d{color:#7d8074}

.term .caret{display:inline-block;width:.55em;height:1.05em;background:#c9ae4b;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Products stage: stacked by default, pinned on roomy screens */
.stage{border-bottom:1px solid var(--line)}
.stage-inner{padding-block:64px;display:grid;gap:28px}
.stage-nav{display:none}
.stage-main>h2{font-size:clamp(2rem,3.5vw,3.25rem);max-width:820px}
.stage-panels{display:grid;gap:64px;margin-top:32px}
.stage-panel{display:grid;gap:24px}
.panel-head{display:flex;align-items:center;gap:14px;margin:10px 0 14px}.panel-head img{width:30px;height:30px;flex:none}
.panel-head h3{font-size:clamp(2rem,3.4vw,3.25rem);font-weight:400;letter-spacing:-.05em;line-height:1.1}
.panel-lead{font-size:1.25rem;line-height:1.45;letter-spacing:-.02em;max-width:520px}
.panel-body{margin-top:14px;color:var(--muted);font-size:.9375rem;max-width:520px}
.panel-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);max-width:520px}
.panel-facts dt{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:1.4;margin-bottom:6px}
.panel-facts dd{margin:0;font-size:1.375rem;letter-spacing:-.035em;line-height:1.2}
.panel-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:22px}
.panel-visual{display:flex;flex-direction:column;gap:16px;min-height:0}
.panel-visual .tile{height:220px;flex:none}
.panel-shot{margin:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.panel-shot img{display:block;width:100%;height:auto;object-fit:contain;object-position:left top}.panel-shot .on-white{background:#fff}
.panel-shot figcaption{font-size:.8125rem;line-height:1.5}

@media (min-width:901px) and (min-height:640px){
  .stage{height:430vh}
  .stage-inner{position:sticky;top:0;height:100vh;padding-block:104px 32px;grid-template-columns:190px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:48px}
  .stage-nav{display:flex;flex-direction:column;gap:2px;margin-top:22px}
  .stage-nav button{display:flex;gap:12px;align-items:baseline;border:0;border-left:2px solid var(--line);background:none;padding:9px 0 9px 14px;font-size:.9rem;color:var(--muted);cursor:pointer;text-align:left;transition:color .3s,border-color .3s}
  .stage-nav button span{font-size:.7rem}.stage-nav button[aria-current=true]{color:var(--ink);border-color:var(--gold)}
  .stage-main{display:flex;flex-direction:column;min-height:0}
  .stage-panels{position:relative;flex:1;min-height:0;margin-top:28px;display:block}
  .stage-panel{position:absolute;inset:0;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);align-items:stretch;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s,transform .5s,visibility .5s}
  .stage-panel.on{opacity:1;visibility:visible;transform:none}
  .panel-text{overflow:hidden}
  .panel-visual .tile{flex:1 1 0;height:auto;min-height:120px}
  .panel-shot{flex:0 1 auto;max-height:62%}
  .panel-shot img{min-height:0;flex:0 1 auto}
}
@media (max-width:560px){.panel-facts{grid-template-columns:1fr 1fr}}
@media print{.tile canvas,.term-bar{display:none}}

/* Hero number, PRAXIS bars, status links */
.brief-number>small{margin-left:12px;font-size:1.125rem;font-weight:400;letter-spacing:0;color:var(--muted)}
@media(max-width:560px){.brief-number{flex-wrap:wrap}.brief-number>small{margin-left:0;flex-basis:100%;font-size:.875rem}}
.status a{border-bottom:1px solid var(--gold)}.status a:hover{color:var(--gold-ink)}
.results-chart{display:grid;gap:22px;margin-top:26px}
.bar-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.bar-row{display:grid;grid-template-columns:96px minmax(0,1fr) 52px;gap:12px;align-items:center;font-size:.8125rem;color:var(--muted);margin-top:6px}
.bar-row b{font-weight:400;color:var(--ink);text-align:right;font-size:.9375rem;letter-spacing:-.02em}
.bar{height:14px;background:var(--line)}.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 1.1s cubic-bezier(.2,.7,.1,1)}
.bar i.peer{background:color-mix(in srgb,var(--ink) 32%,var(--paper))}
.results-chart.in .bar i{width:var(--w)}
@media(prefers-reduced-motion:reduce){.bar i{transition:none}}
.resource-open{display:inline-flex;gap:12px;align-items:baseline;flex:none;font-size:.875rem;letter-spacing:0;white-space:nowrap}
@media(max-width:560px){.resource h3 a{flex-wrap:wrap}}
.resource h3 a{align-items:baseline}

/* OpenDecider tile: JSON in, probabilities out */
.decider{display:flex;flex-direction:column;gap:12px;padding:14px 16px;font:.72rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.dec-in{margin:0;flex:none;min-height:9.3em;white-space:pre-wrap;word-break:break-word;color:var(--muted)}
.dec-out{display:grid;gap:6px;flex:1;align-content:space-evenly;min-height:0;border-top:1px solid var(--line);padding-top:10px}
.dec-head{color:var(--gold-ink)}
.dec-row{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr) 36px;gap:10px;align-items:center}
.dec-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dec-row .bar{height:8px}.dec-row .bar i{transition-duration:.8s}
.dec-row b{font-weight:400;text-align:right;color:var(--ink)}
.dec-row.dim{color:var(--muted)}.dec-row.dim .bar i{background:color-mix(in srgb,var(--ink) 32%,var(--wash))}
.panel-visual .decider{height:auto;min-height:290px}

/* OpenDecider: reserve room for the header and up to five rows, so the tile never grows */
.dec-out{min-height:calc(6 * 1.55em + 5 * 6px + 10px)}
.dec-line{display:block}