/* Green Dotter: the three image panels ("Set up in a minute.", "It steps aside when you take over.",
   "Set the week once."). Shared by the homepage, the Mac and Windows pages and every download landing page
   (merge of the A/B winner, 13 Oct 2026). Moved out of lp-2026.css so a landing page can load the panels
   WITHOUT the rest of that file (nav, hero, download-band rules that would restyle an older page).
   Everything here is under a .v-* class; nothing touches .dl-buttons, .dl-col, .dl-group, .lp-ctas or
   [data-dl-*] (download-buttons safety contract, CLAUDE.md). Colours/fonts come from the page's own
   --green, --surface, --border, --text-mute, --mono, --sans tokens. */

:root {
  --v-panel: #f6f4ee;
  --v-panel-text: #6b6560;           /* 5.3:1 on #f6f4ee; the site's --text-mute is 4.4:1 there */
  --v-ink: #1c1917;
  --v-shadow-lg: drop-shadow(0 24px 40px rgba(40, 30, 10, .18)) drop-shadow(0 6px 12px rgba(40, 30, 10, .10));
  --v-shadow-hero: drop-shadow(0 30px 50px rgba(40, 30, 10, .20)) drop-shadow(0 8px 14px rgba(40, 30, 10, .10));
}

/* ---------- panels ---------- */
.v-stack { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; padding-bottom: 32px; }
.v-panel {
  position: relative; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--border);
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(35, 165, 90, .16), transparent 65%),
    radial-gradient(55% 45% at 100% 100%, rgba(35, 165, 90, .12), transparent 70%),
    var(--v-panel);
  padding: 56px 56px 0;
}
.v-panel.v-nofig { padding-bottom: 48px; }
.v-panel h2 {
  font-size: clamp(30px, 4vw, 52px); font-weight: 620;
  letter-spacing: -.035em; line-height: 1.02;
  max-width: 15ch; text-wrap: balance; margin: 0 0 16px; color: var(--v-ink);
}
.v-panel > p {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35;
  color: var(--v-panel-text); max-width: 36ch; text-wrap: pretty; margin: 0 0 36px;
}
.v-beta {
  display: inline-block; margin: 0 0 18px;
  font: 600 12px var(--mono); letter-spacing: .4px; text-transform: uppercase;
  color: var(--green); background: rgba(35, 165, 90, .08);
  border: 1px solid rgba(35, 165, 90, .22); padding: 4px 9px; border-radius: 999px;
}
.v-fig { position: relative; width: 100%; }
/* The image is taken out of flow and the panel's own overflow cuts it, so the screenshot bleeds off the
   bottom edge (the panel has no bottom padding) while its shadow still spreads at the sides. */
.v-fig img {
  position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block;
  border-radius: 14px 14px 0 0; filter: var(--v-shadow-lg);
}
/* A shot cut to the window with transparent corners carries its own radius; a CSS one would trim it. */
.v-fig img.v-alpha { border-radius: 0; }
/* A tile that is shown whole (the compact bars): the bar itself, transparent corners, the panel's shadow. */
.v-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 56px; }
.v-tiles img {
  display: block; width: 100%; height: auto; filter: var(--v-shadow-lg);
}
.v-note { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin: 14px 4px 0; max-width: 62ch; }
.v-note a, .v-panel a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v-note a:hover, .v-panel a:hover { filter: brightness(.85); }

/* ---------- two-mode cards ---------- */
.v-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; }
.v-mode {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px;
  box-shadow: 0 1px 2px rgba(60, 50, 40, .04);
}
.v-mode-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(35, 165, 90, .08); border: 1px solid rgba(35, 165, 90, .2);
  color: var(--green); display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 16px;
}
.v-mode h3 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 8px; color: var(--v-ink); }
.v-mode p { font-size: 16px; line-height: 1.55; color: var(--text-mute); margin: 0; text-wrap: pretty; }
.v-mode a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 720px) {
  .v-panel { border-radius: 20px; padding: 32px 20px 0; }
  .v-panel.v-nofig { padding-bottom: 28px; }
  .v-panel h2 { font-size: 30px; }
  .v-panel > p { margin-bottom: 26px; }
  .v-modes { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .v-mode { padding: 22px; }
  .v-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
  .v-fig img { border-radius: 10px 10px 0 0; }
  .v-stack { gap: 16px; }
}