/* ============================================
   Metamech — Global Styles
   Uses WebAwesome semantic tokens throughout.
   No hardcoded colors.
   The kit serves the `default` theme and palette (not awesome/bright):
   measure any contrast work against themes/default.css (#1007).
   ============================================ */

/* --- Layout --- */

.container {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: var(--wa-space-l);
}

/* --- Header --- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wa-color-surface-default);
	border-bottom: 1px solid var(--wa-color-surface-border);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
	height: 4rem;
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	text-decoration: none;
	color: var(--wa-color-text-normal);
	font-weight: 700;
	font-size: 1.25rem;
	margin-right: auto;
}

/* Inline SVG with fill="currentColor": the mark takes the .logo text token, so it
   follows the active theme without a second asset (#1006). */
.logo-icon {
	flex: none;
	width: 2rem;
	height: 2rem;
}

/* Subtle icon-only control (dark-mode sun/moon). Every property is set so the kit's
   native <button> styles can't turn it back into a filled squircle. */
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--wa-color-text-quiet);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition:
		color 0.15s ease,
		background-color 0.15s ease;
}

.icon-button:hover {
	color: var(--wa-color-text-normal);
	background: var(--wa-color-neutral-fill-quiet);
}

.icon-button:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

.desktop-nav {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
}

.desktop-nav a {
	text-decoration: none;
	color: var(--wa-color-text-quiet);
	font-size: 0.925rem;
	font-weight: 500;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	transition: color 0.15s ease;
}

.desktop-nav a:hover {
	color: var(--wa-color-text-normal);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
}

.mobile-only {
	display: none;
}

/* --- Mobile Nav --- */

.mobile-nav {
	display: flex;
	flex-direction: column;
	padding: var(--wa-space-m);
}

.mobile-nav a {
	display: block;
	text-decoration: none;
	color: var(--wa-color-text-normal);
	font-size: 1.1rem;
	padding: var(--wa-space-s) 0;
}

@media (max-width: 48em) {
	.desktop-nav {
		display: none;
	}

	.mobile-only {
		display: inline-flex;
	}
}

/* --- Hero --- */

.hero {
	text-align: center;
	padding: var(--wa-space-4xl) var(--wa-space-l);
}

.hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--wa-color-text-normal);
	margin-bottom: var(--wa-space-m);
}

.hero-subtitle {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: var(--wa-color-text-quiet);
	max-width: 38rem;
	margin-inline: auto;
	line-height: 1.6;
}

.hero-sm {
	padding: var(--wa-space-2xl) var(--wa-space-l);
}

.hero-sm h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.hero-actions {
	margin-top: var(--wa-space-xl);
}

/* --- Sections --- */

.section {
	padding: var(--wa-space-4xl) 0;
}

.section-alt {
	background: var(--wa-color-surface-lowered);
}

.section-heading {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.section-subheading {
	text-align: center;
	color: var(--wa-color-text-quiet);
	font-size: 1.1rem;
	margin-bottom: var(--wa-space-2xl);
}

/* --- Grid --- */

.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wa-space-l);
}

@media (min-width: 640px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Value Cards --- */

.value-card {
	text-align: center;
	padding: var(--wa-space-l);
}

.value-icon {
	font-size: 2rem;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-m);
}

.value-card h2,
.value-card h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.value-card p {
	color: var(--wa-color-text-quiet);
	line-height: 1.65;
}

/* --- Product Cards --- */

.product-card-inner {
	text-align: center;
	padding: var(--wa-space-l);
}

.product-icon {
	font-size: 2.5rem;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-m);
}

.product-card-inner h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.product-card-inner p {
	color: var(--wa-color-text-quiet);
	line-height: 1.65;
	margin-bottom: var(--wa-space-m);
}

/* --- App teaser (studio home, #53) --- */

.app-teaser {
	text-align: center;
	max-width: 32rem;
}

.app-teaser h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.app-teaser p {
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-l);
}

/* --- Newsletter --- */

.newsletter-section {
	text-align: center;
	max-width: 32rem;
}

.newsletter-icon {
	font-size: 2rem;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-m);
}

.newsletter-section h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.newsletter-section p {
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-l);
}

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
	justify-content: center;
}

.newsletter-input {
	flex: 1;
	min-width: 0;
}

/* Turnstile (#79) gets its own row under the email field and button, so a visible
   challenge never squeezes the input; before it renders it takes no space. */
.newsletter-turnstile {
	order: 1;
	flex-basis: 100%;
	display: flex;
	justify-content: center;
}

.newsletter-turnstile:empty {
	display: none;
}

@media (max-width: 480px) {
	.newsletter-form {
		flex-direction: column;
	}
}

/* --- Footer --- */

.site-footer {
	padding: var(--wa-space-2xl) 0 var(--wa-space-l);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--wa-space-xl);
	padding: var(--wa-space-xl) 0;
}

.footer-section h3 {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-m);
}

.footer-section nav {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
}

.footer-section nav a {
	text-decoration: none;
	color: var(--wa-color-text-normal);
	font-size: 0.925rem;
	transition: color 0.15s ease;
}

.footer-section nav a:hover {
	color: var(--wa-color-text-link);
}

.social-links {
	display: flex;
	gap: var(--wa-space-m);
}

.social-links a {
	color: var(--wa-color-text-quiet);
	font-size: 1.25rem;
	transition: color 0.15s ease;
}

.social-links a:hover {
	color: var(--wa-color-text-link);
}

.copyright {
	text-align: center;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	padding-top: var(--wa-space-l);
}

/* --- Prose (long-form text) --- */

.prose {
	max-width: 48rem;
	margin-inline: auto;
}

.prose h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	margin-bottom: var(--wa-space-m);
	color: var(--wa-color-text-normal);
}

.prose h2 {
	font-size: 1.4rem;
	font-weight: 700;
	margin-top: var(--wa-space-2xl);
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.prose h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: var(--wa-space-xl);
	margin-bottom: var(--wa-space-xs);
	color: var(--wa-color-text-normal);
}

.prose p {
	color: var(--wa-color-text-normal);
	line-height: 1.75;
	margin-bottom: var(--wa-space-m);
}

.prose ul {
	color: var(--wa-color-text-normal);
	line-height: 1.75;
	margin-bottom: var(--wa-space-m);
	padding-left: var(--wa-space-xl);
}

.prose li {
	margin-bottom: var(--wa-space-xs);
}

.prose a {
	color: var(--wa-color-text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.prose a:hover {
	text-decoration: none;
}

/* --- Utilities --- */

.text-muted {
	color: var(--wa-color-text-quiet);
}

/* --- Smooth scrolling --- */

html {
	scroll-behavior: smooth;
}

/* --- Blog Cards --- */

.blog-card-inner {
	padding: var(--wa-space-l);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blog-card-inner h2 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: var(--wa-space-s);
	color: var(--wa-color-text-normal);
}

.blog-card-inner h2 a {
	text-decoration: none;
	color: inherit;
	transition: color 0.15s ease;
}

.blog-card-inner h2 a:hover {
	color: var(--wa-color-text-link);
}

.blog-card-inner > p {
	color: var(--wa-color-text-quiet);
	line-height: 1.65;
	margin-bottom: var(--wa-space-m);
	flex: 1;
}

.blog-card {
	transition: transform 0.15s ease;
}

.blog-card:hover {
	transform: translateY(-2px);
}

/* --- Post Meta --- */

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: 0.875rem;
}

.post-meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
}

/* --- Post Header --- */

.post-header {
	margin-bottom: var(--wa-space-2xl);
}

.post-header h1 {
	margin-bottom: var(--wa-space-m);
}

/* --- Home Post Stream --- */

/* Overrides .prose h2 (0,1,1) — the stream title is a post title, not a subhead. */
.prose .post-stream-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: var(--wa-space-m);
}

/* Overrides .prose a (0,1,1) — title links are not body links. */
.prose .post-stream-title a {
	color: var(--wa-color-text-normal);
	text-decoration: none;
	transition: color 0.15s ease;
}

.prose .post-stream-title a:hover {
	color: var(--wa-color-text-link);
}

/* Overrides .prose a (0,1,1) — the permalink is an affordance, not a body link. */
.prose .post-stream-permalink a {
	text-decoration: none;
}

/* Match the .prose measure so the rule does not span the full container. */
.post-stream-divider {
	max-width: 48rem;
	margin-block: var(--wa-space-3xl);
	margin-inline: auto;
}

.archive-link {
	text-align: center;
	margin-top: var(--wa-space-4xl);
}

/* --- Contact Form --- */

.contact-form {
	max-width: 40rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-m);
}

.form-field {
	display: flex;
	flex-direction: column;
}

/* --- FAQ --- */

.faq-section {
	max-width: 48rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
}

.faq-section p {
	color: var(--wa-color-text-quiet);
	line-height: 1.75;
	margin: var(--wa-space-s) 0 0;
}

.faq-section a {
	color: var(--wa-color-text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.faq-section a:hover {
	text-decoration: none;
}

/* --- Docs Grid --- */

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

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

.docs-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.15s ease;
}

.docs-card-link:hover {
	transform: translateY(-2px);
}

/* Docs cards are links, so their icon keeps the link color (#1009); .value-icon elsewhere is decorative and neutral (#1030). */
.docs-card-link .value-icon {
	color: var(--wa-color-text-link);
}

.docs-card {
	height: 100%;
}

/* --- Breadcrumb --- */

.breadcrumb {
	margin-bottom: var(--wa-space-xl);
}

/* --- Read More Link --- */

.read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--wa-color-text-link);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.925rem;
	margin-top: var(--wa-space-s);
	transition: gap 0.15s ease;
}

.read-more:hover {
	gap: var(--wa-space-xs);
}

/* --- RSS Link --- */

.rss-link {
	text-align: center;
	margin-top: var(--wa-space-2xl);
}

.rss-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--wa-color-text-quiet);
	text-decoration: none;
	font-size: 0.925rem;
	transition: color 0.15s ease;
}

.rss-link a:hover {
	color: var(--wa-color-text-link);
}

/* --- Prose Callout Spacing --- */

.prose wa-callout {
	margin-top: var(--wa-space-l);
	margin-bottom: var(--wa-space-l);
}

.breadcrumb-section {
	padding-bottom: 0;
}

/* --- Docs Content --- */

.docs-content {
	padding-top: var(--wa-space-l);
}

.prose pre {
	background: var(--wa-color-surface-lowered);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	padding: var(--wa-space-m);
	overflow-x: auto;
	margin-bottom: var(--wa-space-m);
}

.prose code {
	font-family: var(--wa-font-family-code);
	font-size: 0.9em;
}

.prose pre code {
	background: none;
	padding: 0;
}

.prose ol {
	color: var(--wa-color-text-normal);
	line-height: 1.75;
	margin-bottom: var(--wa-space-m);
	padding-left: var(--wa-space-xl);
}

/* --- Focus visible --- */

/* --site-focus-color is the one place the focus colour is chosen: the global native outline
   below and the .wa-invalid/.wa-valid --wa-focus-ring re-declarations both consume it. The
   *-on-quiet tokens clear WCAG 1.4.11 (3:1) against the page background in both modes of the
   served default theme: brand 7.0/6.3, danger 7.0/6.2, success 7.0/6.2 (light/dark, #1007). */
html {
	--site-focus-color: var(--wa-color-brand-on-quiet);
	--wa-color-focus: var(--wa-color-brand-on-quiet);
}

:focus-visible {
	outline: 2px solid var(--site-focus-color);
	outline-offset: 2px;
}

/* Validation focus rings (#1007). Upstream kit bug: native.css sets --wa-color-focus on
   .wa-invalid/.wa-valid, but --wa-focus-ring was already substituted at :root, so the ring
   stays brand. Re-declare the ring on the element itself (unlayered, so it beats @layer rules)
   for components, and set --site-focus-color so native fields' outline follows too. */
.wa-invalid {
	--site-focus-color: var(--wa-color-danger-on-quiet);
	--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--site-focus-color);
}

.wa-valid {
	--site-focus-color: var(--wa-color-success-on-quiet);
	--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--site-focus-color);
}

/* --- Product Detail Hero --- */

.product-hero-icon {
	font-size: 3rem;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-m);
}

/* --- Platform Tags --- */

.platform-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-xs);
	margin-top: var(--wa-space-m);
	margin-bottom: var(--wa-space-m);
}

.platform-tags-center {
	justify-content: center;
}

/* --- Product Card Action --- */

.product-card-action {
	margin-top: var(--wa-space-m);
}

/* --- Feature List --- */

.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 40rem;
}

.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-m);
	padding: var(--wa-space-m) 0;
	border-bottom: 1px solid var(--wa-color-surface-border);
}

.feature-list li:last-child {
	border-bottom: none;
}

.feature-check {
	color: var(--wa-color-success-on-quiet);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 2px;
}

.feature-list strong {
	display: block;
	color: var(--wa-color-text-normal);
	margin-bottom: var(--wa-space-2xs);
}

.feature-list p {
	color: var(--wa-color-text-quiet);
	line-height: 1.6;
	margin: 0;
}

/* --- Tab Content --- */

.tab-content {
	padding: var(--wa-space-xl) 0;
}

.tab-content-center {
	text-align: center;
	padding: var(--wa-space-4xl) 0;
}

.placeholder-icon {
	font-size: 3rem;
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-m);
}

/* --- Requirements List --- */

.requirements-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 40rem;
}

.requirements-list li {
	padding: var(--wa-space-s) 0;
	color: var(--wa-color-text-quiet);
	border-bottom: 1px solid var(--wa-color-surface-border);
}

.requirements-list li:last-child {
	border-bottom: none;
}

.requirements-list strong {
	color: var(--wa-color-text-normal);
}

/* --- Pricing Callout (product detail) --- */

.pricing-callout {
	text-align: center;
	max-width: 32rem;
}

.pricing-callout h2 {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-s);
}

.pricing-callout p {
	color: var(--wa-color-text-quiet);
	font-size: 1.1rem;
	margin-bottom: var(--wa-space-xl);
}

/* --- Pricing Grid --- */

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wa-space-l);
	align-items: start;
	/* Stacked cards stay card-shaped on tablets instead of stretching to 720px. */
	max-width: 28rem;
	margin-inline: auto;
}

/* Three columns only once each card's min-content (~250px incl. card padding) fits; at 768px
   the tracks overflowed the viewport by ~46px (#1009). */
@media (min-width: 1024px) {
	.pricing-grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: none;
	}
}

/* --- Pricing Card --- */

.pricing-card-inner {
	padding: var(--wa-space-xl);
	text-align: center;
}

.pricing-card-inner h2 {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wa-color-text-normal);
	margin-bottom: var(--wa-space-m);
}

.pricing-badge-row {
	margin-bottom: var(--wa-space-s);
}

.pricing-price {
	margin-bottom: var(--wa-space-m);
}

.pricing-amount {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--wa-color-text-normal);
}

.pricing-per {
	font-size: 1rem;
	color: var(--wa-color-text-quiet);
}

.pricing-description {
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-l);
	line-height: 1.6;
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wa-space-xl);
	text-align: left;
}

.pricing-features li {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	padding: var(--wa-space-xs) 0;
	color: var(--wa-color-text-normal);
	font-size: 0.95rem;
}

.pricing-cta {
	width: 100%;
}

/* Popular pricing card elevation */

.pricing-popular {
	--wa-color-surface-border: var(--wa-color-brand-on-quiet);
}

@media (min-width: 1024px) {
	.pricing-popular {
		transform: scale(1.05);
		z-index: 1;
	}
}

/* --- Comparison Table --- */

.comparison-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.comparison-table {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	border-collapse: collapse;
	text-align: center;
}

.comparison-table th,
.comparison-table td {
	padding: var(--wa-space-s) var(--wa-space-m);
	border-bottom: 1px solid var(--wa-color-neutral-border-loud);
}

.comparison-table th {
	font-weight: 600;
	color: var(--wa-color-text-normal);
	font-size: 0.95rem;
}

.comparison-table td:first-child,
.comparison-table th:first-child {
	text-align: left;
}

.comparison-table td {
	color: var(--wa-color-text-quiet);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
}

.faq-list p {
	color: var(--wa-color-text-quiet);
	line-height: 1.65;
	padding: var(--wa-space-s) 0;
}

/* --- Auth Pages --- */

.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50vh;
}

.auth-card {
	width: 100%;
	max-width: 24rem;
}

.auth-header {
	text-align: center;
	margin-bottom: var(--wa-space-l);
}

.auth-icon {
	font-size: 2rem;
	color: var(--wa-color-neutral-on-quiet);
	margin-bottom: var(--wa-space-m);
}

.auth-header h1 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wa-color-text-normal);
	margin-bottom: var(--wa-space-xs);
}

.auth-header p {
	line-height: 1.5;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-m);
	padding: 0 var(--wa-space-l) var(--wa-space-s);
}

.auth-submit {
	width: 100%;
}

.auth-hint {
	text-align: center;
	font-size: 0.875rem;
	color: var(--wa-color-text-quiet);
	padding: var(--wa-space-s) var(--wa-space-l) var(--wa-space-l);
}

/* --- Dashboard --- */

.dashboard-hero {
	padding-bottom: 0;
}

.dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wa-space-m);
}

.dashboard-user-info {
	display: flex;
	align-items: center;
	gap: var(--wa-space-m);
}

.dashboard-user-icon {
	font-size: 2.5rem;
	color: var(--wa-color-neutral-on-quiet);
}

.dashboard-user-info h1 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wa-color-text-normal);
	margin: 0;
}

.dashboard-user-info p {
	margin: 0;
}

/* --- License Cards --- */

.licenses-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.licenses-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.license-card-inner {
	padding: var(--wa-space-l);
}

.license-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
}

.license-card-header h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wa-color-text-normal);
	margin: 0;
}

.license-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	padding: var(--wa-space-xs) 0;
}

.license-label {
	font-size: 0.875rem;
	color: var(--wa-color-text-quiet);
	flex-shrink: 0;
}

.license-value {
	color: var(--wa-color-text-normal);
	font-size: 0.925rem;
}

.license-key {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
}

.license-key code {
	font-family: var(--wa-font-family-code);
	font-size: 0.85rem;
	color: var(--wa-color-text-normal);
	background: var(--wa-color-surface-lowered);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: var(--wa-border-radius-s);
	word-break: break-all;
}

.license-pending {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-size: 0.875rem;
	color: var(--wa-color-text-quiet);
}

/* A revoked (refunded, disabled or expired) key: shown for reference only */
.license-revoked {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wa-space-2xs);
	text-align: end;
}

.license-key-revoked {
	text-decoration: line-through;
	color: var(--wa-color-text-quiet);
}

.license-key-revoked code {
	font-family: var(--wa-font-family-code);
	font-size: 0.85rem;
	color: var(--wa-color-text-quiet);
	word-break: break-all;
}

.license-revoked-note {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-size: 0.875rem;
	color: var(--wa-color-danger-on-quiet);
}

/* --- Account Details --- */

.account-details {
	max-width: 32rem;
}

.account-card-inner {
	padding: var(--wa-space-l);
}

.account-card-inner h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wa-color-text-normal);
	margin: 0 0 var(--wa-space-s);
}

.account-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wa-space-s) 0;
}

.account-label {
	font-size: 0.925rem;
	color: var(--wa-color-text-quiet);
}

.account-value {
	font-size: 0.925rem;
	color: var(--wa-color-text-normal);
	font-weight: 500;
}

/* --- Empty State --- */

.empty-state {
	text-align: center;
	padding: var(--wa-space-4xl) var(--wa-space-l);
}

.empty-icon {
	font-size: 3rem;
	color: var(--wa-color-text-quiet);
	margin-bottom: var(--wa-space-m);
}

.empty-state h2 {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wa-color-text-normal);
	margin-bottom: var(--wa-space-s);
}

.empty-state p {
	margin-bottom: var(--wa-space-l);
}

/* --- Skeleton Grid --- */

.skeleton-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wa-space-l);
}

@media (min-width: 640px) {
	.skeleton-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.skeleton-grid wa-skeleton {
	height: 1.25rem;
	margin-bottom: var(--wa-space-m);
	border-radius: var(--wa-border-radius-s);
}

.skeleton-grid wa-skeleton:last-child {
	margin-bottom: 0;
	width: 60%;
}

/* --- Header Nav: tablet width (#69) ---
 * The desktop nav carries seven links. Below 64em, tighten the gap so they fit
 * on one row. The breakpoints are em-based so a larger browser default font
 * hands the nav to the drawer before the header overflows the viewport.
 */

@media (max-width: 63.9375em) {
	.desktop-nav {
		gap: var(--wa-space-2xs);
	}
}

/* --- Notifications (#1004) ---
 * site/js/notify.js renders a wa-callout into a fixed visible stack and the
 * message text alone into two visually hidden live regions. Each item sits on an opaque raised surface so the callout stays legible over
 * page content in both themes; colors come from the callout's own variant tokens.
 */

.notify-region {
	position: fixed;
	inset-block-end: var(--wa-space-l);
	inset-inline-end: var(--wa-space-l);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
	width: min(24rem, calc(100vw - 2 * var(--wa-space-l)));
	pointer-events: none;
}

.notify-region:empty {
	display: none;
}

.notify-item {
	position: relative;
	pointer-events: auto;
	background: var(--wa-color-surface-raised);
	border-radius: var(--wa-border-radius-m);
	box-shadow: var(--wa-shadow-l);
	animation: notify-in 160ms ease-out;
}

.notify-item wa-callout {
	margin: 0;
	padding-inline-end: calc(var(--wa-space-l) + var(--wa-space-m));
}

.notify-close {
	position: absolute;
	inset-block-start: var(--wa-space-xs);
	inset-inline-end: var(--wa-space-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
	border: none;
	border-radius: var(--wa-border-radius-s);
	background: transparent;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	cursor: pointer;
}

.notify-close:hover {
	color: var(--wa-color-text-normal);
	background: var(--wa-color-neutral-fill-quiet);
}

.notify-close:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

/* <main> receives programmatic focus only as a landing spot after a focused
 * notification is dismissed; it is not interactive, so no ring. */
.notify-focus-fallback:focus {
	outline: none;
}

@keyframes notify-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.notify-item {
		animation: none;
	}
}

@media (max-width: 40em) {
	.notify-region {
		inset-inline: var(--wa-space-m);
		inset-block-end: var(--wa-space-m);
		width: auto;
	}
}

/* --- #70: docs waitlist CTAs (replace dead Coming-soon surfaces) --- */
.docs-card-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin-top: var(--wa-space-s);
	color: var(--wa-color-brand-on-quiet);
	font-weight: var(--wa-font-weight-semibold);
}

.launch-updates-callout p {
	margin: 0 0 var(--wa-space-s);
}

/* --- Account link and seat note (#76) --- */

/* The header account icon is desktop-only; the mobile drawer has its own link */
@media (max-width: 48em) {
	.desktop-only {
		display: none;
	}
}

.license-seat-note {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}

/* #61: contact form honeypot. Kept in the layout but moved off-screen (not
 * display:none, which some bots skip) and clipped; aria-hidden on the wrapper
 * and tabindex="-1" on the input keep it away from assistive tech and the
 * keyboard. */
.form-hp {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Frontend polish (#71) --- */

/* Initial-load cloak. The kit adds `wa-cloak` to <html> and ships a
   `.wa-cloak:has(:not(:defined))` rule, but the kit script is deferred, so
   that rule only exists after first paint, and it re-runs (blanking the whole
   page) whenever script later inserts a component type that is not loaded
   yet. This replaces it with a cloak that covers only the initial load:
   - from first paint, the page is transparent while any component is
     undefined, for at most 2s (step-end, so it always ends visible: a slow or
     unreachable CDN cannot hide the page for good);
   - main.js latches `site-ready` on <html> once the components present at
     load are defined, or after 2s, and from then on no cloak applies, the
     kit's included (an unlayered rule beats the kit's layered one);
   - scoped to scripting-enabled browsers: without JS nothing defines the
     components and nothing would latch. */
@media (scripting: enabled) {
	html:not(.site-ready):has(:not(:defined)) {
		animation: 2s step-end site-fouce-cloak;
	}
}

html.site-ready {
	animation: none;
}

@keyframes site-fouce-cloak {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Text for assistive technology only (e.g. naming which product a
   "Learn more" link leads to, or notify.js's live-region announcers). */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link: off-screen until focused, then pinned above the sticky header.
   Every token has a fallback: the tokens come from the kit's theme CSS, and
   without them (CDN down, or before the deferred theme arrives) the link must
   still stay hidden until focused. The fallback colors are CSS system colors. */
.skip-link {
	position: fixed;
	top: var(--wa-space-s, 0.75rem);
	left: var(--wa-space-s, 0.75rem);
	z-index: 1000;
	padding: var(--wa-space-xs, 0.5rem) var(--wa-space-m, 1rem);
	border-radius: var(--wa-border-radius-m, 0.375rem);
	background: var(--wa-color-surface-default, Canvas);
	color: var(--wa-color-text-link, LinkText);
	font-weight: var(--wa-font-weight-semibold, 600);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	outline: var(--wa-focus-ring, 2px solid currentColor);
	outline-offset: var(--wa-focus-ring-offset, 2px);
}

/* Following the skip link must not leave the start of main under the sticky
   header: .header-inner's 4rem plus .site-header's 1px bottom border. */
#main-content {
	scroll-margin-top: calc(4rem + 1px);
}

/* A button that reads as an inline text link (the login "Send again" control). */
.link-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wa-color-text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.link-button:hover {
	text-decoration: none;
}

.link-button:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

.link-button[aria-disabled='true'] {
	cursor: progress;
	opacity: 0.6;
}