/* Apple-inspired palette supplied for the project:
   green #61BB46, yellow #FDB827, orange #F5821F, red #E03A3E, purple #963D97.
   Keep the interface neutral; colour is ambient rather than decorative. */

body::before,
body::after {
  z-index: 0;
}

.app-shell,
.legal-shell {
  position: relative;
  z-index: 1;
}

body::before {
  inset: -18vh -15vw;
  background:
    radial-gradient(circle at 4% 15%, rgba(97, 187, 70, .13), transparent 26%),
    radial-gradient(circle at 29% 4%, rgba(253, 184, 39, .085), transparent 25%),
    radial-gradient(circle at 52% 11%, rgba(245, 130, 31, .090), transparent 27%),
    radial-gradient(circle at 75% 5%, rgba(224, 58, 62, .080), transparent 27%),
    radial-gradient(circle at 100% 18%, rgba(150, 61, 151, .125), transparent 29%);
  filter: blur(36px) saturate(.88);
  opacity: .74;
  transform: translate3d(0, 0, 0) scale(1.03);
  animation-duration: 30s;
}

body::after {
  background: linear-gradient(180deg,
    rgba(23, 24, 26, .18),
    rgba(23, 24, 26, .67) 38%,
    rgba(23, 24, 26, .91) 78%,
    var(--page));
}

/* The page title is enough; remove the duplicate masthead and eyebrow. */
.app-header,
.hero > .eyebrow,
.hero > .hero-note {
  display: none;
}
.hero {
  padding-top: 46px;
}

.journey-option[aria-pressed="true"] {
  border-color: #86838a;
  background:
    linear-gradient(115deg,
      rgba(97,187,70,.075),
      rgba(253,184,39,.050) 28%,
      rgba(245,130,31,.056) 48%,
      rgba(224,58,62,.050) 69%,
      rgba(150,61,151,.078)),
    #47464c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

/* Selected controls are visibly active without turning into white buttons. */
.device-choices input:checked + span,
.task-choices input:checked + span,
.memory-choices input:checked + span {
  color: #fffef9;
  border-color: #8e8b91;
  background:
    linear-gradient(120deg, rgba(253,184,39,.080), rgba(245,130,31,.065) 48%, rgba(150,61,151,.080)),
    #58575d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
  font-weight: 590;
}

/* Make Basic feel like a short sequence rather than one continuous form. */
.stage-section {
  position: relative;
  margin: 10px 0;
  padding: 18px 18px 20px;
  border: 1px solid #45464a;
  border-radius: 11px;
  background: rgba(29, 30, 33, .68);
}
.stage-section.control-section {
  border-bottom: 1px solid #45464a;
}
.stage-section .section-heading {
  margin-bottom: 15px;
}
.stage-index {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #65666a;
  border-radius: 50%;
  background: #292a2e;
  color: #e9e7e1 !important;
  font-size: .72rem !important;
  font-weight: 650;
}
.tier-start {
  padding-top: 18px;
  margin-bottom: 4px;
}

/* Five explicit positions are easier to click than a tiny range thumb. */
.priority-enhanced > #priority-input,
.priority-enhanced > .range-ticks,
.priority-enhanced > .range-ends,
.priority-enhanced .priority-top output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.priority-enhanced .priority-top {
  margin-bottom: 10px;
}
.priority-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #202124;
}
.priority-step {
  min-width: 0;
  min-height: 40px;
  padding: 7px 5px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: transparent;
  color: #bbbcb8;
  font-size: .72rem;
  line-height: 1.15;
  cursor: pointer;
}
.priority-step:last-child {
  border-right: 0;
}
.priority-step:hover {
  background: #2b2c30;
  color: var(--text);
}
.priority-step[aria-pressed="true"] {
  color: #fffef9;
  background:
    linear-gradient(115deg, rgba(253,184,39,.075), rgba(245,130,31,.060), rgba(150,61,151,.075)),
    #59585e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
  font-weight: 620;
}

/* Pull explanatory material into visibly separate blocks below the tool. */
.content-section {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid #48494d;
  border-radius: 12px;
  background: rgba(27, 28, 31, .76);
}
.content-section + .content-section {
  margin-top: 20px;
}
.content-section > h2 {
  margin-top: 0;
}

/* The recommendation engine marks ranking-equivalent top choices directly. */
.match-list > .model-row.top-choice {
  margin: 9px 0 11px;
  border: 1px solid #77767a;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(97,187,70,.035), rgba(253,184,39,.035) 32%, rgba(245,130,31,.035) 60%, rgba(150,61,151,.045)),
    rgba(36,37,40,.86);
  box-shadow: 0 0 0 1px rgba(255,255,255,.015);
}
.match-list > .model-row.top-choice > summary {
  padding-left: 13px;
  padding-right: 13px;
}
.top-choice-badge {
  display: inline-flex;
  margin: 0 0 6px;
  padding: 3px 7px;
  border: 1px solid #8b898e;
  border-radius: 999px;
  background: #626167;
  color: #fffef9;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .hero { padding-top: 34px; }
  .stage-section { padding: 16px 14px 18px; }
  .priority-step { font-size: .65rem; padding-inline: 2px; }
  .content-section { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}