/* Summit: what the theme cannot say. Unlayered, so each rule wins over Yeti
   without a specificity fight. The first batch of gaps this page found is in
   the framework now: a pinned scheme, link tokens, data-rule, data-numeric,
   data-span on a hero, data-border on a figure, the nav's brand and link
   tokens, black buttons, the quote's border, the skip link's margin, and
   smooth scrolling for in-page links. What is left is the page's own
   typography, the three gaps declined as tokens (GAP-003, 014, 015), the
   half of GAP-011 that was rejected, the plans' price swap (the Visibility
   guide's recipe), and the comparison table's feature-column width. */

/* The face. Yeti ships no fonts and expects the page to load its own.
   Variable: weight 200 to 800, width 75% to 100%. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("/yeti/examples/landing/fonts/bricolage-grotesque-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
}

/* The sheet's 1 km grid in the map's grid blue, faint, on the paper; the
   band and the painted panels sit over it. A pattern is the page's own
   (GAP-003, declined as a token). */
.sheet {
	--grid: oklch(0.72 0.05 240 / 0.28);
	background-image:
		linear-gradient(to right, var(--grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
	background-size: 8rem 8rem;
}

/* The map's small lettering is the theme's --yeti-stretch-small, which the
   framework reads on captions, small text and the nav's links; the page's
   own label and legend classes read the same token. */
.label,
.legend dt {
	font-stretch: var(--yeti-stretch-small);
}

/* The wordmark's case and tracking. No tokens for these; the page's own. */
.nav > [data-brand] {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* GAP-011 (b), rejected, so the page's own: a hero holds two things, the
   copy and the figure, and once it has stacked the source order rules
   (that part shipped); Yeti will not seat the figure between the headline
   and the rest of the copy. On a phone the sheet wants title, map, legend,
   buttons in that order, so below the hero's own threshold the copy column
   dissolves into the hero and its parts are ordered by hand. A viewport
   query is safe here because the page is its own document, inside the demo
   frame or not; 52.25rem is where the hero, at its lg threshold, stacks
   once the page's 68px of gutters are taken off. */
@media (width < 52.25rem) {
	.hero {
		gap: var(--yeti-space-md);
	}

	.hero > .stack:first-child {
		display: contents;
	}

	/* Its parts are now the hero's own items; each takes a whole row. */
	.hero > .stack:first-child > * {
		flex-basis: 100%;
	}

	.hero > .map {
		order: 0;
		margin-block: var(--yeti-space-sm);
	}

	.hero .legend,
	.hero .cluster,
	.hero .note {
		order: 1;
	}
}

/* The two actions under the legend stand a little taller than the
   control height, so a pair of large buttons reads as the page's one
   decision. Yeti's block padding token, raised for these two. */
.hero .actions {
	--yeti-button-padding-block: 0.75;
}

/* The legend is in walking order, so its rows land top to bottom with their
   markers on the map, each at the moment the route reaches it: every row is
   its own entrance and names its moment through --yeti-enter-delay. The delays are the ones written into map.svg;
   Yeti zeroes them under reduced motion. */
.legend > div:nth-child(1) { --yeti-enter-delay: 0.4s; }
.legend > div:nth-child(2) { --yeti-enter-delay: 0.9s; }
.legend > div:nth-child(3) { --yeti-enter-delay: 1.02s; }
.legend > div:nth-child(4) { --yeti-enter-delay: 1.36s; }

/* The map's caption, under its neatline. */
.map > figcaption {
	margin-block-start: var(--yeti-space-xs);
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}

/* A legend row is a cluster parted to its two ends, Yeti's own pattern.
   What is the page's: the term's weight, the value taking the rest of the
   row and wrapping inside it so a long note never pushes the value under
   the label, and the numbered key drawn as the map draws it. */
.legend dt {
	flex: none;
	font-weight: var(--yeti-weight-strong);
}

.legend dd {
	flex: 1 1 8ch;
	min-inline-size: 0;
	margin: 0;
	text-align: end;
	font-weight: var(--yeti-weight-strong);
}

.legend small {
	display: block;
	font-size: var(--yeti-text-sm);
	font-weight: var(--yeti-weight-normal);
	color: var(--yeti-color-text-muted);
}

.legend dt a {
	color: inherit;
	text-decoration: none;
}

.legend dt a:hover,
.legend dt a:focus-visible {
	color: var(--yeti-link-color);
	text-decoration: underline;
}

.legend .key {
	display: inline-flex;
	inline-size: 1.5em;
	block-size: 1.5em;
	align-items: center;
	justify-content: center;
	border: var(--yeti-border-width) solid var(--yeti-color-success);
	border-radius: 50%;
	font-size: var(--yeti-text-sm);
	font-weight: var(--yeti-weight-bold);
	line-height: 1;
	vertical-align: 0.4em;
}

/* The plan panels are painted and framed by Yeti; only the "most chosen"
   mark needs a rule. GAP-018 (joined panels) was tried here and dropped:
   solid panels want air between them. */
.panels h3 .label {
	margin-inline-start: var(--yeti-space-xs);
}

/* A field note's attribution: the name on one line, the place and the grid
   reference under it. */
figcaption .label {
	display: block;
	margin-block-start: var(--yeti-space-xs);
}

/* A small label: captions and grid references in the sheet's narrow caps.
   The page's own (GAP-014, declined as a utility). */
.label {
	font-size: var(--yeti-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--yeti-color-text-muted);
}

/* The price: a number set large with no heading role. The page's own
   (GAP-015, declined). */
.price {
	font-size: var(--yeti-text-2xl);
	font-weight: var(--yeti-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* The period after the price reads as a plain word beside it, at the
   text's own size and weight, not as a shrunken piece of the number. */
.price small {
	font-size: var(--yeti-text-md);
	font-weight: var(--yeti-weight-normal);
	font-stretch: var(--yeti-stretch-text);
	letter-spacing: 0;
	color: var(--yeti-color-text-muted);
}

/* The billing choice is Yeti's: a buttons group joined with data-affix,
   each option a label.button wrapping a native radio. Only the fieldset's
   own frame is cleared, so the choice sits on the sheet unboxed. */
.billing {
	border: 0;
	padding: 0;
	margin: 0;
}

.billing legend {
	padding: 0;
	margin-block-end: var(--yeti-space-xs);
}

/* Each paid plan carries both prices and the billing choice picks one,
   with no script: Yeti's documented recipe, "Show one of two things from a
   control" in the Visibility guide (GAP-054). */
#plans:not(:has([value="yearly"]:checked)) .price .yearly,
#plans:has([value="yearly"]:checked) .price .monthly {
	display: none;
}

/* The comparison table is Yeti's: data-fixed columns, centred plan cells,
   and a head that data-sticky pins with its own surface and rule. The page
   pins it flush, since the sheet has no bar above it, and gives the feature
   column its width; the plan columns share the rest. */
.compare thead {
	--yeti-sticky-offset: 0;
}

.compare thead th:first-child {
	inline-size: 34%;
}

/* The browser's own surfaces, in the sheet's colours: the selection here,
   the form accent from the framework. */
::selection {
	background-color: var(--yeti-color-primary-soft);
	color: var(--yeti-color-text);
}