/* GoHero v6.1 Results: the visual centrepiece. Glass cards, glow, real before/after charts in SVG, count-up numbers.
   Motion only when JS adds html.rs-anim (never under reduced motion), so the static page always shows the final numbers.
   Animated properties: transform, opacity, stroke-dashoffset (tiny SVG paths). */
.v6-results{position:relative}
.v6-results::before{left:auto!important;right:-30%!important;top:0!important;background:radial-gradient(closest-side,#ffe32c22,#1f7bff26 45%,transparent)!important}
.rs-wrap{display:grid;gap:22px}

/* ---- shared card bits ---- */
.rs-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 18px;font-size:13.5px;color:#a9bbd2}
.rs-lane{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:#32baff14;border:1px solid #32baff33}
.rs-type{font-weight:500;color:#dce6f3}
.rs-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-q{margin:0 0 6px;font-family:var(--font);font-size:16px;line-height:1.45;font-weight:500;letter-spacing:-.01em;color:#eef3fa}
.rs-by{margin:0;font-size:13.5px;color:#8fa3bd}

/* ---- featured result ---- */
.rs-feature{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;padding:40px 40px 36px;border-radius:30px;
  border:1px solid #ffe32c40;background:radial-gradient(70% 90% at 85% 10%,#ffe32c1f,transparent 60%),radial-gradient(60% 80% at 0% 100%,#1f7bff2e,transparent 70%),linear-gradient(160deg,#ffffff14,#ffffff03 50%),#0a1530ee;
  box-shadow:inset 0 1px #ffffff26,0 50px 100px -40px #000,0 0 0 1px #ffe32c14,0 30px 120px -50px #ffe32c55}
.rs-feature::before{content:'';position:absolute;inset:0 22% auto;height:1px;background:linear-gradient(90deg,transparent,#ffe9809e,transparent)}
.rs-f-big{display:flex;align-items:flex-end;gap:16px;margin:0;line-height:.86}
.rs-f-n{display:inline-grid;font-size:clamp(88px,10vw,148px);font-weight:600;letter-spacing:-.06em;color:var(--yellow);text-shadow:0 0 60px #ffe32c55;font-variant-numeric:tabular-nums}
.rs-f-n>span{grid-area:1/1;text-align:right}.rs-ghost{visibility:hidden}
.rs-f-unit{padding-bottom:10px;font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#fff}
.rs-f-from{margin:14px 0 26px;font-size:16px;color:#a9bbd2}
.rs-f-stats{display:flex;gap:12px;margin:0 0 26px}
.rs-f-stats p{margin:0;padding:14px 18px;border-radius:18px;background:#ffffff0a;border:1px solid #bfe3ff1f;box-shadow:inset 0 1px #ffffff14}
.rs-f-stats b{display:block;font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#fff}
.rs-f-stats p>span{display:block;margin-top:4px;font-size:13.5px;color:#a9bbd2}
.rs-f-q{font-size:19px}
.rs-f-chart{position:relative;min-width:0}

/* ---- chart drawing ---- */
.rs-svg{display:block;width:100%;height:auto;overflow:visible}
.rs-grid path{stroke:#bfe3ff17;stroke-width:1;stroke-dasharray:3 6;fill:none}
.rs-line{fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rs-line-f{stroke-width:5}
.rs-end{fill:#fff8c2;stroke:var(--yellow);stroke-width:3}
.rs-start{fill:#0a1530;stroke:#8fa3bd;stroke-width:2.5}
.rs-v{font-family:var(--font);font-size:15px;font-weight:700;text-anchor:middle;fill:#8fa3bd;font-variant-numeric:tabular-nums}
.rs-v-b{fill:var(--yellow);font-size:17px}
.rs-v-f{font-size:26px}
.rs-x{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-anchor:middle;fill:#6f84a3}
.rs-x-b{fill:#cdb94d}
.rs-l{text-anchor:start}.rs-r{text-anchor:end}
.rs-bar{transform-box:fill-box;transform-origin:50% 100%}
.rs-bar-a{fill:#5f7ba3;fill-opacity:.42}
.rs-bar-b{fill:var(--yellow)}
.rs-hbar{transform-box:fill-box;transform-origin:0 50%}
.rs-h1{fill:#32baff;fill-opacity:.2}.rs-h2{fill:#32baff;fill-opacity:.42}.rs-h3{fill:var(--yellow)}
.rs-hl{font-family:var(--font);font-size:14px;font-weight:500;fill:#dce6f3}
.rs-hl-dark{fill:#1a1600}
.rs-hn{font-weight:700;fill:#fff}.rs-hl-dark .rs-hn{fill:#0a101e}

/* ---- the row of results: grid on desktop, swipe on phone ---- */
.rs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;outline:none}
.rs-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:26px;
  border:1px solid var(--glass-line);background:var(--glass),#0a1428d9;box-shadow:var(--lift);color:inherit;text-decoration:none}
.rs-card::before{content:'';position:absolute;inset:0 18% auto;height:1px;background:linear-gradient(90deg,transparent,#8fd6ff88,transparent)}
.rs-card::after{content:'';position:absolute;z-index:-1;width:260px;height:260px;right:-120px;top:-130px;border-radius:50%;background:radial-gradient(closest-side,#ffe32c26,transparent);pointer-events:none}
.rs-big{margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.rs-big .rs-num{font-size:46px;font-weight:600;letter-spacing:-.05em;line-height:1;color:#fff;text-shadow:0 0 34px #ffe32c30}
.rs-unit{font-size:14.5px;color:#a9bbd2;line-height:1.35}
.rs-chart{margin:4px 0 16px}
.rs-chip{align-self:flex-start;margin:0 0 18px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#ffe97a;background:#ffe32c14;border:1px solid #ffe32c33}
.rs-card .rs-q{margin-top:auto}
.rs-card:focus-visible,.rs-row:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
/* "You're next": the one action, as the last tile */
.rs-you{justify-content:flex-start;border-color:#ffe32c4d;background:radial-gradient(90% 70% at 100% 0%,#ffe32c24,transparent 70%),linear-gradient(160deg,#ffffff12,#ffffff03 55%),#0b1630ee;transition:border-color .2s}
.rs-you:hover{border-color:#ffe32c}
.rs-you-t{margin:8px 0 14px;font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1}
.rs-you-s{margin:0 0 22px;font-size:15px;line-height:1.55;color:#b6c5d8}
.rs-you-b{margin-top:auto;justify-content:space-between;width:100%;height:50px;padding:0 16px;font-size:14.5px;white-space:nowrap;gap:8px}
.rs-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin:22px 0 0;font-size:13.5px;color:#8fa3bd}
.rs-swipe{display:none;color:#c8d6e8;font-weight:600}

/* ---- motion (JS adds html.rs-anim when motion is allowed; .in when a card scrolls in) ---- */
.rs-anim [data-rs] .rs-bar{transform:scaleY(.02);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rs-anim [data-rs] .rs-bar-b{transition-delay:.25s}
.rs-anim [data-rs] .rs-hbar{transform:scaleX(.02);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rs-anim [data-rs] .rs-h2{transition-delay:.18s}.rs-anim [data-rs] .rs-h3{transition-delay:.36s}
.rs-anim [data-rs] .rs-line{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1) .1s}
.rs-anim [data-rs] .rs-area,.rs-anim [data-rs] .rs-v,.rs-anim [data-rs] .rs-end,.rs-anim [data-rs] .rs-halo,.rs-anim [data-rs] .rs-hl{opacity:0;transition:opacity .6s ease .9s}
.rs-anim [data-rs] .rs-v-a{transition-delay:.3s}
.rs-anim [data-rs].in .rs-bar,.rs-anim [data-rs].in .rs-hbar{transform:none}
.rs-anim [data-rs].in .rs-line{stroke-dashoffset:0}
.rs-anim [data-rs].in .rs-area,.rs-anim [data-rs].in .rs-v,.rs-anim [data-rs].in .rs-end,.rs-anim [data-rs].in .rs-hl{opacity:1}
.rs-anim [data-rs].in .rs-halo{opacity:1;animation:rs-pulse 2.6s ease-in-out 1.6s infinite}
@keyframes rs-pulse{50%{opacity:.35}}
.rs-halo{transform-box:fill-box;transform-origin:center}

/* ---- tablet / phone ---- */
@media(max-width:1100px){.rs-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .rs-feature{grid-template-columns:1fr;gap:10px;padding:30px 26px 26px}
  .rs-f-chart{order:-1;margin:0 -6px 6px}
}
@media(max-width:700px){
  .rs-wrap{gap:18px}
  .rs-feature{padding:24px 20px 22px;border-radius:26px}
  .rs-f-n{font-size:96px}
  .rs-f-unit{font-size:17px;padding-bottom:8px}
  .rs-f-from{margin:10px 0 18px;font-size:15px}
  .rs-f-stats{margin-bottom:20px}
  .rs-f-stats p{flex:1;padding:12px 14px}
  .rs-f-stats b{font-size:26px}
  .rs-f-q{font-size:17px}
  /* swipeable row, cards peek so it's obviously scrollable */
  .rs-row{display:flex;gap:14px;margin:0 -23px;padding:2px 23px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:23px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .rs-row::-webkit-scrollbar{display:none}
  .rs-card{flex:0 0 82%;scroll-snap-align:start;padding:22px 20px 20px;border-radius:24px}
  .rs-big .rs-num{font-size:42px}
  .rs-foot{margin-top:14px}
  .rs-swipe{display:inline}
}
@media(prefers-reduced-motion:reduce){.rs-halo{animation:none!important}}

/* v6.3 desktop: every card's header stacks the same way (lane chip, then type), so the big numbers line up; a little more air */
@media(min-width:1101px){
  .rs-row{gap:30px 26px}
  .rs-card{padding:30px 28px 28px}
  .rs-card .rs-top{flex-direction:column;align-items:flex-start;gap:10px;min-height:64px}
  .rs-wrap{gap:34px}
}
/* QA pass: a chip never wraps inside a pill. Hug the text; if a narrow card forces 2 lines, it becomes a soft tag, not a stretched capsule */
.rs-chip{width:fit-content;max-width:100%;line-height:1.35;white-space:nowrap;text-wrap:nowrap}
@media(max-width:360px){.rs-chip{white-space:normal;text-wrap:balance;border-radius:10px}}