/* Shared components for launch readiness. Loaded after site.css on every page. */
:root {
  /* Gold text that meets 4.5:1 on white (5.4:1) and cream (5.0:1). --sp-gold stays for borders and accents. */
  --sp-gold-text: #8A6420;
  --sp-error: #A3261B;
  --sp-ok: #2F6B3A;
  --sp-focus: 3px solid #8A6420;
}

/* R13: contrast fixes for gold text on light surfaces */
a, .eyebrow, .brand-tagline, h1 em, .proof-card .label, .stage .n, .stage .when,
.stage-detail .meta, .stage-detail .when, .news-ticker-more { color: var(--sp-gold-text); }
a:hover, .footer-links a:hover, a.news-ticker-item:hover .nt-title { color: var(--sp-ink); text-decoration: underline; }
.btn-ghost:hover { color: var(--sp-ink); }
.btn-primary, .btn-primary:hover { text-decoration: none; }

/* R13: visible focus for every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--sp-focus); outline-offset: 3px;
}
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: var(--sp-focus); }

.visually-hidden-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--sp-paper); color: var(--sp-ink); padding: 10px 14px; border-radius: var(--sp-radius-sm); }
.skip-link:focus { left: 8px; }

button[disabled], .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

.news-item .news-link { margin-top: 10px; }

/* Footer additions */
.footer-links { row-gap: 10px; }
.footer-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--sp-ink-soft); cursor: pointer; text-decoration: underline; min-height: 24px; }
.footer-link-btn:hover { color: var(--sp-ink); }
.footer-legal { width: 100%; font-size: 12px; color: var(--sp-ink-soft); margin: 8px 0 0; }

/* R14: the decorative case-card shape and wide grid content must not cause sideways scrolling */
.case { overflow: hidden; }
.product-grid > * { min-width: 0; }
.sla { table-layout: fixed; overflow-wrap: anywhere; }

/* Product pages */
.product-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 32px; align-items: start; }
.product-panel { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 28px; box-shadow: var(--sp-shadow); }
.product-panel h2, .product-panel h3 { margin-top: 0; }
.product-icon { display: block; width: 40px; height: 40px; border-radius: 10px; margin: 0 0 16px; }
.product-panel p:last-child { margin-bottom: 0; }
.product-price { font-size: 36px; font-weight: 800; letter-spacing: -.04em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.product-muted { color: var(--sp-ink-soft); font-size: 14px; }
/* Product names are one word (Size, Scan, Score), so they carry the card. The tagline sits under them. */
.catalogue .product-panel h3, #purchase-title { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.product-tagline { font-weight: 600; color: var(--sp-ink); margin: 0 0 12px; }
.product-currency { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0; border: 0; padding: 0; }
.product-currency legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.product-currency label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.product-tier { display: grid; gap: 10px; margin: 18px 0 0; border: 0; padding: 0; }
.product-tier legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.product-tier label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: 44px; padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: 10px; }
.product-tier label:has(input:checked) { border-color: var(--sp-gold); box-shadow: inset 0 0 0 1px var(--sp-gold); }
.product-tier input { margin-top: 4px; }
.product-tier b { display: block; }
.product-tier small { display: block; color: var(--sp-ink-soft); font-size: 13px; }
.product-list { padding-left: 20px; }
.product-list li { margin: 8px 0; }
.product-disclaimer { border-left: 3px solid var(--sp-gold); padding: 14px 18px; background: var(--sp-paper); color: var(--sp-ink-soft); }
.product-cta { width: 100%; justify-content: center; }

/* L1: acceptance block sits immediately before the Buy button */
.accept-block { margin: 18px 0 14px; padding: 14px; background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); }
.accept-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.5; }
.accept-row input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--sp-gold-text); }
.accept-meta { font-size: 13px; color: var(--sp-ink-soft); margin: 10px 0 0; }
.buy-status { font-size: 13px; color: var(--sp-ink-soft); min-height: 1.5em; margin-top: 10px; }

/* Catalogue comparison */
.catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalogue .product-panel { display: flex; flex-direction: column; }
.catalogue .product-panel .btn { margin-top: auto; }
/* The five-stage suite reads left to right in order on wide screens, two per row on tablets, one per row on phones (900px rule). */
.catalogue-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.catalogue-5 .product-panel { padding: 22px; }
.catalogue-5.catalogue .product-panel h3 { font-size: 34px; }
.catalogue-5 .product-price { font-size: 28px; }
.btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }
@media (max-width: 1180px) { .catalogue-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-wrap { overflow-x: auto; margin-top: 32px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); background: var(--sp-paper); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.compare caption { text-align: left; padding: 14px 16px; font-weight: 700; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--sp-line); }
.compare thead th { background: var(--sp-cream); }

/* FAQ */
.faq details { border-top: 1px solid var(--sp-line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--sp-line); }
.faq summary { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.faq details p { margin: 8px 0 0; color: var(--sp-ink-soft); }

/* Legal documents: readable measure, numbered sections, printable (AC9) */
.legal { padding: 56px 0 88px; }
.legal-body { max-width: 72ch; }
.legal-body h2 { font-size: 22px; margin: 40px 0 10px; scroll-margin-top: 90px; }
.legal-body h3 { font-size: 17px; margin: 24px 0 8px; }
.legal-body p, .legal-body li { line-height: 1.65; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--sp-ink-soft); margin: 0 0 24px; }
.legal-draft { border-left: 3px solid var(--sp-gold); background: var(--sp-paper); padding: 14px 18px; margin: 0 0 28px; }
.legal-toc { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: 18px 22px; margin: 0 0 32px; }
.legal-toc ol { columns: 2; column-gap: 32px; margin: 0; }
.legal-toc li { break-inside: avoid; margin: 4px 0; font-size: 14px; }
.legal-table-wrap { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--sp-line); }
.legal-table th { background: var(--sp-cream); }
.print-btn { margin-top: 8px; }

/* Forms: errors are announced and shown beside the field (R13, R17) */
.field-error { color: var(--sp-error); font-size: 13px; font-weight: 600; margin: 6px 0 0; }
[aria-invalid="true"] { border-color: var(--sp-error) !important; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-weight: 600; margin-top: 12px; }
.route-help { background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: 14px 16px; margin: 0 0 18px; font-size: 14px; }
.route-help p { margin: 0 0 8px; }
.route-help p:last-child { margin: 0; }

/* Support routes */
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route-grid .product-panel h3 { font-size: 17px; }
.sla { width: 100%; border-collapse: collapse; font-size: 14px; }
.sla th, .sla td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--sp-line); vertical-align: top; }

/* Consent region: fixed to the bottom, never covers the whole page */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 640px; margin: 0 auto; background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); padding: 20px 22px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.consent h2 { font-size: 18px; margin: 0 0 8px; }
.consent p { font-size: 14px; margin: 0 0 12px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
.consent-categories { border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: 12px 14px; margin: 0 0 12px; }
.consent-row { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; min-height: 44px; }
.consent-row input { width: 20px; height: 20px; accent-color: var(--sp-gold-text); }
.consent-note { font-size: 13px !important; color: var(--sp-ink-soft); margin: 0 0 8px 30px !important; }

/* My Products dashboard (E7) */
.entitlements { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 16px; }
.ent-card { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.ent-card h3 { margin: 0; font-size: 18px; }
.ent-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ent-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ent-status[data-state="purchased"] { color: var(--sp-ok); }
.ent-status[data-state="pending"] { color: var(--sp-gold-text); }
.ent-status[data-state="revoked"] { color: var(--sp-error); }
.ent-status[data-state="none"] { color: var(--sp-ink-soft); }
.ent-card .portal-actions { margin-top: auto; }
.explore { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sp-line); }

@media (max-width: 900px) {
  .catalogue { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-panel { padding: 22px; }
  .legal-toc ol { columns: 1; }
  .legal { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* AC9: printable legal pages */
@media print {
  .nav, footer, .consent, .print-btn, .skip-link, .mobile-menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .legal { padding: 0; }
  .legal-body { max-width: none; }
  .legal-toc { border: 0; padding: 0; }
  .legal-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .legal-body h2 { break-after: avoid; }
}