@font-face {
	font-family: "FontAwesome";
	src: url("../fonts/fontawesome-webfont.woff2") format("woff2");
	font-style: normal;
	font-weight: normal;
	font-display: block;
}

:root {
	color-scheme: light;
	font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #172033;
	background: #f8faff;
	--sono-blue: #2d6fb5;
	--sono-purple: #8e54e9;
	--sono-navy: #102646;
	--sono-muted: #596579;
	--sono-border: #e1e7f0;
	--govern: #e06820;
	--audit: #1f1f47;
	--strategy: #306038;
}

* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, #f8faff, #f6f8fc); }
button, input { font: inherit; }
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.fa-shield::before { content: "\f132"; }
.fa-search::before { content: "\f002"; }
.fa-bullseye::before { content: "\f140"; }
.fa-cube::before { content: "\f1b2"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-external-link::before { content: "\f08e"; }
.page-width { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.stripe-disabled-warning {
	position: fixed; z-index: 1000; top: 5px; left: 12px; display: flex; max-width: min(300px, calc(100vw - 24px));
	align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #f1c453; border-radius: 8px;
	background: #fff3cd; box-shadow: 0 5px 14px rgba(87, 62, 6, .18); color: #684d08; font-size: .76rem; font-weight: 700;
}
.stripe-disabled-warning-icon {
	display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; border: 2px solid #d99b00; border-radius: 50%;
	color: #9a6c00; font-size: .72rem; line-height: 1;
}

.page-header { position: relative; z-index: 10; background: #fff; border-bottom: 1px solid var(--sono-border); }
.header-content { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 110px; height: auto; }
.site-link { color: var(--sono-blue); font-size: .88rem; font-weight: 700; text-decoration: none; }
.site-link:hover { color: var(--sono-purple); }

.catalogue-hero {
	position: relative; overflow: hidden; color: #fff;
	background: radial-gradient(circle at 88% 26%, rgba(45,111,181,.38), transparent 35%), linear-gradient(135deg, #102646, #244f7d);
}
.catalogue-hero::after {
	position: absolute; inset: 0; content: ""; pointer-events: none;
	background: repeating-radial-gradient(circle at 106% 112%, transparent 0 74px, rgba(169,205,248,.12) 75px 76px);
}
.hero { position: relative; z-index: 1; padding: 68px 0 190px; }
.hero h1 { max-width: 800px; margin: 12px 0 18px; font-size: clamp(2.4rem, 5vw, 4.35rem); line-height: 1.04; letter-spacing: -.045em; }
.hero-copy { max-width: 720px; margin: 0; color: #e1ebf6; font-size: 1.1rem; line-height: 1.7; }
.eyebrow, .section-label, .price-label { margin: 0; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: #b9d9ff; }

.product-selector { position: relative; z-index: 2; margin-top: -146px; padding-bottom: 72px; }
.billing-period { display: flex; width: fit-content; gap: 5px; margin: 0 0 28px 24px; padding: 5px; background: #fff; border: 1px solid rgba(255,255,255,.65); border-radius: 11px; box-shadow: 0 10px 28px rgba(17,29,52,.13); }
.billing-period legend, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.billing-period label { cursor: pointer; }
.billing-period input { position: absolute; opacity: 0; pointer-events: none; }
.billing-period span { display: block; min-width: 118px; padding: 11px 20px; border-radius: 8px; color: var(--sono-muted); font-weight: 700; text-align: center; }
.billing-period input:checked + span { background: linear-gradient(135deg, var(--sono-blue), var(--sono-purple)); color: #fff; box-shadow: 0 7px 18px rgba(76,99,189,.24); }
.billing-period input:focus-visible + span { outline: 3px solid rgba(185,217,255,.75); outline-offset: 2px; }

.purchase-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 22px; align-items: stretch; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.product-card, .purchase-summary, .empty-state { background: #fff; border: 1px solid #dfe6f0; border-radius: 16px; box-shadow: 0 15px 38px rgba(20,45,78,.1); }
.product-card {
	--product-accent: var(--sono-blue);
	display: flex; flex-direction: column; padding: 22px;
	transition: transform 180ms, border-color 180ms, box-shadow 180ms;
}
.product-govern { --product-accent: var(--govern); }
.product-audit { --product-accent: var(--audit); }
.product-strategy { --product-accent: var(--strategy); }
.product-default { --product-accent: var(--sono-blue); }
.product-card.is-selected { border-color: var(--product-accent); box-shadow: 0 18px 42px color-mix(in srgb, var(--product-accent) 18%, transparent); }
.product-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-identity { display: grid; gap: 15px; }
.product-mark {
	display: grid; width: 54px; height: 54px; place-items: center; border-radius: 10px;
	background: var(--product-accent); color: #fff; font-size: 1.8rem;
	box-shadow: 0 9px 20px color-mix(in srgb, var(--product-accent) 23%, transparent);
}
.product-mark .fa { font-size: 1.7rem; }
.product-card h2, .empty-state h2 { margin: 0; color: var(--product-accent); font-size: 1.35rem; line-height: 1.25; }
.product-selection { display: inline-grid; cursor: pointer; }
.product-selection input { position: absolute; opacity: 0; }
.selection-box { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #bcc9d9; border-radius: 6px; color: transparent; font-size: .8rem; font-weight: 900; }
.product-selection input:checked + .selection-box { background: var(--product-accent); border-color: var(--product-accent); color: #fff; }
.product-selection input:focus-visible + .selection-box { outline: 3px solid color-mix(in srgb, var(--product-accent) 25%, transparent); outline-offset: 3px; }
.product-description { min-height: 4.6em; margin: 18px 0 0; color: #48566c; font-size: .88rem; line-height: 1.55; }
.section-label { color: var(--sono-muted); }
.features { padding: 20px 0 8px; }
.features ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.features li { position: relative; padding-left: 14px; color: #344057; font-size: .8rem; line-height: 1.4; }
.features li::before { position: absolute; left: 0; color: var(--product-accent); content: "•"; font-weight: 900; }
.prices { margin-top: 4px; padding-top: 10px; }
.price { display: flex; align-items: baseline; gap: 5px; }
.price strong { color: var(--product-accent); font-size: 1.55rem; }
.price > span:last-child { color: #717b8d; font-size: .82rem; }
.selector-ready [data-billing-price][hidden] { display: none; }
.seat-quantity { display: grid; gap: 7px; margin-top: 18px; }
.seat-quantity label { font-size: .84rem; font-weight: 700; }
.seat-quantity input, .purchase-form input { width: 100%; padding: 11px 12px; border: 1px solid #bcc7d6; border-radius: 8px; color: #172033; background: #fff; }
.seat-quantity input:focus, .purchase-form input:focus { outline: 3px solid rgba(45,111,181,.18); border-color: var(--sono-blue); }
.seat-quantity input:disabled { color: #8b94a3; background: #f1f3f6; cursor: not-allowed; }
.seat-quantity input[aria-invalid="true"] { border-color: #b42318; }
.validation-message { color: #b42318; font-size: .78rem; }
.product-subtotal {
	display: flex; min-height: 46px; align-items: baseline; justify-content: center; gap: 5px; margin-top: 16px; padding: 12px;
	border-radius: 8px; background: color-mix(in srgb, var(--product-accent) 9%, #fff); color: var(--product-accent); visibility: hidden;
}
.product-subtotal.is-visible { visibility: visible; }
.product-subtotal strong { font-size: 1rem; }
.product-subtotal span { font-size: .78rem; font-weight: 700; }

.purchase-summary { position: sticky; top: 20px; display: flex; height: 100%; min-height: 0; flex-direction: column; padding: 25px 22px; }
.purchase-summary h2 { margin: 0; font-size: 1.25rem; }
.summary-body { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 22px; }
.summary-empty { margin: 0; color: #667085; line-height: 1.6; }
.summary-content { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.summary-lines { display: grid; gap: 16px; margin: 0; padding: 0 0 18px; list-style: none; overflow-y: auto; }
.summary-line, .summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.summary-line > span { display: grid; gap: 4px; }
.summary-line span span { color: #5e687b; font-size: .8rem; }
.summary-line strong { font-size: .86rem; white-space: nowrap; }
.summary-total { margin-top: auto; padding-top: 18px; border-top: 1px solid #e5eaf1; color: #172033; font-size: .88rem; font-weight: 700; }
.summary-total-price { display: grid; justify-items: end; }
.summary-total strong { color: var(--sono-blue); font-size: 1.55rem; }
.summary-total small { color: var(--sono-blue); font-size: .72rem; }
.purchase-summary .continue-button { width: 100%; margin-top: 18px; }
.continue-button, .back-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border: 1px solid transparent; border-radius: 9px; background: #a7b4c5; color: #fff; font-weight: 800; text-decoration: none; cursor: not-allowed; }
.continue-button:not(:disabled), .back-link { background: linear-gradient(135deg, var(--sono-blue), var(--sono-purple)); cursor: pointer; }
.continue-button:not(:disabled):hover, .back-link:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(76,99,189,.24); }
.continue-button:focus-visible, .back-link:focus-visible { outline: 3px solid rgba(45,111,181,.28); outline-offset: 3px; }
.secure-note { margin: -8px 0 0; color: #667085; font-size: .76rem; text-align: center; }
.purchase-summary .secure-note { margin: 10px 0 0; }
.catalogue-note { display: flex; align-items: center; gap: 9px; margin: 28px 4px 0; color: var(--sono-muted); font-size: .88rem; }
.catalogue-note > span { display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #7a8ba3; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.empty-state { margin-top: 48px; padding: 40px; text-align: center; }
.empty-state h2 { color: #172033; }
.empty-state p { margin: 12px 0 0; color: #667085; }

@media (max-width: 980px) {
	.purchase-layout { grid-template-columns: 1fr; }
	.product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.purchase-summary { position: static; height: auto; min-height: 360px; }
}

@media (max-width: 680px) {
	.stripe-disabled-warning { font-size: .7rem; }
	.page-width { width: min(100% - 28px,1180px); }
	.header-content { min-height: 60px; }
	.brand img { width: 110px; }
	.site-link { font-size: .78rem; }
	.hero { padding: 48px 0 150px; }
	.hero h1 { font-size: 2.35rem; }
	.product-selector { margin-top: -118px; }
	.billing-period { width: 100%; margin-left: 0; }
	.billing-period label { flex: 1; }
	.billing-period span { min-width: 0; }
	.product-grid { grid-template-columns: 1fr; }
	.product-card { min-height: 0; }
}