/* ============================================================
   CMO 시안 v3 (2026-10-13) — CFO 의 리듬 + 블랙 바탕
   remake.css 뒤에 얹어 덮어쓴다. 원본은 건드리지 않는다.
   ------------------------------------------------------------
   ★ 무엇을 가져왔나 (아담: CFO 느낌 + ①구조 ③기능)

   CFO 가 CMO 와 가장 다른 점은 색이 아니라 「밝고 어두움이 교차한다」는 것이다.
   CMO 는 처음부터 끝까지 어두워 장면이 바뀌지 않는다. 그래서 평평하게 느껴진다.
   어둡기만 한 것은 고급이 아니라 단조로움이다.

     히어로·커리큘럼 = 어둡게      ← 몰입
     강사·수강료·뉴스 = 밝게(아이보리) ← 환기

   함께 옮긴 것 — 헤더 아래 뉴스 티커, 커리큘럼 왼쪽 날짜 블록.
   둘 다 CFO 에서 실제로 잘 작동하는 장치다.

   ★ 색은 body 클래스로 가른다
     .tone-terra — 가라앉은 주황(테라코타). 밝은 주황은 커머스 색이라 쓰지 않는다
     .tone-mono  — 무채색 + 아주 옅은 샴페인. 색을 거의 쓰지 않는 쪽
============================================================ */

/* ---------- 색 ---------- */
.tone-terra {
  /* ★ 보조 글자 밝기 (2026-10-14 아담) — luxe.css 의 0.34 는 어두운 바탕에서 안 읽힌다.
     밝은 섹션은 --paper-sub 를 쓰므로 이 값의 영향을 받지 않는다. */
  --muted: rgba(245, 242, 234, 0.50);
  --accent-rgb: 227, 102, 28;
  --accent: #e3661c;          /* 선명한 오렌지. 형광 주황(#ff5a00)까지는 가지 않는다 */
  --accent-bright: #f07f33;
  --accent-light: #f9ac72;
  --accent-ink: #2a1109;
  --paper: #f7f3ed;           /* 밝은 섹션 바탕 — 순백보다 아이보리가 눈이 편하다 */
  --paper-ink: #17120e;
  --paper-sub: #6b6058;
  --paper-line: #e4dbcf;
}
.tone-mono {
  --accent-rgb: 141, 131, 120;
  --accent: #8d8378;
  --accent-bright: #b4a898;
  --accent-light: #d8cdbd;
  --accent-ink: #1a1816;
  --paper: #f5f3f0;
  --paper-ink: #161512;
  --paper-sub: #67625b;
  --paper-line: #e2dedA;
}

.tone-terra, .tone-mono {
  --gold: var(--accent);
  --gold-bright: var(--accent-bright);
  --gold-light: var(--accent-light);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .055);
  --radius: 10px;
}

body { letter-spacing: -.012em; }

/* ---------- 여백 ---------- */
section { padding: 78px 0; }
.container { max-width: 1060px; padding: 0 22px; }
@media (max-width: 620px) { section { padding: 56px 0; } }

/* ---------- 뉴스 티커 — 헤더 바로 아래 ---------- */
/* 최신 기사 헤드라인이 돌아간다. 사이트가 살아 있다는 신호다. */
.news-bar {
  display: flex; align-items: center; gap: 10px;
  background: #121013; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 10px 18px; font-size: .88rem; line-height: 1.3;
}
.nb-tag {
  flex: none; background: var(--accent); color: #fff;
  font-weight: 800; font-size: .70rem; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 3px;
}
.nb-text {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; transition: opacity .26s, transform .26s;
}
.nb-text.is-out { opacity: 0; transform: translateY(-6px); }
.nb-more { flex: none; font-size: .78rem; color: var(--muted); }
@media (min-width: 720px) {
  .news-bar { justify-content: center; }
  .nb-text { flex: 0 1 auto; max-width: 700px; }
}
@media (max-width: 460px) { .nb-more { display: none; } }

/* ---------- 상단 ---------- */
.btn-top {
  background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-weight: 700; padding: 9px 16px;
  box-shadow: none; white-space: nowrap;
}
.btn-top:hover { background: var(--accent-bright); }
.btn-class {
  border-radius: 6px; border: 1px solid var(--line); color: var(--ink2);
  background: none; font-weight: 600; box-shadow: none; white-space: nowrap;
}
@media (max-width: 420px) { .btn-top, .btn-class { padding: 8px 11px; font-size: .78rem; } }

/* ---------- 히어로 ---------- */
.hero { padding: 64px 0 72px; }

/* ★ 배경 글자 (2026-10-13 아담 제안) — 검은 바탕이 비어 보이지 않게 한다.
   CFO 도 같은 장치를 쓴다(거기는 "AI"). 아주 흐려서 읽히기보다 질감으로 느껴지는 정도다.
   remake.css 의 ::before 는 상단 선이 쓰고 있어 ::after 를 쓴다.
   .hero 에 이미 overflow:hidden 이 있어 넘치는 부분은 잘린다. */
.hero::after {
  content: "CMO";
  position: absolute; right: -6%; top: 2%;
  font-size: clamp(190px, 52vw, 420px);
  font-weight: 900; line-height: .85; letter-spacing: -.06em;
  color: rgba(var(--accent-rgb), .055);
  pointer-events: none; user-select: none; z-index: 0;
}
@media (max-width: 620px) {
  /* 모바일에서는 글자가 본문을 가로지르지 않게 위로 올리고 조금 더 흐리게 */
  .hero::after { right: -10%; top: 1%; color: rgba(var(--accent-rgb), .045); }
}
.chip-group { gap: 8px; }
.chip-live, .chip-next {
  border-radius: 999px; padding: 6px 14px !important; font-size: .76rem; font-weight: 700;
  letter-spacing: -.01em;
}
.chip-live { background: rgba(var(--accent-rgb),.16) !important; border: 1px solid rgba(var(--accent-rgb),.42) !important; color: var(--accent-light) !important; }
.chip-next { background: none !important; border: 1px solid var(--line) !important; color: var(--ink2) !important; }

.hero-eyebrow { font-size: .88rem; color: var(--ink2); font-weight: 600; margin: 26px 0 14px; letter-spacing: -.01em; }

/* ★ 광고 헤드라인 줄 (2026-10-14) — 광고에서 본 문장을 그대로 다시 보여 준다.
   CHO 의 「급여·수당, 아직도 엑셀로 만드십니까?」와 같은 자리다. */
.hero-ask {
  display: inline-block; margin: 24px 0 14px; padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-size: .95rem; font-weight: 700; color: var(--accent-light);
  line-height: 1.55; letter-spacing: -.02em;
}
/* 제목 옆 기수 표시 — CFO 의 「4기 모집」, CHO 의 「2기」와 같은 자리 */
.h1-gi {
  display: inline-block; vertical-align: middle; margin-left: 12px;
  padding: 5px 13px; border: 1px solid var(--accent); border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: var(--accent-light);
  letter-spacing: -.01em;
}
.hero h1 { margin-bottom: 18px; }
.hero .hook2 b { color: var(--ink); font-weight: 800; }

/* ★ 숫자 띠 — CFO·CHO 에는 있고 CMO 에만 없었다.
   첫 화면이 비어 보이던 큰 이유다. 과정의 크기를 한눈에 보여 준다. */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 30px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.022); overflow: hidden;
}
.hero-stats .stat {
  text-align: center; padding: 16px 6px; border-right: 1px solid var(--line2);
}
.hero-stats .stat:last-child { border-right: none; }
.hero-stats b {
  display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent-light);
  letter-spacing: -.03em; line-height: 1.15;
}
.hero-stats small {
  display: block; margin-top: 5px; font-size: .68rem; color: var(--muted);
  line-height: 1.35; letter-spacing: -.02em; word-break: keep-all;
}
@media (max-width: 420px) {
  .hero-stats b { font-size: 1.3rem; }
  .hero-stats small { font-size: .62rem; }
  .hero-stats .stat { padding: 13px 3px; }
}
.hero h1 { font-size: clamp(1.9rem, 6.6vw, 3.2rem); line-height: 1.24; letter-spacing: -.042em; margin-bottom: 20px; }
.hero h1 .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-light); }
.hero .hook2 { font-size: 1.0rem; color: var(--ink2); line-height: 1.7; margin-bottom: 8px; }
.hero .hook3 { font-size: .92rem; color: var(--muted); margin-bottom: 26px; }

/* 히어로 사진 + 일정을 한 카드로 묶는다 (CFO 방식) — 따로 놓으면 흩어져 보인다 */
.hero-visual { border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 0; }
.hero-visual img { height: 200px; }
.fact-row {
  display: grid; gap: 0; margin: -1px 0 26px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(255,255,255,.022); overflow: hidden;
}
.fact { padding: 13px 16px; border-bottom: 1px solid var(--line2); font-size: .85rem; gap: 9px; }
.fact:last-child { border-bottom: none; }
.fact svg { color: var(--accent-light); }
.fact b { color: var(--ink); font-weight: 700; }

.btn-primary {
  background: var(--accent); color: #fff; border-radius: 8px;
  box-shadow: none; font-weight: 700; padding: 16px 30px;
}
.btn-primary:hover { transform: none; background: var(--accent-bright); }
.btn-ghost { border-radius: 8px; border-color: var(--line); color: var(--ink2); padding: 16px 26px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); }

/* 카운트다운은 개강이 가까울 때만 — 48일 초읽기는 조급해 보인다 */
.countdown { display: none !important; }
.countdown.cd-near { display: flex !important; margin-top: 26px; }

/* ---------- 섹션 머리 ---------- */
.section-label { font-size: .74rem; letter-spacing: .1em; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.section-title { font-size: clamp(1.5rem, 4.8vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.3; }
.section-desc { font-size: .93rem; color: var(--ink2); line-height: 1.78; }

/* ============================================================
   ★ 밝은 섹션 — CFO 의 리듬을 만드는 핵심
   강사·수강료·뉴스를 아이보리로 띄운다. 스크롤하면 장면이 바뀐다.
============================================================ */
.inst-section, .apply-section, .home-news {
  background: var(--paper); color: var(--paper-ink);
}
.inst-section .section-title, .apply-section .section-title, .home-news .hn-title { color: var(--paper-ink); }
.inst-section .section-desc, .apply-section .section-desc, .home-news .hn-desc { color: var(--paper-sub); }
.inst-section .section-desc b, .apply-section .section-desc b { color: var(--paper-ink); }
.inst-section .section-label, .apply-section .section-label, .home-news .hn-label { color: var(--accent); }
.home-news { border-top: none; }

/* 밝은 바탕의 강사 카드 */
.inst-grid { gap: 12px; grid-template-columns: 1fr 1fr; }
.inst-card {
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(23,18,14,.04);
}
.inst-card[open] { border-color: var(--accent); grid-column: 1 / -1; }
.inst-card > summary { padding: 20px 14px; gap: 10px; }
.inst-card .avatar {
  width: 68px; height: 68px; min-width: 68px; margin: 0 auto 4px;
  border: 2px solid var(--paper-line) !important; box-shadow: none !important;
  border-radius: 50%; overflow: hidden;
}
.inst-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.inst-card h3 { color: var(--paper-ink); font-size: 1.0rem; font-weight: 800; }
.inst-card .role { color: var(--paper-sub); font-size: .76rem; line-height: 1.5; }
.inst-card .role .sub { color: var(--accent); font-weight: 700; }
.inst-card .more-link {
  border: 1px solid var(--paper-line); background: #fff; color: var(--paper-sub);
  border-radius: 6px; font-size: .74rem; font-weight: 600; padding: 5px 11px;
}
.inst-card .profile { color: var(--paper-sub); }
.inst-card .profile h4 { color: var(--accent); }
.inst-card .profile p, .inst-card .profile li { color: var(--paper-sub); }
.swipe-hint { color: var(--paper-sub); }

/* 밝은 바탕의 수강료·신청 */
.price-box { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); }
.price-head { background: var(--paper); color: var(--accent); border-bottom: 1px solid var(--paper-line); font-weight: 800; letter-spacing: .06em; }
.price-line { border-color: var(--paper-line); }
.plabel { color: var(--paper-ink); font-weight: 700; }
.pnote { color: var(--paper-sub); }
.pval { color: var(--paper-ink); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; }
.pchip { background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.3); color: var(--accent); border-radius: 4px; }
.price-foot { color: var(--paper-sub); border-top: 1px solid var(--paper-line); }
.apply-form { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); }
.apply-form h3, .apply-form label { color: var(--paper-ink); }
.form-field input, .form-field select, .form-field textarea {
  border-radius: 6px; border: 1px solid var(--paper-line); background: #fff; color: var(--paper-ink);
}
/* ★ 신청 섹션을 밝게 바꾸면서 놓친 곳 (2026-10-13 아담 지적)
   전화·이메일 문의가 어두운 바탕용 흰 글자라 아이보리 위에서 거의 안 보였다.
   밝은 바탕에서는 글자도 어두워야 한다. 아이콘은 currentColor 를 따라간다. */
.apply-section .alt-channels { color: var(--paper-sub); }
.apply-section .alt-channels p { color: var(--paper-sub); font-weight: 600; }
.apply-section .alt-channels b { color: var(--paper-ink); font-weight: 800; }
.apply-section .alt-channels svg { color: var(--accent); }
.apply-section .consent-box, .apply-section .form-note { color: var(--paper-sub); }
.apply-section label, .apply-section .form-field label { color: var(--paper-ink); }

/* ★ 모바일에서 히어로 버튼 두 개를 숨긴다 (아담 지적 — 중복)
   위 헤더에 「2기 신청」, 화면 아래 고정 바에도 「2기 신청」이 늘 떠 있다.
   같은 버튼이 한 화면에 세 번 나오면 눈이 지친다.
   데스크톱은 고정 바가 없으므로 그대로 둔다. */
/* ★ 되살림 (2026-10-14) — 어제 「중복」이라 숨겼는데 CHO 에는 그대로 있다.
   그 사이 711명이 들어와 접수가 0건이었다. 첫 화면에서 「지금 신청하라」는
   신호가 사라진 것이 원인 중 하나일 수 있다.
   중복을 피하는 것보다 신청 경로를 하나 더 두는 쪽이 모집에는 유리하다. */
/* ★ 히어로 CTA 는 모바일에서 숨긴다 (2026-10-14 아담 재확인).
   헤더의 「2기 신청」이 sticky 로 늘 화면 위에 있고,
   히어로를 지나는 순간 하단 고정 바가 뜬다 — 첫 화면에 세 개는 중복이다.
   데스크톱은 하단 고정 바가 동선에서 멀어 그대로 둔다. */
@media (max-width: 620px) {
  .hero-actions { display: none; }
}

/* 밝은 바탕의 뉴스 카드 */
.hn-grid { gap: 12px; }
.hn-card {
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 20px 18px;
}
.hn-card:hover { transform: none; border-color: var(--accent); }
.hn-card b { color: var(--paper-ink); font-size: .98rem; font-weight: 800; }
.hn-card span { color: var(--paper-sub); }
.hn-all a { color: var(--accent); font-weight: 700; }

/* ============================================================
   커리큘럼 — 어두운 채로 두되 CFO 의 날짜 블록을 가져온다
============================================================ */
.week { padding-left: 0; margin-bottom: 34px; }
.week::before { display: none; }
.week-dot { display: none; }
.week-head {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 13px;
  margin-bottom: 14px; border-bottom: none;
}
.week-head b { font-size: 1.0rem; font-weight: 800; letter-spacing: -.02em; }
.week-head small { color: var(--muted); }

.sess-item, .sess-item.sess-plain {
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius);
  margin-bottom: 9px;
}
.sess-item[open] { border-color: rgba(var(--accent-rgb),.42); }
.sess-item > summary, .sess-item.sess-plain { padding: 15px 16px; gap: 13px; align-items: flex-start; }
/* ★ 왼쪽 날짜 블록 — 훑어볼 때 날짜가 먼저 눈에 들어온다 (CFO 방식) */
.sess-no em {
  display: block; font-style: normal; font-size: .80rem; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 2px;
}
.sess-no {
  flex: none; width: 54px; min-width: 54px; height: auto; min-height: 50px;
  background: var(--accent); border: none; border-radius: 7px;
  color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: -.01em;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7px 2px; line-height: 1.3; text-align: center;
}
.sess-head h3 { font-size: .96rem; font-weight: 700; line-height: 1.48; }
.sess-head span { font-size: .76rem; color: var(--muted); margin-top: 4px; }
.sess-toggle { color: var(--accent-light); font-weight: 400; }
.sess-prac {
  background: rgba(var(--accent-rgb),.14); color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb),.34); border-radius: 4px; font-weight: 700; font-size: .66rem;
}
.sess-detail { padding: 0 16px 16px 83px; }
.sess-detail li { font-size: .86rem; color: var(--ink2); line-height: 1.72; }

/* ---------- 모바일 고정 바 ---------- */
.sticky-cta { background: rgba(10,10,12,.95); border-top: 1px solid var(--line); }
.sticky-cta .btn-primary { padding: 12px 20px; font-size: .86rem; border-radius: 7px; }

/* ---------- 모바일 ---------- */
@media (max-width: 620px) {
  .inst-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .inst-card > summary { flex-direction: column; align-items: center; text-align: center; padding: 18px 9px; }
  .inst-card .avatar { width: 58px; height: 58px; min-width: 58px; }
  .inst-card h3 { font-size: .92rem; }
  .inst-card .role { font-size: .71rem; text-align: center; }
  .sess-no { width: 48px; min-width: 48px; font-size: .70rem; }
  .sess-detail { padding-left: 74px; }
}

/* ───── 딜로이트 공동 주관 (2026-10-14 아담 — 「큰 자산이니 강조」) ─────
   블랙+오렌지 톤을 깨지 않도록 딜로이트 그린은 아주 조금만 쓴다.
   워드마크의 점과 왼쪽 2px 선뿐 — 그래도 「다른 브랜드가 함께 있다」로 읽힌다. */
.hero-dlt {
  margin-top: 14px; padding: 15px 17px;
  border: 1px solid var(--line); border-left: 2px solid #86bc25;
  border-radius: var(--radius); background: rgba(255,255,255,.022);
}
.hero-dlt .dlt-mark {
  display: block; margin-bottom: 7px;
  font-size: 1.04rem; font-weight: 800; color: var(--ink);
  letter-spacing: -.015em;
}
.hero-dlt .dlt-mark i { font-style: normal; color: #86bc25; }
.hero-dlt p {
  font-size: .85rem; line-height: 1.7; color: var(--muted);
  letter-spacing: -.012em; word-break: keep-all;
}
.hero-dlt p b { color: var(--ink2); font-weight: 700; }
@media (max-width: 420px) {
  .hero-dlt { padding: 13px 14px; }
  .hero-dlt p { font-size: .81rem; }
}

/* 히어로 사진 캡션의 Deloitte — 회색에 묻혀 있었다 */
.hv-caption small b { font-weight: 800; color: #fff; }
.hv-caption small i { font-style: normal; color: #86bc25; }

/* 강사 카드 딜로이트 배지 — 9인 중 4인이 딜로이트라는 것을 카드에서 바로 보이게.
   ★ 이 섹션은 아이보리 바탕이므로 밝은 섹션용 글자색을 써야 한다. */
.inst-dlt {
  display: inline-block; margin: 0 0 7px; padding: 3px 10px;
  border: 1px solid rgba(134,188,37,.55); border-radius: 999px;
  background: rgba(134,188,37,.12);
  font-size: .66rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--paper-ink);
}
.inst-dlt i { font-style: normal; color: #6f9e1e; }

/* 1기 마감 실적 — 「40명 정원」이 왜 급한지를 설명하는 한 줄 (2026-10-14) */
.hero-proof {
  margin-top: 11px; text-align: center;
  font-size: .8rem; line-height: 1.55; color: var(--muted);
  letter-spacing: -.012em; word-break: keep-all;
}
.hero-proof b { color: var(--accent-light); font-weight: 700; }

/* ───── 시인성·여백 보정 (2026-10-14 아담 지적) ─────
   --muted 는 불투명도 0.34 다. 어두운 바탕에서 라벨과 본문에 쓰기엔 너무 흐리다.
   전역 변수를 건드리면 사이트 전체가 흔들리므로 히어로 요소만 따로 올린다. */
.hero-stats small { color: rgba(245, 242, 234, .74); }
.hero-dlt p       { color: rgba(245, 242, 234, .80); }
.hero-proof       { color: rgba(245, 242, 234, .74); }
.hero .hook3      { color: rgba(245, 242, 234, .70); }

/* 모바일 첫 화면 여백 — 칩 위아래가 널널해 내용이 아래로 밀려 있었다.
   데스크톱은 넓은 화면이라 지금 여백이 맞으므로 그대로 둔다. */
@media (max-width: 620px) {
  .hero { padding: 26px 0 50px; }
  .hero-ask { margin: 14px 0 12px; }
  .hero h1 { margin-bottom: 14px; }
  .hero .hook3 { margin-bottom: 20px; }
}

/* 동의 문구 상세 — 법이 요구하는 네 가지(목적·항목·기간·거부 권리)를 모두 적되
   한 줄로 늘어놓으면 아무도 안 읽는다. 본문보다 작게, 줄을 나눠 둔다. (2026-10-15) */
.agree-row .agree-detail {
  display: block; margin-top: 6px; font-style: normal;
  font-size: .78rem; line-height: 1.62; opacity: .82; letter-spacing: -.012em;
  word-break: keep-all;
}

/* 푸터 약관 링크 — 법으로 공개해야 하는 것이므로 눈에 띄되 본문을 가리지 않게 (2026-10-15) */
.site-footer .foot-policy a {
  color: var(--ink2); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 1px;
}
.site-footer .foot-policy a:hover { color: var(--ink); border-bottom-color: rgba(255,255,255,.4); }

/* ============================================================
   수강생 후기 섹션 (2026-10-23, CFO 에서 이식) — 신청서 바로 위.
   앞뒤가 모두 밝은 섹션(강좌뉴스·신청서)이라 검은 띠가 그대로 구분선이 된다.
   별점은 SVG 다 — 이모지는 쓰지 않는다. 장식 따옴표도 없다 (10/23 아담 반려).
============================================================ */
.home-reviews { background: var(--bg); color: var(--ink); padding: 64px 0 60px; }
.home-reviews[hidden] { display: none !important; }
.rv-head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.rv-label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--accent); margin-bottom: 10px; }
.rv-title { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 900; letter-spacing: -.028em; margin-bottom: 0; color: var(--ink); }
.rv-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 0; padding: 0; }
.rv-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--card); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 26px 26px 22px;
}
.rv-card.is-pinned { border-color: rgba(var(--accent-rgb), .42); background: var(--card2); }
.rv-card[hidden] { display: none; }
.rv-text { margin: 0; font-size: 1rem; line-height: 1.75; color: rgba(245, 242, 234, .92); word-break: keep-all; flex: 1 1 auto; }
.rv-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line2); }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars i { display: inline-block; width: 15px; height: 15px; }
.rv-stars svg { width: 100%; height: 100%; fill: rgba(245, 242, 234, .18); }
.rv-stars i.on svg { fill: var(--accent); }
.rv-who { font-size: .86rem; color: rgba(245, 242, 234, .72); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.rv-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(245, 242, 234, .4); display: inline-block; }
.rv-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 28px; }
.rv-more-btn {
  background: none; color: var(--ink); border: 1px solid rgba(245, 242, 234, .32); border-radius: var(--radius);
  padding: 11px 24px; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; transition: background .2s, border-color .2s;
}
.rv-more-btn:hover { background: rgba(245, 242, 234, .08); border-color: var(--ink); }
@media (max-width: 720px) {
  .home-reviews { padding: 44px 0 40px; }
  .rv-grid { grid-template-columns: 1fr; gap: 12px; }
  .rv-card { padding: 24px 20px 20px; }
  .rv-text { font-size: .96rem; }
}