/*
 * The pricing page: the cadence toggle, the benefit-list toggle, the white-label panel, add-ons
 * and the FAQ. The plan cards themselves are the shared .tier cards in marketing.css. Loaded only
 * by pricing.html.
 */

/* --------------------------------------------------------------------------
   Cadence toggle
   -------------------------------------------------------------------------- */

/* Without JavaScript both cadences are printed, so a control that switches
   between them would do nothing. */
.cadence { display: none; }

.js .cadence {
	display: flex;
	justify-content: center;
	margin-block-start: 30px;
}

.cadence-track {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background-color: var(--panel);
}

.cadence-btn {
	appearance: none;
	min-block-size: 44px;
	padding-inline: 24px;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	color: var(--text-dim);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: var(--dur);
	transition-timing-function: var(--ease-out);
}

.cadence-btn:hover { color: var(--text); }

.cadence-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.cadence-btn[aria-pressed="true"] {
	background-color: var(--accent);
	color: var(--accent-ink);
}

/* Each price keeps its own display; the cadence that is not chosen is the one hidden. */
.js:not([data-cadence="year"]) [data-cadence-panel="year"],
:root[data-cadence="year"] [data-cadence-panel="month"] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	:root.cadence-changed [data-cadence-panel] { animation: cadence-in 150ms var(--ease-out); }
}

@keyframes cadence-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Benefit lists
   -------------------------------------------------------------------------- */

.js [data-benefits]:not(.is-expanded) .benefit-extra { display: none; }

.benefits-more { display: none; }

.js .benefits-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: start;
	min-block-size: 44px;
	margin-block-start: 8px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--accent);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.benefits-more:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.chev {
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translate(0, -2px) rotate(45deg);
	transition: transform var(--dur) var(--ease-out);
}

[aria-expanded="true"] > .chev,
[open] .chev { transform: translate(0, 1px) rotate(-135deg); }

/* --------------------------------------------------------------------------
   White label: a contract, not a card with a buy button
   -------------------------------------------------------------------------- */

.wl-panel {
	display: grid;
	gap: 32px;
	margin-block-start: 20px;
}

body.marketing .wl-icon { margin-block-end: 20px; }
body.marketing .wl-panel .tier-foot { padding-block-start: 0; }

body.marketing .wl-benefits { align-content: start; }

@media (min-width: 820px) {
	.wl-panel { grid-template-columns: minmax(260px, 360px) 1fr; gap: 0; }

	.wl-panel > .tier { padding-inline-end: 40px; }

	body.marketing .wl-benefits {
		column-gap: 24px;
		padding-block-start: 0;
		padding-inline-start: 40px;
		border-block-start: 0;
		border-inline-start: 1px solid var(--hairline);
	}
}

/* --------------------------------------------------------------------------
   Add-ons
   -------------------------------------------------------------------------- */

.addon-head { margin-inline: auto; margin-block-end: clamp(48px, 6vw, 88px); }

body.marketing h3.tier-name { font-size: clamp(22px, 2.4vw, 28px); }

/* Queue boost has nothing to buy yet, so its card reads as parked rather than
   as a third live offer sitting level with the two you can actually check out. */
body.marketing .addon-pending { border-style: dashed; border-color: var(--line-strong); }

.addon-pending .tier-amount { color: var(--text-tail); }

.pricing-note {
	max-inline-size: 660px;
	margin-block: 32px 0;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   FAQ: flat rows between hairlines
   -------------------------------------------------------------------------- */

.faq {
	margin-block-start: clamp(40px, 5vw, 64px);
	border-block-start: 1px solid var(--line);
}

.faq-item { border-block-end: 1px solid var(--line); }

.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;
	color: var(--text);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.faq-a {
	max-inline-size: 64ch;
	margin-block: 0;
	padding-block-end: 24px;
	color: var(--text-dim);
	font-size: 17px;
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.cadence-btn,
	.chev { transition: none; }
}