/* ============================================================
   GLOW RN STUDIO — "Extend the Sunrise" restyle
   Drop-in override sheet. Load it AFTER the site's existing CSS.

   Target: https://glow-rn-studio.vercel.app  (plain HTML/CSS/JS,
   no framework). Source lives on the MacBook — copy this file in
   and add one <link> after the current stylesheet.

   THE ARGUMENT
   The hero is the best thing on the site: a sun disc rising behind
   GLOW in a heavy editorial serif, warm gradient on deep plum. Below
   the fold the page abandons that language entirely — candy-pink
   gradient pills (HA / PDRN / GLP / IV), filled + chips, a pink-orange
   CTA — and reads like generic app UI bolted under a beautiful hero.

   This sheet pushes the hero's language all the way down: plum ground,
   hairline gold rules, cream type, and the sun gradient used ONCE, on
   the primary CTA. --pink #FF2E93 is retired as a surface colour.
   ============================================================ */

:root {
  /* Derived from the hero's own sun, not invented */
  --sun-1: #F5B94A;              /* gold, top of the disc */
  --sun-2: #E8834A;              /* amber, mid */
  --sun-3: #D95E6E;              /* rose, bottom — replaces --pink */
  --rule: rgba(245, 185, 74, 0.26);
  --rule-soft: rgba(245, 185, 74, 0.11);
}

/* ── section labels ─────────────────────────────────────── */
.sec-label {
  color: var(--sun-1);
  opacity: 0.8;
  letter-spacing: 0.28em;
}

/* ── treatment rows: hairline rules, no boxes ───────────── */
.svc {
  background: none;
  background-image: none;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  transition: background 0.45s ease;
}

.svc:last-of-type {
  border-bottom: 1px solid var(--rule-soft);
}

/* Warm edge-light on approach instead of a filled card */
.svc:hover {
  background: linear-gradient(90deg, rgba(245, 185, 74, 0.07), transparent 62%);
}

.svc.open {
  background: linear-gradient(90deg, rgba(245, 185, 74, 0.05), transparent 70%);
}

.svc-head {
  padding: 30px 10px;
  align-items: baseline;
}

/* ── the category chips, de-pilled ──────────────────────── */
/* Was: filled pink gradient lozenge. Now: letterspaced gold mono,
   sitting in the space rather than on a coloured tablet. */
.svc-num {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--sun-1);
  padding: 0;
  min-width: 0;
  width: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.svc-name {
  color: var(--cream);
  letter-spacing: -0.01em;
}

.svc-from {
  color: var(--cream-dim);
  opacity: 0.75;
  letter-spacing: 0.06em;
}

/* ── expand control: hairline ring, not a filled chip ───── */
.svc-toggle {
  background: none;
  background-image: none;
  border: 1px solid var(--rule);
  color: var(--sun-1);
  box-shadow: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.svc-toggle:hover {
  border-color: var(--sun-1);
  transform: rotate(90deg);
}

/* ── expanded price table ───────────────────────────────── */
.price-row { border-top: 1px solid var(--rule-soft); }
.pn { color: var(--cream); }
.pd { color: var(--cream-dim); opacity: 0.7; }
.pp { color: var(--sun-1); }

/* ── the ONE place the sun gradient is allowed ──────────── */
.btn.hot {
  background: linear-gradient(100deg, var(--sun-1), var(--sun-2) 58%, var(--sun-3));
  color: #2A1016;
  border: 0;
  box-shadow: 0 8px 40px rgba(232, 131, 74, 0.28);
  letter-spacing: 0.2em;
}

/* ── reveal safety net ──────────────────────────────────────
   Sections carry .reveal and are shown by adding .in. If the
   observer never fires for a section — anchor jump, restored
   scroll position, bfcache — that section stays invisible with
   no way back. Two backstops:
     1. Anyone who prefers reduced motion skips reveals entirely.
     2. glow-reveal-fix.js force-adds .in after a timeout.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}