/* ══ TONE, FOR GUYS AND GIRLS (17 Oct 2026, PREVIEW) ═════════════════════════
   Daniel: "It's a lot of pink and purple (which is our colors) but…
   remember this is for guys and girls… what do you recommend so it doesn't
   look so feminine?" Shown a now vs proposed mockup, then "Yes do that!"

   60 / 30 / 10:
     60% neutrals: ink #0d0b14, warm white #f5f2ec, stone #e9e5dd
     30% deep midnight indigo #171a3a (the big moments, the membership card)
     10% the brand gradient, only where it earns it: the logo, the Apply
         buttons, one accent line per headline.
   The hot pink end is out of the UI gradient (violet to magenta only); pink
   lives in the logo. Loaded last on index.html.

   Same message: "see the 0 on 50? How the right is cut off? Make sure no text
   or numbers get cut off like that." Gradient text is painted inside its own
   box; tight letter spacing and italics push the last glyph past the box
   edge, and that slice goes unpainted. Every gradient clipped text below gets
   room on both sides (padding, cloned onto each line). */

:root {
  --t-ink: #0d0b14; --t-ink2: #14122a; --t-indigo: #171a3a;
  --t-warm: #f5f2ec; --t-stone: #e9e5dd;
  --br-grad: linear-gradient(100deg, #6b2ac1 0%, #8a2fb5 50%, #a52fa8 100%);
  --g-grad: linear-gradient(100deg, #6b2ac1 0%, #8a2fb5 50%, #a52fa8 100%);
  --g-grad-lt: linear-gradient(100deg, #b9a0ff 0%, #c99af0 50%, #e2a0e6 100%);
}

/* ── no clipped glyphs, anywhere ── */
.hx h1 em, .hx h1 em .wd > span, .manifesto h2 .accent, .manifesto h2 .accent .w,
.rule h2 .r1, .split-h .s1, .founders-copy .quote em, .cta h2 .grad-text,
.plans .pc-price, .fc-why small, .grad-text {
  padding: .04em .1em .14em .06em; margin: -.04em -.1em -.14em -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.plans .pc-price { letter-spacing: -.05em; padding: .04em .1em .06em .1em; margin: 22px auto 0; }
.hx h1 .wd { padding-right: .08em; margin-right: -.06em; }

/* ── the opening and Matchmaking: ink ── */
.hx { background:
    radial-gradient(60% 40% at 50% 64%, rgba(107, 42, 193, .26) 0%, rgba(107, 42, 193, 0) 70%),
    linear-gradient(180deg, var(--t-ink) 0%, var(--t-ink2) 100%); }
.hx-proof { background: var(--t-ink2); }
.hx-proof svg { color: #b9a0ff; }
.manifesto { background: var(--t-ink2); }

/* ── light sheets: warm white and stone instead of lilac and blush ── */
.how.story { background: var(--t-warm); }
.how.story .kicker { background: rgba(13, 11, 20, .06); }
.story-big { color: rgba(13, 11, 20, .05); }
.story-bar i { background: rgba(13, 11, 20, .12); }
.story-bar i::after { background: var(--t-ink); }
.ch-n { background: var(--t-ink); }
.founders { background: var(--t-stone); }
.nominate { background: var(--t-warm); }
.plans { background: var(--t-stone); }
.safety { background: var(--t-warm); }
.postscript { background: var(--t-warm); }

/* light section labels: ink, not violet */
.how .kicker, .founders-copy .kicker.script-k, .nominate .kicker, .plans .kicker, .safety .kicker:not(.standard .kicker) {
  background: rgba(13, 11, 20, .06); box-shadow: inset 0 0 0 1px rgba(13, 11, 20, .14); color: var(--t-ink); -webkit-text-fill-color: var(--t-ink);
}

/* ── dark sheets: midnight indigo and ink ── */
.rule { background:
    radial-gradient(70% 50% at 50% 0%, rgba(107, 42, 193, .22) 0%, rgba(107, 42, 193, 0) 70%),
    linear-gradient(180deg, var(--t-indigo) 0%, var(--t-ink) 100%); }
.events { background: linear-gradient(180deg, var(--t-ink2) 0%, var(--t-ink) 100%); }
.chip.on { background: #fff; color: var(--t-ink); }
.cta { background: var(--t-ink); }
.cta-icon { box-shadow: 0 30px 60px -20px rgba(107, 42, 193, .55); }

/* ── the membership card: midnight indigo, the $50 in white to lavender ── */
.plans .pc { background:
    radial-gradient(60% 34% at 50% 40%, rgba(107, 42, 193, .26), transparent 70%),
    linear-gradient(160deg, #1c1d40 0%, #121329 60%, var(--t-ink) 100%); }
.plans .pc::before { background: conic-gradient(from var(--pc-a), transparent 0deg, #8b5cf6 40deg, #a52fa8 80deg, transparent 130deg, transparent 360deg); }
.plans .pc-price { background: linear-gradient(180deg, #ffffff 0%, #e6dcff 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 18px 40px rgba(107, 42, 193, .38)); }
.plans .pc-price .pc-cur { background: linear-gradient(180deg, #ffffff 0%, #e6dcff 100%); -webkit-background-clip: text; background-clip: text; }

/* ── the Standard: indigo, ink, slate and one violet ── */
.std:nth-of-type(1) { background: var(--t-indigo); }
.std:nth-of-type(2) { background: var(--t-ink); }
.std:nth-of-type(3) { background: #2b2e4a; }
.std:nth-of-type(4) { background: #3a2a6e; }
.std:nth-of-type(5) { background: var(--g-grad); }

/* ── accents: light sections get the violet to magenta line, dark ones lavender ── */
.split-h .s1, .founders-copy .quote em { background: var(--g-grad); -webkit-background-clip: text; background-clip: text; }
.manifesto h2 .accent, .manifesto h2 .accent .w, .rule h2 .r1 { background: var(--g-grad-lt); -webkit-background-clip: text; background-clip: text; }

/* buttons and the pill: violet to magenta, a violet shadow */
.btn-primary { box-shadow: 0 14px 30px -14px rgba(107, 42, 193, .7); }
.pill-cta { box-shadow: 0 10px 24px -12px rgba(107, 42, 193, .8); }
.pill { background: rgba(13, 11, 20, .74); }
.plans .pc-price .pc-cur, .foot-mail { padding-right: .1em; padding-bottom: .08em; }

/* the pinned pill was squeezed: a fixed box at left:50% can only be as wide as
   the right half of the screen, so the menu button shrank to 21px (Daniel:
   "What's up with the apply now??"). It sizes to its content now, and nothing
   in it may shrink. */
@media (max-width: 900px) {
  .pill { width: max-content; max-width: calc(100vw - 24px); gap: 6px; }
  .pill > * { flex: none; }
  .pill-menu { width: 46px; height: 46px; }
  .pill-logo { padding: 0 10px; }
  .pill-logo img { height: 24px; }
  .pill-cta { padding: 0 24px; font-size: 15.5px; }
}