/* 모바일에서만 쓰는 묶음 래퍼 — 데스크톱에서는 레이아웃에서 완전히 빠진다 */
.so-cmp-grid, .so-opt-tags, .so-proof-cols { display: contents; }

/* ============================================================
   솔루션 (solution.html) — Figma SOLUTION 섹션 (207:14680)
   SOLUTION 1~8 + 푸터. SOLUTION7만 호버 인터랙션.
   ============================================================ */

/* ---------------- SOLUTION 1 — 표지 ---------------- */
.so-hero { height: 1024px; background: #020202; }
/* 지평선 글로우는 Figma에서 프레임 아래가 기준 — 화면이 길어져도 같은 위치에서 잘린다 */
.so-eclipse {
  position: absolute;
  left: 440px; bottom: -739px;
  width: 1038.918px; height: 1340.3px;
  object-fit: fill;
}
.so-hero-h {
  position: absolute;
  left: calc(50% + 0.5px); top: calc(310px + (var(--vhz, 1024px) - 1024px) / 2);
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 5;
}
.so-hero-d {
  position: absolute;
  left: 50%; top: calc(456px + (var(--vhz, 1024px) - 1024px) / 2);
  transform: translateX(-50%);
  width: 752px;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 26px; line-height: 38px;
  color: #fff; text-align: center;
  z-index: 5;
}

/* ---------------- SOLUTION 2 — GPS로는 알 수 없는 세 가지 ---------------- */
.so-gap { height: 848px; background: #020202; }
.so-gap-h {
  position: absolute;
  left: 50%; top: 220px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
}
.so-gap-c {
  position: absolute;
  top: 397px;
  width: 427px;
  padding: 60px 40px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.so-gap-c.c1 { left: 280px; }
.so-gap-c.c2 { left: 746px; }
.so-gap-c.c3 { left: 1213px; }
.so-gap-c h3 {
  margin: 0; width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 26px; line-height: normal;
  color: #fff;
}
.so-gap-c p {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 18px; line-height: 26px;
  color: #fff;
}
.so-gap-c.c3 p { width: 356px; }

/* ---------------- SOLUTION 3 — 비교표 ---------------- */
.so-cmp { height: 1024px; background: #020202; }
.so-cmp-h {
  position: absolute;
  left: 280px; top: 201px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; white-space: nowrap;
}
/* 항목 이름 열 */
.so-cmp-label {
  position: absolute;
  left: 722px; top: 201px;
  width: 219px;
  display: flex; flex-direction: column; align-items: flex-start;
  border-top-left-radius: 5px;
  background: linear-gradient(-8.2948deg, rgb(0, 0, 0) 1.1762%, rgb(34, 34, 34) 104.1%);
}
.so-cmp-label .r {
  width: 100%; height: 87px;
  padding: 10px 24px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 20px; line-height: 38px;
  color: #6b7684; white-space: nowrap;
  border-bottom: 0.5px solid rgba(255, 255, 255, .12);
}
.so-cmp-label .r:nth-child(even) { height: 88px; }
.so-cmp-label .r:last-child { border-bottom: 0; }

/* 경쟁사 열 */
.so-cmp-head.rival {
  position: absolute;
  left: 941px; top: 121px;
  width: 330px; height: 80px;
  border-top-left-radius: 5px;
  background: #252525;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 26px; line-height: 38px;
  color: rgba(255, 255, 255, .74); white-space: nowrap;
}
.so-cmp-body.rival {
  position: absolute;
  left: 941px; top: 201px;
  width: 330px; height: 702px;
  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
  background: linear-gradient(158.9349deg, rgb(64, 64, 64) 3.4566%, rgb(9, 9, 9) 99.649%);
  display: flex; flex-direction: column; align-items: center;
}
.so-cmp-body.rival .r {
  flex: 1 0 0; min-height: 0; width: 100%;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 24px; line-height: 38px;
  color: #8b95a1; text-align: center; white-space: nowrap;
  position: relative;
}
.so-cmp-body.rival .r.no { color: #ef524f; }
.so-cmp-body.rival .r::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 0;
  height: 0.5px; background: rgba(255, 255, 255, .12);
}
.so-cmp-body.rival .r:last-child::after { display: none; }

/* 디라이브 열 */
.so-cmp-ours {
  position: absolute;
  left: 1264px; top: 121px;
  width: 376px;
  border: 2px solid #5384ff;
  border-radius: 5px;
  background:
    linear-gradient(-25.267deg, rgb(0, 50, 144) 4.9323%, rgb(57, 126, 255) 90.255%),
    linear-gradient(180deg, rgb(59, 134, 249) 0%, rgb(35, 79, 147) 100%);
  display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden;
}
.so-cmp-ours .head {
  width: 100%; height: 80px;
  background: #004bbd;
  border-top-left-radius: 5px; border-top-right-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 26px; line-height: 38px;
  color: #fff; white-space: nowrap;
}
.so-cmp-ours .body {
  width: 100%; height: 702px;
  display: flex; flex-direction: column; align-items: center;
}
.so-cmp-ours .body .r {
  position: relative;
  flex: 1 0 0; min-height: 0; width: 100%;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; white-space: nowrap;
}
.so-cmp-ours .body .r b {
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 24px; line-height: 38px;
  color: #fff;
}
.so-cmp-ours .body .r i {
  font-style: normal;
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 18px; line-height: normal;
  color: #b0b8c1;
}
.so-cmp-ours .body .r::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 0.5px; background: rgba(255, 255, 255, .2);
}
.so-cmp-ours .body .r:last-child::after { display: none; }

/* ---------------- SOLUTION 4 — 상태 데이터 / 운행 최적화 ---------------- */
.so-opt { height: 2144px; background: #020202; }
.so-band {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 2010px; height: 571px;
  background: #5384ff;
  overflow: hidden;
}
.so-band img { position: absolute; left: 0; top: -72.4%; width: 100%; height: 189.88%; opacity: .06; max-width: none; }
.so-opt-h {
  position: absolute;
  left: calc(50% + 0.5px); top: 123px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 3;
}
.so-tag {
  position: absolute;
  height: 106px;
  padding: 22px 40px;
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(7.6px);
  backdrop-filter: blur(7.6px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 24px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
  z-index: 3;
}
.so-tag.t1 { left: -30px;  top: 279px; width: 277px; }
.so-tag.t2 { left: 311px;  top: 353px; width: 276px; }
.so-tag.t3 { left: 652px;  top: 279px; width: 276px; }
.so-tag.t4 { left: 993px;  top: 353px; width: 276px; }
.so-tag.t5 { left: 1334px; top: 279px; width: 276px; }
.so-tag.t6 { left: 1674px; top: 353px; width: 277px; }
.so-opt-h2 {
  position: absolute;
  left: 50%; top: 813px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center; white-space: nowrap;
}
.so-opt-h2 em { font-style: normal; color: #3b86f9; }
.so-opt-old {
  position: absolute;
  left: 560px; top: 1166px;
  width: 803px; height: 197px;
  display: flex; flex-direction: column; align-items: center; gap: 58px;
  text-align: center;
}
.so-opt-old .t {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 36px; line-height: normal;
  color: #f9fafb;
}
.so-opt-old .d { width: 100%; height: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.so-opt-old .a {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 32px; line-height: normal; color: #fff;
}
.so-opt-old .b {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 24px; line-height: 38px;
  color: rgba(255, 255, 255, .6);
}
.so-opt-glow {
  position: absolute;
  left: 50%; top: 1536px;
  transform: translateX(-50%);
  width: 832px; height: 683px;
  margin-left: -0.5px;
}
.so-opt-arc {
  position: absolute;
  left: 50%; top: 1543px;
  transform: translateX(-50%);
  width: 2276px; height: 646px;
}
.so-opt-brand {
  position: absolute;
  left: calc(50% - 84px); top: 1613px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; white-space: nowrap;
  z-index: 3;
}
.so-opt-new {
  position: absolute;
  left: 668px; top: 1737px;
  width: 584px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
  z-index: 3;
}
.so-opt-new .a {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 36px; line-height: normal; color: #fff;
}
.so-opt-new .b {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 24px; line-height: 38px;
  color: rgba(255, 255, 255, .7); white-space: nowrap;
}

/* ---------------- SOLUTION 5 — 어디로 vs 어떻게 ---------------- */
.so-how { height: 1024px; background: #020202; }
.so-how-h {
  position: absolute;
  left: 280px; top: 210px;
  width: 530px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 32px; line-height: normal;
}
.so-how-h .a { width: 100%; font-family: 'Pretendard Variable'; font-weight: 500; color: rgba(255, 255, 255, .7); }
.so-how-h .b { width: 100%; font-family: 'Pretendard Variable'; font-weight: 700; color: #fff; }
.so-how-c {
  position: absolute;
  width: 680px; height: auto; min-height: 296px;   /* 영문처럼 글이 길어지면 패딩 유지한 채 늘어난다 */
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(110.3551deg, rgba(226, 228, 236, .12) 4.5608%, rgba(0, 0, 0, .12) 101.76%);
}
.so-how-c.old { left: 280px; top: 412px; padding: 60px 278px 84px 60px; }
.so-how-c.ours { left: 960px; top: 553px; padding: 60px 205px 84px 60px; }   /* 하단 패딩은 왼쪽 카드와 동일(84) */
.so-how-c .k { font-family: 'Pretendard Variable'; font-weight: 600; font-size: 26px; line-height: normal; white-space: nowrap; }
.so-how-c.old .k { color: #b0b8c1; }
.so-how-c.ours .k.brand { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #fff; }
.so-how-c .v { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 50px; }
/* 212px에서는 'GPS･경로･소요시간'이 음절 중간(소요시/간)에서 꺾였다 —
   내용 폭(342px) 안에서 항목당 한 줄씩 두 줄이 되게 넓힌다 */
.so-how-c.old .v { width: 342px; }
.so-how-c.ours .v { width: 415px; height: auto; min-height: 75px; }   /* 영문이 길어도 카드가 함께 늘어난다 (한글은 종전과 동일한 한 줄) */
.so-how-c .v p {
  width: 100%;
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 26px; line-height: normal;
  word-break: keep-all;   /* 한글이 음절 중간에서 끊기지 않게 */
}
.so-how-c.old .v p { color: #b0b8c1; }
.so-how-c.old .v p.s { font-weight: 700; }
.so-how-c.ours .v p { color: #fff; font-weight: 700; }

/* ---------------- SOLUTION 6 — 진짜 운전 점수 ---------------- */
.so-score { height: 1024px; background: #020202; }
.so-score-h {
  position: absolute;
  left: 280px; top: 192px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; white-space: nowrap;
}
/* 카드 간격이 39/41px로 균일하지 않아 Figma 좌표 그대로 절대 배치 */
.so-score-cards { position: absolute; left: 0; top: 452px; width: 1920px; height: 360px; }
.so-score-c {
  position: absolute; top: 0;
  width: 427px; height: 360px;
  border-radius: 5px;
  overflow: hidden;
  background: #1c1c1c;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 44px;
  padding-bottom: 40px;
}
.so-score-c:nth-child(1) { left: 280px; }
.so-score-c:nth-child(2) { left: 746px; }
.so-score-c:nth-child(3) { left: 1214px; }
.so-score-c .thumb { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; }
.so-score-c .thumb.h234 { height: 234px; }
.so-score-c .thumb.h179 { height: 179px; }
.so-score-c .thumb img { position: absolute; max-width: none; object-fit: cover; }
.so-score-c:nth-child(1) .thumb img { left: 0; top: 0; width: 427px; height: 234px; }
.so-score-c:nth-child(2) .thumb img { left: 0; top: -1.3px; width: 427px; height: 320.2px; }
.so-score-c:nth-child(3) .thumb img { left: 0; top: -52.8px; width: 427px; height: 284.7px; }
.so-score-c .body { width: 100%; padding: 0 40px; display: flex; flex-direction: column; gap: 14px; }
.so-score-c .body h3 {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 26px; line-height: normal;
  color: #fff; white-space: nowrap;
}
.so-score-c .body p {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 18px; line-height: 26px;
  color: rgba(255, 255, 255, .5);
}

/* ---------------- SOLUTION 7 — 실증 성과 (호버) ---------------- */
.so-proof { height: 1024px; background: #020202; }
.so-proof-col {
  position: absolute;
  top: -1px;
  width: 384px; height: 1025px;
  padding: 131px 31px 131px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  /* 기본은 30% — 마우스를 올린 열만 100%로 살아난다 (대표 지시) */
  opacity: .3;
  transition: opacity .38s ease;
}
.so-proof-col.p1 { left: 0; }
.so-proof-col.p2 { left: 384px; }
.so-proof-col.p3 { left: 768px; padding: 131px 30px 131px 31px; }
.so-proof-col.p4 { left: 1152px; }
.so-proof-col.p5 { left: 1536px; }
/* 호버한 열은 위쪽 어둡게 깔린 그라데이션보다 앞으로 나와 사진이 그대로 보인다 (Figma SOLUTION7.1) */
.so-proof-col:hover,
.so-proof-col:focus-visible,
.so-proof-col.is-hover { opacity: 1; z-index: 4; }

.so-proof-col .ph { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 위쪽은 .so-proof-scrim이 덮는다. 아래쪽도 같은 방식으로 사진만 서서히 사라지게 —
   .ph 안에 두므로 글자(z-index 2)에는 영향이 없다. 호버하면 위와 함께 걷힌다. */
.so-proof-col .ph::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 606px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .94) 75.481%);
  transition: opacity .38s ease;
}
.so-proof-col:hover .ph::after,
.so-proof-col:focus-visible .ph::after,
.so-proof-col.is-hover .ph::after { opacity: 0; }
.so-proof-col .ph img {
  position: absolute; max-width: none;
  /* 호버 시 배경만 아주 살짝 확대 — 글자는 그대로 */
  transform-origin: center;
  transition: transform .7s cubic-bezier(.22, .68, .24, 1);
}
.so-proof-col:hover .ph img,
.so-proof-col:focus-visible .ph img,
.so-proof-col.is-hover .ph img { transform: scale(1.06); }
.so-proof-col.p1 .ph img { left: -215.65%; top: 0;       width: 400.34%; height: 100%; }
.so-proof-col.p2 .ph img { left: -381.34%; top: -16.27%; width: 511.11%; height: 127.67%; }
.so-proof-col.p3 .ph img { left: -139.91%; top: -6.74%;  width: 403.85%; height: 113.47%; }
.so-proof-col.p4 .ph img { left: -295.94%; top: -1.57%;  width: 475.68%; height: 118.82%; }
.so-proof-col.p5 .ph img { left: -139.01%; top: 0;       width: 400.34%; height: 100%; }

/* 작은 설명글은 소제목 바로 밑에 숨겨 뒀다가 호버할 때만 펼친다 (대표 지시).
   소제목↔설명 14px / 설명↔수치 28px. 값 묶음이 아래에 붙어 있어 펼치면 소제목이 위로 올라간다. */
.so-proof-col .cap-wrap {
  width: 100%;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .38s ease, opacity .28s ease;
}
.so-proof-col .cap {
  position: relative; z-index: 2;
  width: 323px; margin: 0 auto;
  padding: 14px 0 28px;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 22px; line-height: normal;
  color: #fff; text-align: center; word-break: keep-all;
}
.so-proof-col:hover .cap-wrap,
.so-proof-col:focus-visible .cap-wrap,
.so-proof-col.is-hover .cap-wrap { max-height: 260px; opacity: 1; }
.so-proof-col .val {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.so-proof-col .val .t {
  width: 323px;
  margin-bottom: 27px;                    /* 호버 전에는 소제목↔수치 27px 그대로 */
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 30px; line-height: normal;
  color: #fff; text-align: center;
  transition: margin-bottom .38s ease;
}
.so-proof-col:hover .val .t,
.so-proof-col:focus-visible .val .t,
.so-proof-col.is-hover .val .t { margin-bottom: 0; }
.so-proof-col .val .n {
  display: flex; align-items: center; gap: 14px;
  line-height: 82px; color: #fff; white-space: nowrap;
}
.so-proof-col .val .n b { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 70px; }
.so-proof-col .val .n span { font-family: 'Pretendard Variable'; font-weight: 400; font-size: 50px; }

.so-proof-scrim {
  position: absolute;
  left: 0; top: -1px;
  width: 1920px; height: 606px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .94) 75.481%);
  pointer-events: none;
  z-index: 3;
}
.so-proof-h {
  position: absolute;
  left: calc(50% + 0.5px); top: 188px;
  transform: translateX(-50%);
  width: 543px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; text-align: center;
  pointer-events: none;
  z-index: 5;
}

/* ---------------- SOLUTION 8 — 맞춤 FMS ---------------- */
.so-fit { height: 1024px; background: var(--paper); }
.so-fit-bg { position: absolute; left: -111px; top: -320px; width: 2132px; height: 973px; overflow: hidden; }
.so-fit-bg img { position: absolute; left: 0; top: -0.03%; width: 100%; height: 146.1%; max-width: none; object-fit: cover; }
.so-fit-bg i { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.so-fit-h {
  position: absolute;
  left: calc(50% - 342px); top: 196px;
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: #fff; white-space: nowrap;
  z-index: 3;
}
.so-fit-c {
  position: absolute;
  top: 444px;
  width: 427px; height: 428px;
  padding: 40px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--gray100);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 97px;
  z-index: 3;
}
.so-fit-c.f1 { left: 280px; }
.so-fit-c.f2 { left: 746.5px; }
.so-fit-c.f3 { left: 1214px; }
.so-fit-c .grad { position: absolute; left: -1px; top: 0; width: 428px; height: 433px; }
.so-fit-c .grad.blue { background: linear-gradient(to right, #306fff, #7ea5ff); }
.so-fit-c .grad.dark { background: linear-gradient(to right, #2d2f32, #585c63); }
.so-fit-c .shine {
  position: absolute;
  left: -1px; top: 0;
  width: 671.5px; height: 370px;
  background-repeat: no-repeat;
  background-size: 728.099px 426.6px;
  background-position: -28.3px -28.3px;
  pointer-events: none;
}
.so-fit-c .tx {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 43px;
}
.so-fit-c .tx h3 {
  margin: 0;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 30px; line-height: normal;
  color: #fff; white-space: nowrap;
}
.so-fit-c .tx p {
  width: 340px;
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 22px; line-height: 30px;
  color: #d1d6db;
}

/* 모바일 전용 요소 — 데스크톱에서는 원래 구조 유지 */
.so-opt-row { display: contents; }
.so-proof-arrow { display: none; }
.so-cmp-h .cmp-br { display: inline; }

/* 비교표 라벨의 모바일 전용 줄바꿈 — 데스크톱은 한 줄 유지 */
.cmb { display: none; }

/* 영문 비교표 라벨 — 한 줄로는 열 폭(219px)을 넘어 뒤 열에 가려진다.
   행 높이·패딩은 그대로 두고 두 줄로 접는다 (자연 줄바꿈, 대표 지시) */
html[lang="en"] .so-cmp-label .r {
  white-space: normal;
  line-height: 26px;
  word-break: normal;
}