/* =============================================================
   Comparison deep-dive pages — shared component layer
   Loaded after site.css on comparisons/*.html. New classes only;
   colours, type, spacing all come from tokens.css / site.css.
   ============================================================= */

/* ---- Back-to-hub link ---- */
.back-hub { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:700; margin-bottom:22px; }
.back-hub:hover { color:var(--accent); }
.back-hub i { width:14px; height:14px; }

/* ---- Eyebrow centred helper (matches hub) ---- */
.cmp-dd .section-lead.center-lead .section-eyebrow { justify-content:center; }

/* ---- Metric strip (validated-numbers band) ---- */
.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric-tile { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:24px 22px; display:flex; flex-direction:column; gap:9px; }
.metric-tile .mv { font-size:34px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); color:var(--bud-electric-2); line-height:1.02; }
.metric-tile .ml { font-size:13px; color:var(--fg2); line-height:1.5; }

/* ---- Nutshell / advantage cards: icon-badge + heading/body + optional chip ---- */
.cmp-dd .adv-card { display:flex; flex-direction:column; gap:16px; }
.cmp-dd .adv-card .icon-badge { margin-bottom:2px; }
.cmp-dd .adv-card .chip { margin-top:auto; }

/* ---- Two-column comparison table (competitor vs Bud) ---- */
.ctab-wrap { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
table.ctab { width:100%; border-collapse:collapse; font-size:13px; color:var(--fg2); table-layout:fixed; }
table.ctab th, table.ctab td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); border-right:1px solid var(--border); vertical-align:top; line-height:1.5; }
table.ctab th:last-child, table.ctab td:last-child { border-right:none; }
table.ctab tr:last-child td, table.ctab tr:last-child th { border-bottom:none; }
table.ctab thead th { font-size:12px; font-weight:var(--fw-bold); color:var(--fg2); background:rgba(255,255,255,.02); }
table.ctab thead th.rowhead { width:22%; }
table.ctab thead th.bud-col { color:var(--bud-electric-2); background:rgba(140,51,239,0.16); border-right:1px solid rgba(183,133,244,0.30); }
table.ctab tbody td.bud-col { background:rgba(140,51,239,0.08); border-right:1px solid rgba(183,133,244,0.30); color:var(--fg1); }
table.ctab tbody td.bud-col b, table.ctab tbody td.bud-col strong { color:var(--bud-electric-2); font-weight:700; }
table.ctab tbody th { font-weight:var(--fw-semibold); color:var(--fg1); width:22%; font-size:13px; }
table.ctab tbody tr:nth-child(even) th, table.ctab tbody tr:nth-child(even) td:not(.bud-col) { background:rgba(255,255,255,0.02); }
table.ctab tbody tr:nth-child(even) td.bud-col { background:rgba(140,51,239,0.12); }
/* verdict pill badge centred above a cell's prose (Basic, Advanced, Limited, Native…) */
table.ctab .tag { display:block; width:max-content; max-width:100%; margin:0 auto 12px; padding:5px 14px; border-radius:var(--radius-pill); font-size:12px; letter-spacing:.01em; font-weight:700; text-align:center; color:var(--fg2); background:rgba(255,255,255,.05); }
table.ctab .tag.t-warn { color:var(--bud-amber); background:rgba(245,180,0,.13); }
table.ctab .tag.t-neg  { color:var(--bud-red); background:var(--bud-red-soft); }
table.ctab .tag.t-pos  { color:var(--bud-electric-2); background:var(--accent-muted); }
/* Bud-column verdicts always read as positive */
table.ctab td.bud-col .tag { color:var(--bud-electric-2); background:var(--accent-muted); }
/* yes / no / partial markers */
.mk { font-weight:700; }
.mk.yes { color:var(--bud-success); }
.mk.no { color:var(--fg3); }
.mk.part { color:var(--bud-amber); }

/* ---- Cost-table variant: right-align figures, total row emphasis ---- */
table.ctab.cost td.num, table.ctab.cost th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.ctab.cost tr.total th, table.ctab.cost tr.total td { font-weight:700; color:var(--fg1); background:rgba(140,51,239,0.10); border-top:1px solid var(--border-strong); }
table.ctab.cost tr.total td.save { color:var(--bud-success); }

/* ---- Scorecard rows (NVIDIA head-to-head scoring) ---- */
.score { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.score-row { display:grid; grid-template-columns:1fr 64px 64px 150px; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); font-size:13px; }
.score-row .dim { color:var(--fg1); }
.score-row .sc { font-family:var(--font-mono); font-weight:700; text-align:center; }
.score-row .sc.comp { color:var(--fg3); }
.score-row .sc.bud { color:var(--bud-electric-2); }
.score-row .win { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--fg3); text-align:right; }
.score-row .win.b { color:var(--bud-electric-2); }
.score-head { display:grid; grid-template-columns:1fr 64px 64px 150px; gap:14px; padding-bottom:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--fg3); }
.score-head .c { text-align:center; }
.score-head .w { text-align:right; }

/* ---- "What is Bud" green pricing card + included list (Azure page) ---- */
.price-card { margin-top:24px; background:linear-gradient(135deg,#3FB070 0%,#2A8F54 100%); border-radius:var(--radius-2xl); padding:30px 28px; text-align:center; color:#fff; box-shadow:var(--shadow-3); }
.price-card .pc-label { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.95; margin-bottom:12px; }
.price-card .pc-amount { font-size:52px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.price-card .pc-amount span { font-size:18px; font-weight:500; opacity:.9; letter-spacing:0; }
.price-card .pc-sub { margin-top:12px; font-size:13px; opacity:.85; }
.incl-head { margin-top:24px; font-weight:var(--fw-bold); color:var(--fg1); font-size:15px; }
.incl-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.incl-list li { position:relative; padding-left:26px; font-size:14px; color:var(--fg2); line-height:1.5; }
.incl-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--bud-success); font-weight:700; }
.incl-list li b { color:var(--fg1); font-weight:var(--fw-semibold); }

/* ---- Component stack list (Azure page) ---- */
.stack-list { display:flex; flex-direction:column; gap:12px; }
.stack-row { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--border); border-left:3px solid var(--bud-success); border-radius:var(--radius-lg); background:var(--surface); padding:15px 18px; }
.stack-row .sr-name { font-weight:var(--fw-semibold); color:var(--fg1); font-size:15px; }
.stack-row .sr-desc { font-size:12.5px; color:var(--fg3); margin-top:3px; line-height:1.4; }
.stack-row .sr-az { flex:none; font-size:12px; font-weight:600; color:#9DB6F2; background:rgba(125,145,225,.13); border:1px solid rgba(125,145,225,.24); border-radius:var(--radius-pill); padding:7px 13px; white-space:nowrap; }
@media (max-width:760px){ .stack-row { flex-direction:column; align-items:flex-start; gap:10px; } .stack-row .sr-az { white-space:normal; } }

/* ---- Summary checklist (Azure page) ---- */
.sum-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sum-item { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:16px 18px; font-size:14px; color:var(--fg2); line-height:1.55; }
.sum-item i, .sum-item svg { width:18px; height:18px; color:var(--bud-success); flex:none; margin-top:1px; }
.sum-item b { color:var(--fg1); font-weight:var(--fw-semibold); }
@media (max-width:760px){ .sum-list { grid-template-columns:1fr; } }

/* ---- Bottom-line callout (reused from hub quad-bottomline) ---- */
.dd-callout { border-left:3px solid var(--accent); background:var(--accent-muted); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:18px 24px; font-size:15px; color:var(--fg2); line-height:1.6; }
.dd-callout .label { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:700; display:block; margin-bottom:7px; }
.dd-callout strong { color:var(--fg1); font-weight:var(--fw-semibold); }

/* ---- Layer list (NVIDIA 7-layer architecture) ---- */
.layer-list { display:flex; flex-direction:column; gap:12px; }
.layer { display:grid; grid-template-columns:150px 1fr; gap:20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:18px 22px; }
.layer .lname { font-weight:var(--fw-semibold); color:var(--bud-electric-2); font-size:14px; }
.layer .lname .lk { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); font-weight:700; margin-bottom:4px; }
.layer ul { margin:0; padding-left:18px; color:var(--fg2); font-size:13px; line-height:1.6; }

@media (max-width:760px){
  .metric-strip { grid-template-columns:1fr 1fr; }
  .ctab-wrap { overflow-x:auto; }
  table.ctab { min-width:620px; }
  .score-row, .score-head { grid-template-columns:1fr 48px 48px 96px; gap:8px; font-size:12px; }
  .layer { grid-template-columns:1fr; gap:8px; }
}