/* ─── Reset ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Manrope", sans-serif;
  background: #efefef;
  color: #3b435c;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}

/* ─── Container (matches Figma 143px side margins on 1920px canvas) ───────── */
.container {
  max-width: 1634px;
  margin: 0 auto;
  padding-left: clamp(20px, 7.45vw, 143px);
  padding-right: clamp(20px, 7.45vw, 143px);
}

/* ─── Section chrome ─────────────────────────────────────────────────────── */
.section {
  padding-top: clamp(56px, 6.5vw, 110px);
}
.sec-label {
  font-size: clamp(11px, 0.94vw, 18px);
  font-weight: 700;
  letter-spacing: 0.17em;
  color: #8194cf;
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.3vw, 24px);
}
.sec-title {
  font-size: clamp(26px, 3.5vw, 68px);
  font-weight: 800;
  color: #3b435c;
  line-height: 1.1;
  margin-bottom: clamp(36px, 4.2vw, 80px);
}
.sec-rule {
  height: 1px;
  background: #bebebe;
  margin-top: clamp(56px, 6.5vw, 110px);
}

/* ─── NAV ─────────────────────────────────────────────────────────────────── */
.nav {
  background: #454e68;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(60px, 5.6vw, 108px);
  gap: 0;
}
.nav-logo img {
  height: clamp(34px, 3.5vw, 60px);
  display: block;
}
.nav-links {
  display: flex;
  gap: clamp(18px, 2.7vw, 52px);
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: clamp(13px, 1.04vw, 20px);
  font-weight: 400;
  color: #efefef;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.nav-links a:hover {
  opacity: 0.7;
}
.btn-download {
  background: #8194cf;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(13px, 1.04vw, 20px);
  font-weight: 700;
  padding: clamp(8px, 1vw, 18px) clamp(16px, 1.97vw, 38px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-download:hover {
  opacity: 0.88;
}

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  background: #efefef;
  padding-top: clamp(48px, 5.7vw, 110px);
  overflow: hidden;
}
.hero-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(48px, 5.7vw, 110px);
}
.hero-left {
  flex: 0 0 auto;
  width: 45%;
  padding-bottom: clamp(48px, 5.7vw, 110px);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  background: #efefef;
  border: 1px solid #bebebe;
  color: #8194cf;
  font-size: clamp(9px, 0.73vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: clamp(3px, 0.31vw, 6px) clamp(10px, 1.04vw, 20px);
  border-radius: 999px;
  margin-bottom: clamp(14px, 1.67vw, 32px);
  white-space: nowrap;
}
.hero-title {
  font-size: clamp(26px, 3.5vw, 68px);
  font-weight: 800;
  color: #3b435c;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(20px, 2.5vw, 48px);
}
.hero-indent {
  padding-left: clamp(10px, 1.25vw, 24px);
}
.hero-blue {
  color: #4e65af;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4e65af;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(13px, 1.15vw, 22px);
  font-weight: 700;
  padding: clamp(10px, 1.04vw, 20px) clamp(16px, 2.08vw, 40px);
  border-radius: clamp(8px, 0.83vw, 16px);
  border: none;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
  margin-bottom: clamp(10px, 1.04vw, 20px);
}
.btn-hero:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.hero-sub {
  font-size: clamp(11px, 0.83vw, 16px);
  color: #8c949e;
}
.hero-divider {
  height: 1px;
  background: #d9d9d9;
}

/* ─── HERO RIGHT (Options panel mockup) ──────────────────────────────────── */
.hero-right {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  position: relative;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  padding-top: clamp(8px, 1vw, 20px);
  overflow: visible;
}

/* Organic blob — bleeds past the panel, but right edge is a small fixed
   inset (not a % of hero-right) so it can never reach the page's edge */
.hero-blob {
  position: absolute;
  left: -18%;
  right: -15px;
  height: 96%;
  top: 2%;
  background: #c5ceea;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  opacity: 0.55;
  transform: rotate(-20deg);
  pointer-events: none;
  z-index: 0;
}

/* Options panel */
.op-panel {
  position: relative;
  z-index: 1;
  background: #353d55;
  border-radius: clamp(10px, 0.83vw, 16px);
  box-shadow: -4px 10px 40px 10px rgba(0, 0, 0, 0.28);
  width: clamp(220px, 18vw, 350px);
  padding: clamp(10px, 1.04vw, 20px);
  font-size: clamp(8px, 0.625vw, 12px);
  color: #c8d0e8;
}
.op-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(8px, 0.83vw, 16px);
  border-bottom: 1px solid #454e68;
  margin-bottom: clamp(8px, 0.83vw, 16px);
}
.op-logo {
  height: clamp(14px, 1.15vw, 22px);
  opacity: 0.9;
}
.op-close {
  color: #6b7a99;
  font-size: inherit;
}

.op-sec-label {
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8194cf;
  margin-bottom: clamp(6px, 0.625vw, 12px);
  margin-top: clamp(5px, 0.52vw, 10px);
}
.op-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(5px, 0.52vw, 10px);
  gap: 6px;
}
.op-label {
  color: #c8d0e8;
  white-space: nowrap;
  flex-shrink: 0;
}
.op-select {
  background: #2a3148;
  border: 1px solid #4a566e;
  border-radius: 4px;
  padding: clamp(2px, 0.26vw, 5px) clamp(5px, 0.52vw, 10px);
  color: #c8d0e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: clamp(80px, 8vw, 154px);
  white-space: nowrap;
  font-size: inherit;
}
.op-caret {
  color: #6b7a99;
  font-size: 0.8em;
}
.op-hint {
  font-size: 0.85em;
  color: #6b7a99;
  margin-bottom: clamp(2px, 0.21vw, 4px);
  margin-top: clamp(5px, 0.52vw, 10px);
}
.op-textarea {
  background: #2a3148;
  border: 1px solid #4a566e;
  border-radius: 4px;
  padding: clamp(3px, 0.31vw, 6px) clamp(5px, 0.52vw, 10px);
  color: #5a6a8a;
  font-size: 0.85em;
  line-height: 1.5;
  min-height: clamp(24px, 2.5vw, 48px);
}
.op-divider {
  height: 1px;
  background: #454e68;
  margin: clamp(6px, 0.625vw, 12px) 0;
}

.op-swatch {
  width: clamp(12px, 1.15vw, 22px);
  height: clamp(12px, 1.15vw, 22px);
  border-radius: 3px;
  flex-shrink: 0;
}
.op-slider-row {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.52vw, 10px);
  margin-bottom: clamp(5px, 0.52vw, 10px);
}
.op-slider-track {
  flex: 1;
  height: 4px;
  background: #4a566e;
  border-radius: 999px;
  position: relative;
}
.op-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: #8194cf;
  border-radius: 999px;
}
.op-slider-thumb {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(7px, 0.73vw, 14px);
  height: clamp(7px, 0.73vw, 14px);
  background: #8194cf;
  border-radius: 50%;
}
.op-pct {
  color: #6b7a99;
  font-size: 0.85em;
  white-space: nowrap;
}

.op-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: clamp(5px, 0.52vw, 10px);
}
.op-toggle-text {
  flex: 1;
  min-width: 0;
}
.op-toggle-label {
  color: #c8d0e8;
  font-weight: 600;
  font-size: inherit;
}
.op-toggle-sub {
  color: #6b7a99;
  font-size: 0.85em;
  margin-top: 1px;
  line-height: 1.4;
}
.op-toggle {
  width: clamp(20px, 1.875vw, 36px);
  height: clamp(11px, 1.04vw, 20px);
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  margin-top: 1px;
}
.op-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  width: clamp(7px, 0.73vw, 14px);
  height: clamp(7px, 0.73vw, 14px);
  background: #fff;
  border-radius: 50%;
}
.op-on {
  background: #4e65af;
}
.op-on::after {
  right: 2px;
}
.op-off {
  background: #4a566e;
}
.op-off::after {
  left: 2px;
}

.op-quota {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #6b7a99;
  margin-bottom: clamp(6px, 0.625vw, 12px);
}
.op-quota-val {
  color: #8194cf;
  font-weight: 600;
}

.op-footer-bar {
  background: #2a3148;
  border-radius: clamp(4px, 0.42vw, 8px);
  padding: clamp(5px, 0.52vw, 10px) clamp(7px, 0.73vw, 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(6px, 0.625vw, 12px);
}
.op-footer-label {
  color: #c8d0e8;
}
.op-keys {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.21vw, 4px);
}
.op-key {
  background: #353d55;
  border: 1px solid #5a6480;
  border-radius: 3px;
  padding: clamp(1px, 0.1vw, 2px) clamp(3px, 0.31vw, 6px);
  font-size: 0.9em;
  color: #c8d0e8;
}
.op-key-sep {
  color: #6b7a99;
}
.op-legal-links {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 0.83vw, 16px);
  font-size: 0.85em;
  color: #5a6a8a;
}
.op-legal-links a {
  color: #5a6a8a;
  text-decoration: underline;
}

/* ─── 3-COLUMN GRID ───────────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.08vw, 40px);
}

/* ─── FEATURE CARDS ───────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: clamp(14px, 1.25vw, 24px);
  padding: clamp(20px, 2.5vw, 48px) clamp(16px, 2.08vw, 40px);
  overflow: hidden;
}
.card-h {
  font-size: clamp(14px, 1.67vw, 32px);
  font-weight: 700;
  color: #3b435c;
  margin-bottom: clamp(10px, 1.04vw, 20px);
  line-height: 1.2;
}
.card-p {
  font-size: clamp(12px, 1.04vw, 20px);
  color: #565656;
  line-height: 1.6;
}

/* ─── HOW IT WORKS STEPS ──────────────────────────────────────────────────── */
.step {
}
.step-num {
  font-size: clamp(28px, 3.125vw, 60px);
  font-weight: 800;
  color: #8194cf;
  opacity: 0.35;
  line-height: 1;
  margin-bottom: clamp(10px, 1.04vw, 20px);
}
.step-h {
  font-size: clamp(14px, 1.67vw, 32px);
  font-weight: 700;
  color: #3b435c;
  margin-bottom: clamp(10px, 1.04vw, 20px);
}
.step-rule {
  height: 1px;
  background: #bebebe;
  margin-bottom: clamp(10px, 1.04vw, 20px);
}

/* ─── USE CASES ───────────────────────────────────────────────────────────── */
.use-card {
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: clamp(14px, 1.25vw, 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.use-bar {
  height: 8px;
  background: #8194cf;
  flex-shrink: 0;
}
.use-inner {
  padding: clamp(20px, 2.5vw, 40px);
}
.use-pill {
  display: inline-flex;
  background: #eceff8;
  color: #4e65af;
  font-size: clamp(10px, 0.83vw, 16px);
  font-weight: 700;
  padding: clamp(3px, 0.31vw, 6px) clamp(10px, 0.73vw, 14px);
  border-radius: 999px;
  margin-bottom: clamp(14px, 1.46vw, 28px);
}
.use-h {
  font-size: clamp(14px, 1.67vw, 32px);
  font-weight: 700;
  color: #3b435c;
  line-height: 1.2;
  margin-bottom: clamp(14px, 1.46vw, 28px);
}

/* ─── LANGUAGES ───────────────────────────────────────────────────────────── */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.04vw, 20px);
  margin-bottom: clamp(14px, 1.46vw, 28px);
}
.lang-chip {
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: clamp(8px, 0.625vw, 12px);
  padding: clamp(12px, 1.25vw, 24px) clamp(8px, 0.83vw, 16px);
  font-size: clamp(11px, 0.885vw, 17px);
  color: #3b435c;
  text-align: center;
}
.lang-note {
  font-size: clamp(11px, 0.94vw, 18px);
  color: #8c949e;
}

/* ─── PRICING ─────────────────────────────────────────────────────────────── */
.pricing-sub {
  font-size: clamp(13px, 1.04vw, 20px);
  color: #8c949e;
  margin-top: clamp(-28px, -2vw, -48px);
  margin-bottom: clamp(24px, 3.125vw, 60px);
}
.pricing-grid {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.08vw, 40px);
  flex-wrap: wrap;
}
.p-card {
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: clamp(14px, 1.25vw, 24px);
  padding: clamp(20px, 2.5vw, 48px) clamp(18px, 2.08vw, 40px);
  width: clamp(260px, 26.875vw, 516px);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.p-card-pro {
  background: #4e65af;
  border-color: #4e65af;
}
.p-popular {
  position: absolute;
  top: clamp(12px, 1.09vw, 21px);
  right: clamp(12px, 1.09vw, 21px);
  background: #fff;
  color: #4e65af;
  font-size: clamp(10px, 0.83vw, 16px);
  font-weight: 700;
  padding: clamp(4px, 0.31vw, 6px) clamp(10px, 0.83vw, 16px);
  border-radius: 999px;
  white-space: nowrap;
}
.p-name {
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 400;
  color: #565656;
  margin-bottom: clamp(4px, 0.42vw, 8px);
}
.p-name-pro {
  color: #ccd9f2;
}
.p-price {
  font-size: clamp(40px, 4.17vw, 80px);
  font-weight: 800;
  color: #3b435c;
  line-height: 1;
  margin-bottom: clamp(2px, 0.21vw, 4px);
}
.p-price-pro {
  color: #fff;
}
.p-period {
  font-size: clamp(13px, 1.04vw, 20px);
  color: #565656;
  margin-bottom: clamp(8px, 0.83vw, 16px);
}
.p-period-pro {
  color: #ccd9f2;
}
.p-tagline {
  font-size: clamp(12px, 0.94vw, 18px);
  color: #565656;
  margin-bottom: clamp(16px, 1.67vw, 32px);
}
.p-tagline-pro {
  color: #ccd9f2;
}
.p-highlight {
  display: inline-flex;
  align-items: center;
  background: #eceff8;
  color: #4e65af;
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 700;
  padding: clamp(8px, 0.83vw, 16px) clamp(12px, 1.25vw, 24px);
  border-radius: clamp(6px, 0.52vw, 10px);
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
.p-highlight-pro {
  background: #40599e;
  color: #fff;
}
.p-rule {
  height: 1px;
  background: #bebebe;
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
.p-rule-pro {
  background: #40599e;
}
.p-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 16px);
  margin-bottom: clamp(24px, 3.125vw, 60px);
  flex: 1;
}
.p-list li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.83vw, 16px);
  font-size: clamp(12px, 0.94vw, 18px);
  color: #3b435c;
}
.p-list-pro li {
  color: #fff;
}
.p-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8194cf;
  flex-shrink: 0;
}
.p-dot-pro {
  background: rgba(255, 255, 255, 0.5);
}
.p-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 22px);
  padding: clamp(10px, 1.04vw, 20px);
  border-radius: clamp(8px, 0.73vw, 14px);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.p-btn:hover {
  opacity: 0.87;
}
.p-btn-free {
  background: #eceff8;
  color: #4e65af;
}
.p-btn-pro {
  background: #40599e;
  color: #fff;
}
.p-note {
  font-size: clamp(10px, 0.73vw, 14px);
  color: #ccd9f2;
  text-align: center;
  margin-top: clamp(8px, 0.83vw, 14px);
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-container {
  max-width: 1634px;
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  padding: clamp(18px, 2.08vw, 40px) 0;
}
.faq-q {
  font-size: clamp(15px, 1.46vw, 28px);
  font-weight: 700;
  color: #3b435c;
  margin-bottom: clamp(10px, 1.04vw, 20px);
}
.faq-a {
  font-size: clamp(12px, 1.04vw, 20px);
  color: #565656;
  line-height: 1.6;
}
.faq-rule {
  height: 1px;
  background: #bebebe;
  margin-top: clamp(18px, 2.08vw, 40px);
}

/* ─── CTA BAND ────────────────────────────────────────────────────────────── */
.cta-band {
  background: #3b435c;
  padding: clamp(48px, 5vw, 96px) 0;
  margin-top: clamp(56px, 6.5vw, 110px);
}
.cta-title {
  font-size: clamp(22px, 2.92vw, 56px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: clamp(8px, 0.83vw, 16px);
}
.cta-sub {
  font-size: clamp(13px, 1.15vw, 22px);
  color: #8c949e;
  margin-bottom: clamp(20px, 2.5vw, 48px);
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #3b435c;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.46vw, 28px);
  padding: clamp(12px, 1.46vw, 28px) clamp(24px, 2.5vw, 48px);
  border-radius: clamp(10px, 0.83vw, 16px);
  border: none;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
}
.cta-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
.footer {
  background: #262e3d;
  padding: clamp(24px, 2.5vw, 48px) 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
  flex-wrap: wrap;
}
.footer-brand {
  height: clamp(26px, 2.7vw, 48px);
  flex-shrink: 0;
}
.footer-nav {
  display: flex;
  gap: clamp(14px, 1.875vw, 36px);
  flex: 1;
}
.footer-nav a {
  font-size: clamp(12px, 0.94vw, 18px);
  color: #8c949e;
  transition: color 0.15s;
}
.footer-nav a:hover {
  color: #fff;
}
.footer-copy {
  font-size: clamp(11px, 0.83vw, 16px);
  color: #8c949e;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-inner {
    flex-direction: column;
  }
  .hero-left {
    width: 100%;
  }
  .hero-right {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    flex-direction: column;
    align-items: center;
  }
  .p-card {
    width: 100%;
    max-width: 520px;
  }
  .nav-links {
    display: none;
  }
}
@media (max-width: 600px) {
  .lang-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── LEGAL PAGES ─────────────────────────────────────────────────────────── */
.legal-page {
  max-width: 760px;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.legal-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  color: #3b435c;
  line-height: 1.1;
  margin-bottom: 10px;
}
.legal-meta {
  font-size: 14px;
  color: #8c949e;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.legal-page h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #3b435c;
  margin-top: clamp(28px, 3vw, 44px);
  margin-bottom: 14px;
}
.legal-page p {
  font-size: 15px;
  color: #565656;
  line-height: 1.7;
  margin-bottom: 14px;
}
.legal-page ul {
  margin: 0 0 14px 0;
  padding-left: 22px;
}
.legal-page li {
  font-size: 15px;
  color: #565656;
  line-height: 1.7;
  margin-bottom: 6px;
}
.legal-page a {
  color: #4e65af;
  text-decoration: underline;
}
.legal-page strong {
  color: #3b435c;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid #d4d8e8;
  color: #565656;
}
.legal-table th {
  background: #eceff8;
  color: #3b435c;
  font-weight: 700;
}