/* tapas-eye 홈페이지 — tapas-bot(dashboard/app/globals.css)과 같은 톤(인디고 계열),
   포인트 컬러만 violet으로 구분해서 "같은 회사, 다른 제품" 느낌을 준다. */
:root {
  --color-primary: #7c3aed;
  --color-primary-dark: #6d28d9;
  --color-bg: #f8f9fc;
  --color-surface: #ffffff;
  --color-border: #e2e4ea;
  --color-text: #1a1d29;
  --color-text-muted: #6b7280;
  --color-danger: #dc2626;
  --color-good: #16a34a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
    "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

p {
  color: var(--color-text-muted);
  margin: 6px 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

/* Nav */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background: rgba(248, 249, 252, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.landing-logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.landing-nav-links a {
  color: var(--color-text-muted);
  font-size: 14.5px;
  font-weight: 600;
}

.landing-nav-links a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.landing-nav-actions {
  display: flex;
  gap: 10px;
}

/* 햄버거 토글 — 데스크톱에선 숨김, 900px 이하에서만 보인다(아래 미디어
   쿼리). 누르면 .landing-nav-links가 nav 바로 아래 드롭다운으로 펼쳐진다 —
   전에는 nav-links를 그냥 display:none으로 숨기기만 해서, 모바일에서
   기능/사용법/매뉴얼/가격/FAQ로 갈 방법이 아예 없었다. */
.landing-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.landing-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

/* Hero */
.hero {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 90px 40px 70px;
}

.hero-content {
  flex: 1.1;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(124, 58, 237, 0.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-title {
  font-size: 42px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.hero-title strong {
  color: var(--color-primary);
}

.hero-subtitle {
  font-size: 17px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.hero-actions .btn {
  padding: 15px 26px;
}

.compare-note {
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Fake terminal window — 실제 스크린샷 대신 제품의 TUI 느낌을 전달하는 목업 */
.term-window {
  width: 100%;
  max-width: 380px;
  border-radius: 12px;
  overflow: hidden;
  background: #14151f;
  box-shadow: 0 20px 50px rgba(20, 21, 31, 0.35);
  border: 1px solid #24263a;
}

.term-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1c1e2c;
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }

.term-titlebar span {
  margin-left: 8px;
  font-size: 12px;
  color: #7a7d94;
  font-family: monospace;
}

.term-body {
  padding: 16px 18px 20px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  color: #d7d8e4;
}

.term-menubar {
  display: flex;
  gap: 14px;
  color: #8b8fb0;
  padding-bottom: 10px;
  border-bottom: 1px solid #262840;
  margin-bottom: 12px;
}

.term-menubar span.active {
  color: #c4b5fd;
  font-weight: 700;
}

.term-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.term-label { color: #8b8fb0; }
.term-good { color: #4ade80; }
.term-warn { color: #fbbf24; }

.term-bar-track {
  flex: 1;
  height: 8px;
  background: #262840;
  border-radius: 4px;
  margin: 0 10px;
  overflow: hidden;
  align-self: center;
}

.term-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #a78bfa);
  border-radius: 4px;
}

.term-table {
  margin-top: 12px;
  border-top: 1px solid #262840;
  padding-top: 10px;
}

.term-table-head {
  display: flex;
  color: #5f6389;
  font-size: 11px;
  padding-bottom: 6px;
}

.term-table-row {
  display: flex;
  padding: 3px 0;
}

.term-col-name { flex: 2; }
.term-col-num { flex: 1; text-align: right; }

/* config.lua → Lua → C 처럼 단계를 말이 아니라 칩+화살표로 보여줄 때 */
.flow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
}

.flow-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.flow-arrow {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* 문장 대신 짧은 태그로 붙이는 주의사항/보조정보 */
.qs-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 5px 10px;
  border-radius: 8px;
  margin: 0 8px 0 0;
}

/* Sections */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 70px 40px;
}

.section-eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-align: center;
}

.section-heading {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-align: center;
}

.section-subheading {
  font-size: 16px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 포지셔닝 비교 */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.compare-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 20px;
}

.compare-card.highlight {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.compare-card h4 {
  font-size: 15px;
  margin: 0 0 8px;
}

.compare-card.highlight h4 {
  color: var(--color-primary);
}

.compare-card p {
  font-size: 13.5px;
  line-height: 1.6;
}

/* 빠른 시작 — 순서가 있는 how-to라 벤토 대신 세로 스테퍼로 배치 */
.quickstart-steps {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
}

.qs-step {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}

.qs-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.qs-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-body {
  flex: 1;
  min-width: 0;
}

.qs-body h4 {
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 8px;
}

.qs-body > p {
  font-size: 14.5px;
  margin: 0 0 12px;
}

.qs-body > p:last-child {
  margin-bottom: 0;
}

.qs-code {
  background: #14151f;
  color: #d7d8e4;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  margin: 0 0 12px;
}

.qs-code:last-child {
  margin-bottom: 0;
}

/* 기능 카드 안에 넣는 축소판 — 빠른 시작 섹션의 qs-code와 같은 스타일, 카드 폭에 맞춘 크기만 다름 */
.bento-card .qs-code {
  font-size: 11.5px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

/* Feature bento grid */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.badge-core {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.badge-optional {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-text-muted);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 20px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 26px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bento-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.1);
}

.bento-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 2;
}

.bento-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 16px;
}

.bento-lg .bento-icon {
  width: 52px;
  height: 52px;
  font-size: 26px;
}

.bento-icon-1 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.bento-icon-2 { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.bento-icon-3 { background: linear-gradient(135deg, #06b6d4, #6366f1); }
.bento-icon-4 { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.bento-icon-5 { background: linear-gradient(135deg, #16a34a, #06b6d4); }
.bento-icon-6 { background: linear-gradient(135deg, #64748b, #334155); }
.bento-icon-7 { background: linear-gradient(135deg, #ef4444, #7c3aed); }
.bento-icon-8 { background: linear-gradient(135deg, #0ea5e9, #22c55e); }

.bento-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 8px;
}

.bento-lg h3 {
  font-size: 21px;
}

.bento-card > p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

.bento-lg > p {
  font-size: 15px;
}

.bento-card details {
  margin-top: 14px;
}

.bento-card summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  list-style: none;
}

.bento-card summary::-webkit-details-marker {
  display: none;
}

.bento-card summary::after {
  content: " ▾";
}

.bento-card details[open] summary::after {
  content: " ▴";
}

.bento-card details p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 10px 0 12px;
}

.bento-card details ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.bento-card details li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 7px;
}

/* 기능 카드용 미니 목업 — 불릿 텍스트 대신 실제 화면 느낌을 축소해서 보여준다
   (히어로 term-window와 같은 "실제 스크린샷 대신 목업" 원칙, 카드 안에 맞는 크기로). */
.fmock {
  background: #14151f;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 4px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 11.5px;
  color: #d7d8e4;
}

.fmock-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2.5px 0;
}

.fmock-bar-label {
  width: 30px;
  flex-shrink: 0;
  color: #8b8fb0;
}

.fmock-bar-track {
  flex: 1;
  height: 6px;
  background: #262840;
  border-radius: 3px;
  overflow: hidden;
}

.fmock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #a78bfa);
  border-radius: 3px;
}

.fmock-bar-val {
  width: 32px;
  flex-shrink: 0;
  text-align: right;
}

.fmock-divider {
  border-top: 1px solid #262840;
  margin: 7px 0;
}

.fmock-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  color: #8b8fb0;
}

.fmock-row span:first-child {
  color: #d7d8e4;
}

.fmock-good { color: #4ade80 !important; }
.fmock-warn { color: #fbbf24 !important; }

.fmock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid #262840;
  color: #5f6389;
  font-size: 10.5px;
}

.fmock-chrome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34364c;
}

/* 히어로 터미널의 "살아있는" 느낌 — 상단 LIVE 배지 점 깜빡임 */
.term-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.04em;
}

.term-live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: term-pulse 1.8s infinite;
}

@keyframes term-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* 사용법 체험 (예시 갤러리) */
.demo-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.demo-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.demo-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.demo-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.demo-tab.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.demo-tab.disabled:hover {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.demo-panel {
  display: none;
}

.demo-panel.active {
  display: grid;
}

.demo-grid {
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: stretch;
}

.demo-source {
  background: #14151f;
  border-radius: 14px;
  padding: 20px 22px;
  overflow: auto;
  max-height: 460px;
}

.demo-source-label {
  font-size: 12px;
  font-weight: 700;
  color: #8b8fb0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.demo-source pre {
  margin: 0;
  color: #d7d8e4;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
}

.demo-live {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

.demo-live-bar {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-live iframe {
  flex: 1;
  width: 100%;
  border: none;
}

.demo-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  padding: 40px;
}

.demo-soon p {
  max-width: 360px;
}

/* Lua 코드 모음 — 정적 코드 쇼케이스 */
.snippet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.snippet-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.snippet-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.snippet-card-header h4 {
  font-size: 15px;
  margin: 0 0 4px;
}

.snippet-card-header p {
  font-size: 13.5px;
  margin: 0;
}

/* 홈페이지 미리보기 카드(index.html)는 copy-btn이 없어서 title/desc를
   나란히 두 칸으로 쪼개는 space-between 대신 위아래로 쌓는다. */
.snippet-card-header-stack {
  flex-direction: column;
  align-items: stretch;
}

.snippet-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.snippet-step {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
}

.snippet-step-1 { background: var(--color-primary); }
.snippet-step-2 { background: #0891b2; }
.snippet-step-3 { background: #dc2626; }

.snippet-part {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.copy-btn {
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.copy-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.copy-btn.copied {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.snippet-card pre {
  margin: 0;
  padding: 18px 20px;
  background: #14151f;
  color: #d7d8e4;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
  overflow: auto;
  max-height: 320px;
  flex: 1;
}

/* 전체 lua 파일처럼 긴 코드를 나란히 좁은 칸에 욱여넣지 않고 한 열로 쌓아서
   보여주는 변형 — DB 조회처럼 3~4개 파일을 통째로 실을 때 씀. 글자도 더
   크게, 스크롤 없이 더 많은 줄이 한눈에 들어오게 높이도 넉넉히 준다. */
.snippet-grid-stack {
  grid-template-columns: 1fr;
}

.snippet-card pre.pre-lg {
  padding: 22px 26px;
  font-size: 14px;
  line-height: 1.75;
  max-height: 560px;
}

.snippet-card pre::-webkit-scrollbar,
.demo-source pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.snippet-card pre::-webkit-scrollbar-thumb,
.demo-source pre::-webkit-scrollbar-thumb {
  background: #34364c;
  border-radius: 4px;
}

.snippet-card pre::-webkit-scrollbar-track,
.demo-source pre::-webkit-scrollbar-track {
  background: transparent;
}

/* 가격 */
.pricing-model {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.pricing-model h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pricing-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 26px;
}

.pricing-point {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--color-primary);
}

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

/* 구매 대수와 대수별 단가를 하나의 카드로 묶는다 — 예전엔 참고용 표(ref-table)와
   계산기가 서로 다른 상자로 따로 떨어져 있었는데, 사실 "몇 대를 살지 정하는"
   같은 결정 하나라서 표와 계산기를 분리할 이유가 없다. 표의 구간을 누르면 그
   대수가 바로 계산기에 반영되고(js), 지금 입력된 대수의 구간은 .active로
   강조된다. */
.pricing-card {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.pricing-card-badge {
  display: inline-block;
  margin-bottom: 16px;
}

.pricing-card-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.qty-field .form-label {
  display: block;
  margin-bottom: 8px;
}

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty-step {
  width: 38px;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.qty-step:hover {
  background: var(--color-border);
}

.qty-stepper input {
  width: 60px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pricing-tiers li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pricing-tiers li:hover {
  border-color: var(--color-primary);
}

.pricing-tiers li.active {
  border-color: var(--color-primary);
  background: rgba(124, 58, 237, 0.06);
}

.pricing-tiers .tier-qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 대수가 늘수록 정가(tier-orig) 자체가 낮아지는 대량 구매 할인율 — 카드 상단의
   "초기 고객 한정 25%"와는 별개(그 25%는 모든 구간에 균일하게 추가로 적용됨).
   숫자끼리 헷갈리지 않도록 뱃지가 아니라 대수 옆의 작은 텍스트로만 표시한다. */
.pricing-tiers .tier-vol {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-good);
}

.pricing-tiers .tier-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.pricing-tiers .tier-orig {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.pricing-tiers .tier-unit {
  font-size: 14.5px;
  font-weight: 700;
}

.pricing-tiers li.active .tier-unit {
  color: var(--color-primary);
}

.pricing-card-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.purchase-price {
  text-align: right;
}

.purchase-price .unit-price {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
}

.total-price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.total-price-orig {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.purchase-price .total-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

.payment-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.bank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 14px;
}

.bank-info .bank-account {
  font-weight: 600;
}

.bank-info .bank-holder {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}

.payment-form > input.form-input {
  margin-top: 0;
}

.payment-form .btn {
  margin-top: 4px;
}

/* FAQ */
.faq-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}

.faq-question {
  width: 100%;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  gap: 12px;
}

.faq-question:hover {
  background: var(--color-bg);
}

.faq-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s;
  flex-shrink: 0;
  color: var(--color-primary);
}

.faq-icon-open {
  transform: rotate(45deg);
}

.faq-answer {
  margin: 0;
  padding: 0 20px 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), #6d28d9 60%, #4338ca);
  border-radius: 28px;
  padding: 64px 40px;
  text-align: center;
  color: #fff;
  margin: 0 auto 80px;
  max-width: 1080px;
}

.cta-band h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #fff;
}

.cta-band p {
  font-size: 15.5px;
  opacity: 0.9;
  margin: 0 0 26px;
  color: #fff;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--color-primary);
}

.cta-band .btn-primary:hover {
  background: #f1f1f8;
}

/* Footer */
.landing-footer {
  text-align: center;
  padding: 32px 40px 48px;
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  .demo-source {
    max-height: 240px;
  }
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-lg {
    grid-row: span 1;
  }
}

@media (max-width: 760px) {
  .landing-nav {
    padding: 14px 20px;
  }
  /* 로고 + 문의하기 + 다운로드 + 햄버거 네 개가 한 줄에 다 안 들어가서,
     #pricing으로 가는 두 버튼 중 덜 중요한 "문의하기"는 좁은 화면에서
     숨긴다 — "다운로드"(주요 CTA)와 햄버거는 항상 남겨서 한 줄을 유지. */
  .landing-nav-actions .btn:not(.btn-primary) {
    display: none;
  }
  .hero {
    flex-direction: column;
    padding: 56px 20px 40px;
    text-align: center;
  }
  .hero-subtitle {
    margin: 0 auto 28px;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero .flow-row {
    justify-content: center;
  }
  .section {
    padding: 48px 20px;
  }
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-lg,
  .bento-wide {
    grid-column: span 1;
    grid-row: span 1;
  }
  .cta-band {
    padding: 48px 24px;
    border-radius: 0;
  }
}

/* ---- 매뉴얼 전용 컴포넌트 (manual.html) ---- */

.badge-lua {
  background: rgba(124, 58, 237, 0.1);
  color: var(--color-primary);
}

.badge-db {
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
}

/* 페이지 상단 목차 — manual.html이 길어서 섹션으로 바로 점프하는 용도 */
.manual-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 56px;
}

.manual-toc a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.manual-toc a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* 6개 기본 view= 한 줄 항목 — 카드 여러 개보다 표 하나가 더 빨리 훑어진다 */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14.5px;
}

.ref-table th,
.ref-table td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: #374151;
}

.ref-table th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ref-table tr:last-child td {
  border-bottom: none;
}

.ref-table code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 5px;
}

/* manual-2 스텝 카드 — snippet-card 그대로 쓰되 번호 배지만 얹는다 */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  margin-right: 8px;
  flex-shrink: 0;
}

.snippet-card-header h4 {
  display: flex;
  align-items: center;
}

/* 강조 콜아웃 — "왜 C인가" 같은 짧은 설명 박스 */
.callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 14.5px;
  color: #454a58;
  line-height: 1.75;
  margin: 24px 0 0;
}

.callout strong {
  color: var(--color-text);
}

.manual-part-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}

.manual-part-num {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  padding: 4px 12px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .ref-table {
    font-size: 13px;
  }
  .ref-table th,
  .ref-table td {
    padding: 10px 12px;
  }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- 매뉴얼 문서형 레이아웃 — 왼쪽 목차 + 오른쪽 본문 (manual.html) ---- */

.docs-intro {
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 40px 0;
}

.docs-intro h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.docs-intro p.docs-lead {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 0 32px;
}

.docs-shell {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 40px 100px;
}

.docs-sidebar {
  width: 236px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.docs-sidebar-group + .docs-sidebar-group {
  margin-top: 26px;
}

.docs-sidebar-group-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0 12px;
  margin: 0 0 8px;
}

.docs-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-sidebar a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
}

.docs-sidebar a:hover {
  color: var(--color-text);
  background: var(--color-bg);
  text-decoration: none;
}

.docs-sidebar a.active {
  color: var(--color-primary);
  background: rgba(124, 58, 237, 0.08);
  border-left-color: var(--color-primary);
}

.docs-sidebar-sub {
  margin-left: 12px;
}

.docs-sidebar-sub a {
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
}

.docs-content {
  flex: 1;
  min-width: 0;
  max-width: 1120px;
}

.docs-content section {
  padding: 52px 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 84px;
}

.docs-content section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.docs-kicker {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.docs-content h2 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  line-height: 1.3;
  text-align: left;
}

.docs-content h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  text-align: left;
  color: var(--color-text);
}

.docs-content p.docs-lead {
  text-align: left;
  margin: 0 0 24px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.8;
  color: #454a58;
}

.docs-content p.docs-lead code,
.docs-content .param-table code,
.docs-content .ref-table code {
  color: var(--color-primary-dark);
}

.docs-content .compare-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 8px;
}

/* 파라미터 표 — config.lua/Lua API 필드별 타입·필수여부·설명을 한눈에 정리.
   설명 문단만으로는 "무슨 필드가 있는지"가 눈에 안 들어온다는 피드백에 따라,
   본문 산문과 별개로 스캔하기 쉬운 표로 분리했다. */
.param-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 13.5px;
  margin: 18px 0 0;
}

.param-table th,
.param-table td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.param-table th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.param-table tr:last-child td {
  border-bottom: none;
}

.param-table td.desc-cell {
  color: #4b5563;
  line-height: 1.65;
}

.param-name {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--color-primary-dark);
  background: rgba(124, 58, 237, 0.08);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.param-type {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.param-type-string { background: rgba(6, 182, 212, 0.12); color: #0e7490; }
.param-type-number { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.param-type-bool    { background: rgba(124, 58, 237, 0.12); color: var(--color-primary-dark); }
.param-type-table   { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }

.param-req {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #b91c1c;
  white-space: nowrap;
}

.param-opt {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 코드와 실행화면을 위/아래로 배치 — "이 문법을 쓰면 이 화면이 나온다"를
   바로 대조해서 볼 수 있게 한다. 화면은 전부 실제 라이브 데모(manual-1/
   manual-2)를 headless 브라우저로 찍은 진짜 스크린샷이다(합성 데이터
   화면만 사용 — 실제 프로세스 목록처럼 이 서버의 실사용 정보를 노출하는
   화면은 신지 않았다).
   좌/우 2단은 태블릿·모바일에서 각 칸이 너무 좁아져 글자가 안 보이거나
   가로 스크롤이 강제되는 문제가 있었다 — 위/아래 1단으로 바꿔서 코드와
   스크린샷 모두 항상 화면 전체 폭을 그대로 쓰게 한다. 화면 크기에 따라
   "재배치"가 필요한 게 아니라,애초에 모든 크기에서 같은(전체 폭) 구조라
   별도 반응형 분기가 필요 없다. */
.snippet-with-shot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.snippet-with-shot .snippet-card {
  margin: 0;
}

.exec-shot {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.exec-shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.exec-shot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

.exec-shot-frame {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #f4f5f9;
  display: flex;
}

/* 스크린샷은 컨테이너 폭에 맞춰 자연스럽게 줄어들거나 늘어난다(반응형
   이미지 표준 패턴) — 캡처 원본 폭(1180px)을 넘겨서 확대하진 않되, 그
   이하 어떤 화면 폭에서도 가로 스크롤 없이 전체가 한 번에 보인다. */
.exec-shot-frame img {
  display: block;
  width: 100%;
  max-width: 1180px;
  height: auto;
  margin: 0 auto;
  /* flex 컨테이너 안의 img는 기본적으로 자기 원본 픽셀 크기 밑으로는
     안 줄어들려는 min-width:auto 특성이 있다(치환 요소 특유의 flexbox
     동작) — 이것 때문에 width:100%를 줘도 좁은 화면에서 그대로 넘쳐서
     페이지 전체가 가로 스크롤됐다. min-width:0으로 그 하한을 없앤다. */
  min-width: 0;
}

.exec-shot-standalone {
  margin-top: 20px;
}

/* 실제 캡처가 아니라 그림으로 표현한 미리보기 — exec-shot 틀은 그대로 쓰되
   안에 .fmock을 넣어서 여백을 준다. "실행 화면"이 아니라 반드시 "미리보기
   (그림)"처럼 그림이라는 걸 라벨에서 밝혀서 실제 캡처와 혼동되지 않게 한다. */
.exec-shot-illus .exec-shot-frame {
  padding: 22px;
  justify-content: center;
}

.exec-shot-illus .fmock {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

/* 900px 이하에서는 상단 네브 링크를 가로로 펼치는 대신 햄버거 버튼 뒤에
   숨긴다 — 이 폭에서 전체 링크를 다 펼치면 두 줄로 줄바꿈되면서 지저분해
   보이는 데다가, 예전엔 아예 display:none으로만 숨겨서 모바일에서 기능/
   사용법/매뉴얼/가격/FAQ로 갈 방법이 없었다. 이제 .landing-nav-toggle을
   눌러 열고 닫는 드롭다운으로 대체한다(JS가 .landing-nav-links에 .open
   토글). */
@media (max-width: 900px) {
  .landing-nav {
    position: relative;
  }
  .landing-nav-toggle {
    display: flex;
  }
  .landing-nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 20px 14px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
  }
  .landing-nav-links.open {
    display: flex;
  }
  .landing-nav-links a {
    padding: 11px 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .landing-nav-links a:last-child {
    border-bottom: none;
  }
}

/* 모바일/태블릿(문서 폭 <960px)에서 목차: 본문 위에 고정 박스로 얹는 대신
   슬라이드 드로어로 바꾼다 — 예전엔 스크롤하면 목차 박스를 지나친 뒤로는
   다시 접근할 방법이 없어 긴 본문이 "그냥 텍스트 나열"처럼 보였다. 이제는
   상단에 sticky "목차" 버튼이 항상 떠 있어서 스크롤 어디서든 바로 열 수 있다. */
.docs-mobile-bar {
  display: none;
}

.docs-sidebar-backdrop {
  display: none;
}

.docs-sidebar-close {
  display: none;
}

@media (max-width: 960px) {
  .docs-intro,
  .docs-shell {
    padding-left: 20px;
    padding-right: 20px;
  }
  .docs-shell {
    flex-direction: column;
    /* 데스크톱용 align-items:flex-start가 column 방향에서는 교차축(=폭)
       stretch를 막아버려서, docs-content가 컨테이너 폭이 아니라 내부에서
       가장 넓은 자손(코드 블록/스크린샷)의 크기에 맞춰 늘어나 버렸다 —
       그 결과 전체 페이지가 가로로 넘쳐서 스크롤됐다. stretch로 되돌려서
       폭을 컨테이너에 맞춘다. */
    align-items: stretch;
    gap: 0;
  }
  .docs-mobile-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 15;
    background: rgba(248, 249, 252, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 20px;
    margin: 0 -20px 28px;
  }
  .docs-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
  }
  .docs-toc-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  .docs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 84%;
    max-width: 320px;
    height: 100vh;
    max-height: none;
    margin: 0;
    background: var(--color-surface);
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    padding: 20px;
    box-shadow: 8px 0 32px rgba(16, 24, 40, 0.18);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
    overflow-y: auto;
  }
  .docs-sidebar.open {
    transform: translateX(0);
  }
  .docs-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 26, 0.45);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .docs-sidebar-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .docs-sidebar-close {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }
  .docs-sidebar-close button {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
  }
  .docs-content {
    max-width: none;
  }
}


/* ---- 시작하기: 작업별로 갈라지는 학습 경로 ---- */
.start-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 96px 40px 56px;
}

.start-hero .section-eyebrow {
  text-align: left;
}

.start-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.start-hero > p:last-child {
  max-width: 670px;
  font-size: 18px;
  line-height: 1.75;
  margin-top: 22px;
}

.start-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 64px;
  border-top: 1px solid var(--color-border);
}

.start-path {
  min-width: 0;
  padding: 36px 30px 40px;
  border-right: 1px solid var(--color-border);
}

.start-path:first-child { border-left: 1px solid var(--color-border); }

.start-path-kicker {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.start-path h2 {
  margin-top: 8px;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.start-path > p:not(.start-path-kicker) {
  min-height: 82px;
  font-size: 15px;
  line-height: 1.7;
}

.start-path ol {
  min-height: 120px;
  margin: 24px 0;
  padding-left: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.75;
}

.start-path code { color: var(--color-primary-dark); }
.start-path .btn { width: 100%; min-height: 46px; }

.start-next {
  max-width: 1100px;
  margin: 0 auto 88px;
  padding: 32px 40px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.start-next p { margin: 0; font-weight: 600; color: var(--color-text); }
.start-next a { font-weight: 800; }

@media (max-width: 760px) {
  .hero-title {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.22;
    word-break: keep-all;
  }

  .start-hero { padding: 64px 20px 40px; }
  .start-hero h1 { font-size: clamp(34px, 10vw, 44px); word-break: keep-all; }
  .start-hero > p:last-child { font-size: 16px; }
  .start-paths { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .start-path, .start-path:first-child { border: 1px solid var(--color-border); border-top: none; padding: 30px 24px; }
  .start-path:first-child { border-top: 1px solid var(--color-border); }
  .start-path > p:not(.start-path-kicker), .start-path ol { min-height: 0; }
  .start-next { margin: 0 20px 56px; padding: 24px 0; flex-direction: column; align-items: flex-start; }
}

/* Stage 2: guided documentation and snippet discovery */
.manual-paths,.snippet-explorer{margin:32px 0 48px;padding:clamp(22px,4vw,38px);border:1px solid rgba(93,212,181,.24);border-radius:20px;background:linear-gradient(135deg,rgba(16,43,45,.94),rgba(13,24,35,.94))}.manual-paths-heading h2,.snippet-explorer h2{margin:8px 0 10px;font-size:clamp(25px,3vw,36px);letter-spacing:-.04em}.manual-paths-heading p,.snippet-explorer p{max-width:680px;margin:0;color:var(--muted,#a9b8c7);line-height:1.7}.manual-path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}.manual-path-card{display:grid;gap:8px;min-height:154px;padding:20px;border:1px solid rgba(166,191,210,.2);border-radius:14px;color:inherit;text-decoration:none;background:rgba(6,16,25,.54);transition:transform .18s ease,border-color .18s ease,background .18s ease}.manual-path-card:hover,.manual-path-card:focus-visible{transform:translateY(-3px);border-color:#5dd4b5;background:rgba(16,56,58,.5)}.manual-path-step{color:#5dd4b5;font-size:12px;font-weight:700;letter-spacing:.08em}.manual-path-card strong{font-size:18px;letter-spacing:-.02em}.manual-path-card small{color:var(--muted,#a9b8c7);line-height:1.55}.snippet-explorer-controls{margin-top:24px}.snippet-search-label{display:block;margin-bottom:8px;color:#dfeaf1;font-size:13px;font-weight:700}#snippet-search{width:100%;min-height:48px;box-sizing:border-box;padding:0 15px;border:1px solid rgba(166,191,210,.28);border-radius:10px;color:#eef7fa;background:rgba(5,14,22,.78);font:inherit}#snippet-search:focus{outline:2px solid rgba(93,212,181,.8);outline-offset:2px;border-color:#5dd4b5}.snippet-filter-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.snippet-filter,.snippet-code-toggle{cursor:pointer;border:1px solid rgba(166,191,210,.28);border-radius:999px;color:#cad9e4;background:rgba(5,14,22,.72);font:inherit;font-size:13px;font-weight:700}.snippet-filter{padding:9px 13px}.snippet-filter.is-active,.snippet-filter:hover,.snippet-filter:focus-visible{color:#06241f;border-color:#5dd4b5;background:#5dd4b5}.snippet-result-count{min-height:24px;margin-top:15px!important;font-size:14px}.snippet-section[hidden]{display:none!important}.snippet-code-toggle{display:inline-flex;align-items:center;margin:14px 0 -2px;padding:7px 12px;color:#8ce8d0;border-radius:7px}.snippet-code-toggle:hover,.snippet-code-toggle:focus-visible{color:#061c19;border-color:#5dd4b5;background:#5dd4b5}.snippet-section pre[hidden]{display:none}@media(max-width:700px){.manual-paths,.snippet-explorer{margin:22px 0 32px;padding:22px 18px;border-radius:14px}.manual-path-grid{grid-template-columns:1fr}.manual-path-card{min-height:0;padding:17px}.snippet-filter-group{gap:7px}.snippet-filter{padding:8px 10px;font-size:12px}}

/* Keep text readable against the guided-path dark panel. */
.manual-paths-heading h2, .snippet-explorer h2 { color: #f4fbff; }
.manual-paths-heading p, .snippet-explorer p, .manual-path-card small, .snippet-result-count { color: #c5d5df; }
.manual-path-card strong { color: #f4fbff; }

/* Stage 3: a focused, truthful live-demo destination and document routes. */
.demo-page-hero{max-width:920px;margin:0 auto;padding:clamp(56px,8vw,100px) 40px 32px}.demo-page-hero h1{max-width:720px;margin:10px 0 16px;font-size:clamp(36px,5vw,62px);line-height:1.12;letter-spacing:-.055em}.demo-page-hero>p:not(.section-eyebrow){max-width:720px;color:var(--color-text-muted,#65758b);font-size:18px;line-height:1.75}.demo-page-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.demo-page-links a,.doc-route-nav a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border:1px solid rgba(112,129,155,.3);border-radius:9px;color:var(--color-text,#1a1d29);text-decoration:none;font-weight:700;transition:border-color .18s ease,background .18s ease}.demo-page-links a:hover,.demo-page-links a:focus-visible,.doc-route-nav a:hover,.doc-route-nav a:focus-visible{border-color:#5a39dc;background:#f2efff}.demo-page-stage{max-width:1200px;padding-top:20px}.demo-page-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-left:3px solid #6d43e5;background:#f5f2ff;color:#4c4371;font-size:14px;line-height:1.6}.demo-page-note strong{color:#4326aa;white-space:nowrap}.doc-route-nav{display:flex;flex-wrap:wrap;gap:10px;max-width:1000px;margin:52px auto 64px;padding:0 40px}.demo-route-nav{max-width:1200px;margin-top:12px}@media(max-width:700px){.demo-page-hero{padding:44px 20px 20px}.demo-page-hero h1{font-size:clamp(34px,10vw,44px);word-break:keep-all}.demo-page-hero>p:not(.section-eyebrow){font-size:16px}.demo-page-stage{padding:16px 20px 0}.demo-page-note{display:grid;gap:4px}.doc-route-nav{margin:32px auto 44px;padding:0 20px}.doc-route-nav a{width:100%;box-sizing:border-box;justify-content:center}}

/* Prevent the mobile document toolbar from exceeding the viewport. */
.docs-mobile-bar { box-sizing: border-box; }

.docs-mobile-bar { box-sizing: border-box; margin: 0 0 28px; }

.docs-mobile-bar { box-sizing: border-box; margin: 0 0 28px; }


/* Demo request / technical consultation */
.consultation-shell { max-width: 1040px; margin: 0 auto; padding: 76px 40px 100px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 56px; align-items: start; }
.consultation-intro h1 { font-size: 38px; line-height: 1.28; letter-spacing: -0.025em; margin: 0 0 18px; }
.consultation-intro > p { color: var(--color-text-muted); line-height: 1.75; margin: 0; }
.consultation-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.consultation-points li { padding-left: 22px; position: relative; }
.consultation-points li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; }
.consultation-card { border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); padding: 30px; box-shadow: 0 16px 40px rgba(15, 23, 42, .08); }
.consultation-card h2 { margin: 0 0 8px; font-size: 22px; }
.consultation-card > p { margin: 0 0 24px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.consultation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consultation-form textarea { resize: vertical; min-height: 132px; }
.consultation-form select { appearance: auto; }
.consultation-note { font-size: 12.5px !important; margin: 16px 0 0 !important; }
@media (max-width: 800px) { .consultation-shell { padding: 48px 20px 72px; grid-template-columns: 1fr; gap: 34px; } .consultation-intro h1 { font-size: 30px; } .consultation-card { padding: 22px 18px; } .consultation-grid { grid-template-columns: 1fr; } }


/* Start page: product definition and real UI evidence before route selection */
.start-product-overview { max-width: 1180px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); gap: 48px; align-items: center; padding-top: 78px; padding-bottom: 60px; }
.start-product-overview h1 { margin: 0; }
.start-definition { max-width: 540px; margin: 24px 0 0; font-size: 17px; line-height: 1.8; color: var(--color-text-muted); }
.start-definition strong { color: var(--color-text); font-weight: 750; }
.start-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.start-proof span { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font-size: 12.5px; font-weight: 700; }
.start-overview-demo { display: inline-block; margin-top: 24px; font-weight: 800; color: var(--color-primary); }
.start-screen-frame { margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: #eef0f4; box-shadow: 0 20px 48px rgba(15, 23, 42, .14); }
.start-screen-frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.start-screen-frame figcaption { padding: 10px 14px; color: var(--color-text-muted); background: var(--color-surface); font-size: 12px; font-weight: 650; }
.start-paths-intro { grid-column: 1 / -1; padding: 42px 30px 28px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.start-paths-intro .section-eyebrow { margin: 0 0 10px; text-align: left; }
.start-paths-intro h2 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.start-paths-intro p:last-child { max-width: 680px; margin: 10px 0 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) { .start-product-overview { grid-template-columns: 1fr; gap: 30px; padding-top: 56px; } .start-screen-frame { max-width: 760px; } }
@media (max-width: 640px) { .start-product-overview { padding: 44px 20px 42px; } .start-definition { font-size: 16px; } .start-proof { margin-top: 20px; } .start-proof span { font-size: 12px; } .start-paths-intro { padding: 30px 22px 22px; } .start-paths-intro h2 { font-size: 24px; } }

/* Keep the real dashboard legible on narrow screens — scoped to the
   breakpoint where .start-screen-frame goes full-width, so the wide
   (2360x640) capture doesn't shrink to unreadable text. Desktop keeps the
   uncropped image (width:100%; height:auto above) so nothing gets cut off. */
@media (max-width: 900px) {
  .start-screen-frame img { aspect-ratio: 16 / 9; object-fit: cover; object-position: left center; }
}

/* Homepage evidence redesign: scoped so documentation and purchase routes retain their layouts. */
.control-home { --control-ink:#15201d; --control-muted:#59645f; --control-line:#dde2dd; --control-canvas:#f7f8f6; --control-carbon:#101513; --control-panel:#171e1b; --control-green:#43d17a; --control-iris:#6246d8; background:var(--control-canvas); color:var(--control-ink); }
.control-home .landing-nav { background:rgba(247,248,246,.92); border-color:var(--control-line); }
.control-home .landing-logo,.control-home .landing-nav-links a { color:var(--control-ink); }
.control-home .landing-nav-links a { font-size:14px; font-weight:650; }
.control-home .btn { min-height:48px; border-radius:6px; box-shadow:0 0 0 1px rgba(21,32,29,.08); }
.control-home .btn-primary { background:var(--control-iris); border-color:var(--control-iris); }
.control-home .btn-primary:hover { background:#5035c0; }
.control-home :focus-visible { outline:3px solid rgba(98,70,216,.45); outline-offset:3px; }
.control-home main { overflow:hidden; }
.control-hero { max-width:1180px; margin:0 auto; padding:108px 40px 88px; display:grid; grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr); gap:72px; align-items:center; }
.control-kicker,.evidence-label { margin:0 0 14px; color:var(--control-iris); font:700 12px/1.3 "JetBrains Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.08em; }
.control-hero h1,.control-heading h2,.control-final h2 { margin:0; color:var(--control-ink); letter-spacing:-.045em; line-height:1.04; font-size:clamp(44px,5.2vw,66px); word-break:keep-all; }
.control-hero h1 em { color:var(--control-iris); font-style:normal; }
.control-lead { max-width:580px; margin:24px 0 0; color:var(--control-muted); font-size:18px; line-height:1.75; word-break:keep-all; }
.control-home code { font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; color:inherit; }
.control-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.control-constraints { display:flex; flex-wrap:wrap; gap:8px 16px; list-style:none; margin:25px 0 0; padding:0; color:var(--control-muted); font-size:13px; font-weight:650; }
.control-constraints li::before { content:"✓"; color:var(--control-green); margin-right:6px; }
.control-hero-proof,.evidence-live { margin:0; min-width:0; overflow:hidden; border:1px solid #29332e; border-radius:12px; background:var(--control-carbon); box-shadow:0 22px 48px rgba(21,32,29,.16); }
.proof-frame-label { display:flex; align-items:center; gap:8px; padding:12px 16px; color:#b9c6be; border-bottom:1px solid #29332e; font:600 11px/1.2 "JetBrains Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.04em; }
.status-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--control-green); }
.control-hero-proof img,.control-hero-proof video { display:block; width:100%; aspect-ratio:2.08 / 1; object-fit:contain; object-position:top center; background:#12171f; }
.control-hero-proof figcaption,.evidence-live>p { margin:0; padding:12px 16px; color:#b9c6be; font-size:12px; background:var(--control-panel); }
.control-hero-proof figcaption code { color:#f2f6f2; }
.control-fit { max-width:1180px; margin:0 auto; padding:0 40px 104px; display:grid; grid-template-columns:repeat(3,1fr); }
.control-fit>div { padding:26px 28px; border-top:1px solid var(--control-line); border-left:1px solid var(--control-line); }
.control-fit>div:last-child { border-right:1px solid var(--control-line); }
.control-fit span { display:block; color:var(--control-iris); font:700 11px/1.2 "JetBrains Mono",monospace; }
.control-fit strong { display:block; margin-top:20px; font-size:17px; letter-spacing:-.02em; }
.control-fit p { margin:8px 0 0; color:var(--control-muted); font-size:14px; line-height:1.6; }
.control-section { max-width:1180px; margin:0 auto; padding:98px 40px; border-top:1px solid var(--control-line); }
.control-heading { max-width:690px; }
.control-heading h2 { font-size:clamp(34px,4vw,48px); }
.control-heading>p:last-child { margin:18px 0 0; color:var(--control-muted); font-size:17px; line-height:1.75; }
.proof-stack { display:grid; gap:32px; margin-top:48px; }
.evidence-card { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); min-height:460px; border:1px solid var(--control-line); border-radius:12px; overflow:hidden; background:#fff; }
.evidence-card-reverse .evidence-copy { order:2; border-left:1px solid var(--control-line); border-right:0; }
.evidence-card-reverse .evidence-live { order:1; }
.evidence-copy { padding:42px; border-right:1px solid var(--control-line); }
.evidence-copy h3 { margin:0; color:var(--control-ink); font-size:28px; letter-spacing:-.035em; line-height:1.15; }
.evidence-copy>p:not(.evidence-label) { margin:16px 0 0; color:var(--control-muted); line-height:1.75; }
.evidence-copy pre { overflow:auto; margin:28px 0; padding:18px; border-radius:8px; color:#e3e9e3; background:var(--control-carbon); font:13px/1.75 "JetBrains Mono",monospace; }
.evidence-copy a,.text-link { color:var(--control-iris); font-size:14px; font-weight:750; }
.evidence-live { align-self:center; margin:28px; border-radius:10px; box-shadow:none; }
.evidence-live iframe { display:block; width:100%; height:340px; border:0; background:#fff; }
.evidence-live a { color:#d5dfd7; text-decoration:underline; }
.control-workflow ol { display:grid; grid-template-columns:repeat(3,1fr); gap:0; list-style:none; margin:48px 0 0; padding:0; border-top:1px solid var(--control-line); }
.control-workflow li { padding:28px 26px 0; border-left:1px solid var(--control-line); }
.control-workflow li:last-child { border-right:1px solid var(--control-line); }
.control-workflow li span { color:var(--control-iris); font:700 12px/1.2 "JetBrains Mono",monospace; }
.control-workflow h3 { margin:42px 0 0; font-size:22px; letter-spacing:-.03em; }
.control-workflow p { margin:12px 0 0; color:var(--control-muted); line-height:1.75; }
.control-security { display:grid; grid-template-columns:1fr 1fr; gap:80px; background:var(--control-carbon); max-width:none; padding-left:max(40px,calc((100vw - 1100px)/2)); padding-right:max(40px,calc((100vw - 1100px)/2)); border:0; }
.control-security h2 { color:#eff5ef; font-size:clamp(31px,3vw,44px); letter-spacing:-.04em; line-height:1.12; }
.control-security>div>p:not(.control-kicker) { margin:0; color:#b9c6be; line-height:1.8; font-size:16px; }
.control-security .security-note { margin-top:22px !important; padding:16px; border-left:2px solid var(--control-green); background:#171e1b; font-size:14px !important; }
.control-pricing { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.pricing-summary { padding:34px; border:1px solid var(--control-line); border-radius:12px; background:#fff; }
.pricing-summary strong { display:block; color:var(--control-ink); font-size:36px; letter-spacing:-.04em; }
.pricing-summary>span { display:block; margin-top:6px; color:var(--control-iris); font-size:14px; font-weight:700; }
.pricing-summary ul { display:grid; gap:10px; margin:26px 0; padding:0; list-style:none; color:var(--control-muted); font-size:14px; }
.pricing-summary li::before { content:"✓"; color:var(--control-green); margin-right:8px; }
.pricing-summary .btn { width:100%; }
.pricing-summary .text-link { display:block; margin-top:18px; text-align:center; }
.control-final { max-width:1100px; margin:0 auto 90px; padding:68px 40px; border-top:1px solid var(--control-line); }
.control-final h2 { font-size:clamp(31px,3.5vw,46px); }
.control-final>p:not(.control-kicker) { max-width:730px; margin:20px 0 0; color:var(--control-muted); line-height:1.75; }
.control-home .landing-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--control-line); padding:30px 20px 44px; }
.control-home .landing-footer a { color:var(--control-muted); }
@media (prefers-reduced-motion: reduce) { .control-home *, .control-home *::before, .control-home *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media (max-width:900px) { .control-hero { grid-template-columns:1fr; gap:40px; padding-top:68px; } .control-fit { grid-template-columns:1fr; } .control-fit>div,.control-fit>div:last-child { border-right:1px solid var(--control-line); border-bottom:0; } .evidence-card,.control-pricing,.control-security { grid-template-columns:1fr; } .evidence-card-reverse .evidence-copy,.evidence-card-reverse .evidence-live { order:initial; } .evidence-card-reverse .evidence-copy { border-left:0; border-top:1px solid var(--control-line); } .evidence-copy { border-right:0; border-bottom:1px solid var(--control-line); } .control-security { gap:28px; } }
@media (max-width:760px) { .control-home .landing-nav { padding:14px 20px; } .control-home .landing-nav-actions { margin-left:auto; margin-right:12px; } .control-home .landing-nav-actions .btn { min-height:44px; padding:10px 12px; font-size:13px; } .control-home .landing-nav-links { background:var(--control-canvas); border-color:var(--control-line); } .control-hero,.control-fit,.control-section { padding-left:20px; padding-right:20px; } .control-hero { padding-top:56px; padding-bottom:56px; text-align:left; } .control-hero h1 { font-size:clamp(38px,11vw,48px); } .control-lead { font-size:16px; } .control-actions { display:grid; grid-template-columns:1fr; } .control-actions .btn { width:100%; } .control-constraints { display:grid; gap:8px; } .control-fit { padding-bottom:64px; } .control-fit>div { padding:22px; } .control-section { padding-top:64px; padding-bottom:64px; } .control-heading>p:last-child { font-size:16px; } .evidence-card { margin:0 -4px; } .evidence-copy { padding:28px 24px; } .evidence-copy h3 { font-size:24px; } .evidence-live { margin:18px; } .evidence-live iframe { height:310px; } .control-workflow ol { grid-template-columns:1fr; } .control-workflow li,.control-workflow li:last-child { border-right:1px solid var(--control-line); border-bottom:0; padding:24px; } .control-workflow h3 { margin-top:24px; } .control-security { padding:58px 20px; } .control-pricing { gap:36px; } .pricing-summary { padding:26px 22px; } .control-final { margin:0 20px 60px; padding:50px 0; } }

.control-hero-proof[data-evidence-id="hero-tui-menu"] { border-color:#202b3a; background:#12171f; }
.control-hero-proof[data-evidence-id="hero-tui-menu"] .proof-frame-label { color:#b9c8df; border-bottom-color:#202b3a; }
.control-hero-proof[data-evidence-id="hero-tui-menu"] figcaption { color:#b9c8df; background:#17202c; }