:root {
  --bg: #1c1d1f;
  --bg-alt: #202124;
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.10);
  --card-hover: rgba(255, 255, 255, 0.08);
  --text: #f4f6f9;
  --text-muted: #9a9ea5;
  --accent: #3b82f6;
  --accent-hover: #2f6fe0;
  --accent-soft: rgba(59, 130, 246, 0.16);
  /* Same hue as --accent, lightened for small text: --accent itself only
     reaches ~3.8:1 on an --accent-soft panel, which is under AA. */
  --accent-text: #8ab4fe;
  --radius: 8px;
  --tier-1: #f59e0b;
  --tier-2: #3b82f6;
  --tier-3: #22c55e;
  --error: #f59e0b;
  --error-text: #fcd9a0;
  --error-soft: rgba(245, 158, 11, 0.12);
  --error-border: rgba(245, 158, 11, 0.38);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% 15%, rgba(59, 130, 246, 0.24), transparent 60%),
    radial-gradient(700px 500px at 85% 100%, rgba(59, 130, 246, 0.14), transparent 60%);
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Inner width matches .wrap-wide (780px) so the two logos line up with the
     content column instead of being flung into the corners on wide screens. */
  max-width: 828px;
  margin: 0 auto;
  padding: 28px 24px 0;
  font-size: 13px;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.conf-logo-badge {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.conf-logo {
  height: 38px;
  width: auto;
  display: block;
  max-width: 100%;
}

.app {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.screen[hidden] { display: none; }

.screen-wizard {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
}

.screen-results {
  align-items: flex-start;
  justify-content: center;
  padding-top: 56px;
}

.wrap {
  width: 100%;
  margin: 0 auto;
}

.wrap-narrow {
  max-width: 640px;
  text-align: center;
}

.wrap-wide {
  max-width: 780px;
  text-align: left;
}

.result-hero {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.result-heading-wrap {
  margin-top: 24px;
}

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.h1 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
}

.h2 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
}

.lede {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 32px;
}

/* ~20% wider than the intro's 640px column, without widening the heading or
   button. The breakout is capped at whatever room the viewport actually has
   spare outside that column, so it collapses to 0 on narrow screens instead of
   running past both edges (the old -10% margins overflowed on every phone held
   sideways, and body { overflow-x: hidden } then clipped the text). */
.screen-intro .lede {
  max-width: 768px;
  margin-inline: calc(-1 * clamp(0px, (100vw - 720px) / 2, 64px));
}

.fine-print {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 20px;
}

.fine-print a { color: var(--text-muted); }

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
}

/* progress bar */
.progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  width: 100%;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.25s ease;
}

/* wizard steps */
.screen-wizard .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 32px;
}

.step-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.step-hint {
  color: var(--text-muted);
  font-size: 14px;
  margin: -4px 0 20px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 34px;
  text-align: left;
}

.field-wide { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.field input {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  /* Must stay >= 16px: anything smaller makes iOS Safari zoom the page in on
     focus, and it never zooms back out. */
  font-size: 16px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.field input:focus { border-color: var(--accent); }

/* .field input clears its default outline, and the buttons never had one, so
   restore an explicit ring. outline-offset keeps it clear of the control's own
   border and of the neighbouring grid cell. */
.field input:focus-visible,
.btn:focus-visible,
.link-btn:focus-visible,
.fine-print a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-other { margin-top: 18px; }

.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 29px;
}

.option-grid-2 { grid-template-columns: 1fr 1fr; }

.option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--card);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Guarded: on touch, :hover sticks to the last element tapped, which on the
   multi-select sector step is indistinguishable from the selected state. */
@media (hover: hover) and (pointer: fine) {
  .option-card:hover { background: var(--card-hover); }
}

.option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* The native control is visually hidden, so the card has to draw its own
   indicator. Square = checkbox (multi-select), circle = radio (single choice),
   so the shape alone tells the visitor which step they are on. */
.option-card span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  line-height: 1.4;
}

.option-card span::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.option-grid[data-radio-group] .option-card span::before {
  border-radius: 999px;
}

.option-grid[data-checkbox-group] .option-card:has(input:checked) span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.7 8.9 10 3.3' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.option-grid[data-radio-group] .option-card:has(input:checked) span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}

.step-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
}

/* Validation feedback. Lives inside each .step as a role="alert" region, so it
   is announced when JS writes into it. Kept in the DOM (rather than toggled
   with `hidden`) so screen readers register the live region up front; :empty
   hides it while there is nothing to say. Colour is backed up by the warning
   glyph, the border and the weight, so it never depends on colour alone. */
.step-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  border-radius: var(--radius);
  background: var(--error-soft);
  color: var(--error-text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.step-error:empty { display: none; }

.step-error::before {
  content: '!';
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--error);
  color: #1c1d1f;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.field input[aria-invalid="true"] { border-color: var(--error); }

/* The radio/checkbox inputs inside option cards are visually hidden, so give
   the card itself a focus ring: validation moves focus to the first offending
   input and the visitor has to be able to see where it landed. */
.option-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* results */
.tier-badge {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent);
}

.section-title {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.pyramid-section {
  margin-top: 44px;
}

.pyramid-track {
  display: flex;
  gap: 8px;
}

.pyramid-chip {
  flex: 1;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  text-align: center;
}

.pyramid-chip-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Was 11px at opacity 0.75, which composites to ~3.8:1 on the chip. Full
   opacity at 12px lands at 5.6:1 on the chip background (4.6:1 at the darkest
   corner of the .bg-glow overlay), so it clears AA everywhere on the page. */
.pyramid-chip-tagline {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pyramid-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.pyramid-chip.active .pyramid-chip-name,
.pyramid-chip.active .pyramid-chip-tagline {
  color: var(--accent-text);
}

.pyramid-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pyramid-item {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.pyramid-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.pyramid-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.pyramid-item-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.pyramid-item-tagline {
  font-size: 12px;
  color: var(--text-muted);
}

.pyramid-item-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pyramid-item-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.disclaimer-box {
  margin-top: 40px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
}

.disclaimer-box p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.disclaimer-box strong {
  color: var(--text);
}

.workshop-card {
  margin-top: 48px;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card);
}

.workshop-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.workshop-name {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
}

.workshop-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 22px;
}

.workshop-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.workshop-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}

.workshop-cols ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.result-footer {
  text-align: center;
  margin-top: 28px;
}

/* Stacked rather than side by side: at 375px the two used to wrap onto separate
   rows anyway, 12px apart, which put an unconfirmed form.reset() a stray thumb
   away from the primary CTA. */
.results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}

/* "Start over" is destructive and unconfirmed, so it reads as a quiet text
   link, not a second button. Still a <button> for keyboard and AT. */
.link-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .link-btn:hover { color: var(--text); }
}

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.footer a { color: var(--text-muted); }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 20px 16px 0; }
  .brand-logo { height: 38px; }
  /* Every name/tagline pair here is repeated verbatim in .pyramid-list right
     below, "You are here" included, so hiding the stacked chips costs no
     information and removes roughly a screenful. */
  .pyramid-track { display: none; }
  .workshop-cols { grid-template-columns: 1fr; gap: 20px; }
  .workshop-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Safety net: several classes above set their own `display` (flex/grid), which
   wins over the browser's default [hidden] rule by source order. This keeps
   `hidden` authoritative everywhere, regardless of what class an element has. */
[hidden] { display: none !important; }