/*
 * Components. Each block is self-contained: one root class (gp-<name>) with
 * __element and --modifier classes, reading only tokens. A component never
 * sets its own outer margin or width; the layout around it does.
 *
 * Index: utilities-lite, header/nav, mark, buttons, chips/tags/pills, search,
 * cover, card, tile, promo, pond/halo, summary + bullets, byline card,
 * verdict, stat, tool panel, judge lists, table card, note, jumps, crumbs,
 * pagination, newsletter, sponsor strip, disclosure, faq, prose, footer, forms.
 */
@layer components {

	/* ---------- Accessibility helpers ---------- */
	.gp-skip { position: absolute; left: var(--gp-s4); top: var(--gp-skip-hidden-top); z-index: var(--gp-z-skip); background: var(--gp-ink); color: var(--gp-white); padding: var(--gp-s2) var(--gp-s4); border-radius: var(--gp-r-sm); }
	.gp-skip:focus { top: var(--gp-s4); color: var(--gp-white); }

	/* ---------- Header + pill nav ---------- */
	.gp-header { position: relative; z-index: var(--gp-z-header); display: flex; justify-content: center; padding: var(--gp-space-roomy) var(--gp-s4) 0; }
	.gp-header--overlay { position: absolute; inset: 0 0 auto 0; }
	.gp-header--plain { padding-bottom: var(--gp-s4); }
	.gp-nav { display: flex; align-items: center; gap: var(--gp-space-rule); padding: var(--gp-space-hair); font-size: var(--gp-fs-sm); background: var(--gp-nav-glass); -webkit-backdrop-filter: blur(var(--gp-space-inline)); backdrop-filter: blur(var(--gp-space-inline)); border: 1px solid var(--gp-line); border-radius: var(--gp-r-pill); box-shadow: var(--gp-shadow-header); max-width: 100%; }
	.gp-nav__brand { min-width: var(--gp-control-height); display: inline-flex; align-items: center; gap: var(--gp-s2); min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard) 0 var(--gp-space-tight); font-weight: 500; letter-spacing: var(--gp-track-nav); color: var(--gp-ink); text-decoration: none; white-space: normal; }
	.gp-nav__sep { width: var(--gp-link-underline-width); height: var(--gp-space-control); background: var(--gp-nav-divider); flex: none; }
	.gp-nav__links { display: flex; align-items: center; gap: var(--gp-space-rule); margin: 0; padding: 0; list-style: none; }
	.gp-nav__link { min-width: var(--gp-control-height); display: inline-flex; align-items: center; min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border-radius: var(--gp-r-pill); color: var(--gp-ink-2); text-decoration: none; white-space: normal; }
	.gp-nav__link:hover { color: var(--gp-ink-black); background: var(--gp-paper-3); }
	.gp-nav__link[aria-current] { color: var(--gp-ink-black); font-weight: 500; }
	.gp-nav__link--cta, .gp-nav__link--cta:hover { background: var(--gp-ink); color: var(--gp-white); font-weight: 500; }
	.gp-nav__link--cta:hover { background: var(--gp-ink-black); }
	.gp-nav { position: relative; }
	.gp-nav__item { display: flex; align-items: center; border-radius: var(--gp-r-pill); transition: background var(--gp-fast); }
	.gp-nav__item--mega:hover, .gp-nav__item--mega.is-open, .gp-nav__item--mega:focus-within { background: var(--gp-paper-3); }
	.gp-nav__item--mega > .gp-nav__link:hover { background: var(--gp-transparent); }
	.gp-nav__item--mega > .gp-nav__link { min-width: 0; padding-right: 0; }
	.gp-nav__caret { min-width: var(--gp-nav-caret-width); display: inline-flex; align-items: center; justify-content: center; width: var(--gp-nav-caret-width); flex-shrink: 0; min-height: var(--gp-control-height); margin-right: var(--gp-space-tight); padding: 0; border: 0; background: none; color: var(--gp-soft); cursor: pointer; border-radius: var(--gp-r-pill); }
	.gp-nav__caret svg { width: var(--gp-space-standard); height: var(--gp-space-standard); transition: transform var(--gp-fast); }
	.gp-nav__caret:hover { color: var(--gp-ink); }
	.gp-mega { position: absolute; left: 50%; top: calc(100% + var(--gp-space-standard)); z-index: var(--gp-z-menu); width: var(--gp-mega-width); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--gp-s6); padding: var(--gp-s5); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); box-shadow: var(--gp-shadow-popover); opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity var(--gp-fast), visibility var(--gp-motion-instant) linear var(--gp-fast); font-size: var(--gp-fs-md); }
	.gp-mega::before { content: ""; position: absolute; left: 0; right: 0; top: var(--gp-mega-bridge-top); height: var(--gp-space-label); }
	.gp-nav__item--mega:not(.is-dismissed):hover > .gp-mega, .gp-nav__item--mega.is-open > .gp-mega { opacity: 1; visibility: visible; transition: opacity var(--gp-fast), visibility var(--gp-motion-instant); }
	.gp-nav__item--mega:not(.is-dismissed):hover > .gp-nav__caret svg, .gp-nav__item--mega.is-open > .gp-nav__caret svg { transform: rotate(180deg); }
	.gp-mega__col { display: flex; flex-direction: column; gap: var(--gp-s3); min-width: 0; }
	.gp-mega__col--full { grid-column: 1 / -1; }
	.gp-mega__title { font-size: var(--gp-fs-sm); font-weight: 500; color: var(--gp-soft); }
	.gp-mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gp-space-rule); }
	.gp-mega__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gp-s3); }
	.gp-mega__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gp-s3); }
	.gp-mega__list a { min-width: var(--gp-control-height); display: flex; align-items: center; gap: var(--gp-space-inline); min-height: var(--gp-control-height); padding: 0 var(--gp-space-inline); border-radius: var(--gp-control-radius); color: var(--gp-ink); text-decoration: none; white-space: normal; }
	.gp-mega__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.gp-mega--tools { width: var(--gp-mega-articles-width); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.gp-mega__list a:hover { background: var(--gp-paper-3); }
	.gp-mega__count { margin-left: auto; font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-soft); }
	.gp-mega__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gp-s3); }
	.gp-mega__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gp-mega__card { display: flex; flex-direction: column; gap: var(--gp-s2); margin: var(--gp-offset-tight); padding: var(--gp-space-tight); border-radius: var(--gp-space-label); color: var(--gp-ink); text-decoration: none; font-size: var(--gp-fs-sm); font-weight: 500; line-height: var(--gp-lh-menu); transition: background var(--gp-fast); }
	.gp-mega__card:hover { background: var(--gp-paper-3); }
	.gp-mega__cardtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.gp-mega__card .gp-cover { --cover-h: var(--gp-cover-menu-height); --cover-fs: var(--gp-fs-name); border-radius: var(--gp-control-radius); }
	.gp-mega__card .gp-cover__vs { width: var(--gp-space-large); height: var(--gp-space-large); font-size: var(--gp-fs-small); }
	.gp-mega__card .gp-cover--pair .gp-cover__name { padding: var(--gp-space-hair) var(--gp-space-detail) var(--gp-space-micro); border-radius: var(--gp-space-small); font-size: var(--gp-fs-small); left: var(--gp-space-small); bottom: var(--gp-space-small); }
	.gp-mega__card .gp-cover--pair .gp-cover__name--b { left: auto; right: var(--gp-space-small); top: var(--gp-space-small); bottom: auto; }
	.gp-mega__more { min-width: var(--gp-control-height); display: flex; align-items: center; min-height: var(--gp-control-height); padding: 0 var(--gp-space-inline); margin: 0 var(--gp-offset-standard); border-radius: var(--gp-control-radius); font-size: var(--gp-fs-md); font-weight: 500; color: var(--gp-ink); text-decoration: none; }
	.gp-mega__more:hover { background: var(--gp-paper-3); }
	.gp-mega__row { display: flex; flex-wrap: wrap; gap: var(--gp-s2) var(--gp-s8); padding: 0 var(--gp-space-inline); }
	.gp-menu { display: none; position: relative; }
	.gp-menu > summary { min-width: var(--gp-control-height); list-style: none; display: inline-flex; align-items: center; gap: var(--gp-space-tight); min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border-radius: var(--gp-r-pill); cursor: pointer; color: var(--gp-ink-2); }
	.gp-menu > summary::-webkit-details-marker { display: none; }
	.gp-menu > summary svg { width: var(--gp-space-label); height: var(--gp-space-label); }
	.gp-menu__panel { position: absolute; right: 0; top: calc(100% + var(--gp-space-inline)); min-width: var(--gp-menu-min-width); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-r-lg); box-shadow: var(--gp-shadow-md); padding: var(--gp-s2); }
	.gp-menu__panel a { display: flex; align-items: center; min-height: var(--gp-control-height); padding: 0 var(--gp-s3); border-radius: var(--gp-r-sm); text-decoration: none; color: var(--gp-ink); }
	.gp-menu__panel a:hover { background: var(--gp-paper-3); }
	@media (max-width: 45rem) {
		.gp-nav__links, .gp-nav__sep { display: none; }
		.gp-menu { display: block; }
	}

	/* ---------- Mark (logo) ---------- */
	.gp-mark { display: inline-block; flex: none; width: var(--size, var(--gp-icon-large)); height: var(--size, var(--gp-icon-large)); line-height: var(--gp-lh-icon); }
	.gp-mark svg, .gp-mark canvas { width: 100%; height: 100%; }

	/* ---------- Buttons ---------- */
	.gp-btn { min-width: var(--gp-control-height); --bg: var(--gp-ink); --fg: var(--gp-white); --bd: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: var(--gp-space-inline); min-height: var(--gp-control-height); padding: 0 var(--gp-space-panel); border-radius: var(--gp-control-radius); border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-size: var(--gp-fs-md); font-weight: 500; text-decoration: none; cursor: pointer; transition: filter var(--gp-fast); }
	.gp-btn:hover { color: var(--fg); filter: brightness(1.08); }
	.gp-btn--gold { --bg: var(--gp-gold); --fg: var(--gp-on-gold); font-weight: 600; }
	.gp-btn--ghost { --bg: var(--gp-surface); --fg: var(--gp-ink); --bd: var(--gp-line-strong); }
	.gp-btn--ghost:hover { filter: none; border-color: var(--gp-ink); }
	.gp-btn--brand { --bg: var(--brand, var(--gp-ink)); --fg: var(--brand-fg, var(--gp-white)); }
	.gp-btn--sm { min-width: var(--gp-control-height); min-height: var(--gp-control-height); padding: 0 var(--gp-space-label); font-size: var(--gp-fs-control); border-radius: var(--gp-control-radius); }
	.gp-btn--icon { flex-shrink: 0; width: var(--gp-control-height); min-height: var(--gp-control-height); padding: 0; }
	.gp-btn svg { width: var(--gp-space-roomy); height: var(--gp-space-roomy); flex: none; }

	/* ---------- "See all" link: a quiet pill, no underline ---------- */
	.gp-more { min-width: var(--gp-control-height); display: inline-flex; align-items: center; gap: var(--gp-space-tight); min-height: var(--gp-pill-height); padding: 0 var(--gp-space-label); border: 1px solid var(--gp-line); border-radius: var(--gp-r-pill); background: var(--gp-surface); font-size: var(--gp-fs-sm); font-weight: 500; color: var(--gp-ink); text-decoration: none; white-space: normal; transition: background var(--gp-fast); }
	.gp-more::after { content: "\2192"; }
	.gp-more:hover { background: var(--gp-paper-3); color: var(--gp-ink); }

	a.gp-tag, a.gp-brandchip, .gp-disclosure a, .gp-byline__name, .gp-byline__note a, .gp-byline__meta a, .gp-comments__list .reply a, .gp-comment-form #cancel-comment-reply-link { display: inline-flex; align-items: center; min-width: var(--gp-control-height); min-height: var(--gp-control-height); }

	/* ---------- Chips, tags, pills, dots ---------- */
	.gp-chip { min-width: var(--gp-control-height); display: inline-flex; align-items: center; min-height: var(--gp-pill-height); padding: 0 var(--gp-space-chip); border: 1px solid var(--gp-pill-border); border-radius: var(--gp-r-pill); background: var(--gp-paper-chip); font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-muted); text-decoration: none; white-space: normal; }
	.gp-chip:hover { border-color: var(--gp-line-chip-hover); color: var(--gp-ink-hover); }
	.gp-tag { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: var(--gp-space-tight); padding: var(--gp-space-hair) var(--gp-space-inline); border-radius: var(--gp-r-pill); font-family: var(--gp-mono); font-size: var(--gp-fs-small); font-weight: 500; background: var(--gp-surface); color: var(--gp-ink); box-shadow: var(--gp-shadow-chip); white-space: normal; }
	.gp-tag--gold { background: var(--gp-gold); color: var(--gp-on-gold-tag); box-shadow: none; }
	.gp-tag--ink { background: var(--gp-ink); color: var(--gp-white); box-shadow: none; }
	.gp-tag--flat { background: var(--gp-paper-3); color: var(--gp-ink-tag); box-shadow: none; }
	.gp-pill { min-width: var(--gp-control-height); display: inline-flex; align-items: center; gap: var(--gp-space-small); min-height: var(--gp-control-height); padding: 0 var(--gp-space-label); border-radius: var(--gp-r-pill); border: 1px solid var(--gp-pill-border); background: var(--gp-surface); color: var(--gp-ink-2); font-size: var(--gp-fs-sm); text-decoration: none; cursor: pointer; white-space: normal; }
	.gp-pill:hover { border-color: var(--gp-ink); color: var(--gp-ink-black); }
	.gp-pill[aria-current], .gp-pill[aria-pressed="true"] { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-white); }
	.gp-pill[aria-current] .gp-dot, .gp-pill[aria-pressed="true"] .gp-dot { box-shadow: var(--gp-shadow-pill-selected); }
	.gp-dot { width: var(--gp-space-small); height: var(--gp-space-small); border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--gp-ink)); }
	.gp-pillbar { display: flex; flex-wrap: wrap; gap: var(--gp-space-tight); }

	/* ---------- Search dialog (nav search icon, Cmd/Ctrl+K, "/") ---------- */
	.gp-searchdlg { width: min(var(--gp-measure-search), calc(100% - 2 * var(--gp-space-standard))); max-width: none; margin: var(--gp-search-dialog-top) auto auto; padding: 0; border: 0; background: none; overflow: visible; }
	.gp-searchdlg::backdrop { background: var(--gp-scrim); -webkit-backdrop-filter: blur(var(--gp-space-hair)); backdrop-filter: blur(var(--gp-space-hair)); }
	.gp-searchdlg .gp-search { max-width: none; }

	/* ---------- Search box ---------- */
	.gp-search { width: 100%; max-width: var(--gp-measure-search); display: flex; flex-direction: column; gap: var(--gp-space-label); padding: var(--gp-space-control) var(--gp-space-control) var(--gp-space-standard) var(--gp-space-panel); text-align: left; background: var(--gp-surface); border: 1px solid var(--gp-line-strong); border-radius: var(--gp-card-radius); box-shadow: var(--gp-shadow-md); }
	.gp-search { position: relative; }
	.gp-search:focus-within { border-color: var(--gp-ink); }
	/* The card's border is the field's focus cue, so the input draws no box of its own. */
	.gp-search__input:focus, .gp-search__input:focus-visible { outline: none; }
	.gp-suggest { position: absolute; left: var(--gp-offset-hair); right: var(--gp-offset-hair); top: calc(100% + var(--suggest-offset, var(--gp-space-small))); z-index: var(--gp-z-suggest); margin: 0; padding: var(--gp-space-tight); list-style: none; max-height: var(--gp-suggest-max-height); overflow-y: auto; background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-space-control); box-shadow: var(--gp-shadow-popover); text-align: left; }
	.gp-suggest[hidden] { display: none; }
	.gp-suggest__link { display: flex; align-items: center; gap: var(--gp-space-inline); min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border-radius: var(--gp-control-radius); color: var(--gp-ink); text-decoration: none; }
	.gp-suggest__item[aria-selected="true"] .gp-suggest__link, .gp-suggest__link:hover { background: var(--gp-paper-3); }
	.gp-suggest__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gp-fs-md); }
	.gp-suggest__type { flex: none; font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-soft); }
	.gp-suggest__none { padding: var(--gp-space-standard); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-suggest__all { border-top: 1px solid var(--gp-line-soft); margin-top: var(--gp-space-hair); padding-top: var(--gp-space-hair); }
	.gp-suggest__go { min-width: var(--gp-control-height); width: 100%; min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border: 0; border-radius: var(--gp-control-radius); background: none; text-align: left; font-size: var(--gp-fs-sm); color: var(--gp-ink-2); cursor: pointer; }
	.gp-suggest__go:hover { background: var(--gp-paper-3); }
	.gp-suggest__head { padding: var(--gp-space-small) var(--gp-space-standard) var(--gp-space-hair); font-size: var(--gp-fs-xs); font-weight: 500; color: var(--gp-soft); }
	button.gp-suggest__link { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
	.gp-search__input { min-height: var(--gp-control-height); min-width: 0; width: 100%; padding: var(--gp-space-hair) 0; border: 0; background: var(--gp-transparent); font-size: var(--gp-fs-base); color: var(--gp-ink); }
	.gp-search__input::-webkit-search-cancel-button { display: none; }
	.gp-search__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gp-space-standard); }
	.gp-search__chips { display: flex; flex-wrap: wrap; gap: var(--gp-space-tight); }
	/* Phones: the go button sits beside the input, so the chips get the card's full width and wrap instead of running off it. */
	@media (max-width: 40rem) {
		.gp-search__row { display: block; }
		.gp-search > .gp-search__row > .gp-btn--icon { position: absolute; top: var(--gp-space-control); right: var(--gp-space-control); }
		.gp-search__input { padding-right: calc(var(--gp-control-height) + var(--gp-space-tight)); }
		.gp-search__chips .gp-chip { white-space: nowrap; }
	}

	/* ---------- Glyph cover ----------
	 * Brand colour fill (CSS, so it shows without JS), an optional diagonal
	 * split for comparisons, the character texture drawn by art.js into the
	 * canvas, and the names as real text on top.
	 */
	.gp-cover { border-radius: var(--cover-radius, 0); container-type: inline-size; --ca: var(--gp-ink); --cb: var(--ca); --fg-a: var(--gp-white); --fg-b: var(--gp-white); position: relative; display: block; overflow: hidden; height: var(--cover-h, var(--gp-cover-default-height)); background: var(--ca); color: var(--fg-a); isolation: isolate; }
	.gp-cover--pair::before { content: ""; position: absolute; inset: 0; background: var(--cb); clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); z-index: var(--gp-lh-icon); }
	.gp-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--gp-z-art); pointer-events: none; }
	.gp-cover__label { position: absolute; left: var(--gp-space-label); top: var(--gp-space-label); z-index: var(--gp-z-label); }
	.gp-cover__name { position: absolute; left: var(--gp-space-roomy); right: var(--gp-space-roomy); bottom: var(--gp-space-label); z-index: var(--gp-z-content); font-weight: 300; font-size: var(--cover-fs, var(--gp-fs-cover)); line-height: var(--gp-lh-cover); letter-spacing: var(--gp-track-cover); color: var(--fg-a); overflow-wrap: normal; font-size: min(var(--cover-fs, var(--gp-fs-cover)), calc((100cqi - var(--gp-space-major)) / (var(--longest, 10) * 0.5))); }
	.gp-cover__name--b { left: auto; right: var(--gp-space-roomy); top: var(--gp-space-label); bottom: auto; max-width: 46%; text-align: right; color: var(--fg-b); }
	.gp-cover--pair .gp-cover__name { max-width: 46%; padding: var(--gp-space-detail) var(--gp-space-standard) var(--gp-space-small); border-radius: var(--gp-control-radius); background: var(--gp-white); color: var(--gp-ink); font-weight: 400; letter-spacing: var(--gp-track-label); line-height: var(--gp-lh-label); box-shadow: var(--gp-shadow-cover-label); font-size: min(var(--cover-fs, var(--gp-fs-cover)), var(--gp-cover-name-max)); }
	.gp-cover--pair .gp-cover__name--b { left: auto; right: var(--gp-space-label); }
	.gp-cover--pair .gp-cover__name { overflow-wrap: normal; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 58%; font-size: min(var(--cover-fs, var(--gp-fs-cover)), var(--gp-cover-name-max), calc((58cqi - var(--gp-space-major)) / (var(--longest, 10) * 0.56))); } /* Opposite corners, so a name can pass the middle; it sizes to fit its longest word. */
	.gp-cover--pair .gp-cover__name:not(.gp-cover__name--b) { left: var(--gp-space-label); right: auto; }
	.gp-cover--labelled .gp-cover__name--b { top: var(--gp-cover-labelled-top); }
	.gp-cover__vs { position: absolute; left: 50%; top: 50%; z-index: var(--gp-z-label); transform: translate(-50%, -50%); width: var(--gp-cover-versus-size); height: var(--gp-cover-versus-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gp-white); color: var(--gp-ink); font-family: var(--gp-mono); font-size: var(--gp-fs-small); box-shadow: var(--gp-shadow-cover-versus); }
	.gp-cover__plate { position: absolute; left: var(--gp-space-label); bottom: var(--gp-space-label); z-index: var(--gp-z-content); max-width: calc(100% - var(--gp-space-large)); padding: var(--gp-space-inset) var(--gp-space-label) var(--gp-space-inline); border-radius: var(--gp-control-radius); background: var(--gp-white); color: var(--gp-ink); font-size: var(--cover-fs, var(--gp-fs-h3)); font-weight: 400; line-height: var(--gp-lh-label); letter-spacing: var(--gp-track-label); box-shadow: var(--gp-shadow-cover-label); }
	/* Thumbnail-width covers (search results, menus, alternatives) drop the names: the title beside them says it, and names that small get cut off. */
	@container (max-width: 16rem) { .gp-cover--pair .gp-cover__name { display: none; } }
	@container (max-width: 10rem) { .gp-cover__plate { display: none; } }
	.gp-cover--sm { --cover-fs: var(--gp-fs-h3); }
	.gp-cover--md { --cover-fs: var(--gp-fs-cover); }
	.gp-cover--lg { --cover-fs: var(--gp-fs-cover-large); }
	.gp-cover--xl { --cover-fs: var(--gp-fs-cover-display); }
	.gp-cover--plate { --cover-fs: var(--gp-s5); }

	/* ---------- Card (post / review / comparison) ---------- */
	.gp-card { display: flex; flex-direction: column; overflow: hidden; background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); color: var(--gp-ink); text-decoration: none; transition: border-color var(--gp-fast), box-shadow var(--gp-med) var(--gp-ease); }
	.gp-card:hover { border-color: var(--gp-line-card-hover); background: var(--gp-paper-2); color: var(--gp-ink); }
	.gp-card .gp-cover { --cover-h: var(--gp-cover-card-height); }
	.gp-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gp-s2); padding: var(--gp-space-control) var(--gp-space-roomy) var(--gp-space-roomy); }
	.gp-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-s2); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-card__by { display: flex; align-items: center; gap: var(--gp-s2); margin-top: auto; padding-top: var(--gp-s1); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-card__by .gp-byline__avatar { width: var(--gp-avatar-size-sm); height: var(--gp-avatar-size-sm); font-size: var(--gp-fs-xs); }
	.gp-card__title { font-size: var(--gp-fs-base); font-weight: 500; line-height: var(--gp-lh-title); letter-spacing: var(--gp-track-heading); }
	.gp-card--feature .gp-cover { --cover-h: var(--gp-cover-feature-height); }
	.gp-card--feature .gp-card__body { padding: var(--gp-space-panel) var(--gp-space-card) var(--gp-space-card); }
	.gp-card--feature .gp-card__title { font-size: var(--gp-fs-feature-title); font-weight: 300; line-height: var(--gp-lh-heading); letter-spacing: var(--gp-track-feature); }

	/* ---------- Tile (cover-only link: tools, categories) ---------- */
	.gp-tile { width: var(--tile-width, auto); position: relative; display: block; overflow: hidden; border-radius: var(--gp-card-radius); text-decoration: none; transition: box-shadow var(--gp-med) var(--gp-ease); }
	.gp-tile:hover { box-shadow: var(--gp-shadow-tile-hover); }
	.gp-tile .gp-cover { --cover-h: var(--gp-cover-default-height); }
	.gp-tile--cat .gp-cover { --cover-h: var(--gp-cover-category-height); }
	@media (max-width: 38.75rem) {
		.gp-grid:has(> li > .gp-tile--cat) { --min: var(--gp-grid-category-min); --gap: var(--gp-s2); }
		.gp-tile--cat .gp-cover { --cover-h: var(--gp-cover-category-mobile-height); --cover-fs: var(--gp-fs-md); }
		.gp-tile--cat .gp-cover__plate { left: var(--gp-space-small); bottom: var(--gp-space-small); max-width: calc(100% - var(--gp-space-control)); padding: var(--gp-space-tight) var(--gp-space-inset) var(--gp-space-detail); border-radius: var(--gp-space-inset); }
	}
	.gp-tile--pick .gp-cover { --cover-h: var(--gp-cover-pick-height); }
	.gp-tile__flag { position: absolute; right: var(--gp-space-standard); top: var(--gp-space-standard); z-index: var(--gp-z-flag); }

	/* ---------- Promo (dark feature card) ---------- */
	.gp-promo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-s6) var(--gp-s12); padding: var(--gp-promo-padding); overflow: hidden; background: var(--gp-ink); color: var(--gp-white); border-radius: var(--gp-r-2xl); text-decoration: none; }
	.gp-promo:hover { color: var(--gp-white); }
	.gp-promo__copy { flex: 999 1 var(--gp-promo-copy-basis); min-width: 0; display: flex; flex-direction: column; gap: var(--gp-space-roomy); }
	.gp-promo__title { font-size: var(--gp-fs-promo-title); line-height: var(--gp-lh-display); letter-spacing: var(--gp-track-tight); }
	.gp-promo__lead { color: var(--gp-ink-on-dark-muted); max-width: var(--gp-measure-promo); font-size: var(--gp-fs-copy); line-height: var(--gp-lh-lede); }
	.gp-promo__chips { display: flex; flex-wrap: wrap; gap: var(--gp-space-small); }
	.gp-promo__chips span { font-family: var(--gp-mono); font-size: var(--gp-fs-small); padding: var(--gp-space-tight) var(--gp-space-standard); border: 1px solid var(--gp-line-on-dark); border-radius: var(--gp-r-pill); color: var(--gp-ink-on-dark-chip); }
	.gp-promo__art { flex: 1 1 var(--gp-grid-small-min); display: flex; justify-content: center; }
	.gp-promo .gp-btn { align-self: flex-start; }
	.gp-promo--slim { padding: var(--gp-space-large) var(--gp-space-wide); justify-content: space-between; border-radius: var(--gp-r-xl); }
	.gp-promo--slim .gp-promo__title { font-size: var(--gp-fs-feature-title); letter-spacing: var(--gp-track-label); }

	/* ---------- Pond + frosted halo ---------- */
	.gp-pond { position: absolute; inset: 0; z-index: var(--gp-lh-icon); overflow: hidden; background: var(--gp-paper); background-image: linear-gradient(var(--gp-grid) var(--gp-link-underline-width), var(--gp-transparent) var(--gp-link-underline-width)), linear-gradient(90deg, var(--gp-grid) var(--gp-link-underline-width), var(--gp-transparent) var(--gp-link-underline-width)); background-size: var(--gp-glyph-cell) var(--gp-space-inline); }
	.gp-pond canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
	.gp-halo { position: absolute; left: 50%; top: 50%; z-index: var(--gp-z-art); width: min(var(--halo-w, var(--gp-halo-width)), 100%); height: var(--halo-h, var(--gp-split-main-basis)); transform: translate(-50%, -52%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--gp-halo-core), var(--gp-halo-middle) 60%, var(--gp-halo-edge) 100%); -webkit-backdrop-filter: blur(var(--gp-space-inset)); backdrop-filter: blur(var(--gp-space-inset)); -webkit-mask-image: radial-gradient(closest-side, var(--gp-ink-black) 45%, var(--gp-transparent) 100%); mask-image: radial-gradient(closest-side, var(--gp-ink-black) 45%, var(--gp-transparent) 100%); }

	/* ---------- Summary box + square bullets ---------- */
	.gp-summary { padding: var(--gp-space-panel) var(--gp-space-card); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-r-lg); }
	.gp-summary__title { font-size: var(--gp-fs-copy); font-weight: 500; letter-spacing: 0; margin-bottom: var(--gp-s3); }
	.gp-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-s2); }
	.gp-bullets > li { display: flex; gap: var(--gp-space-inline); font-size: var(--gp-fs-bullet); line-height: var(--gp-lh-compact); color: var(--gp-ink-copy); }
	.gp-bullets > li::before { content: ""; flex: none; width: var(--gp-space-tight); height: var(--gp-space-tight); margin-top: var(--gp-bullet-marker-top); background: var(--bullet, var(--gp-ink)); }
	.gp-bullets--good { --bullet: var(--gp-good-ink); }
	.gp-bullets--warn { --bullet: var(--gp-warn-ink); }

	/* ---------- Byline card (author, scores, dates) ---------- */
	.gp-byline { display: flex; flex-direction: column; gap: var(--gp-s4); padding: var(--gp-s5); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-byline__who { display: flex; align-items: center; gap: var(--gp-s3); }
	.gp-byline__avatar { width: var(--gp-avatar-size); height: var(--gp-avatar-size); flex: none; border-radius: 50%; overflow: hidden; background: var(--gp-avatar-surface); display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--gp-muted); }
	.gp-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
	.gp-byline__role { display: block; font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-byline__name { font-weight: 500; color: var(--gp-ink); text-decoration: none; }
	.gp-byline__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--gp-verdict-label-width), 1fr)); gap: var(--gp-space-inline); }
	.gp-score { padding: var(--gp-space-standard) var(--gp-space-label); border-radius: var(--gp-r-md); background: var(--tint, var(--gp-paper-3)); }
	.gp-score__name { display: block; font-size: var(--gp-fs-sm); color: var(--tint-ink, var(--gp-muted)); }
	.gp-score__value { display: block; font-size: var(--gp-fs-cover); font-weight: 300; letter-spacing: var(--gp-track-cover); line-height: var(--gp-lh-stat); }
	.gp-byline__try { display: flex; flex-direction: column; gap: var(--gp-space-small); }
	.gp-byline__try .gp-btn { width: 100%; }
	.gp-byline__meta { display: flex; flex-direction: column; gap: var(--gp-space-hair); padding-top: var(--gp-s3); border-top: 1px solid var(--gp-line-soft); font-size: var(--gp-fs-sm); color: var(--gp-muted); }

	/* ---------- Verdict card (tinted by brand) ---------- */

	/* ---------- Stat card ---------- */
	.gp-stat { display: flex; flex-direction: column; gap: var(--gp-s3); padding: var(--gp-space-control) var(--gp-space-roomy); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-stat__key { font-size: var(--gp-fs-sm); color: var(--gp-soft); }

	/* ---------- Tool panel (brand header + bullet sections) ---------- */
	/* Panels in a row are equal height and keep their actions on the same line at the bottom. */
	.gp-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--gp-s3); padding: var(--gp-space-control) var(--gp-space-card); background: var(--brand, var(--gp-ink)); color: var(--brand-fg, var(--gp-white)); }
	.gp-panel__name { font-size: var(--gp-heading-panel); font-weight: 300; letter-spacing: var(--gp-track-display); }
	.gp-panel__name a { color: inherit; text-decoration: none; }
	.gp-panel__cat { font-size: var(--gp-fs-sm); opacity: 0.9; }
	.gp-panel__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gp-space-roomy); padding: var(--gp-space-panel) var(--gp-space-card); }
	.gp-panel__actions { margin-top: auto; padding-top: var(--gp-s2); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--gp-grid-category-min), 100%), 1fr)); gap: var(--gp-s2); }
	.gp-panel__actions .gp-btn { width: 100%; justify-content: center; }
	.gp-panel__body h3, .gp-panel__body h4 { font-size: var(--gp-heading-label); font-weight: 500; color: var(--gp-ink-2); margin-bottom: var(--gp-space-inline); letter-spacing: 0; }

	/* ---------- Good / watch-out lists ---------- */
	.gp-judge { display: flex; flex-direction: column; gap: var(--gp-s3); padding: var(--gp-space-roomy) var(--gp-space-panel); border-radius: var(--gp-card-radius); border: 1px solid var(--gp-line); background: var(--gp-surface); }
	.gp-judge h3 { font-size: var(--gp-fs-sm); font-weight: 500; letter-spacing: 0; }
	.gp-judge--good { background: var(--gp-good-bg); border-color: var(--gp-good-line); --bullet: var(--gp-good-ink); }
	.gp-judge--good h3 { color: var(--gp-good-ink); }
	.gp-judge--warn { background: var(--gp-warn-bg); border-color: var(--gp-warn-line); --bullet: var(--gp-warn-ink); }
	.gp-judge--warn h3 { color: var(--gp-warn-ink); }

	/* ---------- Table card ---------- */
	.gp-brandchip { display: inline-block; padding: var(--gp-space-micro) var(--gp-space-standard); border-radius: var(--gp-r-pill); background: var(--brand, var(--gp-ink)); color: var(--brand-fg, var(--gp-white)); font-size: var(--gp-fs-sm); }

	/* ---------- Pricing tier ---------- */
	.gp-tier { display: flex; flex-direction: column; gap: var(--gp-s3); padding: var(--gp-space-card); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-tier--hi { border-color: var(--gp-gold); box-shadow: var(--gp-shadow-selected); }
	.gp-tier__head { display: flex; justify-content: space-between; align-items: center; gap: var(--gp-s2); }
	.gp-tier__head h3 { font-size: var(--gp-fs-copy); font-weight: 500; letter-spacing: 0; }
	.gp-tier__price { font-size: var(--gp-s10); font-weight: 300; letter-spacing: var(--gp-track-cover); line-height: var(--gp-z-art); }
	.gp-tier__price span { margin-left: var(--gp-space-tight); font-size: var(--gp-fs-sm); letter-spacing: 0; color: var(--gp-soft); }
	.gp-tier__what { font-size: var(--gp-fs-md); color: var(--gp-muted); line-height: var(--gp-lh-compact); }
	.gp-tier .gp-bullets { flex: 1 1 auto; }
	.gp-tier .gp-btn { align-self: stretch; }
	.gp-tier--mini { padding: var(--gp-space-control) var(--gp-space-roomy); }
	.gp-tier--mini .gp-tier__price { font-size: var(--gp-r-2xl); }

	/* ---------- Numbered steps ---------- */
	.gp-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--gp-grid-step-min), 100%), 1fr)); gap: var(--gp-s3); }
	.gp-steps--stack { grid-template-columns: minmax(0, 1fr); }
	.gp-steps--stack > li { display: flex; flex-direction: column; gap: var(--gp-space-hair); padding: var(--gp-space-standard) 0; border-top: 1px solid var(--gp-line-soft); }
	.gp-steps__n { font-family: var(--gp-mono); font-size: var(--gp-fs-xs); color: var(--gp-soft); }
	.gp-stat__text { font-size: var(--gp-fs-md); color: var(--gp-muted); line-height: var(--gp-lh-compact); }

	/* ---------- Form card ---------- */
	.gp-formcard { display: flex; flex-direction: column; gap: var(--gp-s4); padding: var(--gp-formcard-padding); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-radius-panel-fixed); }
	.gp-formcard h2 { font-size: var(--gp-heading-section); }
	.gp-formcard__lead { color: var(--gp-muted); }

	/* ---------- Dashed note ---------- */
	.gp-note { padding: var(--gp-space-card) var(--gp-icon-large); border: var(--gp-border-dashed-width) dashed var(--gp-line-note); border-radius: var(--gp-card-radius); color: var(--gp-ink-2); }
	.gp-note h2, .gp-note h3 { font-size: var(--gp-fs-copy); font-weight: 500; letter-spacing: 0; margin-bottom: var(--gp-s3); }

	/* ---------- Jump links, breadcrumbs ---------- */
	.gp-jumps { display: flex; flex-wrap: wrap; gap: var(--gp-s2); }
	.gp-jump { min-width: var(--gp-control-height); display: inline-flex; align-items: center; min-height: var(--gp-pill-height); padding: 0 var(--gp-space-label); border: 1px solid var(--gp-pill-border); border-radius: var(--gp-r-pill); background: var(--gp-surface); font-size: var(--gp-fs-sm); color: var(--gp-ink-2); text-decoration: none; }
	.gp-jump:hover { border-color: var(--gp-ink); color: var(--gp-ink-black); }
	.gp-catchips { display: flex; flex-wrap: wrap; gap: var(--gp-space-tight); }
	.gp-catchip { min-width: var(--gp-control-height); display: inline-flex; align-items: center; gap: var(--gp-space-detail); min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border: 1px solid var(--gp-pill-border); border-radius: var(--gp-r-pill); background: var(--gp-surface); font-size: var(--gp-fs-sm); color: var(--gp-ink-copy); text-decoration: none; }
	.gp-catchip:hover { border-color: var(--gp-ink); color: var(--gp-ink-black); }

	/* ---------- Breadcrumbs ---------- */
	.gp-crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-space-hair) 0; font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
	.gp-crumbs li + li::before { content: "/"; margin: 0 var(--gp-space-small); color: var(--gp-ink-crumb-separator); }
	.gp-crumbs a { display: inline-flex; align-items: center; min-width: var(--gp-control-height); min-height: var(--gp-control-height); color: var(--gp-ink-2); text-decoration: none; padding: var(--gp-space-rule) var(--gp-space-tight); margin: 0 var(--gp-offset-tight); border-radius: var(--gp-space-tight); }
	.gp-crumbs a:hover { background: var(--gp-paper-3); color: var(--gp-ink); }
	/* Phones: the current page is the H1 right below, so the trail stops at its parent. */
	@media (max-width: 40rem) { .gp-crumbs li:has(> [aria-current]) { display: none; } }
	.gp-crumbs [aria-current] { max-width: var(--gp-crumb-measure); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.gp-prose a.gp-toollink { text-decoration-style: dotted; }

	/* ---------- Pagination ---------- */
	.gp-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gp-space-tight); margin-top: var(--gp-s10); }
	.gp-pages a, .gp-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--gp-control-size-fixed); height: var(--gp-control-size-fixed); padding: 0 var(--gp-space-label); border-radius: var(--gp-r-pill); border: 1px solid var(--gp-pill-border); background: var(--gp-surface); font-size: var(--gp-fs-md); color: var(--gp-ink-2); text-decoration: none; }
	.gp-pages a:hover { border-color: var(--gp-ink); color: var(--gp-ink-black); }
	.gp-pages .current { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-white); }
	.gp-pages .dots { border: 0; background: none; }

	/* ---------- Newsletter band ---------- */
	.gp-nl { position: relative; overflow: hidden; min-height: var(--gp-split-side-max); display: flex; align-items: center; justify-content: center; border-block: 1px solid var(--gp-line-2); }
	.gp-nl .gp-halo { --halo-w: var(--gp-halo-newsletter-width); --halo-h: var(--gp-halo-newsletter-height); transform: translate(-50%, -50%); }
	.gp-nl__inner { position: relative; z-index: var(--gp-z-content); display: flex; flex-direction: column; align-items: center; gap: var(--gp-space-roomy); padding: var(--gp-s12) var(--gp-s4); text-align: center; }
	.gp-nl__title { font-size: var(--gp-fs-newsletter-title); }
	.gp-nl__fine { font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-nl .gp-form { width: var(--gp-newsletter-form-width); }

		/* ---------- Disclosure ---------- */
	.gp-disclosure { font-size: var(--gp-fs-small); color: var(--gp-soft); line-height: var(--gp-lh-compact); }

	/* ---------- FAQ ---------- */
	.gp-faq { display: flex; flex-direction: column; gap: var(--gp-s2); }
	.gp-faq details { background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-space-control); }
	.gp-faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--gp-s4); padding: var(--gp-space-control) var(--gp-space-panel); cursor: pointer; font-weight: 500; }
	.gp-faq summary::-webkit-details-marker { display: none; }
	.gp-faq summary::after { content: "+"; font-family: var(--gp-mono); color: var(--gp-soft); }
	.gp-faq details[open] summary::after { content: "\2212"; }
	.gp-faq details > div { padding: 0 var(--gp-space-panel) var(--gp-space-roomy); color: var(--gp-muted); }

	/* ---------- Prose (editor content) ---------- */
	.gp-prose { font-size: var(--gp-fs-base); line-height: var(--gp-lh-prose); color: var(--gp-ink-copy); max-width: var(--gp-measure); }
	.gp-prose > * + * { margin-top: var(--gp-prose-stack); }
	.gp-prose h2 { margin-top: var(--gp-prose-h2-space); font-size: var(--gp-heading-section); color: var(--gp-ink); }
	.gp-prose h3 { margin-top: var(--gp-prose-h3-space); font-size: var(--gp-heading-panel); color: var(--gp-ink); }
	.gp-prose h4 { margin-top: var(--gp-prose-h4-space); font-size: var(--gp-heading-label); }
	.gp-prose h2 + *, .gp-prose h3 + *, .gp-prose h4 + * { margin-top: var(--gp-prose-heading-follow-space); }
	.gp-prose a { color: var(--gp-ink); text-decoration: underline; text-decoration-color: var(--gp-gold); text-decoration-thickness: var(--gp-space-rule); }
	.gp-prose a:hover { text-decoration-color: var(--gp-ink); }
	.gp-prose ul, .gp-prose ol { padding-left: var(--gp-prose-list-indent); }
	.gp-prose li + li { margin-top: var(--gp-prose-list-space); }
	.gp-prose ul > li::marker { color: var(--gp-gold); }
	.gp-prose blockquote { padding: var(--gp-space-roomy) var(--gp-space-card); border-radius: var(--gp-card-radius); background: var(--gp-paper-3); color: var(--gp-ink-2); }
	.gp-prose img, .gp-prose video, .gp-prose iframe { border-radius: var(--gp-space-control); max-width: 100%; }
	.gp-prose figure { margin-inline: 0; }
	.gp-prose figcaption, .gp-prose .wp-element-caption { margin-top: var(--gp-prose-heading-follow-space); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-prose pre { padding: var(--gp-space-control); border-radius: var(--gp-space-label); background: var(--gp-ink); color: var(--gp-paper-3); overflow-x: auto; }
	.gp-prose hr { margin: var(--gp-prose-rule-space) 0; }
	.gp-prose .wp-block-button__link { border-radius: var(--gp-control-radius); background: var(--gp-ink); color: var(--gp-white); text-decoration: none; padding: var(--gp-space-standard) var(--gp-space-panel); }

	/* ---------- Comments ---------- */
	.gp-comments { display: flex; flex-direction: column; gap: var(--gp-s6); }
	.gp-comments__title { font-size: var(--gp-fs-comments-title); }
	.gp-comments__note { font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-comments__list, .gp-comments__list .children { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-s3); }
	.gp-comments__list .children { margin: var(--gp-s3) 0 0 var(--gp-s8); }
	.gp-comments__list .comment-body { padding: var(--gp-space-control) var(--gp-space-roomy); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-comments__list .comment-author { display: flex; align-items: center; gap: var(--gp-space-inline); font-weight: 500; }
	.gp-comments__list .comment-author img { width: var(--gp-space-wide); height: var(--gp-space-wide); border-radius: 50%; }
	.gp-comments__list .comment-author .says { display: none; }
	.gp-comments__list .comment-metadata { font-size: var(--gp-fs-xs); color: var(--gp-soft); margin: var(--gp-space-rule) 0 var(--gp-space-small) var(--gp-comment-meta-indent); }
	.gp-comments__list .comment-metadata a { color: inherit; text-decoration: none; }
	.gp-comments__list .comment-content { font-size: var(--gp-fs-md); line-height: var(--gp-lh-detail); }
	.gp-comments__list .reply a { font-size: var(--gp-fs-sm); font-weight: 500; color: var(--gp-ink); }
	.gp-comment-form { padding: var(--gp-comment-form-padding); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-comment-form form { display: flex; flex-direction: column; gap: var(--gp-s4); margin-top: var(--gp-s3); }
	.gp-comment-form p { margin: 0; }
	.gp-comment-form label { display: block; margin-bottom: var(--gp-space-tight); font-size: var(--gp-fs-sm); font-weight: 500; }
	.gp-comment-form input[type="text"], .gp-comment-form input[type="email"], .gp-comment-form input[type="url"], .gp-comment-form textarea { width: 100%; min-height: var(--gp-control-height); padding: var(--gp-space-inline) var(--gp-space-label); border: 1px solid var(--gp-line-strong); border-radius: var(--gp-control-radius); background: var(--gp-paper); font-size: var(--gp-fs-md); }
	.gp-comment-form textarea { min-height: var(--gp-textarea-comment-height); resize: vertical; }
	.gp-comment-form input:focus, .gp-comment-form textarea:focus { outline: 2px solid var(--gp-ink); outline-offset: 2px; border-color: var(--gp-ink); background: var(--gp-surface); }
	.gp-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--gp-space-small); font-size: var(--gp-fs-sm); color: var(--gp-muted); }
	.gp-comment-form .comment-form-cookies-consent label { min-height: var(--gp-control-height); margin: 0; font-weight: 400; }
	.gp-comment-form .comment-form-cookies-consent input { margin-top: var(--gp-focus-width); accent-color: var(--gp-ink); }
	.gp-comment-form .form-submit { display: flex; }
	.gp-comment-form #cancel-comment-reply-link { margin-left: var(--gp-space-inline); font-size: var(--gp-fs-sm); }

	/* ---------- Article rail ---------- */
	.gp-rail__inner { display: flex; flex-direction: column; gap: var(--gp-s3); }
	.gp-railcard { display: flex; flex-direction: column; gap: var(--gp-s3); padding: var(--gp-space-roomy) var(--gp-space-panel); background: var(--gp-surface); border: 1px solid var(--gp-line); border-radius: var(--gp-card-radius); }
	.gp-railcard__title { font-size: var(--gp-fs-md); font-weight: 600; }
	.gp-railcard__text { font-size: var(--gp-fs-sm); color: var(--gp-muted); line-height: var(--gp-lh-compact); }
	.gp-railcard .gp-btn, .gp-railcard .gp-more { align-self: flex-start; }
	.gp-toc { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-rule); max-height: var(--gp-toc-max-height); overflow-y: auto; }
	.gp-toc a { display: flex; align-items: center; min-height: var(--gp-control-height); padding: var(--gp-space-detail) var(--gp-space-inline); border-left: 2px solid var(--gp-line-toc); font-size: var(--gp-fs-sm); line-height: var(--gp-lh-toc); color: var(--gp-muted); text-decoration: none; transition: color var(--gp-fast), border-color var(--gp-fast), background var(--gp-fast); }
	.gp-toc a:hover { color: var(--gp-ink); background: var(--gp-paper-2); }
	.gp-toc a[aria-current="true"] { color: var(--gp-ink); font-weight: 500; border-left-color: var(--gp-gold); background: var(--gp-gold-wash); }
	.gp-railtools { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-rule); }
	.gp-railtools a { min-width: var(--gp-control-height); display: flex; align-items: center; gap: var(--gp-space-inline); min-height: var(--gp-control-height); padding: 0 var(--gp-space-small); margin: 0 var(--gp-offset-small); border-radius: var(--gp-control-radius); color: var(--gp-ink); text-decoration: none; font-size: var(--gp-fs-md); }
	.gp-railtools a:hover { background: var(--gp-paper-3); }
	.gp-railtools__swatch { flex: none; width: var(--gp-space-card); height: var(--gp-space-card); border-radius: var(--gp-space-detail); background: var(--c); }
	.gp-railtools__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
	.gp-railtools__price { flex: none; font-family: var(--gp-mono); font-size: var(--gp-fs-small); color: var(--gp-soft); }
	.gp-railstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gp-space-small); }
	.gp-railstats > div { display: flex; flex-direction: column; gap: var(--gp-space-rule); padding: var(--gp-space-inline); border-radius: var(--gp-control-radius); background: var(--gp-paper-2); }
	.gp-railstats b { font-size: var(--gp-fs-h3); font-weight: 300; letter-spacing: var(--gp-track-display); line-height: var(--gp-lh-stat); }
	.gp-railstats span { font-size: var(--gp-fs-small); line-height: var(--gp-lh-title); color: var(--gp-soft); }
	.gp-railchecks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-tight); font-size: var(--gp-fs-sm); }
	.gp-railchecks li { display: flex; gap: var(--gp-space-small); }
	.gp-railchecks li::before { content: "\2713"; color: var(--gp-good-ink); font-weight: 700; }
	.gp-railshare { display: flex; flex-wrap: wrap; gap: var(--gp-space-tight); }
	.gp-railshare__btn { min-width: var(--gp-control-height); display: inline-flex; align-items: center; min-height: var(--gp-control-height); padding: 0 var(--gp-space-standard); border: 1px solid var(--gp-line); border-radius: var(--gp-r-pill); background: var(--gp-surface); font-size: var(--gp-fs-sm); color: var(--gp-ink-2); text-decoration: none; cursor: pointer; }
	.gp-railshare__btn:hover { background: var(--gp-paper-3); color: var(--gp-ink); }

	/* ---------- Footer ---------- */
	.gp-footer { padding-top: var(--gp-s16); padding-bottom: var(--gp-s10); }
	.gp-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gp-s10) var(--gp-s16); }
	.gp-footer__about { display: flex; flex-direction: column; gap: var(--gp-s3); max-width: var(--gp-footer-about-measure); color: var(--gp-muted); font-size: var(--gp-fs-md); line-height: var(--gp-lh-detail); }
	.gp-footer__cols { flex: 1 1 var(--gp-halo-newsletter-height); min-width: 0; max-width: var(--gp-footer-columns-width); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--gp-grid-category-min), 100%), 1fr)); gap: var(--gp-s8) var(--gp-s10); font-size: var(--gp-fs-md); }
	.gp-footer__cols p { font-weight: 500; margin-bottom: var(--gp-s3); }
	.gp-footer__cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-inline); }
	.gp-footer__cols a { display: inline-flex; align-items: center; min-width: var(--gp-control-height); min-height: var(--gp-control-height); padding: var(--gp-space-hair) var(--gp-space-standard); border-radius: var(--gp-r-pill); color: var(--gp-ink-2); text-decoration: none; }
	.gp-footer__cols a:hover { color: var(--gp-ink); background: var(--gp-paper-3); }
	.gp-footer__word { margin-top: var(--gp-s12); font-weight: 300; font-size: var(--gp-fs-footer-word); line-height: var(--gp-lh-wordmark); letter-spacing: var(--gp-track-wordmark); color: var(--gp-ink); }
	.gp-footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gp-s2) var(--gp-s6); margin-top: var(--gp-s6); font-size: var(--gp-fs-sm); color: var(--gp-soft); }
	.gp-footer__links { display: inline-flex; flex-wrap: wrap; gap: var(--gp-s2) var(--gp-s4); }
	.gp-footer__links a { color: inherit; }
	.gp-footer__links a:hover { color: var(--gp-ink); }

	/* ---------- Forms (WS Form output + fallbacks) ---------- */
	.gp-form input[type="email"], .gp-form input[type="text"], .gp-form input[type="url"], .gp-form textarea, .gp-form select { width: 100%; min-height: var(--gp-pill-height); padding: 0 var(--gp-space-label); border: 1px solid var(--gp-line-strong); border-radius: var(--gp-control-radius); background: var(--gp-surface); }
	.gp-form textarea { padding: var(--gp-space-standard) var(--gp-space-label); min-height: var(--gp-textarea-height); }
	.gp-form button[type="submit"], .gp-form input[type="submit"] { min-height: var(--gp-control-height); padding: 0 var(--gp-space-roomy); border: 0; border-radius: var(--gp-control-radius); background: var(--gp-ink); color: var(--gp-white); font-weight: 500; cursor: pointer; }
	/* Paid listing form (template-parts/intake-form.php) */
	.gp-intake { display: flex; flex-direction: column; gap: var(--gp-s4); }
	.gp-intake label { min-height: var(--gp-control-height); display: flex; flex-direction: column; gap: var(--gp-space-tight); min-width: 0; }
	.gp-intake label > span { font-size: var(--gp-fs-sm); font-weight: 500; color: var(--gp-ink-2); }
	.gp-intake__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--gp-cover-pick-height), 100%), 1fr)); gap: var(--gp-s4); }
	.gp-intake__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--gp-cover-pick-height), 100%), 1fr)); gap: var(--gp-s3); margin: 0; padding: 0; border: 0; }
	.gp-intake__plans legend { padding: 0; margin-bottom: var(--gp-space-tight); font-size: var(--gp-fs-sm); font-weight: 500; color: var(--gp-ink-2); }
	.gp-intake label.gp-intake__plan { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--gp-space-hair) var(--gp-space-inline); padding: var(--gp-space-label) var(--gp-space-control); border: 1px solid var(--gp-line-strong); border-radius: var(--gp-space-control); background: var(--gp-surface); cursor: pointer; }
	.gp-intake__plan:has(input:checked) { border-color: var(--gp-gold); box-shadow: var(--gp-shadow-selected); background: var(--gp-gold-wash); }
	.gp-intake__plan input { accent-color: var(--gp-ink); margin: 0; }
	.gp-intake__plan-name { font-weight: 500; }
	.gp-intake__plan-price { font-weight: 500; font-variant-numeric: tabular-nums; }
	.gp-intake__plan-what { grid-column: 2 / -1; font-size: var(--gp-fs-sm); color: var(--gp-muted); line-height: var(--gp-lh-compact); }
	.gp-intake button[type="submit"] { align-self: flex-start; padding: 0 var(--gp-space-card); }
	.gp-intake__hp { position: absolute; left: var(--gp-honeypot-offset); width: var(--gp-link-underline-width); height: var(--gp-link-underline-width); overflow: hidden; }
	.gp-intake-msg { padding: var(--gp-space-inline) var(--gp-space-label); border-radius: var(--gp-control-radius); background: var(--gp-gold-wash); border: 1px solid var(--gp-gold-line); font-size: var(--gp-fs-md); }
	.gp-intake-msg--bad { background: var(--gp-error-surface); border-color: var(--gp-error-line); }
	.gp-intake-done { display: flex; flex-direction: column; gap: var(--gp-s2); padding: var(--gp-space-panel) var(--gp-space-card); border-radius: var(--gp-card-radius); background: var(--gp-gold-wash); border: 1px solid var(--gp-gold-line); }
	.gp-intake-done h3 { font-size: var(--gp-s5); font-weight: 500; }
	/* One question per step: nav.js adds .is-stepped; without it every step shows. */
	.gp-step { display: flex; flex-direction: column; gap: var(--gp-s4); min-width: 0; margin: 0; padding: 0; border: 0; }
	.gp-step.gp-intake__plans { display: grid; }
	.gp-intake .gp-step__q { font-size: var(--gp-heading-panel); font-weight: 500; letter-spacing: var(--gp-track-heading); color: var(--gp-ink); }
	.gp-intake.is-stepped { gap: var(--gp-s6); }
	.gp-intake.is-stepped .gp-step label { gap: var(--gp-s4); }
	.gp-intake.is-stepped .gp-step:not(.is-current) { display: none; }
	.gp-intake.is-stepped .gp-step__q { font-size: var(--gp-heading-section); font-weight: 400; letter-spacing: var(--gp-track-tight); line-height: var(--gp-lh-page-title); }
	.gp-intake.is-stepped .gp-step input:is([type="url"], [type="text"], [type="email"]) { min-height: var(--gp-step-input-height); font-size: var(--gp-fs-lg); }
	.gp-intake.is-stepped .gp-intake__plans > legend { padding-bottom: var(--gp-s4); }
	.gp-intake.is-stepped .gp-step__submit { margin-top: var(--gp-s2); }
	.gp-step__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-s3); }
	.gp-steps-bar { display: flex; align-items: center; gap: var(--gp-s3); font-family: var(--gp-mono); font-size: var(--gp-fs-sm); color: var(--gp-muted); font-variant-numeric: tabular-nums; }
	.gp-steps-bar__track { flex: 1 1 auto; height: var(--gp-step-bar-height); border-radius: var(--gp-r-pill); background: var(--gp-paper-3); overflow: hidden; }
	.gp-steps-bar__fill { display: block; width: var(--p, 0%); height: 100%; background: var(--gp-gold); transition: width var(--gp-motion-checklist); }
	.gp-step__nav { display: flex; align-items: center; gap: var(--gp-s3); }
	:is(.gp-step__nav, .gp-steps-bar)[hidden], .gp-step__nav [hidden] { display: none; }
	@media (prefers-reduced-motion: reduce) { .gp-steps-bar__fill { transition: none; } }
	/* Live plan checklist beside the listing form (template-submit.php) */
	.gp-plancheck { position: sticky; top: var(--gp-s6); }
	.gp-plancheck__plan { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gp-s3); padding-bottom: var(--gp-s3); border-bottom: 1px solid var(--gp-line); }
	.gp-plancheck__plan span { font-weight: 500; }
	.gp-plancheck__plan b { font-size: var(--gp-r-2xl); font-weight: 500; font-variant-numeric: tabular-nums; }
	.gp-plancheck__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gp-space-inline); font-size: var(--gp-fs-md); }
	.gp-plancheck__list li { display: grid; grid-template-columns: var(--gp-space-card) 1fr auto; align-items: center; gap: var(--gp-space-inline); transition: color var(--gp-motion-checklist) ease; }
	.gp-plancheck__mark { display: grid; place-items: center; width: var(--gp-space-card); height: var(--gp-space-card); border-radius: var(--gp-r-pill); font-size: var(--gp-fs-small); font-weight: 700; transition: background-color var(--gp-motion-checklist) ease, color var(--gp-motion-checklist) ease; }
	.gp-plancheck__list li.is-yes .gp-plancheck__mark { background: var(--gp-good-ink); color: var(--gp-white); }
	.gp-plancheck__list li.is-yes .gp-plancheck__mark::before { content: "\2713"; }
	.gp-plancheck__list li.is-no { color: var(--gp-soft); }
	.gp-plancheck__list li.is-no .gp-plancheck__mark { background: var(--gp-checklist-empty-surface); color: var(--gp-checklist-empty-ink); }
	.gp-plancheck__list li.is-no .gp-plancheck__mark::before { content: "\2715"; }
	.gp-plancheck__detail { font-size: var(--gp-fs-sm); color: var(--gp-muted); white-space: normal; }
	@media (prefers-reduced-motion: reduce) { .gp-plancheck__list li, .gp-plancheck__mark { transition: none; } }
	.gp-admin-note { padding: var(--gp-space-inline) var(--gp-space-label); border: 1px dashed var(--gp-gold-line); border-radius: var(--gp-control-radius); background: var(--gp-gold-wash); font-size: var(--gp-fs-sm); }
}

/* Named variants: independent of page ancestors. */
@layer components {
.gp-pond--passive, .gp-halo--passive { pointer-events: none; }
.gp-cover--result { --cover-h: var(--gp-cover-result-height); --cover-fs: var(--gp-fs-copy); border-radius: var(--gp-control-radius); }
.gp-cover--result.gp-cover--pair .gp-cover__name { padding: var(--gp-focus-width) var(--gp-space-tight) var(--gp-space-hair); border-radius: var(--gp-space-detail); font-size: var(--gp-fs-small); left: var(--gp-space-tight); bottom: var(--gp-space-tight); }
.gp-cover--result.gp-cover--pair .gp-cover__name--b { left: auto; right: var(--gp-space-tight); top: var(--gp-space-tight); bottom: auto; }
.gp-cover--result .gp-cover__vs { width: var(--gp-radius-panel-fixed); height: var(--gp-radius-panel-fixed); font-size: var(--gp-fs-small); }
@media (max-width: 66rem) { .gp-railcard--toc { display: none; } }
.gp-sec-head--tool h2 { font-size: var(--gp-heading-section); margin-bottom: var(--gp-s5); }
.gp-sec-head--tool { margin-bottom: 0; }
.gp-summary--section { margin-top: var(--gp-s4); }
.gp-disclosure--section { margin-top: var(--gp-s3); }
.gp-bullets--body, .gp-stat__text--body, .gp-card--body p { font-size: var(--gp-fs-base); line-height: var(--gp-lh-detail); }
.gp-catchip--body { font-size: var(--gp-fs-md); padding: 0 var(--gp-space-label); }
.gp-btn--block { width: 100%; }
.gp-pillbar--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--gp-space-rule); -webkit-mask-image: linear-gradient(90deg, var(--gp-ink-black) calc(100% - var(--gp-avatar-size)), var(--gp-transparent)); mask-image: linear-gradient(90deg, var(--gp-ink-black) calc(100% - var(--gp-avatar-size)), var(--gp-transparent)); }
.gp-pillbar--scroll::-webkit-scrollbar { display: none; }
.gp-pillbar--scroll .gp-pill { flex: 0 0 auto; white-space: nowrap; }

.gp-sec-head--categories h2 { display: flex; align-items: center; gap: var(--gp-space-standard); font-size: var(--gp-heading-section); }
.gp-search__input--picker { min-height: var(--gp-control-height); padding: 0 var(--gp-space-label); border: 1px solid var(--gp-line); border-radius: var(--gp-control-radius); background: var(--gp-paper); }
.gp-search__input--picker:focus { border-color: var(--gp-ink); background: var(--gp-surface); }
.gp-cover--comparison { --cover-h: var(--gp-cover-comparison-height); border-radius: var(--gp-r-2xl); }

.gp-disclosure--comparison { margin-top: var(--gp-s5); }
.gp-cover--alternative { --cover-h: var(--gp-cover-alternative-height); --cover-fs: var(--gp-fs-base); border-radius: var(--gp-control-radius); }
}

@layer components { .gp-summary__text { color: var(--gp-ink-copy); font-size: var(--gp-fs-bullet); line-height: var(--gp-lh-detail); } }

@layer components { .gp-byline__note { display: flex; align-items: center; gap: var(--gp-space-inline); font-size: var(--gp-fs-sm); color: var(--gp-muted); } }

@layer components { .gp-judge__h { font-size: var(--gp-fs-md); font-weight: 500; letter-spacing: 0; } }

@layer components { .gp-rail__inner { height: 100%; } }

@layer components { .gp-railcard--toc { position: sticky; top: var(--gp-s6); } }