/* Jevlit landing page — built from Figma file HqR8U8EtLVhMcvxPl6iC71, frame 1:2 (1512 × 5210). */

:root {
  --color-ink: #241f1f;
  --color-accent: #e95225;
  --color-white: #fff;
  --color-black: #000;
  --color-placeholder: #d6d6d6;
  --color-placeholder-dark: #7a7a7a;
  --color-text-muted: #535353;
  --color-text-soft: #363636;
  --color-text-on-dark: #c2c2c2;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /*
   * Page scale. The whole page renders at 70%, the same as 70% browser zoom.
   * `zoom` also scales vw, so use --vw (a vw that ignores the zoom) for
   * anything viewport-relative. Media queries see the real viewport, so the
   * breakpoints below are given as the design width each one stands for.
   */
  --zoom: 0.7;
  zoom: var(--zoom);
  --vw: calc(1vw / var(--zoom));

  /*
   * Wide-screen scaling. Every viewport pixel past 1180 design px is split:
   * 6.8% goes to each side bar (the empty margin that letterboxes the page so
   * it never runs edge to edge), and half of what's left feeds --grow, which
   * sizes scale with:
   *   --dp       half-rate  — type, spacing, heights (1px → ~1.33px)
   *   --dp-full  full-rate  — things that should mostly get wider (chart, bars)
   *   --dp-soft  quarter-rate — controls (buttons, nav) so they stay compact
   * The Figma frame is 1512px wide; at or below that every "design pixel" is
   * exactly 1px, and past it the page is 1512px + 2 × --grow of design width.
   */
  --bar: clamp(0px, (100 * var(--vw) - 1180px) * 0.068, 100px);
  --grow: clamp(0px, (100 * var(--vw) - 2 * var(--bar) - 1512px) / 2, 500px);
  --dp: calc(1px + var(--grow) / 1512);
  --dp-full: calc(1px + var(--grow) / 756);
  --dp-soft: calc(1px + var(--grow) / 3024);

  --page-max: 2400px;
  --gutter: calc(32 * var(--dp) + var(--bar));
  --section-gap: calc(30 * var(--dp));
  --radius-section: calc(32 * var(--dp));
  --radius-card: calc(14 * var(--dp));
  --radius-button: 5px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  padding: var(--section-gap) 0;
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

.container {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

main > * + *,
main + .footer {
  margin-top: var(--section-gap);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: calc(52 * var(--dp-soft));
  min-width: calc(206 * var(--dp-soft));
  padding: 0 calc(24 * var(--dp-soft));
  border-radius: var(--radius-button);
  font: 500 calc(22 * var(--dp-soft))/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn:focus-visible,
.nav-links a:focus-visible,
.carousel-arrow:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.btn--light { background: var(--color-white); color: var(--color-black); }
.btn--light:hover { background: #ececec; }

.btn--dark { background: var(--color-black); color: var(--color-white); }
.btn--dark:hover { background: #2e2e2e; }

.btn--accent { background: var(--color-accent); color: var(--color-white); }
.btn--accent:hover { background: #d4461c; }

.btn--sharp { border-radius: 3px; }

.btn--link {
  min-width: 0;
  padding: 0 calc(22 * var(--dp-soft));
  background: none;
  color: var(--color-white);
}
.btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn--link-dark { color: var(--color-black); }
.hero-intro .btn--link-dark { color: var(--color-ink); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.actions--center { justify-content: center; }

/* ---------- Sticky navigation ---------- */

.nav {
  position: sticky;
  top: 22px;
  z-index: 50;
  display: grid;
  /* Equal side tracks and equal padding keep the links on the bar's true center. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: min(var(--page-max) - 40px, 100% - var(--gutter) * 2 - 40px);
  height: 82px;
  /* Overlaps the top of the hero: 22px offset + 82px bar = 104px. */
  margin: 22px auto -104px;
  padding: 0 15px;
  border-radius: 16px;
  background: rgba(36, 31, 31, 0.93);
  -webkit-backdrop-filter: blur(31px);
  backdrop-filter: blur(31px);
}

.nav-logo {
  justify-self: start;
  margin-left: 11px;
}

.nav-logo img {
  width: calc(135 * var(--dp-soft));
  height: auto;
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-links a {
  padding: 8px calc(22 * var(--dp-soft));
  border-radius: 8px;
  color: var(--color-white);
  font: 400 calc(24 * var(--dp-soft))/1.2 var(--font-sans);
  text-decoration: none;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.08); }

.btn--nav {
  justify-self: end;
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 calc(28 * var(--dp)) calc(30 * var(--dp)) calc(30 * var(--dp));
  border-radius: var(--radius-section);
  /*
   * Sampled from the painting's own bottom edge, not the frame's #bcd6ee sky.
   * Nothing should ever see this — `cover` below fills the box — but if a
   * sub-pixel rounding leaves a seam, or the file is still loading, the seam
   * is the colour the painting ends on rather than a bright blue band.
   */
  background: #9cb6c1;
}

/*
 * The frame's own cloud painting (node 149:5, exported at 4096 wide), sized
 * to `cover` the whole hero.
 *
 * It used to be `100% auto`, which fitted the painting's *width* and left the
 * foot of the box bare. That was wrong twice over: the hero is far taller
 * than the painting's 1.73 aspect at every width, so the bare strip was never
 * the sliver it was meant to be, and on a narrow screen — where the box turns
 * portrait — the painting stopped a couple of hundred pixels down and the
 * rest of the hero was flat blue.
 *
 * `cover` is also what `.auth-bg img` does, so the two pages now crop the
 * same file the same way. Because the box is always narrower than 1.73:1,
 * cover scales to the *height*: the painting is shown top to bottom, whole,
 * and is cropped at the sides instead. At 4096 wide there is resolution to
 * spare for that — the visible strip is still well over one source pixel per
 * device pixel on a 2× display.
 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/hero-clouds-figma-full.jpg") center center / cover no-repeat;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(29 * var(--dp));
  min-height: calc(830 * var(--dp));
  padding-top: calc(150 * var(--dp));
}

.hero-title img {
  width: min(calc(592 * var(--dp)), 78 * var(--vw));
  height: auto;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(476 * var(--dp-full));
  gap: calc(24 * var(--dp));
  padding: calc(21 * var(--dp)) calc(21 * var(--dp)) calc(21 * var(--dp)) calc(27 * var(--dp));
  border-radius: calc(12 * var(--dp));
  background: var(--color-ink);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  min-height: calc(412 * var(--dp));
}

.display {
  font-size: clamp(38px, 3.2 * var(--vw) + 16px, 64 * var(--dp));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(20px, 1.25 * var(--vw) + 13px, 32 * var(--dp));
  font-weight: 300;
  line-height: 1.13;
}

.hero-copy .lead {
  max-width: calc(738 * var(--dp));
  margin-top: 6px;
  color: var(--color-text-on-dark);
}

.hero-copy .actions {
  margin: auto 0 9px 3px;
  padding-top: 32px;
}

/* ---------- Chart ---------- */

.chart {
  display: flex;
  flex-direction: column;
  height: calc(412 * var(--dp));
  padding: calc(16 * var(--dp)) calc(16 * var(--dp)) 0;
  border-radius: var(--radius-button);
  background: var(--color-white);
}

.chart-plot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  padding: 0 calc(24 * var(--dp-full));
  border-radius: 3px;
  background: var(--color-placeholder);
}

.bar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 1 calc(64 * var(--dp-full));
  height: var(--v);
  padding-bottom: calc(17 * var(--dp));
  border-radius: 4px 4px 0 0;
  background: var(--color-ink);
}

.bar--accent { background: var(--color-accent); }

.bar span {
  width: min-content;
  color: var(--color-white);
  font: 500 calc(15.4 * var(--dp))/1.21 var(--font-sans);
  text-align: center;
}

.chart figcaption {
  padding: calc(9 * var(--dp)) 0 calc(10 * var(--dp));
  color: var(--color-black);
  font: 500 calc(15.4 * var(--dp))/1 var(--font-mono);
  text-align: center;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--section-gap);
}

.step {
  min-height: 599px;
  padding: calc(30 * var(--dp)) calc(30 * var(--dp)) calc(26 * var(--dp));
  border-radius: var(--radius-section);
  background: var(--color-white);
}

.step-media {
  position: relative;
  aspect-ratio: 403 / 406;
  border-radius: calc(12 * var(--dp));
  background: var(--color-placeholder);
}

.step-num {
  position: absolute;
  top: calc(16 * var(--dp));
  left: calc(19 * var(--dp));
  width: auto;
  height: calc(26 * var(--dp));
}

.btn--install {
  position: absolute;
  left: calc(18 * var(--dp));
  right: calc(21 * var(--dp));
  bottom: calc(21 * var(--dp));
  height: calc(63 * var(--dp-soft));
  min-width: 0;
}

.step h3,
.card h3 {
  color: var(--color-black);
  font-size: calc(27 * var(--dp));
  font-weight: 800;
  line-height: 1.2;
}

.step h3 {
  margin: calc(15 * var(--dp)) 0 0 7px;
}

.step p,
.card p,
.card li {
  color: var(--color-text-muted);
  font-size: calc(24 * var(--dp));
  font-weight: 400;
  line-height: 1.2;
}

.step h3,
.step p {
  max-width: calc(381 * var(--dp));
}

.step p {
  margin: 2px 0 0 7px;
}

/* ---------- Showcase (orange) ---------- */

.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(30 * var(--dp));
  border-radius: var(--radius-section);
  background: var(--color-accent);
  text-align: center;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(490 * var(--dp));
  border-radius: calc(12 * var(--dp));
  background: #f0f1f4;
}

.carousel-image {
  position: absolute;
  top: -14px;
  left: 0;
  width: calc(100% + 44px);
  height: calc(100% + 26px);
  max-width: none;
  object-fit: cover;
  filter: blur(4px);
}

.carousel-fade {
  position: absolute;
  top: calc(100% - 121px);
  left: -45px;
  width: calc(100% + 54px);
  height: 208px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  /* The strip's top row isn't fully transparent on the right; feather it so it
     doesn't draw a hard line across the screenshot. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%);
  mask-image: linear-gradient(to bottom, transparent, #000 25%);
}

.carousel-arrow {
  position: absolute;
  bottom: calc(17 * var(--dp));
  width: calc(56 * var(--dp-soft));
  height: calc(56 * var(--dp-soft));
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.carousel-arrow:hover { opacity: 0.85; }
.carousel-arrow img { width: 100%; height: 100%; }
.carousel-arrow--prev { left: calc(18 * var(--dp)); }
.carousel-arrow--next { right: calc(15 * var(--dp)); }

.dots {
  display: flex;
  gap: 5px;
  margin-top: calc(12 * var(--dp));
}

.dots span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.dots .is-active {
  width: 55px;
  background: var(--color-white);
}

.showcase .display {
  margin-top: calc(26 * var(--dp));
  font-weight: 800;
}

.showcase .lead {
  max-width: calc(1064 * var(--dp));
  margin-top: calc(11 * var(--dp));
}

.showcase .btn {
  margin-top: calc(27 * var(--dp));
}

/* ---------- Logo strip (full-bleed, overflows both edges) ---------- */

/* Six tiles centered: at 1512px this shows exactly the four-tile crop from Figma,
   and wider screens reveal more tiles instead of empty edges. */
.logo-strip {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2 * var(--vw), 30 * var(--dp));
  /* The one element that crosses the side bars: the row runs the full width of
     the window and the end tiles are cut by the window itself, so it reads as a
     strip that carries on past the screen. No fade at the ends. */
  overflow: hidden;
}

.logo-tile {
  flex: none;
  width: clamp(200px, 30.75 * var(--vw), 465 * var(--dp));
  aspect-ratio: 465 / 176;
  border-radius: calc(23 * var(--dp));
  background: var(--color-white);
}

/* ---------- Features wall ---------- */

.features {
  position: relative;
  overflow: hidden;
  padding: calc(30 * var(--dp)) calc(30 * var(--dp)) 0;
  border-radius: var(--radius-section);
  background: var(--color-black);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(30 * var(--dp));
  /* Columns widen faster than text grows, so the wall gets taller to keep the same crop. */
  height: calc(1714px + 2 * var(--grow));
  overflow: hidden;
}

.features-col {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--dp));
}

/* Fourth column only appears on very wide screens (see the 1920 design px query). */
.features-col.features-col--extra {
  display: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  padding: calc(13 * var(--dp)) calc(21 * var(--dp)) calc(20 * var(--dp));
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.card > p,
.card-text {
  margin-top: 4px;
}

.card-text p + p {
  margin-top: calc(29 * var(--dp));
}

.card ul {
  padding-left: calc(36 * var(--dp));
}

.card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio);
  margin-top: calc(13 * var(--dp));
  border-radius: var(--radius-button);
  background: var(--color-placeholder-dark);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media .card-media--left {
  object-position: 0 50%;
}

.card-media .btn {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.card--media-first {
  padding: calc(20 * var(--dp)) calc(21 * var(--dp)) calc(13 * var(--dp));
}

.card--media-first .card-media {
  margin-top: 0;
}

.card--media-first h3 {
  margin-top: calc(8 * var(--dp));
}

.card--tail {
  padding: calc(21 * var(--dp)) calc(21 * var(--dp)) calc(87 * var(--dp));
}

.card-action {
  align-self: flex-end;
  margin: calc(7 * var(--dp)) -6px -3px 0;
}

/* Static fade over the wall's crop. This used to be six backdrop-filter blur
   layers (1px–28px) masked to bands plus a darkening gradient. Backdrop-filter
   re-samples and re-blurs everything behind it on every scroll frame, so six
   full-width layers over a ~585px region meant several fullscreen blur passes
   per frame while scrolling — the scroll jank on the page. The cards behind
   the fade never move relative to it (the wall is cropped, not scrolled), so
   live re-blurring bought nothing. One opaque gradient is baked once and the
   compositor just translates the cached bitmap on scroll: no per-frame cost. */
.features-fade {
  position: absolute;
  inset: auto 0 0;
  height: calc(585 * var(--dp));
  pointer-events: none;
}

/* Darkening gradient from Figma, drawn in CSS rather than from the exported
   PNG, whose last row is only ~40% opaque and let a sliver of the cards show
   along the bottom edge at fractional zoom levels. Ends fully opaque so the
   crop edge is hidden completely. */
.features-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Eased over the first stops so the fade has no visible starting edge. */
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0),
    rgb(0 0 0 / 0.04) 6%,
    rgb(0 0 0 / 0.11) 12%,
    rgb(0 0 0 / 0.41) 40%,
    rgb(0 0 0 / 0.65) 65%,
    rgb(0 0 0 / 0.85) 85%,
    rgb(0 0 0 / 1));
}

/* Kept in the DOM for backend documents that still send `fadeLayers`
   (see `src/types.ts`), but visually inert: no backdrop-filter, so no
   per-frame blur cost. */
.features-fade span {
  display: none;
}

.cta {
  position: absolute;
  left: 50%;
  bottom: calc(31 * var(--dp));
  z-index: 2;
  width: min(694 * var(--dp), 100% - 32px);
  padding: calc(15 * var(--dp)) calc(22 * var(--dp)) calc(19 * var(--dp));
  border-radius: calc(12 * var(--dp));
  background: var(--color-white);
  color: var(--color-black);
  transform: translateX(-50%);
}

.cta h2 {
  font-size: clamp(34px, 2 * var(--vw) + 18px, 48 * var(--dp));
  font-weight: 700;
  line-height: 1.13;
}

.cta p {
  max-width: calc(573 * var(--dp));
  margin-top: calc(10 * var(--dp));
  color: var(--color-text-soft);
  font-size: calc(20 * var(--dp));
  line-height: 1.13;
}

.cta .actions {
  margin-top: calc(38 * var(--dp));
  gap: 0;
}

/* ---------- Footer ---------- */

.footer {
  min-height: calc(338 * var(--dp));
  padding: calc(21 * var(--dp)) calc(22 * var(--dp));
  border-radius: calc(23 * var(--dp));
  background: var(--color-black);
}

.footer img {
  width: calc(135 * var(--dp));
  height: auto;
}

/* ---------- Wide screens ---------- */

@media (min-width: 1095px) { /* page at 1512 design px */
  /* Step boxes widen at full rate but only grow in height at half rate,
     so they turn gently landscape instead of becoming huge squares. */
  .step-media {
    aspect-ratio: auto;
    height: calc(406 * var(--dp));
  }
}

@media (min-width: 1426px) { /* page at 1920 design px */
  .features-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(1393px + 1.575 * var(--grow));
  }

  .features-col.features-col--extra {
    display: flex;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 826px) { /* page at 1180 design px, where the side bars run out */
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 0;
  }

  .chart {
    width: min(476px, 100%);
  }

  /* Stacked steps span the full page width like the other sections. The media
     box stays square on phones but stops growing taller once it hits the design
     height, so wide cards turn landscape instead of into huge squares. */
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    min-height: 0;
  }

  .step-media {
    /* max-height alone would also cap the width through the aspect ratio. */
    min-width: 100%;
    max-height: 406px;
  }

  .btn--install {
    right: auto;
    width: min(364px, 100% - 39px);
  }

  /* Two columns rather than a two-column flow of the same cards: multicol pushes
     any card that doesn't fit into the next column, so a column could end
     several hundred pixels above the crop and the wall stopped mid-blur. Keeping
     the author columns means each one is simply cut off. The third column falls
     into a second grid row, below the crop. */
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrower than this the three links start closing on the waitlist button. */
@media (max-width: 680px) {
  .nav {
    grid-template-columns: auto 1fr;
  }

  .nav-links {
    display: none;
  }
}

@media (max-width: 490px) { /* page at 700 design px */
  /* Phones keep the layout's own sizing; no page-wide zoom. */
  :root {
    --zoom: 1;
    --gutter: 16px;
    --radius-section: 24px;
  }

  body {
    padding: 16px 0;
  }

  main > * + *,
  main + .footer {
    margin-top: 16px;
  }

  .nav {
    top: 12px;
    width: calc(100% - var(--gutter) * 2 - 16px);
    height: 64px;
    margin: 12px auto -76px;
    padding: 0 10px;
    border-radius: 12px;
  }

  .nav-logo {
    margin-left: 6px;
  }

  .nav-logo img {
    width: 108px;
  }

  .btn {
    height: 46px;
    min-width: 0;
    padding: 0 20px;
    font-size: 18px;
  }

  .btn--link {
    padding: 0 16px;
  }

  .hero {
    padding: 0 12px 12px;
  }

  .hero-intro {
    min-height: 520px;
    padding-top: 90px;
    gap: 22px;
  }

  .hero-panel {
    padding: 20px 16px 16px;
  }

  .hero-copy .actions {
    margin: 0;
    padding-top: 28px;
  }

  .chart {
    height: 340px;
    padding: 10px 10px 0;
  }

  .chart-plot {
    gap: 6px;
    padding: 0 10px;
  }

  .bar span {
    font-size: 12px;
  }

  .chart figcaption {
    font-size: 12px;
  }

  .steps,
  .features-grid {
    gap: 16px;
  }

  .step {
    padding: 16px 16px 20px;
  }

  .step h3,
  .card h3 {
    font-size: 23px;
  }

  .step p,
  .card p,
  .card li {
    font-size: 19px;
  }

  .card-text p + p {
    margin-top: 23px;
  }

  .btn--install {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: 52px;
  }

  .showcase {
    padding: 12px 12px 24px;
  }

  .carousel {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
    bottom: 12px;
  }
  .carousel-arrow--prev { left: 12px; }
  .carousel-arrow--next { right: 12px; }

  .display {
    font-size: clamp(30px, 7 * var(--vw) + 6px, 44px);
  }

  .showcase .display {
    margin-top: 20px;
  }

  .features {
    padding: 12px 12px 0;
  }

  /* One column: the author columns stack into a single run of cards, cut at the
     crop like everywhere else. */
  .features-grid {
    grid-template-columns: 1fr;
    height: 2100px;
  }

  .features-col {
    gap: 16px;
  }

  .card-media .btn {
    right: 12px;
    bottom: 12px;
  }

  .cta {
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 16px 16px 18px;
  }

  .cta p {
    font-size: 17px;
  }

  .cta .actions {
    margin-top: 24px;
  }

  .footer {
    min-height: 220px;
  }
}

@media (max-width: 420px) {
  .nav-logo img {
    width: 96px;
  }

  .btn--nav {
    height: 40px;
    padding: 0 14px;
    font-size: 16px;
  }

  .chart-plot {
    gap: 4px;
    padding: 0 6px;
  }

  .bar span {
    font-size: 10px;
  }

  .chart figcaption {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}