/* ============================================================================
   Likidera — Why Likidera page layer
   Consumes tokens/base/components. Six blocks: opening (.page-head) ·
   #problem (spine) · #erp (diptych + the page's one table) · #before-after
   (paired rows) · #who-its-for (two lists + one photograph) · #three-reasons
   (three cards) · the closing card. One evidence form per section, and no two
   consecutive sections share one.
   ============================================================================ */

/* ═══════════════ #problem — costs, stated as facts ═══════════════
   The fact strip's icons carry product capabilities; a cost is not a
   capability, so this variant drops them and runs three across. */
.fact-strip--costs { margin-top: var(--space-7); }
@media (min-width: 640px) {
  .fact-strip--costs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact-strip--costs li,
  .fact-strip--costs li:nth-child(4),
  .fact-strip--costs li:nth-child(5) { grid-column: auto; }
}
@media (min-width: 900px) {
  .fact-strip--costs li { padding-inline: var(--space-4); }
  .fact-strip--costs li:first-child { padding-left: 0; }
  .fact-strip--costs li:last-child { padding-right: 0; }
  .fact-strip--costs li + li { border-left: 1px solid var(--rule); }
}
/* ═══════════════ #erp — the diptych ═══════════════
   The ruler does not appear on this page: it is the homepage's hero floor and
   Forecasting's matrix axis, and a third outing makes it wallpaper. What is
   kept is its meaning — past left, today at the centre, future right — said
   by direction instead. The halves lean into the centre line, and the teal
   dot is the only piece of ruler vocabulary retained. */
.contrast-pair {
  --knockout: var(--bg);  /* what the dot and the today label punch out of */
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.section--tint .contrast-pair { --knockout: var(--section-tint); }
.contrast-pair__side { display: grid; gap: var(--space-2); }
.contrast-pair__tag {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.contrast-pair__claim {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text);
}
.contrast-pair__body { color: var(--text-muted); max-width: 44ch; }
.contrast-pair__glyph { width: 132px; height: auto; margin-top: var(--space-2); }
/* The past half belongs to the ERP, so its plot is not drawn in our brand. */
.contrast-pair__side--past .plot__realized { stroke: var(--text-faint); }

/* Below 900 the centre line lies down and both halves read left: right-aligned
   text on a phone is unreadable. */
.contrast-pair__axis {
  position: relative;
  display: block;
  height: 1px;
  margin-bottom: var(--space-5);  /* room for the absolutely placed label */
  background: var(--border);
}
.contrast-pair__axis i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--ruler-today);
  box-shadow: 0 0 0 1.5px var(--knockout);
}
.contrast-pair__today {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-data);
  color: var(--text-faint);
  background: var(--knockout);
  padding-inline: 0.4em;
}

@media (min-width: 900px) {
  .contrast-pair {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: center;
  }
  /* The whole contrast is stated by alignment: the past reads toward the
     centre line, the future reads away from it. */
  .contrast-pair__side--past { text-align: right; justify-items: end; }
  .contrast-pair__side--future { text-align: left; justify-items: start; }
  .contrast-pair__axis {
    width: 1px;
    height: 100%;
    min-height: 200px;
    margin-bottom: 0;
    background: var(--border);
  }
  .contrast-pair__axis i { left: 50%; top: 50%; }
  .contrast-pair__today {
    top: calc(50% + 12px);
    left: 50%;
  }
}

.erp__note { margin-top: var(--space-6); }
.erp__callout { margin-top: var(--space-6); }

/* The prose column carries the block unchanged, so its children keep their own
   vertical rhythm and the column's own gap is zero; only the first child's top
   margin goes, because the record already supplies that step. */
#problem .record__prose { gap: 0; }
#problem .record__prose > :first-child { margin-top: 0; }


/* The callout is the closest sentence on the site to the group promise, and
   #group is the one Product anchor nothing else points at. */
.erp__group-link { margin-top: var(--space-5); }
/* "What you are actually buying" is the closest head on the site to the price. */
.reasons__price-link { margin-top: var(--space-6); }




/* ═══════════════ #who-its-for — two lists and one photograph ═══════════════ */
.fit__layout { display: grid; gap: var(--space-7); margin-top: var(--space-6); }
.fit__lists { display: grid; gap: var(--space-6); }
.fit__heading {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.fit__photo { --frame-ratio: 3 / 2; --focus: 50% 45%; min-width: 0; }
/* Below the split the frame is the full container and rendered 852x568 at 900 —
   the oversized-banner shape the site corrected once already. The cap makes the
   frame narrower than its column, so it centres rather than hanging left; this
   frame is a plain block, not a grid item, so auto margins are safe here. */
@media (max-width: 999px) {
  .fit__photo .photo__frame { max-height: 300px; margin-inline: auto; }
}
@media (min-width: 640px) {
  .fit__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}
@media (min-width: 1000px) {
  .fit__layout {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--space-8);
    align-items: start;
  }
}


/* ═══════════════ #three-reasons — the closing cards ═══════════════ */
.reason-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.reason {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
}
.reason__icon { color: var(--text-muted); }
.reason h3 {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.reason p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; }
.reason .link-arrow { margin-top: var(--space-2); font-size: var(--text-sm); }
/* The whole card is the link, so the arrow is the affordance rather than a
   second target: one tab stop per card, and no six competing arrows. */
.reason .link-arrow svg { transition: transform var(--duration-fast) var(--ease-out); }
.reason:hover .link-arrow svg { transform: translateX(4px); }
@media (min-width: 640px) {
  .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason-grid > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reason-grid > :last-child { grid-column: auto; }
}