/* ========================================================
   VERSO — Legal Pages CSS (Terms, Delete Account)
   ======================================================== */

/* ========== HERO ========== */
.legal-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.legal-hero-bg { position: absolute; inset: 0; z-index: 1; }
.legal-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.legal-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.12) 100%);
  z-index: 2;
}
.legal-hero-content {
  position: relative; z-index: 10;
  max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 40px;
}
.legal-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-orange);
  margin-bottom: 10px;
}
.legal-hero-title {
  font-weight: 700;
  font-size: 68px;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -2px;
  margin: 0;
}

/* ========== LAYOUT ========== */
.legal-section { position: relative; overflow: hidden; background: #fff; }
.legal-wavy-bg {
  position: absolute; left: -200px; top: -50px;
  width: 50%; height: 100%; opacity: 0.3; pointer-events: none; z-index: 1;
}
.legal-wavy-bg img { width: 100%; height: 100%; object-fit: cover; }
.legal-container {
  max-width: 1400px; margin: 0 auto;
  padding: 72px 40px 96px;
  display: flex; gap: 60px; align-items: flex-start;
  position: relative; z-index: 5;
}
.legal-aside { flex: 0 0 300px; position: sticky; top: 88px; }
.legal-content { flex: 1; max-width: 840px; min-width: 0; }

/* ========== SIDEBAR ========== */
.legal-card {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px;
  background: #fff;
  margin-bottom: 20px;
}
.legal-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-orange);
  margin-bottom: 8px;
}
.legal-card-value { font-size: 15px; font-weight: 500; line-height: 1.6; }
.legal-card-value + .legal-card-label { margin-top: 18px; }

.legal-toc { list-style: none; padding: 0; margin: 0; }
.legal-toc a {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--border-light);
  transition: color 0.2s, border-color 0.2s;
}
.legal-toc a:hover { color: var(--primary-orange); border-left-color: var(--primary-orange); }

/* ========== CONTENT ========== */
.legal-intro {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(0,0,0,0.72);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
}
.legal-block { margin-bottom: 44px; scroll-margin-top: 90px; }
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.legal-block h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 26px 0 10px;
}
.legal-block p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.72);
  margin: 0 0 16px;
}
.legal-block ul, .legal-block ol { padding-left: 22px; margin: 0 0 16px; }
.legal-block li {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.72);
  margin-bottom: 8px;
}
.legal-block a { color: var(--primary-orange); text-decoration: none; }
.legal-block a:hover { text-decoration: underline; }
.legal-block > *:last-child { margin-bottom: 0; }

/* ========== STEPS ========== */
.legal-highlight {
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-orange);
  border-radius: 16px;
  background: var(--bg-light);
  padding: 30px 32px;
}
.legal-steps { counter-reset: legal-step; list-style: none; padding: 0; margin: 0; }
.legal-steps li {
  position: relative;
  padding-left: 54px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0,0,0,0.78);
  min-height: 36px;
}
.legal-steps li:last-child { margin-bottom: 0; }
.legal-steps li::before {
  counter-increment: legal-step;
  content: counter(legal-step);
  position: absolute;
  left: 0; top: -2px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.legal-steps strong { font-weight: 600; color: var(--text-dark); }

/* ========== TABLE ========== */
.legal-table-wrap {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  overflow-x: auto;
  margin-bottom: 16px;
}
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.legal-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 18px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}
.legal-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  line-height: 1.65;
  color: rgba(0,0,0,0.72);
}
.legal-table tr:last-child td { border-bottom: none; }

.legal-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.legal-badge.is-deleted { background: #fee2e2; color: #b91c1c; }
.legal-badge.is-retained { background: #fff7ed; color: #c2410c; }

/* ========== NOTE ========== */
.legal-note {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}
.legal-note strong { color: var(--text-dark); font-weight: 600; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  .legal-container { gap: 40px; }
  .legal-aside { flex: 0 0 260px; }
}
@media (max-width: 991px) {
  .legal-hero { height: 260px; }
  .legal-hero-title { font-size: 54px; }
  .legal-container { flex-direction: column; gap: 36px; padding: 56px 30px 72px; }
  .legal-aside { position: static; flex: none; width: 100%; }
  .legal-content { max-width: 100%; }
  .legal-wavy-bg { width: 80%; opacity: 0.2; }
}
@media (max-width: 767px) {
  .legal-hero { height: 210px; }
  .legal-hero-content { padding: 0 20px; }
  .legal-hero-title { font-size: 40px; letter-spacing: -1px; }
  .legal-container { padding: 40px 20px 64px; }
  .legal-intro { font-size: 16px; }
  .legal-block h2 { font-size: 20px; }
  .legal-block p, .legal-block li { font-size: 15px; }
  .legal-highlight { padding: 24px 20px; }
  .legal-steps li { padding-left: 46px; font-size: 15px; }
  .legal-steps li::before { width: 32px; height: 32px; font-size: 14px; }
  .legal-wavy-bg { width: 100%; left: -80px; opacity: 0.15; }
}
@media (max-width: 480px) {
  .legal-hero { height: 180px; }
  .legal-hero-title { font-size: 34px; }
}