/* Plot public site — the component kit the block patterns in ../patterns/ are
   made of.

   Every value here resolves to a custom property theme.json already declares,
   because the palette lives in one file and a colour typed twice drifts. There
   are deliberately no hex literals below: if a component needs a colour that
   has no token, that is a signal the token set is wrong and it goes back to
   DESIGN.md at the repo root, not into this stylesheet.

   Class names carry a plot- prefix throughout. Blocksy is a general-purpose
   parent theme and owns short names like .hero and .list, so an unprefixed
   selector here would either lose to it or silently restyle its chrome.

   Spacing is padding and flex gap, never a block-axis margin. WordPress's
   layout support emits `body .is-layout-flow > *` and per-container
   `> * + *` rules that set margin-block on every direct child of a group
   block, at a specificity these single-class selectors cannot beat and from a
   stylesheet that loads later. A margin-top here would simply not apply.

   Light only, by decision (02F-CONTEXT.md). No dark ramp in this phase.
   Shape from docs/architecture/ui/public.css, which is the concept and not
   production CSS — where the two disagree, the note says which won and why. */


/* ---------- type-scale aliases ---------------------------------------- */

/* WordPress kebab-cases a preset slug on its way to a custom property, and its
   transform splits a letter from an adjacent digit: a slug of h2 arrives as
   --wp--preset--font-size--h-2, never --h2. That silently cost every heading
   its size once already, so the slugs in theme.json are now heading-2,
   heading-3 and prose-heading, which carry their own separator and survive the
   transform unchanged. The older spellings stay here as fallbacks so a stale
   theme.json on a volume still resolves rather than collapsing to the parent
   theme's scale. The values themselves live in theme.json. */
:root {
	--plot-fs-hero: var(--wp--preset--font-size--hero);
	--plot-fs-lede: var(--wp--preset--font-size--lede);
	--plot-fs-h2: var(--wp--preset--font-size--heading-2, var(--wp--preset--font-size--h-2, var(--wp--preset--font-size--h2)));
	--plot-fs-h3: var(--wp--preset--font-size--heading-3, var(--wp--preset--font-size--h-3, var(--wp--preset--font-size--h3)));
	--plot-fs-prose-h2: var(--wp--preset--font-size--prose-heading, var(--wp--preset--font-size--prose-h-2, var(--wp--preset--font-size--prose-h2)));
}


/* ---------- shared text ---------------------------------------------- */

/* The small uppercase label above a heading. Sized in px rather than from the
   type scale: it is chrome, and shrinking it with the fluid scale would put it
   under 12px on a phone. */
.plot-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.plot-lede {
	margin: 0;
	max-width: 640px;
	font-size: var(--plot-fs-lede);
	line-height: 1.5;
	color: var(--ink-2);
}

/* The reading measure. 640px is where a 16px line lands near 70 characters. */
.plot-prose {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.plot-prose p {
	margin: 0;
	color: var(--ink-2);
}

.plot-prose h2 {
	margin: 0;
	font-size: var(--plot-fs-prose-h2);
}

/* Air above a new section, but not above the first one, which already has the
   page's own space above it. */
.plot-prose h2:not(:first-child) {
	padding-top: 28px;
}


/* ---------- buttons --------------------------------------------------- */

/* core/button puts className on the wrapping div, never on the anchor, so
   every rule has to reach through .wp-block-button__link. Height is --touch
   (44px), not the concept's 38px --control: the concept was drawn for a
   pointer and this phase's gate is a 44px tap target. */
.plot-btn--primary .wp-block-button__link,
.plot-btn--secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--touch);
	min-width: var(--touch);
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.plot-btn--primary .wp-block-button__link {
	background: var(--ink);
	color: var(--on-ink);
}

.plot-btn--primary .wp-block-button__link:hover,
.plot-btn--primary .wp-block-button__link:focus {
	background: var(--ink-2);
	color: var(--on-ink);
}

.plot-btn--secondary .wp-block-button__link {
	background: var(--sheet);
	border-color: var(--hair-3);
	color: var(--ink);
}

.plot-btn--secondary .wp-block-button__link:hover,
.plot-btn--secondary .wp-block-button__link:focus {
	background: var(--sheet-2);
	color: var(--ink);
}

/* Redline is the selection accent and never a fill, so it is the focus ring
   on every interactive thing this kit owns. */
.plot-btn--primary .wp-block-button__link:focus-visible,
.plot-btn--secondary .wp-block-button__link:focus-visible,
.plot-toggle button:focus-visible,
.plot-tiles a:focus-visible,
.plot-faq summary:focus-visible {
	outline: 2px solid var(--redline);
	outline-offset: 2px;
}


/* ---------- page hero ------------------------------------------------- */

.plot-page-hero {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 720px;
	padding-bottom: var(--wp--preset--spacing--60);
}

.plot-page-hero h1,
.plot-home-hero h1,
.plot-cta h2 {
	text-wrap: balance;
}

.plot-page-hero h1 {
	margin: 0;
}


/* ---------- home hero ------------------------------------------------- */

/* Type on sheet, centred, never a colour field: the one chromatic token is
   redline and redline is not a background. */
.plot-home-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: clamp(36px, 7vw, 80px);
	padding-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}

.plot-home-hero h1 {
	margin: 0;
	max-width: 920px;
	font-size: var(--plot-fs-hero);
}

.plot-home-hero .plot-lede {
	margin: 0 auto;
}

.plot-home-hero .wp-block-buttons {
	justify-content: center;
}

.plot-trust {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}


/* ---------- stat band ------------------------------------------------- */

/* Four figures on the home page, two by two on methodology via --2up. The
   grid is set here rather than with core columns so the figures keep a shared
   baseline when one label wraps to three lines and its neighbours do not. */
.plot-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
}

.plot-stats--2up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plot-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.plot-stat__figure {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

/* The unit rides on the figure at reading weight so "500 m" is one number and
   one unit, not two numbers. */
.plot-stat__figure .plot-unit {
	font-size: 18px;
	font-weight: 500;
	color: var(--ink-4);
}

.plot-stat__label {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}


/* ---------- fingerprint bars ------------------------------------------ */

.plot-fingerprint {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.plot-fingerprint__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.plot-fingerprint__count {
	color: var(--ink-3);
	white-space: nowrap;
}

.plot-bar {
	height: 6px;
	margin-top: 5px;
	background: var(--sheet-3);
	border-radius: 3px;
	overflow: hidden;
}

.plot-bar > span {
	display: block;
	height: 100%;
	background: var(--ink);
	border-radius: 3px;
}

/* A ground with too few appeals to rate is drawn, but in the faintest ink, so
   the eye reads it as present-and-unrated rather than as a low rate. */
.plot-bar > span.thin {
	background: var(--ink-4);
}


/* ---------- panel and figure strip ------------------------------------ */

.plot-panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--wp--preset--spacing--30);
	background: var(--sheet);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
	min-width: 0;
}

.plot-panel__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.plot-panel__title {
	margin: 0;
	font-size: var(--plot-fs-h3);
	font-weight: 700;
}

.plot-panel__meta {
	margin: 0;
	font-size: 13px;
	color: var(--ink-3);
}

/* The strip under a panel: three summary figures, each a bold number with its
   own qualifier, so no figure can be quoted without the thing it counts. */
.plot-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
}

.plot-figures p {
	margin: 0;
	font-size: 13px;
	color: var(--ink-3);
}

.plot-figures strong {
	color: var(--ink);
}


/* ---------- product band ---------------------------------------------- */

/* The screenshot sits on field between two hairlines, which is what separates
   it from the sheet the rest of the page is on without a second border. */
.plot-product-band {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--field);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.plot-browser {
	background: var(--sheet);
	border: 1px solid var(--hair);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.plot-browser__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 14px;
	background: var(--sheet-2);
	border-bottom: 1px solid var(--hair-2);
}

.plot-browser__dots {
	display: flex;
	gap: 6px;
}

.plot-browser__dots i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink-4);
	opacity: .45;
}

.plot-browser__url {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 24px;
	background: var(--sheet);
	border: 1px solid var(--hair);
	border-radius: var(--r-sm);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1;
	color: var(--ink-3);
}

.plot-browser figure {
	margin: 0;
}

.plot-browser img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------- route cards ----------------------------------------------- */

.plot-route-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
	padding-bottom: var(--wp--preset--spacing--50);
}

.plot-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.plot-route {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 220px;
	min-width: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--sheet);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
}

/* The third card is ours, inverted on ink. Inversion rather than the accent
   because redline means selection everywhere else in the product. */
.plot-route--pick {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--on-ink);
}

.plot-route__who {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.plot-route__sum {
	margin: 0;
	font-family: var(--sans);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.plot-route p {
	margin: 0;
	font-size: 15px;
	color: var(--ink-2);
}

/* On ink the ramp has nowhere to go, so the muted tones are the same on-ink
   token at lower alpha. */
.plot-route--pick .plot-route__sum,
.plot-route--pick .plot-route__who,
.plot-route--pick p {
	color: var(--on-ink);
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.plot-route--pick .plot-route__who {
		color: color-mix(in srgb, var(--on-ink) 64%, transparent);
	}

	.plot-route--pick p {
		color: color-mix(in srgb, var(--on-ink) 84%, transparent);
	}
}

.plot-route-links {
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	font-size: 14px;
	color: var(--ink-3);
}


/* ---------- closing band ---------------------------------------------- */

.plot-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
	border-top: 1px solid var(--hair);
}

.plot-cta p {
	margin: 0;
	max-width: 560px;
	color: var(--ink-2);
}

.plot-cta .wp-block-buttons {
	justify-content: center;
	padding-top: 10px;
}


/* ---------- pricing --------------------------------------------------- */

.plot-pricing-head {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--60);
}

.plot-pricing-head .plot-page-hero {
	flex: 1 1 380px;
	padding-bottom: 0;
}

/* One box with hairline dividers, not four floating cards: the tiers are one
   comparison and a gap between them would read as four separate offers. */
.plot-tiers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--sheet);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
	overflow: hidden;
}

.plot-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: var(--wp--preset--spacing--30);
	border-right: 1px solid var(--hair);
}

.plot-tier:last-child {
	border-right: 0;
}

.plot-tier--featured {
	background: var(--sheet-2);
}

.plot-tier__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
	padding: 4px 8px;
	background: var(--ink);
	color: var(--on-ink);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.plot-tier h2 {
	margin: 0;
	font-size: var(--plot-fs-h3);
	line-height: 1.2;
	letter-spacing: 0;
}

.plot-tier__price {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--plot-fs-h2);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.plot-tier__price .plot-per {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
}

.plot-tier__note {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}

.plot-tier ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

.plot-tier li {
	display: flex;
	gap: 8px;
}

.plot-tier li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--ink-4);
}

/* The feature list, not the button, takes the slack, so the four calls to
   action line up however uneven the lists above them are. Growing the list is
   what works here: a margin-top: auto on the buttons would be overwritten by
   WordPress's own layout rule for a group's direct children. */
.plot-tier .wp-block-list {
	flex: 1 1 auto;
}

.plot-tier .wp-block-buttons {
	padding-top: 4px;
}

.plot-toggle {
	display: inline-flex;
	margin-left: auto;
	border: 1px solid var(--hair-3);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.plot-toggle button {
	min-height: var(--touch);
	padding: 0 14px;
	border: 0;
	background: var(--sheet);
	color: var(--ink-2);
	font-family: var(--sans);
	font-size: 14px;
	cursor: pointer;
}

.plot-toggle button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--on-ink);
}

.plot-addons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--60);
}

.plot-addon {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.plot-addon h3 {
	margin: 0;
}

.plot-addon__price {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
}

.plot-addon p:last-child {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}


/* ---------- FAQ ------------------------------------------------------- */

.plot-faq {
	display: flex;
	flex-direction: column;
	max-width: 720px;
	padding-top: var(--wp--preset--spacing--80);
}

.plot-faq > h2 {
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--30);
}

.plot-faq .wp-block-details {
	padding: 8px 0;
	border-top: 1px solid var(--hair);
}

.plot-faq .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--hair);
}

/* list-item, not flex: the disclosure triangle is the summary's ::marker and
   every other display value drops it, which would leave three bold lines with
   nothing to say they open. The padding is what carries the tap target -
   16px at 1.55 plus 20 clears 44. */
.plot-faq summary {
	display: list-item;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.plot-faq .wp-block-details p {
	margin: 0;
	padding: 10px 0 16px;
	font-size: 15px;
	color: var(--ink-2);
}


/* ---------- councils split and tiles ---------------------------------- */

.plot-split.wp-block-columns {
	gap: clamp(32px, 5vw, 64px);
	align-items: flex-start;
}

.plot-split .wp-block-column {
	min-width: 0;
}

/* A heading beside a panel of evidence is a sub-heading, not a new section,
   so it takes the prose size rather than the section size. */
.plot-split h2 {
	font-size: var(--plot-fs-prose-h2);
}

/* One-pixel gaps over a hairline background, so the grid lines are the
   hairline itself rather than eleven borders that double up at every seam. */
.plot-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--hair);
	border: 1px solid var(--hair);
	border-radius: var(--r-md);
	overflow: hidden;
}

.plot-tiles a {
	display: block;
	min-height: var(--touch);
	padding: 16px 20px;
	background: var(--sheet);
	color: inherit;
	text-decoration: none;
}

.plot-tiles a:hover {
	background: var(--sheet-2);
	color: inherit;
}

.plot-tiles strong {
	display: block;
	font-size: 15px;
}

.plot-tiles span {
	font-size: 13px;
	color: var(--ink-3);
}

/* Loading is not a green tick. An authority still ingesting is dimmed and
   marked disabled so it cannot be mistaken for coverage. */
.plot-tiles a[aria-disabled="true"] {
	color: var(--ink-3);
	cursor: default;
}

.plot-tiles a[aria-disabled="true"]:hover {
	background: var(--sheet);
}


/* ---------- numbered steps -------------------------------------------- */

.plot-steps {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-block: var(--wp--preset--spacing--50);
}

.plot-step {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
}

/* Mono, because the numerals are an index and should not be read as a
   quantity in the same face as the figures elsewhere on the page. */
.plot-step__n {
	margin: 0;
	font-family: var(--mono);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ink-4);
}

/* The heading and its paragraph are their own group so the numeral can stay a
   single grid cell however many lines the text runs to. */
.plot-step > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.plot-step h3 {
	margin: 0;
}

.plot-step p {
	margin: 0;
	color: var(--ink-2);
}


/* ---------- catalogue table ------------------------------------------- */

/* The table scrolls inside this box and never the page. min-width: 0 is what
   stops it doing the opposite: a grid or flex child defaults to min-content
   width, so without it the widest row would push the whole document sideways
   on a phone. */
.plot-scroll {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* core/table wraps the table in a figure that scrolls itself; handing the
   overflow to the group above leaves exactly one scroller. */
.plot-catalogue {
	margin: 0;
	overflow-x: visible;
}

.plot-catalogue table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	background: transparent;
	font-size: 14px;
}

.plot-catalogue th {
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--hair);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
	white-space: nowrap;
}

.plot-catalogue td {
	padding: 14px 16px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--hair-2);
	vertical-align: top;
}

.plot-catalogue tr:last-child td {
	border-bottom: 0;
}


/* ---------- breakpoints ----------------------------------------------- */

/* 1024 is where the concept's three- and four-up grids stop fitting a
   1200px measure with its gutters. */
@media (max-width: 1023px) {
	.plot-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.plot-routes {
		grid-template-columns: minmax(0, 1fr);
	}

	.plot-tiers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.plot-tier:nth-child(2n) {
		border-right: 0;
	}

	.plot-tier:nth-child(-n + 2) {
		border-bottom: 1px solid var(--hair);
	}

	.plot-addons {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.plot-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.plot-stats {
		gap: var(--wp--preset--spacing--30);
	}

	.plot-tiers {
		grid-template-columns: minmax(0, 1fr);
	}

	.plot-tier {
		border-right: 0;
		border-bottom: 1px solid var(--hair);
	}

	.plot-tier:last-child {
		border-bottom: 0;
	}

	.plot-toggle {
		margin-left: 0;
	}

	.plot-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.plot-step {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plot-btn--primary .wp-block-button__link,
	.plot-btn--secondary .wp-block-button__link {
		transition-duration: .01ms;
	}
}