/*
 * Final responsive alignment pass.
 * Keeps desktop composition intact while tightening mobile centering,
 * button rhythm, and the pricing comparison table.
 */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-padding-top: 104px !important;
}

section[id],
[id]:target {
  scroll-margin-top: 104px;
}

img,
video,
canvas {
  max-width: 100%;
}

/* Keep the fixed header visually quiet and prevent it from covering content. */
nav {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: rgba(2, 2, 3, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

nav.sc {
  background: rgba(2, 2, 3, 0.95) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Keep the original full-colour brand mark clear and readable. */
nav .logo img {
  width: auto !important;
  height: 64px !important;
  max-width: none !important;
  display: block !important;
  border-radius: 7px !important;
  filter: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* A visible, consistent focus treatment for keyboard users. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #3dffc2 !important;
  outline-offset: 3px !important;
  border-radius: 7px;
  box-shadow: 0 0 0 5px rgba(61, 255, 194, 0.13);
}

/* Footnotes and research sources stay visually compact but meet a 24px target. */
sup a,
.source-link,
.sources a,
.source-list a,
.research-sources a,
#stat-src > a,
a[aria-label*="source" i] {
  display: inline-flex;
  min-width: 26px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  margin: -3px -2px;
}

/* One action colour. Amber remains available only for warnings and loss states. */
body h1 em,
body .sec-h em {
  background-image: none !important;
  color: #3dffc2 !important;
  -webkit-text-fill-color: #3dffc2 !important;
  animation: none !important;
}

/* The animated brand gradient is intentional in the home-page hero.
   Keep the flatter mint treatment everywhere else. */
body .hero .hl h1 em {
  background-image: linear-gradient(135deg, #3dffc2 0%, #4d8aff 45%, #9b6dff 100%) !important;
  background-size: 200% auto !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: headlineShine 6s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  body .hero .hl h1 em {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

.fn2 .fi,
.fn3 .fi,
.afi.b,
.afi.v {
  background: rgba(61, 255, 194, 0.07) !important;
  border-color: rgba(61, 255, 194, 0.18) !important;
}

.fn2 .fi svg,
.fn3 .fi svg,
.afi.b svg,
.afi.v svg {
  stroke: #3dffc2 !important;
}

.ftg2,
.ftg3 {
  color: #3dffc2 !important;
  border-color: rgba(61, 255, 194, 0.28) !important;
}

.fdt2,
.fdt3 {
  fill: #3dffc2 !important;
  filter: drop-shadow(0 0 8px #3dffc2) !important;
}

.forbit-dot.d2,
.forbit-dot.d3 {
  background: #3dffc2 !important;
  color: #3dffc2 !important;
}

.er-card {
  background: rgba(61, 255, 194, 0.032) !important;
  border-color: rgba(61, 255, 194, 0.12) !important;
}

.er-card svg {
  stroke: #3dffc2 !important;
}

/* Reveal content remains readable before animation and settles quickly. */
@media (prefers-reduced-motion: no-preference) {
  .hl > * {
    animation-duration: 0.5s !important;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 86px !important;
  }

  section[id],
  [id]:target {
    scroll-margin-top: 86px;
  }

  nav {
    padding: 8px 16px !important;
  }

  nav .logo img {
    height: 54px !important;
  }

  .hc {
    padding-top: 82px !important;
  }

  .badge {
    margin-bottom: 18px !important;
    padding: 6px 11px !important;
    font-size: 0.64rem !important;
  }

  .hp {
    max-width: 360px !important;
    margin-bottom: 24px !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  .stats {
    margin-top: 34px !important;
    padding-top: 22px !important;
  }

  /* Keep the main page frame visually centered at every phone width. */
  nav .ni,
  .hc,
  .dhero-in,
  .pr-in,
  .flowin,
  .pgin,
  .res-wrap,
  .ct-in,
  .comp-in,
  .faq-in {
    margin-inline: auto;
  }

  /* Center page introductions while keeping dense card copy readable. */
  .res-hd,
  .ct-in > [data-r]:first-child,
  .ct-in > h1,
  .ct-in > .sd,
  .pr-in > [data-r]:first-child,
  .pr-in > h1,
  .pr-in > .sd {
    text-align: center;
  }

  .res-hd > *,
  .ct-in > h1,
  .ct-in > .sd,
  .pr-in > h1,
  .pr-in > .sd {
    margin-inline: auto;
  }

  .res-hd .art-kick,
  .ct-in .eyb,
  .pr-in .eyb {
    display: table;
    margin-inline: auto;
  }

  .founding-offer {
    padding: 22px 20px !important;
  }

  .founding-offer > div:first-child,
  .founding-offer > h2 {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Cards and forms should sit on the same visual centerline. */
  .pr-card,
  .res-card,
  .pgform,
  .vizwrap,
  .fwrap,
  .cta-box,
  .cta-strip-box {
    margin-left: auto;
    margin-right: auto;
  }

  .hb,
  .cta-btns,
  .cta-strip-box > div,
  .dhero-in > div[style*="justify-content:center"] {
    align-items: center;
    justify-content: center;
  }

  .btn,
  .deck-link,
  .bsub {
    text-align: center;
    justify-content: center;
  }

  /*
   * Four columns previously made the pricing table wider than the phone.
   * Fixed layout keeps the whole comparison visible without horizontal drift.
   */
  .comp {
    overflow: hidden;
  }

  .comp-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .comp-table th,
  .comp-table td {
    padding: 10px 5px !important;
    font-size: 0.66rem !important;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .comp-table th:first-child,
  .comp-table td:first-child {
    width: 46%;
    padding-left: 9px !important;
    text-align: left;
  }

  .comp-table th:not(:first-child),
  .comp-table td:not(:first-child) {
    width: 18%;
  }
}

@media (max-width: 420px) {
  /* Give primary actions a calm, centered rhythm on narrow phones. */
  .hb,
  .cta-btns {
    flex-direction: column;
    width: 100%;
  }

  .hb .btn,
  .cta-btns .btn {
    width: min(100%, 286px);
    margin-inline: auto;
  }

  .founding-offer > div:last-child {
    justify-content: center;
  }
}