/* ── Data page shared styles ── */

.section {
  padding: 5rem 2rem
}

/* Hero */
.page-hero {
  padding: 8rem 2rem 4rem;
  background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(15, 98, 254, .06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 67, 206, .04) 0%, transparent 50%), var(--gray-50);
  text-align: center
}

.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.page-hero h1 {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-bottom: 1.25rem
}

.page-hero h1 em {
  font-style: normal;
  color: var(--blue-500)
}

.page-hero-sub {
  font-size: 1.15rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto
}

/* ── Data view ── */
.data-view-section {
  padding: 4rem 2rem;
  background: var(--white)
}

.data-view-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.data-view-header {
  margin-bottom: 2.5rem
}

.data-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.data-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  font-family: var(--font)
}

.data-view-toggle button:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md)
}

.data-view-toggle button.active {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1px var(--blue-500)
}

.data-view-toggle .toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.toggle-icon-api {
  background: var(--blue-50);
  color: var(--blue-500)
}

.toggle-icon-db {
  background: #2a4a7f;
  color: var(--white)
}

.data-view-panel {
  display: none
}

.data-view-panel.active {
  display: block
}

/* ── Ref table ── */
.ref-table-wrap {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed
}

.ref-field,
.ref-field-brace,
.ref-field-section {
  border-bottom: 1px solid var(--navy)
}

.ref-th-field {
  background: var(--navy);
  color: var(--gray-400);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .75rem 1.25rem;
  text-align: left;
  width: 40%
}

.ref-th-plans {
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .75rem 1rem;
  text-align: right;
  border-left: 1px solid var(--gray-200);
  width: 200px
}

.ref-th-desc {
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .75rem 1rem;
  text-align: left;
  border-left: 1px solid var(--gray-200)
}

.ref-field {
  background: var(--navy);
  color: #c6d0e0;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.4;
  padding: .35rem 1.25rem;
  vertical-align: middle;
  white-space: nowrap
}

.ref-field-brace {
  background: var(--navy);
  color: #c6d0e0;
  font-family: var(--mono);
  font-size: .76rem;
  padding: .2rem 1.25rem
}

.ref-field-section {
  background: var(--navy);
  color: #c6d0e0;
  font-family: var(--mono);
  font-size: .76rem;
  padding: .55rem 1.25rem .2rem;
  vertical-align: middle
}

.ref-plans {
  background: var(--gray-50);
  text-align: right;
  vertical-align: middle;
  padding: .35rem .75rem;
  border-left: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100)
}

.ref-plans-empty {
  background: var(--gray-100);
  border-left: 1px solid var(--gray-200)
}

.ref-desc {
  background: var(--white);
  padding: 1rem 1rem;
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.7;
  border-left: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top
}

.ref-desc-empty {
  background: var(--gray-100);
  border-left: 1px solid var(--gray-200)
}

.plan-tag {
  display: inline-flex;
  padding: .12rem .45rem;
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: .1rem .1rem;
  white-space: nowrap
}

.plan-tag-essential {
  background: var(--gray-100);
  color: var(--gray-600)
}

.plan-tag-plus {
  background: var(--gray-100);
  color: var(--gray-600)
}

.plan-tag-premium {
  background: var(--blue-50);
  color: var(--blue-700)
}

.db-tag {
  display: inline-flex;
  padding: .12rem .45rem;
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  background: #defbe6;
  color: #0e6027
}

.ref-table tbody tr:hover .ref-field,
.ref-table tbody tr:hover .ref-field-section {
  background: var(--navy-700)
}

.ref-table tbody tr:hover .ref-plans {
  background: var(--gray-100)
}

.ref-table tbody tr:hover .ref-desc {
  background: var(--gray-50)
}

.c-key { color: #78a9ff }
.c-str { color: #a7f0ba }
.c-num { color: #ffab91 }
.c-bool { color: #ffab91 }
.c-brace { color: #c6d0e0 }

.rc-indent1 { display: inline-block; width: 1.25rem }
.rc-indent2 { display: inline-block; width: 2.5rem }
.rc-indent3 { display: inline-block; width: 3.75rem }

/* Optional tag */
.tag-optional {
  display: inline-flex;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-400);
  margin-right: .35rem;
  vertical-align: middle;
  letter-spacing: .01em
}

/* ── Database field table (transposed style) ── */
.ref-table-db { table-layout: auto }

.ref-th-db-field,
.ref-th-db-val {
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-200)
}

.ref-th-db-val {
  border-left: 1px solid var(--gray-200)
}

.ref-db-field {
  background: var(--gray-50);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: .45rem 1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle
}

.ref-db-val {
  background: var(--gray-50);
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--gray-600);
  padding: .45rem 1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-200);
  vertical-align: middle
}

.ref-table-db tbody tr:hover .ref-db-field,
.ref-table-db tbody tr:hover .ref-db-val {
  background: var(--white)
}

@media(max-width:800px) {
  .ref-db-field, .ref-th-db-field { display: none }
}

/* ── Use cases ── */
.usecases-section {
  padding: 5rem 2rem;
  background: var(--gray-50)
}

.usecases-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.usecases-header {
  margin-bottom: 2.5rem
}

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem
}

.usecase-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 2.25rem;
  transition: box-shadow .25s
}

.usecase-card:hover {
  box-shadow: var(--shadow-md)
}

.usecase-card-icon {
  margin-bottom: 1rem;
  color: var(--blue-500)
}

.usecase-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem
}

.usecase-card p {
  font-size: .88rem;
  color: var(--gray-600);
  line-height: 1.7
}

/* ── Accuracy selling points ── */
.accuracy-section {
  padding: 5rem 2rem;
  background: var(--white)
}

.accuracy-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.accuracy-tick {
  flex-shrink: 0
}

.accuracy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.5rem
}

.accuracy-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--blue-50);
  color: var(--blue-700)
}

/* ── CTA split ── */
.cta-section {
  padding: 5rem 2rem;
  background: var(--gray-50)
}

.cta-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.cta-header {
  text-align: center;
  margin-bottom: 3rem
}

.cta-header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-bottom: .5rem
}

.cta-header p {
  font-size: 1.05rem;
  color: var(--gray-600)
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem
}

/* ── Delivery section layout ── */
.delivery-section {
  padding: 5rem 2rem;
  background: var(--white)
}

.delivery-inner {
  max-width: var(--max-w);
  margin: 0 auto
}

.delivery-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem
}

@media(max-width:840px) {
  .delivery-split {
    grid-template-columns: 1fr
  }
}

/* ── Delivery cards (shared) ── */
.delivery-col {
  padding: 2.5rem 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow .25s;
  position: relative;
  overflow: hidden
}

.delivery-col > *:not(.delivery-sample) {
  position: relative;
  z-index: 1
}

.delivery-col:hover {
  box-shadow: var(--shadow-md)
}

.delivery-sample {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(100px 0, 280px 0, 280px 200px);
  overflow: hidden
}

.delivery-sample-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 200px;
  overflow: hidden
}

.delivery-sample-api {
  background: var(--navy);
  padding: .5rem 10rem;
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1.65;
  color: #c6d0e0;
  white-space: pre;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 var(--radius) 0 0
}

.delivery-sample-db {
  background: var(--gray-50);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0 var(--radius) 0 0
}

.delivery-sample-db table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .58rem
}

.delivery-sample-db th {
  padding: .4rem .6rem;
  font-weight: 600;
  color: var(--gray-400);
  text-align: left;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: var(--font);
  font-size: .52rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200)
}

.delivery-sample-db td {
  padding: .35rem .6rem;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap
}

.delivery-col-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0
}

.delivery-col-icon.icon-api {
  background: var(--blue-50);
  color: var(--blue-500)
}

.delivery-col-icon.icon-db {
  background: #2a4a7f;
  color: var(--white)
}

.delivery-col h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .85rem;
  line-height: 1.2
}

.delivery-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.75rem
}

.delivery-benefits li {
  font-size: .88rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.4
}

.delivery-benefits li svg {
  flex-shrink: 0;
  color: var(--blue-500)
}

.delivery-col.col-db .delivery-benefits li svg {
  color: #2a4a7f
}

.delivery-col-footer {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap
}

.delivery-col-footer .btn {
  width: 100%;
  justify-content: center
}

/* ── Section common ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .75rem
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-bottom: .75rem;
  line-height: 1.2
}

.section-desc {
  font-size: 1.05rem;
  color: var(--gray-600);
  max-width: 650px;
  line-height: 1.65
}

/* ── Responsive ── */
@media(max-width:840px) {
  .page-hero h1 { font-size: 2.25rem }
  .usecases-grid { grid-template-columns: 1fr }
  .accuracy-chips { max-width: none; justify-content: flex-start }
  .cta-grid { grid-template-columns: 1fr }
  .ref-table-wrap { overflow-x: auto }
}

@media(max-width:800px) {
  .ref-desc, .ref-th-desc, .ref-desc-empty,
  .ref-plans, .ref-th-plans, .ref-plans-empty { display: none }
  .ref-th-field { width: 100% }
}