/* =============================================================================
   AXI Marketing Site — shared styles
   Built on the AXI Design System tokens.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@import url("assets/colors_and_type.css");

/* -------- Reset / base -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--axi-fg);
  font-family: var(--axi-font-sans);
  font-size: var(--axi-text-base);
  line-height: var(--axi-leading-normal);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* -------- Layout primitives -------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.container.narrow { max-width: 1000px; }
.container.wide   { max-width: 1360px; }

/* -------- Type utilities -------- */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-blue);
}
.eyebrow.muted { color: var(--axi-fg-3); }
.eyebrow.navy  { color: var(--axi-navy); }
.eyebrow.light { color: var(--axi-indigo-300); }

.display {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--axi-navy);
  margin: 0;
}

.h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--axi-navy);
  margin: 0;
}
.h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--axi-navy);
  margin: 0;
}
.h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--axi-navy);
  margin: 0;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--axi-fg-2);
  margin: 0;
}
.body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--axi-fg-2);
  margin: 0;
}
.small {
  font-size: 13px;
  color: var(--axi-fg-3);
  line-height: 1.5;
}

.metric {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--axi-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* -------- Nav -------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--axi-border);
}
.nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.18em;
  color: var(--axi-navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  -webkit-text-stroke: 0.4px currentColor;
}
.nav-logo .mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--axi-header-grad);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
}
.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--axi-fg-2);
  padding: 8px 0;
  position: relative;
  transition: color 120ms ease;
}
.nav-links a:hover { color: var(--axi-navy); }
.nav-links a.active { color: var(--axi-navy); font-weight: 600; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -25px;
  height: 2px;
  background: var(--axi-indigo-500);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-links a.nav-hcr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #fff;
  color: #43285D;
  border: 1.5px solid #43285D;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.nav-links a.nav-hcr:hover { background: #43285D; color: #fff; }
.nav-links a.nav-hcr.active { background: #43285D; color: #fff; }
.nav-links a.nav-hcr.active::after { display: none; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--axi-navy);
  color: #fff;
}
.btn-primary:hover { background: #112861; }
.btn-primary:active { background: var(--axi-indigo-600); }

.btn-secondary {
  background: var(--axi-indigo-300);
  color: #1E1B4B;
}
.btn-secondary:hover { background: var(--axi-indigo-400); color: #fff; }

.btn-ghost {
  background: #fff;
  color: var(--axi-navy);
  border-color: var(--axi-border-strong);
}
.btn-ghost:hover { background: #F7F8FB; border-color: var(--axi-navy); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--axi-blue);
  font-weight: 600;
  font-size: 14px;
}
.btn-link:hover { color: var(--axi-blue-hover); }
.btn-link svg { width: 14px; height: 14px; }

.btn .caps,
.caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.btn svg { width: 14px; height: 14px; }

/* -------- Section primitives -------- */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.alt { background: var(--axi-bg); }
section.navy { background: var(--axi-navy); color: #fff; }
section.navy .h2, section.navy .h3, section.navy .display { color: #fff; }
section.navy .body { color: rgba(255,255,255,0.82); }
section.navy .eyebrow { color: var(--axi-indigo-300); }
section.gradient {
  background: var(--axi-header-grad);
  color: #fff;
}

/* -------- Cards / tiles -------- */
.card {
  background: #fff;
  border: 1px solid var(--axi-border);
  border-radius: 12px;
  padding: 28px;
}
.card.tight { padding: 20px; }
.card.flush { padding: 0; overflow: hidden; }

/* -------- Hero block -------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.hero-grid .copy { min-width: 0; }
.hero-grid .visual { position: relative; }
.hero-shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--axi-border);
  box-shadow: 0 30px 60px -20px rgba(11, 31, 68, 0.28),
              0 12px 24px -12px rgba(11, 31, 68, 0.18);
  background: #fff;
}
.hero-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--axi-navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.25);
}
.hero-stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 32px;
}
.hero-stats > div {
  border-left: 2px solid var(--axi-indigo-300);
  padding-left: 16px;
}
.hero-stats .num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--axi-navy);
}
.hero-stats .lbl {
  font-size: 12px;
  color: var(--axi-fg-3);
  line-height: 1.4;
  margin-top: 4px;
}

/* -------- Trust strip -------- */
.trust {
  padding: 28px 0;
  background: #fff;
  border-top: 1px solid var(--axi-border);
  border-bottom: 1px solid var(--axi-border);
}
.trust-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
}
.trust-logos {
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
}
.trust-logos .logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--axi-navy);
  letter-spacing: -0.005em;
  opacity: 0.62;
  text-transform: uppercase;
  font-feature-settings: "ss01" on;
}

/* -------- Feature blocks -------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.feature.reverse > :first-child { order: 2; }
.feature.reverse > :last-child  { order: 1; }
.feature-list {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}
.feature-item {
  border-top: 1px solid var(--axi-border);
  padding-top: 22px;
}
.feature-item .h4 { margin-bottom: 6px; }
.feature-shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--axi-border);
  box-shadow: 0 18px 40px -16px rgba(11,31,68,0.18);
}

/* -------- Quote -------- */
.quote-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border-left: 3px solid var(--axi-indigo-300);
  padding: 8px 0 8px 32px;
}
.quote-card blockquote {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--axi-navy);
  letter-spacing: -0.01em;
}
.quote-card .who {
  display: flex;
  gap: 14px;
  align-items: center;
}
.quote-card .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--axi-indigo-300), #BAE6FD);
  display: grid; place-items: center;
  color: var(--axi-navy);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.quote-card .name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--axi-navy);
}
.quote-card .role {
  font-size: 12px;
  color: var(--axi-fg-3);
  letter-spacing: 0.04em;
}
.quote-card.on-navy blockquote { color: #fff; }
.quote-card.on-navy { border-left-color: var(--axi-indigo-300); }
.quote-card.on-navy .name { color: #fff; }
.quote-card.on-navy .role { color: rgba(255,255,255,0.7); }

/* -------- Footer -------- */
footer.site {
  background: var(--axi-navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 32px;
}
footer.site .grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  align-items: flex-start;
}
footer.site h5 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}
footer.site a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color 120ms ease;
}
footer.site a:hover { color: #fff; }
footer.site .logo {
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.16em;
  color: #fff;
  display: inline-flex; align-items: center; gap: 12px;
}
footer.site .logo .mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, var(--axi-indigo-300), var(--axi-blue));
}
footer.site .pitch {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
  max-width: 320px;
}
footer.site .bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
footer.site .bottom a { display: inline; padding: 0; margin-right: 18px; }

/* -------- Page header (sub-page hero) -------- */
.page-head {
  padding: 88px 0 64px;
  background: linear-gradient(180deg, #F7F8FB 0%, #fff 100%);
  border-bottom: 1px solid var(--axi-border);
}
.page-head .inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: end;
}
.page-head h1 {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--axi-navy);
  margin: 16px 0 0;
}
.page-head .lede {
  margin-top: 24px;
  max-width: 520px;
}

/* -------- Pill / tag -------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--axi-indigo-50);
  color: var(--axi-indigo-600);
}
.pill.amber { background: var(--axi-warning-bg); color: #92400E; }
.pill.green { background: var(--axi-success-bg); color: #166534; }
.pill.sky   { background: #E0F2FE; color: #075985; }
.pill.gray  { background: #F3F4F6; color: #374151; }
.pill.navy  { background: var(--axi-navy); color: #fff; }

/* -------- Grid helpers -------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* -------- Stat strip -------- */
.statstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--axi-border);
  border-radius: 14px;
  overflow: hidden;
}
.statstrip > div {
  padding: 32px 28px;
  border-right: 1px solid var(--axi-border);
}
.statstrip > div:last-child { border-right: none; }
.statstrip .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--axi-navy);
}
.statstrip .lbl {
  margin-top: 6px;
  font-size: 13px;
  color: var(--axi-fg-3);
  line-height: 1.4;
}

/* -------- CTA banner -------- */
.cta-banner {
  padding: 80px 0;
  background: var(--axi-header-grad);
  color: #fff;
  text-align: center;
}
.cta-banner h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 820px;
  margin: 0 auto;
}
.cta-banner .actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-banner .btn-primary { background: #fff; color: var(--axi-navy); }
.cta-banner .btn-primary:hover { background: var(--axi-indigo-50); }
.cta-banner .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.cta-banner .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* -------- Modal -------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(11,31,68,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal-back.open { display: flex; }
.modal {
  background: #fff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  padding: 36px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(11,31,68,0.4);
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--axi-fg-3);
  display: grid; place-items: center;
}
.modal-close:hover { background: var(--axi-bg); color: var(--axi-navy); }
.modal h3 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--axi-navy);
  font-weight: 700;
}
.modal .form {
  display: grid; gap: 14px; margin-top: 22px;
}
.modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
  margin-bottom: 6px;
}
.modal input, .modal select, .modal textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--axi-border-strong);
  font: inherit;
  font-size: 14px;
  color: var(--axi-navy);
  background: #fff;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--axi-indigo-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.modal .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-success {
  text-align: center;
  padding: 48px 24px;
}
.modal-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--axi-success-bg);
  color: var(--axi-success);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}

/* -------- Misc -------- */
.divider-row {
  height: 1px;
  background: var(--axi-border);
}
.kbd {
  font-family: var(--axi-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--axi-bg);
  border: 1px solid var(--axi-border);
  color: var(--axi-fg-2);
}

/* -------- Integrations / logo grid -------- */
.integrations {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--axi-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.integrations .cell {
  padding: 28px 16px;
  border-right: 1px solid var(--axi-border);
  border-bottom: 1px solid var(--axi-border);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--axi-navy);
  text-align: center;
  background: #fff;
  transition: background 120ms ease;
  min-height: 96px;
}
.integrations .cell:hover { background: var(--axi-indigo-50); }
.integrations .cell .sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--axi-fg-3);
  text-transform: uppercase;
  margin-top: 4px;
}

/* -------- Article cards -------- */
.article-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--axi-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color 120ms ease, transform 120ms ease;
}
.article-card:hover { border-color: var(--axi-navy); }
.article-card .img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--axi-navy), var(--axi-cobalt));
  position: relative;
  overflow: hidden;
}
.article-card .img img {
  width: 100%; height: 100%; object-fit: cover;
}
.article-card .body {
  padding: 24px;
}
.article-card .meta {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--axi-fg-3); text-transform: uppercase;
  margin-bottom: 10px;
}
.article-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--axi-navy);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.article-card p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--axi-fg-2);
}

/* -------- Tabs -------- */
.tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--axi-border);
  border-radius: 999px;
  padding: 4px;
  width: max-content;
}
.tabs button {
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--axi-fg-2);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.tabs button.active {
  background: var(--axi-navy);
  color: #fff;
}
.tabs button:hover:not(.active) { background: var(--axi-bg); color: var(--axi-navy); }

/* -------- Timeline -------- */
.timeline {
  position: relative;
  display: grid;
  gap: 36px;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--axi-indigo-200);
}
.timeline .step {
  position: relative;
}
.timeline .step::before {
  content: "";
  position: absolute;
  left: -32px; top: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--axi-indigo-500);
}
.timeline .step .yr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--axi-blue);
  margin-bottom: 6px;
}
.timeline .step .ttl {
  font-size: 18px;
  font-weight: 700;
  color: var(--axi-navy);
  margin-bottom: 6px;
}
.timeline .step .desc {
  font-size: 14px;
  color: var(--axi-fg-2);
  line-height: 1.55;
  max-width: 560px;
}

/* -------- Plan card (Individual vs Enterprise) -------- */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.plan {
  border: 1px solid var(--axi-border);
  border-radius: 14px;
  padding: 36px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  background: var(--axi-navy);
  color: #fff;
  border-color: var(--axi-navy);
}
.plan .tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-blue);
}
.plan.featured .tier { color: var(--axi-indigo-300); }
.plan h3 {
  margin: 12px 0 8px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--axi-navy);
}
.plan.featured h3 { color: #fff; }
.plan .desc {
  font-size: 14px;
  color: var(--axi-fg-2);
  line-height: 1.55;
  margin-bottom: 24px;
  min-height: 44px;
}
.plan.featured .desc { color: rgba(255,255,255,0.74); }
.plan ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
}
.plan li {
  font-size: 14px;
  color: var(--axi-fg-2);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--axi-border);
  line-height: 1.4;
}
.plan li:first-child { border-top: none; padding-top: 0; }
.plan.featured li {
  color: rgba(255,255,255,0.85);
  border-top-color: rgba(255,255,255,0.12);
}
.plan li svg {
  width: 16px; height: 16px;
  color: var(--axi-success);
  margin-top: 2px;
}
.plan.featured li svg { color: var(--axi-indigo-300); }

/* =============================================================================
   News article pages (long-form)
   ============================================================================= */
.art-head {
  padding: 64px 0 32px;
  background: #fff;
  border-bottom: 1px solid var(--axi-border);
}
.art-head .crumbs {
  font-size: 12px;
  font-weight: 600;
  color: var(--axi-fg-3);
  letter-spacing: 0.04em;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.art-head .crumbs a {
  color: var(--axi-blue);
  text-decoration: none;
}
.art-head .crumbs a:hover { color: var(--axi-blue-hover); text-decoration: underline; }
.art-head .crumbs .sep { color: var(--axi-fg-4); }
.art-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-blue);
}
.art-head .eyebrow .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--axi-fg-4);
}
.art-head h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--axi-navy);
  max-width: 900px;
}
.art-head .dek {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--axi-fg-2);
  max-width: 760px;
}
.art-head .byline {
  margin-top: 32px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--axi-fg-3);
}
.art-head .byline strong { color: var(--axi-navy); font-weight: 700; }

.art-body {
  padding: 56px 0 80px;
  background: #fff;
}
.art-body .wrap {
  display: grid;
  grid-template-columns: 200px minmax(0, 700px) 1fr;
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.art-body .meta-col {
  position: sticky;
  top: 88px;
  align-self: flex-start;
}
.art-body .meta-col .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
  margin-bottom: 8px;
}
.art-body .meta-col .val {
  font-size: 14px;
  color: var(--axi-navy);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 22px;
}
.art-body .meta-col .share {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
.art-body .meta-col .share a {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--axi-border);
  display: grid; place-items: center;
  color: var(--axi-fg-3);
  transition: border-color 120ms ease, color 120ms ease;
}
.art-body .meta-col .share a:hover { color: var(--axi-navy); border-color: var(--axi-navy); }

.art-body .content > * + * { margin-top: 22px; }
.art-body .content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--axi-fg-2);
  font-family: var(--axi-font-sans);
}
.art-body .content p strong { color: var(--axi-navy); font-weight: 700; }
.art-body .content p a { color: var(--axi-blue); text-decoration: underline; text-underline-offset: 2px; }
.art-body .content h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--axi-navy);
  margin-top: 44px;
  margin-bottom: -4px;
}
.art-body .content ul {
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.art-body .content ul li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--axi-fg-2);
  padding-left: 28px;
  position: relative;
}
.art-body .content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 2px;
  background: var(--axi-indigo-500);
}

/* Photo placeholder */
.photo-slot {
  margin: 36px 0 12px;
  background: var(--axi-bg);
  border: 1px dashed var(--axi-border-strong);
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: var(--axi-fg-3);
  position: relative;
  overflow: hidden;
}
.photo-slot.compact { aspect-ratio: 5 / 3; }
.photo-slot .ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  color: var(--axi-fg-4);
  margin-bottom: 14px;
  border: 1px solid var(--axi-border);
}
.photo-slot .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
  text-align: center;
}
.photo-slot .desc {
  font-size: 13px;
  color: var(--axi-fg-3);
  margin-top: 4px;
  text-align: center;
  max-width: 500px;
  padding: 0 20px;
}
.photo-slot .inner { text-align: center; }
.photo-slot figcaption {
  position: absolute;
  bottom: 12px; left: 16px; right: 16px;
  font-size: 11px;
  color: var(--axi-fg-4);
  letter-spacing: 0.04em;
}

/* Pull quote placeholder */
.pull-quote {
  margin: 44px 0;
  padding: 32px 36px;
  background: var(--axi-bg);
  border-left: 4px solid var(--axi-indigo-500);
  border-radius: 0 12px 12px 0;
}
.pull-quote .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
  margin-bottom: 14px;
}
.pull-quote blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--axi-navy);
  letter-spacing: -0.01em;
}
.pull-quote .attr {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--axi-fg-3);
}
.pull-quote.placeholder blockquote {
  font-style: italic;
  color: var(--axi-fg-3);
  font-weight: 400;
  font-size: 18px;
}

/* Key facts panel (inline) */
.facts {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--axi-bg);
  border-radius: 12px;
  border: 1px solid var(--axi-border);
}
.facts .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-blue);
  margin-bottom: 12px;
}
.facts dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 24px;
  margin: 0;
  font-size: 14px;
}
.facts dt {
  color: var(--axi-fg-3);
  font-weight: 600;
}
.facts dd {
  margin: 0;
  color: var(--axi-navy);
  font-weight: 500;
}

/* Contact card */
.contact-card {
  margin-top: 56px;
  padding: 32px 36px;
  background: var(--axi-navy);
  color: #fff;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.contact-card .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--axi-indigo-300);
}
.contact-card .who {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.contact-card .role {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.contact-card a.email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #fff;
  color: var(--axi-navy);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.contact-card a.email:hover { background: var(--axi-indigo-50); }

/* Related articles */
.related {
  padding: 64px 0 96px;
  background: var(--axi-bg);
  border-top: 1px solid var(--axi-border);
}
.related .eyebrow {
  display: block;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .art-body .wrap { grid-template-columns: 1fr; gap: 24px; }
  .art-body .meta-col { position: static; display: flex; flex-wrap: wrap; gap: 32px; }
  .art-body .meta-col .val { margin-bottom: 0; }
  .contact-card { grid-template-columns: 1fr; }
  .facts dl { grid-template-columns: 1fr; gap: 4px 0; }
  .facts dl dt { margin-top: 8px; }
}

/* =============================================================================
   MacBook Air frame (used on Home & Technology)
   ============================================================================= */
.macbook {
  position: relative;
  width: 100%;
  padding: 0 0 14px;
}
.macbook .mb-lid {
  background: linear-gradient(180deg, #C8CDD3 0%, #B5BBC2 100%);
  padding: 14px 14px 14px;
  border-radius: 14px 14px 6px 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}
.macbook .mb-bezel {
  position: relative;
  background: #0A0A0A;
  padding: 18px 10px 10px;
  border-radius: 6px;
}
.macbook .mb-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 14px;
  background: #0A0A0A;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}
.macbook .mb-notch::after {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1A1A1A;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.macbook .mb-screen {
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}
.macbook .mb-hinge {
  height: 10px;
  margin: 0 -2px;
  background: linear-gradient(180deg, #9DA3AB 0%, #BFC4CA 50%, #8A8F96 100%);
  border-radius: 0 0 3px 3px;
  position: relative;
}
.macbook .mb-hinge::before,
.macbook .mb-hinge::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 100%;
  background: linear-gradient(180deg, #6E747B 0%, #4A4F55 100%);
}
.macbook .mb-hinge::before { left: 24%; border-radius: 0 0 2px 2px; }
.macbook .mb-hinge::after { right: 24%; border-radius: 0 0 2px 2px; }
.macbook .mb-base {
  height: 18px;
  margin: 0 -28px;
  background: linear-gradient(180deg, #BFC4CA 0%, #9DA3AB 70%, #7A7F86 100%);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 12px 24px -10px rgba(11,31,68,0.35);
  position: relative;
}
.macbook .mb-base::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 4px;
  background: linear-gradient(180deg, #6E747B 0%, #4A4F55 100%);
  border-radius: 0 0 6px 6px;
}
.macbook .mb-shadow {
  height: 18px;
  margin: 4px auto 0;
  width: 80%;
  background: radial-gradient(ellipse at center, rgba(11,31,68,0.22) 0%, rgba(11,31,68,0) 70%);
  filter: blur(2px);
}

/* -------- Responsive (light touch — sized for desktop demo) -------- */
@media (max-width: 980px) {
  .hero-grid, .feature, .page-head .inner { grid-template-columns: 1fr; gap: 40px; }
  .feature.reverse > :first-child { order: 1; }
  .feature.reverse > :last-child  { order: 2; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .statstrip { grid-template-columns: 1fr 1fr; }
  .statstrip > div:nth-child(2) { border-right: none; }
  footer.site .grid { grid-template-columns: 1fr 1fr; }
  .integrations { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr; }
  section { padding: 64px 0; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .statstrip { grid-template-columns: 1fr; }
  .statstrip > div { border-right: none; border-bottom: 1px solid var(--axi-border); }
  .integrations { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  footer.site .grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MOBILE NAV (hamburger). Injected by site.js as a button .nav-burger
   that flips <header.nav>.nav-open. Hidden on desktop.
   ================================================================ */
.nav-burger {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
}
.nav-burger:hover { background: rgba(11,31,68,0.04); }
.nav-burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--axi-navy);
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
.nav-open .nav-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ================================================================
   GLOBAL MOBILE RESCUE
   Many pages use inline `style="display:grid;grid-template-columns:..."`
   for layout (cards, contact rows, hero halves, etc.). Rather than
   touching every HTML file, we use attribute selectors to detect those
   inline columns and stack them at small viewports. Specificity 1,1,0
   beats the inline rule when reinforced with !important on the override.
   ================================================================ */
@media (max-width: 980px) {
  /* Two-and-a-bit-column inline grids → stack to one column */
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* News featured / quarterly notes / case study hero — all 1fr 1fr inline. */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Container padding shrinks to free pixel real estate */
  .container { padding: 0 22px; }

  /* Nav menu transformation */
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; order: 1; margin-left: auto; }
  .nav-logo { order: 0; }
  /* Wrap nav-inner so links + cta drop onto their own rows when open;
     remove the fixed 72px height so wrapped rows can expand. */
  .nav-inner { flex-wrap: wrap; row-gap: 0; height: auto; min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
  .nav-links { order: 2; }
  .nav-cta { order: 3; }
  /* Hide the link list + cta in the bar; reveal them as stacked rows when open */
  .nav-links, .nav-cta {
    display: none;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 14px;
    border-top: 1px solid var(--axi-divider);
    margin-top: 12px;
  }
  .nav-open .nav-links,
  .nav-open .nav-cta { display: flex; }
  .nav-open .nav-cta {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 18px;
    gap: 10px;
  }
  .nav-links a {
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--axi-divider);
    color: var(--axi-navy);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a.active::after { display: none; }
  .nav-links a.nav-hcr { justify-content: center; padding: 12px 16px; margin-top: 6px; }
  .nav-cta .btn { width: 100%; justify-content: center; }

  /* Avoid stuck horizontal scrolling on small screens for any wide hero
     bleed wrappers — clamp them to viewport. */
  body { overflow-x: hidden; }
  .hero-anim-stage { width: 100% !important; margin-left: 0 !important; }
  .feature-shot.bare img,
  .feature-shot.bare.xl img { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }

  /* Single-column grids for anything that was still 2-col inline */
  [style*="grid-template-columns:auto 1fr auto"] {
    /* Pipeline rows in services — keep icon + text inline but drop the trailing pill below */
    grid-template-columns: auto 1fr !important;
  }
  [style*="grid-template-columns:auto 1fr auto"] > :last-child {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: 4px;
  }

  /* Inline list cards with action right — let the action wrap below */
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Page-head H1 shouldn't dominate 4 lines on a phone */
  .page-head h1 { font-size: clamp(34px, 9vw, 44px) !important; }
  .display { font-size: clamp(34px, 10vw, 48px) !important; }
  .h2 { font-size: clamp(24px, 6vw, 30px) !important; }

  /* Buttons get a touch larger so tap targets meet 44px guideline */
  .btn { padding: 13px 18px; font-size: 14px; }

  /* CTA banner padding */
  .cta-banner { padding: 56px 0; }
  .cta-banner h2 { font-size: clamp(26px, 7vw, 36px); }

  /* Timeline tighter */
  .timeline .step { padding: 18px 0; }

  /* Plans / pricing cards full width is already handled at 980px */

  /* Section vertical rhythm */
  section { padding: 52px 0; }

  /* Quote cards lose the giant text */
  .quote-card blockquote { font-size: 19px; }

  /* HCR page subnav already overflows-x */
}