/* Self-hosted typefaces (SIL Open Font License, see fonts/OFL-*.txt): no third-party request. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/public-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --ink: #14213d;
  --muted: #4a5568;
  --paper: #ffffff;
  --panel: #f5f7fa;
  --line: #d9dee7;
  --accent: #1f4fb4;
  --rust: #a23b2a;
  --blue: #14213d;
  --shadow: rgba(13, 30, 62, 0.12);
}

* { box-sizing: border-box; }

html {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: var(--panel);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: #d9dee7;
  --nav-bg: rgba(255, 255, 255, 0.97);
  --button-text: #ffffff;
  --focus: #9a4f00;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --shadow-sm: none;
  --shadow-lg: none;
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-width: 0;
  color: var(--text);
  background: var(--paper);
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea, select { font: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: 0.7rem 1rem;
  color: var(--button-text);
  background: var(--ink);
  border-radius: var(--radius-sm);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(135%);
}

.nav-shell, main, .site-footer {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.nav-shell {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav-shell > *, .hero > *, .section-grid > *, .intake > * { min-width: 0; }

.nav-shell a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.brand {
  color: var(--accent) !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.nav-links a { position: relative; }
.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 2px;
  content: "";
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

.nav-action, .button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent) !important;
  background: var(--surface-raised);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.nav-action:hover, .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button.primary {
  border-color: var(--accent);
  color: var(--button-text) !important;
  background: var(--accent);
}
.button.secondary { background: transparent; }

.hero {
  display: grid;
  min-height: min(720px, calc(100vh - 72px));
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.85fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 6.5rem);
}

.eyebrow, .form-kicker {
  margin: 0 0 var(--space-3);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

h1, h2, h3 {
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(2.35rem, 4.7vw, 3.9rem);
  line-height: 1.02;
}
h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.9vw, 2.55rem);
  line-height: 1.06;
}
h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; line-height: 1.22; }

.lead {
  max-width: 700px;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: clamp(1.06rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.mechanism {
  max-width: 690px;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
  font-size: 1.05rem;
}

.assurance, .text-stack p, .intake-intro p, .site-footer p, .hint {
  color: var(--text-muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); }
.assurance { max-width: 620px; margin: 0; font-size: 0.92rem; }

.product-preview, .feature-grid article, .price-grid article, .profile-form, .profile-output, .proof-strip,
.legal-card, .opportunity-card, .demo-notice {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.product-preview {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.product-preview::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--accent), #6fa8ff 65%, transparent);
}
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.priority-pill { padding: 0.35rem 0.6rem; border-radius: 999px; color: var(--button-text); background: var(--accent); }
.product-preview h2 { margin-top: var(--space-5); font-size: clamp(1.65rem, 3vw, 2.35rem); }
.product-preview > p { margin: var(--space-3) 0 var(--space-5); color: var(--text-muted); }
.product-preview .sample-context { margin-bottom: 0; font-size: 0.88rem; font-weight: 700; }
.preview-facts { margin: 0; border-top: 1px solid var(--border); }
.preview-facts div { display: grid; grid-template-columns: minmax(92px, 0.7fr) 1.3fr; gap: var(--space-3); padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.preview-facts dt { color: var(--text-muted); font-weight: 700; }
.preview-facts dd { margin: 0; text-align: right; }
.preview-link { display: inline-flex; margin: var(--space-4) 0; align-items: center; gap: 0.45rem; color: var(--accent); font-weight: 800; }

.sample-reason, .sample-caveat {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
}
.sample-caveat { border-left-color: var(--rust); }
.sample-reason h3, .sample-caveat h3 { font-family: inherit; font-size: 0.92rem; }
.sample-reason p, .sample-caveat p { margin: 0; color: var(--text-muted); font-size: 0.93rem; }

.proof-strip { margin: 0 0 var(--space-7); padding: var(--space-4); }
.indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.indicators li { position: relative; padding-left: 1.7rem; color: var(--text); font-weight: 650; }
.indicators li::before { position: absolute; top: 0.15rem; left: 0; color: var(--accent); content: "✓"; font-weight: 900; }

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 7vw, 6rem);
  margin-bottom: var(--space-6);
  padding: var(--space-5) 0;
}
.text-stack { display: grid; gap: var(--space-3); }
.text-stack p { max-width: 720px; margin: 0; font-size: 1.08rem; }

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.comparison-card {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.comparison-muted { opacity: 0.78; }
.comparison-strong { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.comparison-label { margin: 0 0 var(--space-2); color: var(--accent); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.comparison-card ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding-left: 1.2rem; color: var(--text-muted); }

.feature-grid, .price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.feature-grid { margin-bottom: clamp(5rem, 10vw, 8rem); }
.feature-grid article, .price-grid article { min-height: 210px; padding: var(--space-4); }
.feature-grid article { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.feature-grid article:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.feature-grid article > span { display: inline-block; margin-bottom: var(--space-5); color: var(--accent); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.1em; }
.feature-grid p, .price-grid p { margin: 0; color: var(--text-muted); }

.evidence-section, .coverage-section, .faq-section {
  margin-bottom: clamp(5rem, 10vw, 8rem);
}
.evidence-section > div:first-child, .coverage-section > div:first-child, .faq-heading {
  max-width: 760px;
  margin-bottom: var(--space-5);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.trust-grid article {
  padding: var(--space-4);
  border-top: 3px solid var(--accent);
  background: var(--surface-raised);
}
.trust-grid p { color: var(--text-muted); }
.trust-grid a { font-weight: 800; }

.coverage-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.coverage-section > div:first-child { margin: 0; }
.coverage-section > div:first-child p:last-child { color: var(--text-muted); }
.source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.source-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 700; }
.source-list li span { color: var(--accent); font-weight: 900; }

.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  position: relative;
  padding: var(--space-4) 3rem var(--space-4) 0;
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 1.35rem; right: 0.2rem; color: var(--accent); content: "+"; font-family: inherit; font-size: 1.5rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 780px; margin: 0; padding: 0 3rem var(--space-4) 0; color: var(--text-muted); }

.intake {
  display: grid;
  grid-template-columns: minmax(245px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-bottom: clamp(5rem, 10vw, 8rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-soft), var(--surface));
}
.intake-intro { position: sticky; top: 110px; }
.intake-intro h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.intake-benefits { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; color: var(--text-muted); }
.intake-benefits li { position: relative; padding-left: 1.6rem; }
.intake-benefits li::before { position: absolute; left: 0; color: var(--accent); content: "✓"; font-weight: 900; }
.form-progress { display: grid; gap: 0.25rem; margin: var(--space-5) 0; padding: 0; list-style: none; }
.form-progress li { display: flex; gap: 0.7rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 700; }
.form-progress li span { display: inline-grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 0.78rem; }
.form-progress li[aria-current="step"] { color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.form-progress li[aria-current="step"] span { border-color: var(--accent); color: var(--button-text); background: var(--accent); }
.early-contact { margin-top: var(--space-5); color: var(--text-muted); font-size: 0.92rem; }

.profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: clamp(1.25rem, 3vw, 2rem); }
.form-kicker { margin-bottom: 0; }
label { display: grid; gap: 0.45rem; color: var(--text); font-weight: 750; }
.span-2 { grid-column: span 2; }
.optional { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:hover, textarea:hover, select:hover { border-color: var(--accent); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.14); background: var(--surface-raised); }
textarea { min-height: 104px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.78; }

fieldset { min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
fieldset legend { padding: 0 0.4rem; color: var(--text); font-weight: 800; }
.jurisdiction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.jurisdiction-grid legend { margin-bottom: var(--space-1); }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem var(--space-4); }
.cat-grupo { grid-column: 1 / -1; margin: var(--space-4) 0 var(--space-1); color: var(--accent); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.cat-grupo:first-child { margin-top: var(--space-2); }
.cat-item { min-width: 0; padding: 0.25rem 0; }
.chk { display: flex; gap: 0.65rem; align-items: flex-start; font-weight: 500; line-height: 1.4; cursor: pointer; }
.chk input[type="checkbox"] { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0.16rem 0 0; padding: 0; accent-color: var(--accent); }
.cat-note { width: calc(100% - 1.8rem); min-height: 42px; margin: 0.5rem 0 0.6rem 1.8rem; padding: 0.55rem 0.65rem; }
.field-help { display: block; margin: 0.35rem 0 0.5rem; font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.char-count { display: block; margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.char-count.ok { color: var(--accent); }
.profile-form textarea { min-height: 92px; resize: vertical; }
.consent-row { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.chk.consent { font-size: 0.92rem; color: var(--text-muted); }
.chk.consent a { font-weight: 700; }
.hint { margin: 0.5rem 0; font-size: 0.9rem; }
.form-errors { padding: var(--space-3); border: 1px solid var(--rust); border-left-width: 4px; border-radius: var(--radius-sm); color: var(--text); background: var(--surface-raised); font-weight: 750; }
.form-errors[hidden] { display: none; }

.profile-output { grid-column: 2; padding: var(--space-4); }
.profile-output[hidden] { display: none; }
.profile-output details { margin: var(--space-3) 0 var(--space-4); }
.profile-output summary { color: var(--accent); font-weight: 800; cursor: pointer; }
pre { max-height: 420px; margin: var(--space-3) 0 0; padding: var(--space-3); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pricing-section { margin-bottom: clamp(5rem, 10vw, 8rem); }
.pricing-section > .section-head { margin-bottom: var(--space-5); }
.pricing-section dfn { color: var(--text); font-style: normal; font-weight: 800; }
.pricing-formula { max-width: 760px; margin: 0 0 var(--space-4); color: var(--text); font-size: 1.05rem; font-weight: 700; }
.price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid article { position: relative; overflow: hidden; }
.price-grid article::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--accent); opacity: 0.3; }
.price-grid h3 { margin-bottom: var(--space-4); }
.price-grid strong { display: block; margin-bottom: var(--space-3); color: var(--accent); font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1; }
.pricing-section > .assurance { max-width: none; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-soft); }

.site-footer { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: var(--space-4) var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.site-footer p { margin: 0.35rem 0 0; }
.legal-disclaimer { padding-left: var(--space-4); border-left: 3px solid var(--rust); color: var(--text) !important; font-weight: 650; }
.foot-links { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.6rem 1.2rem; }

/* Legal and unsubscribe pages */
.legal-page, .demo-page { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; }
.legal-page > h1 { max-width: 760px; margin: 0; font-size: clamp(2.55rem, 6vw, 4.6rem); }
.legal-intro { max-width: 690px; margin: var(--space-4) 0 var(--space-6); color: var(--text-muted); font-size: 1.08rem; }
.legal-page h2 { margin: var(--space-6) 0 var(--space-3); font-size: clamp(1.45rem, 3vw, 2rem); }
.legal-page p, .legal-page li { max-width: 760px; }
.legal-page ul { display: grid; gap: var(--space-2); padding-left: 1.3rem; }
.legal-card { margin: var(--space-5) 0; padding: clamp(1.25rem, 3vw, 2rem); }
.legal-card h2 { margin-top: 0; }
.legal-stamp { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.legal-updated { margin-top: var(--space-6); color: var(--text-muted); font-size: 0.85rem; }
.legal-intro .button { margin-left: var(--space-2); vertical-align: baseline; }
.signature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.signature-grid div { padding-top: var(--space-5); border-top: 1px solid var(--text); }
.signature-grid span { display: block; font-weight: 700; }
.signature-grid p { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.9rem; }
@media print { .site-header, .skip-link, .foot-links, .legal-intro .button { display: none !important; } .legal-page { width: 100%; padding: 0; } }
.legal-page .legal-disclaimer { margin-top: var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid #dc9c9c; border-left: 4px solid var(--rust); border-radius: var(--radius-sm); background: var(--surface-raised); }
.legal-page .foot-links { margin-top: var(--space-5); }

/* Sample alert */
.demo-page { width: min(980px, calc(100% - 32px)); }
.demo-page > header { margin-bottom: var(--space-5); }
.demo-page h1 { max-width: 820px; }
.demo-label { display: inline-flex; margin-bottom: var(--space-3); padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--accent); background: var(--surface-raised); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.demo-meta { color: var(--text-muted); font-size: 0.92rem; }
.opportunity-card { padding: clamp(1.35rem, 4vw, 2.5rem); box-shadow: var(--shadow-lg); }
.opportunity-card header { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.opportunity-card h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-4) 0; border-block: 1px solid var(--border); }
.fact-grid div { padding: var(--space-3); }
.fact-grid div:nth-child(odd) { border-right: 1px solid var(--border); }
.fact-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.fact-grid dt { color: var(--text-muted); font-size: 0.82rem; font-weight: 750; }
.fact-grid dd { margin: 0.2rem 0 0; font-weight: 700; }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.fit-grid section { margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-soft); }
.fit-grid h3 { font-size: 1.15rem; }
.decision-list { display: grid; gap: var(--space-2); padding-left: 1.2rem; }
.demo-notice { margin-top: var(--space-5); padding: var(--space-4); border-left: 4px solid var(--accent); }

.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .hero, .section-grid, .intake, .coverage-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .intake-intro { position: static; }
  .profile-output { grid-column: 1; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 126px; }
  .nav-shell { min-height: 108px; flex-wrap: wrap; gap: 0.5rem var(--space-3); padding: 0.7rem 0; }
  .nav-links { order: 3; width: 100%; justify-content: space-between; gap: var(--space-2); }
  .nav-action { min-height: 40px; padding: 0.5rem 0.7rem; }
  .hero { padding-top: var(--space-7); }
  .indicators, .feature-grid, .price-grid, .profile-form, .jurisdiction-grid, .cat-grid,
  .pricing-section > div:first-child, .site-footer, .fact-grid, .fit-grid, .signature-grid,
  .comparison-grid, .trust-grid, .source-list { grid-template-columns: 1fr; }
  .cat-grupo, .span-2, .foot-links { grid-column: auto; }
  .price-grid article, .feature-grid article { min-height: 0; }
  .fact-grid div, .fact-grid div:nth-child(odd), .fact-grid div:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--border); }
  .fact-grid div:last-child { border-bottom: 0; }
  .legal-disclaimer { padding-left: 0; padding-top: var(--space-3); border-left: 0; border-top: 3px solid var(--rust); }
  .faq-list summary { padding-right: 2.3rem; }
  .faq-list details p { padding-right: 0; }
}

@media (max-width: 380px) {
  .nav-shell, main, .site-footer, .legal-page, .demo-page { width: min(100% - 24px, 1180px); }
  .brand { font-size: 1.18rem; }
  .nav-action { font-size: 0.84rem; }
  .nav-links a { font-size: 0.9rem; }
  .hero-actions .button { width: 100%; }
  .intake { padding: var(--space-3); }
  .profile-form { padding: var(--space-3); }
  fieldset { padding: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* Fictional-firm comparison: the same word, different decisions.
   Shows the product's actual discrimination without needing a single client. */
.firms-section { margin-bottom: var(--space-5); }
.firms-intro { color: var(--muted); max-width: 62ch; margin-bottom: var(--space-4); }
.firms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.firm-case {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.firm-case-yes { border-left: 4px solid var(--accent); }
.firm-case-no { border-left: 4px solid var(--muted); }
.firm-case-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 .5rem;
}
.firm-case h3 { margin: 0 0 .75rem; }
.firm-case-verdict { margin: 0 0 1rem; }
.firm-case-why, .firm-case-note { color: var(--muted); }
.firm-case-note { font-style: normal; margin-bottom: 0; }
.firm-list { list-style: none; padding: 0; margin: 0; }
.firm-list li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .45rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.firm-list li:first-child { border-top: 0; color: inherit; }
.firm-yes, .firm-no {
  flex: none;
  min-width: 2.4rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.firm-yes { color: var(--accent); }
.firm-no { color: var(--muted); }
.firms-footer { color: var(--muted); max-width: 68ch; margin-top: var(--space-4); }

@media (max-width: 760px) {
  .firms-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------------------------
   Section heads and rhythm.

   Every section used to open with a full-width serif headline at nearly hero size, in one of three
   different column arrangements. The page read as a stack of equally loud slabs, and two of those
   arrangements were actively broken: the coverage headline was squeezed into a 40% column and wrapped
   to six lines beside a half-empty list, and the pricing eyebrow sat in a different column from its
   own headline, bottom-aligned, so they read as unrelated fragments.

   One head component, one measure, one rhythm.
   --------------------------------------------------------------------------------------------- */
.section-head { max-width: 46ch; margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-2); }
.section-head-note { max-width: 62ch; margin: 0; color: var(--muted); }

.steps-section { margin-bottom: clamp(4rem, 8vw, 7rem); }
.steps-note {
  max-width: 68ch;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--border);
  color: var(--muted);
}

/* The coverage list reads as a checklist, not as prose: two columns on desktop, one on phones. */
.coverage-section .source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
}

/* Both demo cards keep the same height so the pair reads as one comparison rather than two
   unrelated blocks; the shorter card's text sits at the top instead of floating mid-card. */
.firm-case { display: flex; flex-direction: column; }
.firm-case-why { margin-bottom: var(--space-3); }
.firm-case-note { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }

@media (max-width: 760px) {
  .coverage-section .source-list { grid-template-columns: 1fr; }
}

/* The feature grid carried a large standalone bottom margin from when it was the last element of
   its own section. Inside the steps section the note belongs with the cards, so the section owns
   the spacing and the grid does not add a second gap. */
.steps-section .feature-grid { margin-bottom: 0; }

/* Draft-restored notice. Quiet by default: it is reassurance, not an alert. */
.draft-notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
}
.draft-notice p { margin: 0; color: var(--muted); }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { text-decoration: none; }

/* Unsubscribe result. Success is stated plainly and calmly: someone leaving should not be nagged. */
.baja-result {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-left: 3px solid var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
}
.baja-result.ok { border-left-color: var(--accent); font-weight: 650; }

/* "Las cuentas": what is actually on the table, from real captured notices. The figures are large
   because they are the argument; the caveats sit directly beneath so nobody reads the number
   without the qualification. */
.roi-section { margin-bottom: clamp(4rem, 8vw, 7rem); }
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.roi-figure { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.roi-num {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1;
}
.roi-figure h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; font-weight: 700; }
.roi-figure p:last-child { margin: 0; color: var(--muted); }
.roi-note {
  padding: var(--space-4);
  border-left: 3px solid var(--border);
  background: var(--surface-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.roi-note h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.roi-note ul { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--muted); }
.roi-note li { margin-bottom: .4rem; }
.roi-bottom { margin: 0; font-weight: 650; }

@media (max-width: 860px) { .roi-grid { grid-template-columns: 1fr; } }

/* Brand mark. Inlined rather than <img src> so it inherits the link colour and therefore works in
   both themes; an <img> cannot receive `currentColor`, which made the first version invisible on
   the dark background. */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { width: 1.45em; height: 1.45em; flex: none; }

/* The line that turns the figures into a question the reader has to answer for themselves. */
.roi-hook {
  max-width: 60ch;
  margin: 0 0 var(--space-4);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--text);
}

/* ---------------------------------------------------------------------------------------------
   Readability: de-emphasise the LABEL, never the content.

   The firm-comparison list muted the whole "No" row - the label, the company name and the reason -
   so four of the five lines read as greyed out even though the ratio cleared WCAG. The label is the
   only part that should recede; the sentence beside it is content and gets full contrast.

   Same for the pricing note: the explanation after "Boletín" is body copy explaining what the
   client pays for, not a caption, so it reads at full strength.
   --------------------------------------------------------------------------------------------- */
.firm-list li { color: var(--text); }
.firm-list li:first-child { color: var(--text); }
.firm-no { color: var(--muted); opacity: 1; }
.firm-case-why, .firm-case-note { color: var(--text); }
.section-head-note { color: var(--text); }
.firms-intro, .firms-footer, .steps-note, .roi-note ul { color: var(--text); }

/* Expediente: white paper, serif headlines, thin rules in place of cards, one calm blue. */
[hidden] { display: none !important; }
h1, h2, h3, .price-grid strong, .faq-list summary { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.eyebrow, .form-kicker:not(.form-step) { display: none; }
.site-header { border-bottom: 1px solid var(--border); background: var(--nav-bg); }
.brand { color: var(--ink); }
.nav-action, .button { border-radius: 3px; box-shadow: none !important; transform: none !important; }
.button.primary, .nav-action { background: var(--accent); border-color: var(--accent); }
.nav-shell a.nav-action, .button.primary { color: #ffffff !important; }
.button.secondary { color: var(--accent); border-color: var(--accent); }
.lead { color: #2d3748; }
.mechanism { border-left: 0; padding-left: 0; }
html.js .reveal { opacity: 1; transform: none; }
.product-preview { background: #ffffff; border: 1px solid #c9d1dd; border-radius: 2px; box-shadow: 0 1px 0 #e6eaf0, 0 18px 40px -28px rgba(20, 33, 61, 0.35); }
.product-preview::before { display: none; }
.priority-pill { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; }
.sample-reason, .sample-caveat { background: transparent; border-left-width: 2px; padding-left: 0.9rem; }
.proof-strip, .coverage-section, .trust-grid article, .feature-grid article, .price-grid article,
.comparison-card, .firm-case, .roi-figure, .intake, .profile-form, .roi-note {
  background: transparent !important; border: 0 !important; border-top: 1px solid #c9d1dd !important;
  border-radius: 0 !important; box-shadow: none !important; }
.feature-grid article:hover { transform: none; }
.feature-grid article > span { color: #8a94a6; font-family: "Source Serif 4", serif; font-weight: 400; }
.price-grid article::before { display: none; }
.price-grid strong, .roi-num { color: var(--ink) !important; font-family: "Source Serif 4", serif; }
.indicators li::before, .source-list li span, .intake-benefits li::before { color: var(--accent); }
input, textarea, select { border-radius: 3px; background: #ffffff; border-color: #c9d1dd; }
.site-footer { border-top: 1px solid var(--border); background: #ffffff; }
input, textarea, select { font-weight: 400; color: var(--ink); }
input::placeholder, textarea::placeholder { font-weight: 400; color: #8a94a6; opacity: 1; }
.chk > span { display: block; }
.chk > span .field-help { margin-top: 0.3rem; }
/* QA fixes 2026-10-28. */
strong, b { font-weight: 600; }
/* The verdict list reads as text: the pill sits inline, so names never break into columns. */
.firm-list li { display: block; }
.firm-yes, .firm-no { display: inline-block; margin-right: 0.5rem; }
.price-grid { grid-template-columns: repeat(2, minmax(0, 340px)); }
.field-error { display: block; margin-top: 0.35rem; color: var(--rust); font-size: 0.9rem; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--rust) !important; }
fieldset[aria-invalid="true"] { border: 1px solid var(--rust); }
.form-errors ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.form-errors a { color: var(--rust); font-weight: 600; }
.profile-output h3 { margin-top: 0; }
.profile-output #profile-status { font-size: 1.05rem; }
.consent-row { display: grid; gap: 0.9rem; }
.chk input[type="checkbox"] { width: 1.3rem; height: 1.3rem; flex-basis: 1.3rem; }
@media (max-width: 720px) {
  .site-header { position: static; backdrop-filter: none; }
  .nav-links a, .foot-links a { display: inline-block; padding: 0.6rem 0.2rem; }
  .price-grid { grid-template-columns: 1fr; }
}
.hero { min-height: 0; align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-copy { padding-top: 1.5rem; }
.field-help { font-size: 0.9rem; }
.cat-grupo { font-size: 0.85rem; }
.cuit-field input { max-width: 16rem; }
.price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 720px) {
  .nav-links { flex-wrap: wrap; gap: 0 1rem; }
  .nav-links a { padding: 0.6rem 0; }
  .price-grid { grid-template-columns: 1fr; }
}
.start-steps { display: grid; gap: var(--space-4); max-width: 820px; margin: var(--space-4) 0 0; padding-left: 1.4rem; }
.start-steps li { padding-left: 0.3rem; }
.start-steps strong { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }