/* Gateway Wizard Site. Uses the theme's presets so it follows the active style variation. */
:root {
	--gw-ink: var(--wp--preset--color--contrast, #111);
	--gw-paper: var(--wp--preset--color--base, #fff);
	--gw-line: color-mix(in srgb, var(--gw-ink) 14%, transparent);
	--gw-soft: color-mix(in srgb, var(--gw-ink) 4%, var(--gw-paper));
	--gw-muted: color-mix(in srgb, var(--gw-ink) 64%, var(--gw-paper));
	--gw-accent: #1f6f5c;
	--gw-radius: 12px;
	--gw-gap: var(--wp--preset--spacing--40, 1.5rem);
}

.gwsite-hero { margin-block-end: var(--wp--preset--spacing--50, 2.5rem); }
.gwsite-hero__title { font-size: var(--wp--preset--font-size--xx-large, clamp(2rem, 5vw, 3.25rem)); line-height: 1.1; margin: .4em 0 .3em; letter-spacing: -0.02em; }
.gwsite-hero__lead { font-size: var(--wp--preset--font-size--large, 1.25rem); color: var(--gw-muted); max-width: 46ch; margin: 0 0 1.25em; }
.gwsite-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.gwsite-note { color: var(--gw-muted); font-size: var(--wp--preset--font-size--small, .9rem); }

.gwsite-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--small, .9rem); }
.gwsite-crumbs li + li::before { content: "/"; margin-inline-end: .4em; color: var(--gw-muted); }
.gwsite-crumbs a { color: var(--gw-muted); text-decoration: none; }
.gwsite-crumbs a:hover { color: var(--gw-ink); text-decoration: underline; }

.gwsite-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.gwsite-badge { display: inline-block; border: 1px solid var(--gw-line); border-radius: 999px; padding: .15em .7em; font-size: var(--wp--preset--font-size--small, .85rem); background: var(--gw-soft); }
.gwsite-badge--link { text-decoration: none; color: inherit; }
.gwsite-badge--link:hover { border-color: var(--gw-ink); }

.gwsite-section { margin-block: var(--wp--preset--spacing--60, 3.5rem) 0; scroll-margin-top: 2rem; }
.gwsite-section > h2 { font-size: var(--wp--preset--font-size--x-large, 1.75rem); margin: 0 0 .8em; letter-spacing: -0.01em; }
.gwsite-section h2 a { color: inherit; text-decoration: none; }
.gwsite-section h2 a:hover { text-decoration: underline; }
.gwsite-prose { max-width: 68ch; }
.gwsite-body { margin-block: 0; }
.gwsite-body > * { max-width: 68ch; }

.gwsite-grid { display: grid; gap: var(--gw-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gwsite-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.35rem; border: 1px solid var(--gw-line); border-radius: var(--gw-radius); background: var(--gw-paper); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.gwsite-card:hover { border-color: var(--gw-ink); transform: translateY(-2px); }
.gwsite-card__title { font-weight: 600; font-size: 1.1rem; }
.gwsite-card__text { color: var(--gw-muted); font-size: .95rem; }
.gwsite-card__meta { margin-top: auto; padding-top: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-accent); font-weight: 600; }

.gwsite-table-wrap { overflow-x: auto; border: 1px solid var(--gw-line); border-radius: var(--gw-radius); }
.gwsite-compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gwsite-compare th, .gwsite-compare td { padding: .75rem 1rem; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
.gwsite-compare tr:last-child td { border-bottom: 0; }
.gwsite-compare th { background: var(--gw-soft); font-weight: 600; }
.gwsite-compare td:nth-child(n+2), .gwsite-compare th:nth-child(n+2) { text-align: center; width: 5.5rem; }
.gwsite-yes { color: var(--gw-accent); font-weight: 700; }
.gwsite-no { color: var(--gw-muted); }

.gwsite-checks { list-style: none; padding: 0; columns: 2 300px; column-gap: 2rem; }
.gwsite-checks li { break-inside: avoid; padding-left: 1.6em; position: relative; margin-bottom: .6em; }
.gwsite-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--gw-accent); font-weight: 700; }

.gwsite-tiers { display: grid; gap: var(--gw-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 1rem; }
.gwsite-tier { border: 1px solid var(--gw-line); border-radius: var(--gw-radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.gwsite-tier.is-featured { border-color: var(--gw-ink); box-shadow: 0 0 0 1px var(--gw-ink); }
.gwsite-tier h3 { margin: 0; font-size: 1.05rem; }
.gwsite-tier__price { margin: .25rem 0 0; color: var(--gw-muted); }
.gwsite-tier__price span { font-size: 2.25rem; font-weight: 700; color: var(--gw-ink); letter-spacing: -0.02em; }
.gwsite-tier .wp-block-buttons { margin-top: auto; padding-top: .75rem; }

.gwsite-faq { border-bottom: 1px solid var(--gw-line); padding: .9rem 0; max-width: 72ch; }
.gwsite-faq summary { cursor: pointer; font-weight: 600; }
.gwsite-faq > :not(summary) { margin-bottom: 0; }

.gwsite-cta { padding: 2rem; border-radius: var(--gw-radius); background: var(--gw-soft); border: 1px solid var(--gw-line); }
.gwsite-cta > h2 { margin-bottom: .6em; }
.gwsite-disclosure { margin-top: 1rem; max-width: 72ch; }

.gwsite-brandlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

.gwsite-browse__platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.gwsite-browse__platforms > span { color: var(--gw-muted); }

.gwsite-home-hero { padding-block: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--60, 3.5rem); }
.gwsite-home-hero h1 { max-width: 18ch; letter-spacing: -0.025em; line-height: 1.05; }
.gwsite-home-hero > p { max-width: 52ch; color: var(--gw-muted); }
.gwsite-points { margin-block: var(--wp--preset--spacing--60, 3.5rem); padding-block: var(--wp--preset--spacing--50, 2.5rem); border-block: 1px solid var(--gw-line); }
.gwsite-points h3 { font-size: 1.15rem; margin-bottom: .4em; }
.gwsite-points p { color: var(--gw-muted); margin: 0; font-size: var(--wp--preset--font-size--medium, 1rem); }

.gwsite-footer-legal { color: var(--gw-muted); margin-top: var(--wp--preset--spacing--50, 2.5rem); }
.gwsite-placeholder { padding: 1rem; border: 1px dashed var(--gw-line); border-radius: var(--gw-radius); color: var(--gw-muted); font-size: .9rem; }