/* Green Dotter hero: a drawn desktop (no photo, no OS logos or system art) with the app's compact bar
   in the corner, one dashed safe area, the app's cursor and the person's cursor. The markup lives in
   the page so the first frame is complete without JS; assets/lp-hero-motion.js only moves things.
   Mac by default. Windows when the box has .gdm-win, or <html> has .gd-win (set before paint from
   the visitor's OS). data-gdm-story on the box picks the emphasis: full (default) | interval | area |
   wiggle. Sizes use container units so everything scales with the box. */
.gdm {
  position: relative; aspect-ratio: 16 / 10; overflow: clip; contain: layout; container-type: inline-size;
  border-radius: 14px; background: #f6f4ee; color: #1c1917;
  box-shadow: 0 30px 50px rgba(40, 30, 10, .20), 0 8px 14px rgba(40, 30, 10, .10);
  pointer-events: none; user-select: none;
  font-family: var(--sans, Geist, Inter, -apple-system, BlinkMacSystemFont, sans-serif);
  --gdm-green: #23a55a; --gdm-amber: #f59e0b; --gdm-ink: #1c1917; --gdm-out: cubic-bezier(.23, 1, .32, 1);
  --gdm-c: 18px; --gdm-c: clamp(14px, 2.6cqi, 22px);      /* cursor size */
  --gdm-f: 11px; --gdm-f: clamp(10px, 1.45cqi, 12.5px);   /* cursor label size */
  --gdm-s: 7px;  --gdm-s: clamp(5px, 1.35cqi, 11px);      /* desktop chrome text */
}
.gdm *, .gdm *::before { box-sizing: border-box; }
.gdm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wallpaper: soft light in the site palette. */
.gdm-wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 18% 22%, rgba(35, 165, 90, .30), transparent 62%),
    radial-gradient(55% 50% at 86% 78%, rgba(245, 158, 11, .16), transparent 60%),
    radial-gradient(60% 55% at 72% 18%, rgba(35, 165, 90, .12), transparent 60%),
    linear-gradient(160deg, #f8f6f0, #e7eee4);
}

/* Mac menu bar. */
.gdm-top {
  position: absolute; left: 0; right: 0; top: 0; height: 4.6%;
  display: flex; align-items: center; gap: 1.9cqi; padding: 0 1.9cqi;
  background: rgba(255, 255, 255, .58); font-size: var(--gdm-s); font-weight: 500; color: #2a2622; white-space: nowrap;
}
.gdm-top b { font-weight: 700; }
.gdm-top .lg { width: 1.35cqi; height: 1.35cqi; border-radius: .4cqi; background: #2a2622; opacity: .85; }
.gdm-top .r { margin-left: auto; display: flex; align-items: center; gap: 1.4cqi; }
.gdm-top .wf { width: 1.5cqi; height: .85cqi; border: 1px solid currentColor; border-bottom: 0; border-radius: 1.5cqi 1.5cqi 0 0; opacity: .75; }
.gdm-top .bt { width: 2cqi; height: 1cqi; border: 1px solid currentColor; border-radius: 2px; opacity: .75; background: linear-gradient(90deg, currentColor 70%, transparent 70%); }

/* Desktop icons: right column on a Mac, left column on Windows. */
.gdm-icons { position: absolute; top: 8%; right: 1.7%; display: grid; gap: 2.4cqi; justify-items: center; }
.gdm-icons .ic { display: grid; justify-items: center; gap: .5cqi; font-size: var(--gdm-s); font-weight: 500; color: #1c1917; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.gdm-icons svg { width: 6.6cqi; height: auto; display: block; color: #7fb0e6; filter: drop-shadow(0 1px 1px rgba(28, 25, 23, .18)); }
.gdm-icons .doc svg { width: 5.4cqi; color: #fff; }

/* Mac dock; the same element is the Windows taskbar. */
.gdm-dock {
  position: absolute; left: 50%; bottom: 2.6%; transform: translateX(-50%); height: 9.6%;
  display: flex; align-items: center; gap: 1cqi; padding: 0 1.1cqi; border-radius: 2.1cqi;
  background: rgba(255, 255, 255, .52); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 4px 14px rgba(28, 25, 23, .08);
}
.gdm-dock i { display: block; width: 6.6cqi; height: 6.6cqi; border-radius: 1.6cqi; background: var(--t, #ddd); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07); }
.gdm-dock i:nth-of-type(1) { --t: linear-gradient(145deg, #62b0ff, #2d6fe0); }
.gdm-dock i:nth-of-type(2) { --t: linear-gradient(145deg, #ffd166, #f59e0b); }
.gdm-dock i:nth-of-type(3) { --t: linear-gradient(145deg, #4ad17f, #1e8f4e); }
.gdm-dock i:nth-of-type(4) { --t: linear-gradient(145deg, #fff, #e8e4dc); }
.gdm-dock i:nth-of-type(5) { --t: linear-gradient(145deg, #ff8f8f, #e03131); }
.gdm-dock i:nth-of-type(6) { --t: linear-gradient(145deg, #c9b3ff, #7c5cd6); }
.gdm-dock i:nth-of-type(7) { --t: linear-gradient(145deg, #5f5b55, #1c1917); }
.gdm-dock i:nth-of-type(8) { --t: linear-gradient(145deg, #e8e4dc, #c8c2b6); }
.gdm-dock .sep { width: 1px; height: 68%; background: rgba(28, 25, 23, .16); margin: 0 .5cqi; }
.gdm-dock .srch, .gdm-tray { display: none; }

/* Windows skin. */
:where(.gdm-win, .gd-win .gdm) .gdm-wall {
  background:
    radial-gradient(60% 70% at 72% 28%, rgba(35, 165, 90, .24), transparent 62%),
    radial-gradient(50% 50% at 14% 84%, rgba(245, 158, 11, .15), transparent 60%),
    linear-gradient(200deg, #ecf3ee, #f7f5ef);
}
:where(.gdm-win, .gd-win .gdm) .gdm-top { display: none; }
:where(.gdm-win, .gd-win .gdm) .gdm-icons { right: auto; left: 1.7%; top: 3%; }
:where(.gdm-win, .gd-win .gdm) .gdm-icons svg { color: #ecc05a; }
:where(.gdm-win, .gd-win .gdm) .gdm-dock {
  left: 0; right: 0; bottom: 0; transform: none; height: 7.8%; border-radius: 0; justify-content: center; gap: 1.5cqi;
  background: rgba(248, 247, 243, .94); border: 0; border-top: 1px solid rgba(28, 25, 23, .08); box-shadow: none;
}
:where(.gdm-win, .gd-win .gdm) .gdm-dock i { width: 4.4cqi; height: 4.4cqi; border-radius: 1cqi; }
:where(.gdm-win, .gd-win .gdm) .gdm-dock .sep, :where(.gdm-win, .gd-win .gdm) .gdm-dock i:nth-of-type(8) { display: none; }
:where(.gdm-win, .gd-win .gdm) .gdm-dock .srch {
  display: flex; align-items: center; height: 4.8cqi; min-width: 15cqi; padding: 0 1.5cqi; border-radius: 2.4cqi;
  background: #fff; border: 1px solid rgba(28, 25, 23, .1); font-size: var(--gdm-s); color: #78716c;
}
:where(.gdm-win, .gd-win .gdm) .gdm-tray { display: block; position: absolute; right: 1.8cqi; top: 50%; transform: translateY(-50%); text-align: right; font-size: var(--gdm-s); line-height: 1.25; color: #2a2622; }

/* The compact bar, drawn from the app's own tokens (384 x 96 in the app; sizes are % of the bar width). */
.gdm-bar {
  position: absolute; right: 2.4%; bottom: 15%; width: clamp(190px, 43cqi, 300px); container-type: inline-size;
  border-radius: clamp(9px, 2cqi, 14px); background: #fdfcf9; overflow: hidden;
  box-shadow: 0 10px 24px rgba(28, 25, 23, .14), 0 2px 6px rgba(28, 25, 23, .08);
}
.gdm-bi {
  display: flex; align-items: center; gap: 3.2cqi; padding: 3.4cqi 3.6cqi 4cqi; border-radius: inherit;
  background: rgba(35, 165, 90, .06); border: 1px solid rgba(35, 165, 90, .22);
  transition: background-color .18s var(--gdm-out), border-color .18s var(--gdm-out);
}
.gdm-bl { min-width: 0; flex: 1; }
.gdm-st { display: flex; align-items: center; gap: 1.5cqi; font-size: 2.73cqi; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1e8f4e; white-space: nowrap; transition: color .18s var(--gdm-out); }
.gdm-st::before { content: ""; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: var(--gdm-green); transition: background-color .18s var(--gdm-out); }
.gdm-num { font-family: var(--mono, "Geist Mono", ui-monospace, Menlo, monospace); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 6.8cqi; line-height: 1.1; letter-spacing: -.02em; color: #1e8f4e; margin: .6cqi 0 .5cqi; white-space: nowrap; transition: color .18s var(--gdm-out); }
.gdm-cap { font-size: 2.73cqi; line-height: 1.35; color: #78716c; white-space: nowrap; }
.gdm-cap b { display: block; font-weight: 600; font-size: 3cqi; color: #1c1917; }
.gdm-dv { width: 1px; align-self: stretch; background: rgba(35, 165, 90, .22); }
.gdm-bm { min-width: 0; font-size: 2.6cqi; line-height: 1.3; color: #78716c; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.gdm-bm b { display: block; font-family: var(--mono, "Geist Mono", ui-monospace, Menlo, monospace); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 3.4cqi; letter-spacing: -.01em; color: #1c1917; text-transform: none; }
.gdm-bm i { display: block; font-style: normal; }
.gdm-bm i:first-of-type { margin-bottom: 1.6cqi; }
.gdm-bb { display: flex; align-items: center; gap: 2cqi; }
.gdm-bb span { display: grid; place-items: center; width: 8.8cqi; height: 8.8cqi; border-radius: 2.3cqi; border: 1px solid #e8e4dc; background: #fff; }
.gdm-bb .p::before { content: ""; width: 2.6cqi; height: 3cqi; border-left: .8cqi solid #1c1917; border-right: .8cqi solid #1c1917; }
.gdm-bb .s { background: #e03131; border-color: #e03131; }
.gdm-bb .s::before { content: ""; width: 2.6cqi; height: 2.6cqi; border-radius: .5cqi; background: #fff; }
.gdm-bb .x { width: 4.2cqi; height: 4.2cqi; color: #78716c; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gdm-pg { position: absolute; left: 0; bottom: 0; height: 3px; width: 22%; background: var(--gdm-green); border-radius: 0 3px 3px 0; }
.gdm-bar.is-paused .gdm-bi { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .25); }
.gdm-bar.is-paused .gdm-st { color: #b45309; }
.gdm-bar.is-paused .gdm-st::before { background: var(--gdm-amber); }
.gdm-bar.is-paused .gdm-num { color: #78716c; }
.gdm-bar.is-paused .gdm-dv { background: rgba(245, 158, 11, .25); }
.gdm-bar.is-paused .gdm-pg { background: #d6d1c6; }
.gdm-bar.is-paused .gdm-bb .p { background: var(--gdm-green); border-color: var(--gdm-green); }
.gdm-bar.is-paused .gdm-bb .p::before { width: 0; height: 0; border: 0; border-left: 2.8cqi solid #fff; border-top: 1.8cqi solid transparent; border-bottom: 1.8cqi solid transparent; margin-left: .6cqi; }
@container (max-width: 215px) { .gdm-bm, .gdm-dv { display: none; } }

/* The one safe area. CSS owns its place; the script clicks inside whatever box it finds. */
.gdm-box {
  position: absolute; left: 8%; top: 30%; width: 30%; height: 34%; border-radius: 6px;
  border: 2px dashed rgba(35, 165, 90, .85); background: rgba(35, 165, 90, .07); will-change: opacity, transform;
}
/* A small note on the area ("Every 2 to 8 sec, random" / "Only in here"), only on the pages that ask for it. */
.gdm-note {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: .7cqi; white-space: nowrap;
  font-size: var(--gdm-f); font-weight: 600; line-height: 1; padding: .44em .7em; border-radius: 999px;
  background: #fff; color: #17753f; border: 1px solid rgba(35, 165, 90, .45);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .10), 0 4px 12px rgba(28, 25, 23, .10);
}
/* Click ripple: one ring, re-centred on each click. */
.gdm-ring {
  position: absolute; left: 0; top: 0; width: calc(var(--gdm-c) * 2); height: calc(var(--gdm-c) * 2);
  margin: calc(var(--gdm-c) * -1) 0 0 calc(var(--gdm-c) * -1);
  border: 2px solid var(--gdm-green); border-radius: 50%; opacity: 0; will-change: transform, opacity;
}
/* Where earlier clicks landed (interval story) and where the wiggle just went (wiggle story). */
.gdm-mark { position: absolute; left: 0; top: 0; width: calc(var(--gdm-c) * .4); height: calc(var(--gdm-c) * .4); margin: calc(var(--gdm-c) * -.2) 0 0 calc(var(--gdm-c) * -.2); border-radius: 50%; background: var(--gdm-green); opacity: 0; will-change: transform, opacity; }
.gdm-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gdm-trail polyline { fill: none; stroke: var(--gdm-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
/* A cursor is a 0x0 anchor at the pointer tip; the arrow and the label hang off it. The static
   position (first click point, or the wiggle's centre) is left/top; the script zeroes those and moves it with transform. */
.gdm-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.gdm-app { left: 14.9%; top: 40.2%; }
.gdm-you { opacity: 0; }
.gdm-cur svg {
  position: absolute; left: 0; top: 0; display: block; overflow: visible; width: var(--gdm-c); height: auto;
  transform-origin: 12% 8%; filter: drop-shadow(0 1px 1.5px rgba(28, 25, 23, .35)); transition: opacity .2s var(--gdm-out);
}
.gdm-cur path { fill: var(--gdm-green); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; }
.gdm-you path { fill: var(--gdm-ink); }
.gdm-tag {
  position: absolute; left: calc(var(--gdm-c) * .78); top: calc(var(--gdm-c) * 1.02);
  display: flex; align-items: center; gap: .45em; white-space: nowrap;
  font-size: var(--gdm-f); font-weight: 600; line-height: 1; letter-spacing: .005em;
  padding: .44em .72em .44em .6em; border-radius: 999px; background: #fff; color: #17753f; border: 1px solid rgba(35, 165, 90, .45);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .10), 0 4px 12px rgba(28, 25, 23, .10);
  transition: color .18s var(--gdm-out), border-color .18s var(--gdm-out);
}
.gdm-tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--gdm-green); transition: background-color .18s var(--gdm-out); }
.gdm-cur.tag-l .gdm-tag { left: auto; right: calc(var(--gdm-c) * .25); }
.gdm-you .gdm-tag { background: var(--gdm-ink); color: #fff; border-color: var(--gdm-ink); padding: .44em .7em; }
.gdm-you .gdm-tag::before { display: none; }
.gdm-app.is-paused svg { opacity: .55; }
.gdm-app.is-paused .gdm-tag { color: #8a4b00; border-color: rgba(245, 158, 11, .6); }
.gdm-app.is-paused .gdm-tag::before { background: var(--gdm-amber); }

/* Stories. wiggle: no area, the cursor starts mid-desktop. */
[data-gdm-story="wiggle"] .gdm-box { display: none; }
[data-gdm-story="wiggle"] .gdm-app { left: 52%; top: 45%; }

/* Windows places: the safe area on the right (icons are on the left), the bar just above the taskbar.
   After the base rules on purpose: :where() adds no specificity, so order decides. */
:where(.gdm-win, .gd-win .gdm) .gdm-bar { bottom: 10.5%; }
:where(.gdm-win, .gd-win .gdm) .gdm-box { left: 58%; }
:where(.gdm-win, .gd-win .gdm) .gdm-app { left: 64.9%; }
:where(.gdm-win, .gd-win .gdm)[data-gdm-story="wiggle"] .gdm-app, .gd-win [data-gdm-story="wiggle"] .gdm-app { left: 42%; top: 50%; }

/* Landing pages (.page-head.lp-head): the copy keeps its column, the desktop takes the other from 960px,
   and sits under the copy on narrower screens. Nothing here changes the copy's own styles. */
.lp-head--motion .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.lp-head-copy { min-width: 0; }
.lp-head-art { margin: 0; position: relative; max-width: 640px; }
.lp-head-art::before {
  content: ""; position: absolute; inset: 4% -4% -2%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(35, 165, 90, .20), transparent 70%);
  filter: blur(34px); z-index: 0; pointer-events: none;
}
.lp-head-art .gdm { z-index: 1; }
@media (min-width: 960px) {
  .lp-head--motion .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; }
  .lp-head-art { max-width: none; }
}

@media (prefers-reduced-motion: reduce) { .gdm-cur svg, .gdm-tag, .gdm-tag::before, .gdm-bi, .gdm-st, .gdm-num { transition: none; } }