/* ==========================================================================
   Rollo Run — on top of scale.css (templates/run-page.html, content/new-run.json)
   White base, coral as the signal, every live visual in a dark card. The
   simulations are played by run.js; the markup already holds a still state.
   ========================================================================== */
.run {
  --green-tint: #E8F3EC;
  --amber: #A86412;
  --amber-tint: #FBF0DF;
  --dk-1: #1D1C1A;
  --dk-line: #2A2926;
  --g-dk: #6CC59A;
  --c-dk: #FF8A66;
  --a-dk: #E0A458;
}

/* reading progress */
.rn-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 3px; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* bold runs inside copy read as ink, not as a heavier grey */
.run .lead b, .rn-copy b, .rn-card b { color: var(--ink); font-weight: 550; }

/* chips: light by default, their dark version inside a dark card */
.rn-chip { display: inline-flex; align-items: center; flex: none; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--ink); background: var(--bg-soft); }
.rn-chip.g { color: var(--green); background: var(--green-tint); }
.rn-chip.c { color: var(--coral-ink); background: var(--coral-tint); }
.rn-chip.a { color: var(--amber); background: var(--amber-tint); }
.rn-chip.w { color: var(--ink-3); background: transparent; border: 1px dashed #CFCBC2; }
.rn-dk .rn-chip { color: var(--on-dark); background: var(--dk-line); }
.rn-dk .rn-chip.g { color: var(--g-dk); background: rgba(93, 180, 135, .14); }
.rn-dk .rn-chip.c { color: var(--c-dk); background: rgba(242, 100, 64, .16); }
.rn-dk .rn-chip.a { color: var(--a-dk); background: rgba(217, 154, 71, .15); }
.rn-dk .rn-chip.w { color: var(--on-dark-2); background: transparent; border: 1px dashed #4A4844; }
.rn-chip:empty { display: none; }

/* ==========================================================================
   Hero: copy left (as on Enable and Strategy), the Rollo Workspace right
   ========================================================================== */
.rn-hero .uh-title { max-width: 9ch; }

/* Rollo Workspace: four agents show; the rest of the list is the pool run.js cycles in.
   The card is a size container: when it gets narrow, each row stacks onto two lines. */
.rn-ws { position: relative; overflow: hidden; container-type: inline-size; border-radius: 28px; background: var(--dark); color: var(--on-dark-2); padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 36px) clamp(20px, 2.4vw, 28px); box-shadow: 0 60px 100px -60px rgba(14, 14, 13, .6); }
.js .uh .rn-ws { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) .3s, transform 1s var(--ease) .3s; }
.js .uh.in .rn-ws { opacity: 1; transform: none; }
.rn-ws-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rn-ws-eyebrow { display: flex; align-items: center; gap: 10px; font: 500 .95rem var(--display); color: var(--on-dark-2); }
.rn-ws-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(242, 100, 64, .2); }
.rn-live { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--g-dk); white-space: nowrap; }
.rn-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5DB487; box-shadow: 0 0 0 4px rgba(93, 180, 135, .18); }
.rn-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.rn-kpis div { display: grid; align-content: start; padding-top: 14px; border-top: 1px solid #3A3936; }
.rn-kpis dt { font-size: .82rem; line-height: 1.3; color: var(--on-dark-2); }
.rn-v { margin-top: 8px; font-family: var(--display); font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.5rem); font-weight: 450; line-height: 1; letter-spacing: -.04em; color: var(--on-dark); font-variant-numeric: tabular-nums; transition: color .3s; }
.rn-v.flash { color: var(--coral); }
.rn-s { margin-top: 6px; font-size: .8rem; color: var(--g-dk); }
.rn-rows { height: 248px; overflow: hidden; margin-top: clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--dk-line); }
.rn-tr { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 14px; align-items: center; height: 62px; padding: 0 6px; border-top: 1px solid var(--dk-line); transition: opacity .4s, transform .4s var(--ease), background-color .9s; }
.rn-tr.out { opacity: 0; transform: translateY(8px); }
.rn-tr.new { background: rgba(242, 100, 64, .12); animation: rn-in .45s var(--ease); }
@keyframes rn-in { from { opacity: 0; transform: translateY(-10px); } }
.rn-ag { min-width: 0; }
.rn-ag p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rn-ag b { min-width: 0; overflow: hidden; font-family: var(--display); font-size: 1.05rem; font-weight: 550; letter-spacing: -.015em; color: var(--on-dark); white-space: nowrap; text-overflow: ellipsis; }
.rn-how { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(242, 100, 64, .16); font-size: .64rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--c-dk); }
.rn-how:empty { display: none; }
.rn-ag small { display: block; margin-top: 2px; overflow: hidden; font-size: .8rem; color: var(--on-dark-2); white-space: nowrap; text-overflow: ellipsis; }
.rn-hcell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.rn-route { padding: 4px 10px; border-radius: 999px; background: var(--dk-line); font-size: .76rem; font-weight: 550; color: var(--on-dark); white-space: nowrap; }
.rn-ok { flex: none; display: grid; gap: 5px; width: 46px; font-size: .8rem; text-align: right; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.rn-bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--dk-line); }
.rn-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--coral); transition: width .9s var(--ease); }
.rn-shimmer { flex: 1; min-width: 0; overflow: hidden; padding: 9px 12px; border-radius: 10px; font-size: .78rem; color: var(--on-dark-2); white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(90deg, var(--dk-1) 0%, #2E2D2A 50%, var(--dk-1) 100%); background-size: 200% 100%; animation: rn-shim 1.1s linear infinite; }
@keyframes rn-shim { to { background-position: -200% 0; } }
.scale .rn-act { justify-self: end; padding: 6px 11px; border-radius: 999px; border: 1px solid #3A3936; font-size: .78rem; font-weight: 600; color: var(--on-dark); white-space: nowrap; transition: border-color .3s, background-color .3s, color .3s; }
.scale .rn-act:hover { border-color: var(--on-dark); }
.scale .rn-act.ok { background: rgba(93, 180, 135, .14); border-color: rgba(93, 180, 135, .4); color: var(--g-dk); }
.rn-ws-note { margin-top: 14px; font-size: .8rem; line-height: 1.4; color: var(--on-dark-2); }
@container (max-width: 400px) {
  .rn-rows { height: 368px; }
  .rn-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ag ag" "h act"; align-content: center; row-gap: 8px; height: 92px; padding: 0 2px; }
  .rn-ag { grid-area: ag; }
  .rn-hcell { grid-area: h; justify-content: flex-start; }
  .scale .rn-act { grid-area: act; }
  .rn-kpis { gap: 10px; }
  .rn-kpis dt { font-size: .72rem; }
  .rn-v { font-size: 1.45rem; }
  .rn-s { font-size: .7rem; }
}

/* intro: the problem left, what Run does about it right */
.rn-intro { padding: clamp(72px, 9vw, 128px) 0 0; }
.rn-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.rn-intro-line { font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 450; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.rn-intro .lead { max-width: 50ch; }
.rn-trust { max-width: 50ch; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-3); }
@media (max-width: 900px) { .rn-intro-grid { grid-template-columns: 1fr; gap: 18px; } }

/* events ticker: the list twice, the track moves half its width */
.js .uh .rn-ticker { opacity: 0; transition: opacity 1s var(--ease) .7s; }
.js .uh.in .rn-ticker { opacity: 1; }
.rn-ticker { margin-top: clamp(56px, 7vw, 96px); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rn-track { display: flex; width: max-content; }
.rn-track ul { display: flex; }
.rn-track li { display: flex; align-items: center; gap: 10px; padding: 15px 26px; border-right: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .rn-track { animation: rn-marq 60s linear infinite; }
  .rn-ticker:hover .rn-track { animation-play-state: paused; }
}
@keyframes rn-marq { to { transform: translateX(-50%); } }

/* ==========================================================================
   Sections: split head with an outlined numeral that drifts on scroll
   ========================================================================== */
.rn-sec { padding: clamp(96px, 12vw, 160px) 0; }
.rn-tight { padding-top: 0; }
.rn-soft { background: var(--bg-soft); }
.rn-head { position: relative; }
.rn-head > * { position: relative; z-index: 1; }
.rn-num { position: absolute !important; z-index: 0 !important; right: 0; top: -.62em; font-family: var(--display); font-size: clamp(6rem, 3rem + 7vw, 11rem); font-weight: 300; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px #E2DFD8; pointer-events: none; user-select: none; will-change: transform; }
.rn-soft .rn-num { -webkit-text-stroke-color: #D6D3CB; }
.rn-copy p { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--ink-3); max-width: 44ch; text-wrap: pretty; }
.rn-copy p + p { margin-top: .8em; }
@media (max-width: 900px) { .rn-num { display: none; } }

/* lists: a coral dash for what goes wrong, grey where it is the "without" side */
.rn-dash { display: grid; gap: 8px; margin-top: 8px; }
.rn-dash li { position: relative; padding-left: 22px; line-height: 1.45; color: var(--ink-2); }
.rn-dash li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 2px; border-radius: 2px; background: var(--coral); }
.rn-q { margin-top: auto; padding-top: 22px; }
.rn-q p { padding-top: 18px; border-top: 1px solid #DAD7D0; font-family: var(--display); font-size: 1.15rem; line-height: 1.32; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.rn-q cite { display: block; margin-top: 8px; font-size: .8rem; font-style: normal; font-weight: 600; color: var(--ink-3); }

/* 01 challenge */
.rn-pains .pillar { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.rn-pains .pl-name { margin-top: 0; }
.rn-pains .pl-title { margin-bottom: 4px; }

/* the real risk */
.rn-leak { padding-bottom: clamp(72px, 9vw, 128px); }
.rn-leakline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; max-width: 980px; margin: clamp(48px, 6vw, 80px) auto 0; }
.rn-leakline span { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rn-leakline canvas { width: 100%; height: 70px; }
@media (max-width: 700px) { .rn-leakline { grid-template-columns: 1fr; gap: 8px; } .rn-leakline span:last-child { text-align: right; } }

/* 02 why Rollo: the dark band */
.rn-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.rn-why .h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.05; max-width: 18ch; }
.rn-why-body { margin-top: 24px; font-size: 1.08rem; max-width: 52ch; }
.rn-why b { color: var(--on-dark); font-weight: 550; }
.rn-why-list li { position: relative; padding: 20px 0 20px 30px; border-top: 1px solid #2E2D2A; }
.rn-why-list li::before { content: ""; position: absolute; left: 2px; top: 29px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(242, 100, 64, .18); }
.rn-why-tag { padding-top: 22px; border-top: 1px solid #2E2D2A; font-family: var(--display); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; color: var(--on-dark); }
@media (max-width: 900px) { .rn-why-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   03 What Run does: a card that says it, a dark panel that shows it
   ========================================================================== */
.rn-feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; }
.rn-feat + .rn-feat { margin-top: 16px; }
.rn-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 36px); border-radius: var(--r); background: var(--bg-soft); }
.rn-card .pl-name { margin-top: 0; }
.rn-card-title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1.08; max-width: 18ch; }
.rn-card .ticks { gap: 14px; margin-top: 10px; }
.rn-card-intro { color: var(--ink-3); }
.rn-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: .82rem; font-weight: 600; }
.rn-path span { padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink); }
.rn-path i { font-style: normal; color: var(--coral); }
.rn-path .rn-last { background: var(--coral-tint); color: var(--coral-ink); }
.rn-panel { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); background: var(--dark); color: var(--on-dark-2); box-shadow: 0 60px 100px -70px rgba(14, 14, 13, .6); }
.rn-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--dk-line); font: 500 .95rem var(--display); color: var(--on-dark); }
.rn-panel-head > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.rn-panel-head > span:first-child::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
@media (max-width: 900px) { .rn-feat { grid-template-columns: 1fr; } }

/* Govern: the gateway graph */
.rn-graph { width: 100%; height: auto; }
.rn-graph .edge { fill: none; stroke: #2E2D2A; stroke-width: 1.5; }
.rn-graph .flow { fill: none; stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 300; stroke-dashoffset: 310; }
.rn-graph .pillbg { fill: var(--dk-1); stroke: #34332F; }
.rn-graph .pilltx { font: 500 11.5px var(--sans); fill: var(--on-dark); }
.rn-graph .plan { fill: none; stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .8; }
.rn-graph .plantx { font: 600 10.5px var(--sans); fill: var(--c-dk); }
.rn-graph .node { fill: var(--coral); transform-box: fill-box; transform-origin: center; }
.rn-graph .nodetx { font: 600 13px var(--display); fill: var(--ink); }
.rn-graph .nodesub { font: 600 8.5px var(--sans); letter-spacing: .1em; fill: rgba(14, 14, 13, .65); }
.rn-graph .outtx { font: 500 11.5px var(--sans); fill: var(--on-dark-2); }
@media (prefers-reduced-motion: no-preference) {
  .rn-graph .flow { animation: rn-flow 2.6s linear infinite; }
  .rn-graph .node { animation: rn-breathe 3s ease-in-out infinite; }
}
@keyframes rn-flow { to { stroke-dashoffset: 0; } }
@keyframes rn-breathe { 50% { transform: scale(1.04); } }
.rn-routes { display: grid; gap: 6px; margin-top: 14px; }
.rn-routes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--dk-line); font-size: .88rem; color: var(--on-dark-2); transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s; }
.rn-routes li.on { border-color: var(--coral); background: rgba(242, 100, 64, .1); color: var(--on-dark); }

/* Operate: incident feed and spend */
.rn-feed { display: flex; flex-direction: column; gap: 8px; height: 244px; overflow: hidden; }
.rn-fr { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; flex: none; min-height: 54px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dk-line); background: var(--dk-1); font-size: .86rem; }
.rn-fr.in { animation: rn-in .45s var(--ease); }
.rn-tm { font-size: .76rem; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.rn-fr b { display: block; font-weight: 600; color: var(--on-dark); }
.rn-fr small { display: block; font-size: .8rem; line-height: 1.3; color: var(--on-dark-2); }
.rn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rn-stats div { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dk-line); }
.rn-stats dt { font-size: .74rem; line-height: 1.3; color: var(--on-dark-2); }
.rn-stats dd { font-family: var(--display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.rn-stats dd.rn-c { color: var(--c-dk); }

/* Enable: the production check splits the flow */
.rn-flow { position: relative; }
.rn-flow canvas { width: 100%; height: 210px; }
.rn-flowlab { position: absolute; right: 0; padding: 4px 10px; border-radius: 999px; background: var(--dark); font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rn-flowlab.rn-a { top: 14%; color: var(--on-dark); border: 1px solid #3A3936; }
.rn-flowlab.rn-b { top: 72%; color: var(--c-dk); border: 1px solid rgba(242, 100, 64, .45); }
.rn-flowlab.rn-s { left: 0; right: auto; top: 38%; color: var(--on-dark-2); border: 1px solid #3A3936; }
.rn-narrow .rn-flowlab.rn-a { top: 6%; }
.rn-narrow .rn-flowlab.rn-b { top: auto; bottom: 2%; }
.rn-narrow .rn-flowlab.rn-s { top: 30%; }
.rn-oneline { margin-top: clamp(48px, 6vw, 80px); text-align: center; font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 450; line-height: 1.12; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }

/* ==========================================================================
   04 Sovereign by design
   ========================================================================== */
.rn-soft .pillar, .rn-soft .rn-card { background: #fff; }
.rn-soft .pillar::after { border-color: var(--line); }
.rn-options .pillar { min-height: 0; }
.rn-options .pl-title { margin-top: 32px; }
.rn-stack { margin-top: 16px; }
.rn-panel .em-layer li.rn-k { background: var(--coral); color: var(--ink); font-weight: 550; }

/* ==========================================================================
   05 Control: the autonomy ladder
   ========================================================================== */
.rn-ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.rn-rungs { display: grid; gap: 10px; }
.scale .rn-rung { --fill: var(--ink-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 18px 22px; border-radius: 18px; border: 1px solid transparent; background: var(--bg-soft); text-align: left; transition: transform .35s var(--ease), border-color .3s, background-color .3s; }
.scale .rn-rung:hover { background: #EEECE7; }
.scale .rn-rung.on { --fill: var(--coral); transform: translateX(6px); border-color: var(--ink); background: #fff; }
.rn-lv { grid-column: 1; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rn-rung b { grid-column: 1; font-family: var(--display); font-size: 1.3rem; font-weight: 550; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.rn-d { grid-column: 1; font-size: .92rem; line-height: 1.45; color: var(--ink-3); }
.rn-meter { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; gap: 3px; }
.rn-meter i { width: 7px; height: 22px; border-radius: 2px; background: #DAD7D0; transition: background-color .3s; }
.rn-rung[data-m="1"] .rn-meter i:nth-child(-n+1), .rn-rung[data-m="2"] .rn-meter i:nth-child(-n+2),
.rn-rung[data-m="3"] .rn-meter i:nth-child(-n+3), .rn-rung[data-m="4"] .rn-meter i { background: var(--fill); }
/* one step set per level; without JS the third level shows */
.rn-lsets { flex: 1; }
.rn-lset { display: none; gap: 10px; counter-reset: ls; }
.rn-lset.on, html:not(.js) .rn-lset:nth-child(3) { display: grid; }
.rn-lset li { counter-increment: ls; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px; border-radius: 14px; border: 1px solid var(--dk-line); background: var(--dk-1); transition: opacity .4s, border-color .4s, background-color .4s; }
.rn-lset li::before { content: counter(ls, decimal-leading-zero); font-size: .82rem; font-weight: 650; color: var(--coral); font-variant-numeric: tabular-nums; }
.rn-lset li p { font-size: .98rem; line-height: 1.45; color: var(--on-dark); }
.js .rn-lset li { opacity: .35; }
.js .rn-lset li.lit { opacity: 1; border-color: rgba(242, 100, 64, .5); background: rgba(242, 100, 64, .1); }
.rn-ladnote { margin-top: 16px; font-size: .88rem; color: var(--on-dark-2); }
@media (max-width: 900px) { .rn-ladder { grid-template-columns: 1fr; } .scale .rn-rung.on { transform: none; } }

/* ==========================================================================
   06 What changes: with Run (dark) against without (dashed)
   ========================================================================== */
.rn-stakes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rn-with, .rn-without { padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; }
.rn-with { background: var(--dark); color: var(--on-dark-2); box-shadow: 0 60px 100px -70px rgba(14, 14, 13, .6); }
.rn-without { border: 2px dashed #CFCBC2; }
.rn-stakes h3 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.05; }
.scale .rn-with h3 { color: var(--on-dark); }
.rn-money { margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid #DAD7D0; font-family: var(--display); font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.rn-with .rn-money { border-color: #2E2D2A; color: var(--on-dark); }
.rn-stakes .ticks, .rn-stakes .rn-dash { gap: 12px; margin-top: 20px; }
.rn-with .ticks li { color: var(--on-dark); }
.rn-with .ticks li::before { background-color: rgba(242, 100, 64, .18); }
.rn-without .rn-dash li::before { background: #B9B6AE; }
@media (max-width: 900px) { .rn-stakes { grid-template-columns: 1fr; } }


/* ==========================================================================
   CTA: dark card with drifting dust
   ========================================================================== */
.rn-final { padding: 0 0 clamp(96px, 12vw, 160px); }
.rn-close { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 22px; padding: clamp(40px, 6vw, 88px); border-radius: 28px; background: radial-gradient(60% 70% at 85% 0%, rgba(242, 100, 64, .12) 0%, rgba(242, 100, 64, 0) 70%), var(--dark); color: var(--on-dark-2); }
.rn-close canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rn-close > :not(canvas) { position: relative; }
.rn-close .kicker { margin-bottom: -4px; }
.scale .rn-close-title { max-width: 14ch; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem); line-height: 1; letter-spacing: -.045em; color: var(--on-dark); }
.rn-close-body { max-width: 58ch; font-size: 1.08rem; }
.rn-close-body b { color: var(--on-dark); font-weight: 550; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .rn-stats div { padding: 8px 10px; }
  .rn-stats dt { font-size: .66rem; }
  .rn-stats dd { font-size: 1.05rem; }
  .rn-fr { grid-template-columns: 40px minmax(0, 1fr); }
  .rn-fr .rn-chip { grid-column: 2; justify-self: start; }
  .rn-feed { height: 300px; }
  .rn-flowlab { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .uh .rn-ws, .js .uh .rn-ticker { opacity: 1; transform: none; transition: none; }
  .rn-track { width: auto; }
  .rn-track ul:first-child { flex-wrap: wrap; }
  .rn-dup { display: none; }
  .rn-tr, .rn-bar i, .rn-routes li, .rn-lset li, .scale .rn-rung { transition: none; }
  .rn-shimmer { animation: none; }
}