/* RIVET "old way / RIVET way" (build spec F1 S2).
   Left: the buyer's reasons to wait, in their own words. Right: what RIVET does about each one, taken from the
   page's own copy and FACTS.md. The call to action sits in the right column only.
   Two columns on hairlines: no cards, no box borders, no side stripes (Brand OS).
   Mode follows the page: light by default; dark on html[data-mode="dark"] and on the dark course pages
   (body.gtm-dark on a light-mode document). Text colours sit on spans, so the gtm-dark element rules
   (p, li, dt, b ... with !important) never reach them. Logical properties throughout, for the Arabic twins. */

.oldnew{
  --on-ink:  var(--black, #000);
  --on-soft: var(--slate, #4A4A68);
  --on-said: var(--slate, #4A4A68);
  --on-head: var(--slate, #4A4A68);
  --on-line: var(--silver, #D1D1D9);
  --on-mark: var(--purple, #3B06D4);
}
html[data-mode="dark"] .oldnew,
body.gtm-dark .oldnew{
  --on-ink:  var(--white, #fff);
  --on-soft: var(--silver, #D1D1D9);
  --on-said: var(--slate-on-dark, #9A9BBD);
  --on-head: var(--slate-on-dark, #9A9BBD);
  --on-line: color-mix(in oklab, var(--white, #fff) 16%, transparent);
  --on-mark: var(--purple-500, #7B87FF);
}

.oldnew .sec-head{ margin-block-end: clamp(28px, 3.4vw, 48px); }
.oldnew__grid{ list-style: none; margin: 0; padding: 0; }

.oldnew__cols,
.oldnew__row{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 96px);
}
.oldnew__cols{ padding-block-end: 14px; }
.oldnew__cols span{ color: var(--on-head); }
.oldnew__cols span + span{ color: var(--on-mark); }

.oldnew__row{
  margin: 0;
  padding-block: clamp(20px, 2.2vw, 28px);
  border-block-start: 1px solid var(--on-line);
  align-items: start;
}
.oldnew__grid > .oldnew__row:last-child{ border-block-end: 1px solid var(--on-line); }
.oldnew__row--cta{ border-block-start: 0; padding-block-end: 0; }

/* the buyer's voice: recedes, like the .h-tail */
.oldnew .oldnew__said{ display: block; color: var(--on-said); text-wrap: pretty; }

/* the RIVET answer: a Lucide check, a short lead and one or two sentences */
.oldnew__ans{ display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.oldnew__ans > span{ max-inline-size: 36rem; }
.oldnew__ic{ display: block; width: 24px; height: 24px; margin-block-start: 1px; color: var(--on-mark); }
.oldnew .oldnew__lead{ display: block; color: var(--on-ink); }
.oldnew .oldnew__body{ display: block; margin-block-start: 6px; color: var(--on-soft); text-wrap: pretty; }

/* the call to action: right column only */
.oldnew__act{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-inline-start: 38px; }
.oldnew .oldnew__note{ display: block; inline-size: 100%; color: var(--on-head); }

@media (max-width: 760px){
  .oldnew__cols{ display: none; }
  .oldnew__row{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .oldnew__row > .oldnew__gap{ display: none; }
  .oldnew__act{ padding-inline-start: 0; }
  .oldnew__act .btn{ inline-size: 100%; justify-content: center; }
}