/* Variant: Slides — a swipeable CSS carousel with one colourful slide per focus area.
   Hero markup in src/variants/slides; the rest is shared content. Light only. */

:root {
  --bg: #f8f8fb;
  --surface: #ffffff;
  --muted: #eeeff5;
  --ink: #14151c;
  --ink-2: #565a66;
  --line: #e4e5ec;
  --accent: #14151c;
  --accent-ink: #ffffff;
  --accent-soft: #e8ebff;
  --green-soft: #ffe6e3;
  --amber-soft: #fff3cc;
  --night: #14151c;
  --night-2: #22232d;

  --web: #5b6cff;
  --web-tint: #e6e9ff;
  --crm: #ff6b5b;
  --crm-tint: #ffe5e1;
  --doc: #e5a300;
  --doc-tint: #fff1c7;

  color-scheme: light;
}

.sl-hero__inner { padding-top: clamp(2.5rem, 6vw, 5rem); }
.sl-hero__text { display: grid; gap: 1.5rem 4rem; }
.sl-title { font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.055em; max-width: 14ch; }
@media (min-width: 60em) {
  .sl-hero__text { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .sl-title { grid-column: 1 / -1; }
}

/* Slider: hidden radios set --i; the track slides by one slide width per step. */
.sl { --w: min(84vw, 62rem); --gap: clamp(14px, 2vw, 24px); --inset: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.sl__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sl__viewport { overflow: hidden; }
.sl-track {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--inset);
  transform: translateX(calc(var(--i, 0) * -1 * (var(--w) + var(--gap))));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .sl-track { transition: none; } }
#sl-2:checked ~ .sl__viewport .sl-track { --i: 1; }
#sl-3:checked ~ .sl__viewport .sl-track { --i: 2; }

.sl-slide {
  flex: 0 0 var(--w);
  display: grid;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 32px;
}
@media (min-width: 48em) { .sl-slide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.sl-slide--web { --ui-accent: var(--web); --ui-img: var(--web-tint); background: var(--web-tint); }
.sl-slide--crm { --ui-accent: var(--crm); --ui-tint-a: #ffd6cf; background: var(--crm-tint); }
.sl-slide--doc { --ui-accent: var(--doc); background: var(--doc-tint); }
.sl-slide__num { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.sl-slide h2 { margin-top: 0.5rem; font-size: clamp(1.75rem, 3.1vw, 2.875rem); letter-spacing: -0.045em; line-height: 1.02; hyphens: manual; }
.sl-slide p { margin-top: 1rem; max-width: 26rem; color: var(--ink-2); }
.sl-ui { box-shadow: 0 30px 60px -30px rgba(20, 21, 28, 0.35); }

.sl__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.sl__dots { display: flex; gap: 8px; }
.sl__dot { width: 2.75rem; height: 6px; border-radius: 999px; background: var(--line); cursor: pointer; transition: background-color 0.2s, width 0.2s; }
.sl__dot:hover { background: #c9ccd8; }
#sl-1:checked ~ .sl__controls .sl__dot--1 { width: 4rem; background: var(--web); }
#sl-2:checked ~ .sl__controls .sl__dot--2 { width: 4rem; background: var(--crm); }
#sl-3:checked ~ .sl__controls .sl__dot--3 { width: 4rem; background: var(--doc); }
#sl-1:focus-visible ~ .sl__controls .sl__dot--1,
#sl-2:focus-visible ~ .sl__controls .sl__dot--2,
#sl-3:focus-visible ~ .sl__controls .sl__dot--3 { outline: 2px solid var(--ink); outline-offset: 4px; }

.sl__arrows { display: flex; gap: 8px; }
.sl__arrow {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.sl__arrow:hover { border-color: var(--ink); }
.sl__arrow.is-off { color: #c3c6d0; cursor: default; }
.sl__arrow.is-off:hover { border-color: var(--line); }
#sl-1:checked ~ .sl__controls .sl__prev--1, #sl-1:checked ~ .sl__controls .sl__next--1,
#sl-2:checked ~ .sl__controls .sl__prev--2, #sl-2:checked ~ .sl__controls .sl__next--2,
#sl-3:checked ~ .sl__controls .sl__prev--3, #sl-3:checked ~ .sl__controls .sl__next--3 { display: grid; }

/* Shared sections pick up the slide colours. */
.tile:nth-child(2) { background: var(--crm-tint); border-color: transparent; }
.tile:nth-child(3) { background: var(--doc-tint); border-color: transparent; }
.tile--dark .focus strong { color: #a9b2ff; }
.ticks li::before { border-color: var(--ink); }
.steps li:nth-child(1)::before { background: var(--web); }
.steps li:nth-child(2)::before { background: var(--crm); }
.steps li:nth-child(3)::before { background: var(--doc); color: var(--ink); }
.steps li:nth-child(4)::before { background: var(--ink); }
.product__visual--water { background: var(--web-tint); }
.product__visual--jobs { background: var(--crm-tint); }
.product__visual--food { background: var(--doc-tint); }
.product__link { color: var(--ink); }
.phscale__ticks { color: var(--ink-2); }