/**
 * Section and chrome styles.
 *
 * Composes the primitives in components.css. Breakpoints are co-located with
 * the rules they modify rather than collected in a separate responsive file.
 */

/* ======================================================================
   Site navigation
   ====================================================================== */
.site-nav {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: rgb(12 7 5 / 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.site-nav.is-stuck {
	border-bottom-color: var(--c-line-soft);
	background: rgb(12 7 5 / 0.92);
}

.site-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: 4.5rem;
}

.logo {
	display: block;
	flex: none;
}

.logo__img {
	width: auto;
	height: 1.5rem;
}

.site-nav__primary {
	display: none;
	margin-inline: auto;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	color: var(--c-muted-1);
	font-size: var(--t-sm);
	font-weight: 500;
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.site-nav__link:hover,
.site-nav__item.is-open .site-nav__link {
	background: var(--c-surface);
	color: var(--c-ink);
}

.site-nav__caret {
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
	transition: transform var(--dur-fast) var(--ease);
}

.site-nav__item.is-open .site-nav__caret {
	transform: rotate(180deg);
}

.site-nav__actions {
	display: none;
	align-items: center;
	gap: var(--s-3);
	margin-inline-start: auto;
}

.site-nav__signin {
	color: var(--c-muted-1);
	font-size: var(--t-sm);
	font-weight: 500;
}

.lang-toggle {
	padding: 0.4375rem var(--s-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	font-size: var(--t-xs);
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.lang-toggle:hover {
	border-color: var(--c-sand);
	background: var(--c-sand-wash);
}

/* ---- Mega menu -------------------------------------------------------- */
.mega {
	position: absolute;
	inset-inline-start: 50%;
	top: calc(100% + 0.75rem);
	z-index: var(--z-menu);
	width: max-content;
	max-width: min(44rem, calc(100vw - 3rem));
	border: 1px solid var(--c-line);
	border-radius: var(--r-2xl);
	background: var(--g-panel);
	box-shadow: var(--shadow-lift);
	animation: menu-in var(--dur-fast) var(--ease);

	/* Centring uses the standalone `translate` property, not `transform`.
	   The open animation animates `transform`, and a transform keyframe
	   replaces the whole property — so centring via transform made the panel
	   snap to the trigger's right edge for the length of the animation and
	   then jump back to centre. Keeping the two on separate properties means
	   they compose instead of fighting. */
	translate: -50% 0;
}

.mega[hidden] {
	display: none;
}

.mega__inner {
	padding: var(--s-3);
}

.mega__grid {
	display: grid;
	gap: var(--s-1);
	grid-template-columns: repeat(var(--cols-lg, 1), minmax(0, 1fr));
}

.mega__item {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-3);
	border-radius: var(--r-lg);
	color: var(--c-ink);
	transition: background-color var(--dur-fast) var(--ease);
}

.mega__item:hover {
	background: var(--c-copper-wash-soft);
	color: var(--c-ink);
}

.mega__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-copper-wash);
	color: var(--c-sand);
}

.mega__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega__title {
	font-size: var(--t-sm);
	font-weight: 600;
}

.mega__desc {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
	line-height: 1.4;
}

/* ---- Burger + drawer -------------------------------------------------- */
.site-nav__burger {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-start: auto;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	color: var(--c-ink);
}

.site-nav__burger-bars,
.site-nav__burger-bars::before,
.site-nav__burger-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.site-nav__burger-bars::before,
.site-nav__burger-bars::after {
	content: "";
	position: relative;
}

.site-nav__burger-bars::before {
	top: -6px;
}

.site-nav__burger-bars::after {
	top: 4px;
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bars {
	background: transparent;
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bars::before {
	transform: translateY(6px) rotate(45deg);
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.drawer {
	position: fixed;
	inset: 4.5rem 0 0;
	z-index: var(--z-drawer);
	overflow-y: auto;
	background: var(--c-bg);
	border-top: 1px solid var(--c-line-soft);
	animation: fadeup var(--dur) var(--ease);
}

.drawer[hidden] {
	display: none;
}

.drawer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-5);
}

.drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4) var(--s-2);
	border-bottom: 1px solid var(--c-line-soft);
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.drawer__link::-webkit-details-marker {
	display: none;
}

.drawer__group summary::after {
	content: "+";
	font-weight: 400;
	color: var(--c-muted-3);
}

.drawer__group[open] summary::after {
	content: "−";
}

.drawer__sub {
	display: flex;
	flex-direction: column;
	padding: var(--s-2) 0 var(--s-4);
}

.drawer__sub a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-2);
	color: var(--c-muted-1);
	font-size: var(--t-sm);
}

.drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

@media (min-width: 1080px) {
	.site-nav__primary,
	.site-nav__actions {
		display: flex;
	}

	.site-nav__burger,
	.drawer {
		display: none;
	}
}

/* ======================================================================
   Hero
   ====================================================================== */
.hero {
	padding-block: clamp(3rem, 1rem + 8vw, 6.5rem) var(--s-section);
}

.hero__inner {
	display: grid;
	gap: var(--s-9);
	align-items: center;
}

.hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-5);
}

.hero__title {
	display: flex;
	flex-direction: column;
}

/* The prototype's signature: the second line fades into copper. */
.hero__line--1 {
	background: var(--g-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lead {
	max-width: 34rem;
	font-size: var(--t-lead);
	color: var(--c-muted-1);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* Stacked on narrow screens; inline with dot separators once there is room
   for a single line. An absolutely-positioned separator would strand a
   leading dot at the start of a wrapped line. */
.hero__meta {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

@media (min-width: 640px) {
	.hero__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s-4);
	}

	.hero__meta li {
		display: flex;
		align-items: center;
		gap: var(--s-4);
	}

	.hero__meta li + li::before {
		content: "·";
		color: var(--c-faint);
	}
}

/* ---- Agent card ------------------------------------------------------- */
.hero__panel {
	--flow: 0;
	align-self: center;
	width: 100%;
}

.agent-card__head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--c-line-soft);
	font-size: var(--t-xs);
	color: var(--c-muted-2);
}

.agent-card__dots {
	display: flex;
	gap: 5px;
	flex: none;
}

.agent-card__dots i {
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--c-line-strong);
}

.agent-card__role {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agent-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	flex: none;
	color: var(--c-ok);
}

.agent-card__steps {
	padding: var(--s-2) var(--s-5) var(--s-5);
}

.agent-step {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-block: var(--s-4);
}

.agent-step + .agent-step {
	border-top: 1px solid var(--c-line-soft);
}

.agent-step__mark {
	display: grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	flex: none;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	color: var(--c-muted-3);
}

.agent-step.is-done .agent-step__mark {
	border-color: rgb(124 203 143 / 0.4);
	background: var(--c-ok-wash);
	color: var(--c-ok);
}

.agent-step.is-wait .agent-step__mark {
	border-color: rgb(227 204 165 / 0.35);
	background: var(--c-sand-wash);
	color: var(--c-sand);
}

.agent-step__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.agent-step__title {
	font-size: var(--t-sm);
	font-weight: 600;
}

.agent-step__meta {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

.agent-step.is-idle .agent-step__title {
	color: var(--c-muted-2);
}

@media (min-width: 960px) {
	.hero__inner {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--s-10);
	}
}

/* ======================================================================
   Audience strip
   ====================================================================== */
.audience__title {
	margin-bottom: var(--s-7);
	font-family: var(--f-mono);
	font-size: var(--t-eyebrow);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--c-muted-3);
}

.audience__card {
	gap: var(--s-2);
	padding: var(--s-4);
	text-align: center;
	align-items: center;
}

.audience__card .card__text {
	font-size: var(--t-xs);
}

/* ======================================================================
   Stages / loop
   ====================================================================== */
.stages__card .icon-tile,
.loop__card .icon-tile {
	margin-bottom: var(--s-1);
}

.loop__card {
	position: relative;
}

.loop__num {
	position: absolute;
	inset-block-start: var(--s-4);
	inset-inline-end: var(--s-5);
	font-family: var(--f-mono);
	font-size: 1.5rem;
	font-weight: 500;
	color: rgb(227 204 165 / 0.16);
}

/* ======================================================================
   Live demo
   ====================================================================== */
.demo__panel {
	display: grid;
	min-height: 26rem;
}

.demo__aside {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-6);
	border-bottom: 1px solid var(--c-line-soft);
}

.demo__role {
	font-size: 1.125rem;
	font-weight: 600;
}

.demo__meta {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

.demo__stages {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin-block: var(--s-4) auto;
}

.demo-stage {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-block: var(--s-3);
}

.demo-stage__mark {
	position: relative;
	width: 1.375rem;
	height: 1.375rem;
	flex: none;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.demo-stage.is-running .demo-stage__mark {
	border-color: var(--c-sand);
	border-top-color: transparent;
	animation: rot 0.9s linear infinite;
}

.demo-stage.is-done .demo-stage__mark {
	border-color: rgb(124 203 143 / 0.5);
	background: var(--c-ok);
}

.demo-stage.is-gate .demo-stage__mark {
	border-color: var(--c-sand);
	background: var(--c-sand);
	box-shadow: 0 0 0 4px rgb(227 204 165 / 0.15);
	animation: glowpulse 1.6s var(--ease) infinite;
}

.demo-stage__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.demo-stage__title {
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-muted-1);
}

.demo-stage.is-running .demo-stage__title,
.demo-stage.is-done .demo-stage__title,
.demo-stage.is-gate .demo-stage__title {
	color: var(--c-ink);
}

.demo-stage__state {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted-3);
}

.demo__play {
	margin-top: var(--s-4);
}

.demo__feed {
	display: flex;
	flex-direction: column;
	padding: var(--s-6);
	background: rgb(0 0 0 / 0.18);
}

.demo__feed-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-line-soft);
}

.demo__state {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted-3);
}

.demo__log {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	flex: 1;
	padding-top: var(--s-4);
	max-height: 20rem;

	/* Explicitly hidden on the inline axis. `overflow-y: auto` alone computes
	   overflow-x to `auto` as well, and each new line animates in from 12px
	   to the right — so every arriving line briefly overflowed and flashed a
	   horizontal scrollbar in and out. `scrollbar-gutter` stops the vertical
	   bar from shifting the lines sideways when the log first fills up. */
	overflow: hidden auto;
	scrollbar-gutter: stable;
}

.demo__log li {
	display: flex;
	gap: var(--s-3);
	min-width: 0;
	font-size: var(--t-xs);
	color: var(--c-muted-1);
	animation: slidein var(--dur) var(--ease);
}

.demo__log li::before {
	content: attr(data-stage);
	flex: none;
	width: 5.25rem;
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-copper-text);
}

.demo__log li.is-done {
	color: var(--c-ok);
}

.demo__gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-4);
	padding: var(--s-4);
	border: 1px solid rgb(227 204 165 / 0.3);
	border-radius: var(--r-lg);
	background: var(--c-sand-wash);
}

.demo__gate[hidden] {
	display: none;
}

.demo__gate-text {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--t-sm);
	color: var(--c-ink);
}

@media (min-width: 900px) {
	.demo__panel {
		grid-template-columns: 22rem 1fr;
	}

	.demo__aside {
		border-bottom: 0;
		border-inline-end: 1px solid var(--c-line-soft);
	}
}

/* ======================================================================
   Comparison table
   ====================================================================== */
.compare__scroll {
	border: 1px solid var(--c-line);
	border-radius: var(--r-2xl);
	background: var(--g-panel-soft);
}

.compare__table {
	font-size: var(--t-sm);
}

.compare__table th,
.compare__table td {
	padding: var(--s-4) var(--s-3);
	text-align: center;
}

.compare__table thead th {
	font-family: var(--f-mono);
	font-size: var(--t-eyebrow);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-muted-2);
	border-bottom: 1px solid var(--c-line-soft);
}

.compare__table tbody th {
	text-align: start;
	padding-inline-start: var(--s-5);
	font-weight: 600;
	white-space: nowrap;
}

.compare__table tbody tr + tr th,
.compare__table tbody tr + tr td {
	border-top: 1px solid var(--c-line-soft);
}

.compare__table .is-theeb {
	background: var(--c-copper-wash-soft);
}

.compare__table .is-theeb th {
	color: var(--c-sand);
}

.compare__yes {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--r-pill);
	background: var(--c-ok-wash);
	color: var(--c-ok);
}

.compare__no {
	color: var(--c-faint);
}

.compare__note {
	margin-top: var(--s-4);
	font-size: var(--t-xs);
	color: var(--c-muted-3);
	text-align: center;
}

/* Below the table's comfortable width, each row becomes a card with its
   column headers inlined. Preferred over a horizontal scroller: five yes/no
   cells are unreadable in a 320px viewport either way, and this keeps the
   whole comparison visible without sideways scrolling. */
@media (max-width: 760px) {
	.compare__scroll {
		border: 0;
		border-radius: 0;
		background: none;
	}

	.compare__table,
	.compare__table tbody,
	.compare__table tr,
	.compare__table th,
	.compare__table td {
		display: block;
	}

	.compare__table thead {
		display: none;
	}

	.compare__table tbody tr {
		margin-bottom: var(--s-3);
		border: 1px solid var(--c-line);
		border-radius: var(--r-xl);
		background: var(--g-panel-soft);
		overflow: hidden;
	}

	.compare__table tbody th {
		padding: var(--s-4);
		border-bottom: 1px solid var(--c-line-soft);
		background: var(--c-surface);
		font-size: var(--t-body);
	}

	.compare__table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--s-3) var(--s-4);
		text-align: start;
	}

	.compare__table tbody td::before {
		content: attr(data-label);
		font-family: var(--f-mono);
		font-size: var(--t-eyebrow);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-muted-2);
	}

	.compare__table tbody tr + tr th,
	.compare__table tbody tr + tr td {
		border-top: 0;
	}

	.compare__table tbody td + td {
		border-top: 1px solid var(--c-line-soft);
	}
}

/* ======================================================================
   Results
   ====================================================================== */
.results__card {
	gap: var(--s-4);
}

/* ======================================================================
   Segments
   ====================================================================== */
/* min-height keeps labels on a shared baseline whether or not the card
   carries a "Popular" badge. */
.segments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 2rem;
}

/* ======================================================================
   Trust
   ====================================================================== */
.trust__inner {
	display: grid;
	gap: var(--s-8);
	align-items: center;
}

.trust__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
}

.trust__copy .section-head__lead {
	text-align: start;
}

.trust__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-2);
}

.trust__quote {
	gap: var(--s-5);
	padding: var(--s-7);
}

.trust__quote blockquote p {
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--c-ink);
}

.trust__quote blockquote p::before {
	content: open-quote;
}

.trust__quote blockquote p::after {
	content: close-quote;
}

.trust__quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.trust__author {
	font-size: var(--t-sm);
	font-weight: 600;
}

@media (min-width: 960px) {
	.trust__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--s-10);
	}
}

/* ======================================================================
   Closing CTA
   ====================================================================== */
.cta__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-5);
	padding: clamp(2.5rem, 1rem + 6vw, 5rem) var(--s-5);
	text-align: center;
	background: var(--g-panel), var(--g-glow);
}

.cta__logo .logo__img {
	height: 2.25rem;
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
}

/* ======================================================================
   Footer
   ====================================================================== */
.site-footer {
	padding-block: var(--s-9) var(--s-6);
	border-top: 1px solid var(--c-line-soft);
	background: rgb(0 0 0 / 0.25);
}

.site-footer__top {
	display: grid;
	gap: var(--s-7);
	padding-bottom: var(--s-7);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
	max-width: 22rem;
}

.site-footer__blurb {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
	line-height: var(--lh-body);
}

.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.site-footer__col-title {
	margin-bottom: var(--s-4);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.site-footer__col a {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

.site-footer__col a:hover {
	color: var(--c-ink);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line-soft);
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

@media (min-width: 720px) {
	.site-footer__top {
		grid-template-columns: 1.4fr repeat(3, 1fr);
		gap: var(--s-8);
	}
}

/* ======================================================================
   Pricing page
   ====================================================================== */
.pricing-hero__note {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
}

.plan__price {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}

.plan__period {
	font-size: var(--t-sm);
	color: var(--c-muted-3);
}

.plan__features {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding-top: var(--s-2);
}

.plan__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: var(--t-sm);
	color: var(--c-muted-1);
}

.plan__features .icon {
	margin-top: 0.2em;
	color: var(--c-ok);
}

/* ---- Credits ----------------------------------------------------------- */
.credits {
	padding: var(--s-6);
}

.credits__title {
	margin-bottom: var(--s-5);
	font-size: var(--t-h3);
}

.credits__list {
	display: flex;
	flex-direction: column;
}

.credits__list li {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-block: var(--s-4);
}

.credits__list li + li {
	border-top: 1px solid var(--c-line-soft);
}

.credits__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.credits__cost {
	flex: none;
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	color: var(--c-sand);
	white-space: nowrap;
}

/* ---- Top-ups ----------------------------------------------------------- */
.topup {
	flex-direction: row;
	align-items: center;
	gap: var(--s-4);
}

.topup__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.topup__price {
	flex: none;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-sand);
}

/* ---- FAQ --------------------------------------------------------------- */
.faq {
	border: 1px solid var(--c-line);
	border-radius: var(--r-2xl);
	background: var(--g-panel-soft);
	overflow: hidden;
}

.faq__item + .faq__item {
	border-top: 1px solid var(--c-line-soft);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-5);
	font-size: var(--t-body);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color var(--dur-fast) var(--ease);
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "+";
	flex: none;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--c-muted-3);
	transition: transform var(--dur) var(--ease);
}

.faq__item[open] .faq__q::after {
	transform: rotate(45deg);
	color: var(--c-sand);
}

.faq__q:hover {
	color: var(--c-sand);
}

.faq__a {
	padding: 0 var(--s-5) var(--s-5);
	font-size: var(--t-sm);
	color: var(--c-muted-2);
	line-height: var(--lh-body);
}

/* ======================================================================
   Contact page
   ====================================================================== */
.contact__inner {
	display: grid;
	gap: var(--s-8);
	align-items: start;
}

.contact__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
}

.contact__points {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

.contact__points li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--t-sm);
	color: var(--c-muted-1);
}

.contact__points .icon {
	color: var(--c-ok);
}

.contact__panel {
	padding: var(--s-6);
}

.contact__notice {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
	padding: var(--s-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	font-size: var(--t-sm);
}

.contact__notice--ok {
	border-color: rgb(124 203 143 / 0.35);
	background: var(--c-ok-wash);
	color: var(--c-ok);
}

.contact__notice--err {
	border-color: rgb(255 138 128 / 0.35);
	background: rgb(255 138 128 / 0.1);
	color: #ffb4ab;
}

/* ---- Form -------------------------------------------------------------- */
.form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.form__row {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: 1fr 1fr;
}

.form__row--phone {
	grid-template-columns: 7rem 1fr;
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
}

.field__label {
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--c-muted-2);
}

.field__label span {
	color: var(--c-copper-text);
}

.field__input {
	width: 100%;
	padding: 0.6875rem var(--s-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: rgb(0 0 0 / 0.25);
	color: var(--c-ink);
	font-size: var(--t-sm);
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.field__input::placeholder {
	color: var(--c-faint);
}

.field__input:hover {
	border-color: var(--c-line-strong);
}

.field__input:focus {
	outline: none;
	border-color: var(--c-sand);
	background: rgb(0 0 0 / 0.4);
	box-shadow: 0 0 0 3px rgb(227 204 165 / 0.12);
}

textarea.field__input {
	resize: vertical;
	min-height: 6rem;
}

.form__legal {
	font-size: var(--t-xs);
	color: var(--c-muted-3);
	text-align: center;
}

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

	.form__row--phone {
		grid-template-columns: 6rem 1fr;
	}
}

@media (min-width: 960px) {
	.contact__inner {
		grid-template-columns: 1fr 1.05fr;
		gap: var(--s-10);
	}
}

/* ---- Empty state ------------------------------------------------------- */
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	max-width: 30rem;
	margin-inline: auto;
	padding: var(--s-8) var(--s-6);
	text-align: center;
	color: var(--c-sand);
}