/* MindType homepage — VISUAL HARMONY PASS (2026-10-04, draft).
   Carries the crystal hero's language (deep sapphire navy, cyan/indigo edge light, glassy depth) into the body in a quieter form.
   Pure CSS overrides, loaded last; no markup, copy, order or behaviour changes. Delete this file + its <link> to revert completely.
   Pink/magenta is kept ONLY as the commercial/action accent (CTAs, selected answer) -- no longer a surface/border colour. */

/* ---- 1. shared glass surface for the major cards ---- */
.coach-feature-section, .pp-home, .ms-teaser, .quiz-teaser-section, .home-quiz {
  background: linear-gradient(155deg, rgba(16, 26, 62, .74) 0%, rgba(9, 14, 36, .68) 52%, rgba(12, 14, 40, .76) 100%);
  border: 1px solid rgba(120, 165, 255, .17);
  box-shadow:
    inset 0 1px 0 rgba(170, 210, 255, .13),              /* top edge light */
    inset 0 0 0 1px rgba(70, 100, 210, .06),             /* very faint inner border */
    inset 0 -26px 44px -30px rgba(70, 110, 255, .12),    /* soft sapphire pooling at the base */
    0 22px 50px -22px rgba(0, 0, 0, .7),                 /* depth */
    0 0 48px -20px rgba(70, 130, 255, .30);              /* restrained cyan/indigo halo */
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}

/* ---- 2. Mind Coach / Sara: the premium one -- ambient reflection + lit media frame ---- */
.coach-feature-section {
  background:
    radial-gradient(60% 70% at 16% 0%, rgba(34, 211, 238, .11), transparent 70%),
    radial-gradient(55% 65% at 100% 100%, rgba(99, 102, 241, .16), transparent 72%),
    linear-gradient(155deg, rgba(17, 28, 66, .76) 0%, rgba(9, 14, 36, .70) 52%, rgba(12, 14, 42, .78) 100%);
  border-color: rgba(120, 175, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(180, 220, 255, .16), inset 0 0 0 1px rgba(70, 100, 210, .07), inset 0 -30px 50px -32px rgba(70, 120, 255, .16),
    0 26px 60px -24px rgba(0, 0, 0, .75), 0 0 64px -18px rgba(60, 140, 255, .36);
}
.coach-feature-section:hover {                            /* was cyan + magenta: now cyan/indigo only */
  box-shadow:
    inset 0 1px 0 rgba(180, 220, 255, .2), inset 0 0 0 1px rgba(70, 100, 210, .09), inset 0 -30px 50px -32px rgba(70, 120, 255, .2),
    0 26px 60px -24px rgba(0, 0, 0, .75), 0 0 80px -14px rgba(60, 150, 255, .5);
}
.coach-sara-frame {
  border-color: rgba(150, 195, 255, .30);
  box-shadow: 0 0 0 1px rgba(60, 90, 200, .18), 0 14px 38px -12px rgba(0, 0, 0, .6), 0 0 42px -10px rgba(60, 150, 255, .40), inset 0 1px 0 rgba(190, 225, 255, .18);
}

/* ---- 3. Personal Plan: belongs to the blue/indigo system; pink stays on the action ---- */
.pp-home {
  border-color: rgba(120, 165, 255, .2);
  background:
    radial-gradient(52% 50% at 50% 100%, rgba(230, 0, 126, .09), transparent 72%),      /* faint warmth only beneath the CTA */
    radial-gradient(60% 60% at 8% 0%, rgba(34, 211, 238, .08), transparent 70%),
    linear-gradient(155deg, rgba(16, 26, 62, .74) 0%, rgba(9, 14, 36, .68) 52%, rgba(12, 14, 40, .76) 100%);
}
.pp-home-cta { box-shadow: 0 10px 28px -6px rgba(230, 0, 126, .42), inset 0 1px 0 rgba(255, 255, 255, .22); }

/* ---- 4. Mind Studio: keep its existing glow work; only the surface/edge is unified ---- */
.ms-teaser { border-color: rgba(110, 175, 255, .2); }

/* ---- 5. quiz: container + answers share the same material ---- */
.home-quiz { border-color: rgba(120, 175, 255, .2); }
.option { background: rgba(14, 24, 58, .62); border-color: rgba(120, 165, 255, .16); box-shadow: inset 0 1px 0 rgba(170, 210, 255, .07); }
@media (hover: hover) and (pointer: fine) { .option:hover { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .07); } }

/* ---- 6. continuous atmosphere: large diffused cyan/indigo light fields behind the sections (no bands, masked on every side) ---- */
.pp-home-wrap, .quiz-teaser-wrap { position: relative; }
.pp-home-wrap::before, .quiz-teaser-wrap::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: -1;
  width: min(1300px, 100%); top: -80px; bottom: -80px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
}
.pp-home-wrap::before { background: radial-gradient(ellipse 55% 60% at 30% 50%, rgba(99, 102, 241, .13), transparent 72%); }
.quiz-teaser-wrap::before { background: radial-gradient(ellipse 55% 60% at 72% 50%, rgba(34, 211, 238, .10), rgba(99, 102, 241, .08) 55%, transparent 75%); }

/* ---- 7. glow pass (2026-10-05): stronger resting glow + a clear hover/focus glow on Personal Plan, the two product cards and Mind Studio ---- */
.pp-home, .pp-tool, .ms-teaser { transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease; }
.pp-home {
  box-shadow: inset 0 1px 0 rgba(170, 210, 255, .14), inset 0 0 0 1px rgba(70, 100, 210, .07), inset 0 -26px 44px -30px rgba(70, 110, 255, .14),
    0 22px 50px -22px rgba(0, 0, 0, .7), 0 0 62px -14px rgba(70, 140, 255, .50);
}
.pp-home:hover, .pp-home:focus-within {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .22), inset 0 0 0 1px rgba(90, 130, 240, .12), inset 0 -26px 44px -30px rgba(70, 120, 255, .22),
    0 22px 50px -22px rgba(0, 0, 0, .7), 0 0 90px -8px rgba(60, 150, 255, .70), 0 0 38px rgba(34, 211, 238, .28);
}
.pp-home:hover .pp-home-cta, .pp-home-cta:hover { box-shadow: 0 12px 34px -4px rgba(230, 0, 126, .58), 0 0 24px rgba(230, 0, 126, .28), inset 0 1px 0 rgba(255, 255, 255, .26); }

.pp-tool--reset { box-shadow: inset 0 1px 0 rgba(170, 210, 255, .14), inset 0 0 0 1px rgba(70, 100, 210, .06), 0 18px 40px -20px rgba(0, 0, 0, .7), 0 0 50px -12px rgba(34, 211, 238, .42); }
.pp-tool--strong { box-shadow: inset 0 1px 0 rgba(190, 180, 255, .14), inset 0 0 0 1px rgba(110, 90, 230, .08), 0 18px 40px -20px rgba(0, 0, 0, .7), 0 0 50px -12px rgba(139, 92, 246, .48); }
.pp-tool--reset:hover, .pp-tool--reset:focus-within {
  border-color: rgba(34, 211, 238, .65); box-shadow: inset 0 1px 0 rgba(190, 235, 255, .2), 0 18px 40px -20px rgba(0, 0, 0, .7), 0 0 76px -6px rgba(34, 211, 238, .62), 0 0 28px rgba(34, 211, 238, .24);
}
.pp-tool--strong:hover, .pp-tool--strong:focus-within {
  border-color: rgba(167, 139, 250, .72); box-shadow: inset 0 1px 0 rgba(210, 200, 255, .2), 0 18px 40px -20px rgba(0, 0, 0, .7), 0 0 76px -6px rgba(139, 92, 246, .68), 0 0 28px rgba(139, 92, 246, .28);
}
.ms-teaser:hover, .ms-teaser:focus-within { border-color: rgba(34, 211, 238, .5); box-shadow: inset 0 1px 0 rgba(190, 225, 255, .18), 0 22px 50px -22px rgba(0, 0, 0, .7), 0 0 80px -8px rgba(34, 211, 238, .5); }
@media (prefers-reduced-motion: reduce) { .pp-home, .pp-tool, .ms-teaser { transition: none; } }

/* ---- 8. Coach glow match (2026-10-05): the main Coach card now glows at least as strongly as Personal Plan / the product cards ---- */
.coach-feature-section { transition: box-shadow .28s ease, border-color .28s ease;
  box-shadow: inset 0 1px 0 rgba(180, 220, 255, .16), inset 0 0 0 1px rgba(70, 100, 210, .07), inset 0 -30px 50px -32px rgba(70, 120, 255, .18),
    0 26px 60px -24px rgba(0, 0, 0, .75), 0 0 80px -10px rgba(60, 150, 255, .56), 0 0 30px rgba(34, 211, 238, .14); }
.coach-feature-section:hover, .coach-feature-section:focus-within { border-color: rgba(34, 211, 238, .55);
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .24), inset 0 0 0 1px rgba(90, 130, 240, .12), inset 0 -30px 50px -32px rgba(70, 120, 255, .24),
    0 26px 60px -24px rgba(0, 0, 0, .75), 0 0 110px -6px rgba(60, 150, 255, .75), 0 0 44px rgba(34, 211, 238, .32); }
@media (prefers-reduced-motion: reduce) { .coach-feature-section { transition: none; } }

/* ---- 9. brightness fix (2026-10-05): "Why is the lower page darker?" -- root cause: mindtype-shader-bg.js appends #mindtype-shader-fade to <body> AFTER .app,
   a document-tall overlay whose gradient reaches rgba(5,7,13,.55) at the bottom. It was meant to sit behind the page, but because it comes later in the DOM
   at z-index 0 it was painted OVER the content, dimming everything toward the bottom (quiz, product cards, footer). Lifting .app above it keeps the
   fade where it belongs (darkening only the background shader) and gives the whole page the same light as the top. */
.app { z-index: 1; }
.pp-footer-links a { color: rgba(226, 230, 248, .92); }

/* ---- 10. quiz glow (2026-10-05): the quiz card and its answers get the same resting + hover glow as the other cards ---- */
.home-quiz, .option { transition: box-shadow .28s ease, border-color .28s ease, background .2s ease, transform .1s ease; }
.home-quiz {
  box-shadow: inset 0 1px 0 rgba(170, 210, 255, .14), inset 0 0 0 1px rgba(70, 100, 210, .07), inset 0 -26px 44px -30px rgba(70, 110, 255, .14),
    0 22px 50px -22px rgba(0, 0, 0, .7), 0 0 62px -12px rgba(60, 150, 255, .52), 0 0 24px rgba(34, 211, 238, .12);
}
.home-quiz:hover, .home-quiz:focus-within {
  border-color: rgba(34, 211, 238, .5);
  box-shadow: inset 0 1px 0 rgba(190, 225, 255, .22), inset 0 0 0 1px rgba(90, 130, 240, .11), inset 0 -26px 44px -30px rgba(70, 120, 255, .22),
    0 22px 50px -22px rgba(0, 0, 0, .7), 0 0 92px -8px rgba(60, 150, 255, .70), 0 0 36px rgba(34, 211, 238, .26);
}
.option { box-shadow: inset 0 1px 0 rgba(170, 210, 255, .09), 0 0 22px -8px rgba(60, 150, 255, .38); }
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: rgba(34, 211, 238, .75); background: rgba(34, 211, 238, .09);
    box-shadow: inset 0 1px 0 rgba(190, 235, 255, .16), 0 0 34px -4px rgba(34, 211, 238, .62), 0 0 12px rgba(34, 211, 238, .22); }
}
.option:focus-visible { border-color: rgba(34, 211, 238, .8); box-shadow: 0 0 34px -4px rgba(34, 211, 238, .62), 0 0 0 2px rgba(34, 211, 238, .5); outline: none; }
.option.selected { box-shadow: 0 0 30px -4px rgba(230, 0, 126, .5); }          /* chosen answer keeps the pink action accent */
@media (prefers-reduced-motion: reduce) { .home-quiz, .option { transition: none; } }