/* ==========================================================================
   Connector — 페이지 컴포넌트

   설계 원칙 (brand.css 의 테두리 정책과 함께 읽을 것)
   · 위계는 여백과 타이포로 만든다. 콘텐츠를 박스로 감싸지 않는다.
   · 구분이 꼭 필요한 곳에만 --sp-rule 헤어라인 1개.
   · 테두리는 '누를 수 있다 / 입력할 수 있다'는 신호일 때만.
   ========================================================================== */

/* --------------------------------------------------------------------------
   히어로 — 한 화면, 한 메시지 (가이드 p.9)
   -------------------------------------------------------------------------- */

/* 히어로 — 본문 컨테이너(880px) 안에서 2단 구성.
   왼쪽 글, 오른쪽 그림. 화면 폭이 바뀌어도 그림 크기는 변하지 않는다. */
.hero { padding: var(--gap-3xl) 0 var(--gap-2xl); }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-art-w);
  gap: var(--gap-xl);
  align-items: center;
}

/* 그림은 고정 폭. vw 를 쓰면 창을 키울 때 같이 커져 크기가 들쭉날쭉해진다.
   380px 은 상한이다 — 컨테이너 880px 에서 글 칸이 460px 남는데,
   헤드라인 첫 줄("답은 이미 겪어본")이 68px 기준 430px 라 여유가 30px 뿐이다.
   이보다 키우면 헤드라인이 세 줄로 접힌다. */
:root { --hero-art-w: 380px; }
.hero__art {
  width: var(--hero-art-w);
  height: auto;
  justify-self: end;
  pointer-events: none;
  user-select: none;
}

.hero__eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: var(--gap-lg); }
/* em 으로 폭을 잡아 글자 크기가 바뀌어도 같은 지점에서 줄이 나뉘게 한다.
   (px 로 잡으면 clamp 로 폰트가 줄었을 때 한 줄이 되어버린다)
   balance 는 두 줄의 길이를 고르게 맞춘다. keep-all 이 어절을 지켜 준다. */
.hero__title { max-width: 9.2em; text-wrap: balance; }
.hero__lead {
  margin: var(--gap-lg) 0 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.75;
  color: var(--sp-charcoal);
}

/* --------------------------------------------------------------------------
   신청 절차 3단계
   실제로 순서가 있는 내용이라 번호를 쓴다 (장식이 아니라 정보).
   박스로 나누지 않고 열 간격과 번호만으로 구분한다.
   -------------------------------------------------------------------------- */

.how { padding: 0 0 var(--gap-2xl); }
.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xl);
  padding-top: var(--gap-xl);
  border-top: 1px solid var(--sp-rule);
}
.how__num {
  display: block;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: var(--ls-label);
  color: var(--sp-orange-deep);
  margin-bottom: 14px;
}
.how__item h3 {
  font-size: 17px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em;
  line-height: 1.4;
}
.how__item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sp-muted); }

/* --------------------------------------------------------------------------
   필터 바 — 아래 헤어라인 하나만. 위아래로 감싸지 않는다.
   -------------------------------------------------------------------------- */

/* 목록 맨 위에 그대로 둔다. 따라다니지 않는다.

   ⚠️ 예전에는 position:sticky (top:68px) 로 붙여 두고, 아래로 스크롤하면
   translateY 로 접고 위로 올리면 다시 내리는 식이었다. 두 가지가 깨졌다.
     · 되돌아오는 0.24초 동안 반투명 상태로 카드 위에 겹쳐 그려졌다 —
       칩 글자와 자문 소개 글이 서로 뚫고 나왔다.
     · 다 내려온 뒤에도 paper 배경이 카드 상단(사진·이름·태그)을 덮어서,
       목록을 훑다 살짝만 올려도 첫 카드가 잘려 보였다.
   z-index 나 배경으로 덮는 문제라 애니메이션만 손봐서는 해결되지 않는다.
   화면 위를 떠다니지 않게 하는 것이 유일하게 확실한 방법이다. */
.listbar {
  background: var(--sp-paper);
  border-bottom: 1px solid var(--sp-rule);
  padding: var(--gap-md) 0 var(--gap-md);
}
.listbar__row { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
.listbar__row + .listbar__row { margin-top: 12px; }
.listbar__label { flex: none; }

/* 칩·태그는 누를 수 있는 것이라 테두리를 남긴다 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--sp-line);
  background: transparent;
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 14px; font-weight: 600;
  color: var(--sp-charcoal);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--sp-black); color: var(--sp-black); }
.chip[aria-checked="true"] { background: var(--sp-black); border-color: var(--sp-black); color: var(--sp-paper); }

.search { position: relative; flex: 1; min-width: 220px; }
.search .input { padding-left: 38px; font-size: 15px; padding-top: 9px; padding-bottom: 9px; }
.search__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border: 2px solid var(--sp-muted); border-radius: 50%;
  pointer-events: none;
}
.search__icon::after {
  content: ''; position: absolute; right: -5px; bottom: -4px;
  width: 7px; height: 2px; background: var(--sp-muted); transform: rotate(45deg);
}

.listbar__count { flex: none; font-size: 14px; color: var(--sp-muted); font-weight: 600; }
.listbar__count b { color: var(--sp-black); font-family: var(--font-display); }
.listbar__reset {
  border: 0; background: none; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--sp-muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.listbar__reset:hover { color: var(--sp-orange-deep); }

/* --------------------------------------------------------------------------
   어드바이저 목록
   카드(흰 박스 + 외곽선)를 쓰지 않는다. 인물 사이 헤어라인 하나로만 나눈다.
   사진은 흑백, 컬러는 행동(오렌지)에만 — 가이드 p.9
   -------------------------------------------------------------------------- */

.list { padding: var(--gap-xl) 0 0; }
.list__stack { display: flex; flex-direction: column; }

.person {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--gap-xl);
  align-items: start;
  padding: var(--gap-xl) 0;
  border-bottom: 1px solid var(--sp-rule);
}
.person:last-of-type { border-bottom: 0; }

.person__photo {
  width: 132px; height: 132px;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.04);
  background: var(--sp-gray);
}

.person__name {
  font-size: 27px; font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.15; margin: 0;
}
.person__role {
  margin: 7px 0 0;
  font-size: 15px; color: var(--sp-muted); line-height: 1.55;
}
.person__role b { color: var(--sp-charcoal); font-weight: 700; }

.person__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--gap-md); }
.tag {
  border: 1px solid var(--sp-line);
  background: transparent;
  padding: 4px 10px;
  font-size: 13px; font-weight: 600; color: var(--sp-charcoal);
  cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.tag:hover { border-color: var(--sp-orange); color: var(--sp-orange-deep); }

.person__intro {
  margin: var(--gap-md) 0 0;
  max-width: 54ch;
  font-size: 16px; line-height: 1.7; color: var(--sp-charcoal);
}
/* 키워드는 부차 정보 — 구분선 없이 옅게 흘려 둔다 */
.person__keywords {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--sp-muted);
}

/* CTA 는 세 번째 열. 카드 하단 구분선이 필요 없어진다. */
.person__cta {
  flex: none;
  padding-top: 4px;
  font-size: 15px; font-weight: 700; color: var(--sp-orange-deep);
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.person:hover .person__cta .sp-chev,
.person__cta:hover .sp-chev { transform: rotate(45deg) translate(2px, -2px); }
.person__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

.empty { padding: var(--gap-2xl) 0; text-align: center; }
.empty p { margin: 0 0 6px; font-weight: 700; }

/* --------------------------------------------------------------------------
   페이지네이션 — 페이지당 10명
   -------------------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; gap: var(--gap-sm);
  margin-top: var(--gap-xl);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--sp-rule);
  flex-wrap: wrap;
}
.pager:empty { display: none; }

.pager__nos { display: flex; gap: 4px; }
.pager__no {
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--sp-line); background: transparent;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--sp-charcoal); cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.pager__no:hover { border-color: var(--sp-black); color: var(--sp-black); }
.pager__no[aria-current="page"] {
  background: var(--sp-black); border-color: var(--sp-black); color: var(--sp-paper);
}

.pager__arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--sp-line); background: transparent;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .14s var(--ease);
}
.pager__arrow::before {
  content: ''; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}
.pager__arrow--prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
.pager__arrow:hover:not(:disabled) { border-color: var(--sp-black); }
.pager__arrow:disabled { opacity: .3; cursor: not-allowed; }

.pager__info { margin-left: auto; font-size: 13px; color: var(--sp-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   하단 밴드 — 유일하게 남긴 '면'. 카드가 아니라 브랜드의 선언 블록이다.
   -------------------------------------------------------------------------- */

.band {
  margin-top: var(--gap-3xl);
  background: var(--sp-black);
  color: var(--sp-paper);
  padding: var(--gap-xl);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-lg); flex-wrap: wrap;
}
.band h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 8px; }
.band p { margin: 0; font-size: 15px; color: var(--sp-muted-dk); max-width: 46ch; line-height: 1.65; }

/* --------------------------------------------------------------------------
   신청 페이지
   -------------------------------------------------------------------------- */

.apply { padding: var(--gap-xl) 0 0; }

/* 전문가 요청 페이지 도입부 */
.req-intro { margin: var(--gap-lg) 0 var(--gap-xl); }
.req-intro__lead {
  margin: var(--gap-md) 0 0;
  max-width: 46ch;
  font-size: 17px; line-height: 1.75; color: var(--sp-charcoal);
}

.backlink { font-size: 14px; font-weight: 600; color: var(--sp-muted); display: inline-flex; align-items: center; gap: 8px; }
.backlink:hover { color: var(--sp-black); }
.backlink::before {
  content: ''; width: 7px; height: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 신청 대상 — 박스로 감싸지 않고 위아래 헤어라인만 */
.target {
  display: flex; align-items: center; gap: var(--gap-md);
  padding: var(--gap-md) 0;
  margin: var(--gap-lg) 0 var(--gap-xl);
  border-top: 1px solid var(--sp-rule);
  border-bottom: 1px solid var(--sp-rule);
}
.target__photo { width: 64px; height: 64px; object-fit: cover; filter: grayscale(100%); background: var(--sp-gray); flex: none; }
.target__body { min-width: 0; }
.target__name { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.target__role { font-size: 14px; color: var(--sp-muted); margin: 3px 0 0; }
.target__badge { margin-left: auto; flex: none; }

/* 진행 인디케이터 — 화살촉 모티프 (Baymard: 진행 표시가 이탈 20–30% 감소) */
.steps {
  display: flex; align-items: center; gap: 0;
  margin: 0 0 var(--gap-2xl); padding: 0;
  list-style: none;
}
.step { display: flex; align-items: center; gap: 10px; flex: none; }
.step:not(:last-child) { flex: 1; }
.step:not(:last-child)::after {
  content: ''; flex: 1; min-width: 20px; height: 2px;
  background: var(--sp-gray); margin: 0 14px;
}
.step.is-done:not(:last-child)::after { background: var(--sp-green); }
.step__no {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 2px solid var(--sp-gray);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; color: var(--sp-muted);
  background: var(--sp-paper);
}
.step__txt { font-size: 14px; font-weight: 700; color: var(--sp-muted); white-space: nowrap; }
.step.is-active .step__no { border-color: var(--sp-orange); color: var(--sp-orange-deep); }
.step.is-active .step__txt { color: var(--sp-black); }
.step.is-done .step__no { border-color: var(--sp-green); background: var(--sp-green); color: var(--sp-white); }
.step.is-done .step__txt { color: var(--sp-charcoal); }

/* 폼 영역 — 흰 박스를 걷어내고 여백으로 구분한다 */
.panel { padding: 0; }
.panel__head { margin-bottom: var(--gap-xl); }
.panel__head h2 { font-size: clamp(23px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.03em; margin: 0; line-height: 1.3; }
.panel__head p { margin: 10px 0 0; font-size: 16px; color: var(--sp-muted); line-height: 1.7; max-width: 48ch; }

/* 희망 일정 — 순위별 박스 대신 라벨과 간격으로만 나눈다 */
.slot { padding: 0 0 var(--gap-lg); }
.slot + .slot { border-top: 1px solid var(--sp-rule); padding-top: var(--gap-lg); }
.slot__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.slot__rank { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: var(--ls-label); color: var(--sp-muted); }
.slot__rank--1 { color: var(--sp-orange-deep); }
.slot__opt { font-size: 12px; color: var(--sp-muted); font-weight: 600; }
.slot__grid { display: grid; grid-template-columns: 1fr 180px; gap: 10px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }

/* 선택지 — 라디오/체크박스 공용. 누를 수 있으므로 테두리를 남긴다. */
.opts { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.opt {
  position: relative;
  border: 1px solid var(--sp-line);
  background: transparent;
  padding: 11px 18px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:hover { border-color: var(--sp-black); }
.opt:has(input:checked) { background: var(--sp-black); color: var(--sp-paper); border-color: var(--sp-black); }
.opt:has(input:focus-visible) { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

/* 대면 선택 시에만 열리는 장소 선택.
   NN/G: progressive disclosure 는 '부차적·조건부' 항목에만 쓴다.
   필수 필드에는 쓰지 않는다(이탈이 늘어난다). */
.opts-conditional {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--sp-rule);
}
.opts-conditional[hidden] { display: none; }

.field-note {
  margin: var(--gap-lg) 0 0;
  font-size: 14px; line-height: 1.7; color: var(--sp-muted);
}
.field-note b { color: var(--sp-charcoal); font-weight: 700; }

.actions { display: flex; gap: 10px; margin-top: var(--gap-2xl); }
.actions .btn--primary { flex: 1; }

/* 최종 확인 요약 — 바깥 박스 없이 행 구분선만 */
.summary { border-top: 1px solid var(--sp-rule); }
.summary__row {
  display: grid; grid-template-columns: 152px 1fr; gap: var(--gap-md);
  padding: 14px 0; border-bottom: 1px solid var(--sp-rule); font-size: 15px;
}
.summary__row dt { color: var(--sp-muted); font-weight: 600; margin: 0; font-size: 14px; }
.summary__row dd { margin: 0; font-weight: 600; white-space: pre-wrap; }

/* 안내 — 배경 없이 왼쪽 선 하나로만 */
.notice {
  border-left: 2px solid var(--sp-green);
  padding: 2px 0 2px var(--gap-md);
  margin-top: var(--gap-xl);
  font-size: 15px; line-height: 1.75; color: var(--sp-charcoal);
  max-width: 52ch;
}

.form-error {
  border-left: 2px solid var(--sp-orange);
  padding: 2px 0 2px var(--gap-md);
  margin: var(--gap-lg) 0 0;
  font-size: 14px; font-weight: 600; line-height: 1.7;
  color: var(--sp-orange-deep);
}

/* 확인 모달 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17, 17, 17, .72);
  display: grid; place-items: center;
  padding: 20px;
}
.modal {
  background: var(--sp-paper);
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: var(--gap-xl);
}
.modal h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin: var(--gap-md) 0 var(--gap-md); line-height: 1.3; }
.modal p { font-size: 15px; line-height: 1.75; color: var(--sp-charcoal); margin: 0 0 var(--gap-md); }
.modal__flow {
  border-top: 1px solid var(--sp-rule);
  margin: var(--gap-lg) 0 0; padding: var(--gap-md) 0 0;
  list-style: none;
}
.modal__flow li { font-size: 14px; color: var(--sp-charcoal); margin-bottom: 8px; line-height: 1.6; }
.modal__flow b { font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; color: var(--sp-orange-deep); }
.modal__actions { display: flex; gap: 10px; margin-top: var(--gap-lg); }
.modal__actions .btn { flex: 1; }

/* 완료 화면 */
.done { text-align: center; padding: var(--gap-3xl) 0; }
.done__arrow { display: flex; justify-content: center; margin-bottom: var(--gap-lg); }
.done h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 var(--gap-md); line-height: 1.2; }
.done p { font-size: 17px; color: var(--sp-charcoal); margin: 0 auto var(--gap-lg); max-width: 42ch; line-height: 1.75; }
.done__ref {
  display: inline-block; border: 1px solid var(--sp-line);
  padding: 10px 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */

/* 2단이 좁아지면 한 줄로 세운다. 그림은 여전히 고정 폭. */
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .hero__art { justify-self: center; width: min(100%, var(--hero-art-w)); }
}

@media (max-width: 860px) {
  .person { grid-template-columns: 108px minmax(0, 1fr); gap: var(--gap-lg); }
  .person__photo { width: 108px; height: 108px; }
  .person__cta { grid-column: 2; justify-self: end; padding-top: var(--gap-md); }
}

@media (max-width: 780px) {
  .how__grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { padding: var(--gap-2xl) 0 var(--gap-xl); }
  .hero__lead { font-size: 17px; }

  .person { grid-template-columns: 76px minmax(0, 1fr); gap: var(--gap-md); padding: var(--gap-lg) 0; }
  .person__photo { width: 76px; height: 76px; }
  .person__name { font-size: 22px; }
  .person__intro { font-size: 15px; }

  .band { flex-direction: column; align-items: flex-start; padding: var(--gap-lg); }

  .slot__grid { grid-template-columns: 1fr; }
  .step__txt { display: none; }
  .step:not(:last-child)::after { margin: 0 8px; }
  .summary__row { grid-template-columns: 1fr; gap: 2px; }
  .actions { flex-direction: column-reverse; }
  .modal { padding: var(--gap-lg) var(--gap-md); }

  /* 좁은 화면에서 버튼 두 개를 나란히 두면 글자가 버튼 밖으로 삐져나온다.
     390px 기준으로 재보면 버튼 하나에 남는 글자 자리는 98px 인데
     ('네, 안내받았어요' 19px/700 은 150px 남짓) 절반도 안 된다.
     .btn 의 좌우 여백 26px 씩과 19px 글자 크기는 브랜드 규격이라
     줄이지 않고, 대신 세로로 쌓는다.

     column-reverse 인 이유: 마크업은 [아직 받지 못했어요][네, 안내받았어요]
     순서라 그대로 쌓으면 부정 선택지가 위로 온다. 뒤집어서 기본 동작을
     위에 둔다 — 같은 파일의 .actions 도 같은 이유로 column-reverse 다. */
  .modal__actions { flex-direction: column-reverse; gap: 8px; }
  .modal__actions .btn { flex: none; width: 100%; }

  /* 24px 로는 '자문 신청 제안을 받으셨나요?' 한 줄이 폭을 넘겨서
     <br> 로 잡아 둔 줄바꿈 위치가 흐트러진다. */
  .modal h2 { font-size: 21px; }
}

/* ==========================================================================
   어드바이저 참여 신청 (join.html)
   ========================================================================== */

.joinflow { list-style: none; margin: var(--gap-lg) 0 0; padding: 0; }
.joinflow li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--sp-body);
  text-wrap: pretty;
}
.joinflow b:first-child {
  position: absolute; left: 0; top: 1px;
  font-size: 13px; font-weight: 800; color: var(--sp-orange-deep);
  font-variant-numeric: tabular-nums;
}

/* CV 첨부 — 이 폼에서 유일하게 테두리를 쓰는 요소다.
   "여기에 파일을 놓으세요"를 테두리 없이 전달할 방법이 마땅치 않다. */
.cvzone {
  display: block;
  border: 1px dashed var(--sp-line);
  padding: var(--gap-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cvzone:hover, .cvzone.is-over { border-color: var(--sp-orange); background: #fff9f5; }
.cvzone.is-done { border-style: solid; border-color: var(--sp-orange-deep); background: #fff9f5; }
.cvzone.is-busy { cursor: progress; }
.cvzone__title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cvzone__hint { display: block; font-size: 14px; color: var(--sp-muted); text-wrap: pretty; }

.rule { border: 0; border-top: 1px solid var(--sp-rule); margin: var(--gap-xl) 0; }

.consent { margin-top: var(--gap-xl); }
.consent__body {
  font-size: 13px; line-height: 1.75; color: var(--sp-muted);
  margin: 0 0 var(--gap-md); text-wrap: pretty;
}