/*
 * Results Ledger: "What happens when you fix the right product problem".
 * Ported from eleken-results-ledger.html: an outcomes ledger on the left, one shared
 * product stage on the right. A white highlight slides down the ledger and merges into
 * the stage like a tab into its panel. On phones the ledger collapses into a strip of
 * figures above a swipeable card track.
 *
 * This CSS lives inside the component's Shadow DOM. The section padding and the 1008px
 * container come from the Webflow section around it.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 * The Designer's open canvas draws every breakpoint in one window, so @media never
 * fires there; each breakpoint frame is a named container instead (wf-container-medium
 * for tablet and below, wf-container-small for mobile and below). Each @media block is
 * followed by an identical @container twin for those frames — designer-canvas.test.ts
 * keeps them in sync. On a published page the containers don't exist.
 * The script reads --rl-stacked to know which layout is on (useLedger.ts).
 */

:host {
  display: block;
}

.rl,
.rl *,
.rl *::before,
.rl *::after {
  box-sizing: border-box;
}

.rl {
  --rl-paper: #fff;
  --rl-well: #e6e4e0;
  --rl-ink: #1d1e22;
  --rl-ink-60: rgba(29, 30, 34, 0.6);
  --rl-body: #717171;
  --rl-muted: #888686;
  --rl-line: rgba(29, 30, 34, 0.1);
  --rl-button-hover: #383940;
  --rl-flip: #f59958;

  --rl-display: Regolapro, "Regola Pro", "Helvetica Neue", Arial, sans-serif;
  --rl-text: "Inter Variable Local", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --rl-gutter: 20px;
  --rl-radius: 6px;
  --rl-fillet: 6px;
  --rl-row-min: 96px;
  --rl-figure-size: 32px;
  --rl-figure-lh: 40px;
  --rl-peek: 24px;
  --rl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rl-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --rl-stacked: 0;

  /* cqw below is this box: on a phone it is the screen less the container's gutters */
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: 1008px;
  margin-inline: auto;
  color: var(--rl-ink);
  font-family: var(--rl-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.rl-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rl-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.rl-title {
  margin: 0;
  color: var(--rl-ink);
  font: 500 32px/40px var(--rl-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rl-lede {
  max-width: 540px;
  margin: 0;
  color: var(--rl-ink-60);
  font-size: 15px;
  line-height: 25px;
  text-wrap: balance;
}

/* Board */
.rl-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-width: 0;
}

/* stop control for keyboard and screen-reader users; hidden until it has keyboard focus */
.rl-autoplay {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: calc(100% + 8px);
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  background: var(--rl-ink);
  color: var(--rl-paper);
  font: 500 13px/18px var(--rl-text);
  cursor: pointer;
}

.rl-autoplay:focus-visible {
  width: auto;
  height: auto;
  padding: 7px 12px;
  clip-path: none;
  outline: 2px solid var(--rl-ink);
  outline-offset: 2px;
}

/* Ledger: each row links to its case; hovering previews it on the stage */
.rl-ledger {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rl-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--h, var(--rl-row-min));
  transform: translateY(var(--y, 0px));
  background: var(--rl-paper);
  border-radius: var(--rl-radius) 0 0 var(--rl-radius);
  pointer-events: none;
  transition: transform 0.42s var(--rl-glide), height 0.42s var(--rl-glide);
}

.rl-indicator.is-instant {
  transition: none;
}

/* concave fillets where the highlight meets the stage */
.rl-indicator::before,
.rl-indicator::after {
  content: "";
  position: absolute;
  right: 0;
  width: var(--rl-fillet);
  height: var(--rl-fillet);
  transition: opacity 0.2s var(--rl-ease);
}

.rl-indicator::before {
  top: calc(var(--rl-fillet) * -1);
  background: radial-gradient(circle at 0 0, transparent calc(var(--rl-fillet) - 0.5px), var(--rl-paper) var(--rl-fillet));
}

.rl-indicator::after {
  bottom: calc(var(--rl-fillet) * -1);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--rl-fillet) - 0.5px), var(--rl-paper) var(--rl-fillet));
}

.rl-indicator.is-first::before,
.rl-indicator.is-last::after {
  opacity: 0;
}

.rl-row {
  position: relative;
  min-height: var(--rl-row-min);
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "figure client" "outcome client";
  align-items: baseline;
  align-content: center;
  column-gap: 16px;
  row-gap: 4px;
  padding: 16px 24px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--rl-radius) 0 0 var(--rl-radius);
  -webkit-tap-highlight-color: transparent;
}

/* hairline between rows; sits under the sliding highlight */
.rl-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 24px;
  right: 24px;
  top: 0;
  border-top: 1px solid var(--rl-line);
  transition: opacity 0.2s var(--rl-ease);
}

.rl-row:first-of-type::before,
.rl-row.is-active::before,
.rl-row.is-active + .rl-row::before {
  opacity: 0;
}

.rl-row:focus-visible {
  outline: 2px solid var(--rl-ink);
  outline-offset: -2px;
}

.rl-row-figure,
.rl-panel-figure {
  grid-area: figure;
  font: 500 var(--rl-figure-size) / var(--rl-figure-lh) var(--rl-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.rl-row-figure svg,
.rl-panel-figure svg {
  width: 0.56em;
  height: 0.56em;
  margin-inline: 0.08em;
  vertical-align: 0.08em;
}

.rl-row-figure {
  color: var(--rl-muted);
  transition: color 0.3s var(--rl-ease);
}

.rl-row-copy,
.rl-panel-copy {
  display: contents;
}

.rl-row-outcome,
.rl-panel-outcome {
  grid-area: outcome;
  min-width: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-wrap: pretty;
}

.rl-row-outcome {
  color: var(--rl-body);
  transition: color 0.3s var(--rl-ease);
}

.rl-row-client,
.rl-panel-client {
  grid-area: client;
  justify-self: end;
  text-align: right;
  font: 500 15px/20px var(--rl-display);
  letter-spacing: -0.01em;
  color: var(--rl-body);
}

/* on desktop the client sits centred against the whole row */
.rl-row-client {
  align-self: center;
}

.rl-row:hover .rl-row-figure,
.rl-row:hover .rl-row-outcome,
.rl-row.is-active .rl-row-figure,
.rl-row.is-active .rl-row-outcome {
  color: var(--rl-ink);
}

/* autoplay progress, shown on the active row */
.rl-progress {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rl-line);
  opacity: 0;
  transition: opacity 0.25s var(--rl-ease);
}

.rl-bar {
  position: absolute;
  inset: 0;
  background: var(--rl-flip);
  transform-origin: left center;
}

.rl-board.is-auto .rl-row.is-active .rl-progress {
  opacity: 1;
}

.rl-board.is-auto .rl-row.is-active .rl-bar {
  animation: rl-fill var(--rl-dwell, 5s) linear both;
}

.rl-board.is-paused .rl-row.is-active .rl-bar {
  animation-play-state: paused;
}

@keyframes rl-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Stage: every panel stacks in the same cell; the incoming one fades in over the outgoing one */
.rl-stage {
  display: grid;
  min-width: 0;
}

.rl-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  background: var(--rl-paper);
  border-radius: var(--rl-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear 0.34s, visibility 0s linear 0.34s;
}

.rl-panel:first-child {
  border-top-left-radius: 0;
}

.rl-panel:last-child {
  border-bottom-left-radius: 0;
}

.rl-panel.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.34s var(--rl-ease);
}

/* the image well doubles as the before/after switch */
.rl-well {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  display: block;
  width: 100%;
  flex: 1;
  min-height: 280px;
  overflow: hidden;
  background: var(--rl-well);
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rl-well:focus-visible {
  outline: 2px solid var(--rl-ink);
  outline-offset: 2px;
}

.rl-shot {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 150%;
  max-width: none;
  height: auto;
  border-radius: var(--rl-radius);
  transform: translateY(8px);
  transition: transform 0.5s var(--rl-ease), opacity 0.35s var(--rl-ease);
}

.rl-panel.is-active .rl-shot {
  transform: none;
}

/* with no "before" image of its own, the case shows the "after" one drained of colour */
.rl-shot-before {
  opacity: 0;
}

.rl-shot-before.is-filtered {
  filter: grayscale(1) sepia(0.12) contrast(0.78) brightness(1.06);
}

.rl-well.is-before .rl-shot-before {
  opacity: 1;
}

/* orange before/after badge: always on for touch, on keyboard focus for everyone */
.rl-flip {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--rl-flip);
  color: var(--rl-ink);
  display: none;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.rl-flip-hint,
.rl-cursor-hint {
  display: block;
  font-size: 11px;
  line-height: 14px;
}

.rl-flip-word,
.rl-cursor-word {
  display: block;
  font: 500 19px/22px var(--rl-display);
  letter-spacing: -0.02em;
}

.rl-well:focus-visible .rl-flip {
  display: grid;
}

@media (hover: none), (pointer: coarse) {
  .rl-flip {
    display: grid;
  }

  .rl-panel.is-active .rl-flip {
    animation: rl-nudge 1.2s var(--rl-ease) 0.5s 1 both;
  }
}

@keyframes rl-nudge {
  0%,
  100% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.1);
  }

  65% {
    transform: scale(0.97);
  }
}

/* the same disc follows the mouse over images, in place of the cursor. It is placed
   against the board, not the viewport: the site's .wrapper has contain: paint, which
   would make position: fixed relative to the wrapper. */
.rl-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
}

.rl-cursor-disc {
  position: absolute;
  left: -66px;
  top: -66px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--rl-flip);
  color: var(--rl-ink);
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.35s var(--rl-glide), opacity 0.2s var(--rl-ease);
}

.rl-cursor-hint {
  font-size: 13px;
  line-height: 16px;
}

.rl-cursor-word {
  font-size: 28px;
  line-height: 32px;
}

.rl-cursor.is-visible .rl-cursor-disc {
  opacity: 1;
  transform: scale(1);
}

.rl-cursor.is-visible.is-pressed .rl-cursor-disc {
  transform: scale(0.9);
  transition-duration: 0.12s;
}

@media (hover: hover) and (pointer: fine) {
  .rl-well {
    cursor: none;
  }
}

/* while the disc is up, no cursor anywhere on the board, even where the disc trails
   the mouse past the image's edge */
.rl-board.is-disc,
.rl-board.is-disc * {
  cursor: none;
}

/* the whole lower part of a card opens the case */
.rl-body {
  position: relative;
}

.rl-body .rl-button::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* the panel repeats its outcome only on phones, where the strip shows just the figure */
.rl-panel-head {
  display: none;
}

.rl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 16px 16px;
}

.rl-desc {
  max-width: 44ch;
  min-width: 0;
  margin: 0;
  color: var(--rl-body);
  font-size: 15px;
  line-height: 25px;
}

.rl-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  background: var(--rl-ink);
  color: var(--rl-paper);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--rl-ease);
}

.rl-button:hover,
.rl-body:hover .rl-button {
  background: var(--rl-button-hover);
}

.rl-button:focus-visible {
  outline: 2px solid var(--rl-ink);
  outline-offset: 2px;
}

.rl-button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Tablet */
@media screen and (max-width: 991px) {
  .rl-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .rl-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@container wf-container-medium (width > 0) {
  .rl-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .rl-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Phone: a strip of figures over a swipeable track of cards */
@media screen and (max-width: 767px) {
  .rl {
    --rl-gutter: 16px;
    --rl-figure-size: 22px;
    --rl-figure-lh: 27.5px;
    --rl-stacked: 1;
    gap: 24px;
  }

  .rl-title {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -1px;
  }

  .rl-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .rl-ledger {
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--rl-gutter) * -1);
    padding-inline: calc(var(--rl-gutter) - 6px);
  }

  .rl-ledger::-webkit-scrollbar {
    display: none;
  }

  .rl-indicator {
    display: none;
  }

  .rl-row {
    flex: none;
    min-height: 0;
    display: block;
    padding: 8px 6px 12px;
    border-radius: 0;
  }

  .rl-row::before {
    display: none;
  }

  .rl-row .rl-row-figure {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--rl-body);
  }

  .rl-row.is-active .rl-row-figure {
    color: var(--rl-ink);
  }

  .rl-row-copy {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rl-progress {
    left: 6px;
    right: 6px;
  }

  .rl-row.is-active .rl-progress {
    opacity: 1;
  }

  .rl-stage {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--rl-gutter) * -1);
    padding-inline: var(--rl-gutter) calc(var(--rl-gutter) + var(--rl-peek) + 8px);
    scroll-padding-inline: var(--rl-gutter);
    position: relative;
  }

  .rl-stage::-webkit-scrollbar {
    display: none;
  }

  .rl-panel,
  .rl-panel:first-child,
  .rl-panel:last-child {
    grid-area: auto;
    flex: 0 0 calc(100cqw - var(--rl-peek));
    border-radius: var(--rl-radius);
    opacity: 1;
    visibility: visible;
    transition: none;
    scroll-snap-align: start;
  }

  .rl-well {
    flex: none;
    height: 196px;
    min-height: 0;
  }

  .rl-shot,
  .rl-panel.is-active .rl-shot {
    left: 20px;
    top: 20px;
    width: 180%;
    transform: none;
  }

  .rl-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .rl-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "figure client" "outcome outcome";
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
    padding: 20px 8px 0;
  }

  .rl-desc {
    font-size: 13px;
    line-height: 20px;
  }

  .rl-foot {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 8px 8px;
  }
}

@container wf-container-small (width > 0) {
  .rl {
    --rl-gutter: 16px;
    --rl-figure-size: 22px;
    --rl-figure-lh: 27.5px;
    --rl-stacked: 1;
    gap: 24px;
  }

  .rl-title {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -1px;
  }

  .rl-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .rl-ledger {
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--rl-gutter) * -1);
    padding-inline: calc(var(--rl-gutter) - 6px);
  }

  .rl-ledger::-webkit-scrollbar {
    display: none;
  }

  .rl-indicator {
    display: none;
  }

  .rl-row {
    flex: none;
    min-height: 0;
    display: block;
    padding: 8px 6px 12px;
    border-radius: 0;
  }

  .rl-row::before {
    display: none;
  }

  .rl-row .rl-row-figure {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--rl-body);
  }

  .rl-row.is-active .rl-row-figure {
    color: var(--rl-ink);
  }

  .rl-row-copy {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rl-progress {
    left: 6px;
    right: 6px;
  }

  .rl-row.is-active .rl-progress {
    opacity: 1;
  }

  .rl-stage {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--rl-gutter) * -1);
    padding-inline: var(--rl-gutter) calc(var(--rl-gutter) + var(--rl-peek) + 8px);
    scroll-padding-inline: var(--rl-gutter);
    position: relative;
  }

  .rl-stage::-webkit-scrollbar {
    display: none;
  }

  .rl-panel,
  .rl-panel:first-child,
  .rl-panel:last-child {
    grid-area: auto;
    flex: 0 0 calc(100cqw - var(--rl-peek));
    border-radius: var(--rl-radius);
    opacity: 1;
    visibility: visible;
    transition: none;
    scroll-snap-align: start;
  }

  .rl-well {
    flex: none;
    height: 196px;
    min-height: 0;
  }

  .rl-shot,
  .rl-panel.is-active .rl-shot {
    left: 20px;
    top: 20px;
    width: 180%;
    transform: none;
  }

  .rl-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .rl-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "figure client" "outcome outcome";
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
    padding: 20px 8px 0;
  }

  .rl-desc {
    font-size: 13px;
    line-height: 20px;
  }

  .rl-foot {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 8px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl *,
  .rl *::before,
  .rl *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
  }
}