/**
 * Page-scoped styles for the pricing page — linked from src/app/pricing/page.tsx
 * only, never from the global cascade.
 *
 * The page was rebuilt around three steps (device → what's free → optional
 * add-ons), so the template-era rules this file used to carry (`.image-radius`
 * and the `#pro .bg-primary` !important borders) went with the markup they
 * served. Everything here is prefixed `st-pr-` and built only from the 2026
 * tokens in sleektap-2026.css (:root), so it follows the rest of the site.
 */

/* ---- Hero: the whole model in three numbers ---------------------------- */
.st-pr-sum {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	width: 100%;
	max-width: 760px;
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
}
.st-pr-sum li {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 1rem .9rem;
	background: var(--st-surface);
	border: 1px solid var(--st-line);
	border-radius: var(--st-r-sm);
	box-shadow: var(--st-shadow-sm);
	text-align: center;
}
.st-pr-sum__k {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--st-ink-mute);
}
.st-pr-sum__v {
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--st-brand);
	font-variant-numeric: tabular-nums;
}
.st-pr-sum__n { font-size: .85rem; color: var(--st-ink-soft); }
@media (max-width: 575px) {
	.st-pr-sum { grid-template-columns: 1fr; gap: .5rem; }
	.st-pr-sum li {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "k v" "n v";
		align-items: center;
		column-gap: 1rem;
		text-align: start;
		padding: .7rem 1rem;
	}
	.st-pr-sum__k { grid-area: k; }
	.st-pr-sum__v { grid-area: v; }
	.st-pr-sum__n { grid-area: n; font-size: .8rem; }
}

/* The theme gives every list inside `.panel` a bullet indent and row margins
   (sleektap-2026.css, `.panel ul:not(...)`, whose chained :not()s out-rank any
   plain class selector — hence !important); these lists are grids. */
.panel ul.st-pr-sum,
.panel ul.st-pr-devices,
.panel ul.st-pr-addons { padding-left: 0 !important; }
.panel ul.st-pr-sum > li,
.panel ul.st-pr-devices > li,
.panel ul.st-pr-addons > li { margin-block: 0 !important; line-height: inherit !important; }

/* ---- Section headings: "Step 1" label + title + one line --------------- */
.st-pr-head { max-width: 640px; margin: 0 auto 2rem; text-align: center; }
.st-pr-head h2 { margin: .25rem 0 .5rem; }
.st-pr-head p { margin: 0; color: var(--st-ink-soft); }

/* ---- Step 1: devices ---------------------------------------------------- */
.st-pr-devices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.st-pr-device {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--st-surface);
	border: 1px solid var(--st-line-firm);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.st-pr-device:hover,
.st-pr-device:focus-visible {
	transform: translateY(-3px);
	border-color: var(--st-brand-edge);
	box-shadow: var(--st-shadow);
	color: inherit;
}
.st-pr-device img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--st-ground-deep);
}
.st-pr-device__body { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem 1rem; flex: 1; }
.st-pr-device__name { font-weight: 600; color: var(--st-ink); }
.st-pr-device__use { font-size: .85rem; color: var(--st-ink-soft); line-height: 1.45; }
.st-pr-device__price { margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--st-brand); }
.st-pr-device__price small { font-weight: 500; color: var(--st-ink-mute); font-size: .8rem; }
.st-pr-device--bundle {
	justify-content: center;
	border-style: dashed;
	background: linear-gradient(150deg, var(--st-ground-deep) 0%, var(--st-surface) 70%);
}
.st-pr-note { margin: 1.25rem 0 0; text-align: center; font-size: .9rem; color: var(--st-ink-soft); }

/* ---- Step 2: free checklist --------------------------------------------- */
.st-pr-free {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem 2rem;
	max-width: 820px;
	margin: 0 auto;
	padding: 1.5rem 1.75rem;
	list-style: none;
	background: var(--st-surface);
	border: 1px solid var(--st-line);
	border-radius: var(--st-r-card);
}
.panel ul.st-pr-free { padding-left: 1.75rem !important; }
.panel ul.st-pr-free > li { margin: 0 !important; }
.st-pr-free li { display: flex; align-items: flex-start; gap: .6rem; color: var(--st-ink); line-height: 1.45; }
.st-pr-free .st-tick { margin-top: .15rem; }
@media (max-width: 640px) {
	.st-pr-free { grid-template-columns: 1fr; padding: 1.25rem; }
	.panel ul.st-pr-free { padding-left: 1.25rem !important; }
}

/* ---- Step 3: add-on cards ----------------------------------------------- */
.st-pr-addons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Fixed column counts rather than auto-fill: two on tablets, three from
   desktop up (nine paid add-ons today make a clean 3 × 3). */
@media (min-width: 576px) { .st-pr-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .st-pr-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-pr-addon {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	padding: 1.1rem 1.2rem 1.2rem;
	background: var(--st-surface);
	border: 1px solid var(--st-line);
	border-radius: 16px;
}
.st-pr-addon__top { display: flex; flex-direction: column; gap: .15rem; }
.st-pr-addon h3 { margin: 0; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.3; }
.st-pr-addon__price { font-size: 1.15rem; font-weight: 700; color: var(--st-brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-pr-addon__price small { font-weight: 500; font-size: .8rem; color: var(--st-ink-mute); }
.st-pr-addon p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--st-ink-soft); }
.st-pr-addon .st-badge { align-self: flex-start; margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
	.st-pr-device { transition: none; }
	.st-pr-device:hover { transform: none; }
}