/* 헬로버 첫 화면(2026-10-24 → 10-31 정돈 「나」) — 색 이름(--g1 보라 · --s1 연보라 · --ink · --p-sub)은 ds.css 라일락 그대로 가져옴
   정돈 규칙(10-31 마스터 「AI 느낌 · 생각해서 정돈된 레이아웃 같지 않다」 → 방향 「나」, 결정 = decisions/2026-10-30-hellobour-front-try.md 「정돈」):
   · 상자 한 모양(흰 바탕 + 가는 선 · 모서리 20) · 그림자·반투명·그라데이션 없음 — 보라는 단추와 고른 것에만, 한 색으로
   · 칸 구분 = 여백 + 번갈아 연한 바탕(.alt) · 시작선 하나(내용 폭 1120)
   · 글자 6단계(--t1~--t6) · 굵기 셋(400 본문 · 700 이름·작은 제목 · 800 큰 제목·값)
   · ds.css 는 가게 홈페이지가 같이 쓰므로 고치지 않고 여기(.hm 안)에서만 덮음 */
.hm{--hl:#E6E4EE;--tint:#F6F5FA;--r:20px;--r-s:12px;
  --t1:clamp(32px,4.8vw,56px);--t2:clamp(28px,3.4vw,40px);--t3:28px;--t4:18px;--t5:16px;--t6:14px}
html{scroll-padding-top:24px}
body{margin:0;background:#FFFFFF;color:var(--ink);letter-spacing:-.02em;font-family:Pretendard,system-ui,sans-serif}
.hm{position:relative;isolation:isolate;overflow-x:clip;background:#FFFFFF}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.hm a{color:inherit}
.sub{color:var(--p-sub)}
h1,h2,h3,.sec-lead,.step p,.faq p,.faq summary{word-break:keep-all;overflow-wrap:anywhere}
main{letter-spacing:-.01em}
main :is(p,li,td,th,small,summary,figcaption,span,b,a,label,button){word-break:keep-all;overflow-wrap:anywhere}
.home-skip{position:absolute;inset-block-start:8px;inset-inline-start:8px;transform:translateY(-160%);padding:12px;background:#FFFFFF;z-index:5}
.home-skip:focus{transform:none}
.home-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 공용 덮기: 유리 카드 → 흰 상자 + 가는 선 · 그라데이션 단추·글자 → 한 색 */
.hm .glass{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--hl);box-shadow:none}
.hm .btn.grad{background:var(--g1);box-shadow:none;font-weight:700}
.hm .btn.grad:hover{background:color-mix(in srgb,var(--g1) 86%,#000);filter:none}

/* 위 */
.top{display:flex;align-items:center;gap:10px;min-height:68px}
.brand{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:800;text-decoration:none;white-space:nowrap;flex:none}
.brand .hb-logo{display:block;width:154px;height:auto;max-width:100%}
.nav{display:none;gap:24px;margin-inline-start:24px;font-size:15px;font-weight:400}
.nav a{text-decoration:none;color:var(--p-sub)}
.nav a:hover{color:var(--ink)}
.top .sp{flex:1}
.lang{position:relative;display:flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;font-size:var(--t6);font-weight:700}
.lang[hidden]{display:none}
.lang>span{display:grid}
.lang svg{width:15px;height:15px}
.lang select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;max-width:9.5em;padding:0;cursor:pointer;text-overflow:ellipsis}
.lang select:focus-visible{outline:2px solid var(--g1);outline-offset:4px;border-radius:4px}
.login{min-height:36px;padding:0 14px;border-radius:999px;font-size:var(--t6);font-weight:700;text-decoration:none;display:flex;align-items:center;white-space:nowrap}
.login.out{gap:6px;font-family:inherit;color:inherit;cursor:pointer}.login.out[hidden]{display:none}.login.out svg{width:15px;height:15px}  /* 로그인한 사람만(home.js logout, 11-03) */
@media(max-width:480px){.top.in .lang{width:36px;padding:0;justify-content:center}.top.in .lang select{position:absolute;inset:0;width:100%;max-width:none;opacity:0}}  /* 로그인한 휴대폰 = 언어 칸은 지구 그림만(누르면 같은 언어 고르기) — 로그아웃 자리 */
@media(max-width:599px){.login.out{padding:0;width:36px;justify-content:center}.login.out .out-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}  /* 휴대폰 = 그림만(이름은 aria-label) */

/* 첫 칸(11-05 마스터 「가」): 제목 → 주소 간판(가게 주소를 크게 쳐 봄 · 위 굵은 선 + 아래 가는 선) → 만들기 단추 + 요금 한 줄
   간판 입력 칸 폭 = 뒤에 숨은 같은 글자(.sign-m, home.js 가 채움) 폭 — 긴 주소는 칸 안에서 밀리고 뒤 주소(.hellobour.com)는 다음 줄로 */
.wrap.hero{padding-block:28px 48px;text-align:center}  /* 11-05 마스터 「센터에 맞추자」 — 제목·주소·단추 가운데 */
h1{font-size:var(--t1);line-height:1.16;letter-spacing:-.035em;margin:0;font-weight:800}
.sign{margin-top:28px;padding-block:14px 22px;border-top:2px solid var(--ink);border-bottom:1px solid var(--hl)}
.sign[hidden]{display:none}
.sign-l{display:block;font-size:var(--t6);font-weight:700;color:var(--p-sub)}
.sign-v{margin:8px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;min-width:0;font-size:clamp(30px,7vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1.12}
.sign-in{position:relative;display:inline-block;min-width:0;max-width:100%;box-shadow:0 3px 0 var(--hl)}
.sign-in:focus-within{box-shadow:0 3px 0 var(--g1)}
main .sign-m{display:block;visibility:hidden;white-space:pre;overflow:hidden;min-width:1ch;max-width:100%}
.sign-in input{position:absolute;inset:0;width:100%;min-width:0;box-sizing:border-box;padding:0;border:0;outline:0;background:transparent;font:inherit;letter-spacing:inherit;color:var(--ink)}
.sign-in input::placeholder{color:var(--ink);opacity:.28}
.sign-d{font-weight:400;color:var(--p-sub);min-width:0}
.hero-go{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;margin-top:22px}
/* 주소 확인 한 줄(11-05 「주소가 되는지 먼저」 — home.js): 쓸 수 있어요 = 초록 · 이미 있음·못 씀 = 빨강 · 확인 중 = 회색 · 빈 줄도 자리를 지켜 아래가 안 튐 */
.sign-st{min-height:1.5em;margin:10px 0 0;font-size:var(--t5);font-weight:700;color:var(--p-sub)}
.sign-st.ok{color:#11704A}.sign-st.ok::before{content:"✓ "}
.sign-st.bad{color:#B3261E}
/* 「중복 확인」 단추(11-06 마스터 「주소 중복 체크라고 설명해야」) — 치는 동안 저절로 확인 + 누르면 바로 · 얇은 선 알약 */
.sign-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin-top:10px}
.sign-row .sign-st{margin:0}
.sign-row .sign-st:empty{display:none}
.sign-chk{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:1px solid var(--hl);border-radius:999px;background:#fff;font:inherit;font-size:var(--t6);font-weight:700;color:var(--ink);cursor:pointer}
.sign-chk:hover,.sign-chk:focus-visible{border-color:var(--ink)}
.hero-go .btn{min-height:54px;padding:0 26px;font-size:var(--t5)}
/* 광고 영상 단추 + 창(11-05 마스터 「광고 영상 보기」 — 누를 때만 열림, home.js) */
.hplay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;font:inherit;font-size:var(--t5);font-weight:700;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hl)}
/* 로그인한 사장님 = 첫 칸 「내 홈페이지」 이 계정 홈페이지 모두(home.js mine — 11-06) · 흰 칸 + 얇은 선 알약 */
.mine{margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;font-size:var(--t6)}
.mine-t{font-weight:700;color:var(--p-sub)}
.mine a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--hl);border-radius:999px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
.mine a:hover,.mine a:focus-visible{border-color:var(--ink)}
.hplay::before{content:"";flex:none;width:0;height:0;border-block:6px solid transparent;border-left:10px solid currentColor}  /* 재생 표시는 오른쪽→왼쪽 언어에서도 안 뒤집음 */
.hplay:hover{text-decoration-color:currentColor}
.hplay:focus-visible,.hpop-x:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.hpop{box-sizing:border-box;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:18px clamp(14px,3vw,28px) 20px;border:0;border-radius:var(--r);background:#FFFFFF;color:var(--ink)}
.hpop::backdrop{background:rgba(20,22,28,.6)}
.hpop-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hpop-h h2{margin:0;font-size:var(--t4)}
.hpop-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-inline-end:-8px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.hpop-x:hover{background:var(--tint)}
.hpop-v{display:block;width:100%;height:auto;aspect-ratio:16/9;margin-top:12px;border-radius:var(--r-s);background:#14161C}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cta .btn{min-height:54px;padding:0 26px;font-size:var(--t5)}

/* 칸 공통 — 제목 위 · 내용은 제목 아래 28 · 번갈아 연한 바탕(.alt = 화면 끝까지) */
.sec{padding-block:40px}
.sec.alt{background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax)}
.sec.alt .glass{border-color:#E1DEEA}
h2{font-size:var(--t2);line-height:1.22;letter-spacing:-.03em;margin:0;font-weight:800}
.sec-lead{font-size:var(--t4);line-height:1.7;margin:14px 0 0;max-width:34em;color:var(--p-sub)}
/* 글자 꾸밈(11-06 마스터 「타이포 전체적으로 · 전문가답게」): 칸 머리말(eyebrow) = 작은 굵은 글 + 짧은 선 · 첫 줄 강조(lead-a) = 검정 굵게
   요금 숫자 = 고른 폭 숫자(tnum) · 단위(원 · ₩)·「약」 = 작고 옅게(home.js unitize · put) — 글은 그대로 */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:var(--t6);font-weight:800;letter-spacing:.06em;color:var(--ink)}
.eyebrow::before{content:"";flex:none;width:22px;height:2px;background:var(--ink)}
.sec-lead .lead-a{display:block;color:var(--ink);font-weight:800}
.vs-p,.vs-sum b,.ptab .amt{font-variant-numeric:tabular-nums}
.u{font-size:.62em;font-weight:800;letter-spacing:0;margin-left:.06em}
.u:first-child{margin:0 .06em 0 0}
.vs-ab{font-weight:600;color:var(--p-sub)}

/* 예약이 오는 길 = 12초 실제 화면(11-05 마스터 「그 아래에 그냥 보이게」): 왼쪽 내 홈페이지(손님 예약 4장면) · 오른쪽 내 휴대폰(잠금 화면 알림 → 확정)
   12초 한 바퀴 · CSS 움직임만 · 화면에 보일 때만 움직임(home.js 가 .go) · 움직임 줄이기 = 마지막 장면(손님 확정 · 사장님 확정 화면)에 멈춤 */
.hfilm{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,8vw,120px);margin-top:24px;padding:28px 12px 60px;border:1px solid var(--hl);border-radius:var(--r);background:#FFFFFF;overflow:hidden}
.hdev{flex:0 1 240px;min-width:0;max-width:44%}
.hlab{margin:0 0 10px;text-align:center;font-size:var(--t6);font-weight:700;color:var(--p-sub)}
.hscr{position:relative;aspect-ratio:390/844;border:6px solid var(--ink);border-radius:24px;background:var(--ink);overflow:hidden}
.hfilm .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:12s linear infinite paused}
.hfilm .lock{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding-top:22%;background:#22242A;color:#F3F2EE}
.hfilm .lock>b{font-size:clamp(26px,3.4vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1}
.hfilm .lock>span{margin-top:6px;font-size:11px;opacity:.8}
.hfilm .noti{position:absolute;left:5%;right:5%;top:46%;padding:8px 10px;border-radius:12px;background:#F3F2EE;color:var(--ink);text-align:start;opacity:0;animation:12s ease-out infinite paused k-noti}
.hfilm .noti p{margin:0}
.hfilm .nh{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--p-sub)}
.hfilm .nh img{display:block;width:14px;height:14px}
.hfilm .nh small{margin-inline-start:auto;font-size:10px}
.hfilm .nt{margin-top:4px;font-size:12px;line-height:1.3;font-weight:700}
.hfilm .nb{font-size:11px;line-height:1.35}
.hfilm .tap{position:absolute;box-sizing:border-box;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--g1);background:color-mix(in srgb,var(--g1) 35%,transparent);opacity:0;animation:12s ease-out infinite paused}
.hfilm .caps{position:absolute;left:20px;right:20px;bottom:18px;height:1.5em;margin:0;padding:0;list-style:none;font-size:var(--t5);font-weight:700}
.hfilm .caps :where(li){position:absolute;left:0;bottom:0;white-space:nowrap;opacity:0;animation:12s linear infinite paused}
.hfilm.go:not(.stop) :is(.fr,.noti,.tap,.caps li){animation-play-state:running}
.hfilm-ctl{margin:10px 0 0;display:flex;justify-content:flex-end}
.hstop{font:inherit;font-size:var(--t6);font-weight:700;min-height:40px;padding:0 14px;border:1px solid var(--hl);border-radius:999px;background:#FFFFFF;color:var(--p-sub);cursor:pointer}
.hstop[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.hstop:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hfilm-ctl{display:none}}
/* 기능 칸 반복 영상(11-07 「어디서든 예약」): 정사각 · 바탕 = 영상 바탕과 같은 연한 칸(.alt) · 아래 줄 = 사용 방법(왼쪽) · 멈춤(오른쪽, 움직임 줄이기면 숨김) */
.hmo-w{max-width:560px;margin:0 auto}
.hmo{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:var(--r);background:var(--tint)}
.hmo-ctl{max-width:560px;margin:12px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.hmo-ctl .hstop{display:none}}
.hfilm .t1{left:82%;top:94%;animation-name:k-t1}.hfilm .t2{left:50%;top:69%;animation-name:k-t2}
.hfilm .k-c0{animation-name:k-c0}.hfilm .k-c2{animation-name:k-c2}.hfilm .k-c4{animation-name:k-c4}.hfilm .k-c5{animation-name:k-c5}.hfilm .k-lock{animation-name:k-lock}.hfilm .k-o3{animation-name:k-o3}
.hfilm .k-a{animation-name:k-a}.hfilm .k-b{animation-name:k-b}.hfilm .k-c{animation-name:k-cc}.hfilm .k-d{animation-name:k-d}
@keyframes k-c0{0%,15%{opacity:1}17%,96%{opacity:0}98%,100%{opacity:1}}
@keyframes k-c2{0%,15%{opacity:0}17%,31%{opacity:1}33%,100%{opacity:0}}
@keyframes k-c4{0%,31%{opacity:0}33%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes k-c5{0%,61%{opacity:0}63%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes k-lock{0%,47%{opacity:1}49%,96%{opacity:0}98%,100%{opacity:1}}
@keyframes k-o3{0%,47%{opacity:0}49%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes k-noti{0%,36%{opacity:0;transform:translateY(-30%)}39%,47%{opacity:1;transform:none}49%,100%{opacity:0}}
@keyframes k-t1{0%,27%{opacity:0;transform:scale(.6)}29%{opacity:1;transform:scale(1)}32%,100%{opacity:0;transform:scale(1.4)}}
@keyframes k-t2{0%,56%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1)}61%,100%{opacity:0;transform:scale(1.4)}}
@keyframes k-a{0%,31%{opacity:1}33%,98%{opacity:0}100%{opacity:1}}
@keyframes k-b{0%,32%{opacity:0}34%,47%{opacity:1}49%,100%{opacity:0}}
@keyframes k-cc{0%,48%{opacity:0}50%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes k-d{0%,62%{opacity:0}64%,96%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hfilm :is(.fr,.noti,.tap,.caps li){animation:none}.hfilm :is(.k-c5,.k-o3,.k-d){opacity:1}}
/* 직접 해 보기(10-30 튜토리얼 → 10-31 「나」 체험 중심): 휴대폰 = 지금 누를 화면 하나 크게 + 다른 쪽은 아래 짧게(상대 반응이 보이게)
   720~ = 두 화면 나란히 · 1024~ = 왼쪽 안내 칸(단계 점 · 할 일 · 끝 줄) + 두 화면. 화면 안은 home-try.js 가 그림 */
.try-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.try-tabs button{font:inherit;font-size:var(--t5);font-weight:700;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--hl);background:#FFFFFF;color:var(--ink);cursor:pointer}
.try-tabs button[aria-selected=true]{border-color:var(--g1);color:#FFFFFF;background:var(--g1)}
.try-tabs button:focus-visible,.try-stage button:focus-visible,.try-in:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.try-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
.try-guide{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-s);background:#FFFFFF;border:1px solid var(--hl)}
.try-dots{display:flex;gap:5px;flex:none}
.try-dots span{width:8px;height:8px;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #CFCBDD}
.try-dots .did{background:var(--g1);opacity:.4;box-shadow:none}
.try-dots .on{width:22px;background:var(--g1);box-shadow:none}
.try-say{margin:0;font-size:var(--t5);font-weight:700;line-height:1.45;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.try-ph{min-width:0}
.try-ph.act{order:-1}
.try-guide{order:-2}
.try-who{margin:0 0 6px 4px;display:flex;align-items:center;gap:6px;font-size:var(--t6);font-weight:700;color:var(--p-sub)}
.own .try-who{color:var(--g1)}
.try-now{display:none;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;color:#FFFFFF;background:var(--g1)}
.try-ph.act .try-now{display:inline-block}
.try-scr{min-height:280px;border-radius:var(--r);border:1px solid var(--hl);background:#FFFFFF;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s}
.own .try-scr{background:#FCFBFF}
.try-ph.act .try-scr{border-color:var(--g1);box-shadow:0 0 0 1px var(--g1)}
/* 휴대폰: 지금 아닌 쪽 = 화면 맨 위 한 줄만(기다리는 중 · 받은 요청) — 흐림 없이 */
@media (max-width:719px){.try-stage:not(.end) .try-ph:not(.act) .try-scr{min-height:0}.try-stage:not(.end) .try-ph:not(.act) :is(.try-shop img,.try-body>:not(:first-child)){display:none}.try-stage:not(.end) .try-ph:not(.act) .try-idle{margin-top:0!important}}  /* 끝 장면(.end)은 두 화면 다 펼침 — 손님 쪽 「다시 요청하기」 등 */
.try-shop img{display:block;width:100%;height:64px;object-fit:cover;background:var(--s1)}
.try-shop b,.try-bar b{display:block;padding:10px 12px 0;font-size:15px;font-weight:800;letter-spacing:-.02em}
.try-bar{min-height:56px;display:flex;align-items:flex-end;background:var(--s1)}
.try-bar b{padding:0 12px 10px;color:var(--g1)}
.try-body{display:flex;flex-direction:column;gap:8px;padding:12px;font-size:15px;line-height:1.5;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}
.try-body>*{margin:0}
.try-lb{font-size:var(--t6);font-weight:700;color:var(--p-sub)}
.try-pill{padding:8px 10px;border-radius:var(--r-s);background:var(--s1);font-weight:700}
.try-chips{display:flex;flex-wrap:wrap;gap:6px}
.try-chip{font:inherit;font-size:var(--t6);font-weight:700;min-height:40px;padding:0 11px;border-radius:10px;border:1px solid var(--hl);background:#FFFFFF;color:var(--ink);cursor:pointer}
.try-chip.on{border-color:var(--g1);color:#FFFFFF;background:var(--g1)}
.try-btn{font:inherit;font-size:15px;font-weight:700;min-height:44px;padding:6px 10px;border-radius:var(--r-s);border:0;color:#FFFFFF;background:var(--g1);cursor:pointer}
.try-btn.ghost{color:var(--ink);background:#FFFFFF;border:1px solid var(--hl)}
.try-btn.small{min-height:36px;padding:2px 12px;font-size:var(--t6)}
.try-btn:disabled{opacity:.45;cursor:default}
.try-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.try-row .try-btn{padding-inline:4px}
.try-in{font:inherit;font-size:var(--t5);font-weight:700;min-height:44px;padding:0 10px;border-radius:var(--r-s);border:1.5px solid var(--g1);background:#FFFFFF;color:var(--ink);width:100%;box-sizing:border-box}
.try-card{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--r-s);background:#FFFFFF;border:1px solid var(--hl)}
.try-card b{color:var(--g1)}.try-card strong{font-size:var(--t4)}
.try-q{font-size:var(--t5);font-weight:800}
.try-msg,.try-idle{color:var(--p-sub);font-weight:400}
.try-idle{margin-top:40px!important;text-align:center}
.try-ok{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--r-s);background:#EAF8F1;color:#11704A;font-weight:700}
.try-ok b::before{content:"✓ "}
.try-no{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--r-s);background:#FFF3E3;color:#8A4A00;font-weight:700}
.try-note{padding:9px 10px;border-radius:var(--r-s);background:var(--s1);font-weight:700}
.try-note.warn{background:#FFF3E3;color:#7A4300}.try-note.go{background:#E7F2FF;color:#0B4F8A}
.try-tag{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--s1);color:var(--g1);font-size:13px;font-weight:700}
.try-hint{color:var(--g1);font-weight:700}
.try-push{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:var(--r-s);background:#FFFFFF;border:1px solid var(--hl);box-shadow:0 10px 22px -16px rgba(14,15,20,.4);animation:trydrop .45s cubic-bezier(.22,1,.36,1)}
.try-push b{font-size:var(--t6)}.try-push span{font-size:var(--t6);color:var(--p-sub);font-weight:400}
@keyframes trydrop{from{opacity:0;transform:translateY(-8px)}}
.try-bub{align-self:flex-start;max-width:92%;padding:8px 11px;border-radius:14px 14px 14px 4px;background:var(--s1);font-weight:400}
.try-bub.me{align-self:flex-end;border-radius:14px 14px 4px 14px;color:#FFFFFF;background:var(--g1)}
.try-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.try-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--s1)}
.try-album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.try-pic{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--s1);cursor:pointer}
.try-pic img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.try-pic.on{border-color:var(--g1)}
.try-tick{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:transparent;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1.5px #CFCBDD}
.try-pic.on .try-tick{color:#FFFFFF;background:var(--g1);box-shadow:none}
.try-ticket{text-align:center;padding:14px 10px;border-radius:var(--r-s);background:var(--s1)}
.try-ticket b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--g1)}
.try-queue{display:grid;gap:6px}
.try-qrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 10px;border-radius:var(--r-s);background:#FFFFFF;border:1px solid var(--hl)}
.try-qrow.dim{opacity:.55}
.try-qrow em{font-style:normal;padding:1px 7px;border-radius:999px;background:var(--s1);color:var(--g1);font-size:12px;font-weight:700}
.try-qrow .try-btn{margin-inline-start:auto}
.try-done{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:6px}
.try-done[hidden]{display:none}
.try-done p{flex-basis:100%;margin:0;font-size:var(--t5);font-weight:700}
.try-done .btn{min-height:46px;padding:0 20px;font-size:15px}
.try-again{font:inherit;font-size:15px;font-weight:700;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--hl);background:#FFFFFF;color:var(--ink);cursor:pointer}
/* 다음에 누를 곳 = 은은한 빛 번짐(home-try.js 가 .nx) · 움직임 줄이기면 테두리만 */
.try-stage .nx{animation:trynx 1.6s ease-out infinite}
@keyframes trynx{0%{box-shadow:0 0 0 0 rgba(91,91,214,.45)}75%,100%{box-shadow:0 0 0 9px rgba(91,91,214,0)}}
@media (prefers-reduced-motion:reduce){.try-stage .nx{animation:none;outline:2px solid var(--g1);outline-offset:2px}.try-push{animation:none}.try-scr{transition:none}}
@media (max-width:519px){.try-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.try-tabs button{grid-column:span 2;padding:0 8px}.try-tabs button:nth-child(4){grid-column:2/span 2}}  /* 휴대폰 = 탭 다섯을 3 + 2(아래 둘은 가운데) */

/* 묻는 것 = 가는 선 목록(상자 없음) */
.faq{display:grid;gap:0 32px;margin-top:28px}
.hm .faq details{padding:20px 0;border:0;border-bottom:1px solid var(--hl);border-radius:0;background:none}
.faq summary{cursor:pointer;font-size:var(--t4);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--g1);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:var(--t5);line-height:1.72;font-weight:400;color:var(--p-sub);margin:10px 0 0}

/* 끝 띠 = 진한 한 색 · 흰 단추 · 꼬리 */
.band{margin:56px 0;padding:48px 24px;border-radius:var(--r);text-align:center;background:var(--ink);color:#FFFFFF}
.band h2{margin:0}
.band .sec-lead{margin-inline:auto}
.band .cta{justify-content:center}
.hm .band .btn.grad{background:#FFFFFF;color:var(--ink)}
.hm .band .btn.grad:hover{background:#ECEAF3}

/* 다른 서비스와 비교(11-05 마스터 「회사 세로 · 서비스 가로 · 체크하며 헬로버가 돋보이게」): 표 하나 · 첫 칸(서비스 이름) 고정 + 휴대폰은 옆으로 밀어 봄
   헬로버 줄 = 연한 보라 바탕 + 보라 동그라미 ✓ · 다른 회사 ✓ = 잉크색 표시만 · △ 일부 · ✕ 없음(공식 글로 확인된 것만) · — 못 찾음 = 옅게 */
.mx-w{margin-top:28px;overflow-x:auto;border:1px solid var(--hl);border-radius:var(--r);background:#FFFFFF;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.mx-w:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.mx{width:100%;min-width:940px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--t6);line-height:1.35}
.mx :is(thead th,tbody th):first-child{width:168px}.mx thead th:last-child{width:190px}  /* 표시 칸 7개 = 남은 폭을 똑같이 */
.mx :is(th,td){padding:14px 10px;border-bottom:1px solid var(--hl);text-align:center;vertical-align:middle;word-break:keep-all;overflow-wrap:anywhere}
.mx thead th{padding-block:16px 12px;font-size:13px;font-weight:700;color:var(--p-sub);vertical-align:bottom;border-bottom:1px solid var(--ink)}
.mx tbody tr:last-child :is(th,td){border-bottom:0}
.mx :is(thead th,tbody th):first-child{position:sticky;inset-inline-start:0;z-index:1;padding-inline:16px 12px;text-align:start;background:#FFFFFF;box-shadow:inset -1px 0 0 var(--hl)}
.mx tbody th{font-size:var(--t5);font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow-wrap:normal}  /* 회사 이름은 낱말 중간에서 안 끊김 */
:is(.mx,.mxm-t) .mk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:15px;font-weight:800;line-height:1}
:is(.mx,.mxm-t) .c-y .mk::before{content:"✓"}:is(.mx,.mxm-t) .c-y .mk{color:var(--ink)}
:is(.mx,.mxm-t) .c-p .mk::before{content:"△"}:is(.mx,.mxm-t) .c-p .mk{font-size:13px;color:var(--p-sub)}
:is(.mx,.mxm-t) .c-n .mk::before{content:"✕"}:is(.mx,.mxm-t) .c-n .mk{font-size:13px;color:#B3261E}
:is(.mx,.mxm-t) .c-u .mk::before{content:"—"}:is(.mx,.mxm-t) .c-u .mk{font-weight:400;color:#8E8A9C}
:is(.mx,.mxm-t) small{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--p-sub)}
:is(.mx,.mxm-t) .mx-pr{text-align:start;font-weight:700;font-variant-numeric:tabular-nums}
.mx .mx-hb :is(th,td){background:#F3F1FC;border-bottom:2px solid var(--g1)}
.mx .mx-hb th{font-size:var(--t4);font-weight:800;color:var(--g1)}
.mx .mx-hb .c-y .mk{color:#FFFFFF;background:var(--g1)}
.mx .mx-hb small,.mx .mx-hb .mx-pr{color:var(--g1);font-weight:700}
.mx-swipe{display:none;margin:20px 0 -16px;font-size:13px;font-weight:700;color:var(--p-sub)}
@media (max-width:719px){.mx-swipe{display:block}.mx :is(thead th,tbody th):first-child{width:128px;padding-inline:12px 8px}.mx tbody th{font-size:var(--t6)}.mx .mx-hb th{font-size:var(--t5)}}  /* 휴대폰 = 이름 칸 좁게 · 「옆으로 밀어 보세요」 */
/* 휴대폰 비교(2026-11-06 마스터 「가격 비교도 모바일에서 거의 짤려서 가독성이 떨어진다」): ~700px = 넓은 표 대신 「헬로버 vs 고른 회사」 두 칸(home.js mxm — 표 칸을 그대로 옮김, 사실은 표 한 곳)
   회사 단추 = 고른 것만 보라 · 넘치면 단추 줄만 옆으로 · 701px~ = 표 그대로 · 스크립트 없으면 표 그대로(mx-js 없음) */
.mxm{display:none;margin-top:24px}
@media (max-width:700px){#compare.mx-js :is(.mx-w,.mx-swipe){display:none}#compare.mx-js .mxm:not([hidden]){display:block}}
.mxm-l{margin:0;font-size:13px;font-weight:700;color:var(--p-sub)}
.mxm-pick{display:flex;gap:8px;margin:8px -20px 0;padding:2px 20px 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.mxm-pick::-webkit-scrollbar{display:none}
.mxm-c{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--hl);border-radius:22px;background:#FFFFFF;color:var(--ink);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.mxm-c[aria-pressed=true]{background:var(--g1);border-color:var(--g1);color:#FFFFFF}
.mxm-c:focus-visible{outline:3px solid var(--g1);outline-offset:2px}
.mxm-t{width:100%;margin-top:14px;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--hl);border-radius:var(--r);background:#FFFFFF;font-size:var(--t6);line-height:1.4}
.mxm-t :is(th,td){padding:12px 8px;border-bottom:1px solid var(--hl);text-align:center;vertical-align:middle;word-break:keep-all;overflow-wrap:anywhere}
.mxm-t tbody tr:last-child :is(th,td){border-bottom:0}
.mxm-t thead th{padding-block:14px 12px;font-size:var(--t6);font-weight:800;color:var(--ink);border-bottom:1px solid var(--ink)}
.mxm-t thead th:first-child{width:32%;font-size:12px;font-weight:700;color:var(--p-sub)}
.mxm-t :is(thead,tbody) th:first-child{padding-inline:14px 8px;text-align:start}
.mxm-t tbody th{font-size:13px;font-weight:700;color:var(--ink)}
.mxm-t .mxm-hb{background:#F3F1FC}
.mxm-t thead .mxm-hb{color:var(--g1)}
.mxm-t .mxm-hb.c-y .mk{color:#FFFFFF;background:var(--g1)}
.mxm-t .mxm-hb small,.mxm-t .mxm-hb.mx-pr{color:var(--g1);font-weight:700}
.mxm-t .mx-pr{font-size:13px}
/* 자주 묻는 것 아래 = 설정 방법 보기(11-05 「이렇게 시작해요」 칸 대신 링크 하나) */
.faq-more{margin:28px 0 0}
.faq-more .btn{gap:8px;min-height:48px;padding:0 20px;font-size:15px}
/* 칸 등장(10-29): 화면에 들어오면 살짝 떠오름 — JS 가 켰을 때만(없으면 그대로 보임) */
html.rv .sec>*{transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.rv .sec:not(.seen)>*{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){html.rv .sec>*{transition:none}html.rv .sec:not(.seen)>*{opacity:1;transform:none}}

/* 요금 표(10-31 3차 「표로」): 처음 30건 0원 · 기본 · 담당자 · 추가 기능 */
.ptab{width:100%;margin-top:28px;border-collapse:separate;border-spacing:0;border-radius:var(--r);overflow:hidden;font-size:var(--t5)}
.ptab th,.ptab td{padding:16px 18px;border-top:1px solid var(--hl);vertical-align:middle}
.ptab tr:first-child>*{border-top:0}
.ptab th{text-align:start;font-weight:inherit}
.ptab th b{display:block;font-size:var(--t4);font-weight:700;letter-spacing:-.02em}
.ptab th small{display:block;margin-top:3px;font-size:var(--t6);line-height:1.55;font-weight:400;color:var(--p-sub)}
.ptab td{width:42%;text-align:end;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.ptab td b{font-weight:700;color:var(--ink)}
.ptab td small{font-size:var(--t6);font-weight:400;color:var(--p-sub)}
.ptab .amt{font-size:var(--t3);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ptab tr.free>*{background:var(--s1)}
.ptab tr.free .amt{color:var(--g1)}
.price-count{margin:14px 0 0;font-size:var(--t6);font-weight:400;line-height:1.65;max-width:42em}
.home-lang-error{padding-block:16px;color:var(--st-bad)}
.tr-band{margin:0;padding:12px 24px;background:var(--st-pend-bg);color:var(--st-pend);font-size:var(--t6)}

@media (min-width:720px){
  .wrap.hero{padding-block:40px 64px}
  .hfilm{padding:36px 24px 64px}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .ptab th,.ptab td{padding:18px 24px}
  .try-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .try-guide{grid-column:1/-1}
  .try-done{grid-column:1/-1}
  .try-ph.act{order:0}
  .try-scr{min-height:320px}
  .try-ph:not(.act) .try-scr{min-height:0}
  .try-body{padding:14px}
}
@media (min-width:1024px){
  .wrap{padding:0 32px}
  .nav{display:flex}
  .sec{padding-block:80px}
  .band{padding:64px 32px}
  /* 직접 해 보기 = 왼쪽 안내 칸(단계 점 · 지금 할 일 크게 · 끝 줄) + 오른쪽 두 화면 */
  .try-stage{grid-template-columns:264px repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;row-gap:16px;align-items:start}
  .try-guide{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:14px;padding:0;border:0;background:none;margin-top:30px}
  .try-say{font-size:22px;line-height:1.4;font-weight:800}
  .try-done{grid-column:1;grid-row:2;margin-top:0}
  .try-done p{font-weight:400;color:var(--p-sub)}
  .try-ph{grid-row:1/span 2}
  .try-scr{min-height:340px}
}
@media (max-width:380px){.lang select{max-width:6.5em}.login{padding:0 11px}}

@media(max-width:599px){.top .brand{flex:0 1 132px;min-width:90px}.top .brand .hb-logo{width:132px}.top .lang{padding-inline:9px}.top .lang select{max-width:7em}}

/* 헬로버로 만든 홈페이지(11-02 견본 다음 띠) — 제목은 다른 칸과 같은 h2 · 찾기 칸·업종 단추는 업체가 한 묶음을 넘을 때만(home.js) */
.market-search{display:flex;align-items:center;gap:14px;max-width:820px;margin-top:24px;padding:8px 8px 8px 20px;border:1px solid var(--hl);border-radius:16px;background:#fff}
.market-search:focus-within{border-color:var(--g1);box-shadow:0 0 0 3px var(--s1)}
.market-search>span{display:flex;color:var(--p-sub)}
.market-search svg{width:22px;height:22px}
.market-search input{min-width:0;flex:1;border:0;outline:none;font:inherit;font-size:17px;color:var(--ink);background:transparent;min-height:46px;width:100%}
.market-search .btn{min-height:48px;border-radius:10px;padding:12px 24px;font-size:16px;flex:none}
.market-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.market-kind{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;font:inherit;font-size:14px;background:#fff;border:1px solid var(--hl);color:var(--p-sub);border-radius:24px;cursor:pointer}
.market-kind[aria-pressed=true]{background:var(--g1);color:#fff;border-color:var(--g1);font-weight:700}
.market-results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.market-clear{border:0;background:none;font:inherit;font-size:14px;color:var(--g1);text-decoration:underline;text-underline-offset:4px;min-height:44px;cursor:pointer}
.market-status{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--p-sub)}
.market-status:empty{margin:0}
/* 띠(2026-11-06 마스터 「구현된 홈페이지가 우선적으로 노출이 안 된다」): 카드를 옆으로 넘김(붙는 자리 scroll-snap) — 390px 휴대폰 = 카드 약 1.4장 · 넓은 화면 = 한 줄(넘치면 옆으로) */
.market .market-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,250px);gap:14px;margin:24px -20px 0;padding:4px 20px 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:thin}
.market .market-grid:empty{margin:0;padding:0}
.market .use{display:flex;flex-direction:column;gap:12px;min-width:0;scroll-snap-align:start;text-decoration:none;color:var(--ink)}
/* 휴대폰 모양 틀 = 흰 상자 + 가는 선 · 모서리 20 · 안 = 그 홈페이지 첫 화면(390×844 를 틀 폭으로 줄임 --k, home.js shots) · 밑 = 표지 사진(열리기 전·못 열 때) */
.market-shot{position:relative;aspect-ratio:390/844;border:1px solid var(--hl);border-radius:var(--r);overflow:hidden;background:var(--tint);transition:border-color .15s}
.market .use:hover .market-shot{border-color:var(--g1)}
.market-card-image{position:absolute;inset:0;background:var(--tint);overflow:hidden}
.market-card-image .cv{display:block;width:100%;height:100%;object-fit:cover}
.market-live{position:absolute;top:0;left:0;width:390px;height:844px;border:0;background:#FFFFFF;transform:scale(var(--k,.64));transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .3s ease}
.market-live.on{opacity:1}
.market-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:var(--g1)}
.market-placeholder svg{width:48px;height:48px;stroke-width:1.2}
/* 틀 아래 글 = 짧은 세 줄(11-06 마스터 「세로로 쌓지 말 것」): 이름(+로고) · 업종·하는 일·지역 한 줄 · 표시 — 넘치면 말줄임 */
.market-card-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 2px}
.market-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.market-logo{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:none}
.market-name{flex:1;min-width:0;margin:0;font-size:var(--t5);line-height:1.35;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-open-arrow{flex:none;font-size:16px;font-weight:400;color:var(--p-sub)}
.market-meta{margin:0;font-size:13px;line-height:1.5;color:var(--p-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-category{font-weight:700;color:var(--g1)}
.market-badges{display:flex;gap:6px;overflow:hidden}
.market-badges span{flex:none;padding:3px 8px;border-radius:6px;background:var(--tint);font-size:12px;color:var(--p-sub)}
/* 견본 표시(11-05 「견본도 함께」) = 다른 표시보다 옅게 — 실제 업체로 보이지 않게 */
.market-badges .market-demo{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hl)}
/* 빈 목록 = 짧은 한 줄(큰 빈 상자 아님) */
.market-empty{margin:16px 0 0;font-size:var(--t5);line-height:1.6;color:var(--p-sub)}
.market-controls{display:flex;gap:12px;justify-content:center;margin-top:24px}
.market-controls:not(:has(button:not([hidden]))){display:none}
.market-controls .btn{min-height:48px;padding:12px 28px;font-size:15px}
.market-controls .btn[aria-disabled=true]{opacity:.6;cursor:wait}
.market a:focus-visible,.market button:focus-visible{outline:3px solid var(--g1);outline-offset:4px}
@media(min-width:720px){.market .market-grid{grid-auto-columns:220px;gap:20px}}
@media(min-width:1024px){.market .market-grid{grid-auto-columns:calc((100% - 72px) / 4.3);gap:24px;margin-inline:0;padding-inline:0;scroll-padding-inline:0}}  /* 넓은 화면 = 4장 + 다음 장 끝이 살짝(더 있으면 옆으로) */
@media(max-width:719px){.market-search{padding-left:12px;gap:8px}.market-search input{font-size:16px}.market-search .btn{padding-inline:16px}.market-kind{padding-inline:14px}.market-controls{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.market :is(.market-shot,.market-live){transition:none}}

/* 한 번에 다 됩니다(#value, 11-06 · 둘째 = 접속한 나라 값 · 매달/한 번 두 묶음): 줄 = 이름 + 따로 하면 값 · 어려운 말 줄 = 누르면 풀이 · 끝 = 따로 하면(매달 · 만들 때) → 헬로버(매달 · 만들 때 0원). 흰 칸·얇은 선 · 라일락은 단추만 */
/* 11-06 마스터 「시장 파괴 느낌 · 상스럽지 않게 · 가격 보여 주면서 · 자리는 알아서」 = 합 칸에서 「따로 하면」과 「헬로버」 사이 꺾는 한 줄(검정 굵게 · 얇은 선 띠 — 라일락은 단추만) */
.vs-sum .vs-kick{display:inline-flex;margin:14px 0 4px;padding:7px 16px;border:2px solid var(--ink);border-radius:999px;font-size:clamp(18px,4.6vw,22px);font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.vs-list{list-style:none;margin:22px 0 0;padding:4px 20px}
.vs-list li{border-bottom:1px solid var(--hl)}
.vs-list li:last-child{border-bottom:0}
.vs-list li.vs-g{display:block;padding:16px 0 6px;border-bottom:0;font-size:var(--t6);font-weight:800;color:var(--p-sub);letter-spacing:.02em}
.vs-list li.vs-g+li{border-top:1px solid var(--hl)}
.vs-list li:has(+li.vs-g){border-bottom:0}
.vs-list summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0}
.vs-list li:not(:has(details)):not(.vs-g){display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0}
.vs-list summary{cursor:pointer;list-style:none}
.vs-list summary::-webkit-details-marker{display:none}
.vs-n{font-weight:700;color:var(--ink);min-width:0}
.vs-q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;border:1px solid var(--hl);border-radius:50%;font-size:12px;font-style:normal;font-weight:800;color:var(--p-sub);vertical-align:2px}
details[open] .vs-q{border-color:var(--ink);color:var(--ink)}
.vs-p{flex:none;font-weight:800;color:var(--ink);white-space:nowrap}
.vs-inc{color:#11704A}.vs-inc::before{content:"✓ "}
.vs-x{margin:-6px 0 14px;font-size:var(--t6);line-height:1.6;color:var(--p-sub)}
.vs-sum{margin-top:14px;padding:20px 22px}
.vs-sum p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.vs-was{color:var(--p-sub);font-weight:700}
.vs-was b{color:var(--ink);font-size:var(--t4)}
.vs-sum .vs-now{margin-top:10px}
.vs-who{flex-basis:100%;font-size:var(--t6)}
.vs-was b{font-weight:800}
.vs-was b>span:first-child,.vs-now b>span:first-child{font-size:var(--t6);font-weight:700;color:var(--p-sub);margin-right:4px}
.vs-now .vs-who{font-weight:700;color:var(--ink)}
.vs-now b{font-size:clamp(36px,8vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.vs-now b.vs-o0 .u{font-size:.8em}
.vs-now b.vs-o0{font-size:var(--t4);color:#11704A}
.vs-fx{color:var(--p-sub);font-weight:700}
.vs-fx:empty{display:none}
.vs-free{margin:8px 0 0;font-weight:700;color:#11704A}
.vs-sum .cta{margin-top:16px}
@media (min-width:900px){#value{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:20px;align-items:start}#value>.eyebrow,#value>h2,#value>.sec-lead{grid-column:1/-1}#value .vs-sum{margin-top:22px;position:sticky;top:90px}}