/* Start page hero (2.0.272): smaller hero text, app name scroller under it, still orange 3D phone on the right (shared/hero-phone.js) */
.rb-hero-apps h1{font-size:clamp(36px,4.6vw,62px)}
.rb-hero-apps .sub{font-size:clamp(16px,1.35vw,18px);max-width:480px}
.rb-hero-apps .trust{font-size:13px}
.rb-hero-apps .in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rb-hero-apps .txt,.rb-hero-apps .stage{min-width:0}
/* app names: one row, about 4-5 in view, soft edges, the row slides in from the left */
.rb-hero-apps .hp-row{display:flex;gap:8px;margin-top:26px;max-width:520px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 82%,transparent 100%)}
.hp-row::-webkit-scrollbar{display:none}
.rb-hero-apps .hp-app{display:inline-block;width:auto;flex:0 0 auto;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(16,14,26,.7);color:#bdb8cc;
  font:600 12px/1 rb-dmsans,'DM Sans',Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  opacity:0;transform:translateX(-40px);transition:color .2s,border-color .2s,background .2s}
.hp-row.hp-go .hp-app{animation:hp-in .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hp-in{to{opacity:1;transform:none}}
.rb-hero-apps .hp-app:hover,.rb-hero-apps .hp-app:focus-visible{color:#fff;border-color:rgba(255,255,255,.4);outline:none}
.rb-hero-apps .hp-app.on{color:#fff;background:#1d1830;border-color:rgba(203,188,255,.55)}
.hp-app.on::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff7a2f;box-shadow:0 0 10px #ff7a2f;vertical-align:1px}
/* the phone (2.0.273): big, like the old showcase card - it fills the right side of the hero and bleeds off the edges */
.rb-hero-apps .in{position:static}.rb-hero-apps .txt{position:relative;z-index:3}
.hp-stage{position:absolute;z-index:2;top:0;right:0;bottom:0;width:64%}
.hp-stage::before{content:'';position:absolute;left:20%;top:10%;width:70%;height:65%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,47,.28),rgba(124,92,255,.16) 55%,transparent);filter:blur(30px)}
.hp-stage.hp-flash::before{animation:hp-glow 1s ease-out}
@keyframes hp-glow{0%{opacity:.4}35%{opacity:1}100%{opacity:1}}
.hp-flat{position:absolute;left:30%;top:6%;width:42%;aspect-ratio:9/19.5;transform:rotate(-14deg);border-radius:13% / 6%;padding:1.6%;
  background:linear-gradient(135deg,#f0b885,#c27238 40%,#7a3c16 70%,#d58d55);box-shadow:0 40px 80px rgba(0,0,0,.6)}
.hp-flat img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:11% / 5.2%;background:#000}
.hp-3d{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s}.hp-3d .iphone-component{min-height:0;height:100%}.hp-3d .iphone-fallback{display:none}
.hp-stage.hp-3d-on .hp-3d{opacity:1}
/* 2.0.274: the flat phone is only a stand-in for browsers without 3D - never shown while the 3D phone loads */
.hp-flat{visibility:hidden}.hp-stage.hp-no3d .hp-flat{visibility:visible}
/* soft dark edge so the text side stays readable */
.hp-stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,var(--bg) 0%,rgba(7,6,12,0) 18%)}.hp-3d .iphone-canvas{cursor:default}
@media (max-width:900px){.rb-hero-apps{flex-direction:column}.rb-hero-apps .in{grid-template-columns:minmax(0,1fr);padding-bottom:0}.hp-stage{position:relative;width:100%;height:520px;top:auto}.hp-row{max-width:none}}
@media (prefers-reduced-motion:reduce){.hp-app{opacity:1;transform:none}.hp-row.hp-go .hp-app{animation:none}.hp-stage.hp-flash::before{animation:none}}
/* 2.0.275: clean dark background with one soft glowing dot behind the phone, like the old showcase card (the photos are only commented out in index.html) */
.rb-hero-apps{background:#0b0b0b}
.rb-hero-apps .ov{background:radial-gradient(38% 50% at 72% 42%,rgba(31,74,51,.55),transparent 70%),radial-gradient(60% 70% at 80% 30%,rgba(124,92,255,.12),transparent 70%)}
.rb-hero-apps .ov:after{background:linear-gradient(transparent,#0b0b0b)}
.hp-stage::after{background:linear-gradient(0deg,#0b0b0b 0%,rgba(11,11,11,0) 18%)}
@media (max-width:900px){.rb-hero-apps .ov{background:radial-gradient(70% 45% at 50% 78%,rgba(31,74,51,.5),transparent 70%)}}
/* 2.0.278: the current app name is 2x bigger and sits in the middle of the row; the other names fade in and out at both edges */
.rb-hero-apps .hp-row{align-items:center;max-width:560px;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%)}
.rb-hero-apps .hp-row::before,.rb-hero-apps .hp-row::after{content:'';flex:0 0 42%}
.rb-hero-apps .hp-row.done .hp-app{animation:none;opacity:1;transform:none}
.rb-hero-apps .hp-row .hp-app.on{font-size:24px;padding:13px 24px;opacity:1;transform:none;animation:hp-grow .45s cubic-bezier(.2,.7,.2,1)}
.rb-hero-apps .hp-app.on::before{width:12px;height:12px;margin-right:12px;vertical-align:2px}
@keyframes hp-grow{from{transform:scale(.6);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rb-hero-apps .hp-row .hp-app.on{animation:none}}
/* 2.0.279: a still picture of the 3D phone in its standard pose (with Shelf Signal) shows at once while the 3D model loads; the live 3D phone fades in on top of it */
.hp-poster{position:absolute;z-index:1;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none;transition:opacity .4s .6s}
.hp-stage.hp-no3d .hp-poster{display:none}
.hp-stage.hp-3d-on .hp-poster{opacity:0}
/* 2.0.279: no green focus square around the phone when it is turned with the arrow keys */
.hp-3d .iphone-canvas:focus,.hp-3d .iphone-canvas:focus-visible{outline:none}
/* 2.0.280: iPhone layout - tighter hero text so the phone shows up straight away, under the app names */
@media (max-width:900px){
  .rb-hero-apps .in{padding-top:92px;gap:0}
  .rb-hero-apps .eb{margin-bottom:12px}
  .rb-hero-apps h1{font-size:clamp(34px,9.5vw,44px)}
  .rb-hero-apps .sub{margin-top:14px;font-size:16px}
  .rb-hero-apps .cta{margin-top:20px}
  .rb-hero-apps .cta .btn{min-height:44px;font-size:15px}
  .rb-hero-apps .trust{margin-top:14px;font-size:12px}
  .rb-hero-apps .hp-row{margin-top:12px}
  .rb-hero-apps .hp-row .hp-app.on{font-size:18px;padding:11px 18px}
  .hp-stage{height:440px;margin-top:-24px}
}
/* 2.0.282: bigger, smoother glow: a wide soft gradient plus a halftone dot layer (canvas .hp-dots from hero-phone.js) */
.rb-hero-apps .ov{background:radial-gradient(62% 80% at 70% 44%,rgba(80,62,190,.34),rgba(31,74,51,.12) 55%,transparent 78%)}
.rb-hero-apps .hp-dots{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@media (max-width:900px){.rb-hero-apps .ov{background:radial-gradient(90% 55% at 50% 78%,rgba(80,62,190,.34),rgba(31,74,51,.12) 55%,transparent 78%)}}
/* 2.0.282: no banding - fine film grain over the glow breaks up the colour steps */
.rb-hero-apps .ov::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 2.0.283: replaces the 2.0.282 dots and grain - one big soft glow behind the phone that slowly moves between purple, green and orange.
   Each colour is its own layer with an eased fade (many colour stops, so no hard rings), and the layers cross-fade with opacity only (smooth, no repaint). */
.rb-hero-apps .ov{background:none}.rb-hero-apps .ov::before{content:none}
.rb-hero-apps .hp-glow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.rb-hero-apps .hp-glow i{position:absolute;left:22%;top:-18%;width:100%;height:130%;opacity:0;will-change:opacity;animation:hp-cycle 18s ease-in-out infinite}
.rb-hero-apps .hp-glow i:nth-child(1){background:radial-gradient(closest-side,rgba(112,82,235,0.420) 0%,rgba(112,82,235,0.310) 19%,rgba(112,82,235,0.227) 34%,rgba(112,82,235,0.160) 47%,rgba(112,82,235,0.117) 56.5%,rgba(112,82,235,0.081) 65%,rgba(112,82,235,0.053) 73%,rgba(112,82,235,0.032) 80.2%,rgba(112,82,235,0.018) 86.1%,rgba(112,82,235,0.009) 91%,rgba(112,82,235,0.003) 95.2%,rgba(112,82,235,0.001) 98.2%,rgba(112,82,235,0.000) 100%);animation-delay:0s}
.rb-hero-apps .hp-glow i:nth-child(2){background:radial-gradient(closest-side,rgba(36,150,118,0.340) 0%,rgba(36,150,118,0.251) 19%,rgba(36,150,118,0.184) 34%,rgba(36,150,118,0.130) 47%,rgba(36,150,118,0.095) 56.5%,rgba(36,150,118,0.066) 65%,rgba(36,150,118,0.043) 73%,rgba(36,150,118,0.026) 80.2%,rgba(36,150,118,0.014) 86.1%,rgba(36,150,118,0.007) 91%,rgba(36,150,118,0.003) 95.2%,rgba(36,150,118,0.001) 98.2%,rgba(36,150,118,0.000) 100%);animation-delay:-6s}
.rb-hero-apps .hp-glow i:nth-child(3){background:radial-gradient(closest-side,rgba(236,112,52,0.300) 0%,rgba(236,112,52,0.221) 19%,rgba(236,112,52,0.162) 34%,rgba(236,112,52,0.115) 47%,rgba(236,112,52,0.083) 56.5%,rgba(236,112,52,0.058) 65%,rgba(236,112,52,0.038) 73%,rgba(236,112,52,0.022) 80.2%,rgba(236,112,52,0.013) 86.1%,rgba(236,112,52,0.006) 91%,rgba(236,112,52,0.002) 95.2%,rgba(236,112,52,0.001) 98.2%,rgba(236,112,52,0.000) 100%);animation-delay:-12s}
@keyframes hp-cycle{0%,100%{opacity:0}16%,34%{opacity:1}50%{opacity:0}}
@media (max-width:900px){.rb-hero-apps .hp-glow i{left:-25%;top:35%;width:150%;height:90%}}
@media (prefers-reduced-motion:reduce){.rb-hero-apps .hp-glow i{animation:none}.rb-hero-apps .hp-glow i:first-child{opacity:1}}
/* 2.0.284: app names now sit right under the subline and the buttons moved to the bottom of the hero text */
.rb-hero-apps .txt .hp-row{margin-top:22px}
.rb-hero-apps .txt .trust{margin-top:18px}
.rb-hero-apps .txt .cta{margin-top:26px}
@media (max-width:900px){.rb-hero-apps .txt .hp-row{margin-top:14px}.rb-hero-apps .txt .trust{margin-top:10px}.rb-hero-apps .txt .cta{margin-top:16px}}
/* 2.0.288: the current app name sits at the left, in line with the hero text; the next names fade out to the right */
.rb-hero-apps .hp-row{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 68%,transparent 100%)}
.rb-hero-apps .hp-row::before{content:none}
.rb-hero-apps .hp-row::after{flex:0 0 80%}

/* 2.0.289: names sit on a sliding track (no scroll), the chosen one always whole at the left; no bounce or slide-in */
.rb-hero-apps .hp-row{display:block;overflow:hidden;padding:4px 0}
.rb-hero-apps .hp-row::before,.rb-hero-apps .hp-row::after{content:none}
.hp-track{position:relative;display:flex;gap:8px;align-items:center;width:max-content;padding:0;transition:transform .6s cubic-bezier(.22,.8,.2,1);will-change:transform}
.rb-hero-apps .hp-app,.rb-hero-apps .hp-row .hp-app,.rb-hero-apps .hp-row .hp-app.on{animation:none;transform:none;opacity:1}
.rb-hero-apps .hp-row.hp-go{animation:hp-fade .5s ease both}
@keyframes hp-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hp-track{transition:none}.rb-hero-apps .hp-row.hp-go{animation:none}}
.rb-hero-apps a.hp-app{text-decoration:none}