/* ============================================================
   Lighthouse RegTech — MiCA Compliance
   Design system: MiniMax
   Accent: #0EA5E9 sky blue · Secondary: #F59E0B amber
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #FFFFFF;
  color: #0F172A;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  display: block;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: #0369A1;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.625rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: #0369A1;
  color: #FFFFFF;
  border-color: #0369A1;
}

.btn-primary:hover {
  background: #075985;
  border-color: #075985;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(14,165,233,0.30);
}

.btn-secondary {
  background: transparent;
  color: #0369A1;
  border-color: #0369A1;
}

.btn-secondary:hover {
  background: #F0F9FF;
  text-decoration: none;
}

/* ── Tags ────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #F0F9FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: #0F172A;
  text-decoration: none;
}

.nav-logo svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: #0369A1;
  text-decoration: none;
}

.nav-cta {
  font-size: 0.875rem !important;
  padding: 0.4rem 1.25rem !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #0F172A;
  border-radius: 2px;
  transition: background 0.15s;
}

/* Mobile nav overlay — BASE rule: always hidden, overridden in @media */
.nav-menu-overlay {
  display: none;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: #FFFFFF;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0369A1;
  background: #F0F9FF;
  border-radius: 9999px;
  padding: 0.3rem 1rem;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  max-width: 780px;
  margin: 0 auto 1.25rem;
  letter-spacing: -0.02em;
}

.hero-sub {
  font-size: 1.125rem;
  color: #475569;
  max-width: 600px;
  margin: 0 auto 2.25rem;
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── At a glance / TL;DR ─────────────────────────────────── */
.atglance {
  background: #F0F9FF;
  border-radius: 1.25rem;
  border: 1px solid #BAE6FD;
  padding: 2rem 2.25rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.atglance h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0369A1;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

.atglance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.625rem 1.5rem;
}

.atglance-grid li {
  font-size: 0.9375rem;
  color: #0F172A;
  padding-left: 1.25rem;
  position: relative;
}

.atglance-grid li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #0369A1;
  font-size: 0.625rem;
  top: 0.35em;
}

.jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #BAE6FD;
}

.jumpnav-label {
  flex-shrink: 0;
}

.jumpnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.jumpnav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0369A1;
}

.jumpnav a:hover {
  text-decoration: underline;
}

/* ── Sections ────────────────────────────────────────────── */
.section {
  padding: 5rem 1.5rem;
  background: #FFFFFF;
}

.section-alt {
  padding: 5rem 1.5rem;
  background: #F8FAFC;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0369A1;
  margin-bottom: 0.625rem;
}

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.section-alt h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.section-intro {
  font-size: 1.0625rem;
  color: #475569;
  max-width: 680px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* ── Cards ───────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px rgba(14,165,233,0.10);
  padding: 1.75rem;
  border: 1px solid #E2E8F0;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(14,165,233,0.18);
  transform: translateY(-2px);
}

.card-accent {
  height: 4px;
  border-radius: 4px 4px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.card-accent-blue  { background: #0EA5E9; }
.card-accent-amber { background: #F59E0B; }
.card-accent-emerald { background: #10B981; }
.card-accent-rose  { background: #F43F5E; }
.card-accent-violet { background: #8B5CF6; }

.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
}

.card p {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.65;
}

.card-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ── Stats ───────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  text-align: center;
  margin-top: 2rem;
}

.stat-item {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 4px 24px rgba(14,165,233,0.08);
  border: 1px solid #E2E8F0;
}

.stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0369A1;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-label {
  font-size: 0.8125rem;
  color: #475569;
  margin-top: 0.375rem;
  font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid #E2E8F0;
  margin-top: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9375rem;
}

thead {
  background: #0369A1;
  color: #FFFFFF;
}

th {
  padding: 0.875rem 1.125rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

td {
  padding: 0.8rem 1.125rem;
  color: #0F172A;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: top;
  line-height: 1.55;
}

tbody tr:nth-child(even) {
  background: #F8FAFC;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ── Timeline ────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 2.5rem;
  margin-top: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.6875rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: #BAE6FD;
  border-radius: 2px;
}

/* .process-step / .process-num / .step-meta (the per-step content that used
   to live under .timeline-step / .timeline-num) are defined together in the
   "Process steps" block further down this file, next to the rest of the
   Task 12 additions. */

/* ── FAQ ─────────────────────────────────────────────────── */
.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid #E2E8F0;
  border-radius: 0.875rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.faq details[open] {
  box-shadow: 0 4px 20px rgba(14,165,233,0.10);
  border-color: #BAE6FD;
}

.faq summary {
  padding: 1.125rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0F172A;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-size: 1.25rem;
  color: #0369A1;
  flex-shrink: 0;
  font-weight: 400;
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details[open] summary {
  color: #0369A1;
}

.faq details p {
  padding: 0 1.375rem 1.25rem;
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.7;
}

/* ── Glossary ────────────────────────────────────────────── */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.glossary-term {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.glossary-term h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0369A1;
  margin-bottom: 0.375rem;
}

.glossary-term p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
}

/* ── Founder ─────────────────────────────────────────────── */
.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
  background: #FFFFFF;
  border-radius: 1.25rem;
  border: 1px solid #E2E8F0;
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(14,165,233,0.08);
  max-width: 860px;
}

/* The one white-on-fill left holding the raw MiniMax accent. #0EA5E9 is
   2.77:1 against white and fails even the 3:1 large-text threshold this
   28px/800 monogram takes, so it gets the same #0369A1 substitution every
   other text and fill use on this page already carries. */
.founder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #0369A1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: #FFFFFF;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}

.founder-bio h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.25rem;
}

.founder-bio .founder-title {
  font-size: 0.875rem;
  color: #0369A1;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.founder-bio p {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.founder-bio a {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Reviews ─────────────────────────────────────────────── */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.review-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 24px rgba(14,165,233,0.08);
}

.stars {
  color: #B45309;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.review-card .review-quote {
  font-size: 0.9375rem;
  color: #0F172A;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 1rem;
}

.review-meta {
  font-size: 0.75rem;
  color: #475569;
  margin-top: 0.125rem;
}

/* ── Press strip ─────────────────────────────────────────── */
.press-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.press-item {
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #E2E8F0;
  border-radius: 0.625rem;
  padding: 0.5rem 1rem;
  transition: color 0.15s, border-color 0.15s;
}

.press-item:hover {
  color: #0369A1;
  border-color: #0369A1;
  text-decoration: none;
}

/* ── Policy block ────────────────────────────────────────── */
.policy-block details {
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.policy-block summary {
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.policy-block summary::-webkit-details-marker {
  display: none;
}

.policy-block summary::after {
  content: '+';
  color: #475569;
}

.policy-block details[open] summary::after {
  content: '−';
}

.policy-block details p {
  padding: 0 1.125rem 1rem;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.7;
}

/* ── Buyer guide ─────────────────────────────────────────── */
.buyer-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.buyer-step {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
  border-left: 4px solid #0EA5E9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.buyer-step h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.375rem;
}

.buyer-step p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.65;
}

/* ── Integrations ────────────────────────────────────────── */
.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.integration-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.4375rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.integration-chip:hover {
  border-color: #0EA5E9;
  box-shadow: 0 2px 12px rgba(14,165,233,0.15);
  text-decoration: none;
}

/* ── Team grid ───────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.team-role {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.team-role h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0369A1;
  margin-bottom: 0.375rem;
}

.team-role p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
}

/* ── Deliverables ────────────────────────────────────────── */
.deliverables-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #0F172A;
  padding: 0.875rem 1rem;
  background: #FFFFFF;
  border-radius: 0.875rem;
  border: 1px solid #E2E8F0;
}

.deliverables-list li::before {
  content: '✓';
  color: #0369A1;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Guarantee grid ──────────────────────────────────────── */
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: #F0F9FF;
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid #BAE6FD;
}

.guarantee-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.guarantee-item h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.25rem;
}

.guarantee-item p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
}

/* ── CTA block ───────────────────────────────────────────── */
.cta-block {
  background: #0369A1;
  padding: 5rem 1.5rem;
  text-align: center;
  color: #FFFFFF;
}

.cta-block h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.cta-block p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* .cta-block .btn-primary / .btn-secondary inversion rules removed (Task 12
   fix): this landing's #contact places both buttons inside white .card
   elements, not directly on the cta-block's own blue background, so the
   inversion (white button / white-on-transparent text) rendered a
   near-invisible button on a white card -- white text on white, well below
   any contrast threshold. With no override, both buttons fall back to the
   ordinary .btn-primary (blue fill, white text) / .btn-secondary
   (transparent fill, blue text and border) styling, which is correctly
   contrasted against the white card they actually sit on. */

/* Task 12 fix round 1: .cta-block sets color:#FFFFFF for its own blue
   background, but .card is a white box dropped inside it and has no color
   of its own, so the white text color kept inheriting straight through --
   invisible on white. .card h3, .card p, .legal-details dt/dd, a and
   .btn-primary/.btn-secondary all set their own color directly and are
   unaffected (a direct rule on an element always beats an inherited value,
   regardless of the ancestor rule's specificity). This only resets the
   elements that had no color of their own: the <strong> labels and the
   plain-text address/hours lines in the "Contact Us" card. */
.cta-block .card {
  color: #0F172A;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: #0F172A;
  color: #CBD5E1;
  padding: 4rem 1.5rem 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-cols {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-col .footer-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-col p {
  font-size: 0.875rem;
  color: #94A3B8;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col ul a {
  font-size: 0.875rem;
  color: #94A3B8;
  transition: color 0.15s;
}

.footer-col ul a:hover {
  color: #0EA5E9;
  text-decoration: none;
}

.footer-col .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.875rem;
  text-decoration: none;
}

.footer-logo svg {
  width: 28px;
  height: 28px;
}

.footer-bottom {
  border-top: 1px solid #1E293B;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: #94A3B8;
}

.footer-bottom a {
  color: #94A3B8;
  font-size: 0.8125rem;
}

.footer-bottom a:hover {
  color: #0EA5E9;
}

/* ── Amber accent helpers ─────────────────────────────────── */
.text-small { font-size: 0.8125rem; }

/* ── Layout / spacing utilities ──────────────────────────────
   Replace inline style="" attributes: the production CSP header sends
   style-src 'self' with no 'unsafe-inline', so any inline style="" is
   silently blocked (and logs a console error against Best Practices) in
   production even though a local server will not show it. */
.container {
  /* .section / .section-alt already carry horizontal padding, so this
     stays a bare max-width + center, matching the pre-existing but
     previously-unused .section-inner rule below it. */
  max-width: 1200px;
  margin: 0 auto;
}

.mt-lg  { margin-top: 3rem; }
.mt-md  { margin-top: 2rem; }
.mt-25  { margin-top: 2.5rem; }
.mt-1-5 { margin-top: 1.5rem; }

.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.list-plain {
  list-style: none;
  padding: 0;
}

.card-solo {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Hero price anchor ───────────────────────────────────── */
.hero-price {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  padding: 1rem 1.25rem;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 1rem;
  text-align: center;
}

.hero-price-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369A1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.hero-price-amt {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.375rem;
}

.hero-price-market {
  display: block;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.5;
}

/* ── Hero illustration (authored image, replaces the old inline SVG) ── */
.hero-illustration {
  max-width: 420px;
  margin: 0 auto 2rem;
}

.hero-illustration img {
  width: 100%;
  height: auto;
}

/* ── Service / pricing card price + CTA (Task 12: P0, .card-price) ── */
.card-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0.75rem 0 1rem;
}

/* ── Founder avatar now renders an authored monogram image ──────── */
.founder-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Full-width process / jurisdiction figures ───────────────────── */
.process-figure {
  margin-top: 2rem;
}

.process-figure img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid #E2E8F0;
}

.process-figure figcaption {
  font-size: 0.8125rem;
  color: #475569;
  margin-top: 0.625rem;
  text-align: center;
}

/* ── Readiness posture before/after pair ─────────────────────────── */
.posture-figure img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid #E2E8F0;
}

.posture-figure figcaption {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  margin-top: 0.5rem;
  text-align: center;
}

.regulatory-context h3,
.posture-compare h3,
.industries h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
}

/* ── Process steps (Task 12: P1, .process-step / .step-meta dl) ─────
   Renamed from .timeline-step; the wrapping .timeline keeps its vertical
   connector line and dot marker unchanged, only the per-step selectors
   below are renamed to match. No .reveal co-class per the block-template
   README landmine note: the _class_blocks() marker tolerates a trailing
   co-class today, but keeping the bare exact class here matches the
   other two P1 element families (.case-card, .cert-card) for consistency. */
.process-step {
  position: relative;
  margin-bottom: 2rem;
}

.process-step::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 0.25rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0EA5E9;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 2px #0EA5E9;
}

.process-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0369A1;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.process-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.375rem;
}

.process-step p {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.65;
}

.step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.5rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid #F1F5F9;
}

.step-meta dt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0369A1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.step-meta dt::after {
  content: ':';
}

.step-meta dd {
  font-size: 0.8125rem;
  color: #334155;
  margin: 0;
}

/* ── Case cards (Task 12: P1, .case-card, pairs with .card for the box
   treatment: background, padding, border, shadow, hover) ───────────── */
.case-card img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin-top: 0.75rem;
}

.card-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369A1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.case-body {
  margin-top: 1rem;
}

.case-body dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369A1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.875rem;
}

.case-body dt:first-child {
  margin-top: 0;
}

.case-body dd {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  margin: 0.25rem 0 0 0;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #F1F5F9;
}

.case-tags li {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0369A1;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}

/* ── Cert cards (Task 12: P1, .cert-card, pairs with .card) ─────────── */
.cert-card img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.cert-number {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0369A1;
  margin-bottom: 0.375rem;
}

/* ── Rating cards (Task 12: P0, .rating-cards / .rating-card) ───────── */
.rating-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.rating-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.25rem 1.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  text-align: center;
  min-width: 160px;
}

.rating-score {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}

.rating-stars {
  color: #B45309;
  font-size: 1rem;
  margin: 0.375rem 0;
}

.rating-platform {
  font-size: 0.8125rem;
  color: #334155;
  font-weight: 600;
}

/* ── Figure notes (benchmark table caption/source, rating disclaimer,
   regulatory-context caption) ───────────────────────────────────────── */
.figure-note {
  font-size: 0.8125rem;
  color: #475569;
  margin-top: 0.75rem;
  line-height: 1.5;
  text-align: left;
}

caption.figure-note {
  caption-side: top;
  padding: 0.875rem 1.125rem 0;
  margin-top: 0;
}

/* ── Pullquotes (GEO-v2: sourced external quotations) ───────────────── */
.pullquote {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #0EA5E9;
  border-radius: 0 1rem 1rem 0;
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.pullquote blockquote p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #0F172A;
  font-weight: 500;
}

.pullquote figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.5;
}

.pullquote__source {
  font-weight: 700;
  color: #0369A1;
}

.pullquote cite {
  font-style: normal;
}

/* ── Topic chips (Task 12: P2, .topic-chips nav, 8+ anchors) ────────── */
.topic-chips {
  background: #0F172A;
  padding: 0.75rem 0;
  overflow-x: auto;
}

.topic-chips .container {
  display: flex;
  gap: 1.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 0 1.5rem;
}

.topic-chips a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #E2E8F0;
  flex-shrink: 0;
}

.topic-chips a:hover {
  color: #7DD3FC;
  text-decoration: underline;
}

.topic-chips a:focus-visible {
  outline: 2px solid #7DD3FC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Legal details (Task 12: P2, .legal-details, pairs with .card;
   satisfies L17's <address> requirement too) ────────────────────────── */
.legal-details dl {
  margin-top: 1rem;
}

.legal-details dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369A1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.875rem;
}

.legal-details dt:first-child {
  margin-top: 0;
}

.legal-details dd {
  font-size: 0.9375rem;
  color: #0F172A;
  margin: 0.125rem 0 0 0;
  line-height: 1.5;
}

.legal-details address {
  font-style: normal;
}

/* ── Sticky CTA (Task 12: P1, .sticky-cta, fixed, CSS-only so it works
   with JavaScript disabled) ─────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #0F172A;
  color: #FFFFFF;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.16);
}

.sticky-cta-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #F1F5F9;
}

.sticky-cta .btn-primary {
  flex-shrink: 0;
}

/* Room at the foot of the page so the fixed sticky-cta never overlaps the
   footer's own text or its last focusable link. */
body {
  padding-bottom: 4.5rem;
}

/* ── Reveal animation ────────────────────────────────────── */
/* Base CSS never sets opacity:0 — JS adds .hidden to below-fold elements */
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal {
  /* Anchor class — JS observes elements with this class */
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Mobile overlay — only shows in mobile context */
  .nav-menu-overlay.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 64px 0 0 0;
    background: #FFFFFF;
    z-index: 99;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    border-top: 1px solid #E2E8F0;
    overflow-y: auto;
  }

  .nav-menu-overlay.open a {
    font-size: 1rem;
    font-weight: 500;
    color: #0F172A;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
  }

  /* Task 14 prework fix: the rule above is correct for the 5 plain nav
     links (dark navy on the overlay's own white background, 17.85:1), but
     .btn-primary is also an <a> inside this same overlay, so it also
     picked up the same #0F172A label on its OWN #0369A1 fill -- 3.01:1,
     below the 4.5:1 a 16px/500 label needs. Same defect class as the
     .cta-block .card fix above (a wrapper-level rule reaching an element
     that should keep its own color), but the opposite mechanism: that one
     was an unclaimed INHERITED value, this one is a higher-specificity
     DIRECT rule (.nav-menu-overlay.open a, 0-2-1) beating .btn-primary's
     own (0-1-0). One class more specific than the rule above restores the
     button's normal white-on-blue label without touching the plain
     links, which do not carry .btn-primary and so never match this.
     Scoped to .btn-primary only: the wrapper rule above still applies
     its label color to ANY other button class dropped into this overlay.
     This overlay happens to hold exactly one button today, so a future
     landing that copies this pattern with a second button here (e.g.
     .btn-secondary) needs its own override added alongside this one. Do
     not fix that by narrowing the wrapper rule instead -- it also
     carries the overlay's 16px/500 link-label font override, and
     narrowing it would drop that back to .btn's own 15px/600 and change
     the design. */
  .nav-menu-overlay.open a.btn-primary {
    color: #FFFFFF;
  }

  .hero {
    padding: 4rem 1.25rem 3rem;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .founder {
    grid-template-columns: 1fr;
  }

  .founder-avatar {
    margin: 0 auto;
  }

  .atglance {
    padding: 1.5rem;
  }

  .section,
  .section-alt {
    padding: 3.5rem 1.25rem;
  }

  /* Explicit 2/3-column grids do not auto-collapse the way the base
     .card-grid's auto-fit/minmax does, so they need their own mobile
     override to avoid a horizontal squeeze on narrow viewports. */
  .card-grid-2,
  .card-grid-3 {
    grid-template-columns: 1fr;
  }

  .sticky-cta {
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    text-align: left;
  }

  .sticky-cta-text {
    font-size: 0.8125rem;
  }

  body {
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 480px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .topic-chips a {
    font-size: 0.75rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}