/* ============================================================
   Patois Labs — Build vs Buy page
   Page-specific styles. Loads AFTER ../styles.css and only adds
   what the shared system does not already provide (the three
   path cards, the comparison table, the "nobody prices in" band).
   Light-committed, same tokens as styles.css.
   ============================================================ */

/* page hero: same rhythm as .about-hero */
.bvb-hero{padding-top:clamp(44px,6vw,72px)}
.bvb-hero .lede{color:var(--ink-soft);font-size:clamp(18px,2.3vw,21px);
  line-height:1.5;margin:18px 0 0;max-width:600px}

/* ---------- three framing paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.path{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;backdrop-filter:blur(10px);box-shadow:var(--shadow-card)}
.path .idx{font-family:var(--font-mono);font-size:12px;color:var(--blue);
  display:block;margin-bottom:12px;letter-spacing:.04em;text-transform:uppercase}
.path h3{font-size:21px;font-weight:700;margin:0 0 12px}
.path p{color:var(--ink-soft);margin:0;font-size:16.5px;line-height:1.56}
.path-own{border-color:rgba(29,79,160,.28);
  background:linear-gradient(160deg,rgba(29,79,160,.07),rgba(255,210,63,.06)),var(--glass)}
.path-own .idx{color:var(--blue-bright)}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto;margin-top:34px;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
.cmp{border-collapse:collapse;width:100%;min-width:720px;
  font-size:15.5px;line-height:1.5}
.cmp caption{text-align:left;padding:22px 22px 0;color:var(--muted);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.cmp th,.cmp td{padding:15px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--font-head);font-weight:700;font-size:16px;
  color:var(--ink);border-bottom:2px solid rgba(29,79,160,.24);
  position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.cmp thead th.corner{background:transparent}
.cmp tbody th[scope="row"]{font-family:var(--font-head);font-weight:600;
  color:var(--ink);white-space:nowrap}
.cmp td{color:var(--ink-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td,.cmp tbody tr:hover th[scope="row"]{background:rgba(29,79,160,.03)}
/* highlight the Localization Studio column (3rd data col = 4th cell) */
.cmp col.col-own{background:rgba(29,79,160,.05)}
.cmp .own{color:var(--ink)}
.cmp thead th.own{color:var(--blue);border-bottom-color:rgba(29,79,160,.45)}
.table-note{margin:16px 2px 0;color:var(--muted);font-size:14.5px;font-style:italic}

/* ---------- "nobody prices in" band ---------- */
.priced .prose h2{margin-bottom:20px}
.priced .lead{color:var(--ink-soft);font-size:19px;max-width:640px;margin:0 0 26px}
.priced-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.priced-list li{background:var(--glass);border:1px solid var(--line);
  border-radius:18px;padding:20px 24px;backdrop-filter:blur(10px);
  box-shadow:var(--shadow-card)}
.priced-list h3{font-size:18px;font-weight:700;margin:0 0 6px}
.priced-list p{color:var(--ink-soft);margin:0;font-size:16px;line-height:1.55;max-width:640px}
.priced-list .path-own-note{border-color:rgba(29,79,160,.24)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .paths{grid-template-columns:1fr}
}