/* =============================================================
   TransRisk v3 — why-transrisk.css
   Styles specific to why-transrisk.html
============================================================= */

/* ========================
   HERO
======================== */

.wtr-hero {
  position: relative;
  background: var(--color-navy);
  padding: 96px 40px 88px;
  text-align: center;
  overflow: hidden;
}

.wtr-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.wtr-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.wtr-hero-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 760px;
  margin: 0;
}

.wtr-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: rgba(255,255,255,0.62);
  max-width: 600px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 720px) {
  .wtr-hero { padding: 72px 24px 64px; }
}


/* ========================
   SECTION 1 — DIFFERENTIATION (3 COLUMNS)
======================== */

.diff-section {
  background: #fff;
}

.diff-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.diff-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.diff-col:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
  border-left-color: var(--color-green-light);
}

/* Override separator — cards are self-contained */
.diff-col + .diff-col {
  padding-left: 24px;
  border-left: 4px solid var(--color-green);
}

.diff-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 122, 58, 0.08);
  border-radius: var(--radius-lg);
  color: var(--color-green);
  flex-shrink: 0;
}

.diff-icon svg {
  width: 26px;
  height: 26px;
}

.diff-col-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.diff-col-body {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 860px) {
  .diff-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 600px;
  }

  .diff-col + .diff-col {
    padding-left: 24px;
    border-top: none;
    border-left: 4px solid var(--color-green);
  }
}


/* ========================
   SECTION 1b — SIX REASONS CAROUSEL

   Six cards on a scroll-snap rail: three up on desktop, two on
   tablet, one-and-a-peek on mobile. Arrows and dots are built by
   js/reasons-carousel.js; with no JS the rail is still a native
   horizontal scroller, so every reason stays reachable.

   Cards stretch to the height of the tallest one, so the three
   cards carrying a screenshot and the three carrying a decorative
   panel still line up across a row. The panel is CSS only — no
   image file, nothing to keep in gen-placeholders.py.

   .scroll-reveal must not be put on a card: the rail clips its own
   horizontal overflow, so nav.js's IntersectionObserver would never
   fire for cards parked off to the right and they would sit at
   opacity 0 forever. It goes on the header and the shell instead.
======================== */

.wtr-rsn-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}

.wtr-rsn-headline { max-width: 760px; }
.wtr-rsn-headline .section-eyebrow { margin-bottom: 10px; }
.wtr-rsn-headline .section-title   { margin: 0; }

.wtr-rsn-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.wtr-rsn-nav[hidden] { display: none; }

.wtr-rsn-arrow {
  appearance: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), opacity var(--transition);
}

.wtr-rsn-arrow svg { width: 18px; height: 18px; }

.wtr-rsn-arrow:hover:not(:disabled) {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

.wtr-rsn-arrow:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.wtr-rsn-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* ── Rail ─────────────────────────────────────────────────── */

/* No edge fades: three cards fill the rail exactly, so a gradient at
   either end lands on a fully visible card's text rather than on a
   cut-off one. The arrows, the dots and the peek of the next card on
   mobile carry the "there is more" signal instead. */
.wtr-rsn-carousel { position: relative; }

.wtr-rsn-rail {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin: 0;
  padding: 6px 6px 10px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 6px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}

.wtr-rsn-rail::-webkit-scrollbar { display: none; }

.wtr-rsn-rail:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* ── Card ─────────────────────────────────────────────────── */

.wtr-rsn-card {
  --rsn-accent: var(--color-green);
  --rsn-accent-soft: rgba(0, 164, 78, 0.45);
  --rsn-tint: rgba(0, 133, 64, 0.09);

  position: relative;
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: linear-gradient(168deg, var(--rsn-tint) 0%, #fff 58%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

/* Alternating accent keeps the rail from reading as one flat block
   without inventing colours outside the brand palette. */
.wtr-rsn-card:nth-child(even) {
  --rsn-accent: var(--color-navy-light);
  --rsn-accent-soft: rgba(26, 48, 72, 0.38);
  --rsn-tint: rgba(26, 48, 72, 0.075);
}

.wtr-rsn-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--rsn-accent), var(--rsn-accent-soft));
}

.wtr-rsn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--rsn-accent-soft);
}

.wtr-rsn-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 28px;
}

.wtr-rsn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.wtr-rsn-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
  color: var(--rsn-accent);
  flex-shrink: 0;
}

.wtr-rsn-icon svg { width: 22px; height: 22px; }

.wtr-rsn-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rsn-accent);
  opacity: 0.7;
}

.wtr-rsn-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.wtr-rsn-body {
  font-size: 0.9375rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 16px 0 0;
}

/* ── Card media ───────────────────────────────────────────── */

.wtr-rsn-media { margin-top: 16px; }

/* The rail is narrower than the 240px .tr-shot--inline default and the
   band is cropped to a fixed height so the six cards keep one rhythm.
   The lightbox in shots.js still opens the full-size image. */
.wtr-rsn-card .wtr-rsn-shot { max-width: 100%; margin: 0; }

.wtr-rsn-card .wtr-rsn-shot img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-md);
}

.wtr-rsn-media--plain {
  position: relative;
  height: 150px;
  margin-bottom: 26px;   /* stands in for the figcaption on shot cards */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(15, 31, 46, 0.10) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--rsn-tint), rgba(255, 255, 255, 0));
}

.wtr-rsn-media--plain::after {
  content: attr(data-rsn-ghost);
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--rsn-accent);
  opacity: 0.12;
}

/* ── Dots ─────────────────────────────────────────────────── */

.wtr-rsn-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.wtr-rsn-dot {
  appearance: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.wtr-rsn-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 31, 46, 0.2);
  transition: width var(--transition), background var(--transition);
}

.wtr-rsn-dot:hover::before { background: rgba(15, 31, 46, 0.4); }

.wtr-rsn-dot.is-active::before {
  width: 22px;
  background: var(--color-green);
}

.wtr-rsn-dot:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 1px;
  border-radius: 999px;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .wtr-rsn-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 720px) {
  .wtr-rsn-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
  }

  .wtr-rsn-nav { align-self: flex-end; padding-bottom: 0; }

  /* One card with a sliver of the next, so the rail reads as scrollable
     before anyone touches it. */
  .wtr-rsn-card { flex-basis: 86%; }

  .wtr-rsn-carousel::before,
  .wtr-rsn-carousel::after { width: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wtr-rsn-card,
  .wtr-rsn-arrow,
  .wtr-rsn-dot::before { transition: none; }

  .wtr-rsn-card:hover { transform: none; }
}

@media print {
  .wtr-rsn-nav,
  .wtr-rsn-dots { display: none; }

  .wtr-rsn-rail {
    display: block;
    overflow: visible;
    padding: 0;
  }

  .wtr-rsn-card { break-inside: avoid; margin-bottom: 16px; }
}


/* ========================
   SECTION — FOR EVERY DECISION-MAKER

   Four roles as an accordion on the left, that role's dashboard on the
   right. js/auto-rotate.js advances it; the classes it writes are
   .is-active on a trigger and a panel, and .is-paused / .is-stopped on
   .wtr-dm-accordion.

   The visual language — the filling edge that doubles as the selected
   marker, the play/pause disc over the screenshot — is deliberately the
   same as "Analytics in depth" on /product/, since a reader meets both
   on the same visit.
======================== */

.wtr-dm-section { background: var(--color-light); }

.wtr-dm-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.wtr-dm-header .section-subtitle { margin: 16px 0 0; }

.wtr-dm-accordion {
  /* One interval, in CSS and in the markup's data-rotate-interval.
     Keep them in step if either changes. */
  --dm-dur: 7s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}

/* ── Left: the accordion ─────────────────────────────────────── */

.wtr-dm-list {
  display: flex;
  flex-direction: column;
}

.wtr-dm-item { border-top: 1px solid var(--color-border); }
.wtr-dm-item:first-child { border-top: 0; }

.wtr-dm-heading { margin: 0; }

.wtr-dm-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-muted);
  font-family: inherit;
  transition: color var(--transition);
}

.wtr-dm-trigger:hover,
.wtr-dm-trigger.is-active { color: var(--color-navy); }

.wtr-dm-trigger:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.wtr-dm-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-muted);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}

.wtr-dm-icon svg { width: 20px; height: 20px; }

.wtr-dm-trigger.is-active .wtr-dm-icon {
  color: var(--color-green);
  border-color: rgba(0, 133, 64, 0.35);
  background: rgba(0, 133, 64, 0.06);
}

.wtr-dm-name {
  flex: 1;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.wtr-dm-chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-muted);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color var(--transition);
}

.wtr-dm-chevron svg { width: 16px; height: 16px; }

.wtr-dm-trigger.is-active .wtr-dm-chevron {
  transform: rotate(180deg);
  color: var(--color-green);
}

/* ── The timer, as a filling edge ──
   Doubles as the marker for the open item: it fills over one interval,
   then the next item takes over. Paused, it simply holds. */
.wtr-dm-progress {
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--color-border);
  overflow: hidden;
}

.wtr-dm-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-green);
  transform: scaleY(0);
  transform-origin: top center;
}

.wtr-dm-trigger.is-active .wtr-dm-progress::after {
  animation: dmProgress var(--dm-dur, 7s) linear forwards;
}

/* Held mid-fill while the reader is on it, rather than snapping back. */
.wtr-dm-accordion.is-paused .wtr-dm-trigger.is-active .wtr-dm-progress::after {
  animation-play-state: paused;
}

/* No timer running at all: show the open item as simply open. */
.wtr-dm-accordion.is-stopped .wtr-dm-trigger.is-active .wtr-dm-progress::after {
  animation: none;
  transform: scaleY(1);
}

@keyframes dmProgress {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── The collapsing body ──
   grid-template-rows 0fr → 1fr animates to the paragraph's own height
   with no max-height guess to outgrow. */
.wtr-dm-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wtr-dm-item.is-active .wtr-dm-body { grid-template-rows: 1fr; }

.wtr-dm-body-inner { overflow: hidden; }

.wtr-dm-body-inner p {
  margin: 0;
  padding: 0 0 22px 54px;   /* clears the icon column */
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-muted);
}

/* ── Right: the dashboards ──
   All four panels share one grid cell, so the column is as tall as the
   tallest and nothing jumps as the timer advances. */
.wtr-dm-panels {
  position: relative;
  display: grid;
}

.wtr-dm-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity    0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.wtr-dm-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

.wtr-dm-shot {
  max-width: 100%;
  margin: 0;
}

.wtr-dm-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ── Play / pause ──
   Auto-advancing content needs a way to stop it that does not depend on
   hovering (WCAG 2.2.2). This is that control. */
.wtr-dm-playpause {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-navy);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.wtr-dm-playpause:hover,
.wtr-dm-playpause:focus-visible {
  background: #fff;
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.wtr-dm-playpause:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.wtr-dm-playpause svg { width: 14px; height: 14px; }

.wtr-dm-playpause .wtr-dm-icon-play { display: none; }
.wtr-dm-playpause[data-state="paused"] .wtr-dm-icon-pause { display: none; }
.wtr-dm-playpause[data-state="paused"] .wtr-dm-icon-play { display: block; }

/* ── Closing statement, as a feature card ──
   The section's conclusion, given the weight of a card rather than a
   sixth role: emerald surface, the site's own dot-grid texture (the
   same technique as the hero and .cta-final), a ribbon carrying the
   section's icon, and a footer that pairs the point with a way on.

   Every piece of text on it is pure white. The lightest point of the
   gradient is --color-green at 4.74:1, which clears AA for body text
   only at full opacity — a 0.85-alpha white would quietly drop it
   below 4.5:1, so none of the type here is faded. */

.wtr-dm-close {
  position: relative;
  margin-top: 48px;
  padding: 34px 38px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  box-shadow: 0 18px 44px rgba(0, 97, 47, 0.22);
  overflow: hidden;
}

.wtr-dm-close-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* The ribbon hangs from the top edge, notched at the foot. */
.wtr-dm-close-ribbon {
  position: absolute;
  top: 0;
  right: 44px;
  width: 74px;
  height: 104px;
  display: flex;
  justify-content: center;
  padding-top: 22px;
  background: var(--color-ink-green);
  color: var(--color-green-light);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  pointer-events: none;
}

.wtr-dm-close-ribbon svg { width: 26px; height: 26px; }

.wtr-dm-close-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.wtr-dm-close-title {
  margin: 0 0 10px;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-white);
}

.wtr-dm-close-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-white);
}

.wtr-dm-close-rule {
  height: 1px;
  margin: 26px 0 22px;
  background: rgba(255, 255, 255, 0.28);
}

.wtr-dm-close-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wtr-dm-close-lead {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-white);
}

.wtr-dm-close-note {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-white);
}

.wtr-dm-close-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-green-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.wtr-dm-close-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.wtr-dm-close-cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Responsive ── */

@media (max-width: 860px) {
  .wtr-dm-accordion {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Screenshot first on a phone: it is what makes the role concrete. */
  .wtr-dm-panels { order: -1; }

  .wtr-dm-progress { left: -12px; }
  .wtr-dm-trigger { padding: 16px 0; gap: 12px; }
  .wtr-dm-body-inner p { padding-left: 0; padding-bottom: 18px; }

  .wtr-dm-close {
    padding: 28px 22px 26px;
    margin-top: 36px;
    border-radius: var(--radius-lg);
  }

  /* The ribbon moves in and shortens so it never crowds the heading,
     which wraps to two or three lines at this width. */
  .wtr-dm-close-ribbon {
    right: 20px;
    width: 56px;
    height: 78px;
    padding-top: 16px;
  }

  .wtr-dm-close-ribbon svg { width: 20px; height: 20px; }

  .wtr-dm-close-title { padding-right: 76px; }

  .wtr-dm-close-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .wtr-dm-close-cta { width: 100%; justify-content: center; }
}

/* No timer and no motion when motion is unwelcome — auto-rotate.js
   reads this same query and never starts the interval. */
@media (prefers-reduced-motion: reduce) {
  .wtr-dm-panel,
  .wtr-dm-body,
  .wtr-dm-chevron,
  .wtr-dm-close-cta { transition: none; }

  .wtr-dm-close-cta:hover { transform: none; }

  .wtr-dm-trigger.is-active .wtr-dm-progress::after {
    animation: none;
    transform: scaleY(1);
  }
}

@media print {
  .wtr-dm-accordion { display: block; }
  .wtr-dm-body { grid-template-rows: 1fr; }
  .wtr-dm-panels { display: block; }
  .wtr-dm-panel { opacity: 1; visibility: visible; transform: none; }
  .wtr-dm-playpause, .wtr-dm-progress, .wtr-dm-chevron { display: none; }
}


/* ========================
   SECTION 2 — THE COMPARISON IN FOUR CARDS

   The 16-dimension table moved to /spreadsheet-comparison/. What stays
   on /why-transrisk/ is the #vs-spreadsheets and #vs-erp anchors, this
   header, and the four .cmp-proof cards recovered from the home page.

   Only the header is styled here — the cards, their badges and the
   footer link all come from .cmp-proof* in style.css, which survived
   the home-page deletion intact. Nothing about them is redefined here,
   so the strip still looks like the one that links to the same table.
======================== */

.wtr-moved {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.wtr-moved .section-title { margin: 0 0 16px; }

/* No bottom margin: .cmp-proof carries its own 44px top margin. */
.wtr-moved .section-subtitle {
  margin: 0 auto;
  max-width: 620px;
}


/* ========================
   SECTION 2 — EXPANDED COMPARISON TABLE
   (renders on /spreadsheet-comparison/, which shares this stylesheet)
======================== */

.wtr-comparison-section {
  background: var(--color-light);
}

.wtr-comp-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

/* 4-column widths */
.wtr-col-cap  { width: 30%; }
.wtr-col-ss   { width: 19%; }
.wtr-col-erp  { width: 24%; }
.wtr-col-tr   { width: 27%; }

/* Force wider min-width for 4 columns */
.wtr-comp-table {
  min-width: 760px;
}

/* ── Dark header row for three-col table ── */
.wtr-comp-table thead th {
  background: #0f1923;
  color: #fff;
  border-bottom: 2px solid #1e3245;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.wtr-comp-table .th-cap {
  background: #0f1923;
  color: rgba(255,255,255,0.55);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.wtr-comp-table .th-ss { background: #0f1923; color: #fca5a5; border-right: 1px solid rgba(255,255,255,0.08); }
.wtr-comp-table .th-erp { background: #0f1923; color: #fcd34d; border-right: 1px solid rgba(255,255,255,0.08); }
.wtr-comp-table .th-tr { background: #0f1923; color: #86efac; }

/* ERP column data cells — amber tint */
.td-erp {
  background: #fffbeb;
  color: #374151;
  border-right: 1px solid #fde68a;
}

/* Row hover — amber column deepens */
.wtr-comp-table tbody tr:hover .td-erp {
  background: #fef3c7;
}

/* TransRisk column — green cells */
.wtr-comp-table .td-tr {
  background: #dcfce7;
  color: #15803d;
}
.wtr-comp-table tbody tr:hover .td-tr {
  background: #bbf7d0;
}
.wtr-comp-table .td-tr strong {
  color: #15803d;
  font-weight: 700;
}

/* Spreadsheet column — red tint */
.wtr-comp-table .td-ss {
  background: #fef2f2;
  color: #6b7280;
  border-right: 1px solid #fecaca;
}
.wtr-comp-table tbody tr:hover .td-ss {
  background: #fee2e2;
}

/* Partial / Rare / Limited icon — amber */
.ci-partial {
  background: #fef9c3;
  color: #92400e;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* Amber data cells */
.wtr-comp-table .td-erp .ci-partial {
  background: #fef9c3;
  color: #b45309;
}

/* th-icon variants */
.th-icon--partial {
  background: rgba(255,255,255,0.12);
  color: #fcd34d;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.wtr-comp-table .th-icon--no  { background: rgba(255,255,255,0.10); color: #fca5a5; }
.wtr-comp-table .th-icon--yes { background: rgba(255,255,255,0.10); color: #86efac; }

/* cap column — sticky min-width */
.wtr-th-cap {
  min-width: 180px;
}

/* Comparison subtext — italic */
.wtr-comparison-section .comparison-subtext {
  font-style: italic;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-muted);
  max-width: 640px;
  text-align: center;
}


/* ========================
   SECTION 3 — HIDDEN COST TILES
======================== */

.cost-section {
  background: #fff;
}

.cost-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}

/* The timeline diagram, at the width it was drawn for. It overrides
   .tr-shot--full's own top margin so it sits under the header rather
   than 100px below it. */
.cost-shot { margin: 0 auto 44px; }

.cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cost-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.cost-tile:hover {
  border-color: #fca5a5;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.09);
  transform: translateY(-2px);
}

/* Icon beside the title rather than stacked above it, so the four
   titles start on the same line whether they run to one line or two —
   which is what makes a 2x2 of uneven copy read as a set.

   flex-start, not center: centring a two-line title against a 44px icon
   lands its first line 10px above a one-line title's, and the row stops
   aligning. The padding on the title buys back the optical centring
   that a single line would otherwise lose. */
.cost-tile-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cost-tile-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  border-radius: var(--radius-md);
  color: #dc2626;
  flex-shrink: 0;
}

.cost-tile-icon svg {
  width: 24px;
  height: 24px;
}

.cost-tile-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
  padding-top: 10px;   /* optical centring against the 44px icon */
}

.cost-tile-body {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 860px) {
  .cost-shot { margin-bottom: 32px; }
}

@media (max-width: 640px) {
  .cost-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cost-tile { transition: border-color var(--transition); }
  .cost-tile:hover { transform: none; }
}


/* ========================
   SECTION 4 — TRANSGRAPH CREDIBILITY BAND
======================== */

.credibility-band {
  background: var(--color-navy);
  position: relative;
  overflow: hidden;
}

/* Subtle texture */
.credibility-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.credibility-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: center;
}

/* Left copy */
.credibility-band-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.credibility-band-title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0;
}

.credibility-band-body {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  margin: 0;
}

.credibility-band-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-green-light);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
  transition: color var(--transition);
}

.credibility-band-link:hover {
  color: #fff;
}

/* Right stats — 2×2 grid */
.credibility-band-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cb-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
}

.cb-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-green-light);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cb-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .credibility-band-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .credibility-band-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .credibility-band-stats {
    grid-template-columns: 1fr 1fr;
  }
}