/* Variant: Mosaic — the hero as a grid of pastel tiles. Overrides assets/site.css. Light only. */

:root {
  --bg: #eff0f2;
  --surface: #ffffff;
  --muted: #e6e8eb;
  --ink: #121417;
  --ink-2: #4f5560;
  --line: #dde0e5;
  --accent: #121417;
  --accent-ink: #ffffff;
  --accent-soft: #e8e5ff;
  --green-soft: #d8f3e4;
  --amber-soft: #fff1bf;
  --night: #121417;
  --night-2: #1f2328;
  --night-line: rgba(255, 255, 255, 0.12);
  --night-ink: #f3f4f6;
  --night-ink-2: #9ea4ad;

  --lavender: #e8e5ff;
  --mint: #d8f3e4;
  --butter: #fff1bf;
  --sky: #d9eaff;

  --ui-bg: #ffffff;
  --ui-line: #eceef1;
  --ui-fill: #e2e5e9;
  --ui-fill-2: #f2f3f5;
  --ui-strong: #121417;
  --ui-accent: #6c5ce7;
  --ui-img: #efedff;
  --ui-tint-a: #e3dfff;
  --ui-tint-b: #d3f0df;
  --ui-tint-c: #ffeeb5;
  --stage-bg: transparent;
  --stage-dots: transparent;
  --stage-ink: #121417;

  --r-tile: 28px;

  color-scheme: light;
}

.ui { box-shadow: 0 18px 40px -24px rgba(18, 20, 23, 0.35); }

@media (min-width: 64em) {
  .hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--max);
    margin-inline: auto;
    padding: 24px var(--gutter) 0;
  }
  .hero > .wrap,
  .stage { display: contents; }

  .hero__title {
    grid-column: 1 / span 3;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    min-height: 24rem;
    max-width: none;
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--r-tile);
    background: var(--surface);
    font-size: clamp(3rem, 6.2vw, 6.25rem);
  }
  .hero__row {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0;
    padding: 32px;
    border-radius: var(--r-tile);
    background: var(--lavender);
  }
  .hero__lead { font-size: 1.0625rem; color: var(--ink); }
  .hero__actions { flex-direction: column; align-items: stretch; align-self: stretch; }
  .hero .pill--ghost { background: rgba(255, 255, 255, 0.6); border-color: transparent; }

  .stage__item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--r-tile);
  }
  .stage__item:nth-child(1) { grid-column: span 2; background: var(--sky); }
  .stage__item:nth-child(2) { background: var(--mint); }
  .stage__item:nth-child(3) { background: var(--butter); }
  .stage__item .ui { aspect-ratio: auto; height: 15rem; }
  .stage__item figcaption { margin-top: 1rem; font-weight: 600; }
}

.pill--ghost { background: var(--surface); }

.tile { border: 0; border-radius: var(--r-tile); }
.tile:nth-child(2) { background: var(--mint); }
.tile:nth-child(3) { background: var(--butter); }
.tile:not(.tile--dark) > p { color: var(--ink); opacity: 0.8; }
.ticks li::before { border-color: var(--ink); }

.steps li::before { background: var(--ink); }
.section--muted { background: var(--surface); }
.faq details { background: var(--lavender); }
.faq summary::after { background: rgba(255, 255, 255, 0.7); }

.product__visual { border-radius: var(--r-tile); }
.product__visual--water { background: var(--sky); }
.product__visual--jobs { background: var(--mint); }
.product__visual--food { background: var(--butter); }
.product__link { color: var(--ink); text-decoration-thickness: 2px; }
.phscale__ticks { color: var(--ink-2); }

.contact__card { border-radius: var(--r-tile); color: var(--ink); }
.contact__card:nth-child(1) { background: var(--lavender); }
.contact__card:nth-child(2) { background: var(--mint); }
.contact__card:nth-child(3) { background: var(--butter); }
.contact__card .contact__label { color: var(--ink-2); }
.contact__card :focus-visible { outline-color: var(--ink); }