/* GENERATED by packages/ui/sync.mjs for attestlayer-site. Do not edit: change packages/ui/src and re-run. */
/* ui reset: the parts of Tailwind's preflight that buy-web's markup relies on (buy-web loads the full
   preflight through @tailwind base; hosts without Tailwind need this). Not part of the verbatim parity set. */
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: transparent; cursor: pointer; }
input, select, textarea { background-color: transparent; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ui base: extracted VERBATIM from web/buy/src/app/globals.css (rc7.6.2). packages/ui/tests/ui.test.mjs asserts every rule here is still present there. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --text-secondary: #475569;
  /* buy-polish item 25: paragraph text is slate-700; the lighter grey stays for captions. */
  --body-text: #334155;
  --measure: 70ch;
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  /* Primary action color — WCAG AA contrast against white text */
  --primary-btn: #1d4ed8;
  --primary-btn-dark: #1e40af;
  --border: #e2e8f0;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --error: #dc2626;
  /* WCAG 2.1 AA text variants (>= 4.5:1 on white and on the tinted -bg tokens) */
  --success-text: #166534;
  --danger-text: #b91c1c;
  --warning-text: #92400e;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reserve space at the bottom of standard-layout pages so the fixed cookie
   banner never covers interactive elements (form submit, links, etc.).
   Buy-checkout pages override this via the more-specific rule on line ~937. */
main { padding-bottom: 6rem; }

a { color: inherit; text-decoration: none; }

/* ── Body-copy links: underlined (WCAG — not distinguished by color alone) ── */
.policy-content a:not(.btn),
.section-prose a:not(.btn),
section p a:not(.btn),
section li a:not(.btn),
.card a:not(.btn),
.faq-item > p a:not(.btn),
.status-value a:not(.btn),
.answer-card a:not(.btn),
.hero-subtext a:not(.btn),
.hero-sub a:not(.btn) {
  color: var(--primary-btn);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Skip to content ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 10000;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.skip-to-content:focus { top: 0; }

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; min-width: 0; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.page-narrow { max-width: 800px; }
.container > h1,
.page-narrow > h1 {
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  overflow-wrap: anywhere;
  margin-bottom: 0.75rem;
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  padding: 0.65rem 0;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -24px rgba(15, 23, 42, 0.28);
}
header .container { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; min-height: 48px; }

/* ── Logo ── */
.logo-section { display: flex; align-items: center; gap: 0; margin-left: -0.35rem; padding: 0.15rem 0.25rem; flex-shrink: 0; }
.logo-section img { height: 44px; width: auto; object-fit: contain; }
.logo-section span { display: none; }

/* ── Mobile nav ── */
.nav-toggle-button {
  display: none;
  cursor: pointer;
  padding: 0.75rem;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  z-index: 1001;
}
.nav-toggle-button:hover { background: var(--bg-secondary); }
.hamburger { display: block; position: relative; width: 24px; height: 2px; background-color: var(--text); transition: background-color 0.2s; }
.hamburger::before, .hamburger::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px;
  background-color: var(--text); transition: transform 0.3s;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.nav-toggle-button[aria-expanded="true"] .hamburger { background-color: transparent; }
.nav-toggle-button[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle-button[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); }

/* ── Nav ── */
nav { display: flex; align-items: center; gap: 0.85rem; flex-wrap: nowrap; min-width: 0; }
nav a { color: var(--text); font-size: 0.8125rem; font-weight: 700; transition: color 0.2s, background-color 0.2s, border-color 0.2s; padding: 0.4rem 0.45rem; border-radius: 999px; white-space: nowrap; }
nav a:hover { color: var(--accent); background: rgba(59, 130, 246, 0.06); }

.site-header { gap: 0.75rem; }

.site-nav {
  flex: 1;
  justify-content: flex-end;
  gap: 0.45rem;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-divider {
  width: 1px;
  height: 1.5rem;
  background: linear-gradient(180deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.1rem;
}

.nav-mobile-actions {
  display: none;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent-dark);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  transition: all 0.2s ease;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  color: var(--accent-dark);
}
.btn:hover {
  background-color: var(--accent-dark);
  color: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.btn-primary {
  background-color: var(--primary-btn);
  border-color: var(--primary-btn);
  color: white;
}
.btn-primary:hover {
  background-color: var(--primary-btn-dark);
  border-color: var(--primary-btn-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-lg { padding: 1rem 2rem; font-size: 1.0625rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }

.btn-nav-secondary {
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(15, 23, 42, 0.12);
  min-width: 6.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-nav-secondary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* ── Hero ── */
.hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg-secondary) 0%, var(--bg) 100%);
}
.hero h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--text);
  letter-spacing: -0.03em;
}
.hero-subtext, .hero-sub {
  font-size: 1.1875rem;
  color: var(--body-text);
  max-width: var(--measure);
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  font-weight: 400;
}
.policy-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.policy-meta span { display: block; }

.hero-shell {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0 3rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 2rem;
  align-items: center;
}

.hero-copy {
  text-align: left;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.hero-kicker::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.hero-copy .hero-subtext {
  margin-left: 0;
  max-width: 640px;
}

.hero-stage {
  position: relative;
  min-height: 440px;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(191, 219, 254, 0.9), rgba(255, 255, 255, 0.9) 42%), linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-lg);
}

.hero-stage-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
  pointer-events: none;
}

.hero-stage-orb-one {
  width: 170px;
  height: 170px;
  background: rgba(59, 130, 246, 0.16);
  top: -2rem;
  right: -1.5rem;
}

.hero-stage-orb-two {
  width: 140px;
  height: 140px;
  background: rgba(22, 163, 74, 0.14);
  bottom: -1rem;
  left: -1rem;
}

.output-card {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  text-align: left;
}

.output-card h3 {
  text-align: left;
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0 0 0.45rem;
}

.output-card p {
  margin: 0;
  font-size: 1rem;
  max-width: none;
}

.hero-text-link {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--primary-btn);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.trust-controls {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.trust-controls caption { display: none; }
.trust-controls th,
.trust-controls td {
  text-align: left;
  font-weight: 400;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.trust-controls thead th {
  font-weight: 700;
  background: var(--bg-secondary);
}
.trust-controls tbody tr:nth-child(even) { background: #f8fafc; }
.trust-controls th[scope="row"] { font-weight: 400; }
.status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}
.status-pill-in-place { background: #dcfce7; color: #166534; }
.status-pill-contractual { background: #e2e8f0; color: #334155; }
.status-pill-statement { background: #dbeafe; color: #1d4ed8; }

.output-card-label {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.output-card-pass .output-card-label {
  color: #166534;
}

.output-card-pass {
  border-color: rgba(34, 197, 94, 0.2);
}

.output-card-fail .output-card-label {
  color: #b45309;
}

.output-card-fail {
  border-color: rgba(245, 158, 11, 0.25);
}

.output-card-neutral .output-card-label {
  color: var(--accent-dark);
}

/* ── Sections ── */
section { padding: 3.5rem 0; }
section.alt { background-color: var(--bg-secondary); }
section h2 {
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 2.5rem;
  color: var(--text);
  letter-spacing: -0.02em;
  text-align: center;
}
section h3 { font-size: 1.375rem; font-weight: 800; margin-bottom: 1rem; color: var(--text); }
section p { color: var(--body-text); line-height: 1.7; margin-bottom: 1rem; }
section p:last-child { margin-bottom: 0; }

/* ── Cards ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.card h2 { font-size: 1.5rem; font-weight: 800; text-align: left; margin-bottom: 1.25rem; letter-spacing: -0.01em; }
.card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; }
.card p { color: var(--body-text); font-size: 1rem; line-height: 1.7; max-width: var(--measure); }
.measure, .trust-prose, .policy-content p, .policy-content li { max-width: var(--measure); }
.hero-strip { max-width: 100%; font-size: 1rem; line-height: 1.6; color: var(--body-text); }
.trust-prose { margin-left: auto; margin-right: auto; }
.trust-card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 800px) {
  .trust-card-grid { grid-template-columns: 1fr 1fr; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.card > div:last-child { margin-top: auto; }

/* ── CTA group ── */
.cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Alerts ── */
.alert { padding: 1.25rem 1.5rem; border-radius: 8px; margin: 1.5rem 0; font-size: 0.9375rem; }
.alert-info { background-color: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.alert-warning { background-color: var(--warning-bg); border: 1px solid #fde68a; color: #92400e; }
.alert-success {
  padding: 0.75rem 1rem;
  background: var(--success-bg);
  border-radius: 8px;
  color: var(--success-text);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error {
  padding: 0.75rem 1rem;
  background: var(--danger-bg);
  border-radius: 8px;
  color: var(--danger-text);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 3.5rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.875rem;
}
footer .container { display: flex; flex-direction: column; gap: 2rem; }
footer a { color: var(--text-secondary); transition: color 0.2s; }
footer a:hover { color: var(--primary-btn); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-heading { font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); margin-bottom: 0.25rem; }
.footer-col a { font-size: 0.8125rem; line-height: 1.5; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; text-align: center; }
.footer-bottom p { margin-bottom: 0.25rem; color: var(--text-secondary); }
.disclaimer { font-size: 0.8125rem; }
/* ── Form ── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.form-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* ── Value cards ── */
.value-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.value-card { padding: 2rem; border: 1px solid var(--border); border-radius: 16px; background-color: var(--panel); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.value-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.75rem; color: var(--text); }
.value-card p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.7; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .nav-toggle-button { display: grid; place-items: center; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .site-nav.nav-open { display: flex; }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-divider,
  .header-actions { display: none; }
  .nav-mobile-actions { display: flex; flex-direction: column; gap: 0.75rem; }
  .nav-mobile-actions .btn { width: 100%; }
}

@media (max-width: 960px) {
  .hero-shell { padding: 1.5rem 0 2.5rem; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-copy { text-align: left; }
  .hero-copy .hero-subtext { margin-left: 0; margin-bottom: 1.5rem; }
  .hero-copy .cta-group { justify-content: flex-start !important; }
  .hero-copy h1 { font-size: 2.45rem; line-height: 1.08; }
  .hero-stage { min-height: auto; margin-top: 0.5rem; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero-subtext, .hero-sub { font-size: 1rem; }
  section h2 { font-size: 1.75rem; }
  .card-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-shell {
    padding-top: 3.5rem;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy .hero-subtext {
    margin-left: auto;
  }
  .hero-copy .cta-group,
  .hero-copy .trust-strip {
    justify-content: center !important;
  }
  .hero-stage {
    min-height: auto;
    padding: 1.25rem;
  }
  .logo-section img { height: 44px; }
  .value-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
}

/* ── Language switch (EN | FR): one component, one stylesheet, all five sites ── */
.lang-toggle {
  display: inline-flex;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-toggle a, .lang-toggle span {
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--text);
}
/* Below 1024 px (the mobile sheet) the switch reads EN | FR. At 1024 px and wider it reads « Français » on the English page and
   « English » on the French page: the cell of the page you are on is hidden, the other cell shows its full name. (Both full names
   side by side do not fit the French header at 1024 px: they overlap the logo by about 54 px.) */
.lang-toggle .lang-long { display: none; }
@media (min-width: 1024px) {
  .lang-toggle .lang-short { display: none; }
  .lang-toggle .lang-long { display: inline; }
  .lang-toggle [aria-current="page"] { display: none; }
}
.lang-toggle a:hover { background: var(--bg-secondary); }
.lang-toggle [aria-current="page"] { background: var(--primary-btn); color: #fff; }
/* In the mobile sheet the switch keeps its own width (the sheet's link rules must not stretch or re-pad its cells). */
.nav-mobile-actions .lang-toggle { align-self: flex-start; justify-self: start; }
.nav-mobile-actions .lang-toggle a, .nav-mobile-actions .lang-toggle span { width: auto; padding: 0.35rem 0.75rem; text-align: center; }
/* 1024-1279 px: the six items, the switch and the call to action share one row. The switch and the item padding tighten here
   (same on every site) so the French header, whose items and button are longer, still clears the logo at 1024 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header .lang-toggle a, .site-header .lang-toggle span { min-width: 0; padding: 0.35rem 0.4rem; }
  .site-header .nav-group a { padding: 0.4rem 0.2rem; }
}

/* ui components: the pieces of the estate design spec (SITE_ESTATE_REVIEW_2026-10-19 section 3) that buy-web's
   stylesheet does not have yet. They only use classes that do not exist in buy-web's globals.css, so importing this
   file into buy-web cannot change how an existing page renders. Hosts without globals.css also import base.css. */

:root {
  --ink: #0f172a;
  --body: #334155;
  --supported: #15803d;
  --confirm: #b45309;
  --unsupported: #475569;
  --founding: #b45309;
  --founding-bg: #fff7ed;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --section-pad: 6rem;
  --section-pad-phone: 3.5rem;
  --card-pad: 2rem;
  --card-pad-phone: 1.25rem;
}

/* ── Layout helpers ── */
.container-prose { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; min-width: 0; }
.section-spacious { padding: var(--section-pad) 0; }
.section-title-left { text-align: left; }
.prose-body, .prose-body p, .prose-body li { color: var(--body); font-size: 1.0625rem; line-height: 1.6; max-width: 70ch; }
.caption { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 720px) {
  .section-spacious { padding: var(--section-pad-phone) 0; }
}

/* ── Status chip (Supported / Confirmation required / Not supported) ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  background: #fff;
}
.chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.chip-supported { color: var(--supported); }
.chip-confirm { color: var(--confirm); }
.chip-unsupported { color: var(--unsupported); }

/* ── Proof strip: three facts with numbers ── */
.proof-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.proof-strip li {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.45;
}
.proof-strip strong { display: block; color: var(--ink); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
@media (max-width: 720px) {
  .proof-strip { grid-template-columns: 1fr; }
}

/* ── Step strip: numbered steps with one line each ── */
.step-strip {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.step-strip li {
  counter-increment: step;
  position: relative;
  padding: 3.25rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--body);
  font-size: 0.95rem;
  line-height: 1.5;
}
.step-strip li::before {
  content: counter(step);
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primary-btn);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
}
.step-strip strong { display: block; color: var(--ink); margin-bottom: 0.15rem; }

/* ── Pricing card ── */
.ui-pricing-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
.ui-pricing-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.ui-pricing-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0; }
.ui-pricing-card-price { font-size: 2.25rem; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.ui-pricing-card-was { color: var(--text-secondary); text-decoration: line-through; font-size: 1rem; font-weight: 600; margin-left: 0.4rem; }
.ui-pricing-card ul { list-style: disc; margin: 0 0 0.5rem 1.1rem; color: var(--body); line-height: 1.5; }
.ui-pricing-card .btn { margin-top: auto; }
.ui-pricing-card-founding { background: var(--founding-bg); border-color: var(--founding); }
@media (max-width: 720px) {
  .ui-pricing-card { padding: var(--card-pad-phone); }
}

/* ── Audience / track card (a whole-card call to action) ── */
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.track-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--body);
}
.track-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0; }
.track-card p { margin: 0; color: var(--body); font-size: 1rem; line-height: 1.55; }
.track-card .btn { margin-top: auto; align-self: flex-start; }
.track-card-soon { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--confirm); }
@media (max-width: 720px) {
  .track-card { padding: var(--card-pad-phone); }
  .track-card .btn { align-self: stretch; }
}

/* ── Header: CSS-only menu for hosts that cannot run script (attestlayer.com) ── */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.nav-toggle-input:focus-visible + .nav-toggle-button { outline: auto 1px; outline-offset: 2px; }
.nav-toggle-input:checked + .nav-toggle-button .hamburger { background-color: transparent; }
.nav-toggle-input:checked + .nav-toggle-button .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle-input:checked + .nav-toggle-button .hamburger::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1023px) {
  .nav-toggle-input:checked ~ .site-nav { display: flex; }
}
body.ui .nav-toggle-button:focus-visible { outline: auto 1px; }
/* Focus rings elsewhere are the browser default, the same as buy-web (parity check). */
/* The previous footer rules used inline style attributes, which root's CSP (style-src 'self') refuses. */
.footer-fact { margin: 0.2rem 0; font-size: 0.8rem; line-height: 1.5; }
.footer-brand { display: block; color: inherit; text-decoration: none; }

/* ── Form: the Fit Check form is the reference (label above, 44px inputs, helper text, one primary button). Scoped to .site-form so buy-web inputs are untouched ── */
.site-form .form-input { min-height: 44px; }
.site-form select.form-input { appearance: auto; }
.site-form .form-input[aria-invalid="true"] { border-color: var(--danger); }
.site-form .form-error { color: var(--danger-text); font-size: 0.875rem; margin: 0.35rem 0 0; font-weight: 600; }
.site-form .form-check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--body); font-size: 0.95rem; line-height: 1.5; }
.site-form .form-check input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--primary-btn); }
.site-form .form-input:focus-visible, .site-form .form-check input:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; border-color: var(--accent-dark); }
.form-card { max-width: 640px; margin: 0 auto; text-align: left; }
.site-form .form-status { margin: 1rem 0 0; padding: 0.9rem 1.1rem; border-radius: 8px; font-size: 0.95rem; }
.site-form .form-status-error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid #fecaca; }
.site-form .form-status-success { background: var(--success-bg); color: var(--success-text); border: 1px solid #bbf7d0; }

/* ── FAQ list (native disclosure, works without script) ── */
.faq-list { display: grid; gap: 0.75rem; max-width: 860px; margin: 0 auto; }
.faq-list details { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 0.25rem 1.1rem; }
.faq-list summary { cursor: pointer; padding: 0.85rem 0; font-weight: 700; color: var(--ink); }
.faq-list summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq-list details p { color: var(--body); margin: 0 0 1rem; }

/* ── Skeleton / spinner (loading state) ── */
.loading-state { display: flex; align-items: center; gap: 0.75rem; justify-content: center; color: var(--text-secondary); }
.spinner { width: 1.25rem; height: 1.25rem; border: 3px solid var(--border); border-top-color: var(--primary-btn); border-radius: 50%; animation: ui-spin 0.9s linear infinite; }
.skeleton-line { height: 0.9rem; border-radius: 6px; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: ui-shimmer 1.4s ease-in-out infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton-line { animation: none; }
}

/* ── Hero helpers ── */
.hero-cta { justify-content: flex-start; align-items: center; }

/* ── Page helpers used by the partner and program homes ── */
.hero-kicker-plain { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.75rem; }
.section-lede { max-width: 70ch; margin: -1.5rem auto 2rem; text-align: center; color: var(--body); }
.proof-section { padding: 1.5rem 0 0.5rem; }
.terms-list { list-style: disc; margin: 0 0 1rem 1.25rem; display: grid; gap: 0.6rem; }
.terms-list li { color: var(--body); }
.form-actions { justify-content: flex-start; margin-top: 1.25rem; }
@media (max-width: 720px) { .form-actions .btn { width: 100%; } }

.section-lede-after { max-width: 70ch; margin: 1.5rem auto 0; text-align: center; color: var(--body); }

.site-form .form-hint { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; margin: 0.35rem 0 0; }
.site-form .form-card h3, .form-card h3 { margin-bottom: 0.5rem; }
.ui-pricing-card-was-plain { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-left: 0.2rem; }
.section-note { margin: 1.5rem auto 0; }
.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0; padding: 0; }
.chip-row .chip { font-size: 0.85rem; padding: 0.45rem 0.9rem; text-transform: none; letter-spacing: 0; }

.footer-legal-line { color: var(--text); font-size: 0.8125rem; font-weight: 600; }
.proof-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .proof-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proof-strip-4 { grid-template-columns: 1fr; } }
.contact-list { list-style: none; display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; color: var(--body); }
.contact-list strong { display: inline-block; min-width: 5.5rem; color: var(--ink); }

/* ── "Every way to work with us" table: a table on desktop, stacked cards on phone ── */
.ways-table { width: 100%; border: 1px solid var(--border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--panel); }
.ways-table th, .ways-table td { text-align: left; vertical-align: top; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--body); font-size: 0.95rem; line-height: 1.5; }
.ways-table thead th { background: var(--bg-secondary); color: var(--ink); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.ways-table tbody th { color: var(--ink); font-weight: 700; }
.ways-table tbody tr:last-child th, .ways-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 800px) {
  .ways-table, .ways-table tbody, .ways-table tr, .ways-table th, .ways-table td { display: block; }
  .ways-table { border: 0; background: transparent; }
  .ways-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ways-table tbody tr { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); margin-bottom: 0.9rem; padding: 0.4rem 0; }
  .ways-table th, .ways-table td { border-bottom: 0; padding: 0.4rem 1rem; }
  .ways-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
}

/* ── Founding tier box ── */
.founding-section { padding: 2rem 0; }
.founding-box { border: 1px solid var(--founding); background: var(--founding-bg); border-radius: 16px; padding: var(--card-pad); }
.founding-box h2 { margin-bottom: 0.5rem; }
@media (max-width: 720px) { .founding-box { padding: var(--card-pad-phone); } }
.trust-sentences { margin: 1.5rem auto 0; max-width: 860px; }

/* rc7.7 (owner 20 Oct): the header (at most six links, the language link, one call to action) fits from 1024 px in English
   and French; the sheet replaces it below 1024 px. Between 1024 and 1279 px the logo and the spacing tighten. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .logo-section img { height: 34px; }
  .site-nav { gap: 0.25rem; }
  nav a { padding: 0.4rem 0.3rem; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn-sm { padding: 0.45rem 0.7rem; font-size: 0.75rem; min-width: 0; }
  .site-header { gap: 0.5rem; }
}

/* About page portrait (rc7.8): 200px to the left of the first paragraph on desktop, full width on a phone.
   Self-hosted image, no inline style: the root site CSP stays style-src 'self'. */
.about-lede { display: flow-root; }
.about-portrait { float: left; width: 200px; margin: 0.25rem 1.5rem 1rem 0; }
.about-portrait img { display: block; width: 100%; height: auto; border-radius: 4px; }
.about-portrait figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary, #475569); }
@media (max-width: 640px) {
  .about-portrait { float: none; width: 100%; margin: 0 0 1rem; }
}

/* Root-site polish (rc7.8, 24 Oct 2026): a closing section and the gap before the footer take only what their content needs.
   Scoped by class so no other page changes; the tokens and the shared section padding (3.5rem) are untouched. */
.section-compact { padding: 2rem 0; }
.email-note { margin: 1rem 0 0; }
.section-compact h2 { margin-bottom: 0; }
main:has(> .section-last) { padding-bottom: 0; }
.section-last { padding-bottom: 2.5rem; }
.section-compact.section-last { padding-bottom: 2rem; }
.hero-console { margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; display: block; }
.hero-console img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); aspect-ratio: 38 / 30; }
.hero.hero-compact { padding: 3rem 0 1.5rem; }
.hero.hero-compact h1 { margin-bottom: 0.5rem; }
.hero.hero-compact .hero-sub { margin-bottom: 0; }