/* Sales-deck components shared by index / for-teams / pricing: the hub diagram, the
   false-premise example, plan + comparison tables, compact card grids. Theme-aware via
   the tokens in theme.css; no fixed widths, so nothing scrolls sideways on a phone. */
.deck { --wrong: #E5484D; }

/* ---- Hub: three inputs → engine → joint output + audit trail ---- */
.hub-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; margin: 6px 0 18px; }
.hub-tabs button { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); background: none; border: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.hub-tabs button.on { background: var(--panel); color: var(--text-primary); }
.hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.hub svg { width: 100%; height: auto; display: block; }
.hub .in-a { fill: var(--consensus); stroke: var(--consensus); }
.hub .in-b { fill: var(--novel); stroke: var(--novel); }
.hub .in-c { fill: var(--orange); stroke: var(--orange); }
.hub .wire { fill: none; stroke-width: 3; }
.hub .ring-o { fill: var(--panel); stroke: var(--border); stroke-width: 2; }
.hub .ring-i { fill: var(--bg); stroke: var(--text-secondary); stroke-width: 2; }
.hub .out { stroke: var(--agency); stroke-width: 3; fill: none; }
.hub .out-head { fill: var(--agency); }
.hub .trail { stroke: var(--text-secondary); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.hub .trail-head { fill: var(--text-secondary); }
.hub .lbl { fill: var(--text-primary); font: 700 15px var(--font-ui); }
.hub .sub { fill: var(--text-secondary); font: 12px var(--font-mono); }
.hub .eng { fill: var(--text-secondary); font: 12px var(--font-mono); }
.hub-boxes { display: grid; gap: 12px; }
.hub-box { border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.hub-box.joint { border-color: var(--agency); }
.hub-box h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; color: var(--text-secondary); }
.hub-box.joint h4 { color: var(--agency); }
.hub-box ul { margin: 0; padding-left: 18px; }
.hub-box li { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.hub-box.joint li::marker { color: var(--agency); }
.hub-stat { margin: 14px 0 0; font-size: 15px; color: var(--text-secondary); min-height: 1.5em; }
.hub-stat b { color: var(--consensus); font-size: 18px; margin-right: 6px; }
.fn { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-top: 10px; }
.fn a { color: inherit; }

/* ---- Problem: DarkBench patterns + "can't run it yourself" ---- */
.agenda { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin: 16px 0 4px; }
.agenda > div { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.agenda h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0 0 10px; }
.agenda dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.agenda dt { font-weight: 700; color: var(--text-primary); }
.agenda dd { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.agenda p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.agenda .punch { color: var(--orange); font-weight: 700; }

/* ---- False premise, caught ---- */
.case-q { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 16px; color: var(--text-primary); margin: 14px 0 12px; }
.case-q b { font-family: var(--font-mono); color: var(--text-secondary); margin-right: 8px; }
.case { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.claims { display: grid; gap: 10px; }
.claim { border: 1px solid var(--border); border-left: 4px solid var(--wrong); border-radius: 10px; padding: 10px 14px; }
.claim.ok { border-left-color: var(--consensus); }
.claim q { color: var(--text-primary); font-size: 14.5px; }
.claim small { display: block; color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--wrong); color: var(--wrong); border-radius: 999px; padding: 1px 8px; margin-right: 8px; }
.claim.ok .tag { border-color: var(--consensus); color: var(--consensus); }
.conv { border: 1px solid var(--agency); border-radius: 14px; padding: 16px 18px; }
.conv h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--agency); margin: 0 0 8px; }
.conv .big { font-family: var(--font-mono); font-size: 34px; font-weight: 800; color: var(--consensus); }
.conv p { font-size: 13.5px; color: var(--text-secondary); margin: 6px 0 0; }
.case-punch { font-weight: 700; color: var(--text-primary); margin-top: 14px; }

/* ---- Compact card grids (guardrails, integration, security, deployment) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cards.c2 { grid-template-columns: 1fr; } }
.cards > div { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.cards h4 { font-size: 15px; margin: 0 0 6px; color: var(--text-primary); }
.deck .cards p, .deck .cards li, .cards p, .cards li { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.cards ul { margin: 0; padding-left: 18px; }
.deck .cards .k, .cards .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--consensus); margin: 0 0 6px; }

/* ---- Plan + comparison tables ---- */
.plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 6px; }
.plan-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13.5px; }
.plan-table th, .plan-table td { padding: 9px 10px; text-align: center; border-top: 1px solid var(--border); color: var(--text-secondary); }
.plan-table th:first-child, .plan-table td:first-child { text-align: left; color: var(--text-primary); }
.plan-table thead th { border-top: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.plan-table thead th.pro { color: var(--consensus); }
.plan-table thead th.ent, .plan-table thead th.us { color: var(--agency); }
.plan-table tbody tr.key td { font-weight: 700; color: var(--text-primary); }
.plan-table .y { color: var(--consensus); font-size: 16px; }
.plan-table .p { opacity: .7; }
.plan-table .n { opacity: .5; }
.plan-table th:first-child, .plan-table td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
@media (max-width: 640px) {
  .plan-table { font-size: 12.5px; }
  .plan-table th:first-child, .plan-table td:first-child { max-width: 130px; }
}
.legend { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

@media (max-width: 640px) {
  .hub, .agenda, .case { grid-template-columns: 1fr; }
  .agenda dl { grid-template-columns: 1fr; gap: 2px; }
  .agenda dd { margin-bottom: 8px; }
}

/* Earn — reuses the hub diagram */
.earn-big { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; }
.deck .hub-box.earn p:not(.earn-big) { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* One quiet next step at the end of a section */
.next-step { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--consensus); text-decoration: none; }
.next-step:hover { text-decoration: underline; }