/* ============================================================================
   site.css — the shared stylesheet for idxalpha.com's product pages.

   Lifted VERBATIM from landing/index.html's own <style> block so the new pages
   and the homepage cannot drift. index.html is deliberately NOT changed to link
   this file: the homepage stays exactly as it is, byte for byte, and carries its
   own copy inline. The duplication is the price of not touching it.

   Class vocabulary is the homepage's, so markup can be moved between them.
   ============================================================================ */

/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --black:       #050505;
      --surface:     rgba(255,255,255,0.04);
      --border:      rgba(255,255,255,0.08);
      --text:        #ffffff;
      --muted:       rgba(255,255,255,0.74);
      --faint:       rgba(255,255,255,0.55);
      --accent:      #00d4ff;
      --accent-dim:  rgba(0,212,255,0.12);
      --accent-glow: 0 0 24px rgba(0,212,255,0.2);
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--text);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 400;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ============================================================
       WAVE MESH BACKGROUND
    ============================================================ */
    .bg-scene {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    #waveMesh {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* The homepage runs this at full strength behind one centred hero. These
         pages put tables, code and long copy over it for the whole scroll, so
         it is dialled back to a texture instead of a pattern. */
      opacity: 0.38;
    }

    /* Animated hero aura — multi-layer, mouse-reactive */
    .hero-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 1100px; height: 800px;
      pointer-events: none;
      will-change: transform;
      transition: transform 0.08s linear;
    }

    .hero-glow::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%,
        rgba(0,212,255,0.085) 0%,
        rgba(0,140,220,0.042) 30%,
        rgba(0,80,160,0.018) 55%,
        transparent 70%);
      animation: auraPulse 7s ease-in-out infinite;
      border-radius: 50%;
    }

    .hero-glow::after {
      content: '';
      position: absolute;
      top: 20%; left: 20%; right: 20%; bottom: 20%;
      background: radial-gradient(ellipse at 50% 50%,
        rgba(0,212,255,0.06) 0%,
        rgba(0,160,255,0.03) 40%,
        transparent 65%);
      animation: auraPulse 4.5s ease-in-out infinite reverse;
      border-radius: 50%;
    }

    /* Outer wide halo ring */
    .hero-glow-ring {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 1600px; height: 900px;
      background: radial-gradient(ellipse at 50% 55%,
        rgba(0,212,255,0.025) 0%,
        rgba(0,100,200,0.015) 40%,
        transparent 65%);
      pointer-events: none;
      animation: auraHalo 9s ease-in-out infinite;
      border-radius: 50%;
    }

    @keyframes auraPulse {
      0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
      33%       { opacity: 1;    transform: scale(1.12) rotate(2deg); }
      66%       { opacity: 0.70; transform: scale(0.94) rotate(-1deg); }
    }

    @keyframes auraHalo {
      0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
      50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
    }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
    }

    section {
      position: relative;
      z-index: 1;
    }

    /* ============================================================
       NAV
    ============================================================ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 20px 0;
      transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease;
    }

    nav.scrolled {
      background: rgba(5,5,5,0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-decoration: none;
    }

    .nav-wordmark {
      font-family: 'Orbitron', monospace;
      font-weight: 900;
      font-size: 18px;
      background: linear-gradient(135deg, #7bbde8 0%, #519de0 50%, #a5d0f5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 0.05em;
    }

    .nav-sub {
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.22em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nav-link {
      font-size: 13px;
      font-weight: 400;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.03em;
      transition: color 0.2s ease;
    }

    .nav-link:hover { color: var(--text); }

    .btn-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 20px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .btn-pill-outline {
      border: 1px solid var(--accent);
      color: var(--accent);
      background: transparent;
    }

    .btn-pill-outline:hover {
      background: rgba(0,212,255,0.1);
      box-shadow: 0 0 20px rgba(0,212,255,0.25);
    }

    /* ============================================================
       SECTION CHROME
    ============================================================ */
    .section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    .section-title {
      font-size: clamp(32px, 4.5vw, 56px);
      font-weight: 200;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: 24px;
    }

    .section-sub {
      font-size: 16px;
      font-weight: 400;
      color: var(--muted);
      max-width: 560px;
      line-height: 1.7;
    }

    /* ============================================================
       CARD BASE
    ============================================================ */
    .card {
      background: rgba(12,14,19,0.66);
      backdrop-filter: blur(22px) saturate(1.2);
      -webkit-backdrop-filter: blur(22px) saturate(1.2);
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 16px;
      padding: 32px;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .card:hover {
      border-color: rgba(0,212,255,0.25);
      box-shadow: 0 0 28px rgba(0,212,255,0.1);
    }

    /* ============================================================
       FEATURES
    ============================================================ */
    .section-features {
      padding: 120px 0;
    }

    .section-features .header {
      margin-bottom: 64px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .feature-card {
      position: relative;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.02) 50%,
        rgba(255,255,255,0.04) 100%
      );
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 20px;
      padding: 32px;
      overflow: hidden;
      transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
      box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.08),
        0 4px 24px rgba(0,0,0,0.3);
    }

    /* Top-edge highlight (liquid glass refraction) */
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 20%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0.18) 80%,
        transparent 100%
      );
      pointer-events: none;
    }

    /* Inner glow layer */
    .feature-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(
        ellipse 70% 50% at 50% -10%,
        rgba(81,157,224,0.08) 0%,
        transparent 60%
      );
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .feature-card:hover {
      border-color: rgba(255,255,255,0.18);
      box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.12),
        0 8px 40px rgba(0,0,0,0.4),
        0 0 30px rgba(81,157,224,0.08);
      transform: translateY(-4px);
    }

    .feature-card:hover::after {
      opacity: 1;
    }

    .feature-icon {
      position: relative;
      z-index: 1;
      width: 48px; height: 48px;
      border-radius: 14px;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.03) 100%
      );
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1);
    }

    .feature-icon svg {
      width: 22px; height: 22px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-title {
      position: relative;
      z-index: 1;
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    .feature-desc {
      position: relative;
      z-index: 1;
      font-size: 13px;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.7;
    }

    /* ============================================================
       CTA SECTION
    ============================================================ */
    .section-cta {
      padding: 120px 0;
    }

    .cta-card {
      background: linear-gradient(#080808, #080808) padding-box,
                  linear-gradient(135deg, #00d4ff, #0099ff) border-box;
      border: 1px solid transparent;
      border-radius: 24px;
      padding: 80px 80px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
    }

    .cta-badge {
      display: inline-block;
      padding: 6px 16px;
      border-radius: 999px;
      border: 1px solid rgba(0,212,255,0.3);
      background: rgba(0,212,255,0.07);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 32px;
    }

    .cta-title {
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 200;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 20px;
    }

    .cta-sub {
      font-size: 15px;
      font-weight: 400;
      color: var(--muted);
      max-width: 520px;
      margin: 0 auto 48px;
      line-height: 1.7;
    }

    .cta-checklist {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px 48px;
      max-width: 540px;
      margin: 0 auto 48px;
      text-align: left;
    }

    .cta-check-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 400;
      color: rgba(255,255,255,0.7);
    }

    .cta-check-icon {
      color: var(--accent);
      font-style: normal;
      flex-shrink: 0;
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border);
      padding: 48px 0;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .footer-wordmark {
      font-family: 'Orbitron', monospace;
      font-weight: 900;
      font-size: 16px;
      background: linear-gradient(135deg, #7bbde8 0%, #519de0 50%, #a5d0f5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .footer-tagline {
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    .footer-right {
      text-align: right;
    }

    .footer-attr {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .footer-built {
      font-size: 11px;
      color: rgba(255,255,255,0.3);
    }

    /* ============================================================
       SCROLL ENTRANCE ANIMATIONS
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }
    .reveal-delay-6 { transition-delay: 0.6s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 768px) {
      .container { padding: 0 20px; }

      .steps-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .ps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .tabs-layout {
        grid-template-columns: 1fr;
      }

      .tabs-list {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .tab-btn {
        flex: 0 0 auto;
        padding: 10px 16px;
        border-left: none;
        border-bottom: 2px solid transparent;
      }

      .tab-btn.active {
        border-left: none;
        border-bottom-color: var(--accent);
      }

      .cta-card {
        padding: 48px 24px;
      }

      .cta-checklist {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-right { text-align: left; }

      .nav-links .nav-link:not(.btn-pill) { display: none; }

      .hero-title { font-size: 28px; }

      .app-table-head,
      .app-table-row {
        grid-template-columns: 28px 60px 1fr 70px 90px;
      }
      .col-delta, .col-indicators { display: none; }

      .browser-url { max-width: 200px; font-size: 9px; }
      .app-tab { padding: 10px 12px; font-size: 11px; }
    }

    

/* ── hero + buttons, from the homepage's HERO block ── */
.hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1100px; height: 800px; pointer-events: none; will-change: transform; transition: transform 0.08s linear; }
.hero-glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.14) 0%, rgba(0,140,220,0.07) 30%, rgba(0,80,160,0.03) 55%, transparent 70%); animation: auraPulse 7s ease-in-out infinite; border-radius: 50%; }
.hero-glow::after { content: ''; position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.10) 0%, rgba(0,160,255,0.05) 40%, transparent 65%); animation: auraPulse 4.5s ease-in-out infinite reverse; border-radius: 50%; }
.hero-glow-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1600px; height: 900px; background: radial-gradient(ellipse at 50% 55%, rgba(0,212,255,0.04) 0%, rgba(0,100,200,0.025) 40%, transparent 65%); pointer-events: none; animation: auraHalo 9s ease-in-out infinite; border-radius: 50%; }
/* .hero (100vh, centred) is the HOMEPAGE's hero. Interior pages use
   .page-head; carrying this would hand the next page a centred 100vh block. */
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,212,255,0.07); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 40px; }
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(0,212,255,0.7); animation: pulse 2s ease-in-out infinite; }
.hero-title { font-size: clamp(32px, 4.5vw, 56px); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; max-width: 780px; margin-bottom: 24px; color: var(--text); }
.hero-sub { font-size: clamp(15px, 2vw, 19px); font-weight: 400; color: var(--muted); max-width: 620px; line-height: 1.7; margin-bottom: 48px; }
.stat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 52px; }
.stat-pill { padding: 6px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }
.hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.btn-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; background: transparent; border: 1px solid var(--accent); color: var(--accent); transition: all 0.3s ease; }
.btn-cta-primary:hover { background: rgba(0,212,255,0.12); box-shadow: 0 0 32px rgba(0,212,255,0.3), 0 0 60px rgba(0,212,255,0.1); transform: translateY(-2px); }
.btn-cta-secondary { font-size: 14px; font-weight: 400; color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.btn-cta-secondary:hover { color: var(--text); }
/* The mobile .hero-title size was hoisted to here out of the homepage's
   media query, where it overrode the real rule above at every width.
   It is still in that media query further down, which is where it belongs. */

@keyframes auraPulse {
      0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
      33%       { opacity: 1;    transform: scale(1.12) rotate(2deg); }
      66%       { opacity: 0.70; transform: scale(0.94) rotate(-1deg); }
    }
@keyframes auraHalo {
      0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
      50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
    }
@keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }

/* ── descendant rules from the homepage that the first extraction missed ── */
.hero-title em { font-style: normal; color: var(--accent); }
/* The other rule that sweep found — .nav-links .nav-link:not(.btn-pill)
   {display:none} — belongs inside the homepage's mobile media query (it is
   still there, above). Lifted to top level it hid the entire desktop nav. */

/* ── additions the homepage has no need for ───────────────────────────────── */

/* product nav: the homepage has two links; these pages have five */
.nav-links .nav-link.active { color: var(--accent); }

/* page header for an interior page — smaller than the homepage hero */
.page-head { padding: 116px 0 24px; }
.page-head.split { padding: 104px 0 54px; }
.page-head .hero-title { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 18px; }
.page-head .hero-sub { margin-bottom: 0; }
/* .hero-ctas inherits justify-content:center from the homepage, whose hero is a
   centred 100vh block. On a left-aligned interior page that put the buttons in
   the middle of the row under left-aligned text. */
.page-head .hero-ctas { justify-content: flex-start; margin-top: 30px; }

/* Two-column interior hero: copy on the left, the specimen on the right, one row.
   The specimen is the argument — a ledger nobody else publishes, or Claude actually
   answering — so stacking it below the fold buried the thing that sells the page. */
.page-head.split > .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 52px; align-items: center;
}
.page-head.split .hero-title { max-width: 16ch; }
.page-head.split .hero-sub { max-width: 46ch; }
.page-head.split .specimen { margin: 0; }
@media (max-width: 1040px) {
  .page-head.split > .container { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .page-head.split .hero-title, .page-head.split .hero-sub { max-width: none; }
}
.page-head .hero-badge { margin-bottom: 24px; }

/* pricing table */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
         gap: 18px; margin-top: 44px; align-items: stretch; }
.tier { display: flex; flex-direction: column; gap: 18px; }
.tier.feat { border-color: rgba(0,212,255,0.25); box-shadow: 0 0 34px rgba(0,212,255,0.08); }
.tier-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
            color: var(--muted); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tier.feat .tier-tag { color: var(--accent); }
.tier-flag { font-size: 9px; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 999px;
             border: 1px solid rgba(0,212,255,0.3); background: rgba(0,212,255,0.07); color: var(--accent); }
.tier-price { font-family: 'DM Mono', monospace; font-size: 30px; font-weight: 500;
              color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
.tier-price small { font-size: 14px; color: var(--muted); }
.tier-price .sub { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px;
                   color: rgba(255,255,255,0.38); margin-top: 6px; letter-spacing: 0; }
.tier ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tier li { color: var(--muted); padding: 9px 0 9px 20px; position: relative; line-height: 1.6;
           border-bottom: 1px solid var(--border); }
.tier li:last-child { border-bottom: 0; }
.tier li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 5px; height: 5px;
                   border-radius: 50%; background: rgba(0,212,255,0.4); }
.tier li b { color: var(--text); font-weight: 600; }
.tier-who { font-size: 12px; color: rgba(255,255,255,0.38); }
.tier .btn-pill { justify-content: center; margin-top: auto; }

/* data tables */
.table-wrap { border: 1px solid var(--border); border-radius: 16px; overflow-x: auto;
              background: var(--surface); margin-top: 34px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
     text-transform: uppercase; color: var(--muted); padding: 15px 20px;
     border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 15px 20px; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td b { color: var(--text); font-weight: 600; }
td .d { display: block; font-size: 12px; color: rgba(255,255,255,0.38); margin-top: 4px; }
td.num { font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums;
         text-align: right; color: var(--text); white-space: nowrap; }

/* code */
code { font-family: 'DM Mono', monospace; font-size: 0.88em; background: rgba(255,255,255,0.05);
       border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: rgba(255,255,255,0.82); }
pre { font-family: 'DM Mono', monospace; background: rgba(255,255,255,0.03);
      border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; overflow-x: auto;
      font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 15px; }
pre code { background: none; border: 0; padding: 0; }
pre .k { color: var(--accent); } pre .s { color: #7bbde8; } pre .c { color: rgba(255,255,255,0.38); }

/* forms, for /contact */
label.f { display: block; font-size: 13px; color: var(--muted); margin: 0 0 7px; }
input[type=text], input[type=email], textarea, select {
  width: 100%; background: rgba(255,255,255,0.03); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px;
  font-family: inherit; font-size: 14.5px; line-height: 1.5; transition: border-color 0.2s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(0,212,255,0.4); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3); }
textarea { min-height: 130px; resize: vertical; }
.field { margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-glow, .hero-glow-ring, .hero-badge-dot { animation: none; }
}

/* ── readability over the mesh ─────────────────────────────────────────────
   Every surface below was a few percent of white, which tints the animated mesh
   instead of covering it — text on them was competing with moving dots. Each now
   carries a dark scrim and a backdrop blur, so the mesh stays visible around the
   content and stops fighting it underneath.                                   */

.table-wrap {
  background: rgba(12,14,19,0.66);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-color: rgba(255,255,255,0.11);
}
pre {
  background: rgba(8,9,13,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.88);
}
code { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.90);
       border-color: rgba(255,255,255,0.12); }
pre code { background: none; border: 0; }

.feature-card {
  background: linear-gradient(135deg, rgba(14,16,22,0.70) 0%, rgba(10,12,17,0.66) 50%,
                                      rgba(14,16,22,0.70) 100%);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-color: rgba(255,255,255,0.12);
}

/* the specimen cards in the two heroes carry code and figures — the busiest
   content on the busiest part of the page */
.specimen { background: rgba(10,12,17,0.74); backdrop-filter: blur(26px) saturate(1.2);
            -webkit-backdrop-filter: blur(26px) saturate(1.2); }

.hero-badge { background: rgba(0,212,255,0.10); backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px); }
.stat-pill  { background: rgba(14,16,22,0.62); backdrop-filter: blur(14px);
              -webkit-backdrop-filter: blur(14px); color: rgba(255,255,255,0.78);
              border-color: rgba(255,255,255,0.11); }

/* body copy and secondary text, lifted off the floor */
.hero-sub, .section-sub, p, li, td { color: var(--muted); }
td .d, .tier-who, .tier-price .sub { color: var(--faint); }
th { color: rgba(255,255,255,0.66); }
footer { color: var(--faint); }
footer a { color: rgba(255,255,255,0.78); }

/* nav sits over the mesh with nothing behind it until you scroll */
nav:not(.scrolled) { background: linear-gradient(180deg, rgba(5,5,5,0.82) 0%, rgba(5,5,5,0.0) 100%); }

/* ── links ────────────────────────────────────────────────────────────────
   There was no base <a> rule anywhere — not here and not on the homepage. The
   homepage never needed one because every link it has carries a class
   (.nav-link, .btn-pill, .footer-link). These pages put links inside body copy,
   where they fell through to the browser default: blue, underlined, and PURPLE
   once visited, on a near-black card. :visited is spelled out for that reason.  */
a { color: var(--accent); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
a:visited { color: var(--accent); }

/* A link inside prose needs to look like one without shouting. Underline it on
   its own baseline rather than with text-decoration, which collides with
   descenders at this size.

   :not([class]) matters. The first version underlined every link in prose and
   then switched the underline off again on classed ones with `border-bottom: 0`
   — but a button draws its outline with `border: 1px solid`, so that rule was
   taking the bottom edge off EVERY .btn-pill and .btn-cta-primary on the site.
   The outlines were open at the bottom, which is what made the pricing CTAs look
   broken. Never suppress a border you did not add; scope the rule so it cannot
   reach a classed link in the first place. */
p a:not([class]), li a:not([class]), td a:not([class]),
.feature-desc a:not([class]), .section-sub a:not([class]),
.hero-sub a:not([class]), .tier li a:not([class]) {
  border-bottom: 1px solid rgba(0,212,255,0.45);
  padding-bottom: 1px;
}
p a:not([class]):hover, li a:not([class]):hover, td a:not([class]):hover,
.feature-desc a:not([class]):hover, .section-sub a:not([class]):hover,
.hero-sub a:not([class]):hover, .tier li a:not([class]):hover {
  color: #ffffff; border-bottom-color: rgba(255,255,255,0.75);
}

/* ── Pricing page ──────────────────────────────────────────────────────────
   Three plans in one row. The tier block already exists above; these are the
   corrections the single-card layout never needed.                          */

/* DM Mono is for figures. "Gratis" is a word, and set in mono at 30px it read
   as a code sample rather than a price. */
.tier-price--word { font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
                    font-weight: 600; letter-spacing: -.01em; }

/* The sub-line under a price is a caption, not part of the number. */
.tier-price .sub { display: block; font-family: 'Plus Jakarta Sans', sans-serif;
                   font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.55);
                   margin-top: 7px; letter-spacing: 0; line-height: 1.5; }

/* Three abreast, and every card the same height so the buttons line up.
   The old page set an explicit 420px single column, which left the card
   stranded in a 1200px container. */
.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 660px)  { .tiers { grid-template-columns: 1fr; } }
.tier { height: 100%; }
.tier ul { flex: 1 1 auto; }

.fineprint { margin-top: 26px; font-size: 13px; color: rgba(255,255,255,0.55);
             max-width: 74ch; line-height: 1.8; }
.fineprint b { color: rgba(255,255,255,0.85); font-weight: 600; }

/* comparison table: the two state columns are narrow and centred, so the eye
   runs down them rather than reading them as prose */
.cmp th:nth-child(2), .cmp th:nth-child(3) { text-align: center; width: 108px; }
.cmp td.c { text-align: center; font-size: 15px; }
.cmp td.c.y { color: #34d399; }
.cmp td.c.n { color: rgba(255,255,255,0.28); }
.cmp thead th:nth-child(3) { color: var(--accent); }

.founding { border-left: 2px solid rgba(0,212,255,0.35); padding-left: 28px; }
.founding a { color: var(--accent); }

/* the interior hero ran 116px of padding into a 26px section; on a page whose
   first real content is the plans, that was most of a screen of nothing */
.page-head + section { padding-top: 26px; }

/* ── plan CTAs ─────────────────────────────────────────────────────────────
   .btn-pill is a 13px/9px nav pill. Stretched to a card's full 301px width it
   came out 31px tall — a long thin lozenge with a 999px radius, which is what
   made the row look wrong. A plan's CTA is the primary action on the card and
   needs the height to match its width.

   And all three were identical outlines, which told the reader nothing. The
   recommended plan is filled; the other two stay quiet. */
.tier .btn-pill { padding: 14px 22px; font-size: 14.5px; letter-spacing: .015em;
                  border-radius: 10px; }
.tier.feat .btn-pill { background: var(--accent); border-color: var(--accent);
                       color: #04121a; font-weight: 700; }
.tier.feat .btn-pill:hover { background: #3ae0ff; border-color: #3ae0ff; color: #04121a;
                             box-shadow: 0 0 26px rgba(0,212,255,.32); }

/* ── plan card footer ──────────────────────────────────────────────────────
   The CTA was pushed down by margin-top:auto, so the gap above it varied with
   each card's content and read as a hole rather than a footer. The who-line and
   the button now travel together as one block with a rule above it, which makes
   that whitespace deliberate and gives all three cards the same base.

   The bottom border was rgba(255,255,255,0.11) with the button 33px from it —
   present in the DOM, invisible on the page. More padding below the button and a
   stronger edge, so the card actually closes. */
.tier { padding-bottom: 26px; border-color: rgba(255,255,255,0.14); }
.tier.feat { border-color: rgba(0,212,255,0.38); }
.tier .btn-pill { margin-top: 14px; }
.tier-who { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10);
            width: 100%; }

/* ── Contact form ──────────────────────────────────────────────────────────
   Replaces three published mailto: addresses. Uses the page's own tokens so it
   sits inside the landing design rather than importing the app's dark chrome. */
.cform { display: flex; flex-direction: column; gap: 16px; }

.cform__row { display: flex; flex-direction: column; gap: 7px; }

.cform__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cform__lab {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}

/* Every inherited property is declared: a <select> and a <textarea> take the
   user agent's own font and light background otherwise, which on this ground
   would be unreadable — the same trap that made the admin buttons invisible. */
.cform__in {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 13px;
  outline: none;
  transition: border-color .15s;
}

.cform__in:focus { border-color: var(--accent); }
.cform__in::placeholder { color: var(--muted); opacity: .5; }

.cform__ta { resize: vertical; min-height: 130px; }

.cform__btn {
  align-self: flex-start;
  margin-top: 2px;
  background: var(--accent);
  color: #04141a;
  border: 1px solid var(--accent);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 26px;
  cursor: pointer;
}

.cform__btn:hover { box-shadow: var(--accent-glow); }

.cform__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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