/* restaged.dev — the front door.
 *
 * Dark, committed: this page is a console, not a brochure, and it does not follow the reader's
 * light preference the way the twins do (they have to look like the products they imitate; this
 * one only has to look like us). Every colour is a token, so the whole page is two dozen lines
 * away from any other palette.
 *
 * The palette is the simulation banner's own — deep violet and signal amber — which is the mark
 * a Restaged page has carried since the first twin. Indigo is kept for links, exactly as in
 * app.css, so the two surfaces feel like one product.
 */
:root {
  --ink: #0b0d13;          /* page */
  --ink-2: #11141d;        /* raised surface */
  --ink-3: #171b26;        /* code, wells */
  --line: #232839;
  --line-2: #2f3549;
  --fg: #e8eaf0;
  --fg-2: #a8b0c2;         /* secondary text */
  --fg-3: #6f7994;         /* labels, captions */
  --violet: #6f4bd8;
  --violet-2: #4c2889;
  --amber: #ffd43b;
  --indigo: #8ea2ff;
  --green: #46d39a;
  --red: #ff6b6b;
  --radius: 12px;
  --wrap: 1180px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--fg); -webkit-font-smoothing: antialiased; }
/* `balance` rather than a hard <br>: the headline used to carry its own line break, which is a
   guess about a column width that changes with the viewport. Let the browser split it, and
   split it evenly — an unsupported engine just wraps normally, which is the same intent. */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.65rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1rem; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.rs-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.rs-lede { color: var(--fg-2); font-size: 1.06rem; max-width: 62ch; }
.rs-foot { color: var(--fg-3); font-size: .92rem; max-width: 70ch; }
.rs-section { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.rs-step { margin: 0 0 .5rem; font: 700 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }

/* ---- the bar. The simulation notice lives here: it is on every Restaged page, this one too. */
.rs-bar { position: sticky; top: 0; z-index: 20; background: rgba(11,13,19,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.rs-bar-in { display: flex; align-items: center; gap: 1rem; height: 56px; }
.rs-brand { display: flex; align-items: center; gap: .5rem; color: var(--fg); font-weight: 800; letter-spacing: -.01em; }
.rs-brand:hover { text-decoration: none; }
.rs-mark { flex: none; display: block; }
.rs-bar nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; font-size: .92rem; }
.rs-bar nav a { color: var(--fg-2); }
.rs-bar nav a:hover { color: var(--fg); text-decoration: none; }
.rs-navcta { color: var(--ink) !important; background: var(--amber); border-radius: 8px; padding: .34rem .8rem; font-weight: 700; }
.rs-navcta:hover { background: #ffe06b; }

/* ---- hero */
.rs-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); position: relative; overflow: hidden; }
/* One soft violet wash, off-centre and closest-side so it dies well before the fold does — not a
   full-width gradient blob behind a centred headline, and never paired with a background grid
   (a 1px page-wide grid aliases into moving bands at fractional devicePixelRatio). */
.rs-hero::before {
  content: ""; position: absolute; inset: -25% 45% 45% -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(111,75,216,.17), transparent 70%); }
.rs-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.rs-hero-copy h1 { margin-bottom: 1.1rem; }
.rs-hero-copy .rs-lede { font-size: 1.13rem; }
.rs-hero-copy em { color: var(--fg); font-style: normal; border-bottom: 2px solid var(--amber); }
.rs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 1.6rem 0 .6rem; }
.rs-btn { display: inline-block; background: var(--amber); color: #16130a; font-weight: 700; font-size: 1rem; border: 0; border-radius: 10px; padding: .72rem 1.3rem; cursor: pointer; }
.rs-btn:hover { background: #ffe06b; text-decoration: none; }
.rs-ghost { display: inline-block; color: var(--fg-2); font-weight: 600; font-size: .95rem; border: 1px solid var(--line-2); border-radius: 10px; padding: .68rem 1.1rem; background: transparent; cursor: pointer; font-family: inherit; }
.rs-ghost:hover { color: var(--fg); border-color: var(--fg-3); text-decoration: none; }
.rs-note { color: var(--fg-3); font-size: .86rem; }

/* ---- the terminal. Katacoda's one true idiom: show the product doing the thing. */
.rs-term { background: #080a10; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.rs-term-h { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: var(--ink-2); border-bottom: 1px solid var(--line); color: var(--fg-3); font-size: .78rem; }
.rs-term-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(70,211,154,.16); }
.rs-term-b { margin: 0; padding: 1rem .95rem 1.15rem; overflow-x: auto; font-size: .805rem; line-height: 1.75; color: var(--fg-2); }
.rs-term-b .p { color: var(--amber); }
.rs-term-b .ok { color: var(--green); }
.rs-term-b .d { color: var(--fg-3); }
.rs-term-b .hl { color: var(--fg); background: rgba(255,212,59,.10); border-bottom: 1px solid rgba(255,212,59,.45); }
.rs-term-b .hl2 { color: var(--fg); }
.rs-demo-note { margin: .8rem 0 0; color: var(--fg-3); font-size: .84rem; }

/* ---- proof strip */
.rs-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.rs-strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.4rem 1.25rem; }
.rs-strip-in div { display: flex; flex-direction: column; gap: .15rem; }
.rs-strip-in b { font-size: 1.5rem; letter-spacing: -.02em; }
.rs-strip-in span { color: var(--fg-3); font-size: .84rem; }

/* ---- the swap table: the product as a diff */
.rs-scroll { overflow-x: auto; margin: 1.6rem 0 1rem; }
.rs-swap { width: 100%; border-collapse: collapse; font-size: .87rem; }
.rs-swap th, .rs-swap td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rs-swap thead th { color: var(--fg-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; border-bottom-color: var(--line-2); }
.rs-swap tbody th { color: var(--fg); font-weight: 600; }
/* The whole "before" cell is struck, path included — text-decoration propagates to descendants
   and cannot be cancelled by them, and striking the entire old URL is the clearer diff anyway. */
.rs-was { color: var(--fg-3); text-decoration: line-through; text-decoration-color: rgba(255,107,107,.55); }
.rs-now b { color: var(--amber); font-weight: 600; }
.rs-path { color: var(--fg-3); }
.rs-arrow { color: var(--fg-3); padding: 0 !important; }

/* ---- company tiles */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 1.1rem; margin-top: 2rem; }
.rs-tile { display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.15rem 1rem; transition: border-color .15s, transform .15s; }
.rs-tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
.rs-tile > header { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.rs-dom { color: var(--fg-3); font-size: .78rem; }
.rs-about { color: var(--fg-2); font-size: .9rem; margin-bottom: .9rem; }
.rs-facts { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .84rem; color: var(--fg-3); }
.rs-facts b { color: var(--fg); font-variant-numeric: tabular-nums; }
.rs-apps { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.1rem; }
.rs-chip { font-size: .72rem; color: var(--fg-2); background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .42rem; }
.rs-tile > footer { margin-top: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rs-start { flex: 1 1 auto; font: 700 .93rem/1 inherit; font-family: inherit; text-align: center; color: #16130a; background: var(--amber); border: 0; border-radius: 9px; padding: .62rem 1rem; cursor: pointer; }
.rs-start:hover { background: #ffe06b; text-decoration: none; }
.rs-start[disabled] { opacity: .55; cursor: progress; }
.rs-start.is-off { background: transparent; color: var(--fg-3); border: 1px dashed var(--line-2); cursor: default; }
.rs-tile .rs-ghost { padding: .58rem .85rem; font-size: .88rem; }
.rs-error { margin: .8rem 0 0; color: var(--red); font-size: .86rem; }
.rs-nojs { margin-top: .9rem; }

/* ---- code blocks */
.rs-code { margin: 1.1rem 0 0; background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rs-code-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .7rem .45rem .85rem; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); color: var(--fg-3); font-size: .78rem; }
.rs-code pre { margin: 0; padding: .85rem; overflow-x: auto; font-size: .795rem; line-height: 1.65; color: var(--fg-2); }
.rs-copy { flex: none; font: 600 .74rem/1 inherit; font-family: inherit; color: var(--fg-2); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: .28rem .55rem; cursor: pointer; }
.rs-copy:hover { color: var(--fg); border-color: var(--fg-3); }
.rs-copy.is-done { color: var(--green); border-color: rgba(70,211,154,.45); }
.rs-offscreen { position: fixed; left: -9999px; opacity: 0; }

/* ---- steps two and three */
.rs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.rs-asks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.rs-asks li { display: flex; flex-direction: column; gap: .18rem; background: var(--ink-2); border: 1px solid var(--line); border-left: 2px solid var(--violet); border-radius: 0 9px 9px 0; padding: .6rem .85rem; }
.rs-ask-w { font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.rs-ask-q { color: var(--fg-2); font-size: .93rem; }

/* ---- your companies (rendered by home.js) */
.rs-yours { background: var(--ink-2); }
.rs-yours .rs-sub { color: var(--fg-3); font-size: .92rem; }
.rs-live { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.2rem; margin-top: 1.1rem; }
.rs-live > header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.rs-live h3 { display: flex; align-items: center; gap: .5rem; }
.rs-tag { font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255,212,59,.3); border-radius: 999px; padding: .2rem .45rem; }
.rs-uuid { display: block; word-break: break-all; margin-top: .3rem; color: var(--fg-3); font-size: .77rem; }
.rs-lease { text-align: right; }
.rs-clock { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--green); }
.rs-clock.is-gone { color: var(--red); }
.rs-lease-l { color: var(--fg-3); font-size: .78rem; }
.rs-live-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.rs-live-actions .rs-start { flex: 0 0 auto; }
.rs-danger:hover { color: var(--red); border-color: rgba(255,107,107,.45); }
.rs-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 1.1rem; }
.rs-token h4 { margin: 1.1rem 0 .3rem; font-size: .95rem; }
.rs-token p { color: var(--fg-3); font-size: .84rem; margin-bottom: 0; }

/* ---- the honesty block */
.rs-honest { background: linear-gradient(180deg, rgba(111,75,216,.09), transparent 60%); }
.rs-guards { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.rs-guards li { color: var(--fg-2); font-size: .92rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; }
.rs-guards b { color: var(--fg); }
.rs-guards code { font-size: .82rem; color: var(--amber); word-break: break-all; }

/* ---- footer */
.rs-foot-bar { border-top: 1px solid var(--line); padding: 1.6rem 0 2.4rem; color: var(--fg-3); font-size: .86rem; }
.rs-foot-in { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; }
.rs-foot-in b { color: var(--fg-2); }
.rs-foot-in span:first-child { display: flex; align-items: center; gap: .45rem; }

/* ---- narrow. The two-column fold stacks first; the strip is the last thing to give.
   `minmax(0, 1fr)` and not `1fr`, for the same reason the two-column rule above says it: a bare
   `1fr` is `minmax(auto, 1fr)`, and that `auto` floor is the item's min-content — which for the
   hero is the terminal's longest line, an unbreakable 52-character MCP URL. On a 412px phone that
   sized the single track at 466px, and since `.rs-hero` clips rather than scrolls, the headline and
   the buttons ran off under the right edge instead of wrapping. */
@media (max-width: 900px) {
  .rs-hero-in { grid-template-columns: minmax(0, 1fr); }
  .rs-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
}
@media (max-width: 560px) {
  .rs-bar nav a:not(.rs-navcta) { display: none; }
  .rs-lease { text-align: left; }
  .rs-cta .rs-btn, .rs-cta .rs-ghost { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-tile { transition: none; }
  .rs-tile:hover { transform: none; }
}

/* the tile that knows one of your private twins is running */
.rs-tile.is-started { border-color: rgba(70,211,154,.4); }
.rs-started { font: 600 .85rem/1 inherit; color: var(--green); align-self: center; }
.rs-started:hover { text-decoration: underline; }

/* the footer's affiliation notice — small, but it is the paragraph that must never be cut */
.rs-disclaimer { max-width: 90ch; margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--fg-3); font-size: .78rem; line-height: 1.65; }
.rs-foot-r { font-size: .78rem; }

/* ---- how it works / where it stops */
.rs-beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1.6rem; margin-top: 2rem; }
.rs-beats h3 { margin-bottom: .45rem; }
.rs-beats p { color: var(--fg-2); font-size: .93rem; margin: 0; }
.rs-beats em { color: var(--fg); font-style: normal; }
.rs-beats code, .rs-nots code, .rs-lede code, .rs-foot code { font-size: .86em; color: var(--amber); background: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: .05em .3em; }
.rs-nots { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1rem; }
.rs-nots li { color: var(--fg-2); font-size: .92rem; line-height: 1.6; border-left: 2px solid var(--red); padding: .1rem 0 .1rem 1rem; }
.rs-nots b { color: var(--fg); }
.rs-micro { margin: .7rem 0 0; color: var(--fg-3); font-size: .78rem; }

/* Mono hygiene. Ligatures off is what separates a shell from a code editor, and tabular figures
   stop a ticking countdown from jittering its own width. The prompt is unselectable so a copied
   selection out of the transcript is the command, not the prompt plus the command. */
code, .mono, pre, .rs-term-b { font-variant-ligatures: none; font-variant-numeric: tabular-nums; }
.rs-term-b .p, .rs-term-b .d { user-select: none; -webkit-user-select: none; }
.rs-code-b { display: flex; gap: .35rem; }

/* A sticky 56px bar eats the top of every jump target — hash links, and the smooth scroll to a
   company you just started, whose heading and countdown are the two things the scroll is for. */
html { scroll-padding-top: 76px; }

/* A lease that ran out while you were looking at it. The card stays (the token is still the only
   copy) but it must not go on offering doors that now 404. */
.rs-live.is-dead { opacity: .72; }
.rs-live.is-dead .rs-live-actions .rs-start { pointer-events: none; opacity: .45; }

/* ---- the fifth tile: an offer, not a world. Dashed so it never reads as one of the four. */
.rs-bespoke { background: transparent; border-style: dashed; border-color: var(--line-2); }
.rs-bespoke:hover { border-color: var(--violet); transform: none; }
.rs-bespoke .rs-start { background: transparent; color: var(--amber); border: 1px solid rgba(255,212,59,.45); }
.rs-bespoke .rs-start:hover { background: rgba(255,212,59,.10); }
.rs-soon { font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); border: 1px solid rgba(111,75,216,.5); border-radius: 999px; padding: .22rem .45rem; }

/* ---- /bespoke: one column, no terminal beside it */
.rs-hero-solo { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.rs-hero-solo h1 { max-width: 16ch; margin-bottom: 1.1rem; }
.rs-hero-solo em { color: var(--amber); font-style: normal; }
.rs-solo-cta h2 { margin-bottom: .6rem; }
.rs-foot-in a { color: var(--indigo); }