/* DrivenOS comparison section (A120): a separate app for every job (priced) beside DrivenOS doing all of it.
   Idea from Pinnacle AI's "fifteen apps" panels; styling ours: dark cards, the DrivenOS card lit Pine. */
/* The cards share the outer grid's rows (subgrid), so the title, list, terms and total line up across both */
.cmp { --cmp-line: #2d2d38; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: clamp(28px, 3vw, 44px); border: 1px solid var(--cmp-line); border-radius: 24px; background: var(--surface-2); }
.cmp-card--ours { --cmp-line: rgb(62 138 99 / .3); border-color: rgb(62 138 99 / .7);
  background: radial-gradient(120% 70% at 100% 0%, rgb(var(--glow-green) / .14), transparent 62%), #10160f; }
.v3-page .cmp-card h3 { margin: 0 0 24px; color: var(--text); font: 800 clamp(28px, 2.4vw, 36px)/1.05 var(--hf); letter-spacing: .01em; }
.v3-page .cmp-card--ours h3 { color: var(--pop); }

/* Two columns of rows; each row's line runs across both columns, edge to edge */
.cmp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; margin: 0; padding: 0; list-style: none; }
.cmp-list li { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 0; border-top: 1px solid var(--cmp-line); }
.cmp-list li:nth-child(odd) { padding-right: 16px; }
.cmp-list li:nth-child(even) { padding-left: 16px; }
.cmp-list--apps li { justify-content: space-between; }
.cmp-list b { color: var(--text); font: 600 15px/1.3 Inter, system-ui, sans-serif; }
.cmp-list small { display: block; margin-top: 3px; color: #8b8b96; font-size: 13px; line-height: 1.3; }
.cmp-list em { flex: none; color: var(--text); font: 600 15px/1 Inter, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.cmp-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pop); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp-nw { white-space: nowrap; }

.cmp-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 32px; }
.cmp-terms div { padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .04); }
.cmp-terms dt { color: #8b8b96; font: 600 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.cmp-terms dd { margin: 6px 0 0; color: var(--text); font: 500 14px/1.35 Inter, system-ui, sans-serif; }

.cmp-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 24px; border-top: 2px solid var(--cmp-line); }
.cmp-total b { display: block; color: var(--text); font: 600 15px/1.3 Inter, system-ui, sans-serif; }
.cmp-total small { display: block; max-width: 34ch; margin-top: 4px; color: #8b8b96; font-size: 13px; line-height: 1.4; }
.cmp-total strong { flex: none; color: var(--text); font: 800 clamp(44px, 4vw, 64px)/.9 var(--hf); letter-spacing: -.01em; white-space: nowrap; }
.cmp-card--ours .cmp-total strong { color: var(--pop); }
.cmp-total i { margin-left: 4px; color: #8b8b96; font: 500 15px/1 Inter, system-ui, sans-serif; font-style: normal; }
.cmp-source { max-width: 90ch; margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }

@container (max-width: 1200px) {   /* side by side only when each card has room for its two-column list */
  .cmp { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cmp-list { grid-template-columns: 1fr; }
  .cmp-list li:nth-child(n) { min-height: 0; padding: 14px 0; }
  .cmp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-total { flex-direction: column; align-items: flex-start; gap: 12px; }
}