/**
 * components.css — the .att-* component layer (design-system.md §4).
 * Token-only values. No gradients anywhere in this file, by design.
 */

/* ===================================================================
 * Buttons
 * =================================================================== */

.att-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--at-space-2);
	min-height: var(--att-tap-min);
	padding: var(--att-btn-pad-y) var(--att-btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--att-btn-radius);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-medium);
	line-height: var(--at-leading-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--at-duration-fast) var(--at-ease),
		color var(--at-duration-fast) var(--at-ease);
}

/*
 * GeneratePress ships a generic gray button:hover/:focus (#3f3f3f fill,
 * white text) at (0,1,1) specificity. It must never reach a theme control:
 * this rule resets the generic states for every .att-* <button> at the same
 * specificity (:where zeroes the selector list), later in the cascade, so GP
 * loses. Every component then styles its own states deliberately below —
 * each state rule covers :focus as well as :hover, because this reset would
 * otherwise strip a filled button while it holds click focus.
 */
button:where([class^="att-"], [class*=" att-"]):hover,
button:where([class^="att-"], [class*=" att-"]):focus,
button:where([class^="att-"], [class*=" att-"]):active {
	background-color: transparent;
	color: inherit;
}

.att-btn--primary {
	background-color: var(--at-ink-800);
	color: var(--att-surface-inverse-fg);
}

.att-btn--primary:hover,
.att-btn--primary:focus {
	background-color: var(--at-ink-900);
	color: var(--att-surface-inverse-fg);
}

.att-btn--secondary {
	border-color: var(--at-ink-800);
	background-color: transparent;
	color: var(--at-ink-800);
}

.att-btn--secondary:hover,
.att-btn--secondary:focus {
	background-color: var(--at-ink-800);
	color: var(--att-surface-inverse-fg);
}

.att-btn--on-inverse {
	background-color: var(--att-surface-inverse-fg);
	color: var(--at-ink-800);
}

.att-btn--on-inverse:hover,
.att-btn--on-inverse:focus {
	background-color: var(--at-paper-100);
	color: var(--at-ink-900);
}

.att-btn--block {
	width: 100%;
}

.att-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-4);
	margin-bottom: var(--at-space-4);
}

/* ===================================================================
 * Screenshot frame — design-system.md §4.8
 * =================================================================== */

/* Box budget (design-polish-plan.md P1.1): the white mat + shadow IS the
 * frame — no border on top of it. */
.att-shot {
	margin: 0;
	padding: var(--att-shot-mat);
	border-radius: var(--att-card-radius);
	background-color: var(--att-surface-card);
	box-shadow: var(--at-shadow-md);
}

.att-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--at-radius-sm);
}

.att-shot figcaption {
	margin-top: var(--att-shot-mat);
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

/*
 * Illustrative variant. A staged vector render may appear ONLY here. The
 * label is generated content in the caption AND a real text node in the
 * markup, so it survives CSS being unavailable. Never used in the hero.
 */
.att-shot--illustrative {
	border: var(--at-border-width) dashed var(--at-neutral-400);
	box-shadow: var(--at-shadow-none);
}

.att-shot__status {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-2);
	margin-bottom: var(--att-shot-mat);
	padding: var(--at-space-1) var(--at-space-2);
	border: 1px solid var(--at-warning);
	border-radius: var(--at-radius-sm);
	background-color: var(--at-warning-bg);
	color: var(--at-warning);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-xs);
	font-weight: var(--at-weight-bold);
	line-height: var(--at-leading-snug);
	letter-spacing: var(--att-eyebrow-tracking);
	text-transform: uppercase;
}

/* ===================================================================
 * Hero — design-system.md §4.2
 * =================================================================== */

.att-hero {
	padding-block: var(--att-section-y-sm);
	background-color: var(--att-surface-page);
}

.att-hero__inner {
	display: grid;
	gap: var(--att-row-gap);
	grid-template-columns: 1fr;
	align-items: center;
}

/* Clamps 39px -> 56px across viewports (P1.3); no media override needed. */
.att-hero h1 {
	font-size: var(--att-hero-h1-size);
	line-height: var(--att-display-leading);
}

.att-hero__copy > :last-child {
	margin-bottom: 0;
}

.att-hero__reversal {
	max-width: var(--at-measure);
	margin-bottom: 0;
	color: var(--at-color-text-muted);
	font-size: var(--at-size-sm);
}

.att-hero--plain .att-hero__inner {
	grid-template-columns: 1fr;
	max-width: var(--att-hero-max);
}

@media (min-width: 48em) {
	.att-hero {
		padding-block: var(--att-section-y);
	}
}

@media (min-width: 64em) {
	.att-hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--at-space-8);
	}

}

/* ===================================================================
 * Proof strip — design-system.md §4.3 (renders nothing when empty)
 * =================================================================== */

.att-proof {
	display: grid;
	gap: var(--att-grid-gap);
	grid-template-columns: repeat(2, 1fr);
	padding: 0;
	margin: 0;
	list-style: none;
}

.att-proof__figure {
	display: block;
	font-family: var(--at-font-mono);
	font-size: var(--at-size-xl);
	line-height: var(--at-leading-snug);
	color: var(--at-ink-800);
}

.att-proof__label {
	display: block;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

@media (min-width: 48em) {
	.att-proof {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ===================================================================
 * Three-step walkthrough — design-system.md §4.4
 * =================================================================== */

.att-steps {
	display: flex;
	flex-direction: column;
	gap: var(--att-section-y-sm);
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: att-step;
}

.att-step {
	display: grid;
	gap: var(--att-row-gap);
	grid-template-columns: 1fr;
	align-items: center;
	max-width: none;
}

.att-step__num {
	display: inline-block;
	margin-bottom: var(--at-space-3);
	/* Ink (P1.6): the sales view's one stamp use is the evidence trail. */
	color: var(--at-ink-600);
	font-family: var(--at-font-mono);
	font-size: var(--at-size-sm);
	font-weight: var(--at-weight-bold);
	letter-spacing: var(--att-eyebrow-tracking);
}

.att-step__copy > :last-child {
	margin-bottom: 0;
}

@media (min-width: 64em) {
	.att-step {
		grid-template-columns: 5fr 7fr;
		gap: var(--at-space-8);
	}

	.att-step--flip .att-step__copy {
		order: 2;
	}

	.att-step--flip .att-step__media {
		order: 1;
	}
}

/* ===================================================================
 * Feature rows — design-system.md §4.5 (asymmetric, alternating)
 * =================================================================== */

.att-row {
	display: grid;
	gap: var(--att-row-gap);
	grid-template-columns: 1fr;
	align-items: center;
	padding-block: var(--at-space-6);
}

/* Rows separate by whitespace alone — the hairline between them was one more
 * rule in an already-ruled page (P1.1). */

.att-row__copy > :last-child {
	margin-bottom: 0;
}

@media (min-width: 64em) {
	.att-row {
		grid-template-columns: 7fr 5fr;
		gap: var(--at-space-8);
		padding-block: var(--at-space-7);
	}

	.att-row--flip {
		grid-template-columns: 5fr 7fr;
	}

	.att-row--flip .att-row__copy {
		order: 2;
	}

	.att-row--flip .att-row__media {
		order: 1;
	}
}

/* ===================================================================
 * Capability grid — design-system.md §4.6
 * =================================================================== */

.att-grid {
	display: grid;
	gap: var(--att-grid-gap);
	grid-template-columns: 1fr;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* No top rule per item (P1.1) — the icon + bold title give each cell its own
 * anchor; sixteen ruled cells read as a ledger, not a grid. */
.att-grid__item {
	max-width: none;
	margin: 0;
}

.att-grid__item h3 {
	margin-bottom: var(--at-space-2);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-bold);
}

.att-grid__item p {
	margin-bottom: 0;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-icon {
	display: block;
	width: var(--at-space-5);
	height: var(--at-space-5);
	margin-bottom: var(--at-space-3);
	/* Ink, not stamp (P1.6 accent discipline): sixteen orange icons made the
	 * accent wallpaper. The stamp is rationed to one focal use per view. */
	color: var(--at-ink-600);
}

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

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

/* ===================================================================
 * Evidence block — design-system.md §4.7 (the one owned illustration)
 * =================================================================== */

/* White surface + shadow, no border (P1.1) — this panel is the page's one
 * owned illustration and its accent use; it earns the elevation. */
.att-evidence {
	padding: var(--att-card-pad);
	border-radius: var(--att-card-radius);
	background-color: var(--att-surface-card);
	box-shadow: var(--at-shadow-md);
}

.att-evidence__title {
	margin-bottom: var(--at-space-4);
	font-family: var(--att-font-display);
	font-size: var(--at-size-lg);
	font-weight: var(--at-weight-bold);
	color: var(--at-ink-800);
}

.att-evidence__list {
	position: relative;
	padding-left: var(--at-space-6);
	margin: 0;
	list-style: none;
}

/* The trail: a single vertical connector in the accent color. */
.att-evidence__list::before {
	content: "";
	position: absolute;
	top: var(--at-space-2);
	bottom: var(--at-space-2);
	left: var(--at-space-2);
	width: 2px;
	background-color: var(--at-stamp-600);
}

.att-evidence__node {
	position: relative;
	max-width: none;
	margin-bottom: var(--at-space-5);
}

.att-evidence__node:last-child {
	margin-bottom: 0;
}

.att-evidence__node::before {
	content: "";
	position: absolute;
	top: var(--at-space-2);
	left: calc(-1 * var(--at-space-6) + var(--at-space-1));
	width: var(--at-space-2);
	height: var(--at-space-2);
	border: 2px solid var(--at-stamp-600);
	border-radius: var(--at-radius-pill);
	background-color: var(--att-surface-card);
}

.att-evidence__time,
.att-evidence__hash {
	display: block;
	font-family: var(--at-font-mono);
	font-size: var(--at-size-sm);
	line-height: var(--at-leading-normal);
	color: var(--at-color-text-muted);
	overflow-wrap: anywhere;
}

.att-evidence__event {
	display: block;
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-medium);
	color: var(--at-color-text);
}

.att-evidence__note {
	margin-top: var(--at-space-4);
	margin-bottom: 0;
	padding-top: var(--at-space-4);
	border-top: var(--at-rule);
	font-size: var(--at-size-xs);
	color: var(--at-color-text-muted);
}

/* Status pills — always carry their own label text. */
.att-status {
	display: inline-block;
	padding: var(--at-space-1) var(--at-space-2);
	border-radius: var(--at-radius-sm);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-xs);
	font-weight: var(--at-weight-bold);
	line-height: var(--at-leading-snug);
}

.att-status--approved {
	background-color: var(--at-success-bg);
	color: var(--at-success);
}

.att-status--changes {
	background-color: var(--at-danger-bg);
	color: var(--at-danger);
}

.att-status--waiting {
	background-color: var(--at-warning-bg);
	color: var(--at-warning);
}

/* ===================================================================
 * Pricing — design-system.md §4.9
 * =================================================================== */

.att-pricing {
	display: grid;
	/* 32px, one step above the default grid gap (P1.4) — four columns need
	 * more air than a capability grid. */
	gap: var(--at-space-6);
	grid-template-columns: 1fr;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Tiers KEEP their border — the box budget spends its one border style here,
 * where boxes separate like from like (P1.1). */
.att-tier {
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding: var(--att-card-pad);
	border: var(--att-card-border);
	border-top: var(--at-border-strong) solid var(--at-color-border);
	border-radius: var(--att-card-radius);
	background-color: var(--att-surface-card);
}

/* Marked tier: a 2px accent top rule and a plain label. No scale, no shadow
 * lift, no ribbon (design-system.md §4.9). */
.att-tier--marked {
	border-top-color: var(--at-stamp-600);
}

.att-tier__flag {
	margin-bottom: var(--at-space-2);
	color: var(--at-stamp-600);
	font-size: var(--at-size-xs);
	font-weight: var(--at-weight-bold);
	letter-spacing: var(--att-eyebrow-tracking);
	text-transform: uppercase;
}

.att-tier__name {
	margin-bottom: var(--at-space-2);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-lg);
	font-weight: var(--at-weight-bold);
}

.att-tier__price {
	display: block;
	margin-bottom: var(--at-space-1);
	font-family: var(--att-font-display);
	font-size: var(--at-size-2xl);
	font-weight: var(--at-weight-bold);
	line-height: var(--att-display-leading);
	color: var(--at-ink-800);
}

.att-tier__period,
.att-tier__sites {
	display: block;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-tier__sites {
	margin-bottom: var(--at-space-4);
}

.att-tier__audience {
	margin-bottom: var(--at-space-4);
	font-size: var(--at-size-sm);
}

/*
 * No margin-top: auto here. Pinning the CTA to the bottom of the stretched
 * card dragged the includes list (which follows it in the DOM) down with it,
 * leaving the three shorter paid columns mostly whitespace at the top.
 * Content top-aligns; the tall Free column sets the row height.
 */
.att-tier__cta {
	margin-top: 0;
}

.att-tier__cta .att-btn {
	width: 100%;
}

.att-tier__alt {
	display: block;
	margin-top: var(--at-space-2);
	font-size: var(--at-size-sm);
	text-align: center;
}

.att-tier__includes {
	padding-left: 0;
	margin-top: var(--at-space-5);
	margin-bottom: var(--at-space-5);
	list-style: none;
	border-top: var(--at-rule);
	padding-top: var(--at-space-4);
}

.att-tier__includes li {
	max-width: none;
	padding-left: var(--at-space-5);
	font-size: var(--at-size-sm);
	text-indent: calc(-1 * var(--at-space-5));
}

/*
 * The include/exclude marker. It shipped clipped to a 1x1px box, which made
 * every feature line render as unstyled text and the "does not include" list
 * visually identical to the "includes" list. It is now a real, visible glyph
 * with a color that carries meaning, and the screen-reader wording is a
 * separate visually-hidden span so the meaning is never color-only.
 */
.att-tier__includes li::before {
	content: "\2713";
	display: inline-block;
	width: var(--at-space-5);
	margin-left: calc(-1 * var(--at-space-5));
	color: var(--at-success, #2F6B3D);
	font-family: var(--att-font-ui);
	font-weight: var(--at-weight-bold);
	text-indent: 0;
}

.att-tier__excludes li {
	color: var(--at-color-text-muted);
}

.att-tier__excludes li::before {
	content: "\00D7";
	color: var(--at-neutral-600, #5B5750);
}

/* --- Buy form -------------------------------------------------------- */

.att-buy {
	margin: 0;
}

.att-tier__cta .att-buy {
	width: 100%;
}

.att-buy__guarantee {
	max-width: none;
	margin-top: var(--at-space-2);
	margin-bottom: 0;
	color: var(--at-color-text-muted);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
	line-height: var(--at-leading-snug);
}

.att-tier__cta .att-buy__guarantee,
.att-btn-group--buy + .att-buy__guarantee {
	text-align: center;
}

.att-btn-group--buy {
	align-items: flex-start;
}

.att-btn-group--buy .att-buy .att-btn {
	margin: 0;
}

.att-btn--sm {
	min-height: auto;
	padding: var(--at-space-2) var(--at-space-3);
	font-size: var(--at-size-sm);
}

.att-btn--on-inverse-outline {
	border-color: var(--att-surface-inverse-fg);
	background-color: transparent;
	color: var(--att-surface-inverse-fg);
}

.att-btn--on-inverse-outline:hover,
.att-btn--on-inverse-outline:focus {
	background-color: var(--att-surface-inverse-fg);
	color: var(--at-ink-900);
}

/* --- Header navigation ----------------------------------------------- */

.att-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--at-space-3);
}

.att-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--at-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.att-nav__list li {
	margin: 0;
	max-width: none;
}

.att-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--att-tap-min);
	padding: var(--at-space-2) var(--at-space-3);
	border-radius: var(--att-btn-radius);
	color: var(--at-ink-800);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-medium);
	line-height: var(--at-leading-snug);
	text-decoration: none;
}

.att-nav__list a:hover,
.att-nav__list a:focus-visible {
	background-color: var(--at-neutral-100);
	text-decoration: underline;
}

.att-nav__list a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

/* The site title is replaced by the wordmark; showing both is noise. */
.site-header .main-title,
.site-header .site-description {
	display: none;
}

.site-header .site-logo img {
	max-height: var(--at-space-6);
	width: auto;
}

.att-docs__help {
	margin-top: var(--at-space-6);
	padding-top: var(--at-space-4);
	border-top: var(--at-rule);
	color: var(--at-color-text-muted);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
}

@media (min-width: 48em) {
	.att-pricing {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 80em) {
	.att-pricing {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Checkout hand-off failure note (assets/js/checkout.js). */
.att-buy__error {
	margin: var(--at-space-2) 0 0;
	color: var(--at-danger);
	font-size: var(--at-size-sm);
}

/* Tooltip disclosure — button + aria-expanded, never hover-only title. */
.att-tip {
	display: inline;
}

.att-tip__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--att-tap-min);
	min-height: var(--att-tap-min);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--at-ink-600);
	font-size: var(--at-size-sm);
	font-weight: var(--at-weight-bold);
	text-decoration: underline;
	cursor: pointer;
	transition: color var(--at-duration-fast) var(--at-ease);
}

/* Hover/focus: darken + thicken the underline. Never a background fill —
 * a 44px transparent hit target with GP's gray fill is a black blob. */
.att-tip__toggle:hover,
.att-tip__toggle:focus-visible,
.att-tip__toggle[aria-expanded="true"] {
	background: transparent;
	color: var(--at-ink-800);
	text-decoration-thickness: 2px;
}

/* Tint only — no border, no accent bar (P1.1 note treatment). */
.att-tip__body {
	display: block;
	max-width: var(--at-measure);
	margin-top: var(--at-space-2);
	padding: var(--at-space-3) var(--at-space-4);
	border-radius: var(--at-radius-md);
	background-color: var(--att-surface-band);
	font-size: var(--at-size-sm);
	color: var(--at-color-text);
}

/* Inside a tinted note (the pricing footnote) the tip body flips to the card
 * surface, or tint-on-tint would make it invisible. */
.att-note .att-tip__body {
	background-color: var(--att-surface-card);
}

.att-tip__body[hidden] {
	display: none;
}

/*
 * Labeled variant: the question is visible text on the toggle, not
 * screen-reader-only. Three bare "?" buttons in a row gave a sighted reader
 * nothing to go on and the last one wrapped onto its own line.
 */
.att-tip--labelled {
	display: block;
}

.att-tip--labelled .att-tip__toggle {
	justify-content: flex-start;
	gap: var(--at-space-1);
	min-width: 0;
	color: var(--at-color-text);
	text-align: left;
}

.att-tip--labelled .att-tip__toggle .att-tip__mark {
	color: var(--at-ink-600);
	font-weight: var(--at-weight-bold);
}

.att-tip--labelled .att-tip__toggle:hover,
.att-tip--labelled .att-tip__toggle:focus-visible,
.att-tip--labelled .att-tip__toggle[aria-expanded="true"] {
	color: var(--at-ink-800);
}

.att-tip--labelled .att-tip__toggle:hover .att-tip__mark,
.att-tip--labelled .att-tip__toggle:focus-visible .att-tip__mark,
.att-tip--labelled .att-tip__toggle[aria-expanded="true"] .att-tip__mark {
	color: var(--at-ink-800);
}

/* ===================================================================
 * Trust trio — design-system.md §4.10
 * =================================================================== */

.att-trust {
	display: grid;
	gap: var(--att-grid-gap);
	grid-template-columns: 1fr;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* No top rules (P1.1) — three ruled stubs below a table looked like more
 * table. Whitespace and the bold titles carry the trio. */
.att-trust__item {
	max-width: none;
	margin: 0;
}

.att-trust__item h3 {
	margin-bottom: var(--at-space-2);
	font-size: var(--at-size-base);
}

.att-trust__item p {
	margin-bottom: 0;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

@media (min-width: 48em) {
	.att-trust {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===================================================================
 * Pull-quote — design-system.md §4.11 (omitted entirely until real)
 * =================================================================== */

.att-quote {
	max-width: var(--at-measure);
	margin: 0;
	padding-left: var(--at-space-5);
	border-left: var(--at-border-strong) solid var(--at-stamp-600);
}

.att-quote blockquote {
	padding-left: 0;
	border-left: 0;
	margin-bottom: var(--at-space-3);
}

.att-quote figcaption {
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
}

/* ===================================================================
 * FAQ — design-system.md §4.12 (native details/summary)
 * =================================================================== */

.att-faq {
	max-width: var(--at-measure);
}

.att-faq__item {
	border-bottom: 1px solid var(--att-hairline);
}

.att-faq__item summary {
	display: block;
	min-height: var(--att-tap-min);
	padding: var(--at-space-4) var(--at-space-6) var(--at-space-4) 0;
	position: relative;
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-medium);
	color: var(--at-ink-800);
	cursor: pointer;
}

.att-faq__item summary::-webkit-details-marker {
	display: none;
}

.att-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: var(--at-space-4);
	font-family: var(--at-font-mono);
	/* Neutral (P1.6): a dozen orange +s competed with the page's one CTA. */
	color: var(--at-neutral-600);
}

.att-faq__item[open] summary::after {
	content: "\2212";
}

.att-faq__answer {
	padding-bottom: var(--at-space-4);
}

.att-faq__answer > :last-child {
	margin-bottom: 0;
}

/* ===================================================================
 * Comparison table — design-system.md §4.13
 * =================================================================== */

/* Table treatment (P1.7): white surface, no outer border, zebra rows at a
 * ~2% tint, labels left-aligned. The rows carry the structure. */
.att-compare {
	background-color: var(--att-surface-card);
	border-radius: var(--att-card-radius);
	box-shadow: var(--at-shadow-sm);
	overflow: hidden;
}

.att-compare table {
	margin-bottom: 0;
}

.att-compare th,
.att-compare td {
	text-align: left;
}

.att-compare thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--at-neutral-100);
	font-size: var(--at-size-sm);
}

.att-compare tbody tr:nth-child(even) {
	background-color: var(--at-paper-50);
}

.att-compare tbody th {
	font-weight: var(--at-weight-medium);
}

.att-compare td {
	font-size: var(--at-size-sm);
}

.att-compare__footnote {
	max-width: var(--at-measure);
	margin-top: var(--at-space-4);
	font-size: var(--at-size-xs);
	color: var(--at-color-text-muted);
}

/* Below 48em the table becomes stacked row groups, not a scroll box. */
@media (max-width: 47.999em) {
	.att-compare table,
	.att-compare thead,
	.att-compare tbody,
	.att-compare tr,
	.att-compare th,
	.att-compare td {
		display: block;
		width: 100%;
	}

	.att-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.att-compare tbody tr {
		padding: var(--at-space-4);
		border-bottom: var(--at-rule);
	}

	.att-compare tbody th {
		padding: 0 0 var(--at-space-2);
		border: 0;
		font-weight: var(--at-weight-bold);
		color: var(--at-ink-800);
	}

	.att-compare tbody td {
		padding: var(--at-space-1) 0;
		border: 0;
	}

	.att-compare tbody td::before {
		content: attr(data-label) ": ";
		font-weight: var(--at-weight-medium);
		color: var(--at-color-text-muted);
	}
}

/* ===================================================================
 * Closing CTA band — design-system.md §4.15
 * =================================================================== */

.att-cta-band {
	padding-block: var(--att-section-y-sm);
	background-color: var(--att-surface-inverse);
	color: var(--att-surface-inverse-fg);
}

.att-cta-band h2 {
	max-width: var(--at-measure);
	color: var(--att-surface-inverse-fg);
}

.att-cta-band p {
	max-width: var(--at-measure);
	color: var(--at-paper-100);
}

.att-cta-band a:not(.att-btn) {
	color: var(--at-stamp-400);
}

.att-cta-band a:not(.att-btn):hover {
	color: var(--att-surface-inverse-fg);
}

@media (min-width: 48em) {
	.att-cta-band {
		padding-block: var(--att-section-y);
	}
}

/* ===================================================================
 * Docs layout — design-system.md §4.14
 * =================================================================== */

.att-docs {
	display: grid;
	gap: var(--att-row-gap);
	grid-template-columns: 1fr;
}

.att-docs__nav ul {
	padding-left: 0;
	list-style: none;
}

.att-docs__nav li {
	margin-bottom: var(--at-space-1);
}

.att-docs__nav a {
	display: block;
	min-height: var(--att-tap-min);
	padding: var(--at-space-2) var(--at-space-3);
	border-radius: var(--att-btn-radius);
	font-size: var(--at-size-sm);
	text-decoration: none;
}

.att-docs__nav a:hover {
	background-color: var(--at-neutral-100);
	text-decoration: underline;
}

.att-docs__body {
	max-width: var(--at-container-narrow);
}

.att-doc-card {
	display: block;
	max-width: none;
	margin: 0;
	padding: var(--att-card-pad);
	border-radius: var(--att-card-radius);
	background-color: var(--att-surface-card);
	box-shadow: var(--at-shadow-sm);
	text-decoration: none;
	transition: box-shadow var(--at-duration-base) var(--at-ease),
		transform var(--at-duration-base) var(--at-ease);
}

/* Interactive-card lift (P1.2): 1px rise + one shadow step. Guarded so a
 * reduced-motion user gets the shadow change with no movement. */
.att-doc-card:hover,
.att-doc-card:focus-visible {
	box-shadow: var(--at-shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
	.att-doc-card:hover,
	.att-doc-card:focus-visible {
		transform: translateY(-1px);
	}
}

.att-doc-card h3 {
	margin-bottom: var(--at-space-2);
	font-size: var(--at-size-base);
	text-decoration: underline;
}

.att-doc-card p {
	margin-bottom: 0;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-breadcrumbs {
	padding-block: var(--at-space-4);
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-2);
	padding-left: 0;
	margin: 0;
	list-style: none;
}

.att-breadcrumbs li {
	margin-bottom: 0;
}

@media (min-width: 64em) {
	.att-docs {
		grid-template-columns: 16rem 1fr;
		gap: var(--at-space-8);
	}
}

/* ===================================================================
 * Cards, notes, meta
 * =================================================================== */

.att-card {
	max-width: none;
	padding: var(--att-card-pad);
	border-radius: var(--att-card-radius);
	background-color: var(--att-surface-card);
	box-shadow: var(--at-shadow-sm);
}

/* Tint only — no box, no left bar (P1.1 note treatment). */
.att-note {
	max-width: var(--at-measure);
	padding: var(--at-space-4) var(--at-space-5);
	border-radius: var(--at-radius-md);
	background-color: var(--att-surface-band);
	font-size: var(--at-size-sm);
}

/*
 * Under the four-column pricing grid the measure-width note read as a
 * misaligned sliver; there it spans the grid instead.
 */
.att-note--wide {
	max-width: none;
}

.att-updated {
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-space-3);
	max-width: var(--at-container-narrow);
}

.att-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.att-changelog__entry {
	padding-block: var(--at-space-5);
	border-bottom: 1px solid var(--att-hairline);
}

.att-changelog__version {
	font-family: var(--at-font-mono);
	font-size: var(--at-size-base);
	color: var(--at-ink-800);
}

/* --- Guarantee band ---------------------------------------------------
 *
 * The 14-day money-back guarantee was a cell in a two-item grid below the
 * tiers, where it did no work. It is the single strongest risk-reversal the
 * product has, so it gets its own band directly above the closing CTA, in a
 * first-person voice with a name and an address attached to it.
 */

.att-guarantee {
	padding-block: var(--att-section-y-sm);
	background-color: var(--att-surface-band);
}

.att-guarantee__inner {
	max-width: var(--at-measure-wide, 44rem);
	border-left: 3px solid var(--at-stamp-600, var(--at-ink-800));
	padding-left: var(--at-space-5);
}

.att-guarantee__title {
	margin-top: 0;
	font-size: var(--at-size-2xl);
}

.att-guarantee p {
	max-width: var(--at-measure);
}

.att-guarantee__sig {
	margin-bottom: 0;
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

@media (min-width: 48em) {
	.att-guarantee {
		padding-block: var(--att-section-y);
	}
}

/* ===================================================================
 * Compatibility bar + launch-state note
 *
 * The trust substitute for a product with no install count yet. Mono
 * figures so it reads as spec, not as a claim.
 * =================================================================== */

.att-compat__heading {
	margin-top: 0;
	margin-bottom: var(--at-space-4);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--at-color-text-muted);
}

.att-compat__list {
	display: grid;
	gap: var(--at-space-4) var(--at-space-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 var(--at-space-5);
	padding-top: var(--at-space-4);
	border-top: var(--at-border-strong) solid var(--att-hairline);
}

.att-compat__item dt {
	margin: 0;
	font-family: var(--att-font-ui);
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

.att-compat__item dd {
	margin: 0;
	font-family: var(--att-font-mono, monospace);
	font-size: var(--at-size-base);
	color: var(--at-color-text);
}

.att-compat__note {
	max-width: var(--at-measure);
	margin-bottom: 0;
	font-size: var(--at-size-sm);
	color: var(--at-color-text-muted);
}

@media (min-width: 48em) {
	.att-compat__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}