/* ============================================================
   /mastering/pricing — the plan selector, in Loopin's own theme.

   The selector is mastering/plan-picker.js (styled by plan-picker.css) — the
   same component as the dialog in the /mastering nav. This file only carries
   what is the PAGE's: the headline's room, the Free line, the note, and the
   FAQ accordion. Black canvas, dark-blue mesh.

   Scoped to this page. Nav, footer, .legal, .btn and .wrap all come from
   styles.css.
   ============================================================ */

.pricing {
  /* plan-picker.css reads these; mastering.css defines them on the tool page,
     which this page does not load. */
  --mesh-lavender: radial-gradient(120% 150% at 0% 0%, rgba(50, 110, 240, .6), transparent 55%),
                   radial-gradient(100% 130% at 100% 100%, rgba(25, 60, 170, .7), transparent 60%),
                   radial-gradient(80% 100% at 60% 0%, rgba(120, 170, 255, .28), transparent 60%),
                   #070b16;
  --lavender-line: rgba(110, 160, 255, .38);
}
.pricing.legal .legal__wrap { max-width: 1040px; }

/* The headline view: left-aligned, the site's own h1 from styles.css. */
.phero { margin: 0 0 30px; }
.phero [hidden] { display: none; }

.pricing__free { margin: 22px 2px 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft, rgba(244, 243, 241, .62)); }
.pricing__free strong { color: var(--ink, #F4F3F1); font-weight: 600; }
.pricing__free a { color: var(--ink, #F4F3F1); white-space: nowrap; margin-left: 4px; }
.pricing__free a:not([href]) { color: var(--ink-soft, rgba(244, 243, 241, .62)); }
.pricing__note { margin: 14px 2px 0; font-size: 12.5px; color: var(--ink-faint, rgba(244, 243, 241, .4)); }

/* ---- questions: an accordion, quiet until opened ---- */
.pfaq { max-width: 760px; margin: 84px auto 40px; }
.pfaq h2 { margin: 0 0 22px; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; text-align: center; }
.pfaq details { border-top: 1px solid var(--line, rgba(255, 255, 255, .08)); padding: 0; }
.pfaq details:last-child { border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08)); }
.pfaq details[hidden] { display: none; }
.pfaq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-size: 1.05rem; font-weight: 500;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 1.8px solid var(--ink-soft, rgba(244, 243, 241, .62)); border-bottom: 1.8px solid var(--ink-soft, rgba(244, 243, 241, .62));
  transform: rotate(45deg); transition: transform .25s var(--ease, ease);
}
.pfaq details[open] summary::after { transform: rotate(-135deg); }
.pfaq p { margin: 0 0 22px; max-width: 640px; font-size: .98rem; line-height: 1.6; color: var(--ink-soft, rgba(244, 243, 241, .62)); }