/* =============================================================
   ShieldPay Landing — Complete Redesign
   Direction: Deep Obsidian luxury / Kenyan gold accent
   Signature element: The "payment rail" animated line that
   runs through the hero and connects the process steps
   ============================================================= */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --ink:        #09090B;
  --ink-90:     #111113;
  --ink-80:     #18181B;
  --ink-70:     #27272A;
  --ink-60:     #3F3F46;
  --surface:    #FAFAF9;
  --surface-2:  #F4F3F0;
  --surface-3:  #EBEBEA;
  --gold:       #C9993A;
  --gold-light: #E8C06A;
  --gold-pale:  rgba(201,153,58,0.10);
  --gold-glow:  rgba(201,153,58,0.18);
  --white:      #FFFFFF;
  --white-08:   rgba(255,255,255,0.08);
  --white-14:   rgba(255,255,255,0.14);
  --white-30:   rgba(255,255,255,0.30);
  --white-60:   rgba(255,255,255,0.60);
  --green:      #16A34A;
  --red:        #DC2626;
  --text:       var(--ink);
  --text-soft:  #52525B;
  --text-muted: #A1A1AA;
  --border:     #E4E4E7;
  --border-dark: rgba(255,255,255,0.08);
  --font:       'DM Sans', system-ui, sans-serif;
  --serif:      'Instrument Serif', Georgia, serif;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-sm:       8px;
  --r-md:       16px;
  --r-lg:       24px;
  --r-xl:       32px;
  --r-pill:     100px;
}

[data-theme="dark"] {
  --text:       #FAFAF9;
  --text-soft:  #A1A1AA;
  --text-muted: #52525B;
  --border:     rgba(255,255,255,0.08);
  --surface:    #09090B;
  --surface-2:  #111113;
  --surface-3:  #18181B;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.2vw, 64px);
}
/* Prose stays readable even though the shell is wider */
.container .section-lead,
.container .heading-block .section-lead { max-width: 65ch; }

/* ── SECTION TREATMENTS ──────────────────────────────────────────
   The page used to alternate between two near-identical off-whites
   (--surface / --surface-2), which read as no variation at all.
   These modifiers add distinct treatments while staying inside the
   obsidian + gold palette.  Each one re-points the design tokens so
   nested components (cards, tables, borders) follow automatically.
   ───────────────────────────────────────────────────────────────── */

/* Solid obsidian band.  Selector is `section.section-dark` so it beats the
   per-section `background` rules defined further down the file. */
section.section-dark {
  --surface:    #0B0B0D;
  --surface-2:  #111113;
  --surface-3:  #18181B;
  --text:       #FAFAF9;
  --text-soft:  #A1A1AA;
  --text-muted: #8A8A93;
  --border:     rgba(255,255,255,0.10);
  --gold:       #E8C06A; /* gold-600 is too dark on obsidian; use the light tone */
  background: var(--ink);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
/* Soft gold corner wash so the dark bands are not flat rectangles. */
.section-dark::before {
  content: '';
  position: absolute;
  top: -220px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(232,192,106,0.10) 0%, transparent 68%);
  pointer-events: none;
}
.section-dark > .container { position: relative; z-index: 1; }
/* Avatar chips are obsidian-on-light by default; invert inside dark bands. */
.section-dark .reviewer-avatar {
  background: rgba(232,192,106,0.14);
  color: var(--gold);
}

/* Tinted section with a faint gold wash — a third step between the
   two off-whites, so consecutive light sections still read apart. */
section.section-tint {
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.section-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(201,153,58,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.section-tint > .container { position: relative; z-index: 1; }

/* Dark theme: the page is already obsidian, so a "dark band" cannot read as
   darker. Invert the rhythm — lift the band a step and rule it off so the
   section variety survives the theme toggle. */
[data-theme="dark"] section.section-dark {
  background: #141417;
  border-top: 1px solid rgba(232,192,106,0.14);
  border-bottom: 1px solid rgba(232,192,106,0.14);
}
[data-theme="dark"] section.section-tint {
  background: #0E0E11;
}
[data-theme="dark"] .band {
  border-top: 1px solid rgba(232,192,106,0.14);
  border-bottom: 1px solid rgba(232,192,106,0.14);
}

/* Hairline rule that ties adjacent light sections together. */
.section-rule { border-top: 1px solid var(--border); }

/* ── FULL-BLEED IMAGE BAND ───────────────────────────────────────
   Edge-to-edge photographic break between content blocks.
   ───────────────────────────────────────────────────────────────── */
.band {
  position: relative;
  isolation: isolate;
  padding: clamp(88px, 11vw, 150px) 0;
  background: var(--ink);
  color: #FAFAF9;
  overflow: hidden;
  text-align: center;
}
.band-media {
  position: absolute;
  inset: 0;
  /* Must be >= 1. At z-index 0 the media layer is painted under the section's
     own opaque background in Chromium and the photo never shows. */
  z-index: 1;
  overflow: hidden;
}
.band-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.08) brightness(1.05);
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(9,9,11,0.88) 0%, rgba(9,9,11,0.58) 45%, rgba(9,9,11,0.90) 100%),
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(201,153,58,0.16) 0%, transparent 70%);
}
.band > .container { position: relative; z-index: 3; }
.band-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Brand gold (#E8C06A) only reaches 3.89:1 over this photograph at 11px,
     which is below AA for small text. Same hue, lighter tint, 4.7:1. */
  color: #F2D695;
  margin-bottom: 26px;
}
/* Text sits over photography, whose luminance varies. A soft shadow keeps
   every string above AA regardless of what is behind it. */
.band-eyebrow,
.band-title,
.band-sub { text-shadow: 0 1px 20px rgba(9,9,11,0.90), 0 1px 3px rgba(9,9,11,0.55); }
.band-title {
  font-size: clamp(1.9rem, 5.2vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 clamp(12px, 2.2vw, 30px);
}
.band-title .city-sep { color: var(--gold-light); opacity: 0.55; font-weight: 400; }
.band-sub {
  margin-top: 22px;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  color: rgba(250,250,249,0.86);
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: all 0.2s var(--ease);
  cursor: pointer;
  border: none;
}
.btn-gold {
  background: var(--gold);
  /* #FAFAF9 was 2.48:1 on gold, and the hover below sets no colour of its
     own, so it inherited that off-white onto the lighter --gold-light for an
     even worse 1.72:1. Ink reads on both. */
  color: var(--ink);
  padding: 13px 28px;
}
.btn-gold:hover {
  background: var(--gold-light);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,153,58,0.30);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  padding: 12px 28px;
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--surface-2); }
.btn-outline-white {
  background: transparent;
  color: #fff;
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.08); }
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  padding: 10px 18px;
  font-size: 14px;
}
.btn-ghost:hover { color: var(--text); }
.btn-wa {
  background: #22C55E;
  color: #fff;
  padding: 13px 28px;
}
.btn-wa:hover { background: #16A34A; transform: translateY(-1px); }
.btn-lg { padding: 17px 36px; font-size: 15px; }
.btn-full { width: 100%; }

/* pulse for hero CTA */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(201,153,58,0.40); }
  60%  { box-shadow: 0 0 0 14px rgba(201,153,58,0.00); }
  100% { box-shadow: 0 0 0 0   rgba(201,153,58,0.00); }
}
.btn-pulse { animation: cta-pulse 2.4s ease infinite; }

/* ── NAVBAR ──────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 0;
  transition: all 0.3s var(--ease);
}
.navbar.scrolled {
  background: rgba(250,250,249,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(9,9,11,0.88);
  border-color: var(--border-dark);
}
.nav-inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px clamp(20px, 3.2vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  transition: color 0.3s;
}
.navbar.scrolled .nav-logo { color: var(--text); }
.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  gap: 36px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.navbar.scrolled .nav-links a { color: var(--text-soft); }
.nav-links a:hover,
.navbar.scrolled .nav-links a:hover { color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-actions .btn-outline-white { font-size: 13px; padding: 9px 20px; }
.navbar.scrolled .btn-outline-white {
  color: var(--text);
  border-color: var(--border);
}
.navbar.scrolled .btn-outline-white:hover { background: var(--surface-2); }
.nav-actions .btn-gold { font-size: 13px; padding: 9px 20px; }

/* Theme toggle */
.btn-theme {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
}
.navbar.scrolled .btn-theme { color: var(--text-soft); }
.btn-theme:hover { background: var(--white-08); color: var(--white); }
.navbar.scrolled .btn-theme:hover { background: var(--surface-2); color: var(--text); }
.btn-theme .icon-moon { display: block; }
.btn-theme .icon-sun  { display: none; }
[data-theme="dark"] .btn-theme .icon-moon { display: none; }
[data-theme="dark"] .btn-theme .icon-sun  { display: block; }

/* Hamburger */
.btn-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  color: var(--white);
}
.navbar.scrolled .btn-hamburger { color: var(--text); }
.ham-line {
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.25s var(--ease);
  display: block;
}

/* Mobile drawer */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--surface);
  z-index: 200;
  padding: 100px 32px 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
.mobile-drawer[aria-hidden="false"] {
  display: block;
  transform: translateX(0);
}
.mobile-nav-link {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.02em;
}
.mobile-drawer-actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-close {
  position: fixed;
  top: 24px;
  right: 28px;
  font-size: 28px;
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  color: #fff;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease;
}
.hero-bg-layer.active { opacity: 1; }
.hero-bg-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(9,9,11,0.85) 0%,
    rgba(9,9,11,0.65) 50%,
    rgba(9,9,11,0.80) 100%
  );
  z-index: 1;
}
/* Decorative grid lines — the "payment rail" signature */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,153,58,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,153,58,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hero-grid-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201,153,58,0.4) 30%,
    rgba(201,153,58,0.6) 60%,
    transparent
  );
  animation: rail-pulse 4s ease-in-out infinite;
}
.hero-grid-rail:nth-child(2) { left: 33.33%; animation-delay: -1.3s; }
.hero-grid-rail:nth-child(3) { left: 66.66%; animation-delay: -2.6s; }
@keyframes rail-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,153,58,0.12);
  border: 1px solid rgba(201,153,58,0.25);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  margin-bottom: 36px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: dot-blink 2s ease infinite;
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.hero-title {
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero-title .serif-span {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
}
.hero-title .dynamic-word {
  color: var(--gold-light);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  transition: opacity 0.4s var(--ease);
}
.hero-desc {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--white-60);
  max-width: 600px;
  margin: 0 auto 48px;
  font-weight: 400;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-tagline {
  font-size: 12.5px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 64px;
  letter-spacing: 0.02em;
}
.hero-trust {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-item {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-item::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
}
.hero-scroll {
  position: absolute;
  bottom: 48px;
  right: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.scroll-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  writing-mode: vertical-rl;
}
.scroll-bar {
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, rgba(201,153,58,0.5), transparent);
  animation: scroll-bar-anim 2s ease-in-out infinite;
}
@keyframes scroll-bar-anim {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(0.8); }
}

/* ── TICKER ──────────────────────────────────────────────────── */
.ticker {
  background: var(--ink-90);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  gap: 0;
  animation: ticker-scroll 45s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  padding: 0 36px;
}
.ticker-item::after {
  content: '·';
  margin-left: 36px;
  color: var(--gold);
  opacity: 0.5;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── METRICS ─────────────────────────────────────────────────── */
.metrics {
  padding: 100px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.metric-cell {
  background: var(--surface);
  padding: 56px 48px;
  text-align: center;
  transition: background 0.2s;
}
.metric-cell:hover { background: var(--surface-2); }
.metric-num {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.metric-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.metric-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── SECTION ATOMS ───────────────────────────────────────────── */
section { padding: 120px 0; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.section-tag::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
}
.section-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--text);
}
.section-title em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
}
.section-lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 580px;
  line-height: 1.7;
}
.heading-block { margin-bottom: 72px; }
.heading-block.centered { text-align: center; }
.heading-block.centered .section-lead { margin: 0 auto; }

/* ── PROCESS ─────────────────────────────────────────────────── */
.process { background: var(--surface-2); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.process-card {
  background: var(--surface-2);
  padding: 52px 44px;
  position: relative;
  transition: background 0.2s;
  cursor: default;
}
.process-card::before {
  content: attr(data-num);
  position: absolute;
  top: 44px;
  right: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  opacity: 0.8;
}
.process-card:hover { background: var(--surface); }
.process-card-icon {
  width: 48px;
  height: 48px;
  background: var(--gold-pale);
  border: 1px solid rgba(201,153,58,0.20);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.process-card-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.8; }
.process-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.process-card-body {
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* ── LEDGER ──────────────────────────────────────────────────── */
.ledger { background: var(--surface); }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
/* Grid items default to min-width:auto, so a long unbreakable string (the
   support email) blew the track out and forced a horizontal scrollbar. */
.two-col > * { min-width: 0; }
.ledger-body {
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 40px;
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 1px solid rgba(201,153,58,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.check-icon svg { width: 10px; height: 10px; stroke: var(--gold); fill: none; stroke-width: 2.5; }
.check-item strong { color: var(--text); font-weight: 600; }

.ledger-panel {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 44px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 32px 64px rgba(0,0,0,0.20);
  position: relative;
  overflow: hidden;
}
.ledger-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,153,58,0.5), transparent);
}
.panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,153,58,0.10);
  border: 1px solid rgba(201,153,58,0.20);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: dot-blink 1.8s ease infinite;
}
.ledger-rows { display: flex; flex-direction: column; gap: 0; }
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ledger-row:last-child { border-bottom: none; }
.row-meta { display: flex; flex-direction: column; gap: 3px; }
.row-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }
.row-via  { font-size: 11.5px; color: rgba(255,255,255,0.30); }
.row-amount {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ledger-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(201,153,58,0.25);
}
.total-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.45); }
.total-amount { font-size: 1.5rem; font-weight: 800; color: var(--gold-light); letter-spacing: -0.02em; }

/* ── INDUSTRIES ──────────────────────────────────────────────── */
.industries { background: var(--surface-2); }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.industry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  transition: all 0.25s var(--ease);
}
.industry-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--gold-glow);
}
.industry-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.industry-list li {
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.industry-list li:last-child { border-bottom: none; }
.industry-list li::before { content: '—'; color: var(--gold); font-size: 12px; flex-shrink: 0; }
.industry-cta {
  margin-top: 72px;
  text-align: center;
}
.industry-callout {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 48px;
  letter-spacing: -0.02em;
}
.industry-callout a { color: var(--gold); text-decoration: underline; text-underline-offset: 5px; }
.city-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.city-strip span { color: var(--text); }
.city-sep { opacity: 0.3; }

/* ── PLATFORM / FEATURES ─────────────────────────────────────── */
.platform { background: var(--surface); }
.platform-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: flex-start;
}
.platform-sticky {
  position: sticky;
  top: 120px;
}
.platform-visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}
.platform-visual picture { display: block; }
.platform-visual img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.feature-cell {
  background: var(--surface);
  padding: 40px 36px;
  transition: background 0.2s;
}
.feature-cell:hover { background: var(--surface-2); }
.feature-icon {
  width: 36px;
  height: 36px;
  background: var(--gold-pale);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 2; }
.feature-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.feature-desc { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }

/* ── COMPARISON ──────────────────────────────────────────────── */
.comparison { background: var(--surface-2); }
.comp-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.comp-table {
  width: 100%;
  border-collapse: collapse;
}
.comp-table th {
  padding: 24px 32px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  letter-spacing: -0.01em;
}
.comp-table th.col-sp {
  background: rgba(201,153,58,0.06);
  color: var(--gold);
  border-left: 1px solid rgba(201,153,58,0.15);
  border-right: 1px solid rgba(201,153,58,0.15);
}
.comp-table td {
  padding: 22px 32px;
  font-size: 14px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.comp-table tr:last-child td { border-bottom: none; }
.comp-table td:first-child { font-weight: 600; color: var(--text); }
.comp-table td.col-sp {
  color: var(--gold);
  font-weight: 700;
  background: rgba(201,153,58,0.04);
  border-left: 1px solid rgba(201,153,58,0.10);
  border-right: 1px solid rgba(201,153,58,0.10);
}

/* ── SECURITY ────────────────────────────────────────────────── */
.security { background: var(--surface); }
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.sec-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}
.sec-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.sec-card:hover { border-color: rgba(201,153,58,0.3); }
.sec-card:hover::after { opacity: 1; }
.sec-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.sec-card-body { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }
.sec-notice {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 56px 72px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.sec-notice::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,153,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,153,58,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sec-notice p {
  position: relative;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}
.sec-notice strong { color: var(--gold-light); font-weight: 700; }

/* ── INTEGRATIONS ────────────────────────────────────────────── */
.integrations { background: var(--surface-2); }
.int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.int-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  text-align: center;
  transition: all 0.25s var(--ease);
}
.int-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 32px var(--gold-glow);
}
.int-badge {
  width: 64px;
  height: 64px;
  background: var(--ink);
  color: var(--gold);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 auto 24px;
}
.int-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.int-desc { font-size: 13px; color: var(--text-soft); line-height: 1.6; }
.workflow-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 64px;
}
.workflow-heading {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 56px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.workflow-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(16.66% + 12px);
  right: calc(16.66% + 12px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(201,153,58,0.2) 50%, var(--gold) 100%);
  opacity: 0.3;
}
.wf-step {}
.wf-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-num::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,153,58,0.4);
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-label { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; }
.wf-desc { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing { background: var(--surface); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 32px;
}
.price-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  transition: border-color 0.2s;
}
.price-card:hover { border-color: var(--gold); }
.price-card.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201,153,58,0.04) 0%, var(--surface) 100%);
}
.popular-tag {
  position: absolute;
  top: 28px;
  right: 28px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.tier-name { font-size: 1rem; font-weight: 700; color: var(--text-muted); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.tier-price {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  line-height: 1;
}
.tier-period { font-size: 14px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.tier-tagline { font-size: 13.5px; color: var(--text-soft); margin-bottom: 36px; margin-top: 8px; }
.tier-features { flex-grow: 1; margin-bottom: 40px; }
.tier-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.tier-features li:last-child { border-bottom: none; }
.tier-features li::before { content: '✓'; color: var(--gold); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.pricing-note { text-align: center; font-size: 13px; color: var(--text-muted); }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.reviews { background: var(--surface-2); }
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 52px;
}
.stars {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.review-quote {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 36px;
  font-weight: 400;
}
.reviewer {
  display: flex;
  align-items: center;
  gap: 16px;
}
.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.reviewer-name { font-size: 14px; font-weight: 700; color: var(--text); display: block; }
.reviewer-co   { font-size: 13px; color: var(--text-muted); }

/* ── BLOG ────────────────────────────────────────────────────── */
.blog { background: var(--surface); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.post-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  transition: all 0.25s var(--ease);
  display: flex;
  flex-direction: column;
}
.post-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.post-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.post-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.post-excerpt {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 32px;
}
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.post-date { font-size: 12.5px; color: var(--text-muted); }
.post-read { font-size: 13px; font-weight: 700; color: var(--gold); }
/* Not a link: the articles do not exist yet, so this must not look clickable
   (issue #278). Gold is reserved for things that do something. */
.post-read--soon {
  color: var(--text-muted);
  font-weight: 600;
  font-style: italic;
  cursor: default;
}
.newsletter-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 52px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.newsletter-lead { font-size: 1.1rem; font-weight: 600; color: var(--text); max-width: 440px; letter-spacing: -0.01em; }

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact { background: var(--surface-2); }
.contact-info { display: flex; flex-direction: column; }
.contact-desc { font-size: 1.05rem; color: var(--text-soft); line-height: 1.75; margin-bottom: 48px; }
.contact-methods { display: flex; flex-direction: column; gap: 16px; }
.method-box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  transition: border-color 0.2s;
}
.method-box:hover { border-color: var(--gold); }
.method-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}
.method-val { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* --gold (#C9993A) is 2.34:1 on this section's light surface, so the three
   contact values were failing AA before any of them was a link. Same fix the
   file already makes at --faq-accent and --legal-accent: bronze on light,
   where it reaches 5.12:1, and the light gold on the obsidian dark theme,
   where it clears 7:1. Applied to the class rather than to the email alone,
   because the phone number and response time sit beside it with the identical
   problem and should not diverge visually. */
.contact-methods { --method-accent: #8A6620; }
[data-theme="dark"] .contact-methods { --method-accent: var(--gold-light); }
.method-val.green { color: var(--method-accent); }

/* The contact email and the footer email are real mailto links, not display
   text. They used to be a <span>, so on a phone the address could be read but
   not tapped, which is the wrong way round for the one page whose job is to
   get people to make contact.

   `a { text-decoration: none; color: inherit }` at the top of this file means
   an anchor here inherits its surroundings exactly, so the colours below are
   unchanged from the spans they replace and no contrast ratio moves. What the
   anchor does not inherit is any sign that it can be clicked, so that is added
   here: underline on hover and on keyboard focus, plus a visible focus ring.
   The colour comes from --method-accent above and is the same for the links as
   it was for the spans they replaced. */
.method-link:hover,
.method-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.method-link:focus-visible,
.footer-contact-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inline in a run of footer text, so these carry a permanent underline. The
   phone number and the address sit in one sentence separated by a pipe, and
   with no colour change nothing else would tell a reader that either half is
   interactive. */
.footer-contact-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-contact-link:hover { color: var(--gold); }

/* Touch. Both links are small text in a page with no other coarse-pointer
   handling, so the hit area is grown here rather than by restyling the type.
   inline-block is what lets the vertical padding apply at all. */
@media (pointer: coarse) {
  .method-link,
  .footer-contact-link {
    display: inline-block;
    padding-block: 12px;
  }

  /* The legal pages list the same details in a <dl class="legal-contact">,
     where each value stands alone in its own <dd> rather than sitting in a
     sentence. Those are real targets and were 18px.

     Only these. Every other contact link on those pages is inline in legal
     prose, which WCAG 2.5.8 exempts precisely because padding it would open
     up the line spacing of a document people already find hard to read. */
  .legal-contact dd a {
    display: inline-block;
    padding-block: 13px;
  }
}
.contact-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 56px;
}
.form-heading { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.02em; }
.form-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 40px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field input,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s;
  -webkit-appearance: none;
  outline: none;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,153,58,0.10);
}

/* ── CTA CLOSURE ─────────────────────────────────────────────── */
.cta-block {
  background: var(--ink);
  padding: 140px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,153,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,153,58,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.cta-inner { position: relative; z-index: 1; }
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.cta-eyebrow::before,
.cta-eyebrow::after { content: '—'; }
.cta-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 24px;
}
.cta-title em { font-family: var(--serif); font-style: italic; color: var(--gold-light); font-weight: 400; }
.cta-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.50);
  max-width: 540px;
  margin: 0 auto 48px;
  line-height: 1.7;
}
.cta-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 80px; }
.cta-rails {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.20);
  font-weight: 600;
  text-transform: uppercase;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 80px 0 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: clamp(32px, 4vw, 72px);
  margin-bottom: 64px;
}
.footer-brand-name { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 20px; letter-spacing: -0.02em; }
/* The mark sits beside the wordmark, matching the navbar treatment. Flex
   rather than inline-block so the two align on their centres at any font
   size; the navbar gets away with vertical-align because it is a flex row
   already. */
.footer-brand-name { display: flex; align-items: center; gap: 10px; }
.footer-brand-name img { width: 28px; height: 28px; flex-shrink: 0; }
.footer-desc { font-size: 14px; color: var(--text-soft); line-height: 1.7; margin-bottom: 24px; max-width: 340px; }
.footer-contact { font-size: 13.5px; font-weight: 600; color: var(--text); }
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 28px;
  display: block;
}
.footer-col a { display: block; font-size: 14px; color: var(--text-soft); margin-bottom: 14px; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bar {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  text-align: center;
}
.footer-rails { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; letter-spacing: 0.04em; }
.footer-copy  { font-size: 12.5px; color: var(--text-muted); }

/* ── FLOATING WHATSAPP ───────────────────────────────────────── */
.float-wa {
  position: fixed;
  bottom: 36px;
  left: 36px;
  width: 56px;
  height: 56px;
  background: #22C55E;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(34,197,94,0.35);
  z-index: 90;
  transition: all 0.25s var(--ease-spring);
}
.float-wa:hover { transform: scale(1.12); box-shadow: 0 12px 32px rgba(34,197,94,0.45); }

/* ── ANIMATIONS / UTILITIES ──────────────────────────────────── */
.color-gold { color: var(--gold); }

/* Scroll-reveal is an enhancement, not a prerequisite for reading the page.
   Everything below is scoped to .js, which is added by the inline <head>
   script in home_page.html. With scripting unavailable (crawlers, link
   unfurlers, script blockers, a failed landing.js) the rules never match and
   content renders at its natural opacity. See issue #158. */
.js [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js [data-animate].in-view {
  opacity: 1;
  transform: none;
}
.js [data-delay="1"] { transition-delay: 0.1s; }
.js [data-delay="2"] { transition-delay: 0.2s; }
.js [data-delay="3"] { transition-delay: 0.3s; }
.js [data-delay="4"] { transition-delay: 0.4s; }
.js [data-delay="5"] { transition-delay: 0.5s; }

/* Honour an OS-level request for less motion: show the content outright
   rather than fading 66 elements in on scroll. */
@media (prefers-reduced-motion: reduce) {
  .js [data-animate],
  .js [data-animate].in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js [data-delay="1"],
  .js [data-delay="2"],
  .js [data-delay="3"],
  .js [data-delay="4"],
  .js [data-delay="5"] { transition-delay: 0s; }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .btn-hamburger { display: flex; }
  .nav-inner { padding: 18px 24px; }
  .two-col { grid-template-columns: 1fr; gap: 60px; }
  .platform-layout { grid-template-columns: 1fr; gap: 48px; }
  .platform-sticky { position: static; }
  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .int-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-steps { grid-template-columns: 1fr; gap: 32px; }
  .workflow-steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .nav-actions .btn-ghost,
  .nav-actions .btn-outline-white:not(.btn-gold) { display: none; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { order: -1; }
  .reviews-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .newsletter-row { flex-direction: column; text-align: center; gap: 24px; }
  .security-grid { grid-template-columns: 1fr; }
  .sec-notice { padding: 40px 32px; }
  .workflow-box { padding: 40px 32px; }
}
@media (max-width: 640px) {
  section { padding: 80px 0; }
  .container { padding: 0 20px; }
  /* The nav overflowed the viewport below ~400px, pushing the hamburger
     off-screen and making the mobile menu unreachable. Tighten the gaps
     and the CTA so the whole bar fits at 360px. */
  .nav-inner { padding: 16px 20px; gap: 12px; }
  .nav-logo { min-width: 0; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-gold { font-size: 12px; padding: 9px 14px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.8rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .process-grid { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
  .cta-btns { flex-direction: column; align-items: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-wrap { padding: 36px 28px; }
  .method-box { padding: 22px 20px; }
  .method-val { font-size: 1.1rem; }
}

/*:root {*/
/*  --primary: #00D170;*/
/*  --primary-hover: #00B360;*/
/*  --secondary: #1A1A1A;*/
/*  --bg-light: #FFFFFF;*/
/*  --bg-dark: #0A0A0A;*/
/*  --text-main: #1A1A1A;*/
/*  --text-muted: #666666;*/
/*  --border: #EEEEEE;*/
/*  --accent-soft: rgba(0, 209, 112, 0.1);*/
/*  --font-main: 'DM Sans', sans-serif;*/
/*  --font-serif: 'Instrument Serif', serif;*/
/*  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
/*}*/

/*[data-theme="dark"] {*/
/*  --bg-light: #0A0A0A;*/
/*  --bg-dark: #FFFFFF;*/
/*  --text-main: #FFFFFF;*/
/*  --text-muted: #AAAAAA;*/
/*  --border: #222222;*/
/*}*/

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

/*html {*/
/*  scroll-behavior: smooth;*/
/*}*/

/*body {*/
/*  font-family: var(--font-main);*/
/*  background-color: var(--bg-light);*/
/*  color: var(--text-main);*/
/*  line-height: 1.6;*/
/*  overflow-x: hidden;*/
/*}*/

/*a {*/
/*  text-decoration: none;*/
/*  color: inherit;*/
/*  transition: var(--transition);*/
/*}*/

/*ul {*/
/*  list-style: none;*/
/*}*/

/*img {*/
/*  max-width: 100%;*/
/*  display: block;*/
/*}*/

/*.container-constrained {*/
/*  max-width: 1200px;*/
/*  margin: 0 auto;*/
/*  padding: 0 24px;*/
/*}*/

/*!* ===================== BUTTONS ===================== *!*/
/*.btn-primary, .btn-primary-nav {*/
/*  background-color: var(--primary);*/
/*  color: #000;*/
/*  padding: 12px 24px;*/
/*  border-radius: 100px;*/
/*  font-weight: 700;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  border: none;*/
/*  cursor: pointer;*/
/*  white-space: nowrap;*/
/*}*/

/*.btn-primary:hover {*/
/*  background-color: var(--primary-hover);*/
/*  transform: translateY(-2px);*/
/*  box-shadow: 0 10px 20px rgba(0, 209, 112, 0.2);*/
/*}*/

/*.btn-secondary {*/
/*  background-color: transparent;*/
/*  color: var(--text-main);*/
/*  padding: 12px 24px;*/
/*  border-radius: 100px;*/
/*  font-weight: 600;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  border: 1px solid var(--border);*/
/*  cursor: pointer;*/
/*  white-space: nowrap;*/
/*}*/

/*.btn-secondary:hover {*/
/*  background-color: var(--border);*/
/*}*/

/*.btn-nav-link {*/
/*  font-weight: 600;*/
/*  color: var(--text-main);*/
/*  padding: 8px 16px;*/
/*}*/

/*.btn-dashboard-nav {*/
/*  font-weight: 600;*/
/*  color: var(--text-main);*/
/*  padding: 8px 16px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 100px;*/
/*}*/

/*.btn-large {*/
/*  padding: 16px 32px;*/
/*  font-size: 1.1rem;*/
/*}*/

/*.btn-full-width {*/
/*  width: 100%;*/
/*}*/

/*.btn-whatsapp {*/
/*  background-color: #25D366;*/
/*  color: #fff;*/
/*  padding: 12px 24px;*/
/*  border-radius: 100px;*/
/*  font-weight: 600;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/

/*.btn-cta-pulse {*/
/*  animation: pulse 2s infinite;*/
/*}*/

/*@keyframes pulse {*/
/*  0% { box-shadow: 0 0 0 0 rgba(0, 209, 112, 0.4); }*/
/*  70% { box-shadow: 0 0 0 15px rgba(0, 209, 112, 0); }*/
/*  100% { box-shadow: 0 0 0 0 rgba(0, 209, 112, 0); }*/
/*}*/

/*!* ===================== NAVBAR ===================== *!*/
/*.navbar {*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  z-index: 1000;*/
/*  background: rgba(255, 255, 255, 0.8);*/
/*  backdrop-filter: blur(12px);*/
/*  -webkit-backdrop-filter: blur(12px);*/
/*  border-bottom: 1px solid var(--border);*/
/*  transition: var(--transition);*/
/*}*/

/*[data-theme="dark"] .navbar {*/
/*  background: rgba(10, 10, 10, 0.8);*/
/*}*/

/*.nav-container {*/
/*  max-width: 1400px;*/
/*  margin: 0 auto;*/
/*  padding: 16px 24px;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*}*/

/*.nav-logo {*/
/*  font-size: 1.5rem;*/
/*  font-weight: 800;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  color: var(--text-main);*/
/*  flex-shrink: 0;*/
/*}*/

/*.nav-links {*/
/*  display: flex;*/
/*  gap: 32px;*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  transform: translateX(-50%);*/
/*}*/

/*.nav-links a {*/
/*  font-weight: 600;*/
/*  color: var(--text-muted);*/
/*  font-size: 0.95rem;*/
/*}*/

/*.nav-links a:hover {*/
/*  color: var(--primary);*/
/*}*/

/*.nav-actions {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 12px;*/
/*}*/

/*.btn-theme-toggle {*/
/*  background: none;*/
/*  border: none;*/
/*  cursor: pointer;*/
/*  color: var(--text-main);*/
/*  padding: 8px;*/
/*  border-radius: 50%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  transition: var(--transition);*/
/*}*/

/*.btn-theme-toggle:hover {*/
/*  background: var(--accent-soft);*/
/*}*/

/*.btn-theme-toggle .icon-moon { display: block; }*/
/*.btn-theme-toggle .icon-sun { display: none; }*/

/*[data-theme="dark"] .btn-theme-toggle .icon-moon { display: none; }*/
/*[data-theme="dark"] .btn-theme-toggle .icon-sun { display: block; }*/

/*.btn-hamburger {*/
/*  display: none;*/
/*  flex-direction: column;*/
/*  gap: 6px;*/
/*  background: none;*/
/*  border: none;*/
/*  cursor: pointer;*/
/*  padding: 8px;*/
/*}*/

/*.ham-line {*/
/*  width: 24px;*/
/*  height: 2px;*/
/*  background-color: var(--text-main);*/
/*  transition: var(--transition);*/
/*}*/

/*!* Mobile Drawer - HIDDEN BY DEFAULT *!*/
/*.mobile-drawer {*/
/*  display: none;*/
/*  position: fixed;*/
/*  top: 72px;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: calc(100vh - 72px);*/
/*  background: var(--bg-light);*/
/*  z-index: 999;*/
/*  padding: 40px 24px;*/
/*  overflow-y: auto;*/
/*}*/

/*.mobile-drawer[aria-hidden="false"] {*/
/*  display: block;*/
/*}*/

/*.mobile-nav-link {*/
/*  display: block;*/
/*  font-size: 1.5rem;*/
/*  font-weight: 700;*/
/*  margin-bottom: 24px;*/
/*  color: var(--text-main);*/
/*}*/

/*.mobile-drawer-actions {*/
/*  margin-top: 40px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 16px;*/
/*}*/

/*!* ===================== HERO ===================== *!*/
/*.hero-section {*/
/*  position: relative;*/
/*  min-height: 100vh;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  padding-top: 100px;*/
/*  color: #fff;*/
/*  overflow: hidden;*/
/*  background-color: #111;*/
/*}*/

/*.hero-bg-wrap {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  z-index: 0;*/
/*}*/

/*.hero-bg-layer {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-size: cover;*/
/*  background-position: center;*/
/*  opacity: 0;*/
/*  transition: opacity 1.5s ease-in-out;*/
/*}*/

/*.hero-bg-layer.active {*/
/*  opacity: 1;*/
/*}*/

/*.hero-bg-tint {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);*/
/*  z-index: 1;*/
/*}*/

/*.hero-container {*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  max-width: 1000px;*/
/*  margin: 0 auto;*/
/*  padding: 0 24px;*/
/*  text-align: center;*/
/*}*/

/*.hero-badge {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  background: rgba(255, 255, 255, 0.1);*/
/*  backdrop-filter: blur(8px);*/
/*  -webkit-backdrop-filter: blur(8px);*/
/*  padding: 8px 20px;*/
/*  border-radius: 100px;*/
/*  font-size: 0.75rem;*/
/*  font-weight: 700;*/
/*  letter-spacing: 1.5px;*/
/*  margin-bottom: 40px;*/
/*  border: 1px solid rgba(255,255,255,0.2);*/
/*  text-transform: uppercase;*/
/*}*/

/*.badge-dot {*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  background-color: var(--primary);*/
/*  border-radius: 50%;*/
/*  margin-right: 10px;*/
/*  box-shadow: 0 0 10px var(--primary);*/
/*}*/

/*.hero-title {*/
/*  font-size: clamp(3rem, 10vw, 6rem);*/
/*  line-height: 1;*/
/*  font-weight: 800;*/
/*  margin-bottom: 32px;*/
/*  letter-spacing: -2px;*/
/*}*/

/*.dynamic-word-wrap {*/
/*  display: inline-block;*/
/*  min-width: 200px;*/
/*  text-align: left;*/
/*}*/

/*.dynamic-word {*/
/*  display: inline-block;*/
/*  color: var(--primary);*/
/*  font-style: italic;*/
/*  font-family: var(--font-serif);*/
/*  transition: opacity 0.5s ease;*/
/*}*/

/*.hero-description {*/
/*  font-size: clamp(1.1rem, 2vw, 1.4rem);*/
/*  max-width: 750px;*/
/*  margin: 0 auto 48px;*/
/*  opacity: 0.85;*/
/*  font-weight: 500;*/
/*}*/

/*.hero-buttons-group {*/
/*  display: flex;*/
/*  gap: 20px;*/
/*  justify-content: center;*/
/*  margin-bottom: 32px;*/
/*}*/

/*.hero-footer-tagline {*/
/*  font-size: 0.9rem;*/
/*  opacity: 0.6;*/
/*  margin-bottom: 60px;*/
/*}*/

/*.hero-trust-badges {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  justify-content: center;*/
/*  gap: 32px;*/
/*  opacity: 0.6;*/
/*}*/

/*.trust-badge {*/
/*  font-size: 0.85rem;*/
/*  font-weight: 600;*/
/*}*/

/*.hero-scroll-indicator {*/
/*  position: absolute;*/
/*  bottom: 40px;*/
/*  right: 60px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: center;*/
/*  gap: 16px;*/
/*  z-index: 2;*/
/*}*/

/*.scroll-text {*/
/*  writing-mode: vertical-rl;*/
/*  font-size: 0.7rem;*/
/*  letter-spacing: 3px;*/
/*  text-transform: uppercase;*/
/*  font-weight: 700;*/
/*  opacity: 0.5;*/
/*}*/

/*.scroll-line {*/
/*  width: 1px;*/
/*  height: 80px;*/
/*  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);*/
/*}*/

/*!* ===================== TICKER ===================== *!*/
/*.ticker-ribbon {*/
/*  background-color: #000;*/
/*  color: #fff;*/
/*  padding: 24px 0;*/
/*  overflow: hidden;*/
/*  white-space: nowrap;*/
/*  border-top: 1px solid rgba(255,255,255,0.1);*/
/*  border-bottom: 1px solid rgba(255,255,255,0.1);*/
/*}*/

/*.marquee-scroller {*/
/*  display: inline-block;*/
/*  animation: marquee 40s linear infinite;*/
/*}*/

/*.ticker-label {*/
/*  font-size: 1.1rem;*/
/*  font-weight: 800;*/
/*  margin-right: 80px;*/
/*  text-transform: uppercase;*/
/*  letter-spacing: 1px;*/
/*  opacity: 0.8;*/
/*}*/

/*@keyframes marquee {*/
/*  0% { transform: translateX(0); }*/
/*  100% { transform: translateX(-50%); }*/
/*}*/

/*!* ===================== METRICS ===================== *!*/
/*.metrics-dashboard-bar {*/
/*  padding: 100px 0;*/
/*  background-color: var(--bg-light);*/
/*}*/

/*.metrics-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(4, 1fr);*/
/*  gap: 48px;*/
/*}*/

/*.metric-block {*/
/*  text-align: center;*/
/*}*/

/*.metric-big-number {*/
/*  font-size: 4rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 12px;*/
/*  letter-spacing: -2px;*/
/*  color: var(--text-main);*/
/*}*/

/*.metric-text-label {*/
/*  font-weight: 700;*/
/*  color: var(--text-main);*/
/*  font-size: 1.1rem;*/
/*}*/

/*.sub-label {*/
/*  display: block;*/
/*  font-size: 0.9rem;*/
/*  font-weight: 500;*/
/*  color: var(--text-muted);*/
/*  margin-top: 4px;*/
/*}*/

/*!* ===================== SECTIONS COMMON ===================== *!*/
/*section {*/
/*  padding: 120px 0;*/
/*}*/

/*.section-tag {*/
/*  color: var(--primary);*/
/*  font-weight: 800;*/
/*  text-transform: uppercase;*/
/*  letter-spacing: 2px;*/
/*  font-size: 0.8rem;*/
/*  margin-bottom: 20px;*/
/*  display: block;*/
/*}*/

/*.section-main-title {*/
/*  font-size: clamp(2.5rem, 6vw, 4rem);*/
/*  line-height: 1.05;*/
/*  font-weight: 800;*/
/*  margin-bottom: 32px;*/
/*  letter-spacing: -1.5px;*/
/*}*/

/*.section-heading-block {*/
/*  margin-bottom: 80px;*/
/*}*/

/*.section-subtitle-description {*/
/*  font-size: 1.25rem;*/
/*  color: var(--text-muted);*/
/*  max-width: 700px;*/
/*  margin-bottom: 40px;*/
/*}*/

/*.text-align-center {*/
/*  text-align: center;*/
/*}*/

/*!* ===================== PROCESS ===================== *!*/
/*.pipeline-steps-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
/*  gap: 32px;*/
/*}*/

/*.pipeline-card {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 48px;*/
/*  border-radius: 32px;*/
/*  transition: var(--transition);*/
/*}*/

/*.pipeline-card:hover {*/
/*  border-color: var(--primary);*/
/*  transform: translateY(-12px);*/
/*  box-shadow: 0 20px 40px rgba(0,0,0,0.05);*/
/*}*/

/*.pipeline-card-num {*/
/*  font-size: 2rem;*/
/*  font-weight: 800;*/
/*  color: var(--primary);*/
/*  margin-bottom: 24px;*/
/*}*/

/*.pipeline-card-title {*/
/*  font-size: 1.5rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 16px;*/
/*}*/

/*.pipeline-card-desc {*/
/*  color: var(--text-muted);*/
/*  font-size: 1rem;*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== LEDGER ===================== *!*/
/*.ledger-two-column-layout {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1fr;*/
/*  gap: 100px;*/
/*  align-items: center;*/
/*}*/

/*.ledger-paragraph-body {*/
/*  font-size: 1.2rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 40px;*/
/*  font-weight: 500;*/
/*}*/

/*.ledger-feature-bullets {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 20px;*/
/*}*/

/*.ledger-feature-bullets li {*/
/*  position: relative;*/
/*  padding-left: 32px;*/
/*  font-weight: 500;*/
/*}*/

/*.ledger-feature-bullets li::before {*/
/*  content: '✓';*/
/*  position: absolute;*/
/*  left: 0;*/
/*  color: var(--primary);*/
/*  font-weight: 900;*/
/*}*/

/*.ledger-interface-visual {*/
/*  background: #111;*/
/*  color: #fff;*/
/*  padding: 48px;*/
/*  border-radius: 40px;*/
/*  box-shadow: 0 30px 60px rgba(0,0,0,0.3);*/
/*}*/

/*.visual-header-row {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  margin-bottom: 40px;*/
/*}*/

/*.visual-panel-title {*/
/*  font-size: 1.25rem;*/
/*  font-weight: 800;*/
/*}*/

/*.live-status-indicator {*/
/*  background: rgba(0, 209, 112, 0.15);*/
/*  color: var(--primary);*/
/*  padding: 6px 16px;*/
/*  border-radius: 100px;*/
/*  font-size: 0.7rem;*/
/*  font-weight: 800;*/
/*  text-transform: uppercase;*/
/*  letter-spacing: 1px;*/
/*}*/

/*.visual-matrix-row {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  padding: 20px 0;*/
/*  border-bottom: 1px solid rgba(255,255,255,0.08);*/
/*}*/

/*.row-name {*/
/*  font-weight: 700;*/
/*  font-size: 1.1rem;*/
/*}*/

/*.row-route-subtext {*/
/*  font-size: 0.85rem;*/
/*  opacity: 0.5;*/
/*  margin-top: 4px;*/
/*}*/

/*.row-right-value {*/
/*  font-weight: 800;*/
/*  font-size: 1.2rem;*/
/*}*/

/*.total-summary-row {*/
/*  border-bottom: none;*/
/*  margin-top: 24px;*/
/*  padding-top: 32px;*/
/*  border-top: 2px solid var(--primary);*/
/*}*/

/*.font-black-emphasis {*/
/*  color: var(--primary);*/
/*  font-size: 1.75rem;*/
/*}*/

/*!* ===================== INDUSTRIES ===================== *!*/
/*.industries-three-column-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 32px;*/
/*}*/

/*.industry-box {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 40px;*/
/*  border-radius: 32px;*/
/*  transition: var(--transition);*/
/*}*/

/*.industry-box:hover {*/
/*  border-color: var(--primary);*/
/*}*/

/*.industry-box-title {*/
/*  font-size: 1.4rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 24px;*/
/*}*/

/*.industry-items-list li {*/
/*  padding: 12px 0;*/
/*  color: var(--text-muted);*/
/*  border-bottom: 1px solid var(--border);*/
/*  font-weight: 500;*/
/*}*/

/*.industry-items-list li:last-child {*/
/*  border-bottom: none;*/
/*}*/

/*.industry-footer-callout {*/
/*  margin-top: 100px;*/
/*  text-align: center;*/
/*}*/

/*.industry-whatsapp-lead {*/
/*  font-size: 1.5rem;*/
/*  font-weight: 700;*/
/*  margin-bottom: 48px;*/
/*}*/

/*.industry-whatsapp-lead a {*/
/*  color: var(--primary);*/
/*  text-decoration: underline;*/
/*  text-underline-offset: 6px;*/
/*}*/

/*.industry-visual-banner {*/
/*  margin-bottom: 48px;*/
/*  border-radius: 40px;*/
/*  overflow: hidden;*/
/*  box-shadow: 0 20px 40px rgba(0,0,0,0.1);*/
/*}*/

/*.industry-visual-banner img {*/
/*  width: 100%;*/
/*  height: 400px;*/
/*  object-fit: cover;*/
/*}*/

/*.regional-badges-row {*/
/*  font-weight: 800;*/
/*  font-size: 1.25rem;*/
/*  margin-bottom: 12px;*/
/*}*/

/*!* ===================== PLATFORM ===================== *!*/
/*.features-split-layout {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1.5fr;*/
/*  gap: 80px;*/
/*  align-items: flex-start;*/
/*}*/

/*.features-visual-side img {*/
/*  border-radius: 40px;*/
/*  width: 100%;*/
/*  box-shadow: 0 30px 60px rgba(0,0,0,0.1);*/
/*}*/

/*.features-grid-side {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1fr;*/
/*  gap: 48px;*/
/*}*/

/*.feature-item-title {*/
/*  font-size: 1.3rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 16px;*/
/*}*/

/*.feature-item-desc {*/
/*  color: var(--text-muted);*/
/*  font-size: 1rem;*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== COMPARISON ===================== *!*/
/*.comparison-table-wrap {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 32px;*/
/*  overflow: hidden;*/
/*}*/

/*.comparison-table {*/
/*  width: 100%;*/
/*  border-collapse: collapse;*/
/*  text-align: left;*/
/*}*/

/*.comparison-table th, .comparison-table td {*/
/*  padding: 32px;*/
/*  border-bottom: 1px solid var(--border);*/
/*}*/

/*.comparison-table th {*/
/*  font-size: 1.2rem;*/
/*  font-weight: 800;*/
/*  background: var(--bg-light);*/
/*}*/

/*.highlight-col {*/
/*  background-color: var(--accent-soft);*/
/*  color: var(--primary);*/
/*  font-weight: 800;*/
/*}*/

/*!* ===================== SECURITY ===================== *!*/
/*.security-cards-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 32px;*/
/*  margin-bottom: 80px;*/
/*}*/

/*.security-card {*/
/*  padding: 40px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 32px;*/
/*  transition: var(--transition);*/
/*}*/

/*.security-card:hover {*/
/*  border-color: var(--primary);*/
/*}*/

/*.security-card-title {*/
/*  font-size: 1.25rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 16px;*/
/*}*/

/*.security-card-desc {*/
/*  color: var(--text-muted);*/
/*  font-size: 1rem;*/
/*  font-weight: 500;*/
/*}*/

/*.security-notice-box {*/
/*  background: #111;*/
/*  color: #fff;*/
/*  padding: 60px;*/
/*  border-radius: 32px;*/
/*  text-align: center;*/
/*  font-size: 1.4rem;*/
/*  font-weight: 600;*/
/*  line-height: 1.4;*/
/*}*/

/*!* ===================== INTEGRATIONS ===================== *!*/
/*.integrations-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(4, 1fr);*/
/*  gap: 32px;*/
/*  margin-bottom: 100px;*/
/*}*/

/*.integration-card {*/
/*  padding: 48px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 32px;*/
/*  text-align: center;*/
/*  transition: var(--transition);*/
/*}*/

/*.integration-card:hover {*/
/*  transform: translateY(-10px);*/
/*  border-color: var(--primary);*/
/*}*/

/*.integration-icon-box {*/
/*  width: 72px;*/
/*  height: 72px;*/
/*  background: #000;*/
/*  color: #fff;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  margin: 0 auto 32px;*/
/*  border-radius: 20px;*/
/*  font-weight: 800;*/
/*  font-size: 1.4rem;*/
/*}*/

/*.integration-title {*/
/*  font-weight: 800;*/
/*  font-size: 1.2rem;*/
/*  margin-bottom: 16px;*/
/*}*/

/*.integration-desc {*/
/*  color: var(--text-muted);*/
/*  font-size: 0.95rem;*/
/*  font-weight: 500;*/
/*}*/

/*.integration-workflow-box {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 80px;*/
/*  border-radius: 40px;*/
/*}*/

/*.workflow-title {*/
/*  font-size: 1.75rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 60px;*/
/*  text-align: center;*/
/*}*/

/*.workflow-steps {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 60px;*/
/*}*/

/*.step-num {*/
/*  font-size: 2.5rem;*/
/*  font-weight: 800;*/
/*  color: var(--primary);*/
/*  display: block;*/
/*  margin-bottom: 20px;*/
/*}*/

/*.step-label {*/
/*  font-weight: 800;*/
/*  font-size: 1.4rem;*/
/*  display: block;*/
/*  margin-bottom: 16px;*/
/*}*/

/*.step-desc {*/
/*  color: var(--text-muted);*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== PRICING ===================== *!*/
/*.pricing-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 32px;*/
/*  margin-bottom: 60px;*/
/*}*/

/*.pricing-card {*/
/*  padding: 60px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 40px;*/
/*  position: relative;*/
/*  background: var(--bg-light);*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/

/*.pricing-card.featured {*/
/*  border-color: var(--primary);*/
/*  box-shadow: 0 30px 60px rgba(0, 209, 112, 0.1);*/
/*  transform: scale(1.05);*/
/*  z-index: 1;*/
/*}*/

/*.featured-badge {*/
/*  position: absolute;*/
/*  top: 30px;*/
/*  right: 30px;*/
/*  background: var(--primary);*/
/*  color: #000;*/
/*  padding: 6px 16px;*/
/*  border-radius: 100px;*/
/*  font-size: 0.7rem;*/
/*  font-weight: 800;*/
/*  text-transform: uppercase;*/
/*}*/

/*.tier-name {*/
/*  font-size: 1.75rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 24px;*/
/*}*/

/*.tier-price {*/
/*  font-size: 3rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 12px;*/
/*  letter-spacing: -2px;*/
/*}*/

/*.price-period {*/
/*  font-size: 1.1rem;*/
/*  color: var(--text-muted);*/
/*  font-weight: 500;*/
/*}*/

/*.tier-desc {*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 40px;*/
/*  font-weight: 500;*/
/*}*/

/*.tier-features {*/
/*  margin-bottom: 48px;*/
/*  flex-grow: 1;*/
/*}*/

/*.tier-features li {*/
/*  padding: 16px 0;*/
/*  border-bottom: 1px solid var(--border);*/
/*  font-size: 1rem;*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== REVIEWS ===================== *!*/
/*.reviews-grid {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1fr;*/
/*  gap: 40px;*/
/*}*/

/*.review-testimonial-card {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 60px;*/
/*  border-radius: 40px;*/
/*}*/

/*.stars-row {*/
/*  font-weight: 800;*/
/*  margin-bottom: 32px;*/
/*  font-size: 1.1rem;*/
/*}*/

/*.verified-badge-label {*/
/*  color: var(--primary);*/
/*  text-transform: uppercase;*/
/*  font-size: 0.8rem;*/
/*  letter-spacing: 1px;*/
/*}*/

/*.review-quote-body {*/
/*  font-size: 1.75rem;*/
/*  font-weight: 600;*/
/*  line-height: 1.3;*/
/*  margin-bottom: 40px;*/
/*  font-family: var(--font-serif);*/
/*}*/

/*.reviewer-profile-signature {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 20px;*/
/*}*/

/*.avatar-letter-circle {*/
/*  width: 56px;*/
/*  height: 56px;*/
/*  background: #000;*/
/*  color: #fff;*/
/*  border-radius: 50%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  font-weight: 800;*/
/*  font-size: 1.2rem;*/
/*}*/

/*.reviewer-name {*/
/*  display: block;*/
/*  font-weight: 800;*/
/*  font-size: 1.1rem;*/
/*}*/

/*.reviewer-company {*/
/*  font-size: 0.95rem;*/
/*  color: var(--text-muted);*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== BLOG ===================== *!*/
/*.blog-articles-grid {*/
/*  display: grid;*/
/*  grid-template-columns: repeat(3, 1fr);*/
/*  gap: 32px;*/
/*  margin-bottom: 80px;*/
/*}*/

/*.blog-post-card {*/
/*  padding: 40px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 32px;*/
/*  transition: var(--transition);*/
/*}*/

/*.blog-post-card:hover {*/
/*  border-color: var(--primary);*/
/*}*/

/*.post-meta-line {*/
/*  font-size: 0.75rem;*/
/*  color: var(--text-muted);*/
/*  text-transform: uppercase;*/
/*  font-weight: 800;*/
/*  margin-bottom: 20px;*/
/*  letter-spacing: 1px;*/
/*}*/

/*.post-headline-title {*/
/*  font-size: 1.4rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 20px;*/
/*  line-height: 1.25;*/
/*}*/

/*.post-excerpt-summary {*/
/*  color: var(--text-muted);*/
/*  font-size: 1rem;*/
/*  margin-bottom: 32px;*/
/*  font-weight: 500;*/
/*}*/

/*.post-footer-row {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  padding-top: 32px;*/
/*  border-top: 1px solid var(--border);*/
/*}*/

/*.post-date {*/
/*  font-size: 0.9rem;*/
/*  color: var(--text-muted);*/
/*  font-weight: 500;*/
/*}*/

/*.read-link {*/
/*  font-weight: 800;*/
/*  color: var(--primary);*/
/*}*/

/*.blog-newsletter-footer-box {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 60px;*/
/*  border-radius: 32px;*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/

/*.newsletter-lead-text {*/
/*  font-size: 1.25rem;*/
/*  font-weight: 700;*/
/*  max-width: 500px;*/
/*}*/

/*!* ===================== CONTACT ===================== *!*/
/*.direct-contact-section {*/
/*  background-color: var(--bg-light);*/
/*}*/

/*.contact-paragraph-desc {*/
/*  font-size: 1.25rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 48px;*/
/*  font-weight: 500;*/
/*}*/

/*.contact-methods-stack {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 24px;*/
/*}*/

/*.method-row-box {*/
/*  padding: 32px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 24px;*/
/*}*/

/*.method-label {*/
/*  display: block;*/
/*  font-size: 0.85rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 12px;*/
/*  font-weight: 700;*/
/*  text-transform: uppercase;*/
/*}*/

/*.method-data-value {*/
/*  font-size: 1.4rem;*/
/*  font-weight: 800;*/
/*}*/

/*.contact-form-side {*/
/*  background: var(--bg-light);*/
/*  border: 1px solid var(--border);*/
/*  padding: 60px;*/
/*  border-radius: 40px;*/
/*}*/

/*.form-title-heading {*/
/*  font-size: 1.75rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 12px;*/
/*}*/

/*.form-subtitle-tag {*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 40px;*/
/*  font-weight: 500;*/
/*}*/

/*.form-field-group {*/
/*  margin-bottom: 24px;*/
/*}*/

/*.form-field-group label {*/
/*  display: block;*/
/*  font-weight: 800;*/
/*  margin-bottom: 10px;*/
/*  font-size: 0.95rem;*/
/*}*/

/*.form-field-group input, .form-field-group textarea {*/
/*  width: 100%;*/
/*  padding: 16px 20px;*/
/*  border: 1px solid var(--border);*/
/*  border-radius: 16px;*/
/*  font-family: inherit;*/
/*  font-size: 1rem;*/
/*  background: var(--bg-light);*/
/*  color: var(--text-main);*/
/*  font-weight: 500;*/
/*  transition: var(--transition);*/
/*}*/

/*.form-field-group input:focus, .form-field-group textarea:focus {*/
/*  outline: none;*/
/*  border-color: var(--primary);*/
/*  box-shadow: 0 0 0 4px var(--accent-soft);*/
/*}*/

/*!* ===================== CTA CLOSURE ===================== *!*/
/*.cta-closure-block {*/
/*  background-color: #000;*/
/*  color: #fff;*/
/*  padding: 140px 0;*/
/*}*/

/*.closure-paragraph-desc {*/
/*  font-size: 1.4rem;*/
/*  max-width: 650px;*/
/*  margin: 0 auto 48px;*/
/*  opacity: 0.8;*/
/*  font-weight: 500;*/
/*}*/

/*.closure-action-row {*/
/*  display: flex;*/
/*  gap: 24px;*/
/*  justify-content: center;*/
/*  margin-bottom: 80px;*/
/*}*/

/*.closure-compliance-footer-row {*/
/*  font-size: 0.95rem;*/
/*  opacity: 0.4;*/
/*  font-weight: 600;*/
/*  letter-spacing: 1px;*/
/*}*/

/*!* ===================== FOOTER ===================== *!*/
/*.system-corporate-footer {*/
/*  padding: 100px 0 60px;*/
/*  background-color: var(--bg-light);*/
/*  border-top: 1px solid var(--border);*/
/*}*/

/*.footer-grid-layout {*/
/*  max-width: 1200px;*/
/*  margin: 0 auto;*/
/*  padding: 0 24px 80px;*/
/*  display: grid;*/
/*  grid-template-columns: 2fr 1fr 1fr;*/
/*  gap: 100px;*/
/*}*/

/*.footer-logo-title {*/
/*  font-size: 1.75rem;*/
/*  font-weight: 800;*/
/*  margin-bottom: 32px;*/
/*}*/

/*.footer-summary-text {*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 32px;*/
/*  font-size: 1.1rem;*/
/*  font-weight: 500;*/
/*}*/

/*.footer-direct-comms {*/
/*  font-weight: 700;*/
/*}*/

/*.column-header-title {*/
/*  display: block;*/
/*  font-weight: 800;*/
/*  margin-bottom: 32px;*/
/*  text-transform: uppercase;*/
/*  font-size: 0.8rem;*/
/*  letter-spacing: 2px;*/
/*  color: var(--text-main);*/
/*}*/

/*.footer-links-column a {*/
/*  display: block;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 16px;*/
/*  font-weight: 600;*/
/*}*/

/*.footer-links-column a:hover {*/
/*  color: var(--primary);*/
/*}*/

/*.footer-legal-bottom-bar {*/
/*  border-top: 1px solid var(--border);*/
/*  padding-top: 60px;*/
/*}*/

/*.legal-rails-notice {*/
/*  font-size: 0.9rem;*/
/*  color: var(--text-muted);*/
/*  margin-bottom: 16px;*/
/*  font-weight: 700;*/
/*  letter-spacing: 1px;*/
/*}*/

/*.copyright-text {*/
/*  font-size: 0.9rem;*/
/*  color: var(--text-muted);*/
/*  font-weight: 500;*/
/*}*/

/*!* ===================== FLOATING WHATSAPP ===================== *!*/
/*.floating-whatsapp {*/
/*  position: fixed;*/
/*  bottom: 40px;*/
/*  left: 40px;*/
/*  width: 64px;*/
/*  height: 64px;*/
/*  background-color: #25D366;*/
/*  color: #fff;*/
/*  border-radius: 50%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);*/
/*  z-index: 999;*/
/*  transition: var(--transition);*/
/*}*/

/*.floating-whatsapp:hover {*/
/*  transform: scale(1.1) rotate(10deg);*/
/*}*/

/*!* ===================== RESPONSIVE ===================== *!*/
/*@media (max-width: 1200px) {*/
/*  .nav-links { display: none; }*/
/*  .btn-hamburger { display: flex; }*/
/*  .ledger-two-column-layout { gap: 60px; }*/
/*  .features-split-layout { gap: 60px; }*/
/*}*/

/*@media (max-width: 1024px) {*/
/*  .metrics-grid { grid-template-columns: repeat(2, 1fr); }*/
/*  .ledger-two-column-layout { grid-template-columns: 1fr; }*/
/*  .industries-three-column-grid { grid-template-columns: repeat(2, 1fr); }*/
/*  .features-split-layout { grid-template-columns: 1fr; }*/
/*  .pricing-grid { grid-template-columns: 1fr; }*/
/*  .pricing-card.featured { transform: none; }*/
/*  .blog-articles-grid { grid-template-columns: 1fr; }*/
/*  .footer-grid-layout { grid-template-columns: 1fr; gap: 60px; }*/
/*  .security-cards-grid { grid-template-columns: 1fr; }*/
/*  .integrations-grid { grid-template-columns: repeat(2, 1fr); }*/
/*  .workflow-steps { grid-template-columns: 1fr; }*/
/*  .blog-newsletter-footer-box { flex-direction: column; text-align: center; gap: 32px; }*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .hero-title { font-size: 3.5rem; }*/
/*  .hero-buttons-group { flex-direction: column; }*/
/*  .metrics-grid { grid-template-columns: 1fr; }*/
/*  .industries-three-column-grid { grid-template-columns: 1fr; }*/
/*  .reviews-grid { grid-template-columns: 1fr; }*/
/*  .hero-scroll-indicator { display: none; }*/
/*  .nav-actions .btn-primary-nav, .nav-actions .btn-nav-link { display: none; }*/
/*}*/

/* ═══════════════════════════════════════════════════════════
   FAQ SECTION
════════════════════════════════════════════════════════════ */
.faq-section {
  padding: 96px clamp(20px, 3vw, 56px);
  background: var(--surface-2);
  /* Gold fails WCAG AA on the light surface (2.34:1) — use bronze there. */
  --faq-accent: #8A6620;
}

[data-theme="dark"] .faq-section {
  --faq-accent: var(--gold-light);
}

.faq-inner {
  max-width: 760px;
  margin: 0 auto;
}

.faq-inner .section-title {
  margin-top: 12px;
  margin-bottom: 48px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  gap: 16px;
  color: var(--text);
  transition: color 0.2s;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--faq-accent);
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item[open] summary {
  color: var(--faq-accent);
}

.faq-item p {
  margin: 0 0 22px 0;
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 0.97rem;
}

/* =============================================================
   LEGAL PAGES  (EULA / Privacy Policy)
   Shares the landing shell — navbar, footer, floating WhatsApp —
   and adds a dark masthead plus a sticky-contents prose layout.

   Accent note: --gold (#C9993A) only reaches 2.53:1 on the light
   surface, so every gold-toned element on a light background uses
   bronze #8A6620 (5.12:1, WCAG AA). The light gold is reserved for
   the obsidian masthead, where it clears 12:1.
   ============================================================= */
.legal-page {
  --legal-accent: #8A6620;
  --legal-accent-soft: rgba(138,102,32,0.10);
}
[data-theme="dark"] .legal-page {
  --legal-accent: #E8C06A;
  --legal-accent-soft: rgba(232,192,106,0.12);
}

/* ── MASTHEAD ────────────────────────────────────────────────── */
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #FAFAF9;
  padding: 168px 0 88px;
}
.legal-hero::before {
  content: '';
  position: absolute;
  top: -260px;
  right: -160px;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(232,192,106,0.14) 0%, transparent 68%);
  pointer-events: none;
}
.legal-hero > .container { position: relative; z-index: 1; }
.legal-hero-inner { max-width: 900px; }

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8C06A;
  border: 1px solid rgba(232,192,106,0.30);
  background: rgba(232,192,106,0.08);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-bottom: 28px;
}
.legal-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8C06A;
  flex-shrink: 0;
}

.legal-title {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.legal-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: #E8C06A;
  letter-spacing: -0.01em;
}
.legal-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: rgba(250,250,249,0.72);
  max-width: 68ch;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.legal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
}
.legal-meta-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,250,249,0.50);
}
.legal-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: #FAFAF9;
}

/* Cross-link between the two legal documents. */
.legal-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.legal-switch a {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(250,250,249,0.82);
  transition: all 0.2s var(--ease);
}
.legal-switch a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.legal-switch a[aria-current="page"] {
  background: #E8C06A;
  border-color: #E8C06A;
  color: #18181B;
}

/* ── BODY LAYOUT ─────────────────────────────────────────────── */
.legal-body { padding: 88px 0 112px; background: var(--surface); }
.legal-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

/* ── TABLE OF CONTENTS ───────────────────────────────────────── */
.legal-toc {
  position: sticky;
  top: 104px;
  min-width: 0;
  /* Stops short of the viewport floor so the fixed WhatsApp button, which sits
     bottom-left at 36px, never covers the last contents entries. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}
.legal-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: block;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-soft);
  padding: 7px 0;
  transition: color 0.2s var(--ease);
}
.legal-toc a::before {
  content: counter(toc);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 2px;
  flex-shrink: 0;
}
.legal-toc a:hover { color: var(--legal-accent); }
.legal-toc a:hover::before { color: var(--legal-accent); }

/* ── DOCUMENT PROSE ──────────────────────────────────────────── */
.legal-doc {
  max-width: 78ch;
  min-width: 0;
  counter-reset: legal-section;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--text-soft);
}
/* `section { padding: 120px 0 }` further up the file is meant for the landing
   page's full-bleed bands; inside a legal document it would drop 120px of dead
   space above every clause heading. Reset it and use the margin below instead. */
.legal-doc > section { padding: 0 0 8px; scroll-margin-top: 100px; }
.legal-doc > section + section { margin-top: 56px; }

.legal-doc h2 {
  counter-increment: legal-section;
  display: flex;
  gap: 16px;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.legal-doc h2::before {
  content: counter(legal-section);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--legal-accent);
  background: var(--legal-accent-soft);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  height: fit-content;
  margin-top: 6px;
  flex-shrink: 0;
}
.legal-doc h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.legal-doc p { margin-bottom: 18px; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.legal-doc em { font-style: italic; }

.legal-doc a:not(.btn) {
  color: var(--legal-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-doc a:not(.btn):hover { text-decoration-thickness: 2px; }

.legal-doc ul,
.legal-doc ol { margin: 0 0 20px; padding-left: 0; }
.legal-doc ul { list-style: none; }
.legal-doc ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 11px;
}
.legal-doc ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--legal-accent);
}
.legal-doc ol { list-style: decimal; padding-left: 22px; }
.legal-doc ol li { margin-bottom: 11px; padding-left: 6px; }
.legal-doc li::marker { color: var(--legal-accent); font-weight: 600; }
.legal-doc li ul,
.legal-doc li ol { margin-top: 11px; margin-bottom: 0; }

/* ── EMPHASIS BLOCKS ─────────────────────────────────────────── */
.legal-callout {
  border: 1px solid var(--border);
  background: var(--legal-accent-soft);
  border-radius: var(--r-md);
  padding: 26px 30px;
  margin: 26px 0;
}
.legal-callout-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legal-accent);
  margin-bottom: 12px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-contact {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 26px 30px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}
.legal-contact div { display: flex; flex-direction: column; gap: 5px; }
.legal-contact dt,
.legal-contact-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.legal-contact dd,
.legal-contact-value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── TABLES ──────────────────────────────────────────────────── */
.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}
.legal-table thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--text); font-weight: 600; }

/* ── FOOT OF DOCUMENT ────────────────────────────────────────── */
.legal-doc-foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.legal-doc-foot a { color: var(--legal-accent); font-weight: 600; }

.legal-backtop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}
.legal-backtop:hover { color: var(--legal-accent); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* minmax(0, …) rather than 1fr: a grid track's automatic minimum is its
     content, so the min-width:480px tables inside .legal-doc would otherwise
     stretch the column past the viewport and scroll the whole page sideways. */
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Below the sidebar breakpoint the contents becomes a bordered card above
     the document. It is capped and internally scrollable so a 27-clause
     agreement does not push the text itself off the first screen. */
  .legal-toc {
    position: static;
    max-height: 44vh;
    border-left: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px 26px;
    background: var(--surface-2);
  }
  .legal-toc ol { columns: 2; column-gap: 32px; }
  .legal-toc li { break-inside: avoid; }
}

@media (max-width: 640px) {
  .legal-hero { padding: 132px 0 64px; }
  .legal-body { padding: 56px 0 80px; }
  .legal-meta { gap: 10px; }
  .legal-meta-item { padding: 12px 16px; flex: 1 1 140px; }
  .legal-doc { font-size: 0.97rem; }
  .legal-doc > section + section { margin-top: 44px; }
  .legal-doc h2 { gap: 12px; }
  .legal-callout,
  .legal-contact { padding: 22px 20px; }
  .legal-toc ol { columns: 1; }
  .legal-switch a { flex: 1 1 auto; text-align: center; }
}