/* =========================
   Fonts
========================= */

@font-face {
  font-family: "DegularDisplay";
  src: url("../fonts/degulardisplaydemo-bold-webfont.6594209c1296.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "DegularDisplay";
  src: url("../fonts/degulardisplaydemo-semibold-webfont.d6393bcccfa2.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "DegularDisplay";
  src: url("../fonts/degulardisplaydemo-regular-webfont.c1e29ea055db.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBMPlexSans";
  src: url("../fonts/IBMPlexSans-Bold.1ae7d0a8e833.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "IBMPlexSans";
  src: url("../fonts/IBMPlexSans-Regular.1286abb632c5.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root {
	--deep-blue: #18194D;
	--blue: #2257ff;
	--blue-2: #0e2e8a;
	--yellow: #FFF212;
	--red: #EA4E3B;
	--mint: #6FE9D2;
	--ash: #CAE6FF;
	--cream: #EBE3D6;
	--ink: #101323;
	--muted: #637083;
	--line: #e6ebf2;
	--bg: #f7fbff;
	--white: #fff;
	--shadow: 0 20px 60px rgba(24, 25, 77, .12);
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: IBMPlexSans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--white);
	line-height: 1.6
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: IBMPlexSans, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.container {
	width: min(1160px, 92vw);
	margin: auto
}

a {
	color: inherit;
	text-decoration: none
}

.eyebrow {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	font-weight: 800;
	color: var(--blue);
	background: #edf5ff;
	border: 1px solid #d8e9ff;
	border-radius: 999px;
	padding: .45rem .75rem;
	font-size: .82rem
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	border: 0;
	border-radius: 14px;
	padding: .88rem 1.2rem;
	font-weight: 800;
	cursor: pointer;
	transition: .2s ease;
	white-space: nowrap
}

.btn.primary {
	background: var(--deep-blue);
	color: #fff;
	box-shadow: 0 14px 28px rgba(24, 25, 77, .22)
}

.btn.secondary {
	background: #fff;
	color: var(--deep-blue);
	border: 1px solid var(--line)
}

.btn.accent {
	background: var(--yellow);
	color: var(--deep-blue)
}

.btn:hover {
	transform: translateY(-2px)
}

.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--line)
}

.nav-inner {
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-weight: 900;
	font-size: 1.25rem;
	color: var(--deep-blue)
}

.logo {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--deep-blue), var(--blue));
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 10px 30px rgba(34, 87, 255, .22)
}

.nav-links {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	color: #344054;
	font-weight: 700
}

.nav-actions {
	display: flex;
	gap: .65rem;
	align-items: center
}

.menu-toggle {
	display: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: .55rem
}

.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 90% 15%, rgba(111, 233, 210, .28), transparent 28%), linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
	padding: 86px 0 70px
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 52px;
	align-items: center
}

.hero h1 {
	font-size: clamp(2.5rem, 5vw, 4.8rem);
	line-height: 1.02;
	margin: 1rem 0;
	color: var(--deep-blue);
	letter-spacing: -.055em
}

.hero p {
	font-size: 1.14rem;
	color: #4b5568;
	max-width: 650px
}

.hero-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 2rem 0 1rem
}

.trust {
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	color: #465368;
	font-weight: 700;
	font-size: .95rem
}

.trust span:before {
	content: "✓";
	color: var(--blue);
	font-weight: 900;
	margin-right: .35rem
}

.code-card {
  background: #0f1535;
  color: #e6ecff;
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.code-card pre,
.code-card code {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: "Fira Code", monospace;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.6;
  color: #e6ecff;
}

.code-card pre {
  box-sizing: border-box;
}

.code-head {
  display: flex;
  gap: .45rem;
  margin-bottom: 18px;
}

.code-card:before {
  content: "";
  position: absolute;
  inset: -18px -18px auto auto;
  width: 120px;
  height: 120px;
  border-radius: 30px;
  background: var(--mint);
  opacity: .28;
  z-index: 0;
}

.code-card > * {
  position: relative;
  z-index: 1;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff6b6b
}

.dot:nth-child(2) {
	background: #ffd166
}

.dot:nth-child(3) {
	background: #6fe9d2
}

pre {
	margin: 0;
	white-space: pre-wrap;
	font-size: .9rem;
	line-height: 1.55
}

.section {
	padding: 86px 0
}

.section.alt {
	background: var(--bg)
}

.section-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 44px
}

.section-head h2 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.08;
	margin: .5rem 0;
	color: var(--deep-blue);
	letter-spacing: -.04em
}

.section-head p {
	color: var(--muted);
	font-size: 1.08rem
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 30px;
	box-shadow: 0 12px 38px rgba(16, 19, 35, .06)
}

.icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: #edf5ff;
	color: var(--blue);
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	margin-bottom: 20px
}

.card h3 {
	font-size: 1.35rem;
	margin: .2rem 0 .65rem;
	color: var(--deep-blue)
}

.card p {
	color: var(--muted);
	margin: 0
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 42px;
	align-items: center
}

.panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 38px;
	box-shadow: var(--shadow)
}

.panel h2 {
	font-size: 2.65rem;
	line-height: 1.08;
	margin: .4rem 0 1rem;
	color: var(--deep-blue);
	letter-spacing: -.04em
}

.feature-list {
	display: grid;
	gap: 14px;
	margin-top: 22px
}

.feature-list div {
	padding: 16px;
	border-radius: 16px;
	background: #f5f9ff;
	border: 1px solid #e2efff;
	font-weight: 800;
	color: var(--deep-blue)
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 34px
}

.stat {
	background: var(--deep-blue);
	color: #fff;
	border-radius: 22px;
	padding: 24px;
	text-align: center
}

.stat strong {
	font-size: 2rem;
	display: block;
	color: var(--mint)
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.price-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 26px;
	padding: 32px;
	position: relative
}

.price-card.popular {
	border-color: var(--blue);
	box-shadow: var(--shadow);
	transform: translateY(-8px)
}

.badge {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--blue);
	color: #fff;
	border-radius: 999px;
	padding: .35rem .85rem;
	font-weight: 900;
	font-size: .82rem
}

.price {
	font-size: 3rem;
	font-weight: 950;
	color: var(--deep-blue);
	letter-spacing: -.05em
}

.price span {
	font-size: 1rem;
	color: var(--muted);
	font-weight: 700
}

.ticks {
	list-style: none;
	padding: 0;
	margin: 24px 0;
	display: grid;
	gap: 12px;
	color: #4b5568
}

.ticks li:before {
	content: "✓";
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e8f6ff;
	color: var(--blue);
	font-weight: 900;
	margin-right: .5rem
}

.form-wrap {
	min-height: calc(100vh - 76px);
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #f7fbff, #fff);
	padding: 64px 0
}

.form-card {
	width: min(460px, 92vw);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 34px;
	box-shadow: var(--shadow)
}

.form-card h1 {
	margin: 0 0 .5rem;
	color: var(--deep-blue);
	font-size: 2rem
}

.form-card p {
	color: var(--muted);
	margin-top: 0
}

.field {
	display: grid;
	gap: 8px;
	margin: 16px 0
}

.field label {
	font-weight: 800;
	color: #344054
}

.field input {
	border: 1px solid #d5dde8;
	border-radius: 14px;
	padding: 14px 15px;
	font-size: 1rem
}

.field input:focus {
	outline: 3px solid #d8e9ff;
	border-color: var(--blue)
}

.legal {
	padding: 70px 0
}

.legal article {
	max-width: 900px;
	margin: auto
}

.legal h1 {
	font-size: 3rem;
	line-height: 1.1;
	color: var(--deep-blue);
	letter-spacing: -.04em
}

.legal h2 {
	color: var(--deep-blue);
	margin-top: 2rem
}

.legal p,
.legal li {
	color: #566274
}

.footer {
	background: var(--deep-blue);
	color: #dbeafe;
	padding: 60px 0 26px
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 34px
}

.footer h3,
.footer h4 {
	color: #fff;
	margin-top: 0
}

.footer a {
	display: block;
	color: #dbeafe;
	margin: .55rem 0
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
	margin-top: 38px;
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	color: #b8c7ff
}

.notice {
	background: #fff9d7;
	border: 1px solid #fff0a0;
	color: #5b4c00;
	border-radius: 18px;
	padding: 18px;
	margin: 22px 0
}

.addon {
	margin-top: 28px;
	border: 1px solid #cfe4ff;
	background: #f4faff;
	border-radius: 22px;
	padding: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px
}

@media(max-width:900px) {

	.nav-links,
	.nav-actions {
		display: none
	}

	.menu-toggle {
		display: block
	}

	.nav.open .nav-links,
	.nav.open .nav-actions {
		display: flex;
		position: absolute;
		left: 4vw;
		right: 4vw;
		background: #fff;
		box-shadow: var(--shadow);
		border: 1px solid var(--line)
	}

	.nav.open .nav-links {
		top: 76px;
		flex-direction: column;
		align-items: flex-start;
		padding: 22px;
		border-radius: 20px 20px 0 0
	}

	.nav.open .nav-actions {
		top: 272px;
		padding: 18px;
		border-radius: 0 0 20px 20px
	}

	.hero-grid,
	.split {
		grid-template-columns: 1fr
	}

	.cards,
	.pricing-grid {
		grid-template-columns: 1fr
	}

	.stats {
		grid-template-columns: repeat(2, 1fr)
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.price-card.popular {
		transform: none
	}
}

@media(max-width:580px) {
	.hero {
		padding-top: 56px
	}

	.hero-cta,
	.addon {
		flex-direction: column;
		align-items: stretch
	}

	.stats,
	.footer-grid {
		grid-template-columns: 1fr
	}

	.legal h1 {
		font-size: 2.2rem
	}
}

.nav-link {
	font: inherit;
	color: #344054;
	font-weight: 700;
	background: transparent;
	border: 0;
	cursor: pointer
}

.dropdown {
	position: relative
}

.dropdown-toggle {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .6rem 0
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: -26px;
	width: 420px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	border-radius: 22px;
	padding: 12px;
	display: none;
	z-index: 60
}

.dropdown-menu:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px
}

.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
	display: block
}

.dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-radius: 14px;
	color: #344054;
	font-weight: 800;
	border-bottom: 1px solid #eef2f7
}

.dropdown-item:last-child {
	border-bottom: 0
}

.dropdown-item:hover {
	background: #f5f9ff;
	color: var(--deep-blue)
}

.dropdown-item em {
	font-style: normal;
	background: var(--blue);
	color: #fff;
	border-radius: 8px;
	padding: .15rem .45rem;
	font-size: .75rem
}

.pricing-grid.four {
	grid-template-columns: repeat(4, 1fr)
}

.doc-hero {
	background: linear-gradient(180deg, #f8fcff, #fff);
	padding: 64px 0 80px
}

.doc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 42px
}

.doc-content {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 40px;
	box-shadow: var(--shadow)
}

.doc-content h1 {
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	line-height: 1.05;
	margin: .8rem 0 1rem;
	color: var(--deep-blue);
	letter-spacing: -.045em
}

.doc-content h2 {
	font-size: 2rem;
	color: var(--deep-blue);
	margin-top: 2rem
}

.doc-content p,
.doc-content li {
	color: #4b5568
}

.doc-content code {
	color: var(--blue);
	font-weight: 800
}

.tabs {
	display: flex;
	gap: 8px;
	margin-top: 22px;
	flex-wrap: wrap
}

.tabs button {
	border: 0;
	background: #e8eef8;
	color: #344054;
	border-radius: 10px 10px 0 0;
	padding: 12px 18px;
	font-weight: 800;
	cursor: pointer
}

.tabs button.active {
	background: var(--deep-blue);
	color: #fff
}

.code-panel[hidden] {
	display: none
}

.example {
	background: #101735;
	color: #dbeafe;
	border-radius: 0 18px 18px 18px;
	padding: 22px;
	overflow: auto;
	border: 1px solid #22305d
}

.doc-aside {
	position: sticky;
	top: 100px;
	height: max-content;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 16px;
	box-shadow: 0 12px 38px rgba(16, 19, 35, .06)
}

.doc-aside h3 {
	margin: 10px 12px 8px;
	color: var(--deep-blue)
}

.doc-aside .dropdown-item {
	border-radius: 12px
}

@media(max-width:1050px) {
	.pricing-grid.four {
		grid-template-columns: repeat(2, 1fr)
	}

	.doc-layout {
		grid-template-columns: 1fr
	}

	.doc-aside {
		position: static
	}
}

@media(max-width:900px) {
	.nav.open .dropdown-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		margin-top: 10px
	}

	.nav.open .dropdown.open .dropdown-menu {
		display: block
	}

	.nav.open .nav-actions {
		top: 520px
	}
}

@media(max-width:580px) {
	.pricing-grid.four {
		grid-template-columns: 1fr
	}

	.dropdown-menu {
		width: 86vw;
		left: 0
	}

	.doc-content {
		padding: 26px
	}

	.example {
		font-size: .8rem
	}
}

/* Final responsive refactor: mobile-friendly home, dropdown, and docs pages */
html,
body {
	max-width: 100%;
	overflow-x: hidden
}

img,
svg,
video {
	max-width: 100%;
	height: auto
}

pre,
code {
	overflow-wrap: anywhere;
	word-break: break-word
}

.code-card,
.example {
	max-width: 100%;
	overflow-x: auto
}

.menu-toggle {
	color: var(--deep-blue);
	font-size: 1.2rem;
	line-height: 1;
	min-width: 44px;
	min-height: 44px
}

.dropdown-menu {
	max-height: min(72vh, 620px);
	overflow-y: auto
}

.dropdown-item span {
	min-width: 0
}

@media(max-width:900px) {
	body.menu-open {
		overflow: hidden
	}

	.container {
		width: min(100% - 32px, 1160px)
	}

	.nav-inner {
		height: 68px;
		gap: 12px
	}

	.brand {
		font-size: 1.05rem;
		min-width: 0
	}

	.brand span:last-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.logo {
		width: 38px;
		height: 38px;
		flex: 0 0 auto
	}

	.menu-toggle {
		display: inline-grid;
		place-items: center;
		margin-left: auto
	}

	.nav-links,
	.nav-actions {
		display: none
	}

	.nav.open .nav-links,
	.nav.open .nav-actions {
		display: flex
	}

	.nav.open .nav-inner:after {
		content: "";
		position: fixed;
		inset: 68px 0 0;
		background: rgba(16, 19, 35, .34);
		z-index: 39
	}

	.nav.open .nav-links {
		position: fixed;
		top: 80px;
		left: 16px;
		right: 16px;
		max-height: calc(100vh - 152px);
		overflow-y: auto;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 24px 24px 0 0;
		padding: 16px;
		box-shadow: var(--shadow)
	}

	.nav.open .nav-actions {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		top: auto;
		z-index: 41;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		background: #fff;
		border: 1px solid var(--line);
		border-top: 0;
		border-radius: 0 0 24px 24px;
		padding: 12px 16px 16px;
		box-shadow: var(--shadow)
	}

	.nav.open .nav-actions .btn {
		width: 100%;
		padding: .8rem .9rem
	}

	.nav-links>a,
	.dropdown-toggle {
		width: 100%;
		justify-content: space-between;
		padding: 14px 12px;
		border-radius: 14px;
		color: var(--deep-blue);
		background: #f8fbff
	}

	.dropdown {
		width: 100%
	}

	.dropdown-menu,
	.nav.open .dropdown-menu {
		position: static;
		left: auto;
		width: 100%;
		max-height: none;
		display: none;
		margin: 8px 0 4px;
		padding: 6px;
		box-shadow: none;
		border-radius: 18px;
		background: #fff
	}

	.dropdown:hover .dropdown-menu {
		display: none
	}

	.dropdown.open .dropdown-menu,
	.nav.open .dropdown.open .dropdown-menu {
		display: block
	}

	.dropdown-menu:before {
		display: none
	}

	.dropdown-item {
		padding: 13px 12px;
		gap: 12px;
		font-size: .98rem
	}

	.hero {
		padding: 48px 0 54px
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 28px;
    min-width: 0;
	}

  .hero-grid > * {
  min-width: 0;
}

	.hero h1 {
		font-size: clamp(2.25rem, 12vw, 4rem);
		letter-spacing: -.05em
	}

	.hero p {
		font-size: 1rem
	}

	.hero-cta {
		gap: .75rem
	}

	.hero-cta .btn {
		flex: 1 1 220px
	}

	.trust {
		gap: .65rem 1rem;
		font-size: .88rem
	}

	.code-card {
		border-radius: 20px;
		padding: 18px
	}

	.code-card pre {
		min-width: 0;
		font-size: .82rem
	}

	.section {
		padding: 58px 0
	}

	.section-head {
		margin-bottom: 28px;
		text-align: left
	}

	.section-head h2 {
		font-size: clamp(1.85rem, 8vw, 2.6rem)
	}

	.cards,
	.pricing-grid {
		grid-template-columns: 1fr;
		gap: 16px
	}

	.card {
		padding: 22px;
		border-radius: 20px
	}

	.split {
		grid-template-columns: 1fr;
		gap: 22px
	}

	.panel {
		padding: 24px
	}

	.footer {
		padding-top: 42px
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 22px
	}

	.doc-hero {
		padding: 38px 0 54px
	}

	.doc-layout {
		grid-template-columns: 1fr;
		gap: 22px
	}

	.doc-content {
		padding: 28px;
		border-radius: 22px
	}

	.doc-content h1 {
		font-size: clamp(2rem, 10vw, 3rem)
	}

	.doc-content h2 {
		font-size: 1.65rem
	}

	.tabs {
		gap: 6px;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 2px
	}

	.tabs button {
		flex: 0 0 auto;
		padding: 10px 14px
	}

	.doc-aside {
		border-radius: 20px;
		position: static
	}

	.price-card.popular {
		transform: none
	}
}

@media(max-width:580px) {
	.container {
		width: min(100% - 24px, 1160px)
	}

	.nav-inner {
		height: 64px
	}

	.nav.open .nav-inner:after {
		inset: 64px 0 0
	}

	.nav.open .nav-links {
		top: 72px;
		left: 12px;
		right: 12px;
		max-height: calc(100vh - 166px);
		padding: 12px
	}

	.nav.open .nav-actions {
		left: 12px;
		right: 12px;
		bottom: 12px;
		grid-template-columns: 1fr
	}

	.hero {
		padding: 36px 0 46px
	}

	.eyebrow {
		font-size: .78rem
	}

	.hero h1 {
		margin-top: .8rem
	}

	.hero-cta .btn {
		flex-basis: 100%
	}

	.trust {
		flex-direction: column;
		gap: .35rem
	}

	.code-card pre,
	.example {
		font-size: .76rem
	}

	.stats {
		grid-template-columns: 1fr;
		gap: 12px
	}

	.stat {
		padding: 20px
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.footer-bottom {
		display: grid
	}

	.doc-content {
		padding: 22px
	}

	.tabs button {
		font-size: .9rem;
		padding: 9px 12px
	}

	.pricing-grid.four {
		grid-template-columns: 1fr
	}

	.dropdown-menu {
		width: 100%;
		left: auto
	}
}

/* Mobile polish: prevent feature pages from overflowing and make the menu a natural, stacked panel */
.doc-content,
.doc-content p,
.doc-content li,
.doc-content strong,
.doc-content code,
.dropdown-item span {
	overflow-wrap: anywhere;
	word-break: normal;
}

.code-tabs,
.example,
.doc-content pre {
	max-width: 100%;
	min-width: 0;
}

.code-tabs .tabs {
	max-width: 100%;
}

.code-tabs .tabs button {
	max-width: 100%;
	white-space: nowrap;
}

@media (max-width: 900px) {
	body.menu-open {
		overflow: auto;
	}

	.nav.open .nav-inner {
		height: auto;
		min-height: 64px;
		flex-wrap: wrap;
		align-items: center;
		padding: 10px 0 14px;
	}

	.nav.open .nav-inner:after {
		display: none;
	}

	.nav.open .nav-links,
	.nav.open .nav-actions {
		position: static;
		inset: auto;
		width: 100%;
		max-height: none;
		overflow: visible;
		z-index: auto;
		box-shadow: none;
		border: 1px solid var(--line);
		background: #fff;
	}

	.nav.open .nav-links {
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-top: 12px;
		padding: 14px;
		border-radius: 22px 22px 0 0;
	}

	.nav.open .nav-actions {
		order: 4;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 14px;
		border-top: 0;
		border-radius: 0 0 22px 22px;
	}

	.nav.open .nav-actions .btn {
		width: 100%;
	}

	.nav.open .dropdown-menu {
		position: static;
		width: 100%;
		max-height: 55vh;
		overflow-y: auto;
		display: none;
		margin-top: 8px;
		box-shadow: none;
	}

	.nav.open .dropdown.open .dropdown-menu {
		display: block;
	}

	.nav.open .dropdown:hover .dropdown-menu {
		display: none;
	}

	.nav.open .dropdown.open:hover .dropdown-menu {
		display: block;
	}

	.doc-layout {
		min-width: 0;
	}

	.doc-content {
		min-width: 0;
		width: 100%;
	}

	.doc-content p {
		max-width: 100%;
	}

	.tabs {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.tabs button {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (max-width: 580px) {
	.nav.open .nav-actions {
		grid-template-columns: 1fr;
	}

	.doc-hero {
		padding-top: 28px;
	}

	.doc-content h1 {
		font-size: clamp(2rem, 12vw, 2.8rem);
	}

	.doc-content p,
	.doc-content li {
		font-size: 1rem;
		line-height: 1.7;
	}

	.example {
		font-size: .72rem;
		overflow-x: auto;
		white-space: pre;
	}

	.example code {
		white-space: pre;
		word-break: normal;
		overflow-wrap: normal;
	}
}

/* Dashboard pages */
:root {
	--dash-bg: #111214;
	--dash-panel: #171a1d;
	--dash-panel-2: #202327;
	--dash-line: #2b3035;
	--dash-text: #f5f7fb;
	--dash-muted: #b8bdc7;
	--dash-pink: #ea5aa3;
	--dash-yellow: #d7aa00;
	--dash-success: #38d996
}

body.dashboard-body {
	background: radial-gradient(circle at 80% -10%, rgba(111, 233, 210, .08), transparent 28%), var(--dash-bg);
	color: var(--dash-text);
	min-height: 100vh
}

.dash-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(17, 18, 20, .9);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.dash-nav .brand {
	color: #fff
}

.dash-nav .logo {
	background: var(--dash-pink)
}

.dash-nav .nav-links a,
.dash-nav .nav-link {
	color: #d8d9df
}

.dash-nav .dropdown-menu {
	background: #16191c;
	border-color: var(--dash-line);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
}

.dash-nav .dropdown-item {
	color: #d8d9df;
	border-bottom-color: var(--dash-line)
}

.dash-nav .dropdown-item:hover {
	background: #20242a;
	color: #fff
}

.dash-nav .menu-toggle {
	background: #1b1f24;
	color: #fff;
	border-color: var(--dash-line)
}

.account-wrap {
	position: relative
}

.account-toggle {
	background: transparent;
	border: 0;
	color: var(--dash-pink);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4rem
}

.account-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 18px);
	width: 310px;
	background: #16191c;
	border: 1px solid var(--dash-line);
	border-radius: 12px;
	padding: 14px;
	display: none;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45)
}

.account-wrap.open .account-dropdown {
	display: block
}

.account-dropdown a {
	display: flex;
	align-items: center;
	gap: .8rem;
	color: #cfd2d9;
	padding: 16px 14px;
	border-radius: 10px;
	font-weight: 800;
	border-bottom: 1px solid var(--dash-line)
}

.account-dropdown a:last-child {
	border-bottom: 0
}

.account-dropdown a:hover {
	background: #20242a;
	color: #fff
}

.dash-main {
	width: min(1280px, 92vw);
	margin: 0 auto;
	padding: 56px 0 88px
}

.dash-main.narrow {
	width: min(1040px, 92vw)
}

.dash-title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.05;
	margin: 0 0 34px;
	color: #fff;
	letter-spacing: -.045em
}

.dash-subtitle {
	color: var(--dash-muted);
	font-size: 1.08rem;
	margin: 0 0 18px
}

.dash-alert {
	background: #fff;
	color: #111;
	border-radius: 5px;
	padding: 16px 18px;
	margin: 18px 0 32px;
	display: flex;
	align-items: center;
	gap: .75rem
}

.dash-alert a {
	text-decoration: underline;
	font-weight: 700
}

.dash-warning {
	background: rgba(215, 170, 0, .08);
	border: 1px solid rgba(215, 170, 0, .3);
	color: #d7aa00;
	border-radius: 8px;
	padding: 18px;
	margin: 22px 0
}

.dash-card {
	background: linear-gradient(180deg, var(--dash-panel), #141719);
	border: 1px solid var(--dash-line);
	border-radius: 8px;
	color: var(--dash-text)
}

.usage-card {
	padding: 20px 22px;
	margin: 20px 0 34px
}

.progress {
	height: 15px;
	border-radius: 5px;
	background: #3a3f47;
	overflow: hidden;
	margin: 8px 0
}

.progress span {
	display: block;
	height: 100%;
	background: #ee6b63;
	border-radius: 5px;
	min-width: 10px
}

.usage-legend {
	display: flex;
	align-items: center;
	gap: .45rem;
	color: #ddd;
	margin-top: 10px
}

.legend-swatch {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: #ee6b63;
	display: inline-block
}

.dash-section-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 34px 0 16px;
	color: #fff
}

.chart-card {
	padding: 24px;
	overflow-x: auto
}

.chart-legend {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	color: #cfd2d9;
	font-size: .86rem;
	margin-bottom: 12px
}

.chart-legend span:before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 10px;
	margin-right: 6px;
	vertical-align: middle;
	background: var(--c)
}

.usage-chart {
	width: 100%;
	min-width: 680px;
	height: 260px;
	display: block
}

.billing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px
}

.billing-card h2 {
	font-size: 1.4rem;
	margin: 0;
	padding: 22px;
	border-bottom: 1px solid var(--dash-line)
}

.billing-body {
	padding: 28px
}

.billing-plan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start
}

.billing-price {
	font-size: 2.8rem;
	font-weight: 950;
	margin: 0
}

.expires {
	color: #8f949d;
	margin: .1rem 0 1.6rem;
	font-weight: 700
}

.pink-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	color: #cfd2d9
}

.pink-checks li:before {
	content: "✓";
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--dash-pink);
	color: #151515;
	font-weight: 950
}

.dash-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	border: 0;
	border-radius: 6px;
	padding: 14px 20px;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer
}

.dash-btn.light {
	background: #fff;
	color: #222
}

.dash-btn.pink {
	background: var(--dash-pink);
	color: #fff
}

.dash-btn.dark {
	background: #24272d;
	color: #fff
}

.dash-btn.block {
	width: 100%
}

.vop-box {
	background: #303337;
	border: 1px solid #42464c;
	border-radius: 6px;
	padding: 20px;
	color: #e6e6e6
}

.dash-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 28px 0 14px
}

.api-table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-radius: 6px;
	background: #1b1f23
}

.api-table th,
.api-table td {
	text-align: left;
	padding: 18px 20px;
	border-bottom: 1px solid var(--dash-line)
}

.api-table th {
	text-decoration: underline;
	color: #fff
}

.api-table td {
	color: #cfd2d9
}

.dash-form {
	max-width: 980px
}

.dash-label {
	display: block;
	color: #bfc3cc;
	font-weight: 700;
	margin-bottom: 8px
}

.dash-input {
	width: 100%;
	background: #2b2b2b;
	color: #fff;
	border: 1px solid #555;
	border-radius: 6px;
	padding: 16px 18px;
	font-size: 1rem;
	box-shadow: 0 0 0 3px rgba(234, 90, 163, .35)
}

.profile-tabs {
	display: flex;
	border-bottom: 1px solid var(--dash-line);
	margin: 18px 0 26px
}

.profile-tabs button {
	background: #34363a;
	color: #cfd2d9;
	border: 0;
	padding: 18px 20px;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer
}

.profile-tabs button.active {
	background: #4a4a4a;
	color: #fff
}

.profile-form {
	max-width: 560px
}

.profile-form .dash-input {
	box-shadow: none;
	margin-bottom: 16px
}

.profile-form .dash-input[readonly] {
	opacity: .9
}

.password-panel {
	display: none
}

.profile-form.password-on .general-panel {
	display: none
}

.profile-form.password-on .password-panel {
	display: block
}

.dash-mobile-account {
	display: none
}

@media(max-width:900px) {

	.dashboard-body .nav.open .nav-links,
	.dashboard-body .nav.open .nav-actions {
		background: #15181b;
		border-color: var(--dash-line)
	}

	.dashboard-body .nav-links>a,
	.dashboard-body .dropdown-toggle {
		background: #1e2227;
		color: #fff
	}

	.dashboard-body .nav.open .dropdown-menu {
		background: #15181b;
		border-color: var(--dash-line)
	}

	.account-wrap {
		display: none
	}

	.dash-mobile-account {
		display: block
	}

	.dash-main,
	.dash-main.narrow {
		width: min(100% - 28px, 1280px);
		padding: 36px 0 66px
	}

	.billing-grid {
		grid-template-columns: 1fr
	}

	.billing-plan {
		grid-template-columns: 1fr
	}

	.dash-alert {
		align-items: flex-start
	}

	.api-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap
	}

	.usage-card,
	.chart-card,
	.billing-body {
		padding: 18px
	}

	.dash-title {
		margin-bottom: 24px
	}

	.profile-tabs {
		overflow-x: auto
	}

	.account-dropdown {
		position: static;
		width: 100%;
		display: block;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0
	}

	.account-dropdown a {
		background: #1e2227;
		margin-bottom: 8px
	}
}

@media(max-width:580px) {

	.dash-main,
	.dash-main.narrow {
		width: min(100% - 22px, 1280px);
		padding-top: 28px
	}

	.dash-alert {
		font-size: .92rem
	}

	.dash-actions .dash-btn {
		width: 100%
	}

	.chart-card {
		padding: 14px
	}

	.usage-chart {
		min-width: 560px
	}

	.billing-card h2 {
		padding: 18px
	}

	.billing-price {
		font-size: 2.3rem
	}

	.dash-input {
		padding: 14px
	}

	.profile-tabs button {
		flex: 1
	}

	.dash-nav .brand span:last-child {
		font-size: 1rem
	}

	.account-toggle {
		max-width: 190px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
}

/* Dashboard light theme refactor */
:root {
	--dash-bg: #f7fbff;
	--dash-panel: #ffffff;
	--dash-panel-2: #f2f7ff;
	--dash-line: #dbe7f5;
	--dash-text: #18194D;
	--dash-muted: #536079;
	--dash-pink: #2257ff;
	--dash-yellow: #b89f00;
	--dash-success: #1bbfa6;
}

body.dashboard-body {
	background: radial-gradient(circle at 92% 8%, rgba(111, 233, 210, .22), transparent 30%), linear-gradient(180deg, #f7fbff 0%, #ffffff 58%, #f4f8ff 100%);
	color: var(--dash-text);
}

.dash-nav {
	background: rgba(255, 255, 255, .9);
	border-bottom: 1px solid var(--dash-line);
	box-shadow: 0 10px 32px rgba(24, 25, 77, .06)
}

.dash-nav .brand {
	color: var(--deep-blue)
}

.dash-nav .logo {
	background: linear-gradient(135deg, var(--deep-blue), #2257ff);
	box-shadow: 0 12px 28px rgba(34, 87, 255, .2)
}

.dash-nav .nav-links a,
.dash-nav .nav-link {
	color: #344054
}

.dash-nav .nav-links a:hover,
.dash-nav .nav-link:hover,
.account-toggle {
	color: #2257ff
}

.dash-nav .dropdown-menu,
.account-dropdown {
	background: #fff;
	border-color: var(--dash-line);
	box-shadow: 0 24px 60px rgba(24, 25, 77, .12)
}

.dash-nav .dropdown-item,
.account-dropdown a {
	color: #344054;
	border-bottom-color: #eef3fb
}

.dash-nav .dropdown-item:hover,
.account-dropdown a:hover {
	background: #f4faff;
	color: var(--deep-blue)
}

.dash-nav .menu-toggle {
	background: #fff;
	color: var(--deep-blue);
	border-color: var(--dash-line)
}

.dash-title,
.dash-section-title {
	color: var(--deep-blue)
}

.dash-subtitle {
	color: var(--dash-muted)
}

.dash-alert {
	background: #fff;
	border: 1px solid var(--dash-line);
	color: #344054;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(24, 25, 77, .05)
}

.dash-alert a {
	color: var(--deep-blue)
}

.dash-warning {
	background: #fffbea;
	border-color: #f2df7a;
	color: #6a5700;
	border-radius: 16px
}

.dash-card {
	background: linear-gradient(180deg, #fff, #f8fbff);
	border-color: var(--dash-line);
	color: var(--dash-text);
	box-shadow: 0 16px 46px rgba(24, 25, 77, .07);
	border-radius: 20px
}

.progress {
	background: #dfe7f3;
	border-radius: 999px
}

.progress span {
	background: linear-gradient(90deg, #2257ff, var(--mint));
	border-radius: 999px
}

.usage-legend {
	color: var(--dash-muted)
}

.legend-swatch {
	background: #2257ff
}

.chart-card {
	background: #fff
}

.chart-legend {
	color: #536079
}

.usage-chart text {
	fill: #536079
}

.usage-chart line {
	stroke: #d8e2ef
}

.usage-chart rect[fill="#ee6b63"] {
	fill: #2257ff
}

.billing-card h2 {
	border-bottom-color: var(--dash-line);
	color: var(--deep-blue)
}

.billing-price {
	color: var(--deep-blue)
}

.expires,
.pink-checks,
.api-table td {
	color: var(--dash-muted)
}

.pink-checks li:before {
	background: #e8f6ff;
	color: #2257ff
}

.dash-btn.light,
.dash-btn.dark {
	background: #fff;
	color: var(--deep-blue);
	border: 1px solid var(--dash-line);
	box-shadow: 0 10px 24px rgba(24, 25, 77, .06)
}

.dash-btn.pink {
	background: var(--deep-blue);
	color: #fff;
	box-shadow: 0 14px 28px rgba(24, 25, 77, .18)
}

.vop-box {
	background: #f4faff;
	border-color: #dbe7f5;
	color: #344054
}

.api-table {
	background: #fff;
	border: 1px solid var(--dash-line);
	box-shadow: 0 16px 46px rgba(24, 25, 77, .06)
}

.api-table th,
.api-table td {
	border-bottom-color: #eef3fb
}

.api-table th {
	color: var(--deep-blue)
}

.dash-label {
	color: #344054
}

.dash-input {
	background: #fff;
	color: #18194D;
	border: 1px solid #d4e0ee;
	border-radius: 14px;
	box-shadow: 0 0 0 3px rgba(202, 230, 255, .65)
}

.dash-input:focus {
	outline: 0;
	border-color: #2257ff;
	box-shadow: 0 0 0 4px rgba(34, 87, 255, .13)
}

.profile-tabs {
	border-bottom-color: var(--dash-line)
}

.profile-tabs button {
	background: #edf5ff;
	color: #536079;
	border-radius: 14px 14px 0 0
}

.profile-tabs button.active {
	background: var(--deep-blue);
	color: #fff
}

.profile-form .dash-input {
	box-shadow: none
}

.profile-form .dash-input[readonly] {
	background: #f5f8fc;
	color: #536079
}

.account-toggle {
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4rem
}

@media(max-width:900px) {

	.dashboard-body .nav.open .nav-links,
	.dashboard-body .nav.open .nav-actions {
		background: #fff;
		border-color: var(--dash-line)
	}

	.dashboard-body .nav-links>a,
	.dashboard-body .dropdown-toggle {
		background: #f8fbff;
		color: var(--deep-blue)
	}

	.dashboard-body .nav.open .dropdown-menu {
		background: #fff;
		border-color: var(--dash-line)
	}

	.account-dropdown a {
		background: #f8fbff
	}

	.account-dropdown {
		background: transparent
	}
}


.image-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  max-width: 100%;
}

.image-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  max-width: 100%;
  border-radius: 24px;
}


.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.code-card pre,
.code-card code {
  overflow: unset;
  white-space: normal;
}


@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .image-card {
    order: -1;
  }
}

.caret {
  font-size: 14px;
  display: flex;
  align-items: center;
}