/* ============================================================
   FORESHOCK — site additions
   New components for the product site, layered on foreshock.css.
   Same instrument/dark vocabulary. No new fonts or colors.
   ============================================================ */

/* ---------- system banner (admin-set, dismissable) ---------- */
.sys-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 44px 10px 20px;
  background: var(--accent-glow);
  border-bottom: 1px solid var(--border-strong);
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.sys-banner span {
  max-width: 900px;
}
.sys-banner__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
}
.sys-banner__close:hover {
  opacity: 1;
}

/* ---------- promo banner (admin-set, dismissable) ----------
   Scoped to the packages table on pricing.html only — sits inside the
   same .container as .cmp-wrap, so it naturally matches the table width. */
.promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 44px 12px 20px;
  margin-bottom: 16px;
  background: rgba(45, 189, 125, 0.16);
  border: 1px solid rgba(45, 189, 125, 0.4);
  border-radius: var(--r-lg);
  color: #4fe0a0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.promo-banner__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
}
.promo-banner__close:hover {
  opacity: 1;
}

/* ---------- global type / spacing tuning ---------- */
h1 {
  margin-bottom: 0.16em;
} /* slightly larger h1 bottom margin */
.btn--lg {
  margin-block: 3px;
} /* more breathing room around CTAs */

/* metadata / hint marker (replaces "//") */
.meta-cue {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.15em;
}

/* ---------- ported layout: hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}
.hero__headline {
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
}
.hero__sub {
  margin-top: 24px;
  max-width: 52ch;
}
.hero__cta {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero__meta {
  display: flex;
  gap: 26px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero__meta .label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hero__meta .label b {
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0;
  font-weight: 500;
  font-family: var(--font-display);
}
.hero__col-r {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Let the grid cell shrink below the panel's intrinsic content width so the
     no-wrap spectrum header can't expand .hero__grid past the viewport. */
  min-width: 0;
}

/* hero search (index only) — sits above the panel, right-aligned */
.hero-search {
  display: flex;
  justify-content: flex-end;
}
.hero-search form {
  display: flex;
  align-items: center;
  gap: 0;
  width: min(340px, 100%);
}
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.62em 0.85em;
}
.hero-search input[type="search"]::placeholder {
  color: var(--dim);
}
.hero-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.hero-search button {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--accent);
  font-size: 1rem;
  padding: 0 0.8em;
  cursor: pointer;
  align-self: stretch;
}
.hero-search button:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* ---------- ported layout: logo strip ---------- */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 28px;
  flex-wrap: wrap;
}
.strip__label {
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.strip__logos {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}
.strip__logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--muted);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.strip__logo .glyph {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--muted);
  border-radius: 3px;
  display: inline-block;
}
.strip__logo .glyph.c {
  border-radius: 50%;
}
.strip__logo .glyph.t {
  border-radius: 0;
  transform: rotate(45deg);
}

/* ---------- ported layout: two-column signal band (cmr) ---------- */
.cmr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) {
  .cmr {
    grid-template-columns: 1fr;
  }
}
.cmr__viz {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
  overflow: hidden;
}
.cmr__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  min-width: 0;
}
.cmr__row + .cmr__row {
  border-top: 1px solid var(--border);
}
.cmr__row .label {
  width: 108px;
  flex: none;
}
.cmr__row canvas {
  flex: 1;
  height: 34px;
  min-width: 0;
}

/* ---------- ported layout: CTA band ---------- */
.cta-band {
  position: relative;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 160% at 50% 120%, rgba(var(--accent-rgb),
    0.10), transparent 60%), var(--surface);
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 64px);
  text-align: center;
  overflow: hidden;
}
.cta-band canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  width: 100%;
  opacity: 0.5;
}
.cta-band > * {
  position: relative;
}

/* ---------- footer search (DuckDuckGo) ---------- */
.footer__social {
  flex-wrap: wrap;
}
.foot-search {
  display: flex;
  align-items: center;
  gap: 0;
}
.foot-search input[type="search"] {
  width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 0.5em 0.7em;
}
.foot-search input[type="search"]::placeholder {
  color: var(--dim);
}
.foot-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.foot-search button {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--accent);
  font-size: 0.9rem;
  padding: 0 0.7em;
  cursor: pointer;
  align-self: stretch;
}
.foot-search button:hover {
  border-color: var(--accent);
}
@media (max-width: 380px) {
  .foot-search input[type="search"] {
    width: 150px;
  }
}

/* ---------- pricing: price colors + Font Awesome bullets ---------- */
.tier__price.is-green .tier__cur,
.tier__price.is-green .tier__amt {
  color: #35c66b;
}
.tier__price.is-rainbow .tier__cur,
.tier__price.is-rainbow .tier__amt,
.rainbow-text {
  background: linear-gradient(95deg, #ff6a70 0%, #ffb22e 26%, #35c66b 52%,
    #19d0e3 74%, #8b7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tier__feat li i.fa-icon,
.tier__feat li .fa-solid,
.tier__feat li .fa-regular {
  color: var(--accent);
  flex: none;
  width: 17px;
  text-align: center;
  font-size: 0.82rem;
  margin-top: 0.15em;
}
.tier__feat li .inherit.fa-solid {
  color: var(--dim);
}

/* ---------- generic page hero ---------- */
.phero {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(28px, 4vw, 44px);
}
.phero .eyebrow {
  margin-bottom: 20px;
}
.phero h1 {
  max-width: 20ch;
}
.phero p.lead {
  max-width: 60ch;
  margin-top: 20px;
}
.phero--center {
  text-align: center;
}
.phero--center .eyebrow {
  justify-content: center;
}
.phero--center .eyebrow::before {
  display: none;
}
.phero--center h1,
.phero--center p.lead {
  margin-inline: auto;
}

.section-head {
  max-width: 64ch;
}
.section-head .h2 {
  margin-top: 14px;
}
.section-head p {
  margin-top: 14px;
}

/* prose blocks shared by aldous/privacy */
.prose p {
  color: var(--muted);
  line-height: 1.7;
}
.prose p + p {
  margin-top: 1em;
}
.prose strong {
  color: var(--text);
  font-weight: 600;
}
.prose a {
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
}
.prose h3 {
  margin: 34px 0 12px;
}
.prose ul {
  list-style: none;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.prose ul li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.6;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 2px;
}
.prose ul li strong {
  color: var(--text);
}

/* ---------- problem cards (home) ---------- */
.probs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .probs {
    grid-template-columns: 1fr;
  }
}
.prob {
  display: flex;
  flex-direction: column;
}
.prob__ico {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--accent);
}
.prob h3 {
  margin-bottom: 10px;
}
.prob p {
  color: var(--muted);
  font-size: 0.96rem;
}

/* ---------- no-black-box banner ---------- */
.tenets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 820px) {
  .tenets {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .tenets {
    grid-template-columns: 1fr;
  }
}
.tenet {
  background: var(--surface);
  padding: 26px 24px;
}
.tenet .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.tenet p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}
.tenet b {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* ---------- emotional equalizer ---------- */
.eq-panel {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,0.7);
}
.eq-panel__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.012);
}
.eq-panel__bar .scope__dots {
  margin-left: auto;
}
/* Wrapper that lets the spectrum panel scroll horizontally on phones too
   narrow to hold it, rather than shrinking (and clipping) the animation or
   blowing out the hero. On wider screens it's a transparent pass-through. */
.eq-scroll {
  min-width: 0;
}
@media (max-width: 600px) {
  .eq-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* room for the shadow + scrollbar so neither is clipped by overflow */
    padding-bottom: 6px;
  }
  .eq-scroll .eq-panel {
    /* keep the 28-bar spectrum at its coherent natural width and scroll it */
    min-width: max-content;
  }
}
.eq-canvas {
  width: 100%;
  height: clamp(200px, 26vw, 280px);
  display: block;
}
.eq-panel__readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.eq-panel__readout div {
  padding: 13px 16px;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
}
.eq-panel__readout div:last-child {
  border-right: 0;
}
.eq-panel__readout .k {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.eq-panel__readout .v {
  font-size: 1rem;
  color: var(--text);
  margin-top: 5px;
}
.eq-panel__readout .v.amber {
  color: var(--accent);
}

/* ---------- feature rows ---------- */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.frow + .frow {
  margin-top: clamp(52px, 7vw, 96px);
}
.frow--flip .frow__media {
  order: -1;
}
@media (max-width: 880px) {
  .frow {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .frow--flip .frow__media {
    order: 0;
  }
}
.frow__media {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 26px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.frow h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.frow p {
  color: var(--muted);
  line-height: 1.6;
}
.frow .btn {
  margin-top: 22px;
}

/* LCE projection viz */
.lce {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lce__row {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 14px;
}
.lce__row .label {
  font-size: 0.66rem;
}
.lce__track {
  height: 14px;
  border-radius: 2px;
  background: rgba(233,240,244,0.06);
  overflow: hidden;
  position: relative;
}
.lce__track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.lce__val {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}
.lce__val.amber {
  color: var(--accent);
}

/* shunt cards */
.shunts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 760px) {
  .shunts {
    grid-template-columns: 1fr;
  }
}

/* ---------- case study tabs ---------- */
.segtabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
}
.segtab {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .16s var(--ease);
  white-space: nowrap;
  border: 0;
  background: none;
}
.segtab:hover {
  color: var(--text);
}
.segtab.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.casepanel {
  display: none;
}
.casepanel.is-active {
  display: block;
}
.case-feats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 760px) {
  .case-feats {
    grid-template-columns: 1fr;
  }
}
.case-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
}
.case-feat .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.case-feat h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-bottom: 9px;
}
.case-feat p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------- integration cards ---------- */
.intgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .intgrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .intgrid {
    grid-template-columns: 1fr;
  }
}
.intcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.intcard:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.intcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.intcard__glyph {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
}
.intcard h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}
.intcard p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.intcard .soon {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 9px;
}
.intcard.is-live .intcard__glyph {
  border-color: rgba(var(--accent-rgb),0.4);
}

/* ---------- one-shot classifier demo ---------- */
.demo {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.demo__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.012);
}
.demo__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 760px) {
  .demo__body {
    grid-template-columns: 1fr;
  }
}
.demo__in {
  padding: 22px;
  border-right: 1px solid var(--border);
}
@media (max-width: 760px) {
  .demo__in {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}
.demo textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 12px;
}
.demo textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.demo__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.demo__chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 11px;
  cursor: pointer;
  background: var(--bg);
  transition: all .15s var(--ease);
}
.demo__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.demo__out {
  padding: 22px;
}
.demo__out .empty {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
}
.demo__scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo__score {
  display: grid;
  grid-template-columns: 110px 1fr 44px;
  align-items: center;
  gap: 12px;
}
.demo__score .nm {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.demo__score .tk {
  height: 10px;
  background: rgba(233,240,244,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.demo__score .tk i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .5s var(--ease);
}
.demo__score .pc {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text);
  text-align: right;
}
.demo__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ---------- aldous model-card ---------- */
.mcard {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  overflow: hidden;
}
.mcard__head {
  padding: clamp(26px, 4vw, 40px);
  border-bottom: 1px solid var(--border);
}
.mcard__id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mcard__id .org {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--dim);
}
.mcard__id .slash {
  color: var(--faint);
}
.mcard__id .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
}
.mcard__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.mtag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  background: var(--bg);
}
.mtag .g {
  color: var(--accent);
}
.mcard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
@media (max-width: 700px) {
  .mcard__stats {
    grid-template-columns: 1fr 1fr;
  }
}
.mstat {
  padding: 22px clamp(20px,3vw,32px);
  border-right: 1px solid var(--border);
}
.mstat:last-child {
  border-right: 0;
}
@media (max-width: 700px) {
  .mstat:nth-child(2) {
    border-right: 0;
  }
}
.mstat .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}
.mstat .v small {
  font-size: 0.9rem;
  color: var(--accent);
}
.mstat .k {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 8px;
}

/* model-card content layout w/ sticky side nav */
.mlayout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .mlayout {
    grid-template-columns: 1fr;
  }
}
.mnav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 880px) {
  .mnav {
    display: none;
  }
}
.mnav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding: 8px 12px;
  border-left: 1px solid var(--border);
  transition: all .15s var(--ease);
}
.mnav a:hover,
.mnav a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.msec {
  padding-top: 8px;
}
.msec + .msec {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.msec h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 8px;
}

/* equation block */
.eqn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px clamp(18px,3vw,28px);
  margin: 22px 0;
  overflow-x: auto;
}
.eqn .katex {
  color: var(--text);
}
.eqn .katex-display {
  margin: 0 !important;
}
.eqn__cap {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim);
  margin-top: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}

/* centroid scatter viz */
.scatter {
  width: 100%;
  height: auto;
  display: block;
}

/* dimension range pill */
.dimrange {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.dimrange .pill {
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 6px 14px;
  color: var(--text);
}
.dimrange .pill.amber {
  border-color: rgba(var(--accent-rgb),0.45);
  color: var(--accent);
}

/* ---------- contact form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.cform {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 38px);
}
.cform .field {
  margin-top: 18px;
}
.cform .field:first-of-type {
  margin-top: 0;
}
.cform .field label {
  color: var(--muted);
}
.cform textarea.input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.cform .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cform .row2 .field {
  margin-top: 0;
}
@media (max-width: 520px) {
  .cform .row2 {
    grid-template-columns: 1fr;
  }
}
.captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.captcha__box {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.captcha.is-checked .captcha__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.captcha__q {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.captcha__q b {
  color: var(--text);
}
.contact-aside .keyrow {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.contact-aside .keyrow:last-child {
  border-bottom: 1px solid var(--border);
}
.contact-aside .keyrow .ix {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.8rem;
  flex: none;
  padding-top: 2px;
}
.contact-aside .keyrow b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-aside .keyrow p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- pricing: tier card ---------- */
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier--pop {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.tier__flag {
  position: absolute;
  top: -1px;
  right: 22px;
  transform: translateY(-50%);
}
.tier__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier--pop .tier__name {
  color: var(--accent);
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 18px;
}
.tier__cur {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--muted);
  align-self: flex-start;
  margin-top: 7px;
}
.tier__amt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier__per {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--dim);
}
.tier__bill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dim);
  margin-top: 8px;
}
.tier__desc {
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 16px;
  min-height: 4.65em;
}
.tier .btn {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
}
.tier__feat {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.tier__feat li {
  display: flex;
  gap: 11px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- pricing: row grouping + relief panels ---------- */
.tiers-panel {
  background: #40454b;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
  margin-top: 40px;
}
.tiers-panel + .tiers-panel {
  margin-top: 20px;
}
.tiers-panel--top {
  max-width: 1000px;
  margin-inline: auto;
}
.tiers3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .tiers3 {
    grid-template-columns: 1fr;
  }
}

/* Integrator — full-width row, stretched horizontally */
.tier--wide {
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.tier--wide .tier__intro {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
}
.tier--wide .tier__feat {
  flex: 1;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid var(--border);
  padding-top: 0;
  padding-left: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
}
@media (max-width: 760px) {
  .tier--wide {
    flex-direction: column;
    align-items: stretch;
  }
  .tier--wide .tier__intro {
    flex: none;
  }
  .tier--wide .tier__feat {
    grid-template-columns: 1fr;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 22px;
    margin-top: 22px;
  }
}

.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  flex-wrap: wrap;
}
.guarantee .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* ---------- compare table ---------- */
.cmp-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  background: var(--surface);
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.cmp th,
.cmp td {
  padding: 16px 22px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.cmp thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-strong);
}
.cmp thead th.pop {
  color: var(--accent);
}
.cmp th:first-child,
.cmp td:first-child {
  text-align: left;
  color: var(--muted);
  font-size: 0.88rem;
  width: 26%;
}
.cmp tbody tr:last-child td {
  border-bottom: 0;
}
.cmp .grp td {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
}
.cmp .val {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.cmp .ck {
  color: var(--accent);
  font-size: 1.05rem;
}
.cmp .dash {
  color: var(--faint);
}
.cmp th:nth-child(3),
.cmp td:nth-child(3) {
  background: rgba(var(--accent-rgb), 0.05);
}
@media (max-width: 700px) {
  .cmp th,
  .cmp td {
    padding: 14px 16px;
  }
}

/* ---------- FAQ accordion ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-inline: auto;
}
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.faq__item.is-open {
  border-color: var(--border-strong);
}
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.faq__trigger .pm {
  flex: none;
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform .25s var(--ease);
}
.faq__item.is-open .faq__trigger .pm {
  transform: rotate(45deg);
}
.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}
.faq__panel p {
  padding: 0 24px 22px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.94rem;
}

/* ---------- breadcrumb / sub-nav for aldous ---------- */
.subhero {
  padding-top: clamp(36px, 5vw, 64px);
}

/* footer note line */
.footer__col a.is-soon::after {
  content: "soon";
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 100px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}