/* 09-pro — DESKTOP (1024 px and wider). Owner: PRO-D. Scope: #pro .v-desktop
   White section. Two plan cards side by side, equal height, sharing the same rows (subgrid)
   so the tops and the tick lists line up across both cards.
   Free list markers: tick = included, minus = partly, cross + struck-through grey text = not included.
   Screen readers hear "Included / Partly / Not included". */

/* spacing (brief §15): set centrally from base.css */
#pro .v-desktop { background: #fff; padding-top: var(--section-y); padding-bottom: var(--section-y); overflow: clip; }

/* ---- head ---- */
#pro .v-desktop .pd-head { text-align: center; }
#pro .v-desktop .pd-head .h2 { max-width: 820px; margin: 0 auto; }

/* ---- the two plans (10 of 12 columns, centred) ---- */
#pro .v-desktop .pd-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 24px; row-gap: 0;
  max-width: 996px; margin: 64px auto 0;
  position: relative; isolation: isolate;
}
/* soft blue light behind the cards, so the white card has something to stand in front of */
#pro .v-desktop .pd-plans::before {
  content: ""; position: absolute; z-index: -1; left: -180px; right: -180px; top: -90px; bottom: -150px;
  background: radial-gradient(closest-side, var(--tint) 0%, color-mix(in srgb, var(--tint) 55%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
#pro .v-desktop .pd-cell { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
#pro .v-desktop .pd-plan {
  position: relative; grid-row: span 2;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: 44px 44px 48px;
  border-radius: var(--r-sheet);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
#pro .v-desktop .pd-free { background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-2); }
#pro .v-desktop .pd-pro {
  background: var(--deep); color: #fff; border: 1px solid var(--deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--depth-2);
}
@media (hover: hover) {
  #pro .v-desktop .pd-plan:hover { transform: translateY(-4px); }
  #pro .v-desktop .pd-free:hover { border-color: var(--edge-strong); box-shadow: var(--highlight), var(--depth-hover); }
  #pro .v-desktop .pd-pro:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--depth-hover); }
}

/* ---- the top of each card, built the same way in both: a small label, the big line, the quiet line(s).
        Both tops share one grid row (subgrid) and a fixed minimum height, so the lists start at the same pixel. ---- */
#pro .v-desktop .pd-top { position: relative; min-height: 156px; padding-right: 150px; }
#pro .v-desktop .pd-label { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; color: var(--accent-edge); }
#pro .v-desktop .pd-pro .pd-label { color: var(--deep-line); }
#pro .v-desktop .pd-big {
  display: flex; align-items: baseline; gap: 10px; margin-top: 8px; white-space: nowrap;
  font-size: 52px; line-height: 1; font-weight: 500; letter-spacing: -0.035em; color: var(--ink);
}
#pro .v-desktop .pd-pro .pd-big { color: #fff; }
#pro .v-desktop .pd-per { font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: 0; color: var(--deep-body); }
#pro .v-desktop .pd-quiet { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--secondary); }
#pro .v-desktop .pd-pro .pd-quiet { color: var(--deep-line); }
#pro .v-desktop .pd-trial { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--deep-body); }
#pro .v-desktop .pd-spark { flex: none; width: 16px; height: 16px; color: var(--sun); }

/* ---- the lists ---- */
#pro .v-desktop .pd-list { padding-top: 32px; align-content: start; gap: 16px; } /* space only between the top and the list, no divider */
#pro .v-desktop .pd-list li { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
#pro .v-desktop .pd-list li::before { top: .08em; }
/* partly: a grey minus instead of the tick */
#pro .v-desktop .pd-list .pd-part::before {
  background: var(--secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* not included: a light grey cross and struck-through grey text (the text stays readable, 6:1) */
#pro .v-desktop .pd-list .pd-no {
  color: var(--secondary);
  text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--secondary) 60%, transparent);
}
#pro .v-desktop .pd-list .pd-no::before {
  background: var(--edge-strong);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- the star in the corner: floats, and hops when you point at the card ---- */
#pro .v-desktop .pd-art { position: absolute; top: -8px; right: -6px; width: 136px; pointer-events: none; }
#pro .v-desktop .pd-art-pro { width: 146px; top: -12px; right: -10px; }
#pro .v-desktop .pd-float { animation: pro-d-bob 6s var(--ease) infinite alternate; }
#pro .v-desktop .pd-art-pro .pd-float { animation-delay: -3s; }
#pro .v-desktop .pd-art img { width: 100%; filter: var(--art-drop); transition: translate .6s var(--spring), scale .6s var(--spring); }
#pro .v-desktop .pd-shadow { width: 44%; margin-top: 8px; animation: pro-d-shadow 6s var(--ease) infinite alternate; }
#pro .v-desktop .pd-cheer { transform-origin: 50% 88%; animation: pro-d-cheer 6.5s ease-in-out 1.2s infinite; }
@media (hover: hover) {
  #pro .v-desktop .pd-plan:hover .pd-art img { translate: 0 -8px; scale: 1.05; }
}
@keyframes pro-d-bob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes pro-d-shadow { from { transform: scaleX(.8); opacity: .65; } to { transform: scaleX(1); opacity: 1; } }
@keyframes pro-d-cheer {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-7deg); }
  78% { transform: rotate(6deg); }
  82% { transform: rotate(-4deg); }
  86% { transform: rotate(2.5deg); }
  90% { transform: rotate(0); }
}

/* ---- fine print ---- */
#pro .v-desktop .pd-fine { max-width: 600px; margin: 40px auto 0; text-align: center; text-wrap: balance; }

/* V3 type scale (founder 30 Sep): every desktop section title is 44 px */
#pro .v-desktop .h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; }