/* ==========================================================
   궁서채몰 × 토스 × K-바우처 — 단말기 무료 교체 이벤트
   Design tokens
   ========================================================== */
:root {
  --toss-blue: #3182f6;
  --toss-blue-dark: #1b64da;
  --toss-blue-deep: #0f4cad;
  --toss-blue-50: #e8f2ff;
  --toss-blue-100: #d3e5ff;
  --ink: #191f28;
  --gray-800: #333d4b;
  --gray-700: #4e5968;
  --gray-600: #6b7684;
  --gray-500: #8b95a1;
  --gray-400: #b0b8c1;
  --gray-300: #d1d6db;
  --gray-200: #e5e8eb;
  --gray-100: #f2f4f6;
  --gray-50: #f9fafb;
  --white: #fff;

  --gold: #b76e00;
  --gold-strong: #9a5b00;
  --gold-bright: #ffc75a;
  --gold-50: #fff6e6;
  --gold-100: #ffe9c4;

  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  --text-hero: clamp(2.1rem, 1.4rem + 3.6vw, 3.6rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);

  --space-section: clamp(5rem, 3.6rem + 5vw, 8rem);

  --dur-fast: 150ms;
  --dur: 300ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-card: 0 10px 34px rgba(25, 31, 40, 0.08);
  --shadow-float: 0 18px 50px rgba(25, 31, 40, 0.16);
}

/* ---- Reset-ish ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    "Apple SD Gothic Neo", system-ui, sans-serif;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.65;
  /* 한국어 단어 중간 줄바꿈 방지 — 모바일 가독성 핵심 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: min(1080px, 100% - 2.5rem);
  margin-inline: auto;
}

.wrap.narrow {
  width: min(820px, 100% - 2.5rem);
}

.pc-only {
  display: none;
}

@media (min-width: 720px) {
  .pc-only {
    display: inline;
  }

  .mo-only {
    display: none;
  }
}

/* ---- Icons ---- */
.ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
  flex: none;
}

/* squircle badge — hero device cards */
.ic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: var(--white);
  background: linear-gradient(145deg, #5b9bf8, var(--toss-blue) 45%, var(--toss-blue-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px rgba(49, 130, 246, 0.35);
  transition: transform var(--dur) var(--ease-spring);
}

.ic-badge .ic {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}

.ic-badge--gold {
  background: linear-gradient(145deg, #ffd98a, #f2a93b 45%, #d98a12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 18px rgba(217, 138, 18, 0.35);
}

/* tinted tile — benefit cards */
.ic-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: var(--toss-blue-dark);
  background: linear-gradient(160deg, var(--toss-blue-50), var(--toss-blue-100));
  margin-bottom: 0.85rem;
  transition: transform var(--dur) var(--ease-spring);
}

.ic-tile .ic {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

.ic-tile--gold {
  color: var(--gold-strong);
  background: linear-gradient(160deg, var(--gold-50), var(--gold-100));
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 0.9rem 1.4rem;
  font-size: 1rem;
  transition: transform var(--dur-fast) var(--ease),
    background var(--dur-fast), box-shadow var(--dur-fast);
}

.btn--lg {
  padding: 1.05rem 1.7rem;
  font-size: 1.0625rem;
}

.btn--primary {
  background: var(--toss-blue-dark);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(49, 130, 246, 0.35);
}

.btn--primary:hover {
  background: var(--toss-blue-deep);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: scale(0.97);
}

.btn--ghost {
  background: var(--gray-100);
  color: var(--gray-800);
}

.btn--ghost:hover {
  background: var(--gray-200);
  transform: translateY(-2px);
}

.btn:focus-visible,
.topbar__tel:focus-visible {
  outline: 3px solid var(--toss-blue-dark);
  outline-offset: 3px;
}

.btn--primary:focus-visible,
.tel-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---- Topbar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gray-100);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
}

.brand .x {
  color: var(--gray-400);
  font-weight: 500;
}

.brand .toss {
  color: var(--toss-blue);
}

.brand .kv {
  color: var(--gold-strong);
}

.topbar__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--toss-blue-dark);
  background: var(--toss-blue-50);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background var(--dur-fast);
}

.topbar__tel:hover {
  background: var(--toss-blue-100);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: clamp(4rem, 2.6rem + 4vw, 6.8rem) 0 var(--space-section);
  overflow: hidden;
}

/* atmosphere */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  width: 640px;
  height: 640px;
  top: -260px;
  right: -180px;
  background: radial-gradient(
    circle,
    rgba(49, 130, 246, 0.12),
    rgba(49, 130, 246, 0) 65%
  );
}

.hero::after {
  width: 480px;
  height: 480px;
  bottom: -240px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(242, 169, 59, 0.1),
    rgba(242, 169, 59, 0) 65%
  );
}

/* 배경 글로우가 아주 천천히 흐른다 — 살아있는 첫인상 */
.hero::before {
  animation: drift 16s ease-in-out infinite alternate;
}

.hero::after {
  animation: drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-34px, 26px);
  }
}

.hero__grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 920px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--toss-blue-dark);
  background: var(--toss-blue-50);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--toss-blue);
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.hero h1 > span {
  display: block;
}

.hero h1 .accent {
  color: var(--toss-blue);
}

.hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--gray-700);
  line-height: 1.65;
}

.hero__lead b {
  color: var(--ink);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.9rem;
}

/* 모바일: 버튼 전체 폭 — 시선 흐름과 탭 편의 */
@media (max-width: 639px) {
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
  }
}

.hero__micro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 1.3rem;
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
  font-weight: 600;
}

.hero__micro b {
  color: var(--gold-strong);
}

/* Hero load sequence — .js 스코프: JS 실패 시에도 콘텐츠는 항상 보인다 */
.js .stage,
.js .stage-r,
.js .stage-pop {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.js .stage {
  transform: translateY(26px);
}

.js .stage-r {
  transform: translateX(46px);
}

.js .stage-pop {
  transform: scale(0.55) rotate(4deg);
  transition-timing-function: var(--ease-spring);
  transition-duration: 0.6s;
}

body.loaded .stage,
body.loaded .stage-r {
  opacity: 1;
  transform: none;
}

body.loaded .stage-pop {
  opacity: 1;
  transform: rotate(1.2deg);
}

/* Hero visual — devices */
.hero__visual {
  position: relative;
  padding-bottom: 4.2rem;
}

.devices {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.device {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
}

.device-outer:nth-child(1) .device {
  rotate: -0.6deg;
}

.device-outer:nth-child(2) .device {
  rotate: 0.5deg;
  translate: 10px 0;
}

.device-outer:nth-child(3) .device {
  rotate: -0.4deg;
}

.device--kv {
  border-color: var(--gold-100);
  background: linear-gradient(180deg, var(--white), var(--gold-50));
}

/* gentle levitation (runs after entrance) */
body.loaded .float {
  animation: floaty 6s ease-in-out infinite;
}

body.loaded .float.f2 {
  animation-delay: -2s;
}

body.loaded .float.f3 {
  animation-delay: -4s;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.device__tx {
  flex: 1;
  min-width: 0;
}

.device__tx b {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.device__tx span {
  font-size: 0.88rem;
  color: var(--gray-600);
}

.device__tag {
  flex: none;
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
  background: var(--toss-blue-dark);
  padding: 7px 14px;
  border-radius: 999px;
}

.point-float {
  position: absolute;
  right: 24px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.3rem;
  box-shadow: var(--shadow-float);
}

.point-float > span {
  font-size: 0.82rem;
  color: var(--gray-300);
  font-weight: 600;
}

.point-float b {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Sections ---- */
.section {
  padding: var(--space-section) 0;
}

.section--gray {
  background: var(--gray-50);
}

.section__head {
  margin-bottom: clamp(2.6rem, 2rem + 2vw, 3.6rem);
}

.section__kicker {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--toss-blue-dark);
  margin-bottom: 0.7rem;
}

.section h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.section h2 .hl {
  color: var(--toss-blue);
}

/* ---- Intro ---- */
.intro {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  box-shadow: var(--shadow-card);
}

.intro__main {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--gray-800);
}

.intro__main b {
  color: var(--toss-blue-dark);
}

.intro__punch {
  margin: 1.6rem 0;
  padding: 1rem 1.3rem;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.2rem);
  font-weight: 800;
  color: var(--ink);
  background: var(--toss-blue-50);
  border-left: 4px solid var(--toss-blue);
  border-radius: 0;
}

.intro__sub {
  color: var(--gray-600);
  line-height: 1.7;
}

.intro__sub b {
  color: var(--ink);
}

/* ---- Benefits — 열 수를 명시해 고아 칸 없이 채운다
   1열 → 2열(7번 카드+피처가 각 2칸) → 3열(3+3+[1+피처2]) ---- */
.benefits {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit:nth-child(7) {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefit:nth-child(7) {
    grid-column: auto;
  }
}

.benefit {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast);
}

.benefit:hover {
  transform: translateY(-4px);
  border-color: var(--toss-blue-100);
}

.benefit:hover .ic-tile {
  transform: rotate(-6deg) scale(1.08);
}

.benefit h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.benefit p {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.55;
}

.benefit--feature {
  background: linear-gradient(160deg, #fffdf7, var(--gold-50));
  border-color: var(--gold-100);
}

.benefit--feature h3 {
  color: var(--gold-strong);
}

.benefit--feature:hover {
  border-color: #f3cd85;
}

.benefit--feature p {
  color: var(--gray-700);
}

@media (min-width: 640px) {
  .benefit--feature {
    grid-column: span 2;
  }

  .benefit--feature h3 {
    font-size: 1.25rem;
  }
}

.benefit__tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold-strong);
  background: var(--gold-100);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---- Points band ---- */
.section--point {
  background: radial-gradient(
      900px 340px at 50% 0%,
      rgba(49, 130, 246, 0.18),
      rgba(49, 130, 246, 0) 70%
    ),
    var(--ink);
}

.point-band {
  text-align: center;
  color: var(--white);
}

.point-band__kicker {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gold-bright);
  margin-bottom: 0.9rem;
}

.point-band h2 {
  color: var(--white);
}

.point-band h2 .big {
  position: relative;
  display: inline-block;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  color: var(--gold-bright);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* shimmer sweep over the gold number */
.shimmer {
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
}

.point-band.in .shimmer::after {
  animation: sweep 2.4s var(--ease) 0.7s 2;
}

@keyframes sweep {
  to {
    transform: translateX(140%) skewX(-18deg);
  }
}

.point-band p {
  margin: 1.5rem auto 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
}

.point-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.point-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 18px;
  border-radius: 999px;
}

.point-chips .ic {
  color: var(--gold-bright);
  width: 18px;
  height: 18px;
}

/* ---- Final CTA ---- */
.final {
  padding: var(--space-section) 0;
  background: linear-gradient(180deg, var(--white), var(--toss-blue-50));
  text-align: center;
}

.final__kicker {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--toss-blue-dark);
  margin-bottom: 0.8rem;
}

.final h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.final__sub {
  margin: 1.3rem auto 0;
  max-width: 480px;
  color: var(--gray-700);
  line-height: 1.7;
}

.final__sub b {
  color: var(--gold-strong);
}

.tel-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2.4rem;
  background: var(--toss-blue-dark);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 1.5rem 3.2rem;
  box-shadow: 0 18px 44px rgba(49, 130, 246, 0.4);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast);
}

/* pulse ring */
.tel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--toss-blue);
  opacity: 0;
  pointer-events: none;
}

.tel-card.in::before {
  animation: ring 2.6s var(--ease) infinite;
}

@keyframes ring {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}

.tel-card:hover {
  background: var(--toss-blue-deep);
  transform: translateY(-3px);
}

.tel-card:active {
  transform: scale(0.97);
}

.tel-card__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.tel-card__num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.tel-card__num .ic {
  width: 0.8em;
  height: 0.8em;
}

.tel-card__hint {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 600;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  margin-top: 2.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-700);
}

.trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ck {
  color: var(--toss-blue);
}

/* ---- Footer ---- */
.footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  padding: 1.6rem 0 5.6rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--gray-700);
}

/* ---- Sticky mobile CTA ---- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--gray-100);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s var(--dur);
}

.sticky-cta.on {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.sticky-cta__inner {
  width: min(1080px, 100% - 2rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.sticky-cta__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sticky-cta__txt b {
  font-size: 0.92rem;
  font-weight: 800;
}

.sticky-cta__txt span {
  font-size: 0.88rem;
  color: var(--gold-strong);
  font-weight: 700;
}

@media (min-width: 920px) {
  .sticky-cta {
    display: none;
  }

  .footer {
    padding-bottom: 1.6rem;
  }
}

/* ---- Reveal animation (.js 스코프) ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--rd, 0ms);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* 등장이 끝난 뒤(.done) 컴포넌트 고유 hover 전환으로 복귀 —
   쇼트핸드가 delay를 0으로 리셋해 스태거 지연이 hover에 남지 않는다 */
.js .benefit.reveal.done {
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast);
}

.js .tel-card.reveal.done {
  transition: transform var(--dur-fast) var(--ease),
    background var(--dur-fast);
}

/* .js .reveal.in의 transform:none(0,3,0)이 hover(0,2,0)를 이기므로
   .done 이후 hover/active 변형을 상위 특이성으로 복원한다 */
.js .benefit.reveal.done:hover {
  transform: translateY(-4px);
}

.js .tel-card.reveal.done:hover {
  transform: translateY(-3px);
}

.js .tel-card.reveal.done:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .stage,
  .js .stage-r,
  .js .stage-pop {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js body.loaded .stage-pop,
  body.loaded .stage-pop {
    transform: none;
  }

  body.loaded .float {
    animation: none;
  }

  .point-band.in .shimmer::after,
  .tel-card.in::before {
    animation: none;
  }

  .js .benefit.reveal.done,
  .js .tel-card.reveal.done {
    transition: none;
  }

  .hero::before,
  .hero::after {
    animation: none;
  }
}