/* ==========================================================================
   SAN Media Solution — Section 4 · AI Snake Marketing
   Built to `Section 4 refrence services .PNG`. `--k` is one pixel of that
   1536px artboard. The snakes, the rock and the glows are stand-ins lifted
   from the reference; everything else is live type.
   ========================================================================== */

.snk {
  --k: calc(100vw / 1536);
  --u: var(--k);                          /* the shared .pill sizes follow this section's unit */
  --lime-7: #7ac81c;                      /* subtitles, checks, rules */
  /* the artboard was drawn 1024 tall; the three packages carry their full
     service lists now, so the cards grow to their content and the artboard
     grows with them. The foot row keeps its distance from the bottom edge. */
  --snk-h: 1500;
  position: relative;
  container-type: inline-size;
  overflow: clip;
  height: calc(var(--snk-h) * var(--k));
  background: #fcfcfc;
  color: #111;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  .snk { --k: calc(1cqw / 15.36); }
}

/* ── the ground: glows and the rock ───────────────────────────────────── */
.snk__glow, .snk__rock { position: absolute; display: block; height: auto; pointer-events: none; }
/* each lifted patch fades out at the edges that meet bare paper */
.snk__glow--tr {
  left: calc(1100 * var(--k)); top: 0; width: calc(436 * var(--k));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to top, transparent, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to top, transparent, #000 30%);
  mask-composite: intersect;
}
.snk__glow--br {
  left: calc(1380 * var(--k)); top: calc((var(--snk-h) - 384) * var(--k)); width: calc(156 * var(--k));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}
.snk__rock {
  left: 0; top: auto; bottom: 0; width: calc(470 * var(--k));
  -webkit-mask-image: linear-gradient(to left, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 14%);
  mask-composite: intersect;
}

/* ── left copy ─────────────────────────────────────────────────────────── */
.snk__copy {
  position: absolute;
  left: calc(70 * var(--k));
  top: calc(63 * var(--k));
  width: calc(560 * var(--k));
  z-index: 3;
}
.snk__kicker {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--k));
  margin: 0;
  font-size: max(calc(11.5 * var(--k)), 9px);
  font-weight: 500;
  letter-spacing: .37em;
  text-transform: uppercase;
  line-height: 1;
  color: #4a4a4c;
}
.snk__kicker i { display: block; width: calc(40 * var(--k)); height: calc(2 * var(--k)); background: var(--lime); }
.snk__title {
  margin: calc(18 * var(--k)) 0 0;
  font-size: calc(77 * var(--k));
  font-weight: 900;
  line-height: calc(69 * var(--k));
  letter-spacing: .028em;
  text-transform: uppercase;
  color: #050505;
}
.snk__title span { display: block; white-space: nowrap; }
.snk__title em {
  font-style: normal;
  background: linear-gradient(100deg, #9ad04a 0%, #86c534 45%, #6fb02a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.snk__title sup { font-size: .42em; vertical-align: top; line-height: 1; position: relative; top: .1em; }
.snk__sub {
  margin: calc(16 * var(--k)) 0 0;
  font-size: max(calc(12 * var(--k)), 10px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #4c4c50;
}
.snk__sub b { font-weight: 400; margin: 0 calc(4 * var(--k)); color: #9a9a9e; }
.snk__lede {
  margin: calc(29 * var(--k)) 0 0;
  font-size: calc(18 * var(--k));
  font-weight: 400;
  line-height: calc(24 * var(--k));
  letter-spacing: -.015em;
  color: #4c4c50;
}
.snk__ink { display: block; width: calc(270 * var(--k)); height: auto; margin: calc(15 * var(--k)) 0 0 calc(-34 * var(--k)); }

/* ── evolve → attack → dominate ─────────────────────────────────────────── */
.snk__steps {
  position: absolute;
  left: calc(633 * var(--k));
  top: calc(100 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(32 * var(--k));
  margin: 0;
  font-size: max(calc(12 * var(--k)), 10px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #9a9a9e;
  z-index: 2;
}
.snk__steps b { font-weight: 600; color: #222; }
.snk__steps i { font-style: normal; font-size: calc(15 * var(--k)); letter-spacing: 0; color: #333; }

/* ── the snakes, on a depth stage ──────────────────────────────────────── */
.snk__stage {
  position: absolute;
  left: calc(340 * var(--k));
  top: calc(118 * var(--k));
  width: calc(820 * var(--k));
  height: calc(365 * var(--k));
  perspective: calc(1200 * var(--k));
  perspective-origin: 50% 70%;
  z-index: 1;
}
.snk__snakes {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* ── the three tiers ───────────────────────────────────────────────────── */
.snk__tiers {
  position: absolute;
  left: calc(310 * var(--k));
  top: calc(483 * var(--k));
  display: flex;
  gap: calc(18 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: calc(1400 * var(--k));
  perspective-origin: 50% 0;
  z-index: 2;
}
.tier {
  position: relative;
  width: calc(294 * var(--k));
  min-height: calc(379 * var(--k));
  padding: calc(20 * var(--k)) calc(25 * var(--k)) calc(86 * var(--k));   /* the button sits in the foot */
  border-radius: calc(14 * var(--k));
  background: rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .8),
    0 0 0 1px rgba(0, 0, 0, .05),
    0 calc(18 * var(--k)) calc(40 * var(--k)) rgba(20, 40, 10, .1);
  -webkit-backdrop-filter: blur(calc(6 * var(--k)));
  backdrop-filter: blur(calc(6 * var(--k)));
  transform-origin: 50% 50%;
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
/* one tier comes forward under the pointer — or under a tap, where there is no pointer */
.tier.is-active,
.tier:focus-within {
  z-index: 4;
  transform: translate3d(0, calc(-8 * var(--k)), 0) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 0 0 1px rgba(0, 0, 0, .06),
    0 calc(30 * var(--k)) calc(60 * var(--k)) rgba(20, 40, 10, .18),
    0 0 calc(40 * var(--k)) rgba(152, 240, 20, .18);
}
@media (hover: hover) {
  .tier:hover {
    z-index: 4;
    transform: translate3d(0, calc(-8 * var(--k)), 0) scale(1.04);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .9),
      0 0 0 1px rgba(0, 0, 0, .06),
      0 calc(30 * var(--k)) calc(60 * var(--k)) rgba(20, 40, 10, .18),
      0 0 calc(40 * var(--k)) rgba(152, 240, 20, .18);
  }
}
.tier__crown {
  position: absolute;
  right: calc(48 * var(--k));
  top: calc(-37 * var(--k));
  width: calc(75 * var(--k));
  height: calc(75 * var(--k));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(2 * var(--k)) var(--lime), 0 0 calc(18 * var(--k)) rgba(152, 240, 20, .7);
  display: grid;
  place-items: center;
}
.tier__crown svg { width: calc(34 * var(--k)); height: auto; fill: #0a0a0a; }
.tier__n { display: flex; align-items: center; gap: calc(16 * var(--k)); height: calc(12 * var(--k)); }
.tier__n b { font-size: max(calc(13 * var(--k)), 10px); font-weight: 600; letter-spacing: .16em; line-height: 1; color: #111; font-variant-numeric: tabular-nums; }
.tier__n i { display: block; width: calc(34 * var(--k)); height: calc(2 * var(--k)); background: var(--lime); }
.tier__t {
  margin: calc(22 * var(--k)) 0 0;
  font-size: calc(24 * var(--k));
  font-weight: 800;
  line-height: calc(25 * var(--k));
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #090909;
}
.tier__t em {
  display: block;
  margin-top: calc(4 * var(--k));
  font-style: normal;
  font-size: calc(17.5 * var(--k));
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--lime-7);
}
.tier__d {
  margin: calc(16 * var(--k)) 0 0;
  font-size: calc(16.5 * var(--k));
  font-weight: 400;
  line-height: calc(21.5 * var(--k));
  letter-spacing: -.015em;
  color: #3a3a3e;
}
.tier__d--2 { margin-top: calc(8 * var(--k)); font-size: calc(14.5 * var(--k)); line-height: calc(19.5 * var(--k)); color: #55555a; }
/* "Includes:" / "Best for:" / "Strategy" */
.tier__label {
  margin: calc(16 * var(--k)) 0 0;
  font-size: max(calc(11 * var(--k)), 9px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
}
.tier__for {
  margin: calc(6 * var(--k)) 0 0;
  font-size: calc(14 * var(--k));
  font-weight: 500;
  line-height: calc(19.5 * var(--k));
  letter-spacing: -.01em;
  color: #3a3a3e;
}
.tier__list {
  margin: calc(6 * var(--k)) 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(14.5 * var(--k));
  font-weight: 400;
  letter-spacing: -.012em;
  color: #3e3e42;
}
/* a row per service; a long name wraps to a second line rather than clipping */
.tier__list li { display: flex; align-items: flex-start; gap: calc(9 * var(--k)); min-height: calc(24 * var(--k)); padding: calc(2.5 * var(--k)) 0; line-height: calc(19 * var(--k)); }
.tier__list i {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(19 * var(--k));
  height: calc(19 * var(--k));
  border-radius: 50%;
  background: var(--lime-7);
}
.tier__list svg { width: calc(11 * var(--k)); height: auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tier__btn {
  position: absolute;
  left: calc(25 * var(--k));
  right: calc(25 * var(--k));
  bottom: calc(22 * var(--k));
  height: calc(44 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--k));
  border-radius: 999px;
  border: calc(1.5 * var(--k)) solid #171717;
  font-size: calc(16 * var(--k));
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: #111;
  background: #fff;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), background .45s, color .45s;
}
.tier__btn svg { width: calc(19 * var(--k)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--e-out); }
.tier__btn:hover, .tier__btn:focus-visible { transform: translateY(calc(-2 * var(--k))); background: #111; color: #fff; }
.tier__btn:hover svg, .tier__btn:focus-visible svg { transform: translateX(calc(3 * var(--k))); }
.tier__btn--dark {
  border-color: #000;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 calc(1.6 * var(--k)) var(--lime), 0 0 calc(16 * var(--k)) calc(1 * var(--k)) rgba(152, 240, 20, .55), 0 calc(4 * var(--k)) calc(18 * var(--k)) rgba(0, 0, 0, .16);
}
.tier__btn--dark svg { stroke: var(--lime); }
.tier__btn--dark:hover, .tier__btn--dark:focus-visible { background: #000; color: #fff; box-shadow: 0 0 0 calc(1.6 * var(--k)) var(--lime), 0 0 calc(26 * var(--k)) calc(2 * var(--k)) rgba(152, 240, 20, .7), 0 calc(8 * var(--k)) calc(26 * var(--k)) rgba(0, 0, 0, .2); }

/* ── the right column ──────────────────────────────────────────────────── */
.snk__side {
  position: absolute;
  left: calc(1182 * var(--k));
  top: calc(83 * var(--k));
  width: calc(300 * var(--k));
  z-index: 3;
}
.snk__values {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: max(calc(11.5 * var(--k)), 9px);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: calc(19.2 * var(--k));
  color: #2c2c30;
}
.snk__values li:last-child { display: flex; align-items: center; gap: calc(14 * var(--k)); }
.snk__values i { display: block; width: calc(32 * var(--k)); height: calc(2 * var(--k)); background: var(--lime); }
.snk__why {
  margin: calc(11 * var(--k)) 0 0;
  font-size: calc(17.5 * var(--k));
  font-weight: 400;
  line-height: calc(23 * var(--k));
  letter-spacing: -.015em;
  white-space: nowrap;
  color: #4c4c50;
}
.snk__why--2 { margin-top: calc(17 * var(--k)); }
.pill--snk {
  margin-top: calc(22 * var(--k));
  margin-left: calc(8 * var(--k));
  height: calc(47 * var(--k));
  padding: 0 calc(28 * var(--k));
  font-size: calc(16.5 * var(--k));
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.pill--snk svg { width: calc(20 * var(--k)); stroke: var(--lime); }

/* ── the vertical line of type ─────────────────────────────────────────── */
.snk__vert {
  position: absolute;
  left: calc(1461 * var(--k));
  top: calc(445 * var(--k));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--k));
  z-index: 2;
}
.snk__vert i { display: block; width: 1px; height: calc(41 * var(--k)); background: #444; }
.snk__vert span {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: max(calc(10.5 * var(--k)), 9px);
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #5a5a5e;
}

/* ── the corners of the foot ──────────────────────────────────────────── */
.snk__nature {
  position: absolute;
  left: calc(45 * var(--k));
  top: calc((var(--snk-h) - 116) * var(--k));
  margin: 0;
  font-size: max(calc(9.5 * var(--k)), 9px);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  line-height: calc(16 * var(--k));
  white-space: nowrap;
  color: #fff;
  z-index: 2;
}
.snk__nature i { display: block; width: calc(26 * var(--k)); height: calc(2 * var(--k)); margin-bottom: calc(14 * var(--k)); background: var(--lime); }
.snk__evolves {
  position: absolute;
  right: calc(53 * var(--k));
  top: calc((var(--snk-h) - 103) * var(--k));
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(15 * var(--k));
  font-size: max(calc(9.5 * var(--k)), 9px);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: calc(15 * var(--k));
  text-align: right;
  white-space: nowrap;
  color: #3a3a3e;
  z-index: 2;
}
.snk__evolves i { display: block; width: calc(32 * var(--k)); height: calc(2 * var(--k)); background: var(--lime); margin-top: calc(22 * var(--k)); }

/* ── the statistics ────────────────────────────────────────────────────── */
.snk__stats {
  position: absolute;
  left: calc(415 * var(--k));
  top: calc((var(--snk-h) - 99) * var(--k));
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
.snk__stats li {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(13 * var(--k));
  padding-right: calc(28 * var(--k));
  margin-right: calc(28 * var(--k));
}
.snk__stats li:nth-child(1) { width: calc(171 * var(--k)); }
.snk__stats li:nth-child(2) { width: calc(182 * var(--k)); }
.snk__stats li:nth-child(3) { width: calc(166 * var(--k)); }
.snk__stats li + li::before {
  content: "";
  position: absolute;
  left: calc(-28 * var(--k));
  top: calc(4 * var(--k));
  width: 1px;
  height: calc(40 * var(--k));
  background: #d9d9dc;
}
.snk__icon { flex: none; width: calc(30 * var(--k)); height: auto; fill: #0a0a0a; color: #0a0a0a; }
.snk__stats b { display: block; font-size: calc(22 * var(--k)); font-weight: 800; letter-spacing: -.02em; line-height: calc(24 * var(--k)); color: #0c0c0c; white-space: nowrap; }
.snk__stats em { display: block; margin-top: calc(3 * var(--k)); font-size: max(calc(11 * var(--k)), 9px); font-style: normal; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: #6a6a6e; white-space: nowrap; }

/* ── entrances: snake.js plays them once, on entry ─────────────────────── */
.snk.is-live [data-in],
.snk.is-live [data-snakes],
.snk.is-live [data-card],
.snk.is-live [data-stat],
.snk.is-live [data-steps] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .snk [data-in], .snk [data-snakes], .snk [data-card], .snk [data-stat], .snk [data-steps] {
    transform: none !important; opacity: 1 !important; filter: none !important;
  }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .snk { --pad: clamp(20px, 4vw, 48px); height: auto; padding-bottom: clamp(30px, 5vh, 56px); }
  .snk__glow--tr { left: auto; right: 0; width: clamp(240px, 40vw, 436px); }
  .snk__glow--br { display: none; }
  .snk__rock { display: none; }
  .snk__copy { position: static; width: auto; padding: clamp(30px, 6vh, 64px) var(--pad) 0; }
  .snk__kicker { font-size: clamp(10px, 1.3vw, 12px); }
  .snk__title { margin-top: 16px; font-size: clamp(44px, 9vw, 92px); line-height: .92; }
  .snk__title span { white-space: normal; }
  .snk__sub { margin-top: 14px; font-size: clamp(9.5px, 1.3vw, 12px); white-space: normal; line-height: 1.7; }
  .snk__sub b { margin: 0 6px; }
  .snk__lede { margin-top: 22px; font-size: clamp(15px, 2.1vw, 19px); line-height: 1.34; max-width: 32ch; }
  .snk__lede br { display: none; }
  .snk__ink { width: clamp(180px, 28vw, 270px); margin: 14px 0 0 -12px; }

  .snk__steps { position: static; margin: clamp(22px, 4vh, 40px) var(--pad) 0; font-size: clamp(10px, 1.3vw, 12px); gap: clamp(12px, 2.4vw, 28px); }
  .snk__steps i { font-size: 1.3em; }
  .snk__stage { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 820 / 365; margin-top: 8px; perspective: 1000px; }
  .snk__stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(to bottom, rgba(252, 252, 252, 0), #fcfcfc); pointer-events: none; }
  .snk__stage img { position: absolute; inset: 0; width: 100%; height: 100%; }

  .snk__tiers {
    position: relative;
    left: 0; top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.2vw, 20px);
    margin: -6% var(--pad) 0;
    perspective: 1200px;
  }
  .tier { width: auto; height: auto; padding: 18px clamp(14px, 2.2vw, 22px) 22px; border-radius: 14px; background: rgba(255, 255, 255, .94); }
  .tier__crown { right: 14px; top: -28px; width: 56px; height: 56px; }
  .tier__crown svg { width: 26px; }
  .tier__n { height: 12px; gap: 12px; }
  .tier__n b { font-size: clamp(11px, 1.4vw, 13px); }
  .tier__n i { width: 30px; height: 2px; }
  .tier__t { margin-top: 20px; font-size: clamp(18px, 2.6vw, 27px); line-height: 1.05; white-space: normal; }
  .tier__t em { margin-top: 6px; font-size: clamp(14px, 1.9vw, 18px); }
  .tier__d { margin-top: 14px; font-size: clamp(13.5px, 1.7vw, 16.5px); line-height: 1.32; }
  .tier__d--2 { margin-top: 8px; font-size: clamp(12.5px, 1.5vw, 14.5px); line-height: 1.4; }
  .tier__label { margin-top: 16px; font-size: clamp(9.5px, 1.1vw, 11px); }
  .tier__for { margin-top: 6px; font-size: clamp(12.5px, 1.5vw, 14px); line-height: 1.4; }
  .tier__list { margin-top: 6px; font-size: clamp(12.5px, 1.6vw, 14.5px); }
  .tier__list li { min-height: 0; padding: 5px 0; gap: 8px; white-space: normal; align-items: flex-start; line-height: 1.25; }
  .tier__list i { width: 19px; height: 19px; margin-top: -1px; }
  .tier__list svg { width: 10px; }
  /* the cards flow; whatever sits above the button absorbs the slack, so
     every button lands at its card's foot */
  .tier { display: flex; flex-direction: column; min-height: 0; }
  .tier > :nth-last-child(2) { margin-bottom: auto; }
  .tier__btn { position: relative; inset: auto; flex: none; margin-top: 18px; height: clamp(40px, 5vw, 46px); font-size: clamp(13.5px, 1.7vw, 16px); border-width: 1.5px; gap: 9px; }
  .tier__btn svg { width: 18px; }
  .tier__btn--dark { box-shadow: 0 0 0 1.5px var(--lime), 0 0 14px 1px rgba(152, 240, 20, .55), 0 4px 16px rgba(0, 0, 0, .16); }

  .snk__side { position: static; width: auto; padding: clamp(28px, 5vh, 48px) var(--pad) 0; }
  .snk__values { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2.4vw, 28px); font-size: clamp(10px, 1.3vw, 11.5px); line-height: 1.6; }
  .snk__values li:last-child { gap: 12px; }
  .snk__values i { width: 32px; height: 2px; }
  .snk__why { margin-top: 20px; font-size: clamp(15px, 2.1vw, 18px); line-height: 1.34; white-space: normal; max-width: 42ch; }
  .snk__why br { display: none; }
  .snk__why--2 { margin-top: 12px; }
  .pill--snk { margin: 20px 0 0; height: clamp(44px, 5.4vw, 50px); padding: 0 clamp(22px, 3vw, 28px); gap: clamp(9px, 1.2vw, 13px); font-size: clamp(14px, 1.8vw, 16.5px); box-shadow: 0 0 0 1.5px var(--lime), 0 0 14px 1px rgba(152, 240, 20, .55), 0 4px 16px rgba(0, 0, 0, .16); }
  .pill--snk svg { width: clamp(16px, 2vw, 20px); }

  .snk__vert, .snk__nature { display: none; }
  .snk__stats {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px clamp(10px, 2vw, 24px);
    margin: clamp(30px, 5vh, 52px) var(--pad) 0;
    padding-top: clamp(20px, 3vh, 28px);
    border-top: 1px solid #e2e2e2;
  }
  .snk__stats li { width: auto !important; padding: 0; margin: 0; gap: 10px; }
  .snk__stats li + li::before { display: none; }
  .snk__icon { width: clamp(22px, 3vw, 30px); }
  .snk__stats b { font-size: clamp(18px, 2.6vw, 22px); line-height: 1.1; }
  .snk__stats em { font-size: clamp(9.5px, 1.3vw, 11px); white-space: normal; line-height: 1.25; }
  .snk__evolves { position: static; justify-content: flex-end; gap: 12px; margin: 26px var(--pad) 0; font-size: clamp(8.5px, 1.1vw, 9.5px); line-height: 1.7; }
  .snk__evolves i { width: 28px; height: 2px; margin-top: 0; }
}
@media (max-width: 780px) {
  .snk__tiers { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; padding: 0 var(--pad); margin-top: -4%; }
  .tier { padding: 20px 22px 24px; }
  .tier__crown { right: 20px; top: -26px; }
  .snk__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .snk__steps { justify-content: center; gap: 10px; font-size: 9.5px; letter-spacing: .24em; }
  .snk__stage { margin-top: 12px; }
}