/* Elevus site — v2 (2026-10). Same visual language as the v2 App Store screenshots
   ("Look A — Elevation"): light ground, faint teal contour lines, heavy Montserrat
   headlines with the key words in deep teal, the app's dark screens inside dark phones.
   Body text is the system font (SF Pro on Apple devices), as in the app. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: light;
  --bg: #F4F9F8;
  --surface: #FFFFFF;
  --ink: #0E1614;
  --ink-2: #4A5553;
  --ink-3: #7A8583;
  --line: rgba(14, 22, 20, 0.09);
  --teal: #5BBFB5;
  --teal-deep: #2A9D91;
  --teal-wash: #E3F2EF;
  --dark: #0E1614;
  --dark-2: #1A2321;
  --strength: #5E5CE6;
  --cardio: #3FB7EA;
  --functional: #28B84C;
  --stretching: #B04FE6;
  --radius: 28px;
  --gutter: 20px;
  --max: 1160px;
  --head: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--head);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
h1 { font-weight: 800; font-size: clamp(40px, 7.4vw, 76px); }
h2 { font-weight: 800; font-size: clamp(30px, 5vw, 50px); }
h3 { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.mark { color: var(--teal-deep); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 249, 248, 0.82);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links .pill {
  color: #fff; background: var(--ink); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
}
.nav-links .pill:hover { color: #fff; opacity: 0.88; }
@media (max-width: 720px) { .nav-links a:not(.pill) { display: none; } }

/* ---------- App Store button ---------- */
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #000; color: #fff; text-decoration: none;
  padding: 11px 24px 11px 20px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(14, 22, 20, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(14, 22, 20, 0.26); }
.store-btn:active { transform: scale(0.98); }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn small { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.9; }
.store-btn strong { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.store-note { font-size: 14px; color: var(--ink-3); margin-top: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/v2/contours.svg') center top / cover no-repeat;
  opacity: 0.9; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; left: 50%; top: 62%; width: 900px; height: 900px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(91, 191, 181, 0.30) 0%, rgba(91, 191, 181, 0.08) 42%, transparent 68%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 0;
  display: grid; gap: 18px; text-align: center; justify-items: center;
}
.hero h1 { max-width: 12ch; }
.hero-sub { font-size: 16px; max-width: 30em; color: var(--ink-2); margin: 12px auto 20px; }
.hero-visual {
  width: min(87vw, 414px);
  height: min(130vw, 630px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.hero-visual img { width: 100%; }
.br-m { display: inline; }

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr; align-items: center; text-align: left; justify-items: start;
    padding-top: 56px; gap: 40px;
  }
  .hero-sub { margin: 16px 0 26px; font-size: 19px; }
  .hero-visual { width: 458px; height: 720px; justify-self: center; }
  .hero::after { left: 74%; top: 60%; }
  .br-m { display: none; }
}

/* ---------- Pillars ---------- */
.pillars {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 28px var(--gutter) 8px; position: relative; z-index: 1;
}
.pillar {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.pillar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
@media (max-width: 420px) {
  .pillars { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .pillar { font-size: 13px; padding: 6px 10px; gap: 6px; }
  .pillar i { width: 7px; height: 7px; }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head p { margin-top: 14px; font-size: 18px; }

/* ---------- Three apps vs one ---------- */
.compare {
  max-width: 760px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(14, 22, 20, 0.06);
  overflow: hidden;
}
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: none; }
.compare th { font-size: 13px; font-weight: 600; color: var(--ink-3); vertical-align: bottom; line-height: 1.25; }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 20px; color: var(--ink); font-weight: 500; }
.compare .us { background: var(--teal-wash); color: var(--teal-deep); }
.compare th.us { color: var(--teal-deep); font-family: var(--head); font-weight: 800; font-size: 15px; }
.compare svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.yes { color: var(--teal-deep); }
.no { color: #C3CBC9; }
@media (max-width: 520px) {
  .compare table { table-layout: fixed; }
  .compare th:not(:first-child), .compare td:not(:first-child) { width: 48px; }
  .compare th.us, .compare td.us { width: 58px; }
  .compare th, .compare td { padding: 12px 4px; }
  .compare th:first-child, .compare td:first-child { padding-left: 14px; font-size: 14px; }
  .compare th { font-size: 11px; }
}

/* ---------- Feature rows ---------- */
.feature {
  display: grid; gap: 32px; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter);
}
.feature-copy { max-width: 470px; }
.feature-copy p { margin-top: 16px; font-size: 18px; }
.feature-copy .chips { margin-top: 20px; }
.feature-shot { display: flex; justify-content: center; }
.feature-shot img { width: min(84vw, 370px); }
.feature-shot.wide img { width: min(96vw, 480px); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 72px; padding: 72px var(--gutter); }
  .feature.flip .feature-copy { order: 2; }
  .feature-shot img { width: 392px; }
  .feature-shot.wide img { width: 520px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.quote {
  margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--dark); color: #E8EEEC;
  font-size: 15px; line-height: 1.5;
}

/* ---------- Swipe row ---------- */
.rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 24px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail-item {
  flex: 0 0 min(72vw, 270px); scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px 0; overflow: hidden; display: flex; flex-direction: column;
}
.rail-item h3 { font-size: 18px; }
.rail-item p { font-size: 15px; margin-top: 6px; }
.rail-item img { margin: auto auto 0; padding-top: 18px; width: 100%; height: 340px; object-fit: contain; object-position: center bottom; }
/* Desktop: a fixed, centered row of three — no scrolling. Phones keep the swipe row. */
@media (min-width: 760px) {
  .rail { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin: 0 auto; overflow: visible; padding-bottom: 8px; }
  .rail-item { min-width: 0; }
}

/* ---------- Guide card ---------- */
.guide-card {
  display: grid; gap: 20px; align-items: center;
  max-width: 900px; margin: 0 auto; padding: 36px 28px;
  background: var(--dark); color: #C9D3D1; border-radius: var(--radius);
  position: relative; overflow: hidden; text-decoration: none;
}
.guide-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background: url('/assets/v2/contours-cta.svg') center / cover no-repeat;
}
.guide-card > * { position: relative; }
.guide-card h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); }
.guide-card p { font-size: 17px; }
.guide-card .go { color: var(--teal); font-weight: 600; }
.week-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-mini div {
  border-radius: 12px; padding: 10px 2px; text-align: center; font-size: 11px; color: #fff;
  background: rgba(255, 255, 255, 0.07); line-height: 1.3;
}
.week-mini b { display: block; font-size: 12px; color: #9AA6A4; font-weight: 600; margin-bottom: 4px; }
.week-mini .l { box-shadow: inset 0 0 0 1.5px var(--strength); }
.week-mini .r { box-shadow: inset 0 0 0 1.5px var(--cardio); }
@media (min-width: 900px) { .guide-card { grid-template-columns: 1fr 1fr; padding: 48px; gap: 40px; } }
.guide-links { max-width: 900px; margin: 14px auto 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .guide-links { grid-template-columns: repeat(3, 1fr); } }
.guide-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
}
.guide-links b { font-family: var(--head); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.guide-links span { color: var(--teal-deep); font-weight: 700; }

/* ---------- Plans ---------- */
.plans { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.plan.premium { background: var(--dark); color: #C9D3D1; border-color: transparent; }
.plan h3 { font-family: var(--head); font-size: 24px; font-weight: 800; }
.plan.premium h3 { color: #fff; }
.plan ul { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--teal-deep); }
.plan.premium li svg { color: var(--teal); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
  font-family: var(--head); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; font-size: 16px; }
.faq a { color: var(--teal-deep); }

/* ---------- Final CTA ---------- */
.cta { position: relative; overflow: hidden; text-align: center; padding: 96px var(--gutter) 104px; }
.cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/v2/contours-cta.svg') center / cover no-repeat;
}
.cta::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 191, 181, 0.26) 0%, transparent 66%);
}
.cta > * { position: relative; z-index: 1; }
.cta img.icon { width: 88px; height: 88px; border-radius: 20px; margin: 0 auto 24px; box-shadow: 0 18px 40px rgba(14, 22, 20, 0.2); }
.cta h2 { margin-bottom: 28px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 44px 0 120px; font-size: 14px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer h4 { font-family: var(--head); font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer .legal { margin-top: 32px; color: var(--ink-3); font-size: 13px; }
@media (min-width: 900px) { .footer { padding-bottom: 48px; } }

/* ---------- Sticky download bar (phones) ---------- */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: 0 12px 40px rgba(14, 22, 20, 0.18), 0 0 0 1px var(--line);
  transform: translateY(140%); transition: transform 0.28s ease;
}
.sticky-cta.show { transform: none; }
.sticky-cta img { width: 42px; height: 42px; border-radius: 10px; }
.sticky-cta div { flex: 1; line-height: 1.25; }
.sticky-cta b { display: block; font-family: var(--head); color: var(--ink); font-size: 16px; }
.sticky-cta small { font-size: 13px; color: var(--ink-3); }
.sticky-cta a {
  text-decoration: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px;
  padding: 10px 20px; border-radius: 999px;
}
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Article pages (guides, comparisons) ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 40px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.article h1 { font-size: clamp(34px, 6vw, 54px); }
.article .lede { font-size: 19px; margin-top: 18px; color: var(--ink-2); }
.article .meta { font-size: 14px; color: var(--ink-3); margin-top: 14px; }
.article h2 { font-size: clamp(26px, 4vw, 34px); margin: 56px 0 14px; }
.article h3 { margin: 28px 0 8px; }
.article p { margin: 12px 0; }
.article ul, .article ol { margin: 12px 0 12px 22px; }
.article li { margin: 6px 0; }
.article a { color: var(--teal-deep); }
.article strong { color: var(--ink); font-weight: 600; }
.answer {
  margin-top: 28px; padding: 22px 24px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(14, 22, 20, 0.05);
}
.answer p { margin: 0; font-size: 17px; color: var(--ink); }
.table-wrap { overflow-x: auto; margin: 18px 0; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap th, .table-wrap td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { font-size: 13px; color: var(--ink-3); font-weight: 600; background: var(--bg); }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap td:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 520px) { .table-wrap th, .table-wrap td { padding: 10px 10px; font-size: 14px; } }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag.l { background: rgba(94, 92, 230, 0.12); color: #4644C9; }
.tag.r { background: rgba(63, 183, 234, 0.16); color: #1B7FAA; }
.tag.f { background: rgba(40, 184, 76, 0.14); color: #1D8A39; }
.tag.s { background: rgba(176, 79, 230, 0.13); color: #8A33BA; }
.tag.o { background: rgba(14, 22, 20, 0.07); color: var(--ink-2); }
.inline-cta {
  margin: 44px 0; padding: 26px; border-radius: 22px; background: var(--dark); color: #C9D3D1;
  display: grid; gap: 16px;
}
.inline-cta h3 { color: #fff; margin: 0; font-family: var(--head); font-size: 22px; }
.inline-cta p { margin: 0; }
.inline-cta .store-btn { background: #fff; color: #000; justify-self: start; box-shadow: none; }
.refs { font-size: 14px; color: var(--ink-3); }
.refs li { margin: 6px 0; }
.disclaimer { font-size: 13px; color: var(--ink-3); margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .store-btn, .sticky-cta { transition: none; }
}

/* ---------- Related articles + hubs (generated by scripts/site/build.py) ---------- */
.related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 18px; font-size: clamp(24px, 3.5vw, 30px); }
.related-list { display: grid; gap: 12px; }
@media (min-width: 640px) { .related-list { grid-template-columns: 1fr 1fr; } }
.related-list a {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.related-list a:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(14, 22, 20, 0.07); }
.related-list .kind { font-size: 12px; font-weight: 600; color: var(--teal-deep); }
.related-list b { font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.related-list small { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.article.hub { max-width: 920px; }
.hub-section { margin-top: 44px; }
.hub-section h2 { margin: 0 0 16px; }
.author-box { margin-top: 36px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.author-box b { color: var(--ink); }

/* ---------- Free tools (calculators) ---------- */
.tool {
  margin-top: 26px; padding: 22px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(14, 22, 20, 0.06);
}
.tool-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .tool-grid.two { grid-template-columns: 1fr 1fr; } }
.tool-grid.pair { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg); font: 600 20px var(--body); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.field input[type="range"] { width: 100%; accent-color: var(--teal-deep); height: 30px; }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.seg button {
  border: 0; background: transparent; font: 600 15px var(--body); color: var(--ink-2);
  padding: 9px 14px; border-radius: 10px; cursor: pointer; min-height: 40px;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.result {
  margin-top: 20px; padding: 20px 22px; border-radius: 20px; background: var(--dark); color: #C9D3D1;
}
.result .big { font: 700 52px/1.05 var(--body); color: #fff; letter-spacing: -0.02em; }
.result .big small { font-size: 22px; font-weight: 600; color: #9AA6A4; margin-left: 4px; }
.result .cap { font-size: 14px; margin-top: 6px; color: #9AA6A4; }
.result .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.result .stats div { background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 12px 14px; }
.result .stats b { display: block; font: 700 22px var(--body); color: #fff; }
.result .stats span { font-size: 13px; color: #9AA6A4; }
.chips .chip { cursor: pointer; font: 500 14px var(--body); }
.bar-viz { display: flex; align-items: center; height: 120px; margin: 12px 0 6px; }
.bar-viz .sleeve { width: 44px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #C9D3D1, #8A9593); flex: none; }
.bar-viz #pl-plates { display: flex; align-items: center; gap: 3px; height: 100%; }
.bar-viz .plate {
  display: grid; place-items: center; width: 24px; height: var(--h); border-radius: 5px; background: var(--c);
  color: #fff; font: 700 10px var(--body); writing-mode: vertical-rl; transform: rotate(180deg); text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}