/* Dark theme (Auros direction, Redrock palette). Loaded after site.css on every route except /signal.
   Every rule is scoped to .rr-dark, the wrapper +layout.svelte adds, so /signal keeps the light theme.
   The site.css tokens are remapped for a dark canvas; the rules below fix the places where a token
   is used as a background on one element and as text on another. */
html:has(.rr-dark),body:has(.rr-dark){background:#1F0707}

.rr-dark{
  /* dark tokens */
  --bg:#1F0707; --bg-deep:#170404; --surface-on:#410103; --surface-on-hover:#520206; --ox-core:#6E0408;
  --ink:#FFF4F3; --ink-dark:#2B0D0D; --stat:#F5EBEA;
  --line:rgba(255,244,243,.12); --line-strong:rgba(255,244,243,.28);
  --grad:linear-gradient(90deg,#AD6E67 0%,#F5EBEA 100%);
  --grad-hover:linear-gradient(90deg,#CA9D97 0%,#FFF4F3 100%);
  /* site.css tokens, remapped */
  --white:#FFF4F3; --basalt:#FFF4F3; --oxblood:#E0A9A2;
  --graphite:#CDBDBB; --pewter:#A8938F; --cloud:#170404;
  --mist:rgba(255,244,243,.12); --ash:rgba(255,244,243,.3);
  --ox-100:#3A0E0E;
  --f-head:"Tomorrow",system-ui,sans-serif;
  --radius:16px;
  --sec:clamp(56px,8vw,128px);
  color-scheme:dark;
  background:var(--bg);
  color:var(--ink);
}

/* ---------- type: Tomorrow headings (brand), Inter body ---------- */
.rr-dark .display,.rr-dark .h1,.rr-dark .h2{text-wrap:balance}
.rr-dark .display,.rr-dark .h1{letter-spacing:-.012em;line-height:1}
.rr-dark .h2{letter-spacing:-.012em;line-height:1.05}
.rr-dark .h3{letter-spacing:0;line-height:1.25}
.rr-dark .label{font:500 12px/1.2 var(--f-body);letter-spacing:.2em;color:var(--oxblood)}
.rr-dark .lrule::after{height:1px;width:48px;background:var(--grad)}
.rr-dark .card .num,.rr-dark .tb-stat .num,.rr-dark .giant{color:var(--stat);letter-spacing:-.04em}
.rr-dark .bignum{color:var(--oxblood)}
.rr-dark .card.on .bignum{-webkit-text-stroke:4px var(--bg)}

/* ---------- logo: the header and small marks use the light artwork (redrock-*-light, made from the
   brand files: oxblood becomes rose, basalt becomes white). The footer shows the full-colour lockup
   on a soft, semi-transparent white panel. ---------- */
.rr-dark .foot-brand img{
  height:84px;width:auto;padding:14px 22px;border-radius:14px;
  background:radial-gradient(ellipse 75% 85% at 50% 50%,rgba(255,255,255,.96) 55%,rgba(255,255,255,.82) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 12px 48px rgba(255,244,243,.14);
}
@media (max-width:620px){.rr-dark .foot-brand img{height:68px;padding:12px 18px}}

/* ---------- buttons: gradient primary, outline secondary ---------- */
.rr-dark .btn{border-radius:6px;font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.rr-dark .btn-pill,.rr-dark .btn-pillbtn,.rr-dark .btn-ox,.rr-dark .btn-dark,.rr-dark .pill .cta,.rr-dark .mnav li>a.btn-pill,.rr-dark .card.on .btn-ghost{
  background:var(--grad);color:var(--ink-dark);border:0;border-radius:6px}
.rr-dark .btn-pill:hover,.rr-dark .btn-pillbtn:hover,.rr-dark .btn-ox:hover,.rr-dark .btn-dark:hover,.rr-dark .pill .cta:hover,.rr-dark .mnav li>a.btn-pill:hover,.rr-dark .card.on .btn-ghost:hover{
  background:var(--grad-hover);color:var(--ink-dark)}
.rr-dark .btn-ghost,.rr-dark .btn-line{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.rr-dark .btn-ghost:hover,.rr-dark .btn-line:hover{background:rgba(255,244,243,.06);border-color:var(--ink);color:var(--ink)}
.rr-dark .textlink{border-bottom-color:var(--line-strong)}
.rr-dark .textlink:hover{color:var(--ink);border-color:var(--oxblood)}

/* ---------- header, mega menu, footer ---------- */
.rr-dark .util{border-bottom-color:var(--line);background:var(--bg-deep)}
.rr-dark .site-head{background:rgba(31,7,7,.86);border-bottom-color:var(--line)}
.rr-dark .site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.rr-dark .mnav li>a,.rr-dark .mtrig{color:var(--graphite)}
.rr-dark .mnav li>a:hover,.rr-dark .mtrig:hover,.rr-dark .mtrig[aria-expanded="true"],.rr-dark .mnav [aria-current]{color:var(--ink)}
.rr-dark .mega{background:var(--bg-deep);border-bottom-color:var(--line);box-shadow:0 1px 0 var(--line)}
.rr-dark .mega-card{background:var(--bg);border:1px solid var(--line)}
.rr-dark .mega-card:hover{background:#2A0B0B}
.rr-dark .mega-card.on{background:var(--surface-on);border-color:transparent}
.rr-dark .mega-card.on:hover{background:var(--surface-on-hover)}
.rr-dark .mega-card.on .label,.rr-dark .mega-card.on .md,.rr-dark .mega-card.on .more{color:var(--ink)}
.rr-dark .menu-btn{background:transparent;border:1px solid var(--line-strong)}
.rr-dark .pill{background:var(--bg-deep)}
.rr-dark .pill a:hover{background:var(--mist)}
@media (max-width:860px){
  .rr-dark .mnav{background:var(--bg-deep);border-bottom-color:var(--line)}
}
.rr-dark .site-foot{background:var(--bg-deep);border-top:1px solid var(--line);margin-top:var(--sec);padding-top:clamp(56px,6vw,96px)}
.rr-dark .foot-bar{border-top-color:var(--line)}

/* ---------- surfaces ---------- */
.rr-dark .card,.rr-dark .tile,.rr-dark .help-card,.rr-dark .sample-step,.rr-dark .baseband{background:var(--bg-deep);border:1px solid rgba(255,244,243,.08)}
.rr-dark .tile:hover{background:#200606}
.rr-dark .card.on,.rr-dark .tile.on{background:var(--surface-on);border-color:transparent;color:var(--ink)}
.rr-dark .card.on .num,.rr-dark .card.on .desc,.rr-dark .card.on .h3,.rr-dark .tile.on .price,.rr-dark .tile.on .h3{color:var(--ink)}
.rr-dark .card.on .label,.rr-dark .tile.on .label,.rr-dark .tile.on .meta,.rr-dark .card.on .src,.rr-dark .card.on .body,.rr-dark .card.on .role{color:#E5CDCA}
.rr-dark .tile.on ul{color:#E5CDCA}
.rr-dark .tile.on li{border-color:rgba(255,244,243,.16)}
.rr-dark .tile.on li::before{background:var(--stat)}
.rr-dark .card.on hr{border-color:rgba(255,244,243,.2)}
.rr-dark .hc-col.hello h3{background:var(--surface-on);color:var(--ink)}
.rr-dark .tag{background:rgba(255,244,243,.08);color:var(--ink)}
.rr-dark .tag.red{background:var(--ox-100);color:var(--oxblood)}
.rr-dark .avatar{background:var(--bg)}
.rr-dark .timeline .node{background:var(--bg)}
.rr-dark .timeline .step.on .node{background:var(--oxblood);border-color:var(--oxblood)}
.rr-dark .sample-receive{background:var(--bg)}
.rr-dark .ph-block,.rr-dark .confirm{background:transparent}
.rr-dark .wchip{border-color:var(--line-strong)}
.rr-dark .story-art{background:var(--bg-deep)}
.rr-dark .eblock .art.card[class*="img-"],.rr-dark .card.story,.rr-dark .card.story .story-art{background:var(--bg-deep)}
.rr-dark .cta-panel{border:1px solid var(--line);background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(173,110,103,.26) 0%,rgba(110,4,8,.3) 45%,rgba(23,4,4,0) 80%),var(--bg-deep)}
.rr-dark .help{border-top-color:var(--line)}

/* ---------- forms ---------- */
.rr-dark .field input,.rr-dark .field select,.rr-dark .field textarea{background:var(--bg-deep);border-color:var(--line-strong);color:var(--ink);border-radius:6px}
.rr-dark .field input:focus,.rr-dark .field select:focus,.rr-dark .field textarea:focus{border-color:var(--oxblood)}

/* ---------- offerings carousel ---------- */
.rr-dark .oc-slide{background:var(--bg-deep);border:1px solid rgba(255,244,243,.08)}
.rr-dark .oc-slide.on{background:var(--surface-on);color:var(--ink)}
.rr-dark .oc-slide.on .oc-num{color:var(--stat)}
.rr-dark .oc-slide.on .oc-body,.rr-dark .oc-slide.on .label{color:#E5CDCA}
.rr-dark .oc-slide.on .textlink{color:var(--ink);border-color:var(--line-strong)}
.rr-dark .oc-tab i{background:var(--grad)}
.rr-dark .oc-btn{background:transparent;border:1px solid var(--line-strong)}

/* ---------- inner page heroes: a soft glow behind the heading ---------- */
.rr-dark .page-hero2{background:radial-gradient(ellipse 55% 75% at 90% 0%,rgba(110,4,8,.38) 0%,rgba(31,7,7,0) 70%)}

/* ---------- home hero: centred copy over a glow and the binary sphere ---------- */
/* The whole globe sits inside the hero, below the copy. --globe-r is its radius (hero-sphere.js uses the
   same numbers) and the bottom padding reserves room for it. The hero clips only sideways, and the
   sections after it sit one layer above it. */
.rr-dark .hero-c.hero-bg{
  position:relative;z-index:0;overflow-x:clip;overflow-y:visible;isolation:isolate;
  background:var(--bg);background-image:none;
  --globe-r:min(19vw,270px);
  min-height:0;
  justify-content:flex-start;text-align:center;
  padding:clamp(64px,8vw,128px) var(--pad) calc(var(--globe-r) * 2.1 + 72px);
}
.rr-dark main>:not(.hero-c){position:relative;z-index:1}
.rr-dark .hero-c.hero-bg::before,.rr-dark .hero-c.hero-bg::after{
  content:"";position:absolute;z-index:-2;border-radius:50%;pointer-events:none;filter:blur(24px);
  background-repeat:no-repeat;background-size:auto;background-position:0 0;
}
.rr-dark .hero-c.hero-bg::after{
  left:15%;right:auto;top:45%;bottom:auto;width:70%;height:85%;
  background-image:radial-gradient(closest-side,rgba(173,110,103,.45) 0%,rgba(110,4,8,.35) 45%,rgba(31,7,7,0) 100%);
  animation:rr-drift-a 22s ease-in-out infinite alternate;
}
.rr-dark .hero-c.hero-bg::before{
  left:-15%;top:4%;width:55%;height:70%;
  background-image:radial-gradient(closest-side,rgba(110,4,8,.4) 0%,rgba(65,1,3,.25) 50%,rgba(31,7,7,0) 100%);
  animation:rr-drift-b 28s ease-in-out infinite alternate;
}
@keyframes rr-drift-a{0%{transform:translate(-8%,4%) scale(1)}50%{transform:translate(6%,-3%) scale(1.12)}100%{transform:translate(-2%,-6%) scale(.96)}}
@keyframes rr-drift-b{0%{transform:translate(10%,-4%) scale(1.05)}50%{transform:translate(-6%,5%) scale(.92)}100%{transform:translate(4%,8%) scale(1.1)}}
.rr-dark .hero-sphere{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.rr-dark .hero-bg>.wrap{display:block;position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:0}
.rr-dark .hero-c .hero-text{
  background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;
  width:auto;max-width:1080px;margin:0 auto;padding:0;
  display:flex;flex-direction:column;align-items:center;
}
.rr-dark .hero-c .hero-text::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:120%;height:130%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(31,7,7,.75) 0%,rgba(31,7,7,0) 100%);pointer-events:none;
}
.rr-dark .hero-c .hero-text .label{color:#E5CDCA}
.rr-dark .hero-c .hero-text .home-h1{font-size:clamp(36px,4.8vw,76px);line-height:1;letter-spacing:-.012em;max-width:17em;margin:20px auto 0}
.rr-dark .hero-c .hero-text .lede{max-width:38em;margin:22px auto 0;color:#E5CDCA}
.rr-dark .hero-c .ctas{justify-content:center;margin-top:28px}
@media (max-width:768px){
  .rr-dark .hero-c.hero-bg{--globe-r:36vw;padding-top:clamp(40px,10vw,64px)}
  .rr-dark .hero-c .hero-text .home-h1{font-size:clamp(34px,9.4vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  .rr-dark .hero-c.hero-bg::before,.rr-dark .hero-c.hero-bg::after{animation:none}
}

/* ---------- phones: cards size to their content ---------- */
@media (max-width:620px){
  .rr-dark .card{min-height:0}
  .rr-dark .card .fill{min-height:16px}
  .rr-dark .numbered{--bn:60px}
}
.rr-dark .foot-col a,.rr-dark .foot-col span{overflow-wrap:anywhere}

/* Text cards that open with an empty spacer (home "How we think about AI"): pin the copy to the top so
   titles line up across the row, and turn the spacer into a short accent line instead of dead space. */
.rr-dark .card:not(.on):has(> .fill:first-child + .h3){min-height:0;justify-content:flex-start}
.rr-dark .card:not(.on):has(> .fill:first-child + .h3)>.fill:first-child{flex:0 0 auto;min-height:0;height:1px;width:48px;margin-bottom:28px;background:var(--grad)}
/* Numbered step cards: same fix, copy starts at the top so titles line up; the numeral stays on the bottom edge. */
.rr-dark .numbered .card>.fill{flex:0 0 0;min-height:0}

/* ---------- glass cards: frosted, raised, with a lit bevel edge ----------
   Layers, top to bottom: a soft sheen from the top-left corner, a translucent body that darkens toward
   the bottom, a bright top and left bevel, a dark bottom bevel, and a deep drop shadow with an oxblood
   cast, so each card reads as a pane of glass lifted off the page. */
.rr-dark{
  --glass:
    radial-gradient(120% 70% at 0% 0%,rgba(255,244,243,.16) 0%,rgba(255,244,243,0) 55%),
    linear-gradient(160deg,rgba(255,244,243,.10) 0%,rgba(255,244,243,.035) 35%,rgba(23,4,4,.5) 100%);
  --glass-on:
    radial-gradient(120% 70% at 0% 0%,rgba(255,226,222,.28) 0%,rgba(255,226,222,0) 55%),
    linear-gradient(160deg,rgba(224,169,162,.30) 0%,rgba(110,4,8,.48) 45%,rgba(65,1,3,.78) 100%);
  --glass-edge:rgba(255,244,243,.22);
  --glass-edge-top:rgba(255,244,243,.5);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 -18px 32px -18px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.4),
    0 28px 56px -18px rgba(0,0,0,.85),
    0 14px 40px -14px rgba(110,4,8,.45);
}
.rr-dark :is(.card,.tile,.help-card,.sample-step,.baseband,.oc-slide,.mega-card){
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-top);
  box-shadow:var(--glass-shadow);
}
.rr-dark :is(.card.on,.tile.on,.mega-card.on,.oc-slide.on){
  background:var(--glass-on);border-color:rgba(224,169,162,.4);border-top-color:rgba(255,226,222,.65);
}
.rr-dark :is(.tile,.mega-card):hover{filter:brightness(1.12)}
.rr-dark .cta-panel{
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(173,110,103,.22) 0%,rgba(110,4,8,.26) 45%,rgba(23,4,4,0) 80%),var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-top);box-shadow:var(--glass-shadow);
}

/* Form fields: recessed glass wells set into the card. */
.rr-dark .field input,.rr-dark .field select,.rr-dark .field textarea{
  background:linear-gradient(180deg,rgba(8,1,1,.55) 0%,rgba(23,4,4,.35) 100%);
  border:1px solid rgba(255,244,243,.16);border-bottom-color:rgba(255,244,243,.3);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s,box-shadow .2s;
}
.rr-dark .field input:focus,.rr-dark .field select:focus,.rr-dark .field textarea:focus{
  border-color:rgba(224,169,162,.75);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(224,169,162,.18);
}
.rr-dark .field select option{background:#1F0707;color:#FFF4F3}

/* Home "20+ yrs" card: a dot field and an oxblood glow in the top right, with the figure at the bottom. */
.rr-dark .tb-stat{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(240px,24vw,340px);justify-content:flex-end}
.rr-dark .tb-stat>*{position:relative;z-index:1}
.rr-dark .tb-stat::before,.rr-dark .tb-stat::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%}
.rr-dark .tb-stat::before{
  right:-60px;top:-80px;width:clamp(280px,34vw,480px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(202,157,151,.95) 1.1px,rgba(202,157,151,0) 1.7px) 0 0/11px 11px;
  -webkit-mask-image:radial-gradient(circle at 45% 45%,#000 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 70%);
  mask-image:radial-gradient(circle at 45% 45%,#000 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 70%);
}
.rr-dark .tb-stat::after{
  right:clamp(20px,6vw,90px);top:clamp(10px,3vw,40px);width:clamp(180px,20vw,280px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(110,4,8,.6) 0%,rgba(110,4,8,0) 70%);
}
.rr-dark .tb-stat .num{margin-top:auto}