/* Palette calibrated from the Acolhe MVP: deep aubergine surfaces, restrained lilac focus. */
:root {
  --ink: #17111f;
  --surface: #1e1728;
  --surface-2: #292037;
  --line: rgba(218, 201, 237, .12);
  --lav: #b99be9;
  --purple: #7d5aca;
  --mint: #79d1bd;
  --paper: #f2ede7;
  --muted: #b4a9bf;
}

body {
  background: radial-gradient(670px 420px at 7% 4%, rgba(95, 67, 143, .14), transparent 70%), var(--ink);
}

.proposal {
  background:
    radial-gradient(700px 390px at 79% 19%, rgba(112, 78, 165, .075), transparent 69%),
    linear-gradient(145deg, #211929 0%, #1d1626 74%, #19121e 100%);
  box-shadow: inset 0 1px rgba(239, 225, 255, .025), inset 0 -32px 72px rgba(6, 2, 12, .12);
}

.proposal::before,
.audiences::before,
.build-section::before,
.interest::before { opacity: .38; }

.path-flow,
.audience-grid,
.build-steps {
  border-color: rgba(219, 196, 246, .055);
  background: rgba(255, 255, 255, .012);
  box-shadow: 0 19px 46px rgba(5, 2, 10, .16), inset 0 1px rgba(255, 255, 255, .022);
}

.path-flow article {
  border-color: rgba(219, 196, 246, .13);
  background: linear-gradient(145deg, #2a2037, #1d1628 88%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .028), 0 12px 25px rgba(5, 2, 10, .12);
}

.path-flow article::after,
.audience-card::before { opacity: .48; }

.path-flow article:nth-of-type(2) {
  border-color: rgba(200, 173, 244, .48);
  background: linear-gradient(145deg, #8061c6, #654a9f 92%);
  box-shadow: 0 16px 35px rgba(73, 47, 118, .24), inset 0 1px rgba(255, 255, 255, .18);
}

.path-flow > i {
  border-color: rgba(199, 166, 242, .14);
  background: #251b31;
  box-shadow: 0 7px 16px rgba(6, 3, 11, .17);
}

.disclaimer {
  border-color: rgba(196, 165, 235, .075);
  background: rgba(9, 6, 14, .13);
}

.audiences {
  background:
    radial-gradient(620px 410px at 87% 9%, rgba(107, 76, 159, .06), transparent 72%),
    linear-gradient(135deg, #16101e 0%, #1b1425 55%, #15101d 100%);
  box-shadow: inset 0 30px 58px rgba(5, 3, 9, .12), inset 0 -30px 55px rgba(5, 3, 9, .12);
}

.audience-card {
  border-color: rgba(218, 194, 245, .12);
  background: linear-gradient(155deg, #261c33, #1c1627 95%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .028), 0 14px 28px rgba(4, 2, 9, .13);
}

.audience-card:hover {
  border-color: rgba(203, 175, 250, .38);
  background: linear-gradient(155deg, #302241, #21182e 98%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 20px 36px rgba(4, 2, 9, .24);
}

.build-section {
  background:
    radial-gradient(650px 390px at 10% 37%, rgba(108, 77, 160, .07), transparent 72%),
    linear-gradient(145deg, #21192c 0%, #1a1424 74%, #1e1629 100%);
  box-shadow: inset 0 1px rgba(246, 232, 255, .025), inset 0 -34px 68px rgba(4, 1, 9, .13);
}

.build-steps li {
  border-color: rgba(219, 196, 246, .10);
  background: linear-gradient(155deg, #281e35, #1c1628);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.build-steps li:last-child {
  border-color: rgba(201, 175, 241, .34);
  background: linear-gradient(145deg, #6a4ca7, #4b3578);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 22px rgba(50, 30, 82, .20);
}

.interest {
  background:
    radial-gradient(650px 440px at 50% 42%, rgba(97, 68, 147, .13), transparent 67%),
    linear-gradient(180deg, #17111f, #120d18 100%);
}

.form-card {
  border-color: rgba(199, 173, 239, .22);
  background:
    radial-gradient(460px 320px at 102% -10%, rgba(165, 127, 225, .16), transparent 72%),
    linear-gradient(145deg, #2c203c 0%, #21182e 57%, #1c1528 100%);
  box-shadow: 0 32px 76px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .09), inset 0 -30px 65px rgba(9, 4, 17, .14);
}

.form-card::after { opacity: .26; }
.form-intro em { color: #c2a5ef; }
.form-intro > p:not(.eyebrow) { color: #c3b6d1; }

input, select {
  border-color: rgba(218, 199, 242, .16);
  background: #302340;
}

.button-dark { background: #7d5aca; }
.button-dark:hover { background: #8d6bd5; }

/* Keep the card system present but almost merged into the surrounding surface. */
.path-flow,
.audience-grid,
.build-steps {
  border-color: rgba(219, 196, 246, .035);
  background: rgba(255, 255, 255, .006);
  box-shadow: 0 14px 32px rgba(5, 2, 10, .10), inset 0 1px rgba(255, 255, 255, .012);
}

.path-flow article,
.audience-card,
.build-steps li {
  border-color: rgba(219, 196, 246, .075);
  background: linear-gradient(155deg, rgba(38, 29, 51, .78), rgba(26, 20, 36, .82));
  box-shadow: inset 0 1px rgba(255, 255, 255, .014), 0 8px 18px rgba(4, 2, 9, .08);
}

.path-flow article::after,
.audience-card::before { opacity: .20; }

.path-flow article:nth-of-type(2) {
  border-color: rgba(192, 166, 232, .30);
  background: linear-gradient(145deg, #674e9d, #4f3a79 92%);
  box-shadow: 0 11px 24px rgba(61, 40, 97, .16), inset 0 1px rgba(255, 255, 255, .10);
}

.build-steps li:last-child {
  border-color: rgba(189, 163, 228, .25);
  background: linear-gradient(145deg, #574184, #403064);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 9px 19px rgba(50, 30, 82, .12);
}

.audience-card:hover {
  border-color: rgba(203, 175, 250, .22);
  background: linear-gradient(155deg, rgba(45, 33, 61, .88), rgba(29, 22, 41, .90));
  box-shadow: inset 0 1px rgba(255, 255, 255, .028), 0 14px 26px rgba(4, 2, 9, .16);
}

/* Cards now follow the flat, outlined surfaces used in the original MVP. */
.path-flow,
.audience-grid,
.build-steps {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.path-flow article,
.audience-card,
.build-steps li {
  border-color: rgba(193, 174, 213, .20);
  background: #251c31;
  box-shadow: none;
}

.path-flow article::after,
.audience-card::before { display: none; }

.path-flow article:nth-of-type(2) {
  border-color: rgba(216, 197, 247, .52);
  background: #785ac0;
  box-shadow: none;
}

.build-steps li {
  background: #251c31;
}

.build-steps li:last-child {
  border-color: rgba(211, 190, 244, .40);
  background: #654b9d;
  box-shadow: none;
}

.audience-card:hover {
  border-color: rgba(202, 181, 230, .34);
  background: #2a2038;
  box-shadow: none;
}

.form-card::after { display: none; }