/* Hexarion strict layer — loaded last on every public page.
   Square geometry, no tiles, no pills, no glows. The navy palette stays;
   only shape, depth and surfaces are flattened. Most page styles are
   inline, hence !important throughout. */

:root { --hx-rule: rgba(120, 165, 220, .18); }

/* ---- Geometry: nothing rounded, no pills or ovals ---- */
*, *::before, *::after { border-radius: 0 !important; }

/* ---- Depth: no glows, drop shadows or hover lifts ---- */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
img { filter: none !important; }
.hx-hero-visual::before,
.hx-hero-image::after { display: none !important; }
[data-reveal-delay], .hx-card, .card, #products a, #partners > a { transform: none !important; }

/* ---- Navigation: a flat full-width bar instead of a floating capsule ---- */
.hx-main-nav, .nav, .doc-nav {
  left: 0 !important; right: 0 !important; top: 0 !important;
  width: 100% !important; transform: none !important;
  padding: 0 clamp(20px, 5vw, 68px) !important;
  min-height: 72px;
  border: 0 !important; border-bottom: 1px solid var(--hx-rule) !important;
  background: rgba(6, 14, 25, .72) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.hx-brandmark, .nav > a:first-child, .doc-nav > a:first-child {
  border: 0 !important; background: none !important;
  width: clamp(170px, 12vw, 210px) !important; height: 54px !important;
}
.hx-brandmark img, .nav > a:first-child img, .doc-nav > a:first-child img { object-fit: contain !important; object-position: left center !important; }
.hx-nav-links { border: 0 !important; background: none !important; padding: 0 !important; }
.hx-nav-links > a:hover, .hx-nav-links .hx-dd-trigger:hover { background: none !important; }

/* ---- Buttons: flat, square, solid or outlined ---- */
a[href="/login"], a[href="#contact"][style*="linear-gradient"], button[type="submit"],
.btn-primary, .hx-accept, .nav-cta, .btn {
  background-image: none !important;
}
a[href="/login"][style*="linear-gradient"], a[href="#contact"][style*="linear-gradient"],
button[type="submit"], .btn-primary, .hx-accept, .nav-cta {
  background-color: #2e9bff !important; color: #04111f !important;
}

/* ---- Pills / badges become plain mono labels ---- */
div[style*="border-radius:100px"], span[style*="border-radius:100px"],
.badge, .doc-badge, .pill, .cat {
  border: 0 !important; background: none !important; padding: 0 !important;
}
.pills, .cats, .badges { gap: 8px 22px !important; }
.pill::before, .cat::before { content: "— "; color: #2e9bff; }
/* Form choice chips stay controls: square outlined boxes. */
button[data-topic], button[data-comm] { border-width: 1px !important; }

/* ---- Tiles: no panels, just columns divided by a hairline ---- */
.hx-card, #why [data-reveal-delay], #products a, #partners > a, .card {
  background: none !important;
  border: 0 !important; border-top: 1px solid var(--hx-rule) !important;
  padding: 26px 0 0 !important;
  overflow: visible !important;
}
.hx-card > div[style*="position:absolute"] { display: none !important; }
.hx-service-media { margin: 0 0 24px !important; border: 0 !important; }
#why [data-reveal-delay="120"] { padding-top: 26px !important; }

/* Icon boxes: bare icons, no chip behind them. */
.hx-card [style*="width:52px"], #why [style*="width:42px"], #why [style*="width:46px"],
#contact [style*="width:48px"], .card .ic {
  background: none !important; border: 0 !important;
  width: auto !important; height: auto !important; justify-content: flex-start !important;
}

/* Why: the quote keeps its rule, loses the wash. */
#why [style*="border-left:2px"] { background: none !important; }

/* Products: logo plate + text, no card around them. */
#products a > div:first-child { border: 1px solid var(--hx-rule); }
#products a > div:last-child { padding: 22px 0 0 !important; }

/* Partners: the logo block is no longer a boxed tile. */
#partners > a > div:first-child { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; }

/* Contact: the form sits on the page, set off by a hairline only. */
#contact .hx-grid-2 > div:last-child {
  background: none !important; border: 0 !important;
  border-top: 1px solid var(--hx-rule) !important;
  padding: 30px 0 0 !important;
}
#contact .hx-grid-2 > div:last-child > div[style*="position:absolute"] { display: none !important; }
#contact a[aria-label] { background: none !important; }

/* Hero image and product panels: square frames, hairline border. */
.hx-hero-image, .hero-art .panel { border: 1px solid var(--hx-rule) !important; }

/* Numbered steps / checklist markers: squares instead of discs. */
.steps li::before, .posture li::before { background: #2e9bff !important; }

/* Cookie banner and dropdowns: flat panels. */
.hx-cookie { backdrop-filter: none !important; }

/* Product pages: the closing call-to-action is a section, not a tile. */
.final { background: none !important; border: 0 !important; border-top: 1px solid var(--hx-rule) !important; }
.final::before { display: none !important; }

/* Docs: flat table of contents and notes; steps flow as text
   (a flex <li> split every <b> and text run into its own column). */
.doc-toc { background: none !important; border: 0 !important; border-left: 1px solid var(--hx-rule) !important; }
.doc-note { background: none !important; }
.doc-steps li { display: block !important; position: relative; padding-left: 40px; }
.doc-steps li::before { position: absolute; left: 0; top: 0; }

@media (max-width: 620px) {
  .hx-main-nav, .nav, .doc-nav { padding: 0 14px !important; min-height: 62px; }
  .hx-brandmark, .nav > a:first-child, .doc-nav > a:first-child { width: 124px !important; height: 44px !important; }
  .hx-main-nav a[href="/login"] { padding: 10px 12px !important; font-size: 12px !important; }
}

/* Hero is text-only; its illustration now sits under "Who we are". */
.hx-hero { grid-template-columns: minmax(0, 1fr) !important; min-height: min(820px, 88vh) !important; }
.hx-about-image { margin-top: 36px; }

/* Hero event-flow animation (animated SVG), full width under the hero copy. */
.hx-hero { min-height: 0 !important; padding-bottom: clamp(48px, 7vh, 88px) !important; }
.hx-flow { margin: clamp(40px, 6vh, 72px) 0 0; border: 1px solid var(--hx-rule); background: #06101d; }
.hx-flow img { display: block; width: 100%; height: auto; }