/* Run-It engine hero: text on the left; on the right the electric Run-It logo with the platform's real cards on a
   tilted ring around it. Scoped to #home .ri-hero, #riEngine and #riParticles. */
#home .ri-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); gap: 8px;
  align-items: center; max-width: 1760px; margin: 0 auto; padding: 0 0 0 clamp(32px, 4vw, 72px); }
#home .ri-hero-copy { text-align: left; }
#home .ri-hero-copy > div:first-child { justify-content: flex-start; }               /* app store badges */
#home .ri-hero-copy h1 { font-size: clamp(42px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -0.02em; }
#home .ri-hero-copy p { margin-left: 0; max-width: 520px; }
/* the headline and its line swap with the engine's answer: fade, lift and blur out, then back in; their
   space is held so the page never jumps */
#home .ri-hero-copy h1.ri-swap { min-height: 3.1em; }
#home .ri-hero-copy p.ri-swap { min-height: 3.4em; }
#home .ri-swap { transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease; }
#home .ri-swap.out { opacity: 0; transform: translateY(-8px); filter: blur(6px); }
/* wide desktop header spans the hero's width: logo on the hero's left edge, Sign up out to the right,
   tabs stay centred on the page */
@media (min-width: 1440px) {
  .header-shell .header-content { max-width: 1760px; padding-left: clamp(32px, 4vw, 72px); padding-right: clamp(32px, 4vw, 72px); }
  .header-shell .header-content > div > nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header-shell .header-content > div:has(> nav) { justify-content: flex-end; }
}

/* desktop: the hero sits inside the header's margins on both sides, close under the header; the copy is
   anchored from the top (so a longer headline only pushes the line below it down) and centred on the engine's
   logo-to-front-card middle; headlines wrap on balanced lines and keep only the space they need */
@media (min-width: 1101px) {
  #home.landing-hero-index { padding-top: 116px; }
  #home .ri-hero { --eng-h: clamp(600px, min(46vw, 100vh - 140px), 820px); grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start; padding-right: clamp(32px, 4vw, 72px); }
  #home .ri-hero-copy { margin-top: calc(var(--eng-h) * 0.5 - 170px); }
  #home .ri-hero-copy h1 { font-size: clamp(40px, 3.9vw, 64px); text-wrap: balance; }
  #home .ri-hero-copy h1.ri-swap { min-height: 0; }
  #home #riEngine { height: var(--eng-h); }
}

#riEngine {
  --eng-edge: rgba(46, 209, 244, 0.16);
  --eng-cyan: #2ed1f4;
  --eng-purple: #a77bf3;
  --eng-green: #3ddc97;
  position: relative;
  height: clamp(760px, 54vw, 900px);
  text-align: left;
}
#riEngine .ri-eng-stage { position: absolute; inset: 0; pointer-events: none; }
/* the headline already says what the engine is showing, so the label under it is hidden */
#riEngine .ri-eng-cards { position: absolute; inset: 0; z-index: 2; }

/* one electric scene over the whole engine: the logo, the line to the front card and that card's edge */
#riEngine .ri-eng-electric-clip { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
#riEngine .ri-eng-electric { position: absolute; inset: -24px; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
#riEngine .ri-eng-electric.ready { opacity: 1; } /* its anchor points sit outside the clip */
#riEngine .ri-eng-electric canvas { position: absolute; inset: 0; }

/* the cards ride the ring (engine.js sets transform, z-index and opacity); each tilts toward the pointer */
#riEngine .ri-eng-card { position: absolute; left: 0; top: 0; width: var(--ri-card-w, 300px); cursor: pointer; perspective: 900px; transform-origin: 50% 50%;
  will-change: transform, opacity; filter: saturate(0.75); transition: filter 1.4s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.8s ease; }
#riEngine .ri-eng-card.on { filter: none; }
/* entrance: hidden until engine.js marks the card in (its frame has drawn) */
#riEngine .ri-eng-card:not(.in) { opacity: 0 !important; }
/* the app's tile look: no border, a thin cyan inner edge and a soft inner glow */
#riEngine .tilt-body { position: relative; border-radius: 16px; background: #0a1020; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(46, 209, 244, 0.16), inset 0 0 26px rgba(46, 209, 244, 0.08), inset 0 -46px 60px -40px rgba(46, 209, 244, 0.22), 0 40px 120px -24px rgba(46, 209, 244, 0);
  transform-style: preserve-3d; will-change: transform; transition: box-shadow 1.4s cubic-bezier(0.45, 0, 0.2, 1); }
/* the selected card glows from inside and lifts on a soft cyan light; no lit edge line. Every state keeps the
   same list of shadows (same kinds, same order), so the glow fades in and out instead of switching */
#riEngine .ri-eng-card.on .tilt-body { box-shadow: inset 0 0 0 1px rgba(46, 209, 244, 0.2), inset 0 0 44px rgba(46, 209, 244, 0.18), inset 0 -64px 84px -40px rgba(46, 209, 244, 0.38), 0 40px 120px -24px rgba(46, 209, 244, 0.5); }
/* the inner light sits above the card's content, which would otherwise cover it */
#riEngine .tilt-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 48px rgba(46, 209, 244, 0.2), inset 0 -72px 90px -40px rgba(46, 209, 244, 0.42); opacity: 0; transition: opacity 1.4s cubic-bezier(0.45, 0, 0.2, 1); }
#riEngine .ri-eng-card.on .tilt-body::after { opacity: 1; }
/* the hover highlight follows the pointer in the app's cyan */
#riEngine .tilt-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(farthest-corner circle at var(--tc-gx, 50%) var(--tc-gy, 50%), rgba(46, 209, 244, calc(var(--tc-glare, 0) * 0.42)) 0%, rgba(46, 209, 244, calc(var(--tc-glare, 0) * 0.22)) 27%, rgba(46, 209, 244, 0) 60%); }
#riEngine .tilt-edge { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; padding: 1px;
  background: radial-gradient(farthest-side circle at var(--tc-gx, 50%) var(--tc-gy, 50%), rgba(150, 235, 255, calc(var(--tc-glare, 0) * 0.9)) 0%, rgba(150, 235, 255, 0) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#riEngine .ri-eng-card-head { font-size: 13px; font-weight: 600; color: #eef3fa; padding: 11px 16px 0; margin: 0; text-align: center; }
#riEngine .ri-eng-card-sub { font-size: 11px; font-weight: 500; color: rgba(238, 243, 250, 0.62); padding: 3px 16px 0; margin: 0; text-align: center; }
#riEngine .ri-eng-card img[data-c] { display: block; width: 100%; height: calc(var(--ri-card-w, 300px) * 0.62); object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* the comfort curve sits in the middle of its card, not low in it (owner 2026-10-27, "it's focused to the bottom"):
   its baked still has more empty room above the curve than below the legend, so it rides up (desktop ring only) */
@media (min-width: 1101px) { #riEngine .ri-eng-card img[data-c="pair"] { transform: translateY(-12%); } }

@media (max-width: 1100px) {
  #home .ri-hero { grid-template-columns: minmax(0, 1fr); padding: 0 16px; max-width: none; }
  #home .ri-hero-copy { text-align: center; }
  #home .ri-hero-copy > div:first-child { justify-content: center; }
  #home .ri-hero-copy p { margin-left: auto; margin-bottom: 24px; }
  #riEngine { height: auto; margin-top: 0; }
  #riEngine .ri-eng-stage { position: relative; height: 230px; }
  #riEngine .ri-eng-cards { position: static; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 4px 14px; }
  #riEngine .ri-eng-card { position: relative; flex: 0 0 290px; width: auto; scroll-snap-align: center; opacity: 0.55; transition: opacity 1.4s cubic-bezier(0.45, 0, 0.2, 1), filter 1.4s cubic-bezier(0.45, 0, 0.2, 1); }
  #riEngine .ri-eng-card.on { opacity: 1; }
  /* the lit card: a crisp cyan edge and a soft inner glow where the line arrives (no outer glow: the
     scrolling row would cut it into a box) */
  #riEngine .ri-eng-card.on .tilt-body { box-shadow: inset 0 0 0 1.5px rgba(46, 209, 244, 0.62), inset 0 0 26px rgba(46, 209, 244, 0.1), inset 0 22px 40px -28px rgba(46, 209, 244, 0.3), 0 0 0 0 rgba(46, 209, 244, 0); }
  /* the line runs down into the row, so the electric layer spans the whole engine; its glow may spill into the
     page gutter and fades out under the row before the hero's own edge cuts it */
  #riEngine .ri-eng-electric-clip { inset: -16px -16px 0; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
}
/* phones: no electric logo at all (owner 2026-10-27: "on mobile i would HIDE the electric logo thing"), just the
   card row under the copy; display:none also stops its render loop (the logo's IntersectionObserver) */
@media (max-width: 600px) {
  #riEngine .ri-eng-stage, #riEngine .ri-eng-electric-clip { display: none; }
  #riEngine { margin-top: 18px; }
}
/* phones and tablets: the headline sits at the bottom of the room engine.js holds for it (the spare room goes above it) */
@media (max-width: 1100px) {
  #home .ri-hero-copy h1.ri-swap { display: flex; flex-direction: column; justify-content: flex-end; }
}
/* the looping row's copies (engine.js) are for phones; the desktop ring uses the eight originals */
@media (min-width: 1101px) {
  #riEngine .ri-eng-copy { display: none; }
}

/* drawn shoes in particles behind "Built from real runs", on a soft cyan glow (after React Bits Pro's Particle Morph) */
.ri-particles-section { position: relative; }
.ri-particles-section > .content-wrapper { position: relative; z-index: 1; }
#riShoeMorph { position: absolute; left: 50%; top: 50%; width: min(1000px, 96vw); aspect-ratio: 1.58; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
#riShoeMorph::before { content: ""; position: absolute; inset: 8% 14%; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(closest-side, rgba(46, 209, 244, 0.3), rgba(46, 209, 244, 0.1) 55%, transparent 100%); }
/* the drifting dots may leave the section's box: clip sideways only, never top or bottom */
section:has(.why-different-tour-wrap), .why-different-tour-wrap { overflow-x: clip !important; overflow-y: visible !important; }
/* phones and tablets: the shoe sits above the copy instead of behind it; its moving glow replaces the fixed one */
@media (max-width: 1023px) {
  .why-different-tour-wrap .ri-particles-section { flex-direction: column; align-items: center; }
  #riShoeMorph { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 640px; margin: 0 auto 12px; }
  #riShoeMorph::before { display: none; }
}
/* phones: the shoe sits close under the hero's card row and close above "Why Run-It" (owner 2026-10-27: "spacing
   on mobile is a bit too much") */
@media (max-width: 600px) {
  section:has(.why-different-tour-wrap) { padding-top: 24px !important; }
  .why-different-tour-wrap .ri-particles-section { padding-top: 0 !important; }
  #riShoeMorph { margin-bottom: 0; }
}
/* phones and tablets: the soft cyan glow sits behind the copy, not the shoe, like desktop (owner 2026-10-27) */
@media (max-width: 1023px) {
  .ri-particles-section .cyan-blur-bg, #riShoeMorph .ri-morph-glow { display: none; }
  .ri-particles-section > .content-wrapper::before { content: ""; position: absolute; inset: -8% -10%; z-index: -1; border-radius: 50%;
    pointer-events: none; filter: blur(40px); background: radial-gradient(closest-side, rgba(46, 209, 244, 0.3), rgba(46, 209, 244, 0.11) 55%, transparent 100%); }
}
/* desktop: plain drawn shoe on the left, the copy on the right; no glow behind it */
@media (min-width: 1024px) {
  .why-different-tour-wrap .ri-particles-section { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); align-items: center;
    gap: 40px; max-width: 1520px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  /* no cyan glow inside the shoe, even when the page loaded at phone width and was widened (owner 2026-10-27) */
  .ri-particles-section .cyan-blur-bg, #riShoeMorph::before, #riShoeMorph .ri-morph-glow { display: none; }

  #riShoeMorph { position: relative; left: auto; top: auto; transform: none; width: 118%; margin-left: -14%; }
  .ri-particles-section > .content-wrapper { margin: 0 !important; max-width: 560px !important; text-align: left; }
  .ri-particles-section > .content-wrapper p, .ri-particles-section > .content-wrapper a { margin-left: 0; margin-right: 0; }
  /* the soft cyan glow behind the copy, not the shoe (owner 2026-10-27) */
  .ri-particles-section > .content-wrapper::before { content: ""; position: absolute; inset: -18% -22% -18% -26%; z-index: -1; border-radius: 50%;
    pointer-events: none; filter: blur(40px); background: radial-gradient(closest-side, rgba(46, 209, 244, 0.3), rgba(46, 209, 244, 0.11) 55%, transparent 100%); }
}

/* hero answers are drawn over the page's own h1/line (engine.js showText): the DOM text never changes for search engines */
#home .ri-hero-copy .ri-swap.ri-alt > .ri-default { display: none; }
#home .ri-hero-copy .ri-swap.ri-alt::after { content: attr(data-alt); }