/* Approved landing and About accents. Colour-only: no changes to type or geometry.
   Stops sampled from the CTA on slide 8 of the supplied akcent_kp (1).pdf. */
body[data-brand-spectrum] {
  --deck-gold: #fec02f;
  --deck-orange: #fe7c28;
  --deck-coral: #fe4a4d;
  --deck-pink: #eb4184;
  --deck-lilac: #be74d8;
  --deck-periwinkle: #8293fe;
  --deck-blue: #27a6fe;
  --deck-spectrum: linear-gradient(100deg,
    var(--deck-gold) 0%, var(--deck-orange) 22%,
    var(--deck-coral) 40%, var(--deck-pink) 54%,
    var(--deck-lilac) 70%, var(--deck-periwinkle) 84%, var(--deck-blue) 100%);
  --deck-outline: linear-gradient(115deg,
    #fec02f58, #fe7c284a 18%, #eb418457 44%, #be74d86b 66%, #27a6fe66);
}

/* Keep readable solid-colour fallbacks when text clipping is unsupported. */
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  body[data-brand-spectrum] #hero-title > span,
  body[data-brand-spectrum] main h2 > em,
  body[data-brand-spectrum] .service-maps-result {
    background-image: var(--deck-spectrum);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

/* Existing discovery cards retain every dimension and their right-hand arrows. */
body[data-brand-spectrum] .public-page-links a {
  background:
    linear-gradient(120deg, #211a29, #14121d 68%, #131923) padding-box,
    var(--deck-outline) border-box;
  box-shadow: inset 0 1px 0 #ffffff0c, -8px 5px 28px #eb418409, 8px 5px 28px #27a6fe0a;
}
body[data-brand-spectrum] .public-page-links a:last-child {
  background:
    linear-gradient(120deg, #1b1724, #14131e 65%, #111a21) padding-box,
    linear-gradient(115deg, #eb418455, #be74d86b 44%, #27a6fe7a) border-box;
}
body[data-brand-spectrum] .public-page-links .editorial-icon svg {
  color: #dca2e6;
}
body[data-brand-spectrum] .public-page-links a:last-child .editorial-icon svg {
  color: #8fcfff;
}
body[data-brand-spectrum] .public-page-links .editorial-side-arrow {
  color: #d2aff2;
  background: linear-gradient(90deg, #be74d803, #be74d812);
}
body[data-brand-spectrum] .public-page-links a:last-child .editorial-side-arrow {
  color: #8fcfff;
  background: linear-gradient(90deg, #27a6fe03, #27a6fe10);
}
body[data-brand-spectrum] .public-page-links .editorial-side-arrow::before {
  background: linear-gradient(transparent, #be74d864 24%, #27a6fe64 76%, transparent);
}

/* Gentle colour across the existing three service panels, not a new card layout. */
body[data-brand-spectrum] #platform .services > .service {
  border-color: transparent;
  background:
    linear-gradient(120deg, #18141e, #11121a) padding-box,
    var(--deck-outline) border-box;
}
body[data-brand-spectrum] #platform .services > .service-featured {
  background:
    linear-gradient(120deg, #241922, #1c162a 58%, #14202a) padding-box,
    var(--deck-outline) border-box;
  box-shadow: -12px 0 34px #eb41840a, 12px 0 34px #27a6fe0b, inset 0 1px 0 #ffffff08;
}
body[data-brand-spectrum] #platform .services > .service::before {
  border-color: transparent;
  background:
    linear-gradient(#19141f, #19141f) padding-box,
    var(--deck-outline) border-box;
  color: #e8d9f6;
  box-shadow: 0 0 14px #be74d814;
}
body[data-brand-spectrum] #platform .services > .service-maps::before {
  background:
    linear-gradient(#171922, #171922) padding-box,
    linear-gradient(115deg, #be74d87a, #27a6fe88) border-box;
  color: #b6ddff;
}

body[data-brand-spectrum] .question {
  background:
    radial-gradient(ellipse at 25% 65%, #eb41840b, transparent 57%),
    radial-gradient(ellipse at 73% 42%, #27a6fe0b, transparent 61%),
    radial-gradient(ellipse at center, #6a35b81c, transparent 72%);
}
body[data-brand-spectrum] .highlight-copy {
  border-left-color: #be74d8;
  background: linear-gradient(100deg, #eb41840c, #be74d812 35%, #27a6fe09 72%, transparent);
}
body[data-brand-spectrum] .price-card {
  border-color: transparent;
  background:
    radial-gradient(ellipse at 2% 2%, #eb418414, transparent 60%) padding-box,
    radial-gradient(ellipse at 100% 4%, #27a6fe16, transparent 65%) padding-box,
    linear-gradient(145deg, #201a2f, #0e0d13) padding-box,
    var(--deck-outline) border-box;
  box-shadow: 0 30px 80px #0003, -14px 5px 45px #eb418409, 14px 5px 45px #27a6fe0a;
}
body[data-brand-spectrum] .final-actions .secondary {
  border-color: transparent;
  background:
    var(--deck-spectrum) padding-box,
    var(--deck-spectrum) border-box;
  color: #100d14;
  box-shadow: -12px 8px 30px #eb418426, 12px 8px 30px #27a6fe26;
}

/* A little more page light. Static gradients add no new elements or animation. */
body[data-brand-spectrum] {
  background-image:
    radial-gradient(ellipse 720px 560px at 95% 3%, #7542be25, transparent 76%),
    radial-gradient(ellipse 620px 500px at 2% 31%, #eb418410, transparent 74%),
    radial-gradient(ellipse 620px 560px at 98% 58%, #27a6fe10, transparent 76%),
    radial-gradient(ellipse 760px 600px at 35% 94%, #9c60e521, transparent 76%);
}
body[data-brand-spectrum].login-landing .landing-final-cta .entry-login {
  background: linear-gradient(115deg, #b78aff, #9059e8);
  border-color: #be74d8;
  color: #100d14;
  box-shadow: -12px 8px 30px #eb418426, 12px 8px 30px #27a6fe26;
}
body[data-brand-spectrum].login-landing .landing-budget-card {
  border-color: transparent;
  background:
    linear-gradient(125deg, #1c1422, #17121f 60%, #111a24) padding-box,
    var(--deck-outline) border-box;
  box-shadow: 0 12px 48px #814dbe0d, -20px 0 90px #eb418415, 20px 0 90px #27a6fe18;
}
body[data-brand-spectrum].login-landing .landing-budget-subscription {
  border-color: transparent;
  background:
    linear-gradient(135deg, #261937, #141c28) padding-box,
    var(--deck-outline) border-box;
}
body[data-brand-spectrum].login-landing .login-section {
  background:
    radial-gradient(ellipse at 25% 48%, #eb418414, transparent 60%),
    radial-gradient(ellipse at 76% 52%, #27a6fe14, transparent 64%),
    radial-gradient(ellipse at 50% 48%, #7947b850, transparent 72%);
}
body[data-brand-spectrum].login-landing .login-wrap {
  border-color: transparent;
  background:
    linear-gradient(130deg, #15131bfa, #101018fa) padding-box,
    var(--deck-outline) border-box;
}

@media (hover:hover) and (pointer:fine) {
  body[data-brand-spectrum] .public-page-links a:hover {
    box-shadow: -8px 5px 30px #eb418418, 8px 5px 30px #27a6fe1a, inset 0 0 0 1px #c8a4ff38;
  }
  body[data-brand-spectrum] .final-actions .secondary:hover {
    box-shadow: -12px 10px 34px #eb41843a, 12px 10px 34px #27a6fe3a;
  }
}
@media (forced-colors:active) {
  body[data-brand-spectrum] #hero-title > span,
  body[data-brand-spectrum] main h2 > em,
  body[data-brand-spectrum] .service-maps-result {
    background: none;
    color: CanvasText;
  }
}