/* 03-goals · DESKTOP (1024 px and wider) · V3-GOALS-D · every selector starts with #goals .v-desktop
   Founder, 30 Sep: no phone here. Left: the title, then four goal tiles (2 × 2, a tablist): the app's own goal icon, the
   name and a unit chip; the picked tile lifts onto white with a ring in its colour, and its one line shows under the grid.
   Right: the picked goal's real share card, large, rounded, with a soft shadow on a colour light (the card's own colour).
   No divider lines anywhere (founder rule). */

#goals .v-desktop { background: #fff; overflow-x: clip; }
#goals .v-desktop .gl-d { padding-top: var(--section-y-tight); padding-bottom: var(--section-y); }   /* How ends in white: tight top */

#goals .v-desktop .gl-d-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  column-gap: clamp(32px, 4.4vw, 72px);
}

/* ---- left: title + the four picks ---- */
#goals .v-desktop .gl-d-title { max-width: 480px; }
/* the picker: four goal tiles, 2 × 2. Quiet tiles sit on a light fill; the picked one lifts onto white with a soft
   shadow and a ring in the goal's own colour (the same colour as the light behind the card). */
#goals .v-desktop .gl-d-pick { margin-top: 44px; max-width: 480px; }
#goals .v-desktop .gl-d-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#goals .v-desktop .gl-d-tile {
  --ring: var(--sky);
  --chip: var(--tint);
  position: relative; display: grid; justify-items: start; align-content: start; gap: 0;
  min-height: 44px; padding: 16px 18px 18px; text-align: left;
  font: inherit; color: var(--ink); background: var(--soft); border: 0; border-radius: 20px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(15, 26, 43, .035);
  transition: background-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--spring);
}
#goals .v-desktop .gl-d-tile[data-goal="read"]     { --ring: color-mix(in srgb, var(--deep-bright) 75%, #fff); --chip: color-mix(in srgb, var(--deep-bright) 12%, #fff); }
#goals .v-desktop .gl-d-tile[data-goal="meditate"] { --ring: color-mix(in srgb, var(--coral) 75%, #fff); --chip: var(--pale-coral); }
#goals .v-desktop .gl-d-tile[data-goal="save"]     { --ring: color-mix(in srgb, var(--sun) 80%, var(--gold)); --chip: color-mix(in srgb, var(--sun) 22%, #fff); }
#goals .v-desktop .gl-d-tile[aria-selected="true"] {
  background: #fff; cursor: default; transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--ring), var(--highlight), var(--depth-2);
}
@media (hover: hover) {
  #goals .v-desktop .gl-d-tile:not([aria-selected="true"]):hover { background: #EDF1F6; transform: translateY(-2px); }
}
#goals .v-desktop .gl-d-tile:not([aria-selected="true"]):active { transform: scale(.98); }
#goals .v-desktop .gl-d-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* the app's own goal icon, cropped from the real screen it lives on (--x/--y/--s = the icon square in the 900 px capture) */
#goals .v-desktop .gl-d-ico {
  --box: 52px;
  position: relative; display: block; width: var(--box); height: var(--box); overflow: hidden;
  border-radius: 28%; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 26, 43, .08), 0 4px 10px rgba(15, 26, 43, .06);
  transition: transform .45s var(--spring);
}
#goals .v-desktop .gl-d-ico > img {
  position: absolute; max-width: none;
  width: calc(var(--box) * 900 / var(--s));
  left: calc(var(--box) * var(--x) / var(--s) * -1);
  top: calc(var(--box) * var(--y) / var(--s) * -1);
}
#goals .v-desktop .gl-d-tile[aria-selected="true"] .gl-d-ico { transform: scale(1.06); }
#goals .v-desktop .gl-d-name { font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
#goals .v-desktop .gl-d-chip {
  margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--ink); white-space: nowrap;
  background: #fff; box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
#goals .v-desktop .gl-d-tile[aria-selected="true"] .gl-d-chip { background: var(--chip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 45%, #fff); }

/* the picked goal's one line (all four share one cell, so nothing below moves) */
#goals .v-desktop .gl-d-lines { display: grid; margin-top: 22px; }
#goals .v-desktop .gl-d-line {
  grid-area: 1 / 1; font-size: 20px; line-height: 1.5; font-weight: 350; color: var(--body);
  animation: gl-d-line-in .4s var(--ease);
}
@keyframes gl-d-line-in { from { opacity: 0; transform: translateY(4px); } }

/* ---- right: ONE phone with the real goal screen, on a colour light in the goal's own colour ---- */
#goals .v-desktop .gl-d-stage {
  --pw: clamp(300px, 22vw, 320px);   /* 300–320 px (founder: "reduce the size little") */
  --glow: color-mix(in srgb, var(--sky) 55%, #fff);
  position: relative; display: grid; place-items: center; padding-bottom: 28px;
}
#goals .v-desktop .gl-d-stage[data-picked="read"]     { --glow: color-mix(in srgb, var(--sun) 45%, #fff); }
#goals .v-desktop .gl-d-stage[data-picked="meditate"] { --glow: color-mix(in srgb, var(--coral) 32%, #fff); }
#goals .v-desktop .gl-d-stage[data-picked="save"]     { --glow: color-mix(in srgb, var(--sun) 48%, #fff); }
#goals .v-desktop .gl-d-light {
  position: absolute; left: 50%; top: 47%; z-index: 0;
  width: calc(var(--pw) * 2.2); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background-color: var(--glow);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .75) 40%, rgba(0, 0, 0, .3) 70%, transparent 100%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .75) 40%, rgba(0, 0, 0, .3) 70%, transparent 100%);
  transition: background-color .8s var(--ease);
  pointer-events: none;
}
#goals .v-desktop .gl-d-contact {
  position: absolute; left: 50%; bottom: 12px; z-index: 0;
  width: calc(var(--pw) * .9); height: 34px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .24), rgba(15, 26, 43, 0));
  pointer-events: none;
}
#goals .v-desktop .gl-d-phone { --w: var(--pw); position: relative; z-index: 1; }

/* ---- sizes ---- */
@media (max-width: 1279.98px) {
  #goals .v-desktop .gl-d-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
  #goals .v-desktop .gl-d-tile { padding: 14px 14px 16px; }
  #goals .v-desktop .gl-d-ico { --box: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  #goals .v-desktop .gl-d-tile, #goals .v-desktop .gl-d-ico, #goals .v-desktop .gl-d-chip, #goals .v-desktop .gl-d-light, #goals .v-desktop .gl-d-shot { transition: none; }
  #goals .v-desktop .gl-d-line { animation: none; }
}

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#goals .v-desktop .gl-d-title { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#goals .v-desktop .gl-d-name { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
#goals .v-desktop .gl-d-line { font-size: 19px; font-weight: 350; line-height: 1.5; color: var(--body); }

/* ==== CUTE PASS (founder 30 Sep: "reduce the size little and make the entire site cute") · RT-LOOP-D ====
   Rounder shapes, the app's pastel tints instead of lines, tiny playful motion on the art (never under reduced motion). */
#goals .v-desktop .gl-d-tile { border-radius: 26px; }
#goals .v-desktop .gl-d-ico { border-radius: 32%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #goals .v-desktop .gl-d-tile:hover .gl-d-ico { animation: gl-d-wiggle .55s var(--spring); }
}
@keyframes gl-d-wiggle { 30% { rotate: -7deg; scale: 1.08; } 65% { rotate: 5deg; } }