/* ==========================================================================
   VATMesh — the legacy bridge
   ------------------------------------------------------------------------
   The legacy pages were written for a dark ground and are served on a light
   one: their colours are hard-coded Tailwind utility classes, so the design
   system cannot repaint them (the same reason the legacy pages were kept
   light-only).
   So the PALETTE IS PINNED here: the light tokens are re-declared for the
   legacy pages with a specificity that beats both the light and the dark
   block of site.css. The pages stay readable whatever the system theme is,
   and the theme button is hidden because it would have nothing to switch.
   The token block below is extracted from site.css at build time.
   ========================================================================== */

html[data-vm-legacy],
html[data-vm-legacy][data-theme="light"],
html[data-vm-legacy][data-theme="dark"] {
/* ---------- Colour — light ---------- */
  --ink: #0B1F3A;
  --ink-2: #17314F;
  --navy: #071528;
  --ivory: #FBF8F1;
  --paper: #FFFFFF;
  --surface: #F4F1E9;
  --text: #24374D;
  --muted: #5D6E82;
  --line: #E2DDD1;
  /* #CFC7B7 measured 1.58:1 on ivory — under the 3:1 a control boundary
     needs. Darkened to #948870 (3.29:1 ivory / 3.49:1 paper / 3.09:1 surface). */
  --line-strong: #948870;
  --teal: #0E6B63;
  --teal-900: #0A4F49;
  --teal-050: #EDF5F2;
  /* #A9873F measured 2.99:1 on --gold-050. Darkened to #86682B:
     4.63:1 on --gold-050, 5.21:1 on --paper, 4.91:1 on --ivory. */
  --gold: #86682B;
  --gold-050: #F7F1E2;
  --danger: #A33B3B;
  --success: #1F6B4A;

  /* ---------- Type ---------- */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Noto Naskh Arabic", "Cairo", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Fluid type scale. The names follow DESIGN-SYSTEM.md 2.3 exactly, which
     means --fs-display drives <h1>, --fs-h1 drives <h2> and --fs-h2 drives
     <h3>. The rendered sizes are unchanged from the values they replace. */
  --fs-display: clamp(2.6rem, 4.7vw, 4.15rem);
  --fs-h1: clamp(1.9rem, 3vw, 2.7rem);
  --fs-h2: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body: 1rem;
  --fs-lead: 1.075rem;
  --fs-small: .8125rem;
  --fs-micro: .6875rem;

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Elevation, radius, motion ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .05);
  --shadow-md: 0 18px 40px -24px rgba(11, 31, 58, .35);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .45);
  --radius: 3px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --container: 1180px;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Measure ---------- */
  --measure: 62ch;
  --measure-prose: 68ch;

  /* ---------- Semantic roles ----------
     These are the tokens the components read. They hold the light values
     here and are re-pointed by the dark-theme block, so a component never
     has to know which theme it is in. */
  --heading: #0B1F3A;        /* heading ink — flips to a light ink in dark */
  --text-soft: #24374D;      /* the same body ink; kept for the older pages */
  --primary-bg: #0B1F3A;     /* primary button ground */
  --primary-fg: #FFFFFF;     /* primary button text */
  --control-line: #8F8369;     /* control borders (3.31:1 on --surface) */
  --gold-700: #6E5220;       /* gold pressed / hover ground (light) */
  --gold-fg: #FFFFFF;        /* text on the gold hover ground (light) */
  --gold-btn-fg: #FFFFFF;    /* text on the gold button (light) */
  --gold-ink: #7A5E23;       /* gold used as text on a gold ground */
  --code-bg: #F4F1E9;
  --code-text: #17314F;
  --code-muted: #5D6E82;
  /* The terminal-style panels (the MCP configuration block, the JSON
     receipts) are DARK in both themes, so they need their own pair:
     --code-text is the ink of the light theme and vanishes on a dark
     ground. The pair flips with the theme, the way --header-bg and
     --footer-bg do. */
  --code-panel-bg: #0A1729;      /* the ground of a dark code panel */
  --code-panel-text: #DCE7F3;    /* the code on that ground — 14.3:1 */
  --code-panel-muted: #9FB6CC;   /* the dimmed lines of a JSON receipt */
  --code-panel-line: rgba(255, 255, 255, .12);
  --header-bg: rgba(251, 248, 241, .94);
  --accent-on-navy: #5FD3C6; /* the teal that stays legible on --navy */
  --focus-ring: var(--teal);
  --light-btn-bg: #FBF8F1;   /* the "light" button used on navy bands */
  --light-btn-bg-hover: #FFFFFF;
  --light-btn-fg: #0B1F3A;
  /* The navy bands (the CTA band, the footer, the .section--navy blocks)
     carry their own ink: a light ground for the solid button, a light
     outline for the secondary one, and the white text they both use. */
  --band-fg: #FFFFFF;
  --band-border: rgba(255, 255, 255, .58);
  --band-btn-hover: rgba(255, 255, 255, .12);
  --on-dark-muted: #9FB0C4;  /* the dimmed ink of a dark output panel */
  --table-row-hover: #FCFBF7;
  --calc-out-bg: #0B1F3A;    /* the dark output panel of the calculator */
  --footer-bg: #06111F;
  --focus-halo: rgba(14, 107, 99, .18);
  --teal-050-line: #D5E6E1;
  --gold-050-line: #E9DDC2;
  --danger-bg: #FBEDED;
  --danger-line: #EFD2D2;
  --success-bg: #E6F2EC;
  --success-line: #CBE4D8;
  --warn-bg: #FBF3E4;
  --warn-line: #EAD9B0;
  --warn-ink: #8A6414;
}

html[data-vm-legacy] { color-scheme: light !important; }

/* The legacy pages carry long unbroken strings (a SHA-256 seal, an XML
   fragment, a URL) inside flex panels. Without this they set the width
   of the page and the phone scrolls sideways. */
html[data-vm-legacy] body { overflow-wrap: anywhere; }

/* The legacy JavaScript sets some states with a class string that the
   build cannot see: the selected case of the pilot bench, the tab of the
   pricing table, a field painted white on a white field. Three rules
   bring the ink back where the ground is light. */
html[data-vm-legacy] [class*="bg-cyan-500/15"] { color: var(--ink); }
html[data-vm-legacy] .bg-white.text-white { color: var(--ink); }
html[data-vm-legacy] .bg-white\/10.text-white { color: var(--ink); }

/* The legacy green with white text measured 3.77:1. One shade darker
   (the design system teal is on the same ground) brings the button to
   4.9:1 without changing the palette the pages are built on. Only the
   buttons whose text is white: the pages that paint their own dark ink
   on the green need the original shade. */
html[data-vm-legacy] .bg-emerald-600.text-white { background-color: #047857; }
html[data-vm-legacy] .bg-emerald-600.text-white:hover { background-color: #065F46; }

/* The theme toggle of the shell: the legacy content cannot render a dark
   theme, so the button is not offered. */
html[data-vm-legacy] #theme-toggle { display: none; }

/* The ink classes the colour pass writes into the legacy markup. */
.vm-ink { color: var(--ink); }
.vm-body { color: var(--text); }
.vm-muted { color: var(--muted); }
.vm-on-dark { color: #F2F7FC; }

/* ==========================================================================
   THE GEOMETRY, REMAPPED
   ------------------------------------------------------------------------
   The legacy pages carry the new header, the new footer and the new
   typefaces, but their content area still wears the old Tailwind
   geometry: 12px rounded cards, cool grey borders, slate grounds, big
   soft shadows, a 1280px measure. The design system is the opposite:
   a sharp 3px radius, a warm hairline, an ivory ground, a tight
   shadow, an 1180px measure.
   That difference is what makes a legacy page still read as a legacy
   page. So the geometry is remapped here - in ONE file, for every
   legacy page, without touching a single page of markup.
   ========================================================================== */

/* The ground: the ivory of the design system, not the cool slate-50 and
   not the forced white. omni-theme.css forces the body white with
   !important, so the ground is repainted here with the same weight. */
html[data-vm-legacy] body {
  background-color: var(--ivory) !important;
  color: var(--text) !important;
}

/* The grounds of the sections and the cards. */
html[data-vm-legacy] .bg-slate-50,
html[data-vm-legacy] .bg-gray-50 { background-color: var(--ivory); }
html[data-vm-legacy] .bg-slate-100,
html[data-vm-legacy] .bg-gray-100 { background-color: var(--surface); }
html[data-vm-legacy] .bg-slate-200,
html[data-vm-legacy] .bg-gray-200 { background-color: var(--line); }

/* The hairlines: warm, not cool. */
html[data-vm-legacy] .border-slate-200,
html[data-vm-legacy] .border-gray-200,
html[data-vm-legacy] .border-slate-300,
html[data-vm-legacy] .border-gray-300 { border-color: var(--line); }
html[data-vm-legacy] .border-slate-100,
html[data-vm-legacy] .border-gray-100 { border-color: var(--line); }

/* The radius: the design system is sharp. Tailwind rounds to 12px. */
html[data-vm-legacy] .rounded-sm,
html[data-vm-legacy] .rounded { border-radius: var(--radius); }
html[data-vm-legacy] .rounded-md,
html[data-vm-legacy] .rounded-lg { border-radius: var(--radius); }
html[data-vm-legacy] .rounded-xl,
html[data-vm-legacy] .rounded-2xl,
html[data-vm-legacy] .rounded-3xl { border-radius: var(--radius-lg); }

/* The elevation: one tight shadow, not the soft stack. */
html[data-vm-legacy] .shadow-sm,
html[data-vm-legacy] .shadow { box-shadow: var(--shadow-sm); }
html[data-vm-legacy] .shadow-md,
html[data-vm-legacy] .shadow-lg,
html[data-vm-legacy] .shadow-xl,
html[data-vm-legacy] .shadow-2xl { box-shadow: var(--shadow-md); }

/* The measure: the container of the design system, not Tailwind 1280. */
html[data-vm-legacy] .max-w-7xl { max-width: var(--container); }
html[data-vm-legacy] .max-w-6xl { max-width: var(--container); }

/* The accent GROUNDS only. The TEXT accents are NOT remapped here: the
   colour pass already re-inked every text block against its own real
   background, so it knows the ground. A global CSS rule does not, and
   remapping .text-cyan-* to the teal put a heading at 1.46:1 on a
   mid-grey band in /security. The grounds below carry white text, and
   the teal is a better ground for white than the old cyan was. */
html[data-vm-legacy] .bg-cyan-500,
html[data-vm-legacy] .bg-cyan-600,
html[data-vm-legacy] .bg-blue-500,
html[data-vm-legacy] .bg-blue-600 { background-color: var(--teal); }
html[data-vm-legacy] .bg-cyan-100,
html[data-vm-legacy] .bg-blue-100 { background-color: var(--teal-050); }
html[data-vm-legacy] .bg-emerald-50 { background-color: var(--success-bg); }
html[data-vm-legacy] .border-emerald-200 { border-color: var(--success-line); }

/* The dark bands: the navy of the design system, so the CTA band, the
   legal cards and the code panels are the same ground as the footer. */
html[data-vm-legacy] .bg-slate-900,
html[data-vm-legacy] .bg-gray-900,
html[data-vm-legacy] .bg-slate-950,
html[data-vm-legacy] .bg-gray-950 { background-color: var(--navy); }
html[data-vm-legacy] [class*="bg-[#0B1F3A]"] { background-color: var(--navy); }

/* The gradient headings: the design system headings are FLAT ink. A
   gradient H1 is the loudest remaining tell that a page is an old
   one, once its shell, its ground, its type and its radius are the
   new ones.
   Only the TEXT fill is flattened, never the ground: on /pilote-cec the
   gradient WAS the dark band the white H1 sat on, and flattening the
   band put white on white (1.06:1). The colour comes from the ink
   class the colour pass already wrote - it measured each element
   against its real background, so the flat heading takes exactly the
   ink that was legible there. */
html[data-vm-legacy] .bg-clip-text {
  background-image: none !important;
  -webkit-text-fill-color: currentColor;
}
html[data-vm-legacy] .bg-clip-text.vm-ink { color: var(--ink); }
html[data-vm-legacy] .bg-clip-text.vm-on-dark { color: #F2F7FC; }
html[data-vm-legacy] .bg-clip-text.vm-body { color: var(--text); }
/* The buttons: the primary of the design system, not the old blue. */
html[data-vm-legacy] .bg-blue-600 a,
html[data-vm-legacy] a.bg-blue-600,
html[data-vm-legacy] a.bg-cyan-600 { background-color: var(--primary-bg); }

/* ==========================================================================
   VATMESH GLOBAL LAYOUT, PRICING RIBBON, AUTH GRID, BUTTON & FOOTER FIXES
   ========================================================================== */

/* 1. Pricing Card Ribbon / Tag — Never overlap card title or description */
.plan--featured {
  padding-top: 42px !important;
  border-color: var(--teal, #0E6B63) !important;
  box-shadow: 0 4px 20px rgba(14, 107, 99, 0.12) !important;
}
.plan__tag,
.plan__ribbon {
  position: relative !important;
  top: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  left: auto !important;
  align-self: flex-start !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
  color: var(--gold, #86682B) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--gold-050, #F7F1E2) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid #EAD9B0 !important;
  line-height: 1.35 !important;
  z-index: 1 !important;
}
.pilot-offer-callout {
  background: var(--gold-050, #F7F1E2) !important;
  border: 1px solid #EAD9B0 !important;
  border-radius: var(--radius, 6px) !important;
  padding: 12px 14px !important;
  margin: 12px 0 16px !important;
}

/* 2. Signup & Signin Page Grid & Container Spacing */
main.signup-page-wrap,
main.auth-page-wrap,
#main.signup-page-wrap,
#main.auth-page-wrap,
.signup-page-wrap,
.auth-page-wrap {
  max-width: 1180px !important;
  width: min(100% - 48px, 1180px) !important;
  margin-inline: auto !important;
  padding-block: 48px !important;
  flex: 1 0 auto !important;
  box-sizing: border-box !important;
}
main.container,
#main.container,
main[class*="max-w-"],
#main[class*="max-w-"] {
  max-width: 1180px !important;
  width: min(100% - 48px, 1180px) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}
.signup-layout,
.auth-layout {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 40px !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 960px) {
  .signup-layout,
  .auth-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
.signup-showcase,
.signup-card,
.auth-card,
.auth-showcase {
  background: var(--paper, #FFFFFF) !important;
  border: 1px solid var(--line, #E2DDD1) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: var(--shadow-sm) !important;
  box-sizing: border-box !important;
}
html[data-theme="dark"] .signup-showcase,
html[data-theme="dark"] .signup-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-showcase {
  background: rgba(13, 27, 46, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 3. Global Utility & Button Contrast Fallback */
.hidden,
[hidden] {
  display: none !important;
}

.btn--primary, a.btn--primary, button.btn--primary,
a.bg-blue-600, a.bg-blue-500, a.bg-cyan-600, a.bg-cyan-500,
a.bg-emerald-600, a.bg-emerald-500, a.bg-indigo-600,
button.bg-indigo-600, button.bg-blue-600, button.bg-emerald-600 {
  color: #FFFFFF !important;
  background-color: var(--teal, #0E6B63) !important;
  border-color: var(--teal, #0E6B63) !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.btn--primary:hover, a.btn--primary:hover, button.btn--primary:hover,
a.bg-blue-600:hover, a.bg-blue-500:hover, a.bg-cyan-600:hover, a.bg-cyan-500:hover,
a.bg-emerald-600:hover, a.bg-emerald-500:hover, a.bg-indigo-600:hover,
button.bg-indigo-600:hover, button.bg-blue-600:hover, button.bg-emerald-600:hover {
  color: #FFFFFF !important;
  background-color: var(--teal-900, #0A4F49) !important;
  border-color: var(--teal-900, #0A4F49) !important;
}
.btn--primary *, a.btn--primary *, button.btn--primary *,
a.bg-blue-600 *, a.bg-blue-500 *, a.bg-cyan-600 *, a.bg-cyan-500 *,
a.bg-emerald-600 *, a.bg-emerald-500 *, a.bg-indigo-600 *,
button.bg-indigo-600 *, button.bg-blue-600 *, button.bg-emerald-600 * {
  color: #FFFFFF !important;
}
.btn--block, a.btn--block, button.btn--block {
  width: 100% !important;
  display: inline-flex !important;
  justify-content: center !important;
}
.header-actions .btn--sm,
.header-actions a.btn--primary.btn--sm {
  padding: 9px 14px !important;
  font-size: 12.5px !important;
}

/* Adjacent CTA links/buttons inside flex containers always have gap: 12px */
.flex,
.inline-flex,
.hero__actions,
.cta-band__actions,
.dev__links,
.header-actions,
.stage-actions {
  gap: 12px;
}

/* 4. Footer Styling Polish */
.site-footer {
  background: #06111F !important;
  color: #DCE7F3 !important;
  padding-block: 56px 32px !important;
  margin-top: 64px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
.footer-top,
.site-footer__grid {
  display: grid !important;
  grid-template-columns: 1.4fr repeat(4, 1fr) !important;
  gap: 40px !important;
  padding-bottom: 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  align-items: start !important;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr repeat(4, 1fr) !important;
  gap: 40px !important;
  padding-bottom: 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  align-items: start !important;
}
.footer-col h4,
.footer-grid h4,
.site-footer__grid h4 {
  color: #FFFFFF !important;
  font-family: var(--sans, sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px 0 !important;
}
.footer-col a,
.footer-grid a,
.site-footer__grid a,
ul.footer-links a {
  color: #9BAABC !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  transition: color 0.15s ease !important;
}
.footer-col a:hover,
.footer-grid a:hover,
.site-footer__grid a:hover,
ul.footer-links a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.footer-ctas {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.footer-ctas .btn,
.footer-ctas a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.site-footer .btn--light,
.footer-ctas .btn--light,
.site-footer .btn--secondary,
.footer-ctas .btn--secondary {
  background: #FFFFFF !important;
  color: #0B1F3A !important;
  border: 1px solid #FFFFFF !important;
}
.site-footer .btn--light:hover,
.footer-ctas .btn--light:hover,
.site-footer .btn--secondary:hover,
.footer-ctas .btn--secondary:hover {
  background: #F1F5F9 !important;
  color: #0E6B63 !important;
  border-color: #FFFFFF !important;
}
.site-footer .btn--light-outline,
.footer-ctas .btn--light-outline {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}
.site-footer .btn--light-outline:hover,
.footer-ctas .btn--light-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
@media (max-width: 960px) {
  .footer-top,
  .footer-grid,
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 600px) {
  .footer-top,
  .footer-grid,
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
/* VATMesh Mobile & Responsive Recovery Pack */

/* 1. Prevent word-break from breaking every single word into single letters in tables */
html[data-vm-legacy] body {
  overflow-wrap: break-word;
}

html[data-vm-legacy] table,
.vatmesh-table,
table {
  word-break: normal;
  overflow-wrap: normal;
}

/* 2. Responsive Tables across all pages (Cookies, Audit, Legal, Cockpit) */
.overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  display: block;
}

table {
  min-width: 600px;
}

@media (max-width: 640px) {
  table th, table td {
    white-space: normal;
  }
  
  /* Prevent single-character vertical column collapse */
  table th {
    min-width: 120px;
  }
  table td:first-child, table th:first-child {
    min-width: 140px;
  }
}

/* 3. Global Container on Mobile (Homepage & all Landing pages) */
@media (max-width: 768px) {
  .container, 
  .container--narrow,
  #main,
  main {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  /* Grid layout fluid stacks */
  .grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .pricing-grid,
  .hero__grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .card, 
  .comp-pillar,
  .plan {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}