/* =========================================================
   Cudator — Subscription vs API vs Self-hosted comparison
   Page-specific styles. Builds on cudator.css + marketing.css.
   ========================================================= */

/* ---------- Hero (compact, dark plate) ---------- */
.cmp-hero { padding-bottom: 0; }
.cmp-hero .container { max-width: 920px; }
.cmp-hero-inner { text-align: center; padding: 84px 0 72px; }
.cmp-hero h1 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  margin: 22px 0 0; text-wrap: balance;
}
.cmp-hero h1 .accent {
  background: linear-gradient(96deg, #fff 0%, #8FD4FF 48%, #29A7F0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cmp-hero .lede {
  font-size: var(--fs-20); line-height: 1.55; color: rgba(255,255,255,0.72);
  font-weight: 300; max-width: 660px; margin: 22px auto 0; text-wrap: pretty;
}
.cmp-hero .eyebrow { justify-content: center; }

/* legend chips floating at base of hero */
.cmp-legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px;
  margin-top: 38px;
}
.cmp-legend .lg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-12); color: rgba(255,255,255,0.6); }
.cmp-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.cmp-legend .dot.ok   { background: #46c98f; box-shadow: 0 0 0 3px rgba(70,201,143,0.18); }
.cmp-legend .dot.warn { background: #E6B34D; box-shadow: 0 0 0 3px rgba(230,179,77,0.16); }
.cmp-legend .dot.risk { background: #EC6A60; box-shadow: 0 0 0 3px rgba(236,106,96,0.16); }

/* ---------- Three approaches ---------- */
.approaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.appr {
  position: relative; background: #fff; border: 1px solid var(--cu-mist);
  border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column;
}
.appr.lead { border-color: var(--cu-cobalt-200); box-shadow: var(--shadow-md); }
.appr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.appr-ico { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.appr-ico svg { width: 23px; height: 23px; }
.appr-ico.sub  { background: var(--cu-danger-bg);  color: var(--cu-danger); }
.appr-ico.api  { background: var(--cu-warning-bg); color: var(--cu-warning); }
.appr-ico.host { background: var(--cu-success-bg); color: var(--cu-success); }
.appr h3 { font-family: var(--font-display); font-size: var(--fs-20); color: var(--cu-ink); line-height: 1.1; }
.appr .tier { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--cu-slate); margin-top: 3px; }
.appr p { font-size: var(--fs-14); line-height: 1.6; color: var(--fg-2); margin: 0 0 18px; }
.appr .verdict {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500;
  border-radius: var(--r-pill); padding: 7px 13px; align-self: flex-start;
}
.appr .verdict svg { width: 14px; height: 14px; }
.verdict.sub  { background: var(--cu-danger-bg);  color: var(--cu-danger); }
.verdict.api  { background: var(--cu-warning-bg); color: #B9800F; }
.verdict.host { background: var(--cu-success-bg); color: var(--cu-success); }

/* ---------- Comparison matrix ---------- */
.matrix-wrap { background: var(--cu-fog); border-top: 1px solid var(--cu-mist); border-bottom: 1px solid var(--cu-mist); }
.matrix {
  margin-top: 48px; background: #fff; border: 1px solid var(--cu-mist);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.matrix-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1.05fr; }

/* header row */
.mx-head { display: contents; }
.mx-head > div {
  background: var(--cu-ink); color: #fff;
  padding: 20px 22px; border-bottom: 1px solid var(--cu-ink-400);
}
.mx-head .mx-corner { background: var(--cu-ink-600); }
.mx-head .ttl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); line-height: 1.15; }
.mx-head .ttl .sub { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-12); color: rgba(255,255,255,0.55); margin-top: 4px; letter-spacing: 0.02em; }
.mx-head .mx-corner .lab { font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.mx-head > div:not(.mx-corner) { border-left: 1px solid rgba(255,255,255,0.12); }
.mx-head .col-host { background: linear-gradient(180deg, #16306b 0%, #122a5e 100%); }
/* header badges are real (i18n-able) elements, not CSS content, so they translate */
.mx-badge { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--r-pill); padding: 2px 8px; }
.mx-head .col-host .ttl .mx-badge { color: var(--cu-azure-200); background: rgba(41,167,240,0.16); border: 1px solid rgba(41,167,240,0.3); }

/* body cells */
.mx-row { display: contents; }
.mx-cell { padding: 18px 22px; border-bottom: 1px solid var(--cu-fog); font-size: var(--fs-14); line-height: 1.5; }
.mx-row:last-child .mx-cell { border-bottom: none; }
.mx-row .mx-dim {
  background: var(--cu-paper); border-right: 1px solid var(--cu-mist);
}
.mx-dim .d-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-15); color: var(--cu-ink); }
.mx-dim .d-desc { font-size: var(--fs-13); color: var(--cu-slate); line-height: 1.45; margin-top: 4px; }
.mx-cell:not(.mx-dim) { border-left: 1px solid var(--cu-mist); }
.mx-row:nth-child(even) .mx-cell:not(.mx-dim) { background: #fcfdff; }
.mx-cell .st { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 600; margin-bottom: 7px; letter-spacing: 0.01em; }
.mx-cell .st svg { width: 15px; height: 15px; flex-shrink: 0; }
.mx-cell .st.ok   { color: var(--cu-success); }
.mx-cell .st.warn { color: #B9800F; }
.mx-cell .st.risk { color: var(--cu-danger); }
.mx-cell .txt { display: block; color: var(--fg-2); }
.mx-cell.col-host-body { background: #f6f9ff !important; border-left: 1px solid var(--cu-cobalt-100); }

/* Cudator column — the governed answer, highlighted rightmost */
.mx-head .col-cud { background: linear-gradient(180deg, #2451c9 0%, #1c3f8f 100%); }
.mx-head .col-cud .ttl .mx-badge { color: #0b1020; background: var(--cu-azure); border: 1px solid var(--cu-azure); }
.mx-cell.col-cud-body { background: #eef4ff !important; border-left: 1px solid var(--cu-cobalt-200); }
/* mobile-only per-cell column label (real element so it translates) — hidden on desktop */
.mx-ml { display: none; }

/* ---------- Fine print decoded ---------- */
.finehead .eyebrow { color: var(--cu-cobalt); }
.fineprint { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.fp {
  background: #fff; border: 1px solid var(--cu-mist); border-radius: var(--r-lg);
  padding: 24px 26px; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fp:hover { border-color: var(--cu-cobalt-200); box-shadow: var(--shadow-sm); }
.fp .quote {
  font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.55; color: var(--cu-graphite);
  border-left: 2px solid var(--cu-silver); padding-left: 14px; margin: 0 0 16px;
}
.fp .quote .q { color: var(--cu-slate); font-style: normal; }
.fp .means { display: flex; align-items: flex-start; gap: 11px; }
.fp .means .ar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--cu-cobalt-050); color: var(--cu-cobalt); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 15px; margin-top: 1px;
}
.fp .means .body h4 { font-family: var(--font-display); font-size: var(--fs-15); color: var(--cu-ink); margin: 0 0 5px; }
.fp .means .body p { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-2); margin: 0; }

/* ---------- Bottom-line band ---------- */
.bottomline { background: #fff; }
.bl-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.bl-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.bl-list li { display: flex; gap: 13px; }
.bl-list .ico { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cu-cobalt-050); border: 1px solid var(--cu-cobalt-100); color: var(--cu-cobalt); }
.bl-list .ico svg { width: 19px; height: 19px; }
.bl-list h4 { font-family: var(--font-display); font-size: var(--fs-15); color: var(--cu-ink); margin: 1px 0 4px; }
.bl-list p { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-2); margin: 0; }

/* a small decision aside */
.decision {
  background: var(--cu-ink); color: #fff; border-radius: var(--r-xl); padding: 32px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.decision::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(420px 320px at 90% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(420px 320px at 90% 0%, #000, transparent 72%);
}
.decision > * { position: relative; z-index: 1; }
.decision h3 { font-family: var(--font-display); font-size: var(--fs-20); color: #fff; margin: 0 0 18px; }
.dl { display: flex; flex-direction: column; gap: 14px; }
.dl .row { display: flex; gap: 13px; align-items: flex-start; }
.dl .row .when { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--cu-azure-300); white-space: nowrap; flex-shrink: 0; width: 92px; padding-top: 2px; letter-spacing: 0.02em; }
.dl .row .pick { font-size: var(--fs-14); line-height: 1.5; color: rgba(255,255,255,0.82); }
.dl .row .pick b { color: #fff; font-weight: 600; }
.decision .note { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-13); line-height: 1.55; color: rgba(255,255,255,0.6); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .approaches { grid-template-columns: 1fr; }
  .fineprint { grid-template-columns: 1fr; }
  .bl-grid { grid-template-columns: 1fr; gap: 40px; }
  /* matrix → stacked per-dimension cards */
  .matrix { border: none; background: transparent; box-shadow: none; overflow: visible; }
  .matrix-grid { display: flex; flex-direction: column; gap: 16px; }
  .mx-head { display: none; }
  .mx-row { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--cu-mist); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
  .mx-row .mx-dim { border-right: none; border-bottom: 1px solid var(--cu-mist); }
  .mx-cell { border-bottom: 1px solid var(--cu-fog); padding: 16px 18px; border-left: none; }
  .mx-cell:not(.mx-dim) .mx-ml {
    display: block; font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--cu-slate); margin-bottom: 8px;
  }
  .mx-row:nth-child(even) .mx-cell:not(.mx-dim) { background: #fff; }
  .mx-cell.col-host-body { background: #f6f9ff !important; border-left: none; }
  .mx-cell.col-cud-body { background: #eef4ff !important; border-left: none; }
}
@media (max-width: 560px) {
  .cmp-hero-inner { padding: 60px 0 56px; }
}