/* Variant: Stack — split hero with the product windows fanned out beside the headline;
   orange accent. Overrides assets/site.css. Light only. */

:root {
  --bg: #f6f7f7;
  --surface: #ffffff;
  --muted: #eceeef;
  --ink: #111418;
  --ink-2: #545b64;
  --line: #e0e3e6;
  --accent: #ff6a2b;
  --accent-ink: #111418;
  --accent-soft: #ffe6da;
  --green-soft: #ddf1e5;
  --amber-soft: #fff0cc;
  --night: #111418;
  --night-2: #1d2228;
  --night-line: rgba(255, 255, 255, 0.12);
  --night-ink: #f3f4f5;
  --night-ink-2: #9ea6af;

  --ui-bg: #ffffff;
  --ui-line: #eceef0;
  --ui-fill: #e3e6e9;
  --ui-fill-2: #f2f3f5;
  --ui-strong: #111418;
  --ui-accent: #ff6a2b;
  --ui-img: #fff0e8;
  --ui-tint-a: #ffe0d1;
  --ui-tint-b: #d9f0e2;
  --ui-tint-c: #fff0cc;
  --stage-bg: var(--accent-soft);
  --stage-dots: transparent;
  --stage-ink: #111418;

  color-scheme: light;
}

.pill--accent { font-weight: 650; }
.product__link {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.ticks li::before { border-color: var(--accent); }

/* Split hero: text left, fanned-out windows right. */
@media (min-width: 64em) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    max-width: var(--max);
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) 0;
  }
  .hero > .wrap { padding-inline: 0; max-width: none; }

  .hero__title { font-size: clamp(3rem, 5.4vw, 5.5rem); max-width: 11ch; }
  .hero__row { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero__actions { align-self: start; }

  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 34rem;
    margin-top: 0;
    padding: 40px;
  }
  .stage__item {
    grid-area: 1 / 1;
    position: relative;
    width: 68%;
  }
  .stage__item .ui { box-shadow: 0 30px 60px -28px rgba(17, 20, 24, 0.35); border: 1px solid var(--ui-line); }
  .stage__item:nth-child(1) { justify-self: start; align-self: start; rotate: -4deg; }
  .stage__item:nth-child(2) { justify-self: center; align-self: center; z-index: 1; }
  .stage__item:nth-child(3) { justify-self: end; align-self: end; rotate: 3.5deg; z-index: 2; }

  .stage__item figcaption {
    position: absolute;
    right: 16px;
    top: -0.85rem;
    margin: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.8125rem;
  }
}

.steps li::before { background: var(--ink); color: var(--bg); }
@media (min-width: 64em) {
  .steps li:not(:last-child)::after { background: var(--line); }
}

.tile--dark .focus strong { color: var(--accent); }
.faq details[open] summary::after { color: var(--accent-ink); }

.contact__card:first-child { background: var(--accent); color: var(--accent-ink); }
.contact__card:first-child .contact__label { color: var(--accent-ink); opacity: 0.75; }
.contact__card:first-child a:focus-visible { outline-color: var(--accent-ink); }

.phscale__ticks { color: var(--ink-2); }