/* RALPH feature orbit: "Everything in one place."
   RALPH sits at the centre with the nine features orbiting it; a spotlight card
   tours them. Everything is scoped to .ralph-orbit. Behaviour lives in
   /ralph-orbit.js, which adds .is-ready; without it the features show as a list. */
.ralph-orbit{
  --ro-ink:#142941;
  --ro-title:#183452;
  --ro-text:#536c86;
  --ro-muted:#5a6f87;
  --ro-blue:#2268b8;
  --ro-blue-head:#457aca;
  --ro-ice:#85dcff;
  --ro-line:#dde6f0;
  --ro-line-strong:#c4d8ec;
  --ro-line-hover:#adcce8;
  --ro-tint:#e7f1fb;
  --ro-icon:#2366ad;
  --ro-pill:linear-gradient(110deg,#091f46 0%,#123f85 60%,#387ee5 100%);
  --ro-pill-hover:linear-gradient(110deg,#12336b 0%,#2464c0 65%,#5698f3 100%);
  --ro-pill-border:#173d78;
  --ro-pill-shadow:rgba(15,30,67,.22);
  --ro-outline:#31496c;
  --ro-outline-hover:#eaf1fd;
  --ro-focus:#3e8bd6;
  --ro-shadow:rgba(16,34,74,.08);
  --ro-label-bg:rgba(255,255,255,.9);
  --ro-ring:rgba(34,104,184,.22);
  /* Read by the script for the canvas stars and comets (space-separated RGB). */
  --ro-star:34 104 184;
  /* RALPH's R mark and wordmark */
  --ro-mark-deep:#0a3c80;
  --ro-mark-mid:#1769d2;
  --ro-mark-light:#a8cff6;
  --ro-wordmark:#173a66;
  box-sizing:border-box;
  color:var(--ro-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ralph-orbit *,.ralph-orbit *::before,.ralph-orbit *::after{box-sizing:border-box}
.ralph-orbit .ro-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(16px,2.6vh,28px);
  padding:clamp(22px,3.4vh,40px) clamp(18px,3vw,44px);
  border:1px solid #e0e8f3;
  border-radius:29px;
  background:
    radial-gradient(48% 58% at 42% 60%,rgba(220,232,251,.75),transparent 75%),
    radial-gradient(30% 40% at 5% 4%,rgba(133,220,255,.16),transparent 70%),
    #fff;
  box-shadow:0 1px 2px rgba(16,34,74,.04),0 12px 32px var(--ro-shadow);
  overflow:hidden;
}

/* ---------- Heading ---------- */
.ralph-orbit .ro-intro{text-align:center;display:grid;gap:10px;justify-items:center}
.ralph-orbit .ro-intro h2{
  margin:0;
  font-size:clamp(34px,4.2vw,60px);
  font-weight:650;
  line-height:1.06;
  letter-spacing:-.055em;
  color:var(--ro-ink);
  text-wrap:balance;
}
.ralph-orbit .ro-intro h2 .blue{color:var(--ro-blue-head)}
.ralph-orbit .ro-intro p{margin:0;max-width:46ch;color:var(--ro-muted);font-size:clamp(15px,1.4vw,18px);line-height:1.6}

/* ---------- Without JavaScript: a plain list of the nine features ---------- */
.ralph-orbit .ro-body{display:grid;gap:20px;min-height:0}
.ralph-orbit .ro-stage{position:relative;min-width:0}
.ralph-orbit .ro-stars,.ralph-orbit .ro-ring,.ralph-orbit .ro-beam,.ralph-orbit .ro-hub,.ralph-orbit .ro-spot{display:none}
.ralph-orbit .ro-planets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.ralph-orbit .ro-planet{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 12px;
  align-items:center;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:default;
}
.ralph-orbit .ro-chip{
  grid-row:span 2;
  align-self:start;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ro-icon);
  background:#fff;
  border:1.5px solid var(--ro-line-strong);
  box-shadow:0 6px 22px rgba(145,188,228,.18);
  transition:background .3s,color .3s,box-shadow .3s,border-color .3s;
}
.ralph-orbit .ro-chip svg,.ralph-orbit .ro-spot-icon svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.ralph-orbit .ro-label{font-weight:650;font-size:15px;letter-spacing:-.015em;line-height:1.25;color:var(--ro-title)}
.ralph-orbit .ro-desc{font-size:14px;line-height:1.5;color:var(--ro-text)}

/* ---------- The orbit ---------- */
.ralph-orbit.is-ready .ro-desc{display:none}
.ralph-orbit.is-ready .ro-stage{aspect-ratio:1/1;max-width:100%;touch-action:manipulation}
.ralph-orbit.is-ready .ro-stage.is-wide{aspect-ratio:100/62}
.ralph-orbit.is-ready .ro-stars,.ralph-orbit.is-ready .ro-beam{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ralph-orbit.is-ready .ro-ring{
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  border:1.5px dashed var(--ro-ring);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ralph-orbit.is-ready .ro-ring--outer{border-style:dotted;border-width:2px}
.ralph-orbit .ro-beam line{stroke:url(#ro-beam-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 9;animation:ro-flow 1.1s linear infinite}
@keyframes ro-flow{to{stroke-dashoffset:-11}}
.ralph-orbit.is-paused .ro-beam line{animation-play-state:paused}

/* RALPH at the centre, styled like the planets. */
.ralph-orbit.is-ready .ro-hub{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--ro-hub,150px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:50;
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5%;
  background:#fff;
  border:1.5px solid var(--ro-line-strong);
  box-shadow:0 1px 2px rgba(16,34,74,.04),0 14px 34px var(--ro-shadow);
}
.ralph-orbit .ro-mark{width:30%;height:auto;display:block}
.ralph-orbit .ro-word{
  font-weight:600;
  font-size:calc(var(--ro-hub,150px) * .125);
  letter-spacing:.065em;
  margin-right:-.065em;
  line-height:1;
  color:var(--ro-wordmark);
}

.ralph-orbit.is-ready .ro-planets{display:block}
.ralph-orbit .ro-stage{--ro-chip:44px;--ro-pw:44px}
.ralph-orbit .ro-stage.is-wide{--ro-chip:52px;--ro-pw:150px}
.ralph-orbit.is-ready .ro-planet{
  position:absolute;
  left:0;
  top:0;
  width:var(--ro-pw);
  margin-left:calc(var(--ro-pw) / -2);
  margin-top:calc(var(--ro-chip) / -2);
  transform-origin:50% calc(var(--ro-chip) / 2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  will-change:transform;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ralph-orbit.is-ready .ro-chip{width:var(--ro-chip);height:var(--ro-chip)}
.ralph-orbit.is-ready .ro-label{
  font-weight:600;
  font-size:13px;
  letter-spacing:-.01em;
  padding:3px 9px;
  border-radius:999px;
  background:var(--ro-label-bg);
  max-width:100%;
  text-wrap:balance;
}
/* Small orbits show icons only; the spotlight card names the selected feature. */
.ralph-orbit.is-ready .ro-stage:not(.is-wide) .ro-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}
.ralph-orbit .ro-planet:hover .ro-chip{border-color:var(--ro-line-hover);background:var(--ro-tint)}
.ralph-orbit.is-ready .ro-planet[aria-pressed="true"] .ro-chip{
  background:var(--ro-pill);
  color:#fff;
  border-color:var(--ro-pill-border);
  box-shadow:0 0 0 5px rgba(133,220,255,.35),0 8px 20px var(--ro-pill-shadow);
}
.ralph-orbit.is-ready .ro-planet[aria-pressed="true"] .ro-label{color:var(--ro-blue)}
.ralph-orbit .ro-planet:focus{outline:none}
.ralph-orbit .ro-planet:focus-visible .ro-chip{outline:3px solid var(--ro-focus);outline-offset:3px}

/* ---------- Spotlight card ---------- */
.ralph-orbit.is-ready .ro-spot{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 18px;
  align-items:center;
  align-self:center;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:22px 24px;
  background:#fff;
  border:1px solid var(--ro-line);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(16,34,74,.04),0 12px 32px var(--ro-shadow);
}
.ralph-orbit .ro-spot-icon{
  grid-row:span 2;
  align-self:start;
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:var(--ro-icon);
  background:var(--ro-tint);
}
.ralph-orbit .ro-spot-title{margin:0;font-size:clamp(19px,1.8vw,22px);font-weight:690;letter-spacing:-.025em;line-height:1.2;color:var(--ro-title)}
.ralph-orbit .ro-spot-desc{grid-column:2;margin:2px 0 0;color:var(--ro-text);font-size:16px;line-height:1.55;font-weight:440}
.ralph-orbit .ro-controls{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
/* Pill buttons, matching the site's calls to action. */
.ralph-orbit .ro-btn{
  font:inherit;
  font-weight:700;
  font-size:14px;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  border:1.5px solid var(--ro-outline);
  background:transparent;
  color:var(--ro-ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
  transition:transform .15s,background .15s;
}
.ralph-orbit .ro-btn:hover{background:var(--ro-outline-hover);transform:translateY(-2px)}
.ralph-orbit .ro-btn:focus-visible{outline:3px solid var(--ro-focus);outline-offset:3px}
.ralph-orbit .ro-btn--primary{background:var(--ro-pill);color:#fff;border-color:var(--ro-pill-border);box-shadow:0 8px 20px var(--ro-pill-shadow)}
.ralph-orbit .ro-btn--primary:hover{background:var(--ro-pill-hover)}
.ralph-orbit .ro-btn svg{width:14px;height:14px;fill:currentColor;display:block}
.ralph-orbit .ro-btn--icon{width:48px;padding:0}
.ralph-orbit .ro-btn--icon svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}
.ralph-orbit .ro-count{margin-left:auto;color:var(--ro-muted);font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- Desktop slide: orbit above a centred, compact navigator ---------- */
@media (min-width:751px){
  html body .page > #product.ralph-orbit{padding:clamp(12px,2.5vh,26px)}
}
@media (min-width:1000px){
  html body .page > #product.ralph-orbit .ro-card{height:100%}
  .ralph-orbit.is-ready .ro-body{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    justify-items:center;
    gap:clamp(10px,1.5vh,18px);
  }
  .ralph-orbit.is-ready .ro-stage,.ralph-orbit.is-ready .ro-stage.is-wide{
    aspect-ratio:auto;
    width:min(100%,1100px);
    height:100%;
    min-height:0;
  }
  .ralph-orbit.is-ready .ro-spot{
    grid-template-columns:44px minmax(0,1fr);
    gap:4px 16px;
    max-width:900px;
    padding:14px 22px;
    border-radius:18px;
  }
  .ralph-orbit .ro-spot-icon{grid-row:span 2;margin:0}
  .ralph-orbit .ro-spot-desc{grid-column:2;font-size:clamp(14px,1vw,16px);line-height:1.45}
  .ralph-orbit .ro-controls{grid-column:2;flex-wrap:wrap;gap:8px;margin-top:6px}
  .ralph-orbit .ro-btn{min-height:40px;padding:0 18px;font-size:13px}
  .ralph-orbit .ro-btn--icon{width:40px;padding:0}
}
/* Keep content reachable on short landscape laptop windows instead of clipping it. */
@media (min-width:1000px) and (max-height:680px){
  html body .page > #product.ralph-orbit .ro-card{height:auto;min-height:100%}
  .ralph-orbit.is-ready .ro-stage,.ralph-orbit.is-ready .ro-stage.is-wide{min-height:260px}
}

@media (max-width:750px){
  /* Classic phone page: line up with the neighbouring cards. */
  html body .page > #product.ralph-orbit{margin:0 11px 18px;padding:0}
  .ralph-orbit .ro-card{border-radius:15px;padding:24px 16px 16px}
  .ralph-orbit .ro-intro h2{font-size:clamp(32px,9vw,44px)}
  /* Compact mobile spotlight: no text here exceeds the 15px intro sentence. */
  .ralph-orbit.is-ready .ro-spot{
    grid-template-columns:36px minmax(0,1fr);
    padding:12px 14px;
    gap:6px 18px;
    border-radius:15px;
  }
  .ralph-orbit .ro-spot-icon{
    grid-row:auto;
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .ralph-orbit .ro-spot-title{
    font-size:15px;
    line-height:1.3;
    letter-spacing:-.01em;
  }
  .ralph-orbit .ro-spot-desc{
    grid-column:1/-1;
    display:block;
    min-height:0;
    margin:2px 0 0;
    font-size:14px;
    line-height:1.45;
  }
  /* Keep all three 44px touch targets and the position counter on one row. */
  .ralph-orbit .ro-controls{
    grid-column:1/-1;
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    min-width:0;
    gap:clamp(6px,2vw,10px);
    margin-top:6px;
  }
  .ralph-orbit .ro-controls .ro-btn{
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    gap:0;
  }
  .ralph-orbit .ro-controls .ro-btn svg{width:20px;height:20px}
  .ralph-orbit .ro-play-text{display:none}
  .ralph-orbit .ro-count{margin-left:auto;white-space:nowrap;font-size:clamp(12px,3.5vw,14px)}
}

@media (prefers-reduced-motion:reduce){
  .ralph-orbit .ro-beam line{animation:none}
  .ralph-orbit .ro-btn{transition:none}
  .ralph-orbit .ro-btn:hover{transform:none}
}