/* ════════════════════════════════════════════════
   Seeder 상세 — 미니멀 · 모바일 퍼스트
   ★ 출렁임 금지: 애니는 opacity / transform 만. height·margin·width 변경 0.
   ★ 데모 박스는 고정 높이로 공간 선점 → 페이지 총높이 항상 일정.
   ════════════════════════════════════════════════ */

.sd { overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; }
.sd-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sd .lbl { font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--olive); }

/* 텍스트 1회 등장 (transform·opacity → 레이아웃 영향 없음) */
.up { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.up.show { opacity: 1; transform: none; }
.up.d1.show { transition-delay: .07s; }
.up.d2.show { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .up { opacity: 1; transform: none; transition: none; } }

/* 데모 애니: 보일 때만 재생 */
.demo .an { animation-play-state: paused; }
.demo.run .an { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .demo .an { animation: none !important; opacity: 1 !important; } }

/* ════════ HERO (담담한 에디토리얼) ════════ */
.s-hero { padding: clamp(58px, 10vw, 112px) 0 clamp(44px, 8vw, 76px); }
.s-hero .col { max-width: 640px; }
.s-hero .eyebrow { display: block; margin-bottom: clamp(20px, 4vw, 28px); color: var(--gray-2); }
.s-hero h1 { font-size: clamp(27px, 4.6vw, 44px); font-weight: 700; line-height: 1.34; letter-spacing: -.03em; margin: 0; color: var(--ink); text-wrap: balance; }
.s-hero h1 .u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--terra); }
.s-hero .body { margin-top: clamp(26px, 4vw, 38px); display: flex; flex-direction: column; gap: 20px; }
.s-hero .body p { margin: 0; color: var(--gray); font-size: clamp(15.5px, 2vw, 17.5px); line-height: 1.9; letter-spacing: -.01em; max-width: 56ch; text-wrap: pretty; }
.s-hero .body b { color: var(--ink); font-weight: 600; }
.s-hero .body em { font-style: italic; color: var(--ink); font-weight: 500; }
.s-hero .body .u { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: rgba(91,98,54,.6); }
.s-hero .body .lead-claim { color: var(--ink); font-weight: 700; }
.s-hero .body .seed { font-family: "Fraunces"; font-style: italic; font-weight: 500; color: var(--ink); }
.s-hero .cta-row { margin-top: clamp(30px, 4vw, 40px); display: flex; gap: 12px; flex-wrap: wrap; }
.s-hero .cta-row .btn-terra small { font-weight: 500; opacity: .85; margin-left: 7px; }

/* 히어로 앱 윈도우 */
.heroshot { margin: clamp(40px, 7vw, 74px) auto 0 0; max-width: 720px; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 50px 100px -56px rgba(11,11,12,.32); text-align: left; }
.heroshot .bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #FCFCFB; }
.heroshot .bar i { width: 10px; height: 10px; border-radius: 99px; background: #DDDCD8; }
.heroshot .bar .u { margin-left: 12px; font-size: 11.5px; color: var(--gray-2); font-family: ui-monospace, monospace; }
.heroshot .pad { padding: clamp(16px, 3vw, 24px); }
.heroshot .mets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.heroshot .met { background: #fff; padding: clamp(11px, 2vw, 15px) 12px; }
.heroshot .met .v { font-size: clamp(17px, 3.2vw, 23px); font-weight: 800; letter-spacing: -.03em; }
.heroshot .met .k { font-size: 11px; color: var(--gray); margin-top: 4px; }
.heroshot .kw { margin-top: 13px; display: flex; flex-direction: column; gap: 8px; }
.heroshot .kw .r { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--gray); }
.heroshot .kw .r .nm { width: 74px; color: var(--ink); font-weight: 600; flex: none; }
.heroshot .kw .r .b { flex: 1; height: 6px; background: #EFEEEA; border-radius: 99px; overflow: hidden; }
.heroshot .kw .r .b i { display: block; height: 100%; width: 100%; background: #2C2C2E; border-radius: 99px;
  transform: scaleX(0); transform-origin: left; animation: grow 1.4s var(--ease) both; animation-play-state: paused; }
.heroshot .kw .r:nth-child(1) .b i { animation-delay: .15s; }
.heroshot .kw .r:nth-child(2) .b i { animation-delay: .3s; }
.heroshot .kw .r:nth-child(3) .b i { animation-delay: .45s; }
.heroshot.run .kw .r .b i { animation-play-state: running; }
@keyframes grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .heroshot .kw .r .b i { animation: none; transform: scaleX(1); } }

/* ════════ WHY SEEDER (세로 블로그형) ════════ */
.s-why { padding: clamp(70px, 12vw, 148px) 0; border-top: 1px solid var(--line); }
.s-why .col { max-width: 720px; }
.s-why h2 { font-size: clamp(26px, 5vw, 44px); font-weight: 700; line-height: 1.32; letter-spacing: -.03em; margin: 0; color: var(--ink); text-wrap: balance; }
.s-why h2 .u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--terra); }
.s-why .body { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.s-why .body p { margin: 0; color: var(--gray); font-size: clamp(15.5px, 2vw, 17.5px); line-height: 1.9; letter-spacing: -.01em; max-width: 62ch; text-wrap: pretty; }
.s-why .body b { color: var(--ink); font-weight: 600; }
.s-why .body .wu { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(91,98,54,.6); }
.s-why .body .seed { font-family: "Fraunces"; font-style: italic; font-weight: 500; color: var(--ink); }

/* ════════ 한 화면 (제품 리빌) ════════ */
.s-shot { padding: clamp(52px, 9vw, 100px) 0; border-top: 1px solid var(--line); text-align: center; }
.s-shot .shot-lead { margin: 0 auto; max-width: 26ch; font-size: clamp(18px, 2.8vw, 24px); font-weight: 500;
  line-height: 1.55; letter-spacing: -.02em; color: var(--gray); }
.s-shot .shot-lead b { color: var(--ink); font-weight: 700; }
.s-shot .shot-cap { margin: 20px auto 0; font-size: 12.5px; color: var(--gray-2); letter-spacing: -.01em; }

/* 수렴 다이어그램 — 네 갈래가 Seeder 하나로 */
.merge { position: relative; width: 100%; max-width: 470px; margin: clamp(34px, 6vw, 56px) auto 0; aspect-ratio: 480 / 300; }
.merge .lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.merge .lines .ln { stroke: var(--line); stroke-width: 1.4; fill: none; }
.merge .lines .flow { stroke: var(--olive); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 4 14; opacity: .8;
  animation: flowIn 1.5s linear infinite; animation-play-state: paused; }
.merge.run .lines .flow { animation-play-state: running; }
.merge .lines .flow.f2 { animation-delay: .35s; }
.merge .lines .flow.f3 { animation-delay: .7s; }
.merge .lines .flow.f4 { animation-delay: 1.05s; }
@keyframes flowIn { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .merge .lines .flow { animation: none; opacity: .35; } }
.merge .node { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 13px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
  box-shadow: 0 12px 26px -18px rgba(11,11,12,.28); }
.merge .node b { font-size: clamp(11.5px, 2.4vw, 13.5px); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.merge .node small { font-size: clamp(9px, 1.8vw, 11px); color: var(--gray-2); }
.merge .node .led { width: 6px; height: 6px; border-radius: 99px; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: none; }
.merge .n1 { left: 16%; top: 17%; } .merge .n2 { left: 84%; top: 17%; }
.merge .n3 { left: 16%; top: 83%; } .merge .n4 { left: 84%; top: 83%; }
.merge .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: clamp(22px, 5vw, 30px);
  background: var(--ink); color: var(--paper); border-radius: 15px; padding: 11px 20px;
  box-shadow: 0 22px 44px -20px rgba(11,11,12,.55); }

/* ════════ PROBLEM (미사용) ════════ */
.s-prob { padding: clamp(70px, 13vw, 140px) 0; text-align: center; border-top: 1px solid var(--line); }
.s-prob .lbl { display: block; margin-bottom: 24px; color: var(--gray-2); }
.s-prob h2 { font-size: clamp(26px, 5.6vw, 44px); font-weight: 800; line-height: 1.22; letter-spacing: -.03em; margin: 0 auto; max-width: 19ch; }
.s-prob h2 .t { color: var(--terra); }
.s-prob p { margin: 22px auto 0; max-width: 30ch; color: var(--gray); font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6; }

/* ════════ 기능 섹션 ════════ */
.fsec { padding: clamp(60px, 12vw, 128px) 0; border-top: 1px solid var(--line); }
.fsec .in-grid { display: grid; gap: clamp(28px, 6vw, 56px); align-items: center; }
.ftext .en { font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); }
.ftext h2 { font-size: clamp(23px, 4vw, 33px); font-weight: 700; line-height: 1.34; letter-spacing: -.025em; margin: 14px 0 0; color: var(--ink); }
.ftext p { margin: 16px 0 0; color: var(--gray); font-size: clamp(16px, 2.3vw, 18px); line-height: 1.7; max-width: 34ch; }
/* 강조 — 합성 이탤릭 대신 얇은 밑줄로 담담하게 통일 (모든 섹션 헤드라인) */
.sd h2 .serif { font-family: inherit; font-style: normal; font-weight: inherit;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(91,98,54,.5); }

/* 데모 카드 — 고정 높이로 공간 선점 (출렁임 차단) */
.demo { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 3.4vw, 26px); box-shadow: 0 36px 70px -50px rgba(11,11,12,.24);
  height: 354px; display: flex; flex-direction: column; overflow: hidden; }
.demo .dh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 15px; flex: none; }
.demo .dh .cnt { margin-left: auto; position: relative; font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700; }
.demo .dh .cnt span { display: inline-block; }
.demo .dh .cnt .raw { color: var(--gray-2); }
.demo .dh .cnt .clean { position: absolute; right: 0; top: 0; color: var(--olive); opacity: 0; animation: cntSwap 4.6s var(--ease) infinite; }
@keyframes cntSwap { 0%,38%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0} }

/* ── 데모1: 발굴(필터) ── */
.demo-list .pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; flex: none; }
.demo-list .pill { font-size: 11px; color: var(--gray); background: var(--paper-2); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; }
.demo-list .pill b { color: var(--ink); font-weight: 600; }
.demo-list .rows { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.demo-list .row { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 11px; font-size: 14px; flex: none; }
.demo-list .row .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--olive); flex: none; }
.demo-list .row .nm { font-weight: 600; }
.demo-list .row .meta { color: var(--gray-2); font-size: 12px; }
.demo-list .row .badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.demo-list .row .badge.keep { background: var(--olive-soft); color: var(--olive); }
/* 제외 처리: 위치/크기 변화 없이 opacity·transform 만 */
.demo-list .row.bad .dot { background: #C9C8C3; }
.demo-list .row.bad .strike { position: absolute; left: 13px; right: 64px; top: 50%; height: 1.5px; background: var(--gray-2);
  transform: scaleX(0); transform-origin: left; animation: strikeIn 4.6s var(--ease) infinite; }
.demo-list .row.bad .badge.excl { position: absolute; right: 13px; background: #F1EFEA; color: var(--gray-2); opacity: 0;
  animation: exclIn 4.6s var(--ease) infinite; }
.demo-list .row.bad .dim { position: absolute; inset: 0; background: rgba(250,250,248,.55); border-radius: 11px; opacity: 0;
  animation: dimIn 4.6s var(--ease) infinite; pointer-events: none; }
@keyframes strikeIn { 0%,34%{transform:scaleX(0)} 46%,92%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
@keyframes exclIn { 0%,34%{opacity:0;transform:translateX(6px)} 46%,92%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes dimIn { 0%,34%{opacity:0} 46%,92%{opacity:1} 100%{opacity:0} }

/* ── 데모2: 제안(템플릿 메일 발송) ── */
.demo-mail .mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex: none; flex-wrap: wrap; }
.demo-mail .chip { font-size: 12px; font-weight: 600; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; }
.demo-mail .gmail { font-size: 11px; font-weight: 600; color: var(--olive); background: var(--olive-soft); border-radius: 99px; padding: 5px 11px; }
.demo-mail .mprev { border: 1px solid var(--line); border-radius: 12px; padding: 14px; flex: 1; overflow: hidden; background: #FCFCFB; }
.demo-mail .mprev .subj { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.4; }
.demo-mail .mprev .ln { font-size: 12.5px; color: var(--gray); line-height: 1.7; }
.demo-mail .mprev .tok { color: var(--olive); font-weight: 700; background: var(--olive-soft); padding: 0 5px; border-radius: 4px; }
.demo-mail .send { display: flex; gap: 7px; margin-top: 12px; flex: none; }
.demo-mail .rcpt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 4px; color: var(--gray); position: relative; overflow: hidden; }
.demo-mail .rcpt .done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--olive-soft); color: var(--olive); opacity: 0; animation: sentIn 4.6s var(--ease) infinite; }
.demo-mail .rcpt:nth-child(1) .done { animation-delay: .15s; }
.demo-mail .rcpt:nth-child(2) .done { animation-delay: .55s; }
.demo-mail .rcpt:nth-child(3) .done { animation-delay: .95s; }
@keyframes sentIn { 0%,20%{opacity:0} 34%,92%{opacity:1} 100%{opacity:0} }

/* ── 데모3: 회신(채팅 스레드) ── */
.demo-chat .thead { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex: none; }
.demo-chat .thead .who { font-size: 13.5px; font-weight: 700; }
.demo-chat .thead .stat { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--olive); background: var(--olive-soft); border-radius: 99px; padding: 3px 10px; }
.demo-chat .thread { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; }
.demo-chat .b { max-width: 80%; padding: 9px 13px; border-radius: 15px; font-size: 13px; line-height: 1.45; opacity: 1; }
.demo-chat .b.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.demo-chat .b.you { align-self: flex-start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 5px; }
.demo-chat .b.an.c1 { animation: chat1 5.4s var(--ease) infinite; }
.demo-chat .b.an.c2 { animation: chat2 5.4s var(--ease) infinite; }
.demo-chat .b.an.c3 { animation: chat3 5.4s var(--ease) infinite; }
@keyframes chat1 { 0%,4%{opacity:0;transform:translateY(9px)} 13%,95%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes chat2 { 0%,27%{opacity:0;transform:translateY(9px)} 37%,95%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes chat3 { 0%,53%{opacity:0;transform:translateY(9px)} 63%,95%{opacity:1;transform:none} 100%{opacity:0} }
.demo-chat .reply { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; flex: none; }
.demo-chat .reply .ph { flex: 1; font-size: 12.5px; color: var(--gray-2); }
.demo-chat .reply .send { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--olive); border-radius: 8px; padding: 6px 11px; }

/* ── 데모4: 일정(캘린더) ── */
.demo-cal .grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.demo-cal .cell { border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: 11px; color: var(--gray-2);
  position: relative; display: flex; align-items: flex-start; }
.demo-cal .cell.t { border-color: var(--olive); }
.demo-cal .cell .ev { position: absolute; left: 4px; right: 4px; bottom: 4px; background: var(--olive); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 5px; padding: 3px; text-align: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: dropIn 4.8s var(--ease) infinite; }
.demo-cal .cell.t2 .ev { animation-delay: .5s; background: #6E7444; }
@keyframes dropIn { 0%,24%{opacity:0;transform:translateY(-10px) scale(.85)} 40%,90%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-10px) scale(.85)} }

/* ════════ VALUE ════════ */
.s-value { padding: clamp(60px, 11vw, 128px) 0; border-top: 1px solid var(--line); }
.s-value .vh { text-align: center; margin-bottom: clamp(36px, 6vw, 56px); }
.s-value .vh h2 { font-size: clamp(23px, 4.2vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.34; margin: 12px 0 0; color: var(--ink); }
.vgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 4vw, 30px); }
.vcard .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--olive-soft); display: grid; place-items: center; margin-bottom: 18px; }
.vcard .ic svg { width: 19px; height: 19px; stroke: var(--olive); fill: none; stroke-width: 1.8; }
.vcard h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.vcard p { margin: 10px 0 0; color: var(--gray); font-size: 15px; line-height: 1.7; }
@media (min-width: 880px) { .vgrid { grid-template-columns: repeat(3, 1fr); } }

/* ════════ BESPOKE ════════ */
.s-bespoke { padding: clamp(56px, 11vw, 116px) 0; border-top: 1px solid var(--line); }
.bcard { background: var(--olive-soft); border: 1px solid #DEE2CE; border-radius: var(--r-lg);
  padding: clamp(34px, 6vw, 60px); text-align: center; }
.bcard .lbl { display: block; margin-bottom: 18px; }
.bcard h2 { font-size: clamp(22px, 4vw, 31px); font-weight: 700; letter-spacing: -.025em; line-height: 1.34; margin: 0 auto; max-width: 22ch; color: var(--ink); }
.bcard p { margin: 16px auto 0; max-width: 34ch; color: #4B5233; font-size: clamp(15px, 2.2vw, 17px); line-height: 1.65; }
.bcard .btn { margin-top: 28px; background: var(--olive); color: #fff; border-color: var(--olive); }
.bcard .btn:hover { background: #4B5233; transform: translateY(-2px); }

/* ════════ PRICING ════════ */
.s-price { padding: clamp(56px, 11vw, 116px) 0 clamp(76px, 12vw, 132px); border-top: 1px solid var(--line); }
.s-price .lbl { display: block; text-align: center; margin-bottom: 16px; }
.promo-badge { display: block; text-align: center; margin: 0 auto clamp(26px, 5vw, 36px); }
.promo-badge span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: #B4470E; background: var(--terra-soft); border: 1px solid #E8C9B8; border-radius: 99px; padding: 7px 15px; }
.promo-badge .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--terra); flex: none; }
.pricecard { max-width: 520px; margin: 0 auto; background: var(--ink); color: var(--d-fg); border-radius: var(--r-lg); padding: clamp(32px, 6vw, 50px); text-align: center; }
.pricecard .pname { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: clamp(42px, 9vw, 52px); line-height: 1; }
.pricecard .ed { font-family: var(--display); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--d-dim); margin-top: 12px; }
.pricecard .tag { margin-top: 16px; font-size: 15px; color: var(--d-fg); }
.pricecard .price { margin: 22px 0 4px; }
.pricecard .price .now { font-size: clamp(34px, 8vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.pricecard .price .list { color: var(--d-dim); text-decoration: line-through; margin-left: 10px; font-size: 17px; }
.pricecard .once { font-size: 13px; color: var(--d-dim); }
.pricecard .incl { margin: 24px 0; padding: 22px 0 2px; border-top: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 12px; text-align: left; list-style: none; }
.pricecard .incl li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--d-fg); line-height: 1.5; }
.pricecard .incl svg { width: 17px; height: 17px; flex: none; stroke: #E2784A; fill: none; stroke-width: 2; margin-top: 1px; }
.pricecard .incl .sm { color: var(--d-dim); font-size: 12.5px; }
.pricecard .btn-terra { box-shadow: none; width: 100%; justify-content: center; }
.pricecard .note { font-size: 12px; color: var(--d-dim); margin-top: 14px; }

/* ════════ 데스크톱: 기능 2열 교차 ════════ */
@media (min-width: 880px) {
  .fsec .in-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 92px); }
  .fsec.rev .ftext { order: 2; }
  .ftext p { font-size: 18px; }
  /* 센터 스택 변주 — 텍스트 중앙 위, 데모 중앙 아래 (좌우 반복 단조로움 완화) */
  .fsec.center .in-grid { grid-template-columns: 1fr; gap: clamp(34px, 4vw, 54px); justify-items: center; }
  .fsec.center .ftext { text-align: center; max-width: 640px; }
  .fsec.center .ftext p { max-width: 44ch; margin-left: auto; margin-right: auto; }
  .fsec.center .demo { max-width: 540px; width: 100%; margin: 0 auto; }
}

/* ════════════════════════════════════════════════
   전환 보강 섹션 (후기 · 비교 · 시작 · FAQ · 보증 · 스티키바)
   ════════════════════════════════════════════════ */

/* 공통 센터 헤드 */
.conv-head { text-align: center; margin-bottom: clamp(32px, 5vw, 50px); }
.conv-head h2 { font-size: clamp(23px, 4.2vw, 33px); font-weight: 700; line-height: 1.34; letter-spacing: -.025em; margin: 12px 0 0; color: var(--ink); }
.conv-head p { margin: 14px auto 0; max-width: 42ch; color: var(--gray); font-size: 16px; line-height: 1.6; }

/* ── 후기 ── */
.s-reviews { padding: clamp(60px, 11vw, 128px) 0; border-top: 1px solid var(--line); }
.rv-agg { margin-top: 16px; font-size: 14px; color: var(--gray); }
.rv-agg b { color: var(--ink); font-weight: 700; }
.rv-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rv { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.rv-score { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .02em; }
.rv-score span { color: var(--gray-2); font-weight: 500; font-size: 12px; margin-left: 3px; }
.rv blockquote { margin: 14px 0 0; flex: 1; font-size: 15.5px; line-height: 1.72; color: var(--ink); letter-spacing: -.01em; }
.rv figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 11px; }
.rv figcaption .who { font-size: 13px; color: var(--gray); }
.rv figcaption .who b { color: var(--ink); font-weight: 700; }
.rv .res { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--olive); background: var(--olive-soft); border-radius: 9px; padding: 7px 12px; letter-spacing: -.01em; }
@media (min-width: 820px) { .rv-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── 비교 ── */
.s-compare { padding: clamp(60px, 11vw, 128px) 0; border-top: 1px solid var(--line); }
.cmp { max-width: 680px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: minmax(80px, .9fr) 1fr 1fr; align-items: stretch; border-top: 1px solid var(--line); }
.cmp-row:first-child { border-top: none; }
.cmp-row > span { padding: 14px 14px; font-size: clamp(12.5px, 2.1vw, 14.5px); line-height: 1.4; display: flex; align-items: center; }
.cmp-row .k { color: var(--gray); font-weight: 600; }
.cmp-row .a { color: var(--gray-2); }
.cmp-row .s { background: var(--olive-soft); color: var(--ink); font-weight: 600; }
.cmp-th > span { padding-top: 12px; padding-bottom: 12px; }
.cmp-th .k, .cmp-th .a, .cmp-th .s { font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cmp-th .k { color: var(--gray-2); }
.cmp-th .a { color: var(--gray-2); }
.cmp-th .s { color: var(--olive); }
.cmp-note { text-align: center; margin: 20px auto 0; font-size: 13px; color: var(--gray-2); }

/* ── 시작 3단계 ── */
.s-steps { padding: clamp(60px, 11vw, 128px) 0; border-top: 1px solid var(--line); }
.st-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.st { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px; }
.st .n { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 5.5vw, 46px); line-height: 1; letter-spacing: -.02em; color: var(--gray-2); margin-bottom: 16px; }
.st h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.st p { margin: 8px 0 0; color: var(--gray); font-size: 14.5px; line-height: 1.65; }
@media (min-width: 760px) { .st-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── FAQ ── */
.s-faq { padding: clamp(60px, 11vw, 120px) 0; border-top: 1px solid var(--line); }
.sd-faq { max-width: 720px; }
/* 펼쳐진 문답 — 아코디언 없이 전체 노출 */
.faq .qa { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq .qa:first-child { border-top: 1px solid var(--line); }
.faq .qa h3 { margin: 0; font-size: clamp(15.5px, 2.4vw, 17px); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.faq .qa p { margin: 11px 0 0; color: var(--gray); font-size: 15px; line-height: 1.78; max-width: 64ch; }

/* ── 보증 (가격 카드 안) ── */
.pricecard .guarantee { display: flex; gap: 9px; align-items: flex-start; text-align: left; background: rgba(255,255,255,.05);
  border: 1px solid var(--d-line); border-radius: 12px; padding: 13px 15px; margin: 0 0 18px; font-size: 13px; color: var(--d-fg); line-height: 1.5; }
.pricecard .guarantee svg { width: 17px; height: 17px; flex: none; stroke: #E2784A; fill: none; stroke-width: 2; margin-top: 1px; }

/* ── 스티키 구매바 (모바일) ── */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line); transition: transform .3s var(--ease); }
.buybar.hide { transform: translateY(120%); }
.bb-in { max-width: 1080px; margin: 0 auto; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; }
.bb-info { line-height: 1.15; }
.bb-name { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: 19px; }
.bb-name .bb-ed { font-family: var(--display); font-style: normal; font-size: 10px; font-weight: 600; color: var(--gray-2); letter-spacing: .04em; margin-left: 6px; text-transform: uppercase; }
.bb-price { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.bb-price s { color: var(--gray-2); font-weight: 400; margin-right: 5px; }
.buybar .btn { margin-left: auto; padding: 11px 20px; }
@media (max-width: 760px) { .buybar { display: block; } main.sd { padding-bottom: 66px; } }

/* ════════ THE METRICS (성과 지표 · 상승 화살표) ════════ */
.s-metrics { padding: clamp(60px, 11vw, 128px) 0; border-top: 1px solid var(--line); }
.m-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(10px, 2vw, 18px); }
.metric { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 30px 28px; }
.m-head { display: flex; align-items: baseline; gap: 10px; }
.m-no { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--olive); letter-spacing: .01em; }
.m-k { font-size: 14px; font-weight: 600; color: var(--gray); letter-spacing: -.01em; }
.m-val { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; }
.m-num { font-size: clamp(38px, 7vw, 52px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.m-num .u2 { font-size: .5em; font-weight: 700; margin-left: 2px; color: var(--gray); }
.m-arrow { width: 26px; height: 26px; stroke: var(--olive); fill: none; stroke-width: 2.4; flex: none; }
.m-desc { margin: 16px 0 0; color: var(--gray); font-size: 14.5px; line-height: 1.7; max-width: 46ch; }
.m-cap { text-align: center; margin: clamp(22px, 3vw, 30px) auto 0; font-size: 12.5px; color: var(--gray-2); }
@media (min-width: 820px) { .m-grid { grid-template-columns: repeat(3, 1fr); } .m-desc { max-width: none; } }

/* 상승/하강 화살표 모션 — 보일 때만 재생 */
.s-metrics .m-arrow { animation: riseUp 1.9s var(--ease) infinite; animation-play-state: paused; }
.s-metrics.run .m-arrow { animation-play-state: running; }
.s-metrics .m-arrow.down { animation-name: riseDown; }
@keyframes riseUp { 0% { transform: translateY(6px); opacity: 0; } 35%, 68% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes riseDown { 0% { transform: translateY(-6px); opacity: 0; } 35%, 68% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s-metrics .m-arrow { animation: none; opacity: 1; } }