/* get-started.css — self-serve package picker (issue #63).
   A sibling of pay.css: same squiggly bg, gradient-bordered card, Rive logo orb,
   animated mesh CTA. Adds the package + payment-plan picker on top of brand.css. */

/* Top-align (pay-page centers vertically; the picker is taller and scrolls). */
.gs-page {
  justify-content: flex-start;
  max-width: 504px;
  padding: 22px 16px 56px;
}

.gs-card { padding: 26px 20px 22px; }
.gs-card .logo-orb { width: 104px; height: 104px; }

.gs-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 7.6vw, 2.15rem);
  line-height: 1.08;
  margin: 6px 0 0;
  color: var(--text);
}
.gs-sub {
  margin: 9px auto 0;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Heading accent — a flowing MESH-gradient fill (same teal/violet/blue family as
   the mesh CTA), drifting + blending so "started" feels alive like the button,
   not a flat shimmer. Scoped here so brand.css stays untouched. */
.gs-title .gradient-text {
  background:
    radial-gradient(42% 62% at 18% 26%, #07EDBE 0%, rgba(7, 237, 190, 0) 60%),
    radial-gradient(46% 66% at 82% 30%, #A0C7FF 0%, rgba(160, 199, 255, 0) 62%),
    radial-gradient(52% 72% at 66% 86%, #C77DFF 0%, rgba(199, 125, 255, 0) 60%),
    radial-gradient(56% 76% at 24% 82%, #9945FF 0%, rgba(153, 69, 255, 0) 62%),
    linear-gradient(90deg, #07EDBE, #C77DFF);
  background-size: 180% 180%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gs-started-mesh 7s ease-in-out infinite;
}
@keyframes gs-started-mesh {
  0%   { background-position: 0% 50%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

.gs-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 22px 2px 10px;
}

/* ---------- Tier rows ---------- */
/* Flowing animated border for the SELECTED popular card — background-position on a
   masked gradient: reliable everywhere, no @property, no overflow clipping (so the
   badge can still overhang the top). */
@keyframes gs-border-flow { to { background-position: 200% 50%; } }

.gs-tiers { display: flex; flex-direction: column; gap: 16px; }
.gs-tier {
  position: relative;
  display: block;
  cursor: pointer;
  /* Unselected: same plain border as the form fields + the unpicked plan toggle. */
  border: 1.5px solid rgba(160, 140, 255, 0.45);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 18px;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gs-tier input { position: absolute; opacity: 0; pointer-events: none; }
/* Selected (non-popular): solid teal border. */
.gs-tier.is-on { border-color: var(--teal); background: rgba(7, 237, 190, 0.06); }

/* Most-popular tier: plain border + badge when UNSELECTED (looks like the rest),
   so it doesn't read as highlighted. When SELECTED, an animated flowing gradient
   border — the hero highlight — which disappears the moment you pick another. */
.gs-tier.is-popular { padding-top: 20px; }
.gs-tier.is-popular.is-on { border-color: transparent; background: rgba(7, 237, 190, 0.05); }
.gs-tier.is-popular.is-on::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(115deg, #07EDBE, #C77DFF, #A0C7FF, #07EDBE);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: gs-border-flow 4s linear infinite;
}

.gs-tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gs-tier-name { font-size: 16px; font-weight: 800; color: var(--text); }
.gs-tier-price {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text);
}
.gs-tier.is-on .gs-tier-price { color: var(--teal); }

/* Badge — centered on the top edge so it never crowds the price; no glow. */
.gs-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--electric), var(--mid-purple));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Payment-plan toggle ---------- */
.gs-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gs-plan {
  position: relative;
  cursor: pointer;
  /* Unselected: same plain border as the form fields + the unpicked tiers. */
  border: 1.5px solid rgba(160, 140, 255, 0.45);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  padding: 13px 14px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gs-plan input { position: absolute; opacity: 0; pointer-events: none; }
/* Selected pay option: solid teal border (matches the selected tier). */
.gs-plan.is-on { border-color: var(--teal); background: rgba(7, 237, 190, 0.06); }
.gs-plan-title { font-weight: 800; font-size: 14.5px; color: var(--text); }
.gs-plan-desc { color: var(--text-muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* ---------- Fields (reuse brand .field white pills) ---------- */
.gs-fields { margin-top: 2px; }
.gs-fields .field { margin-bottom: 12px; }

/* ---------- Summary ---------- */
.gs-summary { margin: 20px 0 2px; }
.gs-summary .total-row { margin-bottom: 8px; padding-top: 16px; }
.gs-summary .total-row .label { font-size: 12px; }
.gs-note { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }

.gs-card .btn-pay-anim { margin-top: 16px; }

.gs-disabled { text-align: center; color: var(--text-muted); padding: 60px 20px; }

/* ---------- Promo code inline notice (non-blocking) ---------- */
.gs-promo-note { margin: -4px 2px 10px; }
.gs-promo-note.is-good { color: var(--teal); }

/* ---------- Accent scheme — pink swapped out (Andrew) ----------
   TWO colors, each used twice, wrapped EVENLY around the frame (conic): teal at
   top + bottom, purple at left + right. A horizontal linear gradient can't do
   this on a tall card — the long side edges would be one solid color. */
.gs-card {
  --gs-grad: conic-gradient(from 0deg,
    #07EDBE 0deg, #C77DFF 40deg, #C77DFF 140deg, #07EDBE 180deg,
    #C77DFF 220deg, #C77DFF 320deg, #07EDBE 360deg);
  --gs-pop: #C77DFF;
}
.gs-card.pay-card::before { background: var(--gs-grad); }
/* No gradient ring around the logo — just the white circle with the mark. */
.gs-card .logo-orb {
  background: #FFFFFF;
  padding: 0;
}
.gs-card .pay-anim-inner {
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 55%, var(--gs-pop) 100%);
}

/* ---------- Inputs — outlined to match the consult form (not heavy white
   blocks). Light text, faded example placeholders, lavender border. ---------- */
.gs-card .field input,
.gs-card .field textarea {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1.5px solid rgba(160, 140, 255, 0.45);
  box-shadow: none;
}
.gs-card .field textarea {
  border-radius: var(--radius-md);
  min-height: 84px;
  font-family: var(--font-body);
}
.gs-card .field input::placeholder,
.gs-card .field textarea::placeholder { color: rgba(248, 248, 248, 0.40); }
.gs-card .field input:focus,
.gs-card .field textarea:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(7, 237, 190, 0.18);
}