/* ==========================================================================
   home.css
   Home page: TrainOn's sections, the product demo (laptop and iPad), the scroll
   stories, the source-of-truth diagram, the step showcases and savings.
   ========================================================================== */
.pg-sections .section {
  padding: var(--space-section) 0 0;
}
.section-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.section-head h2 {
  margin: 0;
}
.section-sub {
  margin: var(--sp-20) auto 0;
  max-width: 640px;
}
.demo-devices {
  aspect-ratio: 2280/1400;
  /* also capped by the screen height, so the laptop, the tabs and the caption under them fit on screen together
     below the header (260px is the header, the tabs, the caption and breathing room) */
  max-width: min(1140px, max(560px, (100vh - 260px) * 2280 / 1400));
  max-width: min(1140px, max(560px, (100svh - 260px) * 2280 / 1400));
  margin: 0 auto;
}
.demo-devices img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--dur-base) ease;
}
.demo-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-32);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--sp-4);
}
.demo-tabs::-webkit-scrollbar {
  display: none;
}
.demo-tabs button {
  position: relative;
  background: none;
  border: 0;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.demo-tabs button.on,
.demo-tabs button:hover {
  color: var(--color-text);
}
.demo-tabs button i {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
}
.demo-tabs button i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.demo-tabs button.on i::after {
  animation: tab-progress var(--tab-duration, 8s) linear forwards; /* each tab's length, set on its button */
}
.demo-tabs.paused button.on i::after {
  animation: none;
  transform: none;
}
@keyframes tab-progress {
  to {
    transform: scaleX(1);
  }
}
.demo-captions {
  position: relative;
  min-height: 3em;
  margin-top: var(--sp-28);
  text-align: center;
}
.demo-captions p {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.demo-captions p.on {
  position: relative;
  opacity: 1;
}
.compare {
  margin-top: var(--space-heading);
}
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  min-height: 64px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}
.compare-row span:nth-child(2) {
  text-align: center;
}
.compare-row span:nth-child(3) {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  padding-left: calc(50% - 15px);
}
.compare-row--head {
  font-size: 19px;
  color: var(--color-text);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
}
.compare-row--head span:nth-child(3) {
  padding-left: 0;
  justify-content: center;
}
.mark-yes,
.mark-no {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.mark-yes {
  background: rgb(var(--accent-rgb) / 0.25);
  color: var(--color-accent);
}
.mark-no {
  background: rgba(230, 40, 6, 0.22);
  color: var(--color-error);
}
.compare-row em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 14px;
}
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid);
  margin-top: var(--space-heading);
}
.quote {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-logo {
  width: 112px;
  height: auto;
}
.quote blockquote {
  margin: var(--sp-40) 0 var(--sp-32);
}
.quote figcaption {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote figcaption img {
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--sp-10);
}
.founder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-32), 5vw, 80px);
  align-items: center;
}
.founder h2 {
  margin: 0;
}
.founder p {
  margin: var(--sp-24) 0 0;
  max-width: 52ch;
}
.founder img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.final-cta .section-head .cta-row {
  margin-top: var(--sp-32);
}
@media (max-width: 820px) {
  .quotes,
  .founder {
    grid-template-columns: 1fr;
  }
  .demo-tabs {
    justify-content: flex-start;
    gap: var(--space-grid);
  }
  .demo-tabs button {
    font-size: 16px;
  }
  .compare-row {
    grid-template-columns: 1.6fr 0.6fr 0.8fr;
    font-size: 13px;
    min-height: 56px;
  }
  .compare-row span:nth-child(3) {
    padding-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
  .compare-row em {
    flex-basis: 100%;
    /* always its own line under the X, so every X stays in one column */
    margin-top: 2px;
    font-size: 11px;
    text-align: center;
  }
  .compare-row--head {
    font-size: 15px;
  }
  .founder img {
    aspect-ratio: 4/3;
  }
}
/* ==========================================================================
   Scroll stories (Run your business, Member app)
   ========================================================================== */
.story-section .story-track {
  height: calc(var(--n) * 62vh + 40vh);
}
.story-section .story-sticky h2 {
  max-width: 18ch;
}
.story-section .story-step-btn {
  gap: 0;
}
.story-section .story-caption b::before {
  content: attr(data-n);
}
.story-section .story-pop.pop-card {
  border-radius: 0;
}
.story-section .story-pop.pop-card img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 820px) {
  .story-section .story-track {
    /* phones: a shorter scroll per step (45vh) than on desktop (60vh) */
    height: calc(var(--n) * 45vh + var(--story-stage-h, 410px));
    margin-top: var(--sp-40);
  }
}
@media (max-height: 560px) {
  .story-section .story-track {
    height: calc(var(--n) * 60vh + 100vh) !important;
  }
}
.pg-sections .section.final-cta {
  padding-bottom: var(--space-section) !important;
}
/* Pop-outs: the next step of the job, joined to the tap that causes it */
.story-section .story-screen.story-screen--app {
  position: relative;
}
.story-section .story-panel .story-frame img.story-img {
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--dur-slow) ease,
    transform var(--dur-slow) var(--ease-out);
}
.story-section .story-panel.on .story-frame img.story-img {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.story-section .story-panel[data-i] .story-screen.story-screen--app .story-pop.pop-card {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition:
    opacity var(--dur-base) ease,
    transform var(--dur-slow) var(--ease-out);
  top: auto;
  left: auto;
  right: -16px;
  bottom: -14px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  z-index: 3;
}
.pop-card-label {
  margin: 0 0 var(--sp-8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pop-card.story-pop--list {
  color: var(--color-text);
  font-size: 13px;
}
.pop-card.story-pop--list h6 {
  margin: 0;
  padding: var(--sp-14) var(--sp-16) var(--sp-10);
}
.pop-card.story-pop--list > h6,
.pop-card.story-pop--list > ul {
  background: var(--color-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.pop-card.story-pop--list > ul {
  padding: 0 var(--sp-16) var(--sp-8);
}
.story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--list {
  width: 38%;
}
.story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--push {
  width: 46%;
}
.story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--desk {
  width: 30%;
}
@media (max-width: 820px) {
  .story-section .story-panel[data-i] .story-screen.story-screen--app .story-pop.pop-card {
    right: -4px;
    bottom: -10px;
  }
  .story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--list {
    width: 60%;
  }
  .story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--push {
    width: 78%;
  }
  .story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--desk {
    width: 46%;
  }
  .pop-card-label {
    font-size: 9px;
    margin-bottom: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-section .story-panel .story-frame img.story-img,
  .story-section .story-pop.pop-card {
    transition: opacity var(--dur-fast) !important;
    transform: none !important;
  }
}
.story-section .story-panel[data-i] .story-screen.story-screen--app .story-pop.pop-card--stats {
  right: auto;
  left: 3%;
  width: 33%;
  bottom: 6%;
}
.pop-card-label {
  display: inline-block;
  background: var(--color-bg);
  padding: 3px var(--sp-8);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.35);
}
@media (max-width: 820px) {
  .story-section .story-panel[data-i] .story-screen.story-screen--app .story-pop.pop-card--stats {
    left: 2%;
  }
}
/* Phones: on very short screens the story card is shortened (sections.js), so each pop-out is also capped by
   the height of the screen area it sits on (cqh), and never climbs over the caption above it. The ratios are the
   pop-out images' own (pop-desk 848 x 1060, pop-stats 1514 x 1326); the px values leave room for the label. */
@media (max-width: 820px) {
  .story-section .story-screen.story-screen--app {
    container-type: size;
  }
  .story-section .story-panel[data-i] .story-screen.story-screen--app .pop-card--desk {
    width: min(46%, calc((100cqh - 16px) * 0.8));
  }
  .story-section .story-panel[data-i] .story-screen.story-screen--app .story-pop.pop-card--stats {
    width: min(33%, calc((90cqh - 30px) * 1.14));
  }
}
@container (max-height: 200px) {
  .story-section .pop-card--list li:nth-child(n + 4) {
    display: none;
  }
}
@container (max-height: 160px) {
  .story-section .pop-card--list li:nth-child(n + 3) {
    display: none;
  }
}
/* Timing: the screen fades in alone; 22% of the way through the step (POP_AT in sections.js) a tap
   lands, then the pop-out opens 0.1s later with a short fade so it tracks the scroll position */
.story-section .story-panel.on .story-screen.story-screen--app .story-pop.pop-card {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition-delay: 0s;
}
.story-section .story-panel.on.pop .story-screen.story-screen--app .story-pop.pop-card {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-fast);
  transition-delay: 0.1s;
}
.tap-marker {
  position: absolute;
  left: var(--tap-x);
  top: var(--tap-y);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(1.4);
  pointer-events: none;
  z-index: 2;
  transition:
    opacity var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}
.story-section .story-panel.on.go .tap-marker {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.story-section .story-panel.on.pop .tap-marker {
  animation: tap-pulse 0.55s ease forwards;
  transition-delay: 0s;
}
@keyframes tap-pulse {
  0% {
    opacity: 1;
    transform: none;
  }
  35% {
    opacity: 1;
    transform: scale(0.72);
    background: rgba(255, 255, 255, 0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@media (max-width: 820px) {
  .tap-marker {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tap-marker {
    display: none;
  }
}
/* ==========================================================================
   Product demo: laptop (four tabs) and iPad (kiosk); the cursor only taps what opens the next state
   ========================================================================== */
/* the demo draws its charts and swaps its panels a little faster than the rest of the page */
.demo {
  --dur-slow: 0.5s;
}
.demo .demo-stage {
  position: relative;
}
/* Screen inset inside shell.webp (2280 x 1400, laptop centered in the image) */
.demo-screen {
  position: absolute;
  left: 11.359%;
  top: 5.286%;
  width: 77.193%;
  height: 81.143%;
  overflow: hidden;
  background: var(--color-bg);
  container-type: inline-size;
  --u: calc(100cqw / 1760);
}
.demo-laptop-shell {
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}
.demo-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) ease;
}
.demo-page.on {
  opacity: 1;
}
.demo-screen img {
  position: static;
  opacity: 1;
  transition: none;
  max-width: none;
}
.demo-fit {
  position: absolute !important;
  display: block;
}
.demo-screen .demo-layer {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  display: block;
}
.demo-window {
  overflow: hidden;
}
.demo-scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(calc(var(--sy, 0) * var(--u)));
  transition: transform var(--st, 1.6s) var(--ease-in-out);
}
.demo-scroll > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}
.demo-screen .demo-pop {
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.demo-screen .demo-pop.on {
  opacity: 1;
}
/* Cursor */
.demo-cursor {
  position: absolute;
  left: calc(var(--cursor-x, 900) * var(--u));
  top: calc(var(--cursor-y, 700) * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  z-index: 2;
  pointer-events: none;
  transition:
    left var(--dur-slow) var(--ease-in-out),
    top var(--dur-slow) var(--ease-in-out),
    opacity var(--dur-fast) ease;
  margin: calc(-4 * var(--u)) 0 0 calc(-6 * var(--u));
}
.demo-cursor.vis {
  opacity: 1;
}
.demo-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.demo-cursor::before {
  content: "";
  position: absolute;
  left: calc(6 * var(--u));
  top: calc(4 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #fff;
  opacity: 0;
  transform: scale(0.4);
}
.demo-cursor.clk::before {
  animation: click-ring 0.5s ease-out;
}
@keyframes click-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
/* Messaging */
.demo-chat {
  overflow: hidden;
  background: var(--color-bg);
}
.demo-chat-list {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.demo-chat-list.up {
  transform: translateY(calc(-84 * var(--u)));
}
.demo-message {
  opacity: 0;
  transition: opacity var(--dur-base) ease 0.25s;
  font-family: "IBM Plex Sans", sans-serif;
}
.demo-chat-list.up .demo-message {
  opacity: 1;
}
.demo-avatar {
  border-radius: 50%;
  background: no-repeat;
  background-size: calc(1760 * var(--u)) auto;
  background-position: calc(-825 * var(--u)) calc(-868 * var(--u));
}
/* an image still waiting in data-src (product-demo.js) stays invisible, so no empty or broken-image box shows */
[data-product-demo] img[data-src] {
  visibility: hidden;
}
/* product-demo.js adds .demo-ready when the demo comes near, so this image loads with the other later screens */
.demo-ready .demo-avatar {
  background-image: url(../img/demo/d4-msg.webp);
}
.demo-msg-name,
.demo-msg-meta {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  white-space: nowrap;
  line-height: 1;
}
.demo-msg-name {
  font-size: calc(17 * var(--u));
  color: var(--color-text);
}
.demo-msg-name em {
  font-style: normal;
  font-size: calc(14 * var(--u));
  color: var(--color-text-subtle);
  margin-left: calc(14 * var(--u));
}
.demo-msg-meta {
  top: calc((var(--y) - 4) * var(--u));
  font-size: calc(18.5 * var(--u));
  color: rgba(255, 255, 255, 0.78);
}
.demo-input {
  background: #191a25;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.demo-input.on {
  opacity: 1;
}
.demo-input i {
  display: inline-block;
  width: calc(1.5 * var(--u));
  height: calc(20 * var(--u));
  background: var(--color-accent);
  vertical-align: middle;
  margin-left: calc(2 * var(--u));
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
/* Tabs: labels sit clear of the laptop, progress bar under each label */
.demo .demo-tabs {
  margin-top: clamp(var(--sp-20), 3vw, var(--sp-36));
}
.demo .demo-tabs button {
  padding: var(--sp-6) 0 var(--sp-14);
}
.demo .demo-tabs button i {
  top: auto;
  bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .demo-cursor {
    display: none;
  }
  .demo-scroll,
  .demo-chat-list {
    transition: none;
  }
}
.demo-mask {
  background: var(--color-bg);
}
/* ==========================================================================
   Section components: split sections, cards, onboarding steps
   ========================================================================== */
.section-cta {
  margin-top: clamp(var(--sp-36), 5vw, var(--sp-56));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-14);
}
.section-cta p,
.final-cta-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  text-align: center;
}
.final-cta-note {
  margin-top: var(--sp-16);
}
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--sp-32), 5vw, 72px);
  align-items: center;
}
.media-split--reverse .leads-copy {
  order: 2;
}
.leads-copy h2 {
  margin: 0;
}
.leads-copy .section-sub {
  margin: var(--sp-20) 0 0;
}
.checklist {
  list-style: none;
  margin: var(--sp-32) 0 0;
  padding: 0;
  border-top: 1.5px solid var(--color-line-strong);
}
.checklist li {
  padding: var(--sp-18) 0;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.checklist b {
  color: var(--color-text);
}
.screenshot {
  margin: 0;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}
.screenshot img {
  display: block;
  width: 100%;
  height: auto;
}
.onboarding-steps {
  list-style: none;
  counter-reset: st;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-grid);
  margin: var(--space-heading) 0 0;
  padding: 0;
}
.onboarding-steps li {
  counter-increment: st;
  border-top: 1.5px solid var(--color-line-strong);
  padding-top: var(--sp-20);
  display: flex;
  flex-direction: column;
}
.onboarding-steps li::before {
  content: counter(st, decimal-leading-zero);
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.onboarding-steps b {
  font-weight: 500;
  color: var(--color-text);
  font-size: 18px;
}
.onboarding-steps span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .media-split {
    grid-template-columns: 1fr;
  }
  .media-split--reverse .leads-copy {
    order: 0;
  }
  .onboarding-steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .onboarding-steps {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Product demo: devices, cursor, report views, kiosk flow
   ========================================================================== */
.demo-device {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-slow) ease,
    visibility 0s linear 0.6s;
}
.demo-device.on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-slow) ease,
    visibility 0s;
}
.demo-screen .demo-view {
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.demo-screen .demo-view.on {
  opacity: 1;
}
.demo-ipad .demo-ipad-shell {
  position: absolute;
  left: 11%;
  top: 4%;
  width: 78%;
  height: auto;
  right: auto;
  bottom: auto;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}
.demo-ipad-screen {
  position: absolute;
  left: calc(11% + 78% * 0.04253);
  top: calc(4% + 92% * 0.05873);
  width: calc(78% * 0.9149);
  aspect-ratio: 1194/834;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 1.2%;
  container-type: inline-size;
  --u2: calc(100cqw / 1194);
}
.demo-ipad-screen .kiosk-step {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  max-width: none;
}
.demo-ipad-screen .kiosk-step.on {
  opacity: 1;
}
.demo-finger {
  position: absolute;
  left: calc(var(--touch-x, 597) * var(--u2));
  top: calc(var(--touch-y, 600) * var(--u2));
  width: calc(56 * var(--u2));
  height: calc(56 * var(--u2));
  margin: calc(-28 * var(--u2)) 0 0 calc(-28 * var(--u2));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: calc(2 * var(--u2)) solid rgba(255, 255, 255, 0.85);
  z-index: 3;
  opacity: 0;
  transition:
    left var(--dur-slow) var(--ease-in-out),
    top var(--dur-slow) var(--ease-in-out),
    opacity var(--dur-fast),
    transform var(--dur-fast);
  pointer-events: none;
}
.demo-finger.vis {
  opacity: 1;
}
.demo-finger.tap {
  transform: scale(0.78);
  background: var(--color-text-subtle);
}
/* ==========================================================================
   Section layouts: wide shot, three-up, feature grid, retention flow
   ========================================================================== */
.wide-shot {
  margin: var(--space-heading) auto 0;
  max-width: 1000px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}
.wide-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.three-up {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid);
  max-width: 1000px;
  margin: var(--sp-32) auto 0;
  padding: 0;
}
.three-up li {
  border-top: 1.5px solid var(--color-line-strong);
  padding-top: var(--sp-18);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.three-up b,
.feature-card b,
.retention-flow b {
  font-weight: 500;
  color: var(--color-text);
  font-size: 17px;
}
.three-up span,
.feature-card span,
.retention-flow span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.5;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-grid);
  margin-top: var(--space-heading);
}
.feature-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}
.feature-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.feature-card figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 52ch;
}
.feature-card--wide {
  grid-column: 1/-1;
}
.retention-flow {
  list-style: none;
  counter-reset: fl;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid);
  margin: var(--space-heading) 0 0;
  padding: 0;
}
.retention-flow li {
  counter-increment: fl;
  display: flex;
  flex-direction: column;
}
.retention-step {
  height: clamp(220px, 22vw, 300px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--sp-12);
}
.retention-step img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.retention-flow li b::before {
  content: counter(fl, decimal-leading-zero) "  ";
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .three-up,
  .feature-grid,
  .retention-flow {
    grid-template-columns: 1fr;
  }
}
/* Product demo: chart lines, marketing callouts, kiosk signature */
.demo-chart g {
  opacity: 0;
}
.demo-chart g.on {
  opacity: 1;
}
.demo-chart g.on .chart-point {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: line-draw 1s var(--ease-in-out) forwards;
}
.demo-chart g.on .chart-fill {
  opacity: 0;
  animation: fade-in-to 0.4s ease 0.9s forwards;
}
@keyframes line-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade-in-to {
  to {
    opacity: var(--o, 1);
  }
}
.demo-chart .chart-fill {
  --o: 1;
}
.demo-highlight {
  border: calc(2 * var(--u)) solid var(--color-accent);
  pointer-events: none;
}
.demo-highlight b {
  position: absolute;
  left: calc(-2 * var(--u));
  bottom: 100%;
  margin-bottom: calc(6 * var(--u));
  background: var(--color-accent);
  color: var(--color-bg);
  font:
    500 calc(15 * var(--u)) / 1 "IBM Plex Sans",
    sans-serif;
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.demo-signature {
  position: absolute;
  left: calc(333 * var(--u2));
  top: calc(248 * var(--u2));
  width: calc(526 * var(--u2));
  height: calc(324 * var(--u2));
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.demo-signature.on {
  opacity: 1;
}
.demo-ipad-screen .kiosk-step--agree {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.demo-ipad-screen .kiosk-step--agree.on {
  opacity: 1;
}
.kiosk-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(calc(var(--ks, 0) * var(--u2)));
  transition: transform var(--dur-scene) var(--ease-in-out);
}
.kiosk-body img {
  display: block;
  max-width: none;
}
.kiosk-body .kiosk-check {
  position: absolute;
  width: calc(19 * var(--u2));
  height: calc(19 * var(--u2));
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.kiosk-body .kiosk-check.on {
  opacity: 1;
}
.kiosk-head {
  max-width: none;
}
.kiosk-body > img:first-child {
  position: static;
  opacity: 1;
  width: 100%;
  height: auto;
}
.demo-ipad-screen img.kiosk-head {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  opacity: 1;
}
.kiosk-body img.kiosk-check {
  left: calc(var(--x) * var(--u2));
  top: calc(var(--y) * var(--u2));
  right: auto;
  bottom: auto;
}
/* Product demo: kiosk phone-number typing */
.kiosk-typing {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.kiosk-typing.on {
  opacity: 1;
}
.kiosk-text {
  position: absolute;
  left: calc(310 * var(--u2));
  top: calc(198 * var(--u2));
  font:
    400 calc(14.5 * var(--u2)) / calc(20 * var(--u2)) "IBM Plex Sans",
    sans-serif;
  color: var(--color-text);
  white-space: nowrap;
}
.kiosk-caret {
  position: absolute;
  top: calc(199 * var(--u2));
  left: calc(var(--caret-x, 310) * var(--u2));
  width: calc(1.6 * var(--u2));
  height: calc(18 * var(--u2));
  background: var(--color-accent);
  animation: caret-blink 1s steps(1) infinite;
}
/* ==========================================================================
   Section spacing, phone layout tweaks and the story progress bar
   ========================================================================== */
.story-section .story-layout {
  margin-top: 0;
}
.quote figcaption {
  gap: var(--sp-6);
}
.retention-flow li,
.onboarding-steps li {
  gap: var(--sp-6);
}
@media (max-width: 820px) {
  .story-section .story {
    gap: 0;
  }
  .demo .demo-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
}
/* Mobile story progress: segmented bar on top of the stage card, fills as you scroll */
.story-progress {
  display: none;
}
@media (max-width: 820px) {
  .story-progress {
    display: flex;
    gap: var(--sp-6);
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    z-index: 6;
    pointer-events: none;
  }
  .story-progress i {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    border-radius: 2px;
  }
  .story-progress b {
    display: block;
    height: 100%;
    background: var(--color-accent);
    transform-origin: 0 50%;
  }
  .story-section .story-caption {
    padding-top: var(--sp-26);
  }
}
.kiosk-key-hit {
  position: absolute;
  display: none;
  left: calc(var(--px) * var(--u2));
  top: calc(var(--py) * var(--u2));
  width: calc(var(--pw) * var(--u2));
  height: calc(var(--ph) * var(--u2));
  border-radius: calc(9 * var(--u2));
  background: rgba(60, 64, 80, 0.32);
}
.kiosk-key-hit.on {
  display: block;
}
/* phones: the stage sits under the pinned story heading, and under the intro when that is pinned too (theme.css) */
@media (max-width: 820px) and (min-height: 561px) {
  .story-section .story-stage {
    top: calc(92px + var(--story-heading-h, 99px));
  }
  .story-section .lede-pinned .story-stage {
    top: calc(104px + var(--story-heading-h, 99px) + var(--story-lede-h, 0px));
  }
}
/* ==========================================================================
   Home sections: source-of-truth diagram, step showcases, savings
   ========================================================================== */
.truth-flow {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.truth-in,
.truth-out {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-12);
  width: 100%;
}
.truth-in {
  grid-template-columns: repeat(5, 1fr);
}
.truth-out {
  grid-template-columns: repeat(2, 1fr);
  max-width: 480px;
}
.truth-in li,
.truth-out li {
  text-align: center;
}
.truth-wires {
  display: block;
  width: 100%;
  height: 64px;
  overflow: visible;
}
.truth-wires-out {
  height: 48px;
  max-width: 480px;
}
.truth-wires path {
  fill: none;
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 5;
  animation: wire-flow 1.6s linear infinite;
}
@keyframes wire-flow {
  to {
    stroke-dashoffset: -18;
  }
}
.truth-hub {
  display: grid;
  justify-items: center;
  gap: var(--space-label);
  padding: var(--sp-22) var(--sp-40);
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0.04));
  box-shadow: 0 0 60px rgb(var(--accent-rgb) / 0.12);
  text-align: center;
}
.truth-hub img {
  width: 28px;
  height: 28px;
}
.truth-hub b {
  font-size: 18px;
  font-weight: 600;
}
.truth-hub span {
  font-size: 14px;
  color: var(--color-text-muted);
}
.truth-wires-phone {
  display: none;
}
/* Phones: the five inputs wrap 3 + 2, second row centered, and .truth-wires-phone fans from under that row
   (two wires under each lower box, one from the gap between them) into the dashboard. */
@media (max-width: 640px) {
  .truth-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .truth-in li {
    flex: 0 0 calc((100% - 2 * var(--sp-12)) / 3);
    display: grid;
    place-items: center;
    height: 48px;
    white-space: nowrap;
  }
  .truth-wires {
    height: 44px;
  }
  .truth-wires-in {
    display: none;
  }
  .truth-wires-phone {
    display: block;
  }
}
/* Narrow phones: smaller labels so "Inventory" fits a third of the row */
@media (max-width: 400px) {
  .truth-in li {
    font-size: 15px;
    padding: 0 var(--sp-4);
  }
}
@media (max-width: 339px) {
  .truth-in li {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .truth-wires path {
    animation: none;
  }
}
/* Step showcase (home): numbered steps on the left, a laptop screen on the right that changes with the
   active step. Like the Platform scroll stories, scrolling drives it (showcase.js): the heading and the
   showcase pin together while the steps play, and each step's bar fills as you scroll. As in TrainOn's Figma
   the laptop is wider than its column (up to 128%); showcase.js keeps it inside the screen (--screens-w) and
   the section clips it before that runs, so the page never scrolls sideways. The background stays flat,
   since the pinned content sits still while the section scrolls behind it. */
.showcase-section {
  overflow-x: clip;
  padding-bottom: var(--space-section);
}
.showcase {
  margin-top: var(--space-heading);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(var(--sp-32), 5vw, 72px);
  align-items: center;
}
/* Pinned: showcase.js adds .pinned when the heading and showcase fit on screen together and sets their
   sticky top; on shorter desktop screens it first narrows the laptop so they fit. The spacer is
   the scroll distance the steps play over: 60% of a screen for each of the three steps. Where they do not
   fit (phones, where everything stacks), the section stays in the page flow and each step plays as it
   scrolls past. */
.showcase-track.pinned .showcase-pin {
  position: sticky;
}
.showcase-track.pinned::after {
  content: "";
  display: block;
  height: 180vh;
}
.showcase-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-32);
}
.showcase-steps button {
  display: grid;
  gap: var(--space-label);
  width: 100%;
  padding: var(--sp-22) 0 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.showcase-steps b {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  color: var(--color-text);
}
.showcase-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--fg-black);
  font-size: var(--fs-body-3);
  transition: background var(--dur-fast);
}
.showcase-steps li.on .showcase-num,
.showcase-steps button:hover .showcase-num {
  background: #ffffff;
}
.showcase-steps button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
/* The bar on top of each step, in the product demo tabs' style: a hairline that fills as the scroll carries
   the step, and stays full once the step is passed */
.showcase-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
/* --fill (0 to 1) is how far the scroll has carried this step, set by showcase.js */
.showcase-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}
.showcase-screens {
  display: grid;
  width: min(128%, var(--screens-w, 128%));
  margin: 0;
}
.showcase-screens img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.showcase-screens img.on {
  opacity: 1;
}
.showcase-cta {
  margin-top: var(--space-heading);
}
@media (max-width: 900px) {
  .showcase {
    grid-template-columns: 1fr;
  }
  .showcase-screens {
    order: -1;
    width: 100%;
  }
  /* Pinned on a phone: the laptop stays put and the steps take turns under it, crossfading in one place. The
     hidden steps stay readable to screen readers; they only ignore taps. */
  .showcase-track.pinned .showcase-steps li {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-in-out);
  }
  .showcase-track.pinned .showcase-steps li.on,
  .showcase-track.pinned .showcase-steps li:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
  /* tighter spacing while pinned, so the view fits standard-size phones without shrinking the laptop */
  .showcase-track.pinned .showcase {
    gap: var(--sp-16);
  }
  .showcase-track.pinned .showcase-steps button {
    padding-top: var(--sp-16);
  }
  /* no room for the intro paragraph as well: it is left out, and the laptop keeps its size */
  .showcase-track.compact .section-sub {
    display: none;
  }
}
/* FAQ (home): heading and "See all questions" left, questions right; stacked on phones with the link last */
.home-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "head faq" "more faq";
  grid-template-rows: auto 1fr;
  gap: 0 var(--space-grid);
  align-items: start;
}
.home-faq-grid h2 {
  grid-area: head;
  margin: 0;
}
.home-faq .faq {
  grid-area: faq;
  max-width: none;
  margin: 0;
}
.home-faq-more {
  grid-area: more;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-16);
  color: var(--fg-cerulean);
}
@media (max-width: 820px) {
  .home-faq-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "faq" "more";
    grid-template-rows: auto;
  }
  .home-faq-grid h2 {
    margin-bottom: var(--space-heading);
    text-align: center;
  }
  .home-faq-more {
    justify-self: center;
  }
}
.savings-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-grid);
  align-items: stretch;
}
.savings-bars {
  padding: var(--space-card);
  display: grid;
  gap: var(--sp-28);
  align-content: center;
}
.savings-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-10) var(--sp-16);
  align-items: end;
}
.savings-bar-label {
  font-size: 15px;
  color: var(--color-text-muted);
}
.savings-bar b {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}
.savings-bar--trainon b {
  color: var(--color-accent);
}
.savings-bar b small {
  display: block;
  margin-top: var(--sp-4);
  font-size: 15px;
  text-align: right;
}
.savings-bar-track {
  grid-column: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.savings-bar-track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-line-strong);
  transition: width var(--dur-scene) var(--ease-out) 0.15s;
}
.savings-bar--trainon .savings-bar-track i {
  background: var(--color-accent);
  box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.4);
}
.savings-bars.in .savings-bar-track i,
.savings-bars.on .savings-bar-track i {
  width: var(--w);
}
.savings-bar-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}
.savings-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: au;
  display: grid;
  align-content: center;
}
.savings-steps li {
  counter-increment: au;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--space-label) 0;
  padding: var(--sp-18) 0;
  border-top: 1px solid var(--color-line);
}
.savings-steps li::before {
  content: counter(au);
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
}
.savings-cta {
  margin-top: var(--space-heading);
}
@media (max-width: 820px) {
  .savings-grid {
    grid-template-columns: 1fr;
  }
}
.truth-flow,
.savings-grid {
  margin-top: var(--space-heading);
}