/* Demo Center: the wall of live site previews is the hero. The words above it are one headline, one line and two buttons, centered.
   No arrows on buttons, no green. */
.is-dc .dc-head{display:grid;justify-items:center;text-align:center;padding-top:clamp(28px,3.4vw,52px)}
.dc-h1{margin:0;font:700 clamp(2.4rem,5.6vw,5.4rem)/1.02 var(--rb-display);letter-spacing:-.05em;color:#fff}
.dc-l1,.dc-l2{display:block}
.dc-l2{margin-top:.04em;color:#19a4ff}
.dc-l2 .w{background:linear-gradient(95deg,#8fdcff 0%,#19a4ff 55%,#0877ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.dc-h1 .w{display:inline-block;opacity:0;transform:translateY(34px);filter:blur(8px);animation:rb-wordin .85s var(--rb-ease) forwards;animation-delay:calc(var(--i) * .07s + .1s)}
.dc-sub{margin:clamp(16px,2vw,26px) 0 clamp(20px,2.4vw,32px);max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:#cfe0f5}
.dc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.is-dc .rb-stagewrap{margin-top:clamp(28px,3.6vw,52px)}
@media(prefers-reduced-motion:reduce){.dc-h1 .w{animation:none;opacity:1;transform:none;filter:none}}

/* faster, never-empty wall: four repeats per row, loop distance is one repeat */
@keyframes dc-marq{to{transform:translateX(-25%)}}
.is-dc .rb-wall-row{animation-name:dc-marq;animation-duration:30s}
.is-dc .rb-wall-row:nth-child(2){animation-duration:36s;animation-direction:reverse}
.is-dc .rb-wall-row:nth-child(3){animation-duration:42s}
/* automation demo cards: one centered button */
.rb-svc nav{justify-content:center;margin-top:12px}
.rb-svc nav a{padding:13px 30px;font-size:14px}

/* ---------- the spiral: 24 pages on a tight downward helix around a light column, between two glowing rings ---------- */
.dc-spiral{background:linear-gradient(180deg,#0a2a66 0%,#154fae 50%,#0a2a66 100%);padding-bottom:0}
.dc-spiral:not(.is-live) .dc-helix{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:min(1200px,calc(100% - 32px));margin:0 auto;padding-bottom:48px}
.dc-spiral:not(.is-live) .dc-back,.dc-spiral:not(.is-live) .dc-now,.dc-spiral:not(.is-live) .dc-ring,.dc-spiral:not(.is-live) .dc-beam,.dc-spiral:not(.is-live) .dc-glow{display:none}
.dc-spiral .rb-demo-meta em{display:none}
.dc-spiral .rb-demo-meta u{margin-top:6px;text-decoration:none}
.dc-spiral.is-live .dc-runway{height:calc(100vh + var(--n,24) * 17vh);position:relative}
.dc-spiral.is-live .dc-stage{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;perspective:2400px;perspective-origin:66% 48%}
.dc-glow{position:absolute;inset:0;background:radial-gradient(46% 66% at 66% 50%,rgba(70,160,255,.55),rgba(30,100,220,.22) 55%,transparent 80%)}
.dc-beam{position:absolute;left:66%;top:0;bottom:0;width:clamp(120px,16vw,260px);margin-left:calc(clamp(120px,16vw,260px) / -2);background:linear-gradient(90deg,transparent,rgba(150,215,255,.42) 50%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.dc-beam::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(transparent,#d8f0ff 25%,#d8f0ff 75%,transparent);box-shadow:0 0 22px 6px rgba(140,210,255,.7)}
.dc-ring{position:absolute;left:66%;width:min(58vw,820px);height:min(11vw,160px);margin-left:calc(min(58vw,820px) / -2);border-radius:50%;border:2px solid rgba(170,225,255,.85);background:radial-gradient(closest-side,rgba(120,200,255,.55),rgba(60,140,255,.18) 70%,transparent);box-shadow:0 0 50px 8px rgba(100,190,255,.55),inset 0 0 40px rgba(170,225,255,.6)}
.dc-ring-top{top:max(92px,6.4vw)}
.dc-ring-bot{bottom:-5.5vw}
.dc-spiral.is-live .dc-helix{position:absolute;left:66%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;-webkit-mask-image:none}
.dc-spiral.is-live .dc-stage .dc-helix{filter:none}
.dc-spiral.is-live .rb-demo{position:absolute;width:var(--cw,320px);left:calc(var(--cw,320px) / -2);top:calc(var(--cw,320px) * -.31);transform:rotateY(var(--a,0deg)) translateZ(var(--R,520px)) translateY(var(--y,0px));backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--o,1);border-radius:18px;border:0;background:none;box-shadow:none;overflow:visible;transition:filter .3s}
.dc-back{position:absolute;width:var(--cw,320px);aspect-ratio:16/10;left:calc(var(--cw,320px) / -2);top:calc(var(--cw,320px) * -.31);border-radius:18px;transform:rotateY(var(--a,0deg)) translateZ(var(--R,520px)) translateY(var(--y,0px)) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--o,1);pointer-events:none;background:#06152e var(--bi) center top/cover no-repeat;border:1px solid rgba(200,230,255,.28);box-shadow:0 24px 50px rgba(0,10,40,.5);overflow:hidden}
.dc-back::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(3,14,38,.9));}
.dc-spiral.is-live .rb-demo:hover{transform:rotateY(var(--a,0deg)) translateZ(var(--R,520px)) translateY(var(--y,0px));filter:drop-shadow(0 0 22px rgba(25,164,255,.95)) brightness(1.1)}
.dc-spiral.is-live .rb-demo img{aspect-ratio:16/10;border-radius:18px;box-shadow:0 24px 50px rgba(0,10,40,.5);border:1px solid rgba(200,230,255,.28)}
.dc-spiral.is-live .rb-demo-meta{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;border-radius:0 0 18px 18px;background:linear-gradient(transparent,rgba(3,14,38,.9))}
.dc-spiral.is-live .rb-demo-meta b{margin:0;font-size:clamp(.82rem,1.05vw,1rem)}
.dc-spiral.is-live .rb-demo-meta i{margin-bottom:4px;font-size:9px}
.dc-spiral.is-live .rb-demo-meta u{display:inline-block;margin-top:4px;color:#8fdcff;font-size:12px}
.dc-spiral .rb-demo:hover u{color:#fff}
.dc-now{display:none}
.dc-spiral.is-live .dc-now{display:block;position:absolute;left:max(24px,calc((100vw - 1200px)/2));top:50%;transform:translateY(-50%);width:min(320px,26vw);z-index:5}
.dc-now-count{margin:0 0 10px;font:600 .95rem/1 var(--rb-display);letter-spacing:.14em;color:#bfe6ff}
.dc-now-count b{font-size:2.6rem;letter-spacing:-.04em;color:#fff}
.dc-now-kind{margin:0 0 8px;font:700 .72rem/1 var(--rb-display);letter-spacing:.18em;text-transform:uppercase;color:#8fdcff}
.dc-now-title{margin:0 0 10px;font:700 clamp(1.5rem,2.4vw,2.2rem)/1.05 var(--rb-display);letter-spacing:-.03em;color:#fff}
.dc-now-blurb{margin:0 0 18px;font-size:.98rem;line-height:1.5;color:#dbeaff;min-height:4.5em}
.dc-now-step{display:flex;gap:8px;margin-top:14px}
@media(max-width:1000px){
  .dc-spiral:not(.is-live) .dc-helix{grid-template-columns:repeat(2,1fr)}
  .dc-spiral.is-live .dc-stage{perspective-origin:50% 40%}
  .dc-glow{background:radial-gradient(70% 55% at 50% 42%,rgba(70,160,255,.55),transparent 80%)}
  .dc-beam,.dc-ring{left:50%}
  .dc-spiral.is-live .dc-helix{left:50%;top:42%}
  .dc-spiral.is-live .dc-now{left:16px;right:16px;top:auto;bottom:18px;transform:none;width:auto;display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:end;background:linear-gradient(transparent,rgba(8,36,90,.92) 30%);padding-top:26px}
  .dc-now-count{display:none}.dc-now-blurb{display:none}.dc-now-step{grid-column:1/-1}
}
@media(max-width:560px){.dc-spiral:not(.is-live) .dc-helix{grid-template-columns:1fr}}
.dc-back-t{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 14px 12px}
.dc-back-t i{display:block;margin-bottom:4px;font:600 9px/1 var(--rb-display);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#8fdcff}
.dc-back-t b{font:600 clamp(.82rem,1.05vw,1rem)/1.2 var(--rb-display);color:#fff}

/* ===== light, sky-blue spiral page (no heavy navy), kit text effects ===== */
.dc-wave-in{--shape-color:#d8ecff;background:#d8ecff;margin-top:-1px;background-color:#d8ecff}
.dc-spiral{background:linear-gradient(180deg,#d8ecff 0%,#8fc6ff 45%,#3d93ff 100%);color:#0a2250}
.dc-spiral-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:center;padding-bottom:clamp(20px,3vw,40px)}
.dc-big{margin:0;font:700 clamp(7rem,19vw,17rem)/.8 var(--rb-display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:3px #0877ff}
.dc-h2{margin:0 0 14px;font:700 clamp(2.2rem,4.8vw,4.6rem)/1 var(--rb-display);letter-spacing:-.045em;color:#0a2250}
.dc-mark{background:linear-gradient(transparent 60%,#ffffff 60% 92%,transparent 92%);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dc-spiral .rb-label{color:#0a56c9}.dc-spiral .rb-lead{color:#17407f}
.dc-ticker{overflow:hidden;white-space:nowrap;margin:clamp(8px,2vw,24px) 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dc-ticker-track{display:inline-flex;gap:clamp(24px,3vw,48px);animation:dc-tick 40s linear infinite}
.dc-ticker span{font:700 clamp(2rem,5vw,4.2rem)/1 var(--rb-display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #0a56c9;text-transform:uppercase}
.dc-ticker span:nth-child(3n+2){color:#0a56c9;-webkit-text-stroke:0}
@keyframes dc-tick{to{transform:translateX(-50%)}}
.dc-spiral.is-live .dc-stage{background:radial-gradient(60% 60% at 66% 50%,rgba(255,255,255,.55),transparent 75%)}
.dc-beam,.dc-glow{display:none!important}
.dc-back{background-color:#e9f4ff;border-color:rgba(255,255,255,.7);box-shadow:0 20px 44px rgba(10,60,160,.35)}
.dc-back::after{background:linear-gradient(transparent 40%,rgba(10,34,80,.85))}
.dc-spiral.is-live .rb-demo img{box-shadow:0 22px 46px rgba(10,60,160,.4);border-color:rgba(255,255,255,.7)}
.dc-now-count{color:#0a56c9}.dc-now-count b{color:#0a2250;font-size:clamp(3.4rem,6vw,5.6rem);font-weight:700;letter-spacing:-.06em}
.dc-now-kind{color:#0a56c9}
.dc-now-title{color:#0a2250;font-size:clamp(1.8rem,3vw,2.8rem)}
.dc-now-blurb{color:#17407f}
.dc-now-title::after{content:"";display:block;width:64px;height:6px;margin-top:14px;border-radius:3px;background:#fff}
.dc-wave-out{--shape-color:#f2f8ff;background:#f2f8ff;transform:scaleY(-1);margin-bottom:-1px}
.dc-auto{background:#f2f8ff;color:#0a2250}
.dc-auto .rb-label{color:#0a56c9}
.dc-auto .rb-h2{color:#0a2250}.dc-auto .rb-lead{color:#33527f}
.dc-auto .rb-svc article{background:#fff;border:1px solid rgba(10,86,201,.18);box-shadow:0 16px 40px rgba(10,60,160,.12)}
.dc-auto .rb-svc small{color:#0a56c9}.dc-auto .rb-svc h3{color:#0a2250}.dc-auto .rb-svc p{color:#33527f}
.dc-auto .rb-svc nav a.is-solid{background:#0877ff;color:#fff}
@media(max-width:1000px){
  .dc-spiral-head{grid-template-columns:1fr}.dc-big{font-size:clamp(5rem,28vw,9rem)}
  .dc-spiral.is-live .dc-now{background:linear-gradient(transparent,rgba(216,236,255,.95) 35%)}
}
@media(prefers-reduced-motion:reduce){.dc-ticker-track{animation:none}}

/* shape package: wave divider (from design-kit/shapes.css) */
.shape { display: block; width: 100%; height: var(--shape-h, clamp(48px, 7vw, 140px)); background: var(--shape-color, var(--paper)); -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; margin: -1px 0; }
.shape-wave   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C240 120 480 0 720 40s480 80 720 20V120H0z'/%3E%3C/svg%3E"); }
.dc-spiral.is-live .dc-now{width:clamp(170px,16vw,320px)}
.dc-now-title{font-size:clamp(1.6rem,2.4vw,2.8rem)}

/* the info panel: big outlined counter like the 24, progress ticks, hint */
.dc-spiral.is-live .dc-now{width:clamp(170px,17vw,440px)}
.dc-now-count{display:flex;align-items:flex-end;gap:.15em;margin:0 0 12px;line-height:.8}
.dc-now-count b{font-size:clamp(5rem,11vw,12rem);color:transparent;-webkit-text-stroke:3px #0a2250;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.dc-now-count{font-size:clamp(.9rem,1.4vw,1.5rem);color:transparent;-webkit-text-stroke:1.5px #0a56c9;font-weight:700}
.dc-now-kind{display:inline-block;padding:7px 12px;border-radius:999px;background:#fff;color:#0a56c9;margin-bottom:12px}
.dc-now-title{font-size:clamp(1.6rem,3vw,3.6rem)}
.dc-ticks{display:flex;gap:3px;margin:4px 0 14px}
.dc-ticks i{flex:1;max-width:14px;height:22px;border-radius:3px;background:rgba(10,34,80,.18);transition:background .3s,height .3s}
.dc-ticks i.is-on{background:#0a56c9}
.dc-ticks i.is-cur{background:#fff;height:34px;box-shadow:0 0 0 2px #0a2250}
.dc-hint{margin:0;display:flex;align-items:center;gap:10px;font:600 .8rem/1 var(--rb-display);letter-spacing:.14em;text-transform:uppercase;color:#0a2250}
.dc-hint::before{content:"";width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.9);animation:dc-pulse 1.8s ease-out infinite}
@keyframes dc-pulse{to{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@media(max-width:1000px){.dc-ticks,.dc-hint{display:none}.dc-now-count{display:none}}
@media(prefers-reduced-motion:reduce){.dc-hint::before{animation:none}}

.dc-spiral.is-live .dc-now{width:clamp(170px,15vw,340px)}
.dc-now-count b{font-size:clamp(4rem,8vw,9.5rem);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-weight:800;-webkit-text-stroke:2.5px #0a2250;letter-spacing:-.05em}
.dc-now-title{font-size:clamp(1.5rem,2.3vw,3rem)}
.dc-now-blurb{font-size:clamp(.9rem,1.05vw,1.1rem)}
.dc-hint{font-size:.68rem;letter-spacing:.1em}
.dc-ticks i{max-width:10px}
.dc-now-count b,.dc-big,.dc-ticker span{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900}
.dc-now-count b{letter-spacing:-.04em;-webkit-text-stroke:2.5px #0a2250}

.dc-spiral.is-live .rb-demo-meta i,.dc-spiral.is-live .rb-demo-meta u,.dc-back-t i{display:none}

/* intro block, rebuilt: one big headline, one big numeral, no ticker */
.dc-spiral{padding-top:clamp(40px,6vw,96px)}
.dc-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end;padding-bottom:clamp(36px,5vw,72px)}
.dc-intro-h{margin:0;font:700 clamp(2.8rem,7.4vw,7.6rem)/.95 var(--rb-display);letter-spacing:-.055em;color:#0a2250}
.dc-intro-h span{display:block}
.dc-intro-h em{display:block;margin-top:.12em;font-style:normal;color:#fff;text-shadow:0 .04em .5em rgba(10,60,160,.35)}
.dc-intro-side{padding-bottom:.6em}
.dc-intro .dc-big{margin:0;font-size:clamp(6rem,15vw,15rem);line-height:.8;-webkit-text-stroke:3px #0a2250}
.dc-big-cap{margin:12px 0 18px;font:700 clamp(.8rem,1vw,1rem)/1.3 var(--rb-display);letter-spacing:.14em;text-transform:uppercase;color:#0a56c9;max-width:26ch}
.dc-intro-p{margin:0;font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.5;color:#17407f;max-width:34ch}
@media(max-width:900px){.dc-intro{grid-template-columns:1fr;align-items:start}.dc-intro-h{font-size:clamp(2.6rem,12vw,4.4rem)}}

.dc-intro-h{font-size:clamp(2.6rem,6.2vw,6.4rem)}
.dc-intro-h em{white-space:nowrap;color:#0877ff;text-shadow:none}
.dc-intro{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}
.dc-spiral{background:linear-gradient(180deg,#e8f4ff 0%,#8fc6ff 45%,#3d93ff 100%)}
@media(max-width:900px){.dc-intro-h em{white-space:normal}}

@media(max-width:900px){
  .dc-intro{grid-template-columns:1fr!important;align-items:start}
  .dc-intro-h{font-size:clamp(2.4rem,11vw,3.6rem)}
  .dc-intro .dc-big{font-size:clamp(5rem,26vw,8rem)}
  .dc-spiral.is-live .dc-now{left:12px;right:12px;bottom:84px}
}

@media(max-width:1000px){
  .dc-spiral.is-live .dc-now{background:none!important;padding:0!important;bottom:18px!important;display:block!important}
  .dc-now-kind{display:none}
  .dc-now-title{margin:0;font-size:1.5rem;text-shadow:0 0 14px rgba(216,236,255,.95),0 0 4px rgba(216,236,255,.9)}
  .dc-now-title::after{display:none}
}

/* phones: calm speed (about 20px/s) and a tighter wall so it never looks empty */
@media(max-width:900px){
  .is-dc .rb-wall-row{animation-duration:110s}
  .is-dc .rb-wall-row:nth-child(2){animation-duration:130s}
  .is-dc .rb-wall-row:nth-child(3){animation-duration:150s}
  .is-dc .rb-wall{height:clamp(260px,64vw,340px)}
  .is-dc .rb-wall-track{gap:10px;inset:-4% -10%}
  .is-dc .rb-wall-row{gap:10px}
}
@media(prefers-reduced-motion:reduce){.is-dc .rb-wall-row{animation:none}}
@media(max-width:900px){
  .is-dc .rb-wall{height:clamp(340px,84vw,420px)}
  .is-dc .rb-wall-track{inset:0 -10%;transform:rotateX(10deg) rotateZ(-3deg) scale(1.02)}
}

/* phones: each row is a short scroll box driven by JS, only two repeats, flat (no 3D) */
@media(max-width:900px){
  .is-dc .rb-wall.is-js .rb-wall-track{transform:rotateZ(-3deg) scale(1.06);inset:-3% -8%}
  .is-dc .rb-wall.is-js .rb-wall-row{animation:none!important;width:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:none;-webkit-overflow-scrolling:auto}
  .is-dc .rb-wall.is-js .rb-wall-row::-webkit-scrollbar{display:none}
  .is-dc .rb-wall.is-js .rb-wall-row img{flex:0 0 auto}
  .is-dc .rb-wall.is-js .rb-wall-row img:nth-child(n+17){display:none}
}

@media(max-width:900px){.is-dc .rb-wall.is-js .rb-wall-row img{transform:translate3d(var(--f,0px),0,0)}}