/* Trust / security page (/trust).
   Shared components are reused, not redefined: .section-container (container),
   .glass-card (cards), .eyebrow-badge (section kickers), .btn/.btn-hero/.btn-lg
   (buttons), .hub-matrix (table), and the dark-band pieces from format-hub.css
   (.hub-dark, .hub-gridtex, .hub-badge, .hub-card-hover, .btn-ghost-dark).
   Tailwind utilities cover spacing, typography and grid layout.

   The rules below cover only the patterns this page introduces that the site
   has no equivalent for: the hero flow diagram, the dark trust chips, the
   location card's grid texture, and the Europe map. Everything is prefixed
   trust- so it cannot collide with the rest of the site. */

/* ---- Hero flow diagram: node / hop / emphasised core node / hop / node ---- */
.trust-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: stretch;
  max-width: 1040px;
  /* Long-hand, not `margin: 0 auto`: the shorthand would reset the top margin
     the utility class on the element sets (mt-12), and trust.css wins the
     cascade over tailwind.css. */
  margin-left: auto;
  margin-right: auto;
}

.trust-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 22px 20px;
  text-align: center;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-node__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--badge-ink);
}

.trust-node__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #eaf3ee;
}

.trust-node__s {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 24ch;
  color: var(--badge-ink);
}

/* The centre node carries the story, so it gets the accent tint and glow. */
.trust-node--core {
  background: rgba(159, 224, 168, 0.09);
  border-color: rgba(159, 224, 168, 0.4);
  box-shadow: 0 0 40px -14px rgba(159, 224, 168, 0.35);
}

  .trust-node--core .trust-node__ic {
    background: rgba(159, 224, 168, 0.16);
    color: var(--mint);
  }

  .trust-node--core .trust-node__t {
    color: #fff;
    font-size: 1.0625rem;
  }

.trust-hop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  padding: 0 14px;
}

.trust-hop__lock {
  display: block;
  color: var(--mint);
}

.trust-hop__line {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 224, 168, 0.5), transparent);
}

  .trust-hop__line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 6px solid rgba(159, 224, 168, 0.6);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
  }

.trust-hop__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  color: var(--badge-ink);
}

/* ---- Trust chips (dark band).
   Wording here is the canonical version: a smaller strip is planned for the
   homepage linking back to this page, and the two must read identically. ---- */
.trust-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  text-align: left;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #eaf3ee;
}

  .trust-chip svg {
    flex: 0 0 auto;
    color: var(--mint);
  }

/* ---- Location card: faint grid texture behind the pin marker ---- */
.trust-pin {
  position: relative;
  overflow: hidden;
}

  .trust-pin::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(hsl(var(--border) / 0.8) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.8) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(220px 140px at 82% 18%, #000, transparent 72%);
            mask-image: radial-gradient(220px 140px at 82% 18%, #000, transparent 72%);
  }

  .trust-pin > * {
    position: relative;
  }

/* ---- Europe map.
   The SVG is a static asset dropped into .trust-map-slot (real Natural Earth
   geometry, Mercator, fitted to Europe). Keep width:100% + height:auto so the
   SVG viewport aspect matches its viewBox: letterboxing from an aspect
   mismatch renders out-of-frame geometry into the margins, because SVG clips
   to the viewport, not the viewBox. Fills read from the site tokens so the map
   stays in palette. ---- */
.trust-map-slot {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

  .trust-map-slot svg {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
  }

.trust-map__land {
  fill: hsl(var(--muted));
  stroke: hsl(var(--border));
  stroke-width: 0.7;
}

.trust-map__de {
  fill: hsl(var(--secondary));
  stroke: hsl(var(--accent-strong));
  stroke-width: 1.2;
}

.trust-map__pin-halo {
  fill: hsl(var(--accent-strong));
  opacity: 0.16;
}

.trust-map__pin-dot {
  fill: hsl(var(--accent-strong));
  stroke: hsl(var(--card));
  stroke-width: 1.4;
}

/* Placeholder shown until the map SVG is dropped in. Remove with the markup. */
.trust-map-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 420 / 300;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.625rem;
  background: hsl(var(--muted) / 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

/* ---- Certification badge panel (Infrastructure section).
   The card shell is .glass-card and the footer strip reuses .hub-matrix__foot,
   the same treatment as the subprocessor table. Only the header and the badge
   grid are new. The grid's 1px gap lets the panel's own border-coloured
   background show through as hairline dividers, so cells sit flush against
   each other rather than being spaced apart. ---- */
.trust-certs__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 26px;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}

.trust-certs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: hsl(var(--border));
}

.trust-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  background: hsl(var(--card));
  transition: background 0.14s;
}

  .trust-cert:hover {
    background: hsl(var(--muted) / 0.45);
  }

.trust-cert__seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(var(--secondary));
  color: hsl(var(--primary));
}

.trust-cert__nm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: hsl(var(--foreground));
}

/* States what kind of artifact each badge is. A SOC 3 is not a SOC 2, CIS
   Benchmarks are not a certification, and STAR Level 1 is self-assessed:
   dropping these qualifiers is what makes an assessor distrust the panel. */
.trust-cert__kd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--accent-strong));
}

/* ---- Inline mailto links in prose ---- */
.trust-mail {
  font-family: var(--font-mono);
  font-size: 0.93em;
  color: hsl(var(--accent-strong));
  border-bottom: 1px solid hsl(var(--accent-strong) / 0.35);
}

  .trust-mail:hover {
    border-bottom-color: hsl(var(--accent-strong));
  }

/* ---- Responsive: the flow diagram stacks and its connectors rotate ---- */
@media (max-width: 980px) {
  .trust-flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .trust-hop {
    flex-direction: row;
    gap: 12px;
    min-width: 0;
    padding: 0;
  }

  .trust-hop__line {
    width: 36px;
    transform: rotate(90deg);
  }

  .trust-certs__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .trust-certs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}