/* KMB landing — frame based on reference/kmb.png (981px wide) */
:root {
  --pink: #ff4f93;
  --pink-soft: #ffe4ee;
  --ink: #15151c;
  --gray: #6b6b78;
  --line: #ececf2;
  --dark: #121218;
  --page-w: 981px;
  --gutter: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: var(--page-w);
  background: #fff;
  color: var(--ink);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
body > * { width: var(--page-w); margin-left: auto; margin-right: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--pink); }

/* ---------- placeholders ---------- */
.ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9e9ef, #d7d7e0);
  overflow: hidden;
}
.ph > span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(0,0,0,.28); }
.ph-dark { background: linear-gradient(135deg, #2a2a33, #3b3b46); }
.ph-dark > span { color: rgba(255,255,255,.18); }
.ico { display: inline-block; flex: none; border-radius: 8px; background: #dcdce6; }

/* ---------- common ---------- */
.eyebrow { font-size: 11px; font-weight: 700; color: var(--pink); letter-spacing: .01em; line-height: 16px; }
.sec-title { font-size: 27px; font-weight: 900; line-height: 34px; letter-spacing: -0.04em; margin-top: 4px; }
.sec-title.sm { font-size: 20px; line-height: 26px; font-weight: 800; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(30,20,60,.06); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 22px; border-radius: 17px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 6px 16px rgba(255,79,147,.35); }
.btn-line { border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.btn-sm { height: 29px; padding: 0 14px; font-size: 11.5px; gap: 6px; }
.arr { font-size: 13px; }
.play { width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ico-chat { width: 11px; height: 10px; border: 1.5px solid #fff; border-radius: 50% 50% 50% 0; }

/* ---------- header ---------- */
.header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  height: 55px;
  display: flex; align-items: center;
  padding: 0 32px 0 36px;
}
.logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.logo-mark { width: 30px; height: 26px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 2px solid #fff; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text strong { font-size: 15px; font-weight: 700; letter-spacing: -0.03em; }
.logo-text small { font-size: 5.5px; letter-spacing: .12em; margin-top: 4px; opacity: .85; }
.gnb { display: flex; gap: 0; margin-left: 57px; }
.gnb a { position: relative; color: #fff; font-size: 11.5px; font-weight: 500; padding: 0 17.5px; line-height: 55px; }
.gnb a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 13px; width: 12px; height: 2px; margin-left: -6px; background: var(--pink); }
.header .btn { margin-left: auto; }

/* ---------- hero ---------- */
.hero { position: relative; height: 392px; color: #fff; overflow: hidden; background: var(--dark); }
.hero-photo { position: absolute; inset: 0 0 0 360px; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #15151b 0%, #15151b 36%, rgba(21,21,27,.65) 50%, rgba(21,21,27,0) 70%); }
.hero-inner { position: relative; padding: 91px 0 0 var(--gutter); }
.hero-sub { font-size: 20px; font-weight: 700; line-height: 26px; letter-spacing: -0.03em; }
.hero-title { font-size: 54px; font-weight: 900; line-height: 64px; letter-spacing: -0.05em; margin-top: 2px; }
.hero-desc { font-size: 13.5px; line-height: 21px; margin-top: 10px; opacity: .92; }
.hero-btns { display: flex; gap: 8px; margin-top: 21px; }
.hero-btns .btn-pink { width: 160px; }
.hero-btns .btn-line { width: 113px; padding: 0; }
.hero-feats { display: flex; margin-top: 36px; margin-left: 5px; }
.hero-feats li { display: flex; align-items: center; gap: 12px; }
.hero-feats li:nth-child(1) { width: 148px; }
.hero-feats li:nth-child(2) { width: 157px; }
.hero-feats li:nth-child(3) { width: 145px; }
.hero-feats .ico-line { width: 30px; height: 26px; background: none; border: 1.5px solid rgba(255,255,255,.85); border-radius: 8px; }
.hero-feats div { display: flex; flex-direction: column; line-height: 16px; }
.hero-feats b { font-size: 11px; font-weight: 700; }
.hero-feats div span { font-size: 10px; opacity: .8; }

.hand { position: absolute; font-family: 'Nanum Pen Script', cursive; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.hand-top { top: 58px; right: 26px; font-size: 25px; line-height: 30px; transform: rotate(-9deg); text-align: left; }
.hand-top::after { content: ''; position: absolute; left: 12px; right: 2px; bottom: -6px; height: 2px; background: var(--pink); border-radius: 2px; }
.hand-bottom { top: 270px; right: 36px; font-size: 30px; line-height: 34px; transform: rotate(-12deg); text-align: right; }
.hand-bottom::after { content: ''; position: absolute; left: -20px; right: -10px; bottom: -6px; height: 3px; background: var(--pink); border-radius: 2px; }

/* ---------- program ---------- */
.program { height: 290px; padding: 20px var(--gutter) 0; background: linear-gradient(180deg, #fbf7fb, #f6f2f8); }
.sec-head.row { display: flex; justify-content: space-between; align-items: flex-end; }
.sec-side { font-size: 11.5px; line-height: 17px; color: #444; margin: 0 0 10px; }
.prog-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 11px; }
.prog-card { height: 188px; overflow: hidden; }
.prog-card .ph { height: 110px; }
.prog-body { display: flex; gap: 9px; padding: 11px 10px 0 11px; }
.num { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--pink-soft); color: #e0336f; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.prog-body h3 { font-size: 12.5px; font-weight: 800; line-height: 21px; }
.prog-body p { font-size: 10px; line-height: 16px; color: var(--gray); margin-top: 4px; }

/* ---------- league ---------- */
.league { position: relative; height: 238px; color: #fff; overflow: hidden; }
.league-bg { position: absolute; inset: 0; }
.league-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,14,.75), rgba(10,10,14,.2)); }
.league-text { position: relative; padding: 23px 0 0 var(--gutter); }
.league .eyebrow { color: #ff6aa5; }
.league-desc { font-size: 13px; line-height: 19px; margin-top: 15px; opacity: .92; }
.league .btn { width: 160px; height: 32px; margin-top: 12px; }
.teams { position: absolute; top: 60px; left: 340px; display: flex; gap: 8px; }
.team {
  --c: #2a5bd7;
  position: relative; width: 113.6px; height: 162px; padding-top: 27px;
  border: 1.5px solid var(--c); border-radius: 9px; text-align: center; overflow: visible;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #0b0b12), color-mix(in srgb, var(--c) 25%, #0b0b12));
}
.t-blue { --c: #3567d6; }
.t-red { --c: #d93a3a; }
.t-green { --c: #3a9a4a; }
.t-yellow { --c: #e2b820; }
.t-purple { --c: #9a4fd6; }
.emblem {
  position: absolute; top: -33px; left: 50%; width: 44px; height: 56px; margin-left: -22px;
  background: var(--c); border: 3px solid #fff; border-radius: 6px 6px 50% 50% / 6px 6px 60% 60%;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.team h3 { font-size: 15px; font-weight: 800; line-height: 20px; }
.team p { font-size: 9.5px; line-height: 14px; margin-top: 1px; opacity: .9; }
.team-photo { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.14)); }
.team-photo > span { color: rgba(255,255,255,.35); }

/* ---------- how it works ---------- */
.how { position: relative; height: 385px; background: linear-gradient(180deg, #f8f7fc, #f4f2f9); }
.how-main { padding: 18px 0 0 var(--gutter); }
.steps { display: flex; gap: 7px; margin: 11px 0 0 -10px; }
.step { width: 146px; height: 83px; display: flex; gap: 9px; padding: 21px 0 0 11px; white-space: nowrap; }
.step:last-child { width: 156px; }
.step .ico { width: 34px; height: 30px; background: #c9c6f4; }
.step:nth-child(2) .ico { background: #d2b8f2; }
.step:nth-child(3) .ico { background: #b7dcf0; }
.step:nth-child(4) .ico { background: #f6cf9c; }
.step h3 { font-size: 12px; font-weight: 800; line-height: 18px; }
.step h3 i { font-style: normal; font-weight: 500; color: #5b4fe0; margin-right: 3px; }
.step p { font-size: 9.5px; letter-spacing: -0.04em; line-height: 15px; color: var(--gray); margin-top: 4px; }

.day-eyebrow { margin-top: 28px; }
.timeline { position: relative; display: flex; margin-top: 9px; }
.timeline::before { content: ''; position: absolute; left: 6px; width: 575px; top: 77px; height: 1px; background: #f6b8cf; }
.timeline li { position: relative; display: flex; flex-direction: column; width: 145px; }
.timeline li:nth-child(3) { width: 152px; }
.timeline .ph { width: 128px; height: 83px; border-radius: 6px; }
.timeline .dot { position: absolute; left: 0; top: 72px; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pink); }
.timeline b { font-size: 12px; font-weight: 800; line-height: 15px; margin-top: 6px; }
.timeline li > span { font-size: 10.5px; line-height: 15px; color: #444; }

.phone {
  position: absolute; left: 632px; top: 47px; width: 190px; height: 316px;
  padding: 8px; border-radius: 30px;
  background: #1d1f24; box-shadow: 0 18px 36px rgba(20,20,40,.28), inset 0 0 0 2px #5a5d66;
  transform: rotate(4deg);
}
.phone-screen { height: 100%; border-radius: 23px; background: #f6f6fa; padding: 10px 10px 0; overflow: hidden; }
.phone-status { display: flex; justify-content: space-between; font-size: 7px; font-weight: 700; padding: 0 6px; }
.app-card { background: #fff; border-radius: 10px; padding: 8px 8px 10px; margin-top: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.app-title { font-size: 9.5px; font-weight: 700; }
.rings { display: flex; justify-content: space-between; margin-top: 6px; }
.rings > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rings small { font-size: 7.5px; font-weight: 700; }
.ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #c69cf3; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring.r2 { border-color: #8cc7f2; }
.ring.r3 { border-color: #cfe58a; }
.ring b { font-size: 11px; font-weight: 800; }
.ring i { font-size: 5.5px; font-style: normal; color: var(--gray); margin-top: 2px; }
.bars { display: flex; align-items: flex-end; justify-content: space-around; height: 96px; margin-top: 6px; padding: 0 4px; }
.bars span { width: 9px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, #4f8df5, #8a5cf0); }
.days { display: flex; justify-content: space-around; font-size: 7px; color: var(--gray); margin-top: 4px; padding: 0 4px; }

.report {
  position: absolute; left: 822px; top: 70px; width: 140px; height: 220px;
  padding: 26px 12px 0 14px; border-radius: 10px;
  background: linear-gradient(180deg, #fde7ef, #fbe3ec);
}
.report h3 { font-size: 12.5px; font-weight: 800; line-height: 18px; padding-bottom: 9px; border-bottom: 1px solid #f3c9d8; }
.report li { position: relative; font-size: 10px; line-height: 32px; padding-left: 18px; border-bottom: 1px solid #f6d6e2; }
.report li:last-child { border-bottom: 0; }
.report li::before { content: ''; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border: 1.5px solid var(--pink); border-radius: 2px; }

/* ---------- rewards + community ---------- */
.bottom { display: flex; height: 215px; padding: 12px var(--gutter) 0; background: #fff; }
.rewards { flex: none; width: 454px; }
.reward-list { display: flex; gap: 5px; margin: 12px 0 0 -2px; }
.reward-list li { width: 84px; height: 107px; border-radius: 10px; background: #fff0f5; display: flex; flex-direction: column; align-items: center; padding-top: 17px; }
.reward-list .ico { width: 34px; height: 34px; border-radius: 50%; background: #ffd0df; }
.reward-list b { font-size: 10.5px; font-weight: 800; margin-top: 15px; line-height: 14px; }
.reward-list small { font-size: 7px; color: var(--gray); margin-top: 4px; white-space: nowrap; letter-spacing: -0.05em; }
.community { flex: 1; }
.comm-list { display: flex; gap: 13px; margin-top: 11px; }
.comm-list li { width: 138px; display: flex; flex-direction: column; }
.comm-list .ph { height: 74px; border-radius: 6px; margin-bottom: 9px; }
.comm-list b { font-size: 11.5px; font-weight: 800; line-height: 17px; padding-left: 6px; }
.comm-list li > span { font-size: 10px; color: var(--gray); line-height: 17px; margin-top: 2px; padding-left: 6px; }

/* ---------- CTA footer ---------- */
.cta { position: relative; height: 84px; display: flex; align-items: center; padding: 0 var(--gutter); color: #fff; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: linear-gradient(90deg, #3e4b66, #6a6e8a 50%, #3c4a62); }
.cta > *:not(.cta-bg) { position: relative; }
.cta-text { font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -0.03em; }
.cta .btn { width: 132px; height: 32px; margin-left: 24px; padding: 0; }
.cta-brand { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cta-brand .logo-mark { width: 24px; height: 21px; }
.cta-brand .logo-text strong { font-size: 12px; }
.cta-brand .logo-text small { font-size: 4.5px; }
.cta-brand p { font-size: 11px; }

/* ---------- menu button (mobile only) ---------- */
.menu-btn { display: none; }

/* =========================================================
   Mobile / tablet (≤ 980px)
   ========================================================= */
@media (max-width: 980px) {
  :root { --gutter: 20px; }
  body { min-width: 0; overflow-x: hidden; font-size: 13px; }
  body > * { width: auto; }

  .sec-title { font-size: 26px; line-height: 34px; }
  .sec-title.sm { font-size: 21px; line-height: 28px; }
  .eyebrow { font-size: 12px; }

  /* rows that swipe sideways */
  .prog-list, .teams, .reward-list {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter); padding-right: var(--gutter);
    scroll-padding-left: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .prog-list::-webkit-scrollbar, .teams::-webkit-scrollbar, .reward-list::-webkit-scrollbar { display: none; }
  .prog-list > li, .team, .reward-list li { flex: none; scroll-snap-align: start; }

  /* header */
  .header {
    position: fixed; height: 56px; padding: 0 12px 0 var(--gutter);
    background: rgba(18,18,24,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .logo-mark { width: 26px; height: 23px; }
  .logo-text strong { font-size: 14px; }
  .header .btn { margin-left: auto; }
  .menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 6px; background: none; border: 0; cursor: pointer;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; position: relative; transition: transform .2s, background .2s;
  }
  .menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .header.is-open .menu-btn span { background: transparent; }
  .header.is-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
  .header.is-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

  .gnb {
    display: none; position: absolute; top: 56px; left: 0; right: 0; margin: 0;
    flex-direction: column; background: rgba(18,18,24,.97); padding: 6px 0 12px;
  }
  .header.is-open .gnb { display: flex; }
  .gnb a { font-size: 15px; line-height: 50px; padding: 0 var(--gutter); border-top: 1px solid rgba(255,255,255,.08); }
  .gnb a.is-active { color: var(--pink); }
  .gnb a.is-active::after { display: none; }

  /* hero */
  .hero { height: auto; padding-bottom: 44px; }
  .hero-photo { inset: 0; }
  .hero-shade { background: linear-gradient(180deg, rgba(21,21,27,.55) 0%, rgba(21,21,27,.8) 45%, rgba(21,21,27,.95) 100%); }
  .hero-inner { padding: 104px var(--gutter) 0; }
  .hero-sub { font-size: 17px; line-height: 24px; }
  .hero-title { font-size: clamp(34px, 10vw, 56px); line-height: 1.2; margin-top: 4px; }
  .hero-desc { font-size: 14px; line-height: 22px; margin-top: 12px; }
  .hero-desc br { display: none; }
  .hero-btns { flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .hero-btns .btn { height: 44px; border-radius: 22px; font-size: 14px; }
  .hero-btns .btn-pink { width: auto; padding: 0 24px; }
  .hero-btns .btn-line { width: auto; padding: 0 20px; }
  .hero-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin: 36px 0 0; }
  .hero-feats li, .hero-feats li:nth-child(n) { width: auto; gap: 10px; }
  .hero-feats b { font-size: 13px; }
  .hero-feats div span { font-size: 11.5px; }
  .hand-top { position: relative; top: auto; right: auto; display: inline-block; margin: 36px 0 0 var(--gutter); font-size: 24px; transform: rotate(-4deg); }
  .hand-bottom { display: none; }
  .league-bg > span, .cta-bg > span { display: none; }

  /* program */
  .program { height: auto; padding: 48px var(--gutter); }
  .sec-head.row { flex-direction: column; align-items: flex-start; }
  .sec-side { font-size: 13px; line-height: 20px; margin: 10px 0 0; }
  .sec-side br { display: none; }
  .prog-list { gap: 12px; margin-top: 22px; padding-bottom: 8px; }
  .prog-card { width: 230px; height: auto; padding-bottom: 18px; }
  .prog-card .ph { height: 140px; }
  .prog-body { padding: 14px 12px 0 14px; }
  .prog-body h3 { font-size: 14px; }
  .prog-body p { font-size: 12px; line-height: 18px; }

  /* league */
  .league { height: auto; padding: 48px 0 40px; }
  .league-shade { background: linear-gradient(180deg, rgba(10,10,14,.8), rgba(10,10,14,.6)); }
  .league-text { padding: 0 var(--gutter); }
  .league-desc { font-size: 14px; line-height: 22px; }
  .league .btn { height: 44px; border-radius: 22px; width: auto; padding: 0 24px; font-size: 14px; margin-top: 20px; }
  .teams { position: relative; top: auto; left: auto; gap: 10px; margin: 8px 0 0; padding-top: 44px; padding-bottom: 8px; }
  .team { width: 148px; height: 200px; padding-top: 30px; }
  .team h3 { font-size: 16px; }
  .team p { font-size: 11px; line-height: 16px; }
  .team-photo { height: 100px; }

  /* how it works */
  .how { height: auto; padding: 48px var(--gutter); }
  .how-main { padding: 0; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }
  .step, .step:last-child { width: auto; height: auto; flex-direction: column; gap: 10px; padding: 16px 14px; white-space: normal; }
  .step h3 { font-size: 14px; }
  .step p { font-size: 12px; line-height: 18px; letter-spacing: -0.02em; }
  .step p br { display: none; }

  .day-eyebrow { margin-top: 44px; }
  .timeline { flex-direction: column; gap: 14px; margin-top: 18px; }
  .timeline::before { left: 5px; top: 30px; bottom: 30px; width: 1px; height: auto; }
  .timeline li, .timeline li:nth-child(3) {
    width: auto; display: grid; grid-template-columns: 130px 1fr; grid-template-rows: 1fr 1fr;
    column-gap: 14px; padding-left: 24px;
  }
  .timeline .ph { grid-row: 1 / 3; width: 130px; height: 84px; }
  .timeline .dot { top: 36px; }
  .timeline b { align-self: end; margin: 0; font-size: 15px; line-height: 20px; }
  .timeline li > span { align-self: start; font-size: 13px; line-height: 19px; margin-top: 2px; }

  .phone { position: relative; left: auto; top: auto; width: 230px; height: 380px; margin: 48px auto 0; transform: rotate(3deg); }
  .bars { height: 130px; }
  .report { position: static; width: auto; height: auto; margin-top: 32px; padding: 24px 20px 10px; }
  .report h3 { font-size: 16px; line-height: 23px; }
  .report li { font-size: 13px; line-height: 44px; padding-left: 22px; }
  .report li::before { top: 16px; width: 11px; height: 11px; }

  /* rewards + community */
  .bottom { flex-direction: column; height: auto; padding: 48px var(--gutter); }
  .rewards { width: auto; }
  .reward-list { gap: 10px; margin-top: 18px; padding-bottom: 8px; }
  .reward-list li { width: 128px; height: auto; padding: 20px 8px 16px; }
  .reward-list .ico { width: 40px; height: 40px; }
  .reward-list b { font-size: 13px; line-height: 18px; margin-top: 14px; }
  .reward-list small { font-size: 10.5px; line-height: 15px; letter-spacing: -0.04em; }
  .community { margin-top: 44px; }
  .comm-list { flex-direction: column; gap: 16px; margin-top: 18px; }
  .comm-list li { width: auto; display: grid; grid-template-columns: 130px 1fr; grid-template-rows: 1fr auto 1fr; column-gap: 14px; }
  .comm-list .ph { grid-row: 1 / 4; height: 88px; margin: 0; }
  .comm-list b { grid-row: 2; font-size: 14px; line-height: 20px; padding: 0; }
  .comm-list li > span { grid-row: 3; align-self: start; font-size: 12.5px; line-height: 18px; padding: 0; }
  .comm-list b br { display: none; }

  /* CTA footer */
  .cta { height: auto; flex-direction: column; align-items: flex-start; padding: 44px var(--gutter) 36px; }
  .cta-bg { background: linear-gradient(180deg, #3e4b66, #5a5f7c); }
  .cta-text { font-size: 19px; line-height: 28px; }
  .cta .btn { width: auto; height: 44px; border-radius: 22px; padding: 0 24px; margin: 22px 0 0; font-size: 14px; }
  .cta-brand { margin: 36px 0 0; align-items: flex-start; }
  .cta-brand p { font-size: 13px; }
}

@media (min-width: 640px) and (max-width: 980px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .comm-list { flex-direction: row; }
  .comm-list li { flex: 1; grid-template-columns: 1fr; grid-template-rows: auto; }
  .comm-list .ph { grid-row: auto; height: 120px; margin-bottom: 10px; }
  .comm-list b, .comm-list li > span { grid-row: auto; }
}