/* Variant: Gallery — light with a blue accent; a tidy masonry grid of pastel product tiles.
   Hero markup in src/variants/gallery; the rest is shared content. Light only. */

:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --muted: #ebedf3;
  --ink: #131a2a;
  --ink-2: #545d70;
  --line: #e0e3eb;
  --accent: #0369a1;
  --accent-ink: #ffffff;
  --accent-soft: #dcecff;
  --green-soft: #ece6ff;
  --amber-soft: #ffe8da;
  --night: #131a2a;
  --night-2: #1f2840;

  --t-sky: #dcecff;
  --t-lilac: #ece6ff;
  --t-peach: #ffe8da;
  --t-butter: #fff2c4;
  --t-rose: #ffe1ea;
  --t-ice: #e3eefc;
  --ui-accent: #0b84d6;
  --ui-img: #e6f2ff;

  color-scheme: light;
}

.ga-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}
@media (min-width: 64em) { .ga-hero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.ga-title { font-size: clamp(2.75rem, 5.2vw, 5rem); line-height: 0.98; letter-spacing: -0.05em; }
.ga-hero .hero__lead { margin-top: 1.5rem; }
.ga-hero .hero__actions { margin-top: 2rem; }

.ga-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 7rem;
  gap: 12px;
}
.ga-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border-radius: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ga-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(19, 26, 42, 0.35); }
.ga-tile figcaption { margin-top: auto; font-size: 0.8125rem; font-weight: 600; }
.ga-tile--web { background: var(--t-sky); grid-column: span 2; grid-row: span 2; }
.ga-tile--web .ui { flex: 1; aspect-ratio: auto; min-height: 0; }
.ga-tile--phone { display: none; background: var(--t-lilac); }
.ga-tile--doc { background: var(--t-peach); }
.ga-tile--doc .docs { flex: 1; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ga-tile--doc .doc { background: #ffffff; }
.ga-tile--doc .doc.is-sel { background: #f08a5d; }
.ga-tile--chart { background: var(--t-butter); }
.ga-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.ga-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: #e5a300; }
.ga-bars i:nth-child(1) { height: 30%; } .ga-bars i:nth-child(2) { height: 48%; } .ga-bars i:nth-child(3) { height: 40%; }
.ga-bars i:nth-child(4) { height: 64%; } .ga-bars i:nth-child(5) { height: 58%; } .ga-bars i:nth-child(6) { height: 80%; } .ga-bars i:nth-child(7) { height: 95%; }
.ga-tile--cal { background: var(--t-rose); grid-column: span 2; }
.ga-cal { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #ffffff; font-size: 0.8125rem; }
.ga-cal__day { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: #e14d7a; color: #ffffff; font-weight: 700; }
.ga-cal span:last-child { color: var(--ink-2); }
.ga-tile--people { display: none; background: var(--t-ice); }
.ga-people { display: flex; padding-left: 8px; }
.ga-people .av { width: 38px; height: 38px; margin-left: -8px; border: 3px solid #ffffff; }
.ga-people .av:nth-child(1) { background: #ffd2b8; } .ga-people .av:nth-child(2) { background: #cfd9ff; }
.ga-people .av:nth-child(3) { background: #ffc7d6; } .ga-people .av:nth-child(4) { background: #ffe39a; }

.ga-phone { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 26px 10px 10px; border-radius: 22px; background: #ffffff; position: relative; min-height: 0; overflow: hidden; }
.ga-phone__notch { position: absolute; left: 50%; top: 8px; width: 34%; height: 10px; translate: -50% 0; border-radius: 999px; background: #e3e6ea; }
.ga-phone .sk--h { width: 60%; height: 10px; }
.ga-phone .row { grid-template-columns: 20px 1fr; padding-block: 6px; }
.ga-phone .av { width: 20px; height: 20px; background: var(--t-lilac); }

@media (min-width: 64em) {
  .ga-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 7.5rem; }
  .ga-tile--web { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .ga-tile--phone { display: flex; grid-column: 4; grid-row: 1 / span 3; }
  .ga-tile--chart { grid-column: 1 / span 2; grid-row: 3; }
  .ga-tile--doc { grid-column: 3; grid-row: 3; }
  .ga-tile--cal { grid-column: 1 / span 2; grid-row: 4; }
  .ga-tile--people { display: flex; grid-column: 3 / span 2; grid-row: 4; }
}

/* Shared sections */
.tile:nth-child(2) { background: var(--t-lilac); border-color: transparent; }
.tile:nth-child(3) { background: var(--t-peach); border-color: transparent; }
.tile--dark .focus strong { color: #8fd0ff; }
.steps li::before { background: var(--accent); }
.faq summary::after { background: var(--accent-soft); color: var(--accent); }
.product__visual--water { background: var(--t-sky); }
.product__visual--jobs { background: var(--t-lilac); }
.product__visual--food { background: var(--t-peach); }
.product__link { color: var(--accent); }
.phscale__ticks { color: var(--ink-2); }