/* 더헤아림 소개 사이트 공통 스타일. 색·크기 값은 tokens.css의 토큰만 쓴다.
   구조: 기본 → 공통 요소(버튼·마커·띠) → 상단 → 메인 섹션 → 하위 페이지 → 푸터 */

/* ===== 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--ff-sans);
  font-size: var(--fs-base); line-height: var(--lh-body); word-break: keep-all; overflow-wrap: break-word;
}
a { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: var(--ls-h); line-height: var(--lh-h1); }
p { margin: 0; }
img, svg { max-width: 100%; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--c-text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 건너뛰기 링크: 키보드 첫 탭에서만 보인다 */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ===== 글자 단계 ===== */
.eyebrow { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; color: var(--c-secondary); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text-muted); max-width: 640px; margin-top: 14px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.prose { max-width: var(--w-prose); }
.prose p + p { margin-top: 14px; }

/* ===== 띠(band) ===== */
.band { padding: var(--sec) 0; }
.band.gray { background: var(--c-bg-alt); }
.band.dark { background: var(--band-dark); color: var(--band-dark-text); }
.band.dark .lead, .band.dark .muted { color: var(--band-dark-muted); }
.band.dark .eyebrow { color: var(--mint); }
.band.teal { background: var(--teal); color: #fff; }
.band.teal .eyebrow { color: var(--mint); }
.band.teal .h2 { color: #fff; max-width: 760px; }
.band.teal p { color: #E3F5EF; font-size: 18px; max-width: 640px; margin-top: 14px; }
.band.teal .cta { margin-top: 26px; }
.band.tight { padding: 64px 0; }

/* 섹션 마커(알약 + 점 셋) */
.marker { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.marker i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-secondary); }
.marker i:first-child { width: 26px; border-radius: var(--r-pill); }
.marker.center { justify-content: center; }
.band.dark .marker i, .band.teal .marker i, .strip .marker i { background: var(--mint); }

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px;
  border-radius: var(--r-sm); font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid transparent;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.btn-solid { background: var(--btn-solid-bg); color: var(--btn-solid-text); border-color: var(--btn-solid-bg); }
.btn-solid:hover { background: var(--btn-solid-bg-hover); border-color: var(--btn-solid-bg-hover); }
.btn-navy { background: var(--btn-navy-bg); color: var(--btn-navy-text); border-color: var(--btn-navy-bg); }
.btn-navy:hover { background: var(--btn-navy-bg-hover); border-color: var(--btn-navy-bg-hover); }
.btn-outline { background: transparent; color: var(--c-secondary); border-color: var(--c-secondary); }
.btn-outline:hover { background: rgba(30, 122, 100, .08); }
.band.dark .btn-outline, .band.teal .btn-outline, .strip .btn-outline { color: #fff; border-color: #fff; }
.band.dark .btn-outline:hover, .band.teal .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.band.dark .btn-solid { background: var(--mint); color: var(--navy-deep); border-color: var(--mint); }
.band.dark .btn-solid:hover { background: var(--mint-soft); border-color: var(--mint-soft); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; background: var(--mint); color: var(--navy); }

/* ===== 상단: 색 선 + 유틸 바 + 내비 ===== */
.topline { height: 4px; background: linear-gradient(90deg, var(--teal), var(--mint)); }
.util { background: var(--navy); color: #fff; font-size: 13px; }
.util .wrap { height: var(--util-h); display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.util a, .util button { color: #fff; text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.util a:hover, .util button:hover { text-decoration: underline; }
.util .theme { display: inline-flex; align-items: center; gap: 6px; }
.util .theme svg { width: 14px; height: 14px; }
.nav { position: sticky; top: 0; z-index: 10; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-nav); }
.nav .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--c-text); text-decoration: none; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; line-height: 1; }
.brand small { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--c-secondary); }
.menu { display: flex; gap: 34px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.menu a { color: var(--c-text); text-decoration: none; font-size: 16px; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--c-secondary); border-bottom-color: var(--c-secondary); }
.menu a[aria-current="page"] { font-weight: 600; }
.nav .btn { margin-left: 8px; }
.nav .btn.short { display: none; }
.hamburger { display: none; flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--c-text); padding: 0; margin-left: 4px; }
.mobile-panel { display: none; position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + var(--util-h) + 4px); bottom: 0; background: var(--c-surface); z-index: 9; padding: 16px var(--gutter) 40px; overflow: auto; }
.mobile-panel.open { display: block; }
.mobile-panel a { display: block; padding: 14px 0; font-size: 18px; font-weight: 600; color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.mobile-panel a[aria-current="page"] { color: var(--c-secondary); }
.mobile-panel .sub { margin-top: 12px; }
.mobile-panel .sub a { font-weight: 500; font-size: 16px; }
@media (max-width: 899px) {
  .nav .wrap { gap: 12px; }
  .menu { display: none; }
  .nav .btn.long { display: none; }
  .nav .btn.short { display: inline-flex; margin-left: auto; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .util .wrap { justify-content: center; gap: 16px; }
}
@media (max-width: 380px) { .util .u-hide { display: none; } .nav .brand small { display: none; } .nav .btn.short { padding: 0 12px; } }

/* ===== 등장 효과(한 번만, 움직임 축소 설정이면 없음) ===== */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== 메인 1 히어로(좌 글 / 우 비주얼) ===== */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 600px; background: var(--c-bg); }
.hero .copy { display: flex; align-items: center; }
.hero .copy .inner { width: 100%; margin-left: auto; padding: 72px var(--gutter) 72px calc((100vw - var(--w)) / 2 + var(--gutter)); }
.hero h1 { font-size: var(--fs-h1); color: var(--c-text); max-width: 600px; }
.hero .lead { margin-top: 18px; }
.hero .cta { margin-top: 30px; }
.hero .visual { position: relative; overflow: hidden; background: radial-gradient(900px 600px at 70% 40%, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.hero .visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .visual .over { position: absolute; left: 8%; bottom: 12%; color: #fff; font-size: 24px; font-weight: 600; line-height: 1.4; max-width: 440px; letter-spacing: -0.01em; padding: 14px 18px; border-radius: var(--r-md); background: rgba(15, 26, 43, .55); backdrop-filter: blur(2px); }
.hero .visual .over em { font-style: normal; color: var(--mint); }
.hero .visual img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .visual .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 43, .08) 0%, rgba(15, 26, 43, .45) 100%), linear-gradient(90deg, rgba(22, 40, 63, .35) 0%, rgba(22, 40, 63, 0) 45%); }
.hero .visual.has-photo .over { background: rgba(15, 26, 43, .62); }
@media (max-width: 1240px) { .hero .copy .inner { padding-left: var(--gutter); margin-left: 0; } }
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .visual { min-height: 340px; }
  .hero .visual .over { left: var(--gutter); right: var(--gutter); bottom: 20px; font-size: 19px; max-width: none; }
  .hero .copy .inner { padding: 56px var(--gutter); }
}

/* ===== 메인 2 문제 띠 ===== */
.strip { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 56px 0; }
.strip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(127, 215, 191, .18), transparent 32%), radial-gradient(circle at 60% 90%, rgba(127, 215, 191, .10), transparent 30%); }
.strip img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.strip .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 40, 63, .94) 0%, rgba(22, 40, 63, .86) 55%, rgba(22, 40, 63, .66) 100%); }
.strip.has-photo::before { z-index: 1; }
.strip.has-photo .wrap { z-index: 2; }
.strip .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.strip h2 { font-size: 28px; }
.strip p { margin-top: 10px; color: #C9D3E0; font-size: var(--fs-base); }
.strip .side { border-left: 2px solid rgba(127, 215, 191, .6); padding-left: 24px; }
.strip .side .q { margin: 0 0 14px; color: #E3F5EF; }
.strip .side .link { color: #fff; }
@media (max-width: 899px) { .strip .wrap { grid-template-columns: 1fr; } }

/* ===== 메인 3 수플 소개: 화면 액자 + 아코디언 ===== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.device { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-device); overflow: hidden; border: 1px solid var(--c-line); }
.device .bar { height: 32px; background: #F4F6F8; border-bottom: 1px solid #DDE3EA; display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.device .bar i { width: 9px; height: 9px; border-radius: 50%; background: #B9C4D3; display: block; }
.device svg, .device img { display: block; width: 100%; height: auto; }
figure.device, figure.shot { margin: 0; }
.page-hero .pv.shot .device { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .18); }
.page-hero .pv.shot .device .bar { background: #E9EEF3; }
.acc { border-top: 2px solid var(--mint); }
.acc details { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 20px; font-weight: 600; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform var(--dur-fast); margin-right: 6px; flex: none; }
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc p { padding: 0 0 18px; color: var(--band-dark-muted); font-size: 16px; max-width: 520px; }
.acc .k { display: inline-block; margin-right: 10px; color: var(--mint); font-size: 14px; font-weight: 600; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ===== 메인 4 기능 카드(이미지 카드) ===== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.card { background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line); display: flex; flex-direction: column; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card .vis { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); overflow: hidden; }
.card .vis::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mint); }
.card .vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card .tag { font-size: 13px; font-weight: 600; color: var(--c-secondary); letter-spacing: .02em; text-decoration: underline; text-underline-offset: 4px; }
.card h3 { font-size: 21px; margin-top: 8px; letter-spacing: var(--ls-h3); }
.card p { margin-top: 8px; color: var(--c-text-muted); font-size: 15.5px; flex: 1; }
.card .more { margin-top: 14px; font-weight: 600; color: var(--c-secondary); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; align-self: flex-start; }
@media (max-width: 899px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .cards { grid-template-columns: 1fr; } }

/* ===== 메인 6 도넛 통계 ===== */
.donuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; text-align: center; }
.donut svg { width: 190px; height: 190px; display: block; margin: 0 auto; }
.donut h3 { font-size: 20px; margin-top: 16px; }
.donut p { margin-top: 8px; color: var(--band-dark-muted); font-size: 15px; max-width: 320px; margin-left: auto; margin-right: auto; }
.donut .src { margin-top: 8px; font-size: 12px; color: #8FA0B6; }
@media (max-width: 899px) { .donuts { grid-template-columns: 1fr; gap: 36px; } }

/* ===== 메인 7 가치 3 ===== */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.value { background: var(--c-surface); border-radius: var(--r-lg); padding: 28px; border-top: 4px solid var(--c-secondary); box-shadow: 0 8px 24px rgba(22, 40, 63, .06); }
.value h3 { font-size: 22px; letter-spacing: var(--ls-h3); }
.value p { margin-top: 10px; color: var(--c-text-muted); font-size: 16px; }
@media (max-width: 899px) { .values { grid-template-columns: 1fr; } }

/* ===== 메인 8 문의 카드 ===== */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.contact { display: block; text-decoration: none; color: inherit; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 26px; transition: border-color var(--dur-fast); }
.contact:hover { border-color: var(--c-secondary); }
.contact h3 { font-size: 20px; letter-spacing: var(--ls-h3); }
.contact p { margin-top: 8px; color: var(--c-text-muted); font-size: 15.5px; }
.contact .go { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--c-secondary); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) { .contacts { grid-template-columns: 1fr; } }

/* ===== 하위 페이지 머리(작은 히어로) ===== */
.page-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 72px 0 64px; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 20%, rgba(127, 215, 191, .18), transparent 30%), radial-gradient(circle at 20% 110%, rgba(127, 215, 191, .10), transparent 32%); }
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { color: var(--mint); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 820px; }
.page-hero .lead { color: #C9D3E0; max-width: 680px; }
.page-hero .cta { margin-top: 28px; }
.page-hero .btn-outline { color: #fff; border-color: #fff; }
.page-hero .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.page-hero .btn-solid { background: var(--mint); color: var(--navy-deep); border-color: var(--mint); }
.page-hero .btn-solid:hover { background: var(--mint-soft); border-color: var(--mint-soft); }
.page-hero.with-visual .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.page-hero .pv svg { width: 100%; height: auto; display: block; }
.page-hero .pv.photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); aspect-ratio: 4 / 3; }
.page-hero .pv.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .page-hero { padding: 56px 0 48px; } .page-hero.with-visual .wrap { grid-template-columns: 1fr; } .page-hero .pv { display: none; } }

/* 두 열 본문(제목 열 + 글 열) */
.two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.two .h2 { font-size: 30px; }
.two .side-note { margin-top: 14px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.motto { font-size: 22px; font-weight: 600; letter-spacing: var(--ls-h3); line-height: 1.5; color: var(--c-text); margin-bottom: 16px; }
@media (max-width: 899px) { .two { grid-template-columns: 1fr; gap: 20px; } }

/* 장면 카드(수플 2) */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.scene { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; }
.scene .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--mint); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.scene h3 { font-size: 19px; margin-top: 14px; letter-spacing: var(--ls-h3); }
.scene p { margin-top: 8px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.source { margin-top: 20px; font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (max-width: 899px) { .scenes { grid-template-columns: 1fr; } }

/* 4단계 스테퍼(수플 3, 도형 그림일 때): 4열 */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 44px 0 0; padding: 0; }
.step .fig { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.step .fig svg { display: block; width: 100%; height: 100%; }
.step .k { display: inline-block; margin-top: 18px; color: var(--c-secondary); font-size: 14px; font-weight: 600; }
.step h3 { font-size: 21px; margin-top: 4px; letter-spacing: var(--ls-h3); }
.step p { margin-top: 8px; color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .steps { grid-template-columns: 1fr; } }

/* 4단계 흐름(수플 3, 화면 캡처가 있을 때): 화면 크게, 글과 교대로 */
.flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 56px; }
.flow .row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.flow .row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.flow .row:nth-child(even) .fig { order: 2; }
.flow .fig { margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 40px rgba(22, 40, 63, .10); }
.flow .fig svg { display: block; width: 100%; height: auto; }
.flow .fig img { display: block; width: 100%; height: auto; }
.flow .k { display: inline-block; color: var(--c-secondary); font-size: 14px; font-weight: 600; }
.flow h3 { font-size: var(--fs-h3); margin-top: 6px; letter-spacing: var(--ls-h3); }
.flow p { margin-top: 10px; color: var(--c-text-muted); font-size: var(--fs-base); max-width: 440px; }
@media (max-width: 899px) {
  .flow { gap: 40px; }
  .flow .row, .flow .row:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .flow .row:nth-child(even) .fig { order: 0; }
}

/* 기능 목록(수플 4) */
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; margin-top: 36px; }
.feat { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--c-line); }
.feat .i { width: 40px; height: 40px; border-radius: 10px; background: var(--c-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--c-secondary); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.feat h3 { font-size: var(--fs-h4); letter-spacing: var(--ls-h3); }
.feat p { margin-top: 6px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ai-note { margin-top: 32px; padding: 20px 24px; background: var(--c-bg-alt); border-left: 3px solid var(--mint); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); color: var(--c-text); }
.ai-note b { font-weight: 600; color: var(--c-secondary); margin-right: 8px; }
@media (max-width: 899px) { .feats { grid-template-columns: 1fr; gap: 0; } }

/* 비교표(수플 5) */
.tw { overflow-x: auto; margin-top: 36px; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-sm); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.cmp thead th { background: var(--c-bg-alt); font-weight: 600; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.no { color: var(--c-text-muted); }
.cmp th.us, .cmp td.us { background: rgba(127, 215, 191, .12); }
.cmp td.us { color: var(--c-secondary); font-weight: 600; }
.cmp th:first-child { position: sticky; left: 0; background: var(--c-bg-alt); }
.cmp td:first-child { position: sticky; left: 0; background: var(--c-surface); font-weight: 500; }
.footnote { margin-top: 16px; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* 규칙 블록(수플 6) */
.rules { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
.rules .list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--mint); }
.rules .list li { padding: 16px 0; border-bottom: 1px solid var(--c-line); font-weight: 500; display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.rules .list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); margin-top: 8px; }
@media (max-width: 899px) { .rules { grid-template-columns: 1fr; gap: 28px; } }

/* 안전 사실 카드(수플 7) */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.fact { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.fact svg { width: 24px; height: 24px; color: var(--c-secondary); margin-top: 2px; }
.fact h3 { font-size: var(--fs-h4); letter-spacing: var(--ls-h3); }
.fact p { margin-top: 6px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.links-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-sm); }
@media (max-width: 899px) { .facts { grid-template-columns: 1fr; } }

/* 팀 카드(회사 소개 5) */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.member { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; }
.member .avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--navy); }
.member .avatar svg { display: block; width: 100%; height: 100%; }
.member .role { display: block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--c-secondary); letter-spacing: .02em; }
.member h3 { font-size: 26px; letter-spacing: var(--ls-h3); }
.member > .role { margin-top: 6px; }
.member p { margin-top: 22px; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.7; }
.member ul { list-style: none; margin: 12px 0 0; padding: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.member li { padding: 4px 0 4px 14px; position: relative; line-height: 1.5; }
.member li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.member .pending { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--c-text-muted); border: 1px dashed var(--c-line-strong); border-radius: var(--r-pill); padding: 2px 10px; }
@media (max-width: 1023px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .team { grid-template-columns: 1fr; } }

/* 정보 표(회사 소개 6 · 문의 창구) */
.kv { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 8px; font-size: var(--fs-base); }
.kv th, .kv td { padding: 14px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.kv td { overflow-wrap: anywhere; }
.kv th { width: 200px; font-weight: 600; color: var(--c-text-muted); padding-right: 24px; white-space: nowrap; }
@media (max-width: 639px) { .kv th { width: 120px; padding-right: 12px; } }

/* 문의 페이지 */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
@media (max-width: 899px) { .types { grid-template-columns: 1fr; } }

/* 404 */
.nf { min-height: 520px; display: flex; align-items: center; }
.nf .num { font-size: 88px; font-weight: 700; color: var(--c-line-strong); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.nf h1 { font-size: var(--fs-h1); margin-top: 12px; }
.nf .lead { margin-top: 14px; }
.nf .cta { margin-top: 28px; }

/* ===== 푸터 ===== */
.footer { background: var(--navy-deep); color: #fff; padding: 56px 0 28px; font-size: 14px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 24px 40px; align-items: start; }
.fgrid h4 { font-size: 13px; font-weight: 600; color: #8FA0B6; margin: 0 0 10px; letter-spacing: .04em; }
.fgrid ul { list-style: none; margin: 0; padding: 0; }
.fgrid li { margin: 0 0 8px; line-height: 1.5; }
.fgrid .brand { color: #fff; font-size: 19px; }
.fgrid .brand small { color: var(--mint); }
.fgrid .about { margin-top: 12px; color: #B9C4D3; max-width: 300px; font-size: 14px; line-height: 1.6; }
.fgrid .cs li { color: #C9D3E0; }
.legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; line-height: 1.7; color: #8FA0B6; }
.legal .row { display: flex; flex-wrap: wrap; gap: 0 6px; }
.legal .row span::after { content: "·"; margin-left: 6px; color: #4E607A; }
.legal .row span:last-child::after { content: ""; }
.legal b { color: #C9D3E0; font-weight: 600; }
.legal a { color: #C9D3E0; text-decoration: underline; text-underline-offset: 2px; }
.bottom { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; color: #8FA0B6; }
.bottom .pol { display: flex; flex-wrap: wrap; gap: 0 18px; }
.bottom .pol a { color: #C9D3E0; }
.bottom .pol a.strong { color: #fff; font-weight: 600; }
@media (max-width: 899px) { .fgrid { grid-template-columns: 1fr 1fr; } .footer { padding-top: 44px; } }
@media (max-width: 639px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid > div:first-child, .fgrid .cs { grid-column: 1 / -1; }
  .legal .row { flex-direction: column; gap: 2px; }
  .legal .row span::after { content: ""; }
  .bottom { flex-direction: column; }
}

/* ===== 인쇄 ===== */
@media print {
  .topline, .util, .nav, .mobile-panel, .footer .fgrid, .bottom .pol { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 슈퍼바이저 안내(수플 8): 사진 + 글 */
.with-photo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.with-photo .photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.with-photo .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .with-photo { grid-template-columns: 1fr; gap: 24px; } }

/* ===== 제품 도해(글자가 있는 예시 화면) ===== */
.ui { background: #fff; color: #1E2A3A; font-size: 12px; padding: 14px 16px 12px; line-height: 1.4; }
.ui-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ui-title { font-weight: 700; font-size: 14px; }
.ui-chip { font-size: 10.5px; font-weight: 600; color: #1E7A64; background: rgba(127, 215, 191, .22); border-radius: 999px; padding: 2px 8px; }
.ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ui-stats > div { background: #F4F6F8; border-radius: 8px; padding: 7px 10px; }
.ui-stats small { display: block; font-size: 10px; color: #5B6B82; }
.ui-stats b { font-size: 15px; font-weight: 700; }
.ui-stats b.warn { color: #B45309; }
.ui-rows { display: grid; gap: 7px; }
.ui-row { display: grid; grid-template-columns: 58px 1fr 62px; gap: 10px; align-items: center; }
.ui-row span { font-weight: 600; font-size: 11.5px; }
.ui-row i { display: block; height: 7px; background: #E9EEF3; border-radius: 4px; overflow: hidden; }
.ui-row i b { display: block; height: 100%; background: #7FD7BF; border-radius: 4px; }
.ui-row:nth-child(2) i b { background: #1E7A64; }
.ui-row em { font-style: normal; font-size: 10.5px; color: #5B6B82; text-align: right; font-variant-numeric: tabular-nums; }
.ui-foot { margin-top: 12px; padding: 8px 10px; background: #F4F6F8; border-radius: 8px; font-size: 11px; color: #5B6B82; display: flex; gap: 8px; align-items: center; }
.ui-foot .ok { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #16283F; color: #7FD7BF; font-size: 11px; align-items: center; justify-content: center; }

/* 기능 타일(남색 바탕 위 흰 카드) */
.tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px 22px 18px 26px; }
.t-card { width: 100%; max-width: 300px; background: #fff; color: #1E2A3A; border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); font-size: 12px; line-height: 1.4; }
.t-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.t-top b { font-size: 13px; }
.t-chip { font-size: 10px; font-weight: 600; color: #1E7A64; background: rgba(127, 215, 191, .22); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.t-chip.warn { color: #B45309; background: rgba(245, 158, 11, .16); }
.t-line { font-size: 11.5px; margin-top: 3px; }
.t-line.muted { color: #5B6B82; }
.t-bar { height: 7px; background: #E9EEF3; border-radius: 4px; overflow: hidden; margin: 6px 0 8px; }
.t-bar i { display: block; height: 100%; background: #7FD7BF; border-radius: 4px; }
.t-steps { display: flex; gap: 6px; margin: 6px 0 8px; }
.t-steps span { flex: 1; text-align: center; font-size: 10.5px; padding: 4px 0; border-radius: 6px; background: #F4F6F8; color: #5B6B82; }
.t-steps span.on { background: #16283F; color: #7FD7BF; font-weight: 600; }

/* 메인 요금 요약 카드(틸 띠 위) */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.plan { position: relative; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-lg); padding: 22px 22px 20px; color: #fff; }
.plan.pick { background: #fff; color: var(--c-text); border-color: #fff; }
.plan-pick { position: absolute; top: -13px; left: 20px; background: var(--navy); color: var(--mint); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px; }
.plan-name { display: block; font-size: 15px; font-weight: 600; }
.plan-price { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 13px; font-weight: 500; opacity: .85; margin-left: 2px; }
.plan-for { display: block; font-size: 13px; opacity: .85; margin-top: 4px; min-height: 36px; }
.plan ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 14px; }
.plan.pick ul { border-top-color: var(--c-line); }
.plan li { padding: 3px 0 3px 16px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.plan.pick li::before { background: var(--teal); }
.band.teal .plans-note { font-size: 13px; color: #CFEDE3; margin-top: 14px; max-width: none; }
@media (max-width: 899px) { .plans { grid-template-columns: 1fr; } }

/* 자주 묻는 질문(메인) */
.faq { margin-top: 28px; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-size: 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px; color: var(--c-secondary); font-weight: 500; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 20px; color: var(--c-text-muted); font-size: var(--fs-base); max-width: 820px; }
.faq-more { margin-top: 20px; font-size: var(--fs-sm); }

/* 수플 기능 카드(도해 + 글) */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.feat-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.feat-card .vis { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); }
.feat-card .body { padding: 18px 20px 22px; }
.feat-card .i { display: inline-block; font-size: 12px; font-weight: 700; color: var(--c-secondary); font-variant-numeric: tabular-nums; }
.feat-card h3 { font-size: var(--fs-h4); margin-top: 4px; letter-spacing: var(--ls-h3); }
.feat-card p { margin-top: 6px; color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 1023px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .feat-grid { grid-template-columns: 1fr; } }

/* 회사 소개: 하지 않는 것 · 연혁 */
.nots { margin-top: 32px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px 28px; }
.nots h3 { font-size: var(--fs-h4); letter-spacing: var(--ls-h3); }
.nots ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 28px; }
.nots li { position: relative; padding-left: 26px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.nots li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-secondary); }
.nots li::after { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 2px; background: var(--c-secondary); }
@media (max-width: 899px) { .nots ul { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--c-line); }
.timeline li { position: relative; padding: 0 0 22px 28px; display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); border: 2px solid var(--c-bg); }
.timeline .when { font-weight: 600; color: var(--c-secondary); font-variant-numeric: tabular-nums; }
.timeline .what { color: var(--c-text); }
@media (max-width: 639px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* 수플 머리의 화면 액자 */
.page-hero .pv .device { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .18); }

/* ===== 히어로 사진 슬라이드 ===== */
.hero .visual.slides img.slide { opacity: 0; transform: scale(1); transition: opacity 1.2s ease, transform 7s linear; will-change: opacity, transform; }
.hero .visual.slides img.slide.on { opacity: 1; transform: scale(1.06); }
.hero .visual .dots { position: absolute; left: 8%; bottom: 8%; display: flex; gap: 8px; z-index: 2; }
.hero .visual .dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast); }
.hero .visual .dots button.on { background: var(--mint); transform: scale(1.25); }
.hero .visual .dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 899px) { .hero .visual .dots { left: var(--gutter); bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .hero .visual.slides img.slide { transition: none; }
  .hero .visual.slides img.slide.on { transform: none; }
}

/* ===== 도넛: 링 그리기 ===== */
.donut .arc { stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2, 0, 0, 1); }
.donut.in .arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .donut .arc { stroke-dashoffset: 0; transition: none; } }

/* ===== 하위 페이지 밝은 머리(문의·요금) ===== */
.page-head { padding: 56px 0 8px; }
.page-head .lead { margin-top: 12px; }

/* ===== 문의: 폼 + 연락처 ===== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.cform { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 32px; }
.cform .h3 { margin-bottom: 20px; }
.f-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-row label { font-size: 14px; font-weight: 600; color: var(--c-text); }
.f-row input, .f-row select, .f-row textarea { font: inherit; font-size: 16px; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); padding: 11px 12px; width: 100%; }
.f-row textarea { resize: vertical; min-height: 140px; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-secondary); }
.hint { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; }
.f-consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 4px 0 20px; font-size: 14px; color: var(--c-text-muted); }
.f-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.f-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cside { display: grid; gap: 20px; }
.cbox { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: 28px; }
.cbox.soft { background: transparent; border-style: dashed; }
.cbox h3 { font-size: var(--fs-h4); letter-spacing: var(--ls-h3); }
.cbox p { margin-top: 8px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.cbox dl { margin: 16px 0 0; display: grid; grid-template-columns: 88px 1fr; gap: 10px 12px; font-size: var(--fs-sm); }
.cbox dt { color: var(--c-text-muted); font-weight: 600; }
.cbox dd { margin: 0; overflow-wrap: anywhere; }
.cbox .kakao { margin-top: 20px; width: 100%; }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } .f-2 { grid-template-columns: 1fr; gap: 0; } .cform { padding: 22px; } }

/* 회사 소개: 개발 현황 표 */
.asof { font-size: 14px; font-weight: 500; color: var(--c-text-muted); margin-left: 10px; letter-spacing: 0; }
.status { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; font-size: var(--fs-sm); }
.status th, .status td { padding: 14px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.status thead th { background: var(--c-bg-alt); font-weight: 600; font-size: 13px; color: var(--c-text-muted); }
.status tbody th { font-weight: 700; white-space: nowrap; width: 90px; }
.status .when { white-space: nowrap; color: var(--c-text-muted); width: 150px; font-variant-numeric: tabular-nums; }
.status tbody tr:last-child th, .status tbody tr:last-child td { border-bottom: 0; }
.state { display: inline-block; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.state.s-1, .state.s-2 { background: rgba(127, 215, 191, .22); color: var(--c-secondary); }
.state.s-3 { background: rgba(245, 158, 11, .16); color: #8A5A00; }
.state.s-4 { background: var(--c-bg-alt); color: var(--c-text-muted); border: 1px solid var(--c-line); }

/* ---- 슈퍼바이저 안내(/supervisors) v2: 조밀한 리듬 ---- */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.num { border-left: 3px solid var(--mint); padding: 4px 0 4px 18px; }
.num b { display: block; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--c-secondary); font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: 8px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.values.dense { gap: 20px; margin-top: 28px; }
.values.dense .value { padding: 22px 24px; }
.values.dense .value p { font-size: var(--fs-sm); }
.steps.three { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.cmp th[scope="row"] { font-weight: 600; white-space: nowrap; background: var(--c-surface); }
.cmp.rulebook th, .cmp.rulebook td { vertical-align: top; line-height: 1.55; }
.cmp.rulebook th[scope="row"] { position: static; }
.rules .list.titled li { align-items: start; }
.rules .list.titled li strong { display: block; font-weight: 600; }
.rules .list.titled li p { margin-top: 4px; color: var(--c-text-muted); font-weight: 400; font-size: var(--fs-sm); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lst { list-style: none; margin: 20px 0 0; padding: 0; border-top: 2px solid var(--mint); }
.lst li { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.lst li strong { display: block; font-weight: 600; }
.lst li p { margin-top: 4px; color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 899px) {
  .nums { grid-template-columns: 1fr; gap: 16px; }
  .steps.three { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; gap: 32px; }
  .cmp th[scope="row"] { white-space: normal; }
}