/* Variant: Callouts — blush and berry; a large app window annotated with four feature callouts.
   Hero markup in src/variants/callouts; the rest is shared content. Light only. */

:root {
  --bg: #fdf6f9;
  --surface: #ffffff;
  --muted: #f8e9f0;
  --ink: #2a1020;
  --ink-2: #6e5263;
  --line: #f0dbe5;
  --accent: #b0226e;
  --accent-ink: #ffffff;
  --accent-soft: #fbe1ee;
  --green-soft: #f3e3fb;
  --amber-soft: #ffe9dc;
  --night: #2a1020;
  --night-2: #3b1830;
  --night-ink-2: #d9bccb;

  --ui-accent: #d6338a;
  --ui-img: #fde8f2;
  --ui-tint-a: #fbd5e7;
  --ui-tint-b: #eadcff;
  --ui-tint-c: #ffe1cf;

  color-scheme: light;
}

.co-hero__inner { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem); }
.co-hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.co-title { max-width: 15ch; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.96; letter-spacing: -0.05em; }
.co-hero .hero__lead { margin-top: 1.5rem; }
.co-hero .hero__actions { justify-content: center; align-self: center; margin-top: 2rem; }

.co-shot { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.co-app { aspect-ratio: 16 / 10; border-radius: 18px; box-shadow: 0 50px 90px -50px rgba(120, 20, 70, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.7); }
.co-app__body { flex: 1; display: grid; grid-template-columns: 18% minmax(0, 1fr) 22%; min-height: 0; }
.co-app__side { display: flex; flex-direction: column; gap: 12px; padding: 18px 14px; border-right: 1px solid var(--ui-line); }
.co-app__side .is-on { background: var(--ui-accent); }
.co-app__main { padding: 16px 20px; }
.co-app__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.co-app__head .sk--h { width: 40%; height: 16px; }
.av--lg { width: 44px; height: 44px; background: var(--ui-tint-a); }
.co-app__docs { display: grid; gap: 10px; align-content: start; padding: 18px 14px; border-left: 1px solid var(--ui-line); }
.co-app__docs .doc { aspect-ratio: 4 / 3; }

.co-calls { display: grid; gap: 0.6rem; padding: 0; list-style: none; }
.co-call {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 30px -20px rgba(120, 20, 70, 0.35);
  font-size: 0.9375rem;
  font-weight: 600;
}
.co-call::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Wide screens: callouts flank the window, connected by thin lines. */
@media (min-width: 64em) {
  .co-shot {
    grid-template-columns: 14rem minmax(0, 1fr) 14rem;
    grid-template-rows: 1fr 1fr;
    column-gap: 3.5rem;
    row-gap: 0;
    align-items: center;
  }
  .co-app { grid-column: 2; grid-row: 1 / span 2; }
  .co-calls { display: contents; }
  .co-call--1 { grid-column: 1; grid-row: 1; align-self: center; }
  .co-call--2 { grid-column: 1; grid-row: 2; align-self: center; }
  .co-call--3 { grid-column: 3; grid-row: 1; align-self: center; }
  .co-call--4 { grid-column: 3; grid-row: 2; align-self: center; }
  .co-call::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), rgba(176, 34, 110, 0.2));
  }
  .co-call--1::after, .co-call--2::after { left: 100%; }
  .co-call--3::after, .co-call--4::after { right: 100%; background: linear-gradient(270deg, var(--accent), rgba(176, 34, 110, 0.2)); }
}

/* Shared sections */
.tile--dark .focus strong { color: #ffb0d4; }
.ticks li::before { border-color: var(--accent); }
.steps li::before { background: var(--accent); }
.faq summary::after { background: var(--accent-soft); color: var(--accent); }
.product__visual--water { background: #f3e3fb; }
.product__visual--jobs { background: #fbe1ee; }
.product__visual--food { background: #ffe9dc; }
.product__link { color: var(--accent); }
.phscale__ticks { color: var(--ink-2); }
.section--contact { background: linear-gradient(160deg, #3b1830, #2a1020 60%); }