/* =========================================================
   AmbiSecure — Main Stylesheet
   Inherits Ambimat brand palette; extends with technical-security tokens
   for AmbiSecure's distinct identity within the ecosystem.

   Brand:  Red #E3222A · Grey #616A6C · Dark #3A3F40 · Soft #F4F5F6
   Type:   Montserrat (headings) · Source Sans 3 (body) · JetBrains Mono (code)
   ========================================================= */

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

:root {
  /* Brand (shared with eSIM site / Ambimat group) */
  --brand-red: #E3222A;
  --brand-red-dark: #B81A21;
  --brand-grey: #616A6C;
  --brand-dark: #3A3F40;
  --brand-soft: #F4F5F6;

  /* AmbiSecure technical accents (used only on technical surfaces) */
  --secure-cyan: #0E8C9C;
  --secure-cyan-dark: #086573;
  --secure-cyan-soft: #E6F4F6;
  --secure-amber: #C77A00;
  --secure-amber-soft: #FFF4E2;
  --secure-green: #2E8B4F;
  --secure-green-soft: #E5F4EA;

  /* Code surface */
  --code-bg: #14161A;
  --code-fg: #E6E6EA;
  --code-key: #FF8A8A;
  --code-comment: #7c8189;

  /* Aliases used by components */
  --bg: #ffffff;
  --bg-alt: var(--brand-soft);
  --grid-line: #e5e5e5;
  --card: #eef0f1;
  --card-soft: #f0f0f1;
  --ink: #1A1D1E;
  --ink-2: var(--brand-dark);
  --muted: var(--brand-grey);
  --muted-2: #5a6063;
  --line: #e2e2e4;
  --dark: var(--brand-dark);
  --accent: var(--brand-red);
  --accent-dark: var(--brand-red-dark);

  /* Type scale */
  --fs-hero: 48px;
  --fs-h1: 38px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 19px;
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-eyebrow: 11.5px;

  /* Layout */
  --pad-section: 100px 80px;
  --maxw-section: 1280px;
  --maxw-hero: 1320px;
  --maxw-prose: 820px;
  --radius-card: 6px;
  --radius-btn: 4px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Source Sans 3', 'Source Sans Pro', 'Roboto', 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.logo, .nav-links a, .btn, .nav-btn,
.section-title, .hero-title, .eyebrow,
.brand-line, .ecosystem-label,
.footer h3, .stat-num {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  letter-spacing: -0.1px;
}

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--brand-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  z-index: 100;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* =========================================================
   ECOSYSTEM BAR
   ========================================================= */
.ecosystem-bar {
  background: var(--brand-dark);
  color: #d8dadb;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #4a5051;
}
.ecosystem-bar-inner {
  max-width: var(--maxw-hero);
  margin: 0 auto;
  padding: 9px 80px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ecosystem-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #b4b9bb;
}
.ecosystem-bar a {
  color: #d8dadb;
  text-decoration: none;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  padding: 4px 2px;
  transition: color .2s ease;
}
.ecosystem-bar a:hover { color: #fff; }
.ecosystem-bar a.current { color: #fff; }
.ecosystem-bar a.current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 2px;
  background: var(--brand-red);
}
.ecosystem-bar .ext::after { content: ' \2197'; font-size: 10px; opacity: .6; }
.ecosystem-bar .spacer { flex: 1; }
.ecosystem-bar .meta { font-size: 11.5px; color: #b4b9bb; font-family: 'Montserrat', sans-serif; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 80px;
  background: #fff;
  border-bottom: 1px solid var(--brand-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-red) 30%, var(--brand-red) 70%, transparent);
  opacity: 0.35;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
/* PHASE 23 — Use the official AmbiSecure logo (assets/img/ambisecure-logo.webp).
   The crest carries its own internal "AMBI SECURE" wordmark, so the adjacent
   .brand-text wordmark is hidden site-wide (no per-page markup sweep needed). */
.brand-mark {
  height: 52px;
  width: 52px;
  background: transparent url('/assets/img/ambisecure-logo.webp') center/contain no-repeat;
  border: 0;
  border-radius: 0;
  font-size: 0;
  color: transparent;
  position: relative;
  flex-shrink: 0;
  box-shadow: none;
}
/* Phase 25: footer brand-mark sits on a dark footer, so the logo gets its
   own white circle so the gray ring doesn't blend in. The image is composed
   onto the white background via background-image + background-color. */
.footer-brand .brand-mark {
  height: 84px;
  width: 84px;
  background-color: #ffffff;
  background-size: 86%;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.brand-text { display: none; }
.brand-text-legacy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-line {
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-dark);
  letter-spacing: 0.2px;
}
.brand-line .accent { color: var(--brand-red); }
.brand-tag {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--brand-grey);
  margin-top: 2px;
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-red);
  border-color: var(--brand-red);
}

.nav-actions { display: flex; gap: 10px; align-items: center; }

/* Phase 20 — global site-search trigger sitting beside the contact CTA */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line, #E1E3E4);
  color: var(--brand-grey, #616A6C);
  padding: 8px 12px;
  border-radius: var(--radius-btn, 6px);
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-search:hover {
  border-color: var(--brand-red);
  color: var(--brand-dark);
  box-shadow: 0 6px 14px rgba(58,63,64,0.06);
}
.nav-search svg { display: block; }
.nav-kbd-hint::after { content: '\2318K'; }
.nav-search kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: var(--brand-soft, #F4F5F6);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--brand-grey);
  border: 1px solid var(--line, #E1E3E4);
}
@media (max-width: 880px) {
  .nav-search .nav-search-label,
  .nav-search kbd { display: none; }
  .nav-search { padding: 8px 10px; }
}

.nav-btn {
  background: var(--brand-red);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.nav-btn:hover {
  background: var(--brand-red-dark);
  box-shadow: 0 6px 14px rgba(227,34,42,0.22);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.hamburger span { width: 25px; height: 3px; background: var(--brand-dark); transition: .25s; border-radius: 1px; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 18px 80px 0;
  font-size: 12.5px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.4px;
  color: var(--muted-2);
  text-transform: uppercase;
}
.breadcrumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--brand-red); }
.breadcrumb .sep { margin: 0 8px; color: var(--line); }
.breadcrumb .current { color: var(--brand-dark); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* Phase 30: tighten the whitespace above the small AmbiSecure logo and
     between the logo, eyebrow, and headline. Keep min-height prominent so
     the hero still dominates the first viewport without dead space. */
  min-height: 88vh;
  background:
    radial-gradient(ellipse at 82% -10%, rgba(227,34,42,0.09), transparent 58%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    #ffffff;
  background-size: auto, 60px 60px, 60px 60px, auto;
  padding: 56px 80px 96px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, rgba(227,34,42,0.04) 49.5%, rgba(227,34,42,0.04) 50.5%, transparent 50.5%);
  background-size: 18px 18px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black, transparent 70%);
}
.hero-container {
  max-width: var(--maxw-hero);
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
}
.hero-left { flex: 1.05; }
.hero-right { flex: 0.95; display: flex; justify-content: center; }

/* Hero-crest: the official AmbiSecure circular crest used as the hero's
   right-side flagship visual. The source asset is a JPG with white square
   padding around the circular crest — border-radius:50% masks those corners
   so only the medallion is visible (no white square halo). */
.hero-crest {
  width: 100%;
  max-width: 540px;
  height: auto;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 18px 44px rgba(58,63,64,0.18));
}
/* Hero-logo: small medallion above the eyebrow on hero-left. Same circular
   clip + drop-shadow as the crest for visual coherence. */
.hero-logo {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 0 10px 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 6px 16px rgba(58,63,64,0.14));
}
.hero-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2.6px;
  color: var(--brand-red);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-tag::before { content: ''; width: 22px; height: 2px; background: var(--brand-red); }

.hero-title {
  font-size: 66px;
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 28px;
  letter-spacing: -1.6px;
}
.hero-title .accent { color: var(--brand-red); }

.hero-desc {
  font-size: 19px;
  line-height: 1.7;
  color: var(--brand-grey);
  max-width: 640px;
  margin-bottom: 38px;
}

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-creds {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule, #E1E3E4);
  display: flex;
  gap: 22px 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hero-creds span { display: inline-flex; align-items: center; gap: 8px; }
.hero-creds span::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Hero visual — secure-element illustration (SVG asset) */
.hero-visual-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(58,63,64,0.14));
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: all .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-dark); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(227,34,42,0.22); }
.btn-dark { background: var(--brand-dark); color: #fff; }
.btn-dark:hover { background: var(--brand-red); }
.btn-outline { background: transparent; color: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand-dark); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-red); color: var(--brand-red); }
.btn-small { padding: 10px 18px; font-size: 12.5px; }
/* Tertiary text-only CTA: same typographic rhythm as .btn but no fill or
   border. Use for low-emphasis hero/section actions like "Browse
   resources →" alongside a filled primary and outlined secondary. */
.btn-text {
  background: transparent;
  color: var(--ink, #3A3F40);
  border-color: transparent;
  padding-left: 6px;
  padding-right: 6px;
}
.btn-text:hover {
  background: transparent;
  color: var(--brand-red, #E3222A);
}

/* =========================================================
   SECTIONS
   ========================================================= */
section { padding: var(--pad-section); }
section.alt { background: var(--brand-soft); }
section.dark { background: var(--brand-dark); color: #fff; }
section.dark .section-title, section.dark h3 { color: #fff; }
section.dark .section-desc, section.dark p { color: #c9cccd; }

.section-container { max-width: var(--maxw-section); margin: auto; }
.section-narrow { max-width: 1000px; margin: auto; }

.section-head { text-align: center; margin-bottom: 60px; }
.section-head.left { text-align: left; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 2.6px;
  color: var(--brand-red-dark);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.section-line {
  width: 60px;
  height: 3px;
  background: var(--brand-red);
  margin: 14px auto 22px;
}
.section-head.left .section-line { margin-left: 0; }

.section-desc {
  font-size: var(--fs-body);
  color: var(--brand-grey);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
}
.section-head.left .section-desc { margin: 0; }

/* =========================================================
   GRIDS / CARDS
   ========================================================= */
/* Phase 21 — grid system, second pass.
   `.grid-N` is now a flex wrap with a centred last row by default. Full
   rows render identically to the previous CSS Grid layout (each item is
   `(100% - (N-1)*gap) / N` wide). Orphans in the final row land in the
   centre — no per-page opt-in needed. */
.grid-2, .grid-3, .grid-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.grid-2 { gap: 28px; }
.grid-3 { gap: 24px; }
.grid-4 { gap: 22px; }

.grid-2 > * { flex: 1 1 calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); min-width: 0; }
.grid-3 > * { flex: 1 1 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); min-width: 0; }
.grid-4 > * { flex: 1 1 calc((100% - 66px) / 4); max-width: calc((100% - 66px) / 4); min-width: 0; }

/* `.is-centered` is preserved as a no-op alias for back-compat. */
.grid-2.is-centered, .grid-3.is-centered, .grid-4.is-centered {}

/* Phase 19 — standards evolution timeline */
.timeline {
  position: relative;
  margin: 32px 0 48px;
  padding-left: 40px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-red) 0%, var(--brand-red) 50%, #C8CACC 100%);
  opacity: 0.6;
}
.timeline-entry {
  position: relative;
  padding: 0 0 28px 24px;
}
.timeline-entry::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(227,34,42,0.18);
}
.timeline-entry .tl-year {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--brand-grey);
  font-weight: 600;
  margin-bottom: 4px;
}
.timeline-entry h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.1px;
}
.timeline-entry p {
  font-size: 14px;
  color: var(--brand-grey);
  line-height: 1.65;
  margin: 0;
}
.timeline-entry .tl-refs {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--secure-cyan-dark);
}
.timeline-entry .tl-refs a {
  color: var(--secure-cyan-dark);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.timeline-entry .tl-refs a:hover { color: var(--brand-red); border-bottom-color: var(--brand-red); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius-card);
  transition: all .25s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 36px;
  height: 3px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(58,63,64,0.08);
  border-color: #d8d8da;
}
.card:hover::before { transform: scaleX(1); }

.card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
}
.card p { color: var(--brand-grey); font-size: 15px; line-height: 1.7; }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(227,34,42,0.08);
  color: var(--brand-red-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}
.card-icon.cyan { background: var(--secure-cyan-soft); color: var(--secure-cyan-dark); }

.card-meta {
  margin-top: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: var(--brand-red-dark);
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Card-meta tag spans use inline opacity:0.55 sitewide. That drops effective
   contrast below WCAG AA on white. Override to opaque brand-grey so axe
   color-contrast passes; the tag pills stay visually subordinate to the
   red "Read article →" lead-in via colour rather than opacity. */
.card-meta span[style*="opacity"] {
  opacity: 1 !important;
  color: var(--brand-grey);
}

.card-soft {
  background: var(--card);
  padding: 30px;
  border-radius: var(--radius-card);
  transition: all .25s ease;
}
.card-soft:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(58,63,64,0.08); }

/* Feature row */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse > :first-child { order: 2; }

.feature-visual {
  background: var(--card);
  border-radius: 8px;
  padding: 40px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-grey);
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.feature-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, rgba(227,34,42,0.06) 49.5%, rgba(227,34,42,0.06) 50.5%, transparent 50.5%);
  background-size: 14px 14px;
  pointer-events: none;
}
.feature-visual > * { position: relative; }
.feature-visual.feature-visual-img {
  padding: 0;
  background: transparent;
  border: none;
  min-height: 0;
}
.feature-visual.feature-visual-img::before { content: none; }
.feature-visual.feature-visual-img img {
  width: 100%;
  height: auto;
  max-width: 520px;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 14px 30px rgba(58,63,64,0.12));
}

/* =========================================================
   STATS
   ========================================================= */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.stat {
  text-align: center;
  padding: 24px 12px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }
.stat-num { font-size: 32px; font-weight: 700; color: var(--brand-red); }
.stat-label { font-size: 13px; color: var(--brand-grey); margin-top: 8px; letter-spacing: 0.3px; font-family: 'Montserrat', sans-serif; }

/* =========================================================
   ARCHITECTURE / TRUST CHAIN
   ========================================================= */
.arch {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  justify-content: center;
  margin: 30px auto;
  max-width: 1100px;
}
.arch-node {
  flex: 1 1 160px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
  margin: 8px;
  min-width: 160px;
}
.arch-node h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}
.arch-node p { font-size: 12px; color: var(--brand-grey); line-height: 1.5; }
.arch-node.accent { border-color: var(--brand-red); background: #fff8f8; }
.arch-node .arch-tag {
  position: absolute;
  top: 8px; left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
}
.arch-arrow {
  align-self: center;
  color: var(--brand-red);
  font-size: 22px;
  font-weight: 700;
}

/* Trust chain (vertical stack diagram) */
.trust-chain {
  max-width: 720px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.trust-chain .layer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.trust-chain .layer .layer-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.trust-chain .layer .layer-tag {
  font-size: 11px;
  color: var(--secure-cyan-dark);
  background: var(--secure-cyan-soft);
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.trust-chain .layer.root {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.trust-chain .layer.root .layer-name { color: #fff; }
.trust-chain .layer.root .layer-tag { background: rgba(255,255,255,0.12); color: #fff; }

/* =========================================================
   CALLOUT
   ========================================================= */
.callout {
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 56px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, rgba(227,34,42,0.10) 49.5%, rgba(227,34,42,0.10) 50.5%, transparent 50.5%);
  background-size: 16px 16px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 50% 100% at 100% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 100% 50%, black, transparent 80%);
}
.callout > * { position: relative; }
.callout h2 { font-size: 26px; font-weight: 700; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; letter-spacing: -0.3px; color: #fff; }
.callout p { color: #c9cccd; max-width: 620px; font-size: 15px; line-height: 1.7; }

/* =========================================================
   LISTS
   ========================================================= */
.bullet-list { list-style: none; padding: 0; }
.bullet-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--brand-grey);
  line-height: 1.7;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.bullet-list li:last-child { border-bottom: none; }
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 19px;
  width: 8px;
  height: 8px;
  background: var(--brand-red);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Inline keyword "chips" */
.chip {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-block;
}
.chip.cyan { background: var(--secure-cyan-soft); color: var(--secure-cyan-dark); }
.chip.red { background: rgba(227,34,42,0.08); color: var(--brand-red-dark); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* Filter pills */
.pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--brand-dark);
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.pill:hover { border-color: var(--brand-red); color: var(--brand-red); }
.pill.pill--active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

/* =========================================================
   PROSE (blog, About, technical pages)
   ========================================================= */
.prose { max-width: var(--maxw-prose); margin: auto; color: var(--brand-dark); }
.prose h1 { font-family: 'Montserrat', sans-serif; font-size: var(--fs-h1); font-weight: 700; line-height: 1.18; margin-bottom: 18px; color: var(--ink); letter-spacing: -0.6px; }
.prose .dek { font-size: 19px; color: var(--brand-grey); line-height: 1.6; margin-bottom: 8px; }
.prose h2 { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; margin: 44px 0 14px; color: var(--ink); letter-spacing: -0.3px; }
.prose h3 { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; margin: 28px 0 10px; color: var(--ink); }
.prose p { font-size: 16.5px; line-height: 1.85; margin-bottom: 16px; color: var(--brand-grey); }
.prose ul, .prose ol { margin: 10px 0 20px 22px; }
.prose li { font-size: 16.5px; line-height: 1.85; margin-bottom: 8px; color: var(--brand-grey); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  border-left: 3px solid var(--brand-red);
  padding: 8px 18px;
  margin: 22px 0;
  color: var(--brand-grey);
  background: var(--brand-soft);
  border-radius: 0 6px 6px 0;
}
.prose code {
  background: var(--brand-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--brand-red-dark);
}
.prose pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 18px 20px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 18px 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid #1e2026;
}
.prose pre code { background: transparent; color: inherit; padding: 0; font-size: 13.5px; border-radius: 0; }
.prose pre .k { color: var(--code-key); }
.prose pre .c { color: var(--code-comment); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.prose thead { background: var(--brand-soft); }
.prose th, .prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
.prose th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.prose td { color: var(--brand-grey); }
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: none; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 36px 0; }
.prose a { color: var(--brand-red-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-red-dark); }

.post-meta {
  font-size: 13px;
  color: var(--muted-2);
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}
.post-meta span + span::before { content: '\00b7'; margin: 0 8px; color: var(--line); }

/* FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 30px;
  font-family: 'Montserrat', sans-serif;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--brand-red);
  font-size: 22px;
  font-weight: 400;
  transition: transform .2s;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 12px; color: var(--brand-grey); font-size: 15px; line-height: 1.75; }

/* Compact premium accordion (.faq-q) — used by homepage FAQ, deck transcript,
   product FAQs and CRA blog FAQs. Carded, contained, chevron disclosure. */
.faq-q {
  max-width: 860px;
  margin: 10px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.faq-q[open] { border-color: #d8d8da; box-shadow: 0 6px 18px rgba(58,63,64,.06); }
.faq-q summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.faq-q summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--brand-grey);
  border-bottom: 2px solid var(--brand-grey);
  transform: rotate(45deg);
  transition: transform .2s, border-color .15s;
  margin-top: -3px;
}
.faq-q[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq-q summary:hover h3 { color: var(--brand-red); }
.faq-q summary:hover::after { border-color: var(--brand-red); }
.faq-q .faq-a { padding: 0 20px 16px; }
.faq-q .faq-a p { margin: 0; color: var(--brand-grey); font-size: 14.5px; line-height: 1.7; }
.faq-q .faq-a p + p { margin-top: 10px; }
.faq-q .faq-a ol, .faq-q .faq-a ul { margin: 0; color: var(--brand-grey); font-size: 14.5px; line-height: 1.7; }
.faq-q .faq-a li { margin: 4px 0; }

/* =========================================================
   BLOG INDEX CARD
   ========================================================= */
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.blog-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 36px;
  height: 3px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(58,63,64,0.08);
  border-color: #d8d8da;
}
.blog-card:hover::before { transform: scaleX(1); }
.blog-card .chip { background: rgba(227,34,42,0.08); color: var(--brand-red-dark); align-self: flex-start; margin-bottom: 14px; }
.blog-card h3 { font-size: 18px; line-height: 1.3; margin-bottom: 10px; color: var(--ink); font-family: 'Montserrat', sans-serif; }
.blog-card p { font-size: 14.5px; color: var(--brand-grey); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.blog-card .read-more { font-size: 13px; font-weight: 600; color: var(--brand-red); text-decoration: none; font-family: 'Montserrat', sans-serif; letter-spacing: 0.3px; }

/* =========================================================
   SPEC TABLE (product detail)
   ========================================================= */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 24px 0;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
.spec-table th {
  width: 30%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.spec-table td { color: var(--brand-grey); font-family: 'JetBrains Mono', monospace; font-size: 13.5px; }

/* =========================================================
   CONTACT FORM
   ========================================================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; margin: 0 auto; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--brand-dark); font-family: 'Montserrat', sans-serif; letter-spacing: 0.3px; }
.form-row input,
.form-row select,
.form-row textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(227,34,42,0.15);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer {
  background: var(--brand-dark);
  color: #c9cccd;
  padding: 70px 80px 30px;
  font-size: 14px;
}
.footer-inner { max-width: var(--maxw-section); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid #4a5051;
}
footer.site-footer h3 {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  font-family: 'Montserrat', sans-serif;
}
footer.site-footer ul { list-style: none; }
footer.site-footer li { margin-bottom: 9px; }
footer.site-footer a { color: #c9cccd; text-decoration: none; transition: color .2s; font-size: 13.5px; }
footer.site-footer a:hover { color: var(--brand-red); }

.footer-brand .brand-line { color: #fff; }
.footer-brand .brand-tag { color: #b4b9bb; }
.footer-brand p { color: #b4b9bb; line-height: 1.65; margin-top: 16px; font-size: 13.5px; }
.footer-ecosystem { margin-top: 18px; font-size: 12px; color: #b4b9bb; font-family: 'Montserrat', sans-serif; letter-spacing: 0.3px; }
.footer-ecosystem a { color: #d8dadb; }

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 12.5px;
  color: #b4b9bb;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #4a5051;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.footer-social a:hover { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .hero-container { flex-direction: column; gap: 50px; }
  .hero-right { width: 100%; max-width: 480px; }
  /* .grid-* use flex (not grid) so we resize via flex-basis on the children
     instead of grid-template-columns. At this breakpoint .grid-4 wraps to
     two-up; .grid-3 already wraps naturally via its basis. */
  .grid-4 > * { flex: 1 1 calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
}

@media (max-width: 880px) {
  .ecosystem-bar-inner { padding: 9px 24px; gap: 14px; font-size: 11.5px; }
  .navbar { padding: 14px 24px; }
  .nav-links { display: none; }
  .nav-actions .btn-ghost { display: none; }
  .hamburger { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: #fff;
    padding: 24px;
    gap: 18px;
    border-bottom: 2px solid var(--brand-red);
    box-shadow: 0 14px 24px rgba(0,0,0,0.08);
  }
  .breadcrumb { padding: 16px 24px 0; }

  section { padding: 70px 24px; }
  .hero { padding: 70px 24px 100px; min-height: 0; }
  .hero-title { font-size: 40px; line-height: 1.12; letter-spacing: -0.6px; }
  .hero-logo { width: 76px; height: 76px; margin-bottom: 18px; }
  .hero-crest { max-width: 320px; }
  .hero-desc { font-size: 16.5px; }
  .hero-creds { font-size: 12px; gap: 16px 18px; }
  .footer-brand .brand-mark { height: 72px; width: 72px; }
  .section-title { font-size: 28px; }

  /* .grid-* use flex — stack to one column on mobile via flex-basis. */
  .grid-2 > *, .grid-3 > *, .grid-4 > * { flex: 1 1 100%; max-width: 100%; }

  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse > :first-child { order: 0; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; border-top: 1px solid var(--line); padding-top: 18px; }

  .callout { flex-direction: column; align-items: flex-start; padding: 36px 28px; }

  footer.site-footer { padding: 50px 24px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }

  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 30px; }
  .prose h1 { font-size: 28px; }
  .prose h2 { font-size: 22px; }
}

/* =========================================================
   FOCUS / REDUCED MOTION
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   PHASE 3: SVG DIAGRAM PRIMITIVES
   Reusable diagram components for DESFire / SAM / transit pages.
   All inline SVG; brand palette via CSS vars.
   ========================================================= */

.diagram {
  margin: 30px auto;
  max-width: 1100px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 24px;
  position: relative;
}
.diagram.alt { background: var(--brand-soft); }
.diagram-caption {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--muted-2);
  margin-top: 16px;
  text-transform: uppercase;
  font-weight: 600;
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram svg text { font-family: 'Source Sans 3', sans-serif; font-size: 12px; fill: var(--ink); }
.diagram svg .lbl-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: var(--brand-dark); }
.diagram svg .lbl-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  fill: var(--brand-dark);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.diagram svg .lbl-note {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  fill: var(--brand-grey);
  font-style: italic;
}
.diagram svg .arrow { stroke: var(--brand-dark); stroke-width: 1.5; fill: none; marker-end: url(#arrow-head); }
.diagram svg .arrow-red { stroke: var(--brand-red); stroke-width: 1.8; fill: none; marker-end: url(#arrow-head-red); }
.diagram svg .arrow-cyan { stroke: var(--secure-cyan); stroke-width: 1.8; fill: none; marker-end: url(#arrow-head-cyan); }
.diagram svg .arrow-dashed { stroke-dasharray: 4 3; }
.diagram svg .actor-box { fill: #fff; stroke: var(--brand-dark); stroke-width: 1.5; rx: 4; }
.diagram svg .actor-box.accent { fill: rgba(227,34,42,0.06); stroke: var(--brand-red); }
.diagram svg .actor-box.cyan { fill: var(--secure-cyan-soft); stroke: var(--secure-cyan); }
.diagram svg .actor-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.diagram svg .layer { stroke: var(--brand-dark); stroke-width: 1.5; rx: 4; }
.diagram svg .layer.l1 { fill: #fff; }
.diagram svg .layer.l2 { fill: var(--brand-soft); }
.diagram svg .layer.l3 { fill: var(--secure-cyan-soft); stroke: var(--secure-cyan); }
.diagram svg .layer.root { fill: var(--brand-dark); }
.diagram svg .layer.root text { fill: #fff; }
.diagram svg .key { fill: var(--brand-red); }
.diagram svg .key-soft { fill: rgba(227,34,42,0.10); stroke: var(--brand-red); rx: 3; }
.diagram svg .trust-zone {
  fill: rgba(14,140,156,0.05);
  stroke: var(--secure-cyan);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  rx: 6;
}
.diagram svg .trust-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  fill: var(--secure-cyan-dark);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (max-width: 880px) {
  .diagram { padding: 18px 12px; margin: 24px 0; }
}

/* Inline architecture-cards row used inside detail pages */
.arch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.arch-row .arch-cell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  position: relative;
}
.arch-row .arch-cell.accent { border-left: 3px solid var(--brand-red); }
.arch-row .arch-cell.cyan   { border-left: 3px solid var(--secure-cyan); }
.arch-row .arch-cell .arch-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--muted-2);
  display: block;
  margin-bottom: 4px;
}
.arch-row .arch-cell h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 6px;
}
.arch-row .arch-cell p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  color: var(--brand-grey);
  line-height: 1.55;
  margin: 0;
}

/* APDU step list — used in flow blog posts */
.apdu-flow {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 6px;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  margin: 18px 0 22px;
  overflow-x: auto;
}
.apdu-flow .step { color: #b0b3b8; display: block; margin-top: 8px; }
.apdu-flow .step:first-child { margin-top: 0; }
.apdu-flow .arrow-out { color: var(--brand-red); }
.apdu-flow .arrow-in { color: var(--secure-cyan-dark); }
.apdu-flow .cmt { color: #6c7179; font-style: italic; }

/* =========================================================
   PHASE 4: DOCUMENTATION PORTAL PRIMITIVES
   Reusable layout shell for /docs-style pages (left nav, TOC,
   versioned content, copy-able code blocks). Used today on
   /resources/webauthn/, planned for docs.ambimat.com lift-out.
   ========================================================= */

.docs-shell {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 30px 60px 60px;
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 40px;
  align-items: start;
}
.docs-shell.no-toc { grid-template-columns: 240px 1fr; }
.docs-shell.no-nav { grid-template-columns: 1fr 220px; padding-left: 80px; }

.docs-nav {
  position: sticky;
  top: 80px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  border-right: 1px solid var(--line);
  padding-right: 18px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-nav h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--brand-dark);
  margin: 18px 0 8px;
  font-weight: 700;
}
.docs-nav h4:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; padding: 0; margin: 0; }
.docs-nav li { margin-bottom: 4px; }
.docs-nav a {
  display: block;
  padding: 6px 10px;
  color: var(--brand-grey);
  text-decoration: none;
  border-radius: 3px;
  font-weight: 500;
  border-left: 2px solid transparent;
}
.docs-nav a:hover { color: var(--brand-red); background: var(--brand-soft); }
.docs-nav a.active { color: var(--brand-red); border-left-color: var(--brand-red); background: rgba(227,34,42,0.04); }

.docs-toc {
  position: sticky;
  top: 80px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-toc h4 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--brand-dark);
  margin-bottom: 10px;
  font-weight: 700;
}
.docs-toc ul { list-style: none; padding: 0; margin: 0; }
.docs-toc li { margin-bottom: 6px; line-height: 1.4; }
.docs-toc li.l3 { padding-left: 12px; }
.docs-toc a {
  color: var(--brand-grey);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.docs-toc a:hover { color: var(--brand-red); }

.docs-content {
  min-width: 0;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--ink);
  line-height: 1.7;
}
.docs-content > h1:first-child { margin-top: 0; }
.docs-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 6px 0 16px;
}
.docs-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 50px 0 14px;
  color: var(--ink);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.docs-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 30px; }
.docs-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 30px 0 10px;
  color: var(--ink);
}
.docs-content h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.docs-content p { font-size: 16px; line-height: 1.75; margin-bottom: 14px; color: var(--brand-grey); }
.docs-content ul, .docs-content ol { margin: 8px 0 18px 22px; }
.docs-content li { font-size: 16px; line-height: 1.75; margin-bottom: 6px; color: var(--brand-grey); }
.docs-content strong { color: var(--ink); font-weight: 700; }
.docs-content a { color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.docs-content a:hover { color: var(--brand-red-dark); }

.docs-content .anchor-link {
  margin-left: 8px;
  color: var(--muted-2);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  font-size: 0.7em;
  transition: opacity .15s ease;
}
.docs-content h1:hover .anchor-link,
.docs-content h2:hover .anchor-link,
.docs-content h3:hover .anchor-link,
.docs-content h4:hover .anchor-link { opacity: 1; }

/* docs-style code block with copy */
.code-block {
  position: relative;
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 6px;
  margin: 18px 0 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  border: 1px solid #2a2d33;
  overflow: hidden;
}
.code-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #1c1f24;
  border-bottom: 1px solid #2a2d33;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: #aab0b8;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}
.code-block pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: inherit;
  font-size: 13px;
  background: transparent;
  color: var(--code-fg);
  line-height: 1.65;
}
.code-block .copy-code {
  background: transparent;
  border: 1px solid #3b4047;
  color: #b0b6bd;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
}
.code-block .copy-code:hover { color: #fff; border-color: #5b626a; }
.code-block pre .k { color: #FF8A8A; }
.code-block pre .s { color: #93D2A4; }
.code-block pre .n { color: #FFC07A; }
.code-block pre .c { color: var(--code-comment); font-style: italic; }
.code-block pre .p { color: #6FCEDB; }

/* docs version banner */
.version-banner {
  background: var(--secure-cyan-soft);
  border: 1px solid #bfe1e6;
  border-left: 3px solid var(--secure-cyan);
  padding: 10px 16px;
  margin: 14px 0 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--secure-cyan-dark);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.version-banner .vb-tag {
  background: var(--secure-cyan);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
}
.version-banner .vb-meta { color: var(--brand-grey); font-weight: 500; font-size: 12.5px; }

/* expandable reference block */
.ref-block {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 18px 0;
  background: #fff;
}
.ref-block summary {
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
}
.ref-block summary::-webkit-details-marker { display: none; }
.ref-block summary::after {
  content: '+';
  font-size: 18px;
  color: var(--brand-grey);
  margin-left: 12px;
}
.ref-block[open] summary::after { content: '\2212'; }
.ref-block summary:hover { color: var(--brand-red); }
.ref-block .ref-body { padding: 0 16px 16px; font-size: 14.5px; color: var(--brand-grey); line-height: 1.65; }
.ref-block .ref-body p { color: var(--brand-grey); }

/* docs sequence-flow utility (used inline in docs) */
.seq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.seq-grid .seq-step {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--secure-cyan);
  padding: 12px 14px;
  border-radius: 4px;
}
.seq-grid .seq-step .seq-n {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--secure-cyan-dark);
  font-weight: 700;
  text-transform: uppercase;
}
.seq-grid .seq-step .seq-h {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 6px;
}
.seq-grid .seq-step p {
  font-size: 13px;
  color: var(--brand-grey);
  margin: 0;
  line-height: 1.55;
}

/* annotated JSON / CBOR block (for protocol struct illustration) */
.annot-struct {
  font-family: 'JetBrains Mono', monospace;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.7;
  margin: 16px 0;
  color: var(--ink);
  overflow-x: auto;
}
.annot-struct .as-key { color: var(--brand-red-dark); font-weight: 600; }
.annot-struct .as-str { color: #1F6E3B; }
.annot-struct .as-num { color: #9A5E00; }
.annot-struct .as-cmt {
  color: var(--brand-grey);
  font-family: 'Source Sans 3', sans-serif;
  font-style: italic;
  font-size: 12.5px;
  margin-left: 8px;
}
.annot-struct .as-tag {
  display: inline-block;
  background: var(--secure-cyan-soft);
  color: var(--secure-cyan-dark);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Phase 4: passkey flow visualizer (CSS-only state diagram) */
.flow-viz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}
.flow-viz .fv-actor {
  background: #fff;
  border: 1.5px solid var(--brand-dark);
  border-radius: 6px;
  padding: 14px 16px;
  text-align: center;
}
.flow-viz .fv-actor.cyan { border-color: var(--secure-cyan); background: var(--secure-cyan-soft); }
.flow-viz .fv-actor.red { border-color: var(--brand-red); background: rgba(227,34,42,0.05); }
.flow-viz .fv-actor h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.flow-viz .fv-actor .fv-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.flow-viz .fv-actor p {
  font-size: 12.5px;
  color: var(--brand-grey);
  margin: 0;
  line-height: 1.5;
}

/* Responsive docs */
@media (max-width: 1080px) {
  .docs-shell { grid-template-columns: 200px 1fr; gap: 28px; padding: 24px 32px 50px; }
  .docs-toc { display: none; }
}
@media (max-width: 720px) {
  .docs-shell { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px 40px; }
  .docs-nav {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 14px;
    max-height: none;
  }
  .flow-viz { grid-template-columns: 1fr; }
}

/* Phase 4 visual: passkey-card / fido-card landing-page tiles.
   Phase 21: flex-wrap with centred last row, hard-capped at 4 per row. */
.fido-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin: 24px 0;
}
.fido-grid > * {
  flex: 1 1 calc((100% - 54px) / 4);
  max-width: calc((100% - 54px) / 4);
  min-width: 220px;
}
@media (max-width: 720px) {
  .fido-grid > * { flex: 1 1 100%; max-width: 100%; }
}
.fido-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
}
.fido-card .fc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--secure-cyan-dark);
  background: var(--secure-cyan-soft);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 8px;
}
.fido-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.fido-card p { font-size: 13.5px; color: var(--brand-grey); margin: 0; line-height: 1.55; }
.fido-card ul { margin: 8px 0 0 18px; padding: 0; }
.fido-card li { font-size: 13px; color: var(--brand-grey); line-height: 1.55; }

/* =========================================================
   PHASE 5: SEARCHABLE REFERENCE SYSTEM
   Used on /references/ and /references/<slug>/.
   ========================================================= */

.ref-shell {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 30px 80px 60px;
}

.ref-search-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.ref-search-bar input[type="search"],
.ref-search-bar input[type="text"] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  padding: 6px 0;
}
.ref-search-bar input[type="search"]::placeholder,
.ref-search-bar input[type="text"]::placeholder { color: var(--muted-2); }
.ref-search-bar select {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  background: #fff;
  color: var(--brand-dark);
  cursor: pointer;
}
.ref-search-bar .ref-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-grey);
  white-space: nowrap;
}

.ref-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13.5px;
}
.ref-table thead {
  background: var(--brand-soft);
  position: sticky;
  top: 0;
}
.ref-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--brand-dark);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.ref-table td {
  padding: 11px 16px;
  border-bottom: 1px dashed var(--line);
  vertical-align: top;
  color: var(--ink);
}
.ref-table tbody tr:last-child td { border-bottom: none; }
.ref-table tbody tr:hover { background: var(--brand-soft); }
.ref-table tbody tr.ref-row-anchored { background: rgba(227,34,42,0.04); }
.ref-table .ref-key {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--brand-red-dark);
  white-space: nowrap;
}
.ref-table .ref-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--muted-2);
  text-transform: uppercase;
}
.ref-table .ref-detail { color: var(--brand-grey); font-size: 12.5px; line-height: 1.55; }
.ref-table .ref-anchor-link {
  color: var(--muted-2);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ref-table tbody tr:hover .ref-anchor-link { opacity: 1; }
.ref-table .ref-copy-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand-grey);
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
}
.ref-table .ref-copy-btn:hover { color: var(--brand-red); border-color: var(--brand-red); }

.ref-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted-2);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-style: italic;
}

.ref-callout {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--secure-cyan);
  background: var(--secure-cyan-soft);
  color: var(--brand-grey);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
}

.ref-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.ref-tag-filter button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand-grey);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.ref-tag-filter button:hover { color: var(--brand-red); border-color: var(--brand-red); }
.ref-tag-filter button.active { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }

/* References landing page */
/* Phase 21: flex-wrap, max 3 columns, centred last row. */
.ref-grid-landing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin: 24px 0;
}
.ref-grid-landing > * {
  flex: 1 1 calc((100% - 36px) / 3);
  max-width: calc((100% - 36px) / 3);
  min-width: 260px;
}
@media (max-width: 720px) {
  .ref-grid-landing > * { flex: 1 1 100%; max-width: 100%; }
}
.ref-landing-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px 22px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s;
}
.ref-landing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(58,63,64,0.08);
  border-color: #d8d8da;
}
.ref-landing-card .rl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--secure-cyan-dark);
  background: var(--secure-cyan-soft);
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 600;
}
.ref-landing-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.ref-landing-card p { font-size: 13.5px; color: var(--brand-grey); margin: 0; line-height: 1.55; }
.ref-landing-card .rl-count {
  margin-top: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-red);
  font-weight: 600;
}

/* Featured tools / start-here strip (Phase 5 site-wide UX) */
.featured-strip {
  background: var(--brand-soft);
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.featured-strip-inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 80px;
}
.featured-strip h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 16px;
  font-weight: 700;
}
.featured-strip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.featured-strip-row a {
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 4px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s;
}
.featured-strip-row a:hover { border-color: var(--brand-red); transform: translateY(-1px); }
.featured-strip-row .fs-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--secure-cyan-dark);
  background: var(--secure-cyan-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  flex-shrink: 0;
}
.featured-strip-row .fs-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Start Here band */
.start-here {
  background: linear-gradient(180deg, #fff, var(--brand-soft));
  padding: 60px 0;
}
.start-here-inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 80px;
}
.start-here h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.start-here .sh-dek {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  color: var(--brand-grey);
  max-width: 720px;
  margin-bottom: 28px;
  line-height: 1.65;
}
.start-here-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.sh-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.sh-card:hover { border-color: var(--brand-red); }
.sh-card .sh-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--brand-red);
  font-weight: 700;
  margin-bottom: 10px;
}
.sh-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.sh-card p { font-size: 13.5px; color: var(--brand-grey); margin: 0 0 12px; line-height: 1.55; }
.sh-card .sh-go {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-red);
  letter-spacing: 0.3px;
}

/* Procurement-friendly comparison table */
.proc-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
}
.proc-table thead { background: var(--brand-dark); }
.proc-table th {
  text-align: left;
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}
.proc-table td {
  padding: 12px 18px;
  border-bottom: 1px dashed var(--line);
  color: var(--brand-dark);
  vertical-align: top;
}
.proc-table tbody tr:last-child td { border-bottom: none; }
.proc-table tbody tr:nth-child(even) { background: var(--brand-soft); }
.proc-table .pt-yes { color: #1F6E3B; font-weight: 700; }
.proc-table .pt-no { color: var(--brand-red-dark); font-weight: 700; }
.proc-table .pt-feature {
  font-weight: 600;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
}

@media (max-width: 880px) {
  .ref-shell { padding: 18px 24px 40px; }
  .ref-search-bar { grid-template-columns: 1fr; }
  .featured-strip-inner { padding: 0 24px; }
  .start-here-inner { padding: 0 24px; }
  .ref-table { font-size: 12.5px; }
  .ref-table th, .ref-table td { padding: 10px 12px; }
  .proc-table { font-size: 13px; }
  .proc-table th, .proc-table td { padding: 10px 12px; }
}

/* =========================================================
   PHASE 9: Video platform
   YouTube facade, video grid, video cards, and inline player.
   ========================================================= */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 12px;
}

.video-card {
  background: var(--soft, #F4F5F6);
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-color: var(--brand-red, #E3222A);
}

.video-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.video-card-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0 0 4px 0;
  line-height: 1.35;
}
.video-card-meta {
  display: flex;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--brand-grey, #616A6C);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.video-card-desc {
  font-size: 14px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.6;
  margin: 0;
}
.video-card-cta {
  font-size: 13px;
  color: var(--brand-red-dark, #B81A21);
  font-weight: 600;
  text-decoration: none;
  margin-top: 6px;
}
.video-card-cta:hover { text-decoration: underline; }

/* YouTube facade (click-to-play) */
.yt-facade {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.yt-facade-poster {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease, transform .25s ease;
}
.yt-facade:hover .yt-facade-poster {
  opacity: .85;
  transform: scale(1.02);
}
.yt-facade-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(227, 34, 42, 0.92);
  color: white;
  border: 0;
  font-size: 24px;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  transition: background .2s ease, transform .2s ease;
}
.yt-facade-play:hover {
  background: rgba(227, 34, 42, 1);
  transform: translate(-50%, -50%) scale(1.08);
}
.yt-facade-play:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

/* Self-hosted inline video */
.video-self-hosted {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* Video group header (used on /videos/ landing) */
.video-group {
  margin-top: 48px;
}
.video-group:first-of-type { margin-top: 12px; }
.video-group-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.video-group-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0;
}
.video-group-header .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-grey, #616A6C);
  letter-spacing: .4px;
}

@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; gap: 20px; }
  .video-group-header h2 { font-size: 19px; }
  .yt-facade-play { width: 56px; height: 56px; font-size: 20px; }
}

/* =========================================================
   PHASE 9: Pillars row on home page
   ========================================================= */
.pillars-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.pillars-grid > .pillar-card {
  flex: 1 1 calc((100% - 42px) / 4);
  max-width: calc((100% - 42px) / 4);
  min-width: 220px;
}
@media (max-width: 880px) {
  .pillars-grid > .pillar-card {
    flex: 1 1 calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
}
@media (max-width: 540px) {
  .pillars-grid > .pillar-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.pillar-card {
  background: white;
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--brand-red, #E3222A);
  border-radius: 6px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink, #3A3F40);
  transition: border-color .2s ease, transform .2s ease;
}
.pillar-card:hover {
  transform: translateY(-2px);
  border-left-color: var(--secure-cyan, #0E8C9C);
}
.pillar-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.pillar-card p {
  font-size: 13px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.55;
  margin: 0;
}

/* ===== Phase 10 — Brochures ===== */
.brochure-page {
  max-width: 1100px;
  margin: 0 auto;
}
.brochure-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule, #E1E3E4);
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.brochure-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 12px;
}
.brochure-print a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--brand-grey, #616A6C);
  text-decoration: none;
  border: 1px solid var(--rule, #E1E3E4);
  padding: 5px 10px;
  border-radius: 4px;
}
.brochure-print a:hover {
  color: var(--brand-red, #E3222A);
  border-color: var(--brand-red, #E3222A);
}
.brochure-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  line-height: 1.2;
  margin: 8px 0 14px 0;
}
.brochure-dek {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-grey, #616A6C);
  max-width: 900px;
}
section.brochure {
  padding-top: 0;
}
.brochure-body {
  max-width: 1100px;
  padding-top: 10px;
  padding-bottom: 40px;
}
.brochure-section {
  padding: 18px 0 22px;
  border-bottom: 1px dashed var(--rule, #E1E3E4);
}
.brochure-section:last-child {
  border-bottom: none;
}
.brochure-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--brand-dark, #3A3F40);
}
.brochure-section ul, .brochure-section ol {
  margin: 0 0 6px 0;
  padding-left: 22px;
}
.brochure-section li {
  margin-bottom: 6px;
  line-height: 1.55;
}
.brochure-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.brochure-section table th,
.brochure-section table td {
  text-align: left;
  border-bottom: 1px solid var(--rule, #E1E3E4);
  padding: 8px 10px;
  vertical-align: top;
}
.brochure-section table th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  background: #FAFAFA;
}
.brochure-cta {
  background: #FAFAFA;
  padding: 18px 20px;
  border-radius: 6px;
  border-bottom: none;
}

/* Print: collapse navigation, ecosystem bar, footer; flatten section padding. */
@media print {
  .ecosystem-bar,
  .navbar,
  .breadcrumb,
  .skip-link,
  .site-footer,
  .brochure-print {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }
  section.brochure {
    padding: 0 !important;
  }
  .brochure-body {
    padding: 0 !important;
  }
  .brochure-head {
    border-bottom: 2px solid #000;
  }
  .brochure-title {
    font-size: 24pt;
  }
  .brochure-section {
    page-break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: none;
  }
  a[href^="/"]::after,
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

/* ===== Phase 11 — Search, tags, analytics prefs ===== */

/* Visually-hidden util for accessible labels */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Search */
.search-shell {
  max-width: 720px;
  margin: 0 auto 16px;
}
.search-shell input[type="search"] {
  width: 100%;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  padding: 14px 18px;
  border: 1.5px solid var(--rule, #E1E3E4);
  border-radius: 6px;
  outline: none;
  background: white;
  transition: border-color .2s ease;
}
.search-shell input[type="search"]:focus {
  border-color: var(--secure-cyan, #0E8C9C);
}
.search-hint {
  font-size: 13px;
  color: var(--brand-grey, #616A6C);
  margin: 10px 0 0;
}
.blog-search-results {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 900px;
  display: grid;
  gap: 16px;
}
.blog-search-hit {
  background: white;
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--brand-red, #E3222A);
  border-radius: 6px;
  padding: 16px 20px;
  transition: border-color .2s ease;
}
.blog-search-hit:hover {
  border-left-color: var(--secure-cyan, #0E8C9C);
}
.blog-search-hit-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-grey, #616A6C);
  margin-bottom: 4px;
}
.blog-search-hit-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark, #3A3F40);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.blog-search-hit-title:hover {
  color: var(--brand-red, #E3222A);
}
.blog-search-hit-summary {
  color: var(--brand-grey, #616A6C);
  font-size: 14px;
  margin: 0 0 8px 0;
  line-height: 1.55;
}
.blog-search-hit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blog-search-hit-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-decoration: none;
  color: var(--brand-grey, #616A6C);
  background: #FAFAFA;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 999px;
  padding: 3px 10px;
}
.blog-search-hit-tag:hover {
  color: var(--brand-red, #E3222A);
  border-color: var(--brand-red, #E3222A);
}
.blog-search-empty {
  text-align: center;
  color: var(--brand-grey, #616A6C);
  font-style: italic;
  padding: 24px 0;
}

/* Sitewide search page — grouped results */
.sitewide-search-results {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sitewide-search-group {
  margin-top: 14px;
}
.sitewide-search-group:first-child { margin-top: 0; }
.sitewide-search-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-red, #E3222A);
  display: inline-block;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--rule, #E1E3E4);
  width: 100%;
}
.sitewide-search-item a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--brand-red, #E3222A);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease;
}
.sitewide-search-item a:hover {
  border-left-color: var(--secure-cyan, #0E8C9C);
}
.sitewide-search-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin-bottom: 4px;
}
.sitewide-search-desc {
  display: block;
  font-size: 13.5px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.55;
}
.sitewide-search-empty {
  list-style: none;
  text-align: center;
  color: var(--brand-grey, #616A6C);
  padding: 24px 0;
  font-size: 14.5px;
}
.sitewide-search-empty strong { color: var(--ink, #3A3F40); }
.sitewide-search-type {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-grey, #616A6C);
  background: var(--wash, #F3F5F6);
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.sitewide-search-title mark,
.sitewide-search-desc mark,
.ask-result mark {
  background: rgba(227, 34, 42, 0.16);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* Search suggestion chips (key topics) */
.search-suggest {
  margin: 18px auto 0;
  max-width: 920px;
}
.search-suggest-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-grey, #616A6C);
  margin-bottom: 8px;
}
.search-suggest-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-suggest-chips a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #3A3F40);
  background: #fff;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 16px;
  padding: 5px 13px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.search-suggest-chips a:hover,
.search-suggest-chips a:focus-visible {
  border-color: var(--brand-red, #E3222A);
  color: var(--brand-red, #E3222A);
}

/* "Ask AmbiSecure" non-AI discovery assistant */
.ask-section { padding-top: 10px; }
.ask-assistant {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 10px;
  padding: 26px 26px 28px;
  background: var(--wash, #F7F8F9);
}
.ask-title { margin: 6px 0 6px; }
.ask-intro {
  color: var(--brand-grey, #616A6C);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 60ch;
}
.ask-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ask-input {
  flex: 1 1 320px;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #3A3F40);
}
.ask-input:focus-visible {
  outline: 2px solid var(--secure-cyan, #0E8C9C);
  outline-offset: 1px;
}
.ask-submit { flex: 0 0 auto; }
.ask-disclaimer {
  font-size: 12.5px;
  color: var(--brand-grey, #616A6C);
  margin: 10px 0 0;
  font-style: italic;
}
.ask-response { margin-top: 18px; }
.ask-response:empty { margin-top: 0; }
.ask-lead {
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0 0 10px;
}
.ask-group { margin-bottom: 16px; }
.ask-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-red, #E3222A);
  margin: 0 0 8px;
}
.ask-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ask-result a {
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--secure-cyan, #0E8C9C);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease;
}
.ask-result a:hover { border-left-color: var(--brand-red, #E3222A); }
.ask-result-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
}
.ask-result-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.5;
}
.ask-topics {
  margin-top: 24px;
  border-top: 1px solid var(--rule, #E1E3E4);
  padding-top: 18px;
}
.ask-topics-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-grey, #616A6C);
  margin: 0 0 14px;
}
.ask-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 26px;
}
.ask-topic h4 {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--ink, #3A3F40);
}
.ask-topic ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ask-topic a {
  font-size: 13.5px;
  color: var(--secure-cyan-ink, #0B6F7C);
  text-decoration: none;
}
.ask-topic a:hover { text-decoration: underline; }

/* Tag cloud */
.tag-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.tag-card {
  display: block;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--brand-red, #E3222A);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink, #3A3F40);
  transition: border-color .2s ease, transform .2s ease;
}
.tag-card:hover {
  transform: translateY(-2px);
  border-left-color: var(--secure-cyan, #0E8C9C);
}
.tag-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px 0;
}
.tag-card p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--brand-grey, #616A6C);
  margin: 0;
}

/* Analytics prefs */
.analytics-prefs {
  background: white;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 6px;
  padding: 22px 26px;
  max-width: 720px;
}
.analytics-prefs h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.analytics-prefs-status {
  font-size: 14.5px;
  color: var(--brand-dark, #3A3F40);
  margin: 0 0 8px 0;
}
.analytics-prefs-dnt {
  font-size: 13px;
  color: var(--secure-cyan, #0E8C9C);
  margin: 0 0 12px 0;
}
.analytics-prefs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.analytics-prefs-row button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.analytics-prefs-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--brand-grey, #616A6C);
  margin: 14px 0 0 0;
}

/* ===== Phase 12 — Search groups, popular searches ===== */
.blog-search-group-header {
  list-style: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--secure-cyan, #0E8C9C);
  padding: 18px 4px 6px;
  margin: 8px 0 4px;
  border-bottom: 1px dashed var(--rule, #E1E3E4);
}
.blog-search-meta-section {
  list-style: none;
  padding: 16px 4px;
  margin: 8px 0 0;
}
.blog-search-meta-section h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-grey, #616A6C);
  margin: 0 0 10px 0;
}
.blog-search-popular {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-search-popular-link {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-decoration: none;
  color: var(--brand-dark, #3A3F40);
  background: white;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 999px;
  padding: 5px 14px;
}
.blog-search-popular-link:hover {
  color: var(--brand-red, #E3222A);
  border-color: var(--brand-red, #E3222A);
}

/* Phase 18 — informational "Coming soon" tiles that look like cards but
   are deliberately non-clickable. Applies to both .card and .resource-card. */
.card.soon-tile,
.resource-card.soon-tile {
  cursor: default;
  opacity: 0.75;
}
.card.soon-tile:hover,
.resource-card.soon-tile:hover {
  transform: none;
  box-shadow: none;
}

/* =========================================================
   PHASE 20 — IN-PAGE TABLE OF CONTENTS FOR LONG-FORM BLOGS
   ========================================================= */
.blog-toc {
  display: none;
}
@media (min-width: 1180px) {
  .blog-toc {
    display: block;
    position: fixed;
    top: 110px;
    right: max(16px, calc((100vw - 1100px) / 2 - 240px));
    width: 220px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    z-index: 5;
  }
}
.blog-toc-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-dark, #3A3F40);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #E1E3E4);
}
.blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-toc-item {
  margin: 0;
  padding: 0;
  line-height: 1.45;
}
.blog-toc-item a {
  display: block;
  padding: 5px 10px;
  color: var(--brand-grey, #616A6C);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.blog-toc-item.lvl-h3 a {
  padding-left: 22px;
  font-size: 12.5px;
}
.blog-toc-item a:hover {
  color: var(--ink, #3A3F40);
  border-left-color: var(--brand-grey, #B0B4B6);
}
.blog-toc-item a.is-current {
  color: var(--brand-red, #E3222A);
  border-left-color: var(--brand-red, #E3222A);
  font-weight: 600;
}

/* =========================================================
   PHASE 21 — SITE-WIDE SEARCH (command-palette)
   ========================================================= */
.as-search {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
}
.as-search.is-open { display: block; }
body.as-search-open { overflow: hidden; }
.as-search-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,22,23,0.50);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: as-fade-in .15s ease-out;
}
@keyframes as-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes as-rise    { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.as-search-panel {
  position: relative;
  margin: 11vh auto 0;
  width: min(640px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(58,63,64,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 56px rgba(20,22,23,0.22),
    0 4px 14px rgba(20,22,23,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  animation: as-rise .18s cubic-bezier(.16,.84,.44,1);
}
.as-search-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #E1E3E4);
}
.as-search-input-icon {
  color: var(--brand-grey, #8C9092);
  display: inline-flex;
}
.as-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: 'Montserrat', 'Source Sans 3', sans-serif;
  font-size: 16px;
  letter-spacing: -0.1px;
  color: var(--ink, #3A3F40);
  background: transparent;
  min-width: 0;
}
.as-search-input::placeholder {
  color: var(--brand-grey, #8C9092);
  font-weight: 500;
}
.as-search-input::-webkit-search-cancel-button { display: none; }
.as-search-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: var(--brand-soft, #F4F5F6);
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--brand-grey, #616A6C);
  border: 1px solid var(--line, #E1E3E4);
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

.as-search-results {
  margin: 0;
  padding: 6px 0 8px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
.as-search-results::-webkit-scrollbar { width: 10px; }
.as-search-results::-webkit-scrollbar-thumb { background: #D8DADC; border-radius: 6px; border: 2px solid #fff; }

.as-search-group {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand-grey, #8C9092);
  padding: 14px 18px 6px;
}
.as-search-group + .as-search-item { margin-top: 0; }

.as-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  margin: 0 6px;
  text-decoration: none;
  color: var(--ink, #3A3F40);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  cursor: pointer;
}
.as-search-item:hover,
.as-search-item.is-active {
  background: var(--brand-soft, #F4F5F6);
  border-color: rgba(227,34,42,0.16);
}
.as-search-item.is-active .as-item-arrow { color: var(--brand-red, #E3222A); transform: translateX(2px); }

.as-item-main { flex: 1; min-width: 0; }
.as-item-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.1px;
  color: var(--ink);
  line-height: 1.25;
}
.as-item-title mark {
  background: rgba(227,34,42,0.14);
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}
.as-item-desc {
  font-size: 12.5px;
  color: var(--brand-grey, #616A6C);
  margin-top: 3px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.as-item-desc mark { background: rgba(227,34,42,0.10); color: inherit; padding: 0 2px; border-radius: 2px; }
.as-item-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.as-item-arrow {
  color: #C8CACC;
  flex-shrink: 0;
  transition: transform .12s ease, color .12s ease;
}

.as-search-empty {
  padding: 28px 22px;
  color: var(--brand-grey, #616A6C);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.as-search-empty strong { color: var(--ink); font-family: 'Montserrat', sans-serif; display: block; margin-bottom: 4px; }
.as-search-empty span { display: block; font-size: 13px; }

.as-search-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--line, #E1E3E4);
  background: var(--brand-soft, #F4F5F6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--brand-grey, #8C9092);
}
.as-search-hints { display: flex; gap: 16px; }
.as-search-hints span { display: inline-flex; align-items: center; gap: 6px; }
.as-search-hints kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: #fff;
  border: 1px solid var(--line, #E1E3E4);
  color: var(--brand-dark, #3A3F40);
  padding: 1px 6px;
  border-radius: 3px;
  min-width: 16px;
  text-align: center;
  display: inline-block;
}
.as-search-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--brand-grey, #8C9092);
}

@media (max-width: 720px) {
  .as-search-panel {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .as-search-hints span:nth-child(2) { display: none; }
}

/* =========================================================
   PHASE 26 — COOKIE CONSENT BANNER (premium refresh)
   ========================================================= */
.as-consent {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  max-width: 780px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(58, 63, 64, 0.08);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(58, 63, 64, 0.04),
    0 22px 60px rgba(58, 63, 64, 0.18);
  padding: 18px 22px 18px 26px;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--ink, #3A3F40);
  display: none;
  overflow: hidden;
}
/* Subtle red accent strip on the left edge — keeps the banner branded
   without coloring the whole surface. */
.as-consent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-red, #E3222A);
}
.as-consent.is-open {
  display: block;
  animation: as-consent-rise 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes as-consent-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .as-consent.is-open { animation: none; }
}
.as-consent-row {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.as-consent-body { flex: 1 1 360px; min-width: 0; }
.as-consent-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--ink);
  letter-spacing: -0.1px;
}
.as-consent-body p {
  font-size: 13.5px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.55;
  margin: 0 0 6px;
}
.as-consent-body a {
  color: var(--brand-red);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.as-consent-body a:hover { border-bottom-style: solid; }
.as-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}
.as-consent-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid rgba(58, 63, 64, 0.18);
  background: #ffffff;
  color: var(--ink, #3A3F40);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.as-consent-btn:hover {
  border-color: var(--ink, #3A3F40);
  background: var(--brand-soft, #F4F5F6);
}
.as-consent-btn:active { transform: translateY(1px); }
.as-consent-btn.is-primary {
  background: var(--brand-red, #E3222A);
  color: #fff;
  border-color: var(--brand-red, #E3222A);
  box-shadow: 0 4px 12px rgba(227, 34, 42, 0.22);
}
.as-consent-btn.is-primary:hover { background: #B8161D; border-color: #B8161D; }
@media (max-width: 640px) {
  .as-consent { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px 16px 22px; }
  .as-consent-row { gap: 14px; }
  .as-consent-actions { width: 100%; }
  .as-consent-btn { flex: 1; padding: 11px 14px; }
}

/* ============================================================
   PHASE 22 — HOMEPAGE ABOUT STRIP (Who / What / Who-helps / How)
   ============================================================ */
.who-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  justify-content: center;
  margin-top: 22px;
}
.who-grid > .who-card {
  flex: 1 1 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--rule, #E1E3E4);
  border-radius: 10px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(58, 63, 64, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.who-grid > .who-card:hover {
  border-color: rgba(227, 34, 42, 0.22);
  box-shadow: 0 6px 18px rgba(58, 63, 64, 0.08);
  transform: translateY(-1px);
}
.who-card .who-tag {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-red, #E3222A);
}
.who-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.1px;
}
.who-card p {
  font-size: 14px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1080px) {
  .who-grid > .who-card { flex: 1 1 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .who-grid > .who-card { flex: 1 1 100%; max-width: 100%; }
}

/* ============================================================
   PHASE 22 — HOMEPAGE HIGHLIGHT BANNER (rotating carousel)
   ============================================================ */
.hp-banner-slot { min-height: 1px; }
.hp-banner {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F5F6 100%);
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--banner-accent, var(--brand-red, #E3222A));
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(58, 63, 64, 0.04);
}
.hp-banner-track {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
}
.hp-banner-slide {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  border-left: 4px solid var(--banner-accent, var(--brand-red, #E3222A));
  margin-left: -4px;
}
.hp-banner-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
  position: relative;
  z-index: 1;
}
.hp-banner[data-count="1"] .hp-banner-slide {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hp-banner-body { flex: 1 1 480px; min-width: 0; }
.hp-banner-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--banner-accent, var(--brand-red, #E3222A));
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hp-banner-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0 0 8px 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.hp-banner-text {
  margin: 0;
  color: var(--brand-grey, #616A6C);
  font-size: 15px;
  line-height: 1.65;
}
.hp-banner-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hp-banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rule, #E1E3E4);
  color: var(--ink, #3A3F40);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 2px rgba(58, 63, 64, 0.06);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  z-index: 2;
}
.hp-banner-nav:hover {
  border-color: var(--banner-accent, var(--brand-red, #E3222A));
  color: var(--banner-accent, var(--brand-red, #E3222A));
}
.hp-banner-prev { left: 10px; }
.hp-banner-next { right: 10px; }
.hp-banner-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hp-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(58, 63, 64, 0.22);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.hp-banner-dot:hover { background: rgba(58, 63, 64, 0.45); }
.hp-banner-dot.is-active {
  background: var(--brand-red, #E3222A);
  transform: scale(1.25);
}
@media (max-width: 720px) {
  .hp-banner-slide { padding: 22px 22px 36px; }
  .hp-banner-prev { left: 6px; }
  .hp-banner-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-banner-slide { transition: none; }
}

/* ============================================================
   PHASE 30 — HERO RIGHT-SIDE VISUAL (daily rotation)
   Rotates only the visual block on the right of the hero.
   The H1, eyebrow, CTAs, and rest of the page stay stable.
   ============================================================ */
.hero-right[data-hero-visual] {
  flex: 0.95;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-visual {
  --hv-accent: var(--brand-red, #E3222A);
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero-visual[data-accent="cyan"]  { --hv-accent: var(--secure-cyan, #0E8C9C); }
.hero-visual[data-accent="dark"]  { --hv-accent: var(--ink, #3A3F40); }
.hero-visual-medallion {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0) 62%, color-mix(in srgb, var(--hv-accent) 14%, transparent) 68%, transparent 72%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0) 72%, color-mix(in srgb, var(--hv-accent) 6%, transparent) 78%, transparent 84%);
  isolation: isolate;
  transition: background 320ms ease;
}
.hero-visual-medallion::before {
  /* Subtle outer accent ring keyed off the theme color. */
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--hv-accent) 28%, transparent);
  pointer-events: none;
}
.hero-visual-crest {
  width: 86%;
  max-width: 420px;
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 18px 44px rgba(58, 63, 64, 0.18));
  position: relative;
  z-index: 1;
}
.hero-visual-badge {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--hv-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--hv-accent) 26%, var(--rule, #E1E3E4));
  box-shadow:
    0 1px 2px rgba(58, 63, 64, 0.06),
    0 12px 28px -14px color-mix(in srgb, var(--hv-accent) 60%, transparent);
  z-index: 2;
}
.hero-visual-badge svg { display: block; }
.hero-visual-meta {
  width: 100%;
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-visual-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-grey, #616A6C);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-visual-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hv-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hv-accent) 14%, transparent);
}
.hero-visual-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.hero-visual-caption {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--brand-grey, #616A6C);
  max-width: 44ch;
}
.hero-visual-cta {
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--hv-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--hv-accent) 35%, transparent);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}
.hero-visual-cta:hover {
  color: var(--ink, #3A3F40);
  border-bottom-color: var(--ink, #3A3F40);
}
@media (max-width: 980px) {
  .hero-visual-medallion { max-width: 380px; }
  .hero-visual-badge { width: 50px; height: 50px; }
  .hero-visual-label { font-size: 18px; }
}
@media (max-width: 720px) {
  .hero-right[data-hero-visual] { padding-top: 12px; }
  .hero-visual { gap: 18px; }
  .hero-visual-medallion { max-width: 320px; }
}

/* ============================================================
   PHASE 27 — TELCO / eSIM POSITIONING SECTION (homepage)
   ============================================================ */
.as-telco-section { padding-top: 48px; padding-bottom: 48px; }
.as-telco-card {
  background: linear-gradient(135deg, rgba(14, 140, 156, 0.05) 0%, rgba(58, 63, 64, 0.02) 60%, transparent 100%);
  border: 1px solid var(--rule, #E1E3E4);
  border-left: 4px solid var(--secure-cyan, #0E8C9C);
  border-radius: 12px;
  padding: 34px 36px;
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.as-telco-body { flex: 1 1 480px; min-width: 0; }
.as-telco-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--secure-cyan, #0E8C9C);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}
.as-telco-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink, #3A3F40);
  margin: 0 0 12px 0;
  line-height: 1.18;
  letter-spacing: -0.5px;
}
.as-telco-desc {
  font-size: 15.5px;
  color: var(--brand-grey, #616A6C);
  line-height: 1.65;
  margin: 0 0 14px 0;
}
.as-telco-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
  font-size: 13.5px;
  color: var(--ink);
}
.as-telco-points li {
  position: relative;
  padding-left: 18px;
}
.as-telco-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--secure-cyan, #0E8C9C);
  border-radius: 50%;
}
.as-telco-ctas {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.as-telco-ctas .btn { text-align: center; }
@media (max-width: 880px) {
  .as-telco-card { padding: 26px 22px; gap: 22px; }
  .as-telco-title { font-size: 24px; }
  .as-telco-points { grid-template-columns: 1fr; }
  .as-telco-ctas { flex-direction: row; flex-wrap: wrap; }
  .as-telco-ctas .btn { flex: 1 1 calc(50% - 10px); min-width: 0; }
}

/* ==========================================================================
   V2X addendum
   Additions on top of the shared AmbiSecure stylesheet, for content this
   property carries and AmbiSecure does not. Nothing above this line is
   modified, so the two properties stay visually identical everywhere else.
   ========================================================================== */

/* Wide technical tables. This site carries considerably wider tables than
   AmbiSecure (six-jurisdiction spectrum comparisons, three-radio PHY
   comparisons, message dictionaries). Below the tablet breakpoint they scroll
   inside their own box rather than pushing the page sideways. */
@media (max-width: 900px) {
  .spec-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spec-table th,
  .spec-table td { min-width: 132px; }
  .spec-table th:first-child,
  .spec-table td:first-child { min-width: 108px; }
}

/* Fenced formulae (butterfly key expansion, linkage values) scroll rather
   than overflow; they contain lines that cannot be wrapped meaningfully. */
.code-block { overflow-x: auto; }
.code-block pre { margin: 0; }
.code-block code {
  display: block;
  white-space: pre;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
}

/* Brand mark. AmbiSecure's rule paints its own logo into .brand-mark and hides
   the text lockup; this property does the same with the V2X mark, so the header
   proportions, the 52px footprint and the footer treatment are identical. */
.brand-mark {
  background-image: url('/assets/img/v2x-logo.svg');
}

/* Mobile menu touch targets. The inherited rule leaves each item's hit area at
   the height of the text run; on a phone the whole row should be tappable. */
@media (max-width: 980px) {
  .nav-links.open a {
    display: block;
    padding: 12px 0;
    min-height: 44px;
    line-height: 20px;
  }
}

/* Long unbreakable literals — repository URLs, ASN.1 module paths, file names —
   appear inline in the developer pages. Allow them to break rather than push
   the page sideways on a phone. */
code, .prose code, td code, th code { overflow-wrap: anywhere; word-break: break-word; }