/* ============================================================
   Raizer OS — the raizer.tech homepage (was orb.raizer.tech)
   html.js = the stage (set in <head>); without it the same
   document reads top to bottom as a plain page (section 6).
   Two worlds in one document: a 1997 page that burns away, and
   the system underneath it. Everything here is ours.
   Brand: the Raizer design system (css/raizer.css, loaded first).
   This file is scene layout only — tokens and components come from
   the system. Jost, square corners, one bottom-right cut, SVG icons.
   ============================================================ */

:root{
  --sx-max:1080px;   /* reading width inside the panels */
  --navh:72px;       /* rz-nav height (63 below 900px) */
}
@media(max-width:899px){:root{--navh:63px}}

html.js,html.js body{height:100%}
html.js body{overflow:hidden}
a{color:inherit}

/* ============================================================
   1 · THE 1997 PAGE
   Period-correct on purpose: system serif, bevelled chrome, a
   table for layout, a hit counter. It has to be believable for
   two seconds or the burn lands on nothing.
   ============================================================ */
#retro{
  position:fixed; inset:0; z-index:1000; overflow:auto;
  background:#c0c0c0; color:#000;
  font-family:"Times New Roman",Times,serif;
  /* intentionally anti-brand: shield it from the design system's
     body defaults so it renders exactly as it did before */
  font-size:16px; font-weight:400; line-height:normal; letter-spacing:normal;
}
#retro b{font-weight:bold}
#retro.burning{overflow:hidden}

.r-marq{
  height:26px; background:#000; overflow:hidden; display:flex; align-items:center;
  position:sticky; top:0;
}
.r-marq span{
  font-family:"Courier New",monospace; font-size:12.5px; font-weight:bold;
  color:#00c000; white-space:nowrap; animation:marq 26s linear infinite;
}
@keyframes marq{to{transform:translateX(-50%)}}

.r-mast{
  background:#000080; color:#fff; text-align:center; font-weight:bold;
  font-size:clamp(30px,7vw,46px); letter-spacing:1px; padding:16px 10px 4px;
}
.r-sub{
  background:#000080; color:#ffff00; text-align:center;
  font-size:15px; font-style:italic; padding-bottom:14px;
}
.r-page{max-width:640px; margin:0 auto; padding:22px 18px 60px}
.r-page h1,.r-page .r-h{
  font-size:clamp(21px,4.4vw,27px); margin:0 0 10px; font-weight:bold;
  color:#000080; text-align:center;
}
.r-lead{font-size:16px; margin:0 0 4px; text-align:center}
.r-blink{color:#c00; font-weight:bold; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.r-hr{border:0; border-top:2px groove #fff; margin:16px 0}
.r-tbl{width:100%; border-collapse:collapse}
.r-col{vertical-align:top; width:50%; padding:0 12px}
.r-head{
  background:#000080; color:#fff; font-weight:bold; font-size:13px;
  letter-spacing:1px; padding:3px 8px; margin-bottom:8px;
}
.r-ul{margin:0; padding:0; list-style:none; font-size:15px; line-height:1.55}
.r-ul li{padding-left:16px; position:relative}
.r-ul li::before{content:"\25BA"; position:absolute; left:0; color:#000080; font-size:10px; top:4px}
.r-cons{
  margin-top:14px; display:flex; align-items:center; gap:0;
  font-family:"Courier New",monospace; font-size:11px; font-weight:bold;
  border:1px solid #000;
}
.r-cons i{
  flex:1; height:18px;
  background:repeating-linear-gradient(45deg,#ffd700 0 9px,#000 9px 18px);
}
.r-cons b{background:#000; color:#ffd700; padding:3px 9px; white-space:nowrap; letter-spacing:.5px}
.r-btnwrap{text-align:center; margin:22px 0 8px}
.r-btn{
  font-family:"Times New Roman",Times,serif; font-size:17px; font-weight:bold;
  padding:7px 26px; background:#c0c0c0; color:#000; cursor:pointer;
  border:2px outset #fff; border-radius:0;
}
.r-btn:active{border-style:inset}
.r-hint{font-size:12px; color:#333; margin-top:7px; font-style:italic}
.r-foot{margin-top:26px; text-align:center; font-size:12px; color:#333; line-height:1.7}
.r-count{
  font-family:"Courier New",monospace; background:#000; color:#0f0;
  padding:1px 5px; letter-spacing:2px;
}

/* the hot edge and embers ride above the burning page */
#burn{
  position:fixed; inset:0; z-index:1001; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
}
#burn.on{opacity:1}

/* ============================================================
   2 · THE WORLD
   ============================================================ */
#world{
  position:fixed; inset:0; z-index:0; display:block;
  width:100%; height:100%; touch-action:none;
  transition:transform .9s var(--rz-ease-in), opacity .9s var(--rz-ease-in);
}
/* three.js arrives after first paint: the room fades in under the text */
#world:not(.ready){opacity:0}
/* the room recedes behind an open panel: transform + opacity only */
body.sx-open #world.ready{transform:scale(.82); opacity:.16}

/* THE CORNER LIGHT. Graphite carries one neutral-grey light from the
   top-left (#535860 at the corner, gone by ~70% of the diagonal).
   Screened over the canvas so it lifts the floor and the dark in that
   corner without painting over the cells, the traces or the UI. */
.room-light{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:var(--rz-light); mix-blend-mode:screen;
  /* ...but never over the orb: screening grey across it washed the
     logo orange out (2026-10 review). A hole where the shell sits. */
  -webkit-mask-image:radial-gradient(circle at 50% 48%, transparent 0 150px, #000 280px);
          mask-image:radial-gradient(circle at 50% 48%, transparent 0 150px, #000 280px);
  transition:opacity .54s var(--rz-ease-in);
}
body.sx-open .room-light{opacity:0}
/* the static room has no orb to keep clear of: the light runs unmasked */
html.lowend .room-light{-webkit-mask-image:none; mask-image:none}

/* THE SITE NAV, the same rz-nav as every raizer.tech page. On the stage it
   floats over the room (no bar, no rule) and turns solid when a panel or the
   mobile menu is open. */
html.js .rz-nav{position:fixed; left:0; right:0; top:0; z-index:85;
  background:transparent; box-shadow:none;
  transition:opacity .54s var(--rz-ease-in), background-color .18s var(--rz-ease-ui)}
html.js body.sx-open .rz-nav,html.js .rz-nav[data-open]{background:var(--rz-bg); box-shadow:0 1px 0 var(--rz-line)}
/* site.css extras for nav + footer (site.css itself is not loaded here:
   its page set pieces share class names with the panels) */
.rz-nav__links a{white-space:nowrap}
.rz-nav__toggle{font:inherit}
.rz-nav__in,.rz-footer__in{max-width:1188px}
.rz-footer__tag{margin-top:var(--rz-s3);font-size:var(--rz-t13);letter-spacing:.11em;text-transform:uppercase;color:var(--rz-muted)}
.rz-footer__origin{margin-top:var(--rz-s1)}
.ghost{display:inline-flex;align-items:center;gap:var(--rz-s1);color:var(--rz-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--rz-orange);text-decoration-thickness:2px;text-underline-offset:5px}
.ghost:hover{color:var(--rz-muted)}
.ghost .rz-ic{width:16px;height:16px;color:var(--rz-orange)}

.headline{
  position:fixed; z-index:20; left:0; right:0; top:calc(var(--navh) + clamp(0px,3vh,36px));
  text-align:center; padding:0 var(--rz-s2); pointer-events:none;
  transition:opacity .54s var(--rz-ease-in), transform .54s var(--rz-ease-in);
}
/* sentence headline, Jost 200 at 56 — one gradient word, nothing heavy */
.headline>.rz-label{display:inline-flex; margin-bottom:var(--rz-s2)}
.headline .rz-h1{text-wrap:balance}
.headline .rz-lede strong{color:var(--rz-text); font-weight:600}
.headline .rz-lede{margin:var(--rz-s2) auto 0; max-width:30em}
body.sx-open .headline{opacity:0; transform:translateY(-18px); pointer-events:none}
/* the site footer only shows at the end of an open panel (sections.js moves it) */
html.js body>.rz-footer{display:none}

/* status line: a label, orange slash, a square marker — no dot, no glow,
   nothing that loops */
.foot{
  position:fixed; z-index:20; bottom:18px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:var(--rz-s3);
  transition:opacity .54s var(--rz-ease-in);
}
.foot .rz-label{display:inline-flex; align-items:center}
.foot .rz-label .rz-sl{margin:0 .5em}
.foot .mark{display:inline-block; width:6px; height:6px; margin-right:9px; background:var(--rz-orange)}
body.sx-open .foot{opacity:0}

/* ============================================================
   3 · THE CARDS
   Real 3D transforms, not a flat row faked with shadows — they
   have to sit IN the room or the world reads as wallpaper.
   ============================================================ */
.cloud{
  position:fixed; inset:0; z-index:30;
  perspective:1250px; perspective-origin:50% 46%;
  pointer-events:none;
}
/* Each card is an rz-card (square, 20px bottom-right cut, Lifted —
   it is read, not pressed). Its place on the arc is the JS transform;
   nothing here fights it. */
.card{
  position:absolute; left:50%; top:52%;
  width:225px; padding:var(--rz-s3);
  text-align:left; cursor:pointer; pointer-events:auto;
  text-decoration:none; color:var(--rz-text); font:inherit; border:0; background:none;
  will-change:transform,opacity;
}
.card:hover{--ring:var(--rz-line2)}
.card .k{display:block; margin-bottom:var(--rz-s1)}
.card h3{margin:0}
.card p{margin:var(--rz-s1) 0 0; font-size:var(--rz-t13); line-height:1.5; color:var(--rz-muted)}
.card .go{
  display:inline-flex; align-items:center; gap:var(--rz-s1); margin-top:var(--rz-s2);
  font-size:var(--rz-t13); color:var(--rz-muted);
}
.card:hover .go{color:var(--rz-text)}
.card .go .rz-ic{width:13px; height:13px; color:var(--rz-orange)}

/* the one card that leaves the site: marked by a solid 2px orange
   top rule, not by a glowing border */
.card.cta{width:198px; text-align:center}
.card.cta::before{box-shadow:inset 0 2px 0 var(--rz-orange), var(--rz-hi)}
.card.cta .go{justify-content:center}

body.sx-open .card{opacity:0!important; pointer-events:none}

/* ============================================================
   4 · SECTIONS
   These are the actual pages of the site, not tooltips. The first
   pass was a uniform grid of dark boxes, which gave a phase, a
   product and a FAQ answer identical weight and read as a dump.
   This is an editorial layout: one display heading per panel,
   bands separated by rules, and a type scale that ranks things.
   ============================================================ */
.sx-root{position:fixed; inset:var(--navh) 0 0 0; z-index:80; pointer-events:none}
.sx{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  background:var(--rz-bg);
  opacity:0; pointer-events:none; transform:translateY(18px);
  transition:opacity .54s var(--rz-ease-in), transform .54s var(--rz-ease-in);
}
.sx.on{opacity:1; pointer-events:auto; transform:none}

/* ABLAQ. sections.js groups each panel into full-bleed bands that
   alternate graphite and stone with hard edges: the opening band is
   graphite with the corner light, then stone, graphite, stone... */
.sx-band{padding-block:var(--rz-s8)}
.sx-band:first-child{padding-top:var(--rz-s12)}
.sx-wrap{max-width:calc(var(--sx-max) + 2 * var(--rz-gut)); margin-inline:auto; padding-inline:var(--rz-gut)}

.sx-head{max-width:48em}
.sx-head>.rz-label{margin-bottom:var(--rz-s3)}
.sx-head>.rz-lede{margin-top:var(--rz-s2)}

/* a band is one idea: label, headline, then the content */
.band{margin:0; padding:0; border:0}
.band-k{margin-bottom:var(--rz-s2)}
.band-h{max-width:780px}
.band>.rz-lede{margin-top:var(--rz-s2)}
.sx .note{margin-top:var(--rz-s3); color:var(--rz-muted); font-size:var(--rz-t13); line-height:1.6}
.sx .note a{color:var(--rz-text); text-decoration:underline; text-decoration-color:var(--rz-orange); text-decoration-thickness:2px; text-underline-offset:4px}
.sx .note a:hover{color:var(--rz-muted)}

.sx-close{position:fixed; top:calc(var(--navh) + 18px); right:clamp(16px,3.4vw,36px); z-index:90; display:none}
.sx-close.on{display:inline-flex}
.sx-close .rz-btn__face{width:36px; padding:0; justify-content:center}

/* ---- panes: rz-card, lifted, 20px cut -------------------------- */
.grid{display:grid; gap:var(--rz-s2); margin-top:var(--rz-s4)}
.grid+.grid{margin-top:var(--rz-s2)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pane{padding:var(--rz-s3)}
.pane h4{font-size:var(--rz-t16); font-weight:600; line-height:1.4}
.pane p{margin-top:var(--rz-s1); color:var(--rz-muted); font-size:var(--rz-t16); line-height:1.6}
.pane .step,.case .step{
  display:block; margin-bottom:var(--rz-s2);
  font-size:var(--rz-t13); letter-spacing:.11em; text-transform:uppercase; line-height:1.4; color:var(--rz-muted);
}
.pane .rz-badge{margin-bottom:var(--rz-s2); align-self:flex-start}
/* section numbers: ink, with a short solid orange rule beside them */
.pane .num,.gh .num{
  display:inline-flex; align-items:center; gap:var(--rz-s1); margin-bottom:var(--rz-s2);
  font-size:var(--rz-t13); letter-spacing:.11em; color:var(--rz-text); font-variant-numeric:tabular-nums;
}
.pane .num::before,.gh .num::before{content:""; width:18px; height:2px; background:var(--rz-orange)}
/* the recommended tier: a solid 2px orange top rule + the badge, no glow */
.pane.hot::before{box-shadow:inset 0 2px 0 var(--rz-orange), var(--rz-hi)}
.tiers .pane{display:flex; flex-direction:column}

.ticks{list-style:none; margin:var(--rz-s2) 0 0; padding:0; display:grid; gap:var(--rz-s1)}
.ticks li{display:flex; gap:var(--rz-s1); align-items:flex-start; font-size:var(--rz-t16); color:var(--rz-text); line-height:1.5}
.ticks .rz-ic{color:var(--rz-orange); margin-top:3px}

/* ---- the lock screen ----------------------------------------
   A phone, not another card: a graphite frame (36px cut, lifted)
   sitting on the stone band. */
.lock-frame{max-width:660px; filter:var(--rz-lift)}
.lock{
  --c:var(--rz-cut-lg); overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);
}
.lock-top{padding:var(--rz-s3) var(--rz-s3) var(--rz-s2); text-align:center; border-bottom:1px solid var(--rz-line)}
.lock-top b{display:block; font-size:var(--rz-t56); font-weight:200; line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.lock-top span{display:block; margin-top:var(--rz-s1); font-size:var(--rz-t13); color:var(--rz-muted)}
.lock-row{
  display:grid; grid-template-columns:117px 1fr auto; gap:4px var(--rz-s2);
  padding:var(--rz-s2) var(--rz-s3); border-bottom:1px solid var(--rz-line);
  align-items:baseline;
}
.lock-row i{
  grid-row:span 2; font-style:normal; font-size:var(--rz-t13); letter-spacing:.11em;
  text-transform:uppercase; color:var(--rz-orange); align-self:center;
}
.lock-row b{font-size:var(--rz-t16); font-weight:600}
.lock-row em{font-style:normal; font-size:var(--rz-t13); color:var(--rz-muted); grid-row:span 2; align-self:center; font-variant-numeric:tabular-nums}
.lock-row span{grid-column:2; font-size:var(--rz-t13); color:var(--rz-muted); line-height:1.5}
.lock-foot{padding:var(--rz-s2) var(--rz-s3) var(--rz-s3); font-size:var(--rz-t13); color:var(--rz-muted); text-align:center}

/* ---- numbered lists ----------------------------------------- */
.phases,.steps{list-style:none; margin:var(--rz-s4) 0 0; padding:0; display:grid; gap:0}
.phases li,.steps li{
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--rz-s3);
  padding:var(--rz-s3) 0; border-top:1px solid var(--rz-line);
}
.phases li:last-child,.steps li:last-child{border-bottom:1px solid var(--rz-line)}
.ph{
  font-size:var(--rz-t32); font-weight:200; line-height:1; letter-spacing:-.02em;
  color:var(--rz-text); font-variant-numeric:tabular-nums lining-nums;
}
.ph::after{content:""; display:block; width:18px; height:2px; margin-top:var(--rz-s2); background:var(--rz-orange)}
.phases h4,.steps h4{font-size:var(--rz-t20); font-weight:400; line-height:1.3}
.phases h4 em,.steps h4 em{
  font-style:normal; font-size:var(--rz-t13); letter-spacing:.11em; text-transform:uppercase;
  color:var(--rz-muted); margin-left:var(--rz-s2); white-space:nowrap; vertical-align:2px;
}
.phases p,.steps p{margin-top:var(--rz-s1); color:var(--rz-muted); font-size:var(--rz-t16); line-height:1.6; max-width:720px}

/* ---- products ----------------------------------------------- */
.group{margin-top:var(--rz-s6)}
.gh{display:flex; align-items:baseline; gap:var(--rz-s2); flex-wrap:wrap}
.gh .num{margin-bottom:0}
.gh h4{font-size:var(--rz-t20); font-weight:400; line-height:1.3}
.gp{margin-top:var(--rz-s1); color:var(--rz-muted); font-size:var(--rz-t16); line-height:1.6; max-width:720px}
.prods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--rz-s3); margin-top:var(--rz-s2)}
.prod{padding:var(--rz-s2) 0 var(--rz-s2) var(--rz-s2); border-top:1px solid var(--rz-line); position:relative}
.prod::before{content:""; position:absolute; left:0; top:27px; width:6px; height:6px; background:var(--rz-orange)}
.prod b{display:block; font-size:var(--rz-t16); font-weight:600}
.prod span{display:block; margin-top:4px; font-size:var(--rz-t16); color:var(--rz-muted); line-height:1.5}

/* ---- stats + case: stat tiles are blocks (extruded + lifted) --- */
.stats{margin-top:var(--rz-s4)}
.stat b{display:block; font-size:var(--rz-t32); font-weight:200; line-height:1.1; letter-spacing:-.02em}
.stat span{display:block; margin-top:var(--rz-s1); font-size:var(--rz-t13); color:var(--rz-muted); line-height:1.5}
.case .rz-h2{margin-top:0}

/* ---- timeline ----------------------------------------------- */
.tl{display:grid}
.tl .row{display:grid; grid-template-columns:144px minmax(0,1fr); gap:var(--rz-s3); padding:var(--rz-s3) 0; border-top:1px solid var(--rz-line)}
.tl .row:last-child{border-bottom:1px solid var(--rz-line)}
.tl .yr{
  display:flex; align-items:center; gap:var(--rz-s1); align-self:start; padding-top:5px;
  font-size:var(--rz-t13); letter-spacing:.11em; text-transform:uppercase; color:var(--rz-text);
}
.tl .yr::before{content:""; flex:none; width:18px; height:2px; background:var(--rz-orange)}
.tl h4{font-size:var(--rz-t20); font-weight:400; line-height:1.3}
.tl p{margin-top:var(--rz-s1); color:var(--rz-muted); font-size:var(--rz-t16); line-height:1.6}

/* ---- faq ---------------------------------------------------- */
.faq{border-top:1px solid var(--rz-line)}
.faq details{border-bottom:1px solid var(--rz-line)}
.faq summary{
  cursor:pointer; padding:var(--rz-s2) var(--rz-s4) var(--rz-s2) 0; font-size:var(--rz-t20); font-weight:400; line-height:1.3;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--rz-orange); border-bottom:2px solid var(--rz-orange);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--rz-d-ui) var(--rz-ease-ui);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq p{margin:0 0 var(--rz-s3); color:var(--rz-muted); font-size:var(--rz-t16); line-height:1.65; max-width:760px}

/* ---- guarantee: the feature panel, the one 63px cut per panel - */
.guarantee .rz-h2{max-width:22em}
.guarantee p{margin-top:var(--rz-s2); color:var(--rz-text); font-size:var(--rz-t16); line-height:1.62; max-width:740px}

/* ---- the panel's call to action + the link to its full page --- */
.sxcta{margin-top:var(--rz-s6)}
.sx-more{margin-top:var(--rz-s4)}

/* ---- the founder: his cut-out on Limestone, in a 36px-cut frame,
        inside the Graphite opening band ------------------------- */
.sx-head--split{max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:var(--rz-s6); align-items:end}
.sx-head--split>div>.rz-label{margin-bottom:var(--rz-s3)}
.sx-head--split>div>.rz-lede{margin-top:var(--rz-s2)}
.founder-frame{width:100%}
.founder-ph{background:var(--rz-bg); aspect-ratio:4/4.4; display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.founder-ph img{display:block; width:88%; height:auto}
.founder-frame figcaption{margin-top:var(--rz-s2)}
@media(max-width:900px){
  .sx-head--split{grid-template-columns:minmax(0,1fr); gap:var(--rz-s4)}
  .founder-frame{max-width:320px}
}

/* ============================================================
   5 · RESPONSIVE + FALLBACKS
   ============================================================ */
.ns{max-width:640px; margin:16vh auto; padding:0 24px; text-align:center; color:var(--rz-text)}
.ns a{color:var(--rz-text); text-decoration-color:var(--rz-orange)}

@media(max-width:900px){
  .g3,.g2,.prods,.stats.rz-stat-row--3{grid-template-columns:minmax(0,1fr)}
  .tl .row{grid-template-columns:minmax(0,1fr); gap:var(--rz-s1)}
  .phases li,.steps li{grid-template-columns:54px minmax(0,1fr); gap:var(--rz-s2)}
  .phases h4 em,.steps h4 em{display:block; margin:var(--rz-s1) 0 0; white-space:normal}
  .headline .rz-lede{font-size:var(--rz-t16)}
  .lock-row{grid-template-columns:1fr auto}
  .lock-row i{grid-row:auto; grid-column:1; align-self:start}
  .lock-row em{grid-row:auto}
  .lock-row span{grid-column:1/-1}
  .headline{top:clamp(84px,12vh,120px)}
  .r-col{display:block; width:100%; padding:0 0 14px}
  .r-tbl,.r-tbl tbody,.r-tbl tr{display:block}
}
.cloud.rail{
  position:fixed; inset:auto 0 52px 0; height:auto;
  perspective:none; display:flex; align-items:stretch; gap:var(--rz-s2);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* room below/right for the lifted shadow, which the scroller would clip */
  padding:var(--rz-s2) var(--rz-s2) var(--rz-s3); pointer-events:auto;
  scrollbar-width:none;
}
.cloud.rail::-webkit-scrollbar{display:none}
.cloud.rail .card{
  position:relative; left:auto; top:auto;
  flex:0 0 74vw; max-width:300px; width:auto;
  transform:none!important; z-index:auto!important;
  scroll-snap-align:center;
}
.cloud.rail .card.cta{flex:0 0 62vw; max-width:250px}

@media(max-width:560px){
  .foot{bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* the window between "the fire started" and "the fire is out":
   the room is visible through the holes, the furniture is not */
body.revealing .rz-nav,
body.revealing .headline,
body.revealing .foot{opacity:0}

/* ============================================================
   6 · NO JS — the same document as a plain page
   (search engines read this order: nav, hero, cards, the four
   panels, footer). The stage needs JS, so without it nothing is
   fixed, hidden or waiting on WebGL.
   ============================================================ */
html:not(.js) #world,html:not(.js) .room-light,html:not(.js) .foot{display:none}
html:not(.js) .headline{position:static; padding:var(--rz-s8) var(--rz-gut) var(--rz-s4)}
html:not(.js) .cloud{position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--rz-s2); max-width:1188px; margin:0 auto var(--rz-s8); padding:0 var(--rz-gut); perspective:none}
html:not(.js) .card{position:relative; left:auto; top:auto; width:auto}
html:not(.js) .sx-root{position:static; pointer-events:auto}
html:not(.js) .sx{position:static; opacity:1; transform:none; pointer-events:auto; overflow:visible}
html:not(.js) .sx-in>*{max-width:calc(var(--sx-max) + 2 * var(--rz-gut)); margin-inline:auto; padding:var(--rz-s6) var(--rz-gut) 0}
/* before main.js wires them, the stage cards stay out of sight */
html.js .card{opacity:0}