/* Marketing landing — sits on top of tokens.css + app.css */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--clay-500); color: var(--white); padding: 8px 12px; border-radius: 6px; z-index: 999; }

body.mkt { background: var(--cream-bg); }
.mkt-top { padding-inline: 32px; }

.btn--lg { padding: 14px 22px; font-size: 14px; }
.pill {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink-700);
  margin-bottom: 18px;
}
.ink-coral { color: var(--clay-500); }
.nowrap { white-space: nowrap; }
/* On very narrow screens allow it to wrap so it never overflows the viewport */
@media (max-width: 420px) { .nowrap { white-space: normal; } }

/* HERO */
.mkt-hero {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 64px 32px 48px;
}
.mkt-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.mkt-hero .lead { font-size: 18px; color: var(--ink-700); max-width: 56ch; margin: 0 0 24px; }
.mkt-hero__cta { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--ink-700); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }

.mkt-hero__viz {
  background: linear-gradient(180deg, var(--paper), var(--cream-bg));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-lg);
}
.viz-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-md); }
.viz-card__head { font-size: 12px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 600; }
.viz-card__score { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.viz-card__label { font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; }
.viz-card__money { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--ink-900); margin-top: 2px; }
.viz-card__sub { font-size: 12px; color: var(--ink-500); }
.viz-card__drivers { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 13px; }
.viz-card__drivers li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; }
.up { color: var(--win); font-weight: 600; }
.down { color: var(--risk); font-weight: 600; }

/* STRIP */
.mkt-strip {
  background: var(--paper);
  border-block: 1px solid var(--border);
  padding: 22px 32px;
  text-align: center;
}
.mkt-strip p { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.mkt-strip ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center;
  font-family: var(--font-display); font-weight: 600; color: var(--ink-700);
  font-size: 18px;
}

/* SECTIONS */
.mkt-section { max-width: 1280px; margin: 0 auto; padding: 72px 32px; }
.mkt-section--alt { background: var(--paper); max-width: none; padding-inline: 0; }
.mkt-section--alt > * { max-width: 1280px; margin-inline: auto; padding-inline: 32px; }
.mkt-section__head { text-align: center; margin-bottom: 40px; }
.mkt-section__head .eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-500); font-weight: 700; }
.mkt-section__head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.02em;
  margin: 8px auto 12px; max-width: 24ch;
}
.mkt-section__head p { color: var(--ink-700); font-size: 16px; max-width: 60ch; margin: 0 auto; }

.mkt-grid { display: grid; gap: 16px; }
.mkt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mkt-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .mkt-grid--3, .mkt-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .mkt-grid--3, .mkt-grid--4 { grid-template-columns: 1fr; } .mkt-hero { grid-template-columns: 1fr; padding-block: 36px; } .mkt-hero h1 { font-size: 38px; } }

.feat {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
  height: 100%;
}
.feat:hover { border-color: var(--clay-400); box-shadow: var(--shadow-md); }
.feat h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
.feat p { color: var(--ink-700); font-size: 14px; margin: 0; }
.feat--cta { background: linear-gradient(160deg, var(--clay-100), var(--paper)); border-color: var(--clay-400); }
.feat .btn { margin-top: auto; align-self: start; }
.feat--cta .btn { margin-top: auto; }

.country {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; height: 100%;
}
.country h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; }
.country p { font-size: 14px; color: var(--ink-700); margin: 0 0 10px; }
.country a { color: var(--clay-600); font-weight: 600; font-size: 13px; margin-top: auto; align-self: start; }
.country a:hover { color: var(--clay-500); }

.steps {
  counter-reset: step; list-style: none; padding: 0; max-width: 920px; margin: 0 auto;
  display: grid; gap: 10px;
}
.steps li {
  counter-increment: step;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px 14px 56px; position: relative; font-size: 15px; color: var(--ink-700);
}
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--clay-500); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
[dir="rtl"] .steps li { padding-inline-end: 56px; padding-inline-start: 18px; }

/* PRICING */
.pricing { align-items: stretch; }
.pricing .price {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  height: 100%;
}
.price h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0; }
.price__val { font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--ink-900); }
.price__val small { font-size: 14px; color: var(--ink-500); font-weight: 500; }
.price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-700); }
.price ul li::before { content: "✓ "; color: var(--win); font-weight: 700; }
.price .btn { margin-top: auto; text-align: center; align-self: stretch; }
.price--featured { border-color: var(--clay-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-500) 18%, transparent); }
.badge {
  position: absolute; top: -10px; inset-inline-start: 22px;
  background: var(--clay-500); color: var(--white);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.price-note { text-align: center; color: var(--ink-500); font-size: 13px; margin-top: 22px; }
.price-note a { color: var(--clay-600); text-decoration: underline; }

/* CUTOVER RULE TABLE */
.cutover {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 auto 28px;
  max-width: 980px;
  box-shadow: var(--shadow-sm);
}
.cutover__head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.cutover__head strong {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.005em;
}
.cutover__head .muted { font-size: 12.5px; }
.cutover__rows { display: grid; gap: 2px; }
.cutover__row {
  display: grid;
  grid-template-columns: 150px 170px 1fr;
  gap: 16px;
  padding: 10px 6px;
  align-items: center;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
}
.cutover__row:hover { background: var(--cream-bg); }
.cutover__val { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cutover__mod {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--cream-bg); color: var(--ink-700);
  font-size: 12px; font-weight: 600; justify-self: start;
}
.cutover__mod--m { background: var(--clay-500); color: var(--white); }
.cutover__who { color: var(--ink-700); font-size: 13px; }
@media (max-width: 720px) {
  .cutover__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 6px; }
}

/* PRICE GROUP (Self-serve vs Managed) */
.pricegroup { margin-bottom: 32px; }
.pricegroup__head { text-align: center; margin: 24px auto 18px; max-width: 760px; }
.pricegroup__head h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  letter-spacing: -0.015em; margin: 6px 0 6px;
}
.pricegroup__head p { margin: 0; font-size: 14px; }
.kicker {
  display: inline-block; padding: 4px 10px;
  background: var(--ink-900); color: var(--cream-bg);
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Managed wrapper — distinct surface so the two models read separately */
.pricegroup--managed {
  background: linear-gradient(180deg, color-mix(in srgb, var(--clay-100) 40%, var(--paper)) 0%, var(--paper) 100%);
  border: 1px solid var(--clay-400);
  border-radius: var(--radius);
  padding: 18px 24px 28px;
}

/* Managed tier cards — premium feel: deeper border, sharper coral, split price */
.price--mgmt {
  background: var(--white) !important;
  border: 1px solid var(--border-strong) !important;
}
.price--mgmt h3 { color: var(--ink-900); }
.price__band {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--clay-600); font-weight: 700;
  background: var(--clay-100); padding: 4px 10px; border-radius: var(--radius-pill);
  align-self: start;
}
.price__val--split {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 28px !important; line-height: 1.1;
}
.price__val--split .plus {
  font-family: var(--font-ui); font-size: 13px;
  font-weight: 500; color: var(--ink-700);
}
.price__val--split .plus strong { color: var(--clay-600); font-weight: 700; }
.price__val--split .plus .muted { color: var(--ink-500); font-size: 11px; font-weight: 500; }

/* Managed featured ring — slightly different than SaaS featured */
.price--mgmt.price--featured {
  border-color: var(--clay-500) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-500) 22%, transparent), var(--shadow-md);
}

/* Rationale callout */
.rationale {
  margin-top: 22px;
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  align-items: start;
}
.rationale__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--clay-100); color: var(--clay-600);
  display: grid; place-items: center;
}
.rationale h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  margin: 0 0 6px; letter-spacing: -0.01em;
}
.rationale p { margin: 0; color: var(--ink-700); font-size: 13.5px; line-height: 1.6; }
.rationale strong { color: var(--ink-900); font-weight: 600; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 8px; }
.faq details {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-900);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-display); font-size: 22px; color: var(--clay-500);
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-700); font-size: 14px; margin: 10px 0 0; }

/* LEADERSHIP — same Auditus / Claude tokens (coral, cream, slate, Lora) */
.leader {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  max-width: 1080px;
  margin: 0 auto;
}
.leader__photo {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clay-100);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
}
.leader__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}
.leader__cap {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-end: 12px;
  background: color-mix(in srgb, var(--ink-900) 78%, transparent);
  color: var(--cream-bg);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.leader__body { min-width: 0; }
.leader__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink-900);
}
.leader__role {
  color: var(--clay-600);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.leader__body p {
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.leader__body p strong { color: var(--ink-900); font-weight: 600; }
.leader__pull {
  font-family: var(--font-display);
  font-size: 19px !important;
  line-height: 1.4 !important;
  color: var(--ink-900) !important;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--clay-500);
  margin: 18px 0 !important;
  font-style: italic;
}
.leader__cred {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.leader__cred li {
  background: var(--cream-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}
.leader__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.leader__contact .btn { padding: 11px 18px; font-size: 13px; }
@media (max-width: 820px) {
  .leader { grid-template-columns: 1fr; padding: 24px; }
  .leader__photo { max-width: 260px; margin-inline: auto; }
  .leader__name { font-size: 26px; }
}

/* ===================== SHOWCASE — browser-framed previews ===================== */
.sh-link { color: var(--clay-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sh-link:hover { color: var(--clay-500); }

.shot {
  margin: 0 0 18px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shot--feature { max-width: 1000px; margin-inline: auto; }

.shot__chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--cream-bg);
  border-bottom: 1px solid var(--border);
}
.shot__dots { display: inline-flex; gap: 6px; }
.shot__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); display: block; }
.shot__dots i:first-child { background: var(--chrome-red); }
.shot__dots i:nth-child(2) { background: var(--chrome-amber); }
.shot__dots i:nth-child(3) { background: var(--chrome-green); }
.shot__url {
  flex: 1; text-align: center;
  font-size: 12px; color: var(--ink-500);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 14px;
  max-width: 360px; margin: 0 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--clay-100); color: var(--clay-600);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.shot__badge--alt { background: color-mix(in srgb, var(--info) 18%, var(--paper)); color: var(--info); }
.shot__body { background: var(--cream-bg); padding: 20px; }
.shot__cap {
  font-size: 13px; color: var(--ink-700);
  padding: 14px 20px; background: var(--paper);
  border-top: 1px solid var(--border);
}
.shot__cap strong { color: var(--ink-900); font-weight: 600; }

.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 820px) { .shot-pair { grid-template-columns: 1fr; } }

.sh-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* shared mini-bits */
.sh-eyebrow { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }
.sh-h { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; color: var(--ink-900); margin-top: 2px; }

/* Discover preview */
.sh-disc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.sh-kpis { display: flex; gap: 10px; }
.sh-kpis > div { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; }
.sh-kpis strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink-900); line-height: 1; }
.sh-kpis span { font-size: 9px; color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; }

.sh-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 8px;
}
.sh-card:last-child { margin-bottom: 0; }
.sh-ring { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.sh-ring svg { width: 100%; height: 100%; }
.sh-ring b { position: absolute; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-900); }
.sh-ring b small { font-size: 9px; color: var(--ink-500); font-weight: 500; }
.sh-card__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-900); letter-spacing: -0.01em; }
.sh-card__meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.sh-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.sh-tag { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--cream-bg); color: var(--ink-700); border: 1px solid var(--border); }
.sh-tag--coral { background: var(--clay-100); color: var(--clay-600); border-color: transparent; }
.sh-tag--win { background: color-mix(in srgb, var(--win) 18%, var(--paper)); color: var(--win); border-color: transparent; }
.sh-tag--watch { background: color-mix(in srgb, var(--watch) 22%, var(--paper)); color: var(--watch-ink); border-color: transparent; }
.sh-card__right { text-align: end; }
.sh-val { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink-900); }
.sh-soon { font-size: 11px; color: var(--risk); font-weight: 600; }
.sh-dl { font-size: 11px; color: var(--ink-500); }

/* Digest preview */
.sh-dg__head { margin-bottom: 14px; }
.sh-bars { display: grid; gap: 5px; }
.sh-bar {
  position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper); overflow: hidden; font-size: 12px;
}
.sh-bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: color-mix(in srgb, var(--win) 16%, var(--paper)); z-index: 0; }
.sh-bar > * { position: relative; z-index: 1; }
.sh-bar span { font-weight: 600; color: var(--ink-900); }
.sh-bar b { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sh-bar em { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--cream-bg); color: var(--ink-700); }
.sh-bar--feat::before { background: color-mix(in srgb, var(--clay-500) 22%, var(--paper)); }
.sh-bar--feat em { background: var(--clay-100); color: var(--clay-600); }
.sh-bar--watch::before { background: color-mix(in srgb, var(--watch) 24%, var(--paper)); }
.sh-bar--watch em { background: color-mix(in srgb, var(--watch) 28%, var(--paper)); color: var(--watch-ink); }
.sh-bar--risk::before { background: color-mix(in srgb, var(--risk) 22%, var(--paper)); }
.sh-bar--risk em { background: color-mix(in srgb, var(--risk) 18%, var(--paper)); color: var(--risk); }

/* Proposal preview */
.sh-prop { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.sh-prop__doc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.sh-prop__h { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink-900); margin-bottom: 8px; }
.sh-prop__doc p { font-size: 11.5px; line-height: 1.6; color: var(--ink-700); margin: 0 0 8px; }
.sh-prop__doc mark { background: var(--clay-100); color: var(--clay-600); padding: 0 3px; border-radius: 3px; font-weight: 600; }
.sh-cite { display: inline-block; background: var(--cream-bg); color: var(--clay-600); border: 1px solid var(--border); border-radius: 3px; font-size: 9px; font-weight: 700; padding: 0 4px; }
.sh-skel { display: grid; gap: 5px; margin-top: 10px; }
.sh-skel i { height: 7px; border-radius: 3px; background: var(--border); display: block; }
.sh-prop__side { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.sh-side__h { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin-bottom: 6px; }
.sh-citecard { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; font-size: 10.5px; color: var(--ink-700); }
.sh-citecard b { background: var(--clay-500); color: var(--white); border-radius: 4px; text-align: center; font-size: 10px; }
.sh-comp { font-size: 11px; color: var(--ink-700); display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.sh-ok { color: var(--win); font-weight: 700; }
.sh-miss { color: var(--risk); font-weight: 700; }

/* ===================== PROCUREMENT BRAIN BAND ===================== */
.brainband {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center;
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-850) 100%);
  border-radius: var(--radius); padding: 40px 44px; color: var(--cream-bg);
  box-shadow: var(--shadow-lg);
}
.brainband__copy h2 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 12px; color: var(--white); }
.brainband__copy .eyebrow { color: var(--clay-400); }
.brainband__copy > p { color: var(--ink-300); font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 56ch; }
.brainband__copy strong { color: var(--cream-bg); font-weight: 600; }
.brainband__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.brainband__list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; font-size: 13.5px; color: var(--ink-300); line-height: 1.5; }
.brainband__list strong { color: var(--cream-bg); font-weight: 600; }
.bb-ic { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(217,119,87,0.18); display: grid; place-items: center; font-size: 15px; }
.brainband .hero__cta .btn--ghost { color: var(--cream-bg); border-color: rgba(240,238,230,0.3); }
.brainband .hero__cta .btn--ghost:hover { background: rgba(240,238,230,0.1); border-color: var(--clay-400); color: var(--clay-400); }

.brainband__viz { display: grid; gap: 16px; justify-items: center; }
.bb-orb { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
.bb-orb span { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--clay-400), var(--clay-600)); box-shadow: 0 0 26px var(--clay-500); animation: orb-pulse 3s ease-in-out infinite; }
.bb-orb i { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(224,142,114,0.5); }
.bb-orb i:first-of-type { width: 52px; height: 52px; animation: orb-spin 9s linear infinite; }
.bb-orb i:last-of-type { width: 78px; height: 78px; animation: orb-spin 16s linear infinite reverse; opacity: 0.4; }
@keyframes orb-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-orb span, .bb-orb i { animation: none !important; } }

.bb-chat { background: var(--white); border-radius: var(--radius); padding: 18px; width: 100%; box-shadow: var(--shadow-md); color: var(--ink-900); }
.bb-q { background: var(--clay-500); color: var(--white); font-size: 13px; font-weight: 500; padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 10px; display: inline-block; }
.bb-a { background: var(--cream-bg); border: 1px solid var(--border); font-size: 13px; line-height: 1.55; padding: 11px 13px; border-radius: var(--radius-sm); color: var(--ink-900); }
.bb-a strong { font-weight: 600; }
.bb-src { display: block; font-size: 10.5px; color: var(--ink-500); font-style: italic; margin-top: 6px; }
.bb-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.bb-stats > div { text-align: center; background: var(--cream-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 4px; }
.bb-stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--clay-500); line-height: 1; }
.bb-stats span { font-size: 8.5px; color: var(--ink-500); letter-spacing: 0.03em; text-transform: uppercase; }
@media (max-width: 900px) { .brainband { grid-template-columns: 1fr; padding: 28px 24px; } .brainband__copy h2 { font-size: 26px; } }

/* ===================== MOAT BAND ===================== */
.moat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .moat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .moat-grid { grid-template-columns: 1fr; } }
.moat-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex; flex-direction: column;
}
.moat-card:hover { border-color: var(--clay-400); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.moat-card--accent { background: linear-gradient(160deg, color-mix(in srgb, var(--clay-100) 55%, var(--paper)), var(--paper)); border-color: var(--clay-400); }
.moat-card__ic { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--clay-100); display: grid; place-items: center; font-size: 22px; margin-bottom: 12px; }
.moat-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
.moat-card p { font-size: 13.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }
.moat-card em { color: var(--ink-900); font-style: italic; font-weight: 600; }
.moat-link { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--clay-600); align-self: start; }
.moat-link:hover { color: var(--clay-500); }

.moat-flywheel {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  margin-top: 26px; padding: 18px 22px;
  background: var(--ink-900); color: var(--cream-bg); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.moat-flywheel span { white-space: nowrap; }
.moat-flywheel i { color: var(--clay-400); font-style: normal; font-size: 16px; }
@media (max-width: 700px) { .moat-flywheel { border-radius: var(--radius); font-size: 12.5px; } }

/* ===================== SECURITY BAND ===================== */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; transition: border-color .15s, box-shadow .15s;
}
.sec-card:hover { border-color: var(--clay-400); box-shadow: var(--shadow-md); }
.sec-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--clay-100); display: grid; place-items: center; font-size: 22px;
  margin-bottom: 12px;
}
.sec-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
.sec-card p { font-size: 13.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }

.sec-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.sec-badge {
  font-size: 12.5px; font-weight: 600;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 8px 16px; color: var(--ink-900);
}
.sec-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--ink-500); }
.sec-foot a { color: var(--clay-600); text-decoration: underline; text-underline-offset: 2px; }

/* BIDDER NETWORK CTA */
.netcta {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center;
  background: linear-gradient(160deg, var(--clay-100) 0%, var(--paper) 60%);
  border: 1px solid var(--clay-400);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow-md);
}
.netcta__copy h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 30px; line-height: 1.18; letter-spacing: -0.02em;
  margin: 6px 0 12px;
}
.netcta__copy p { color: var(--ink-700); font-size: 15px; margin: 0 0 18px; max-width: 56ch; }
.netcta__counts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.netcta__counts li {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px;
  text-align: center;
}
.netcta__counts strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: var(--clay-500); line-height: 1;
  letter-spacing: -0.02em;
}
.netcta__counts span { font-size: 12px; color: var(--ink-500); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; display: block; }
@media (max-width: 900px) { .netcta { grid-template-columns: 1fr; padding: 24px; } .netcta__copy h2 { font-size: 24px; } }

/* CTA */
.mkt-cta {
  max-width: 1280px; margin: 0 auto; padding: 72px 32px;
  text-align: center;
}
.mkt-cta h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 36px;
  letter-spacing: -0.02em; margin: 0 auto 22px; max-width: 30ch;
}
.mkt-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.mkt-foot {
  background: var(--ink-900); color: var(--cream-bg);
  padding: 40px 32px 28px; margin-top: 40px;
}
.mkt-foot .brand__tag { color: var(--ink-300); }
.mkt-foot__row {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start;
}
.mkt-foot nav ul, .mkt-foot__legal {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px;
}
.mkt-foot__legal { justify-content: end; }
[dir="rtl"] .mkt-foot__legal { justify-content: start; }
.mkt-foot a { color: var(--cream-bg); opacity: 0.8; }
.mkt-foot a:hover { opacity: 1; color: var(--clay-400); }
.mkt-foot__copy { max-width: 1280px; margin: 28px auto 0; color: var(--ink-300); font-size: 12px; text-align: center; }
@media (max-width: 720px) { .mkt-foot__row { grid-template-columns: 1fr; } .mkt-foot__legal { justify-content: start; } }

/* Pricing — who-we-serve strip + revenue-stream cards */
.who-strip{list-style:none;padding:0;margin:0 auto 32px;max-width:1100px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.who-strip li{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center;}
.who-strip strong{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink-900);margin-bottom:4px;}
.who-strip span{font-size:11.5px;color:var(--ink-500);line-height:1.4;}
@media (max-width:900px){.who-strip{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.who-strip{grid-template-columns:1fr;}}

.rev{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;height:100%;}
.rev--first{border-color:var(--clay-400);box-shadow:0 0 0 3px color-mix(in srgb, var(--clay-500) 12%, transparent);}
.rev__tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--clay-600);margin-bottom:8px;}
.rev h4{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0 0 8px;letter-spacing:-.01em;color:var(--ink-900);}
.rev p{font-size:13px;color:var(--ink-700);margin:0;line-height:1.5;}