:root {
  --parchment: #f5e9cc;
  --parchment-deep: #f0d8a8;
  --parchment-card: #f3e4c2;
  --field-bg: #fbf4e2;
  --ink: #301830;
  --ink-2: #241224;
  --purple: #784890;
  --purple-deep: #5f3673;
  --purple-lit: #8a5aa8;
  --amber: #f0a848;
  --amber-pale: #f7e8c8;
  --pink: #f0a8a8;
  --coral: #f07878;
  --white: #ffffff;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --shadow-card: 0 6px 22px rgba(48, 24, 48, 0.08);
  --shadow-purple: 0 6px 16px rgba(120, 72, 144, 0.32);
  --shadow-dark: 0 8px 20px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

.site-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--parchment), var(--parchment-deep));
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 30px;
  background: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--parchment);
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: auto;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: rgba(245, 233, 204, 0.82);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color 0.16s ease;
}

.nav-links a:hover {
  color: var(--amber);
}

.nav-cta {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(240, 168, 72, 0.5);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--amber);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.cosmic {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 100% at 50% 6%, #4a2a5a 0%, var(--ink) 60%, var(--ink-2) 100%);
}

.cosmic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, var(--white), transparent),
    radial-gradient(1.2px 1.2px at 82% 16%, var(--amber), transparent),
    radial-gradient(1.8px 1.8px at 68% 30%, var(--white), transparent),
    radial-gradient(1px 1px at 34% 12%, var(--pink), transparent),
    radial-gradient(1.4px 1.4px at 90% 54%, var(--white), transparent),
    radial-gradient(1px 1px at 20% 60%, var(--white), transparent),
    radial-gradient(1.3px 1.3px at 54% 78%, var(--amber), transparent),
    radial-gradient(1px 1px at 44% 40%, var(--white), transparent),
    radial-gradient(1.5px 1.5px at 8% 78%, var(--white), transparent),
    radial-gradient(1px 1px at 92% 84%, var(--pink), transparent);
  animation: tp-twinkle 5s ease-in-out infinite;
}

.hero {
  padding: 56px 40px 64px;
  text-align: center;
}

.hero-inner,
.cosmic-content {
  position: relative;
  z-index: 1;
}

.hero-stage {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 240px;
  margin-top: 6px;
  perspective: 760px;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 168, 72, 0.4) 0%, rgba(240, 168, 72, 0) 66%);
}

.mascot-orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.mascot-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.mascot-plane img,
.success-mascot {
  width: 200px;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
  animation: tp-float 6s ease-in-out infinite;
}

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%) rotateX(66deg);
  transform-style: preserve-3d;
}

.orbit-spin {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  animation: tp-orbit 11s linear infinite;
}

.orbit-arm {
  position: absolute;
  left: 0;
  top: 0;
  /* Orbit radius — how far out the die swings to the left/right of the pig. */
  transform: translateX(175px);
  transform-style: preserve-3d;
}

.orbit-counter {
  transform-style: preserve-3d;
  animation: tp-orbit-rev 11s linear infinite;
}

.orbit-face {
  transform: rotateX(-66deg);
  transform-style: preserve-3d;
}

/* Real 3D icosahedron (D20): 20 CSS triangle faces assembled with preserve-3d.
   --fw is the single size knob (face width); everything else derives from it. */
.d20 {
  --fw: 28px;
  --fh: calc(var(--fw) * 0.86);
  --tz: calc(var(--fw) * 0.335);
  --trz: calc(var(--fw) * 0.75);
  --ty: calc(var(--fh) * -0.15);
  --try: calc(var(--fh) * 0.63);
  --tly: calc(var(--fh) * 1.41);
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  counter-reset: steps;
  /* Lift the die so its centroid sits on the orbit-arm point. */
  transform: translateY(calc(var(--fh) * -1.2));
}

.die-body {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform-origin: 0 calc(var(--fh) * 1.2);
  animation: tp-d20-tumble 9s linear infinite;
}

.d20 .face {
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 calc(var(--fw) * -0.5);
  width: 0;
  height: 0;
  border-left: calc(var(--fw) * 0.5) solid transparent;
  border-right: calc(var(--fw) * 0.5) solid transparent;
  border-bottom: var(--fh) solid rgb(103, 62, 124);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  counter-increment: steps 1;
}

/* Multi-tone faces: overlapping nth-child groups tint faces in several purple
   shades so the solid reads as lit and faceted rather than flat. Fully opaque so
   the die's color stays constant regardless of what's behind it (the pig vs. the
   dark background) as it orbits — no backdrop bleed-through, no lighting flicker. */
.d20 .face:nth-child(3n + 1) {
  border-bottom-color: rgb(117, 76, 143);
}

.d20 .face:nth-child(3n + 2) {
  border-bottom-color: rgb(85, 49, 104);
}

.d20 .face:nth-child(5n) {
  border-bottom-color: rgb(99, 58, 123);
}

.d20 .face::before {
  content: counter(steps);
  position: absolute;
  /* Center the numeral's box on the triangle's centroid (2/3 of the height down
     from the apex) so rotation pivots about the centroid and the number stays
     centered at every edge-aligned angle. */
  top: calc(var(--fh) * 0.167);
  left: calc(var(--fw) * -1);
  width: calc(var(--fw) * 2);
  height: var(--fh);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  color: #f7e8c8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--fh) * 0.52);
  font-weight: 700;
  line-height: 1;
  text-shadow: 1px 1px 3px #000, 0 0 2px #000;
}

/* Number orientation. On a real d20 each numeral's base sits along one of its
   triangle's three edges (never pointing at a vertex), and faces use different
   edges, so the numbers look varied rather than all upright. Every rotation here
   is a multiple of 120deg, which keeps the base edge-aligned. The down-pointing
   faces (6-10, 16-20, flipped by rotateZ(180deg)) use 120/240 — never 0deg — so
   their numbers never land upside-down (a 0deg flip would also read 6 as 9). The
   faces left at the upright default (1, 4, 12, 15) are the 0deg group. */
.d20 .face-2::before,  .d20 .face-5::before,  .d20 .face-7::before,
.d20 .face-9::before,  .d20 .face-11::before, .d20 .face-14::before,
.d20 .face-16::before, .d20 .face-18::before, .d20 .face-20::before {
  transform: rotate(120deg);
}
.d20 .face-3::before,  .d20 .face-6::before,  .d20 .face-8::before,
.d20 .face-10::before, .d20 .face-13::before, .d20 .face-17::before,
.d20 .face-19::before {
  transform: rotate(240deg);
}

/* Standard d20 value layout. The faces are indexed 1-20 by DOM order, but a real
   d20 doesn't run its values in sequence — it scatters them under two rules:
   opposite faces sum to 21, and all odd values sit on one hemisphere with the
   evens on the other (the "1 up, evens on the bottom" property). In this model
   face-N and face-(21-N) are geometric opposites, so each value V is placed with
   21-V on the opposite face. The odds fill the top cap + upper ring, the evens
   the lower ring + bottom cap. (Values here override the default counter.) */
.d20 .face-1::before  { content: "1";  }
.d20 .face-2::before  { content: "17"; }
.d20 .face-3::before  { content: "9";  }
.d20 .face-4::before  { content: "13"; }
.d20 .face-5::before  { content: "5";  }
.d20 .face-6::before  { content: "11"; }
.d20 .face-7::before  { content: "3";  }
.d20 .face-8::before  { content: "19"; }
.d20 .face-9::before  { content: "7";  }
.d20 .face-10::before { content: "15"; }
.d20 .face-11::before { content: "6";  }
.d20 .face-12::before { content: "14"; }
.d20 .face-13::before { content: "2";  }
.d20 .face-14::before { content: "18"; }
.d20 .face-15::before { content: "10"; }
.d20 .face-16::before { content: "16"; }
.d20 .face-17::before { content: "8";  }
.d20 .face-18::before { content: "12"; }
.d20 .face-19::before { content: "4";  }
.d20 .face-20::before { content: "20"; }

/* Top cap (1-5) */
.d20 .face-1  { transform: rotateY(0deg)    translateZ(var(--tz)) translateY(var(--ty)) rotateX(53deg); }
.d20 .face-2  { transform: rotateY(-72deg)  translateZ(var(--tz)) translateY(var(--ty)) rotateX(53deg); }
.d20 .face-3  { transform: rotateY(-144deg) translateZ(var(--tz)) translateY(var(--ty)) rotateX(53deg); }
.d20 .face-4  { transform: rotateY(-216deg) translateZ(var(--tz)) translateY(var(--ty)) rotateX(53deg); }
.d20 .face-5  { transform: rotateY(-288deg) translateZ(var(--tz)) translateY(var(--ty)) rotateX(53deg); }
/* Upper-middle ring (6-10) */
.d20 .face-6  { transform: rotateY(360deg) translateZ(var(--trz)) translateY(var(--try)) rotateZ(180deg) rotateX(-11deg); }
.d20 .face-7  { transform: rotateY(288deg) translateZ(var(--trz)) translateY(var(--try)) rotateZ(180deg) rotateX(-11deg); }
.d20 .face-8  { transform: rotateY(216deg) translateZ(var(--trz)) translateY(var(--try)) rotateZ(180deg) rotateX(-11deg); }
.d20 .face-9  { transform: rotateY(144deg) translateZ(var(--trz)) translateY(var(--try)) rotateZ(180deg) rotateX(-11deg); }
.d20 .face-10 { transform: rotateY(72deg)  translateZ(var(--trz)) translateY(var(--try)) rotateZ(180deg) rotateX(-11deg); }
/* Lower-middle ring (11-15) */
.d20 .face-11 { transform: rotateY(252deg) translateZ(var(--trz)) translateY(var(--try)) rotateX(-11deg); }
.d20 .face-12 { transform: rotateY(324deg) translateZ(var(--trz)) translateY(var(--try)) rotateX(-11deg); }
.d20 .face-13 { transform: rotateY(36deg)  translateZ(var(--trz)) translateY(var(--try)) rotateX(-11deg); }
.d20 .face-14 { transform: rotateY(108deg) translateZ(var(--trz)) translateY(var(--try)) rotateX(-11deg); }
.d20 .face-15 { transform: rotateY(180deg) translateZ(var(--trz)) translateY(var(--try)) rotateX(-11deg); }
/* Bottom cap (16-20) */
.d20 .face-16 { transform: rotateY(-108deg) translateZ(var(--tz)) translateY(var(--tly)) rotateZ(180deg) rotateX(53deg); }
.d20 .face-17 { transform: rotateY(-36deg)  translateZ(var(--tz)) translateY(var(--tly)) rotateZ(180deg) rotateX(53deg); }
.d20 .face-18 { transform: rotateY(36deg)   translateZ(var(--tz)) translateY(var(--tly)) rotateZ(180deg) rotateX(53deg); }
.d20 .face-19 { transform: rotateY(108deg)  translateZ(var(--tz)) translateY(var(--tly)) rotateZ(180deg) rotateX(53deg); }
.d20 .face-20 { transform: rotateY(180deg)  translateZ(var(--tz)) translateY(var(--tly)) rotateZ(180deg) rotateX(53deg); }

.hero h1 {
  margin: 22px 0 0;
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1;
}

.hero p {
  max-width: 500px;
  margin: 18px auto 0;
  color: rgba(245, 233, 204, 0.85);
  font-size: 19px;
  line-height: 1.55;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  padding: 17px 30px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible,
.brand:focus-visible,
.footer a:focus-visible,
.survey-header a:focus-visible,
.icon-link:focus-visible {
  outline: 3px solid rgba(240, 168, 72, 0.72);
  outline-offset: 4px;
}

.button-amber {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow-dark);
}

.button-amber:hover {
  background: #e69b37;
}

.button-purple {
  background: var(--purple);
  color: var(--parchment);
  box-shadow: var(--shadow-purple);
}

.button-purple:hover {
  background: var(--purple-deep);
}

.hero .button {
  margin-top: 28px;
}

.section {
  padding: 54px 48px;
}

.section-narrow {
  max-width: 840px;
  margin: 0 auto;
}

.center {
  text-align: center;
}

.eyebrow {
  color: var(--purple);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}

.pitch {
  max-width: 600px;
  margin: 16px auto 0;
  color: rgba(48, 24, 48, 0.92);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.6;
}

.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}

.beat {
  text-align: center;
}

.beat-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 13px;
}

.beat-diamond {
  border-radius: 9px;
  background: var(--purple);
  transform: rotate(45deg);
}

.beat-star {
  background: var(--amber);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.beat-circles {
  position: relative;
}

.beat-circles::before,
.beat-circles::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.beat-circles::before {
  left: 1px;
  background: var(--pink);
}

.beat-circles::after {
  right: 1px;
  background: var(--coral);
}

.beat h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.beat p {
  margin: 6px 0 0;
  color: rgba(48, 24, 48, 0.7);
  font-size: 15px;
  line-height: 1.5;
}

.paths {
  text-align: center;
}

.path-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  border: 1px solid rgba(120, 72, 144, 0.2);
  border-radius: 999px;
  padding: 6px;
  background: var(--parchment-card);
}

.path-tab {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  background: transparent;
  color: var(--purple-deep);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.path-tab[aria-selected="true"] {
  background: var(--purple);
  color: var(--parchment);
  box-shadow: 0 3px 10px rgba(120, 72, 144, 0.28);
}

.path-tab:focus-visible {
  outline: 3px solid rgba(240, 168, 72, 0.72);
  outline-offset: 3px;
}

.path-panel {
  margin-top: 30px;
}

.path-panel[hidden] {
  display: none;
}

.path-panel > * + * {
  margin-top: 34px;
}

.path-panel:focus-visible {
  outline: 3px solid rgba(240, 168, 72, 0.45);
  outline-offset: 8px;
  border-radius: 14px;
}

.founder-card h2 {
  margin: 0;
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

#what,
#about {
  scroll-margin-top: 80px;
}

.founder-card {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid rgba(120, 72, 144, 0.18);
  border-radius: 16px;
  padding: 34px 36px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.founder-card p {
  margin: 16px 0 0;
  color: rgba(48, 24, 48, 0.88);
  font-size: 18px;
  line-height: 1.65;
}

.signature {
  margin-top: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.survey-cta {
  padding: 56px 40px;
  text-align: center;
}

.survey-cta h2 {
  margin: 0;
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.05;
}

.survey-cta p {
  max-width: 440px;
  margin: 14px auto 0;
  color: rgba(245, 233, 204, 0.82);
  font-size: 18px;
  line-height: 1.55;
}

.survey-cta .button {
  margin-top: 26px;
}

.event-band {
  padding: 40px 48px;
  background: var(--amber);
  color: var(--ink);
  text-align: center;
}

.event-band .eyebrow {
  color: var(--purple-deep);
  font-size: 12px;
}

.event-band h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.event-band p {
  max-width: 420px;
  margin: 10px auto 0;
  color: rgba(48, 24, 48, 0.8);
  font-size: 16px;
  line-height: 1.5;
}

.notify-form {
  max-width: 420px;
  display: flex;
  gap: 10px;
  margin: 20px auto 0;
}

.notify-form input[type="email"] {
  min-width: 0;
  flex: 1;
  border: 1.5px solid var(--purple-deep);
  border-radius: 11px;
  padding: 13px 16px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 16px;
}

.notify-form button {
  border: 0;
  border-radius: 11px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--parchment);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.footer {
  padding: 34px 48px;
  background: var(--ink);
  color: rgba(245, 233, 204, 0.72);
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer .brand img {
  width: 30px;
}

.footer .brand-name {
  font-size: 18px;
}

.footer a {
  color: var(--amber);
  text-decoration: none;
}

.footer-fine {
  margin-top: 20px;
  border-top: 1px solid rgba(245, 233, 204, 0.15);
  padding-top: 18px;
  color: rgba(245, 233, 204, 0.55);
  font-size: 12.5px;
  line-height: 1.7;
}

.survey-page {
  min-height: 100vh;
  background: radial-gradient(130% 80% at 50% -20%, var(--parchment) 0%, var(--parchment-deep) 100%);
}

.survey-header {
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto;
  padding: 20px 24px;
}

.survey-header .brand {
  color: var(--ink);
}

.survey-header .brand img {
  width: 34px;
}

.home-link {
  color: var(--purple);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.survey-main {
  max-width: 640px;
  margin: 8px auto 90px;
  padding: 0 24px;
}

.survey-intro {
  margin-bottom: 12px;
  text-align: center;
}

.survey-intro h1,
.thanks-panel h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.survey-intro p,
.thanks-panel p {
  max-width: 440px;
  margin: 12px auto 0;
  color: rgba(48, 24, 48, 0.75);
  font-size: 17px;
  line-height: 1.55;
}

.carryover-prompt {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  border: 1px solid rgba(120, 72, 144, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-card);
}

.carryover-prompt.is-visible {
  display: flex;
}

.carryover-prompt p {
  margin: 0;
  color: rgba(48, 24, 48, 0.82);
  font-size: 15px;
  line-height: 1.45;
}

.carryover-prompt strong {
  color: var(--purple-deep);
  font-weight: 600;
}

.prompt-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.prompt-actions a,
.prompt-actions button {
  min-height: 38px;
  border: 1px solid rgba(120, 72, 144, 0.3);
  border-radius: 999px;
  padding: 10px 14px;
  background: var(--field-bg);
  color: var(--purple-deep);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.survey-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 34px;
}

.question-card {
  border: 1px solid rgba(120, 72, 144, 0.18);
  border-radius: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.55);
}

.question-card legend,
.question-card > label,
.question-heading {
  display: block;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

fieldset.question-card {
  min-width: 0;
}

/* A <legend> renders straddling the fieldset's top border by default. Float it
   full-width so it drops inside the card and reads like the reference's heading,
   while keeping the fieldset/legend grouping for screen readers. */
.question-card legend {
  float: left;
  width: 100%;
  padding: 0;
  /* Spacing must live on the float itself: a cleared sibling's margin-top gets
     absorbed by the clearance, so .chips margin-top can't set this gap. */
  margin-bottom: 14px;
}

.question-card legend + * {
  clear: both;
}

.legend-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.hint {
  color: rgba(48, 24, 48, 0.5);
  font-size: 13px;
  line-height: 1;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.chip {
  position: relative;
  display: inline-flex;
}

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

.chip span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(120, 72, 144, 0.3);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--field-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.chip input:checked + span {
  border-color: var(--purple);
  background: var(--purple);
  color: var(--parchment);
  box-shadow: 0 3px 10px rgba(120, 72, 144, 0.28);
  font-weight: 600;
}

.chip input:focus-visible + span,
input:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(120, 72, 144, 0.22);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  border: 1.5px solid rgba(120, 72, 144, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 16px;
}

textarea {
  margin-top: 12px;
  resize: vertical;
  line-height: 1.5;
}

::placeholder {
  color: rgba(48, 24, 48, 0.4);
}

.optional-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.question-card-required {
  border-color: rgba(120, 72, 144, 0.34);
  background: rgba(255, 255, 255, 0.72);
}

.required-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.req-badge {
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--amber);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

.required-note {
  margin: 10px 0 16px;
  color: rgba(48, 24, 48, 0.75);
  font-size: 15px;
  line-height: 1.55;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  color: rgba(48, 24, 48, 0.75);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
}

.consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--purple);
}

.submit-row {
  text-align: center;
}

.submit-note {
  margin: 12px 0 0;
  color: rgba(48, 24, 48, 0.5);
  font-size: 13px;
  line-height: 1.5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.plain-footer {
  border-top: 1px solid rgba(48, 24, 48, 0.14);
  padding: 26px 24px;
  color: rgba(48, 24, 48, 0.55);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.plain-footer a {
  color: var(--purple);
}

.thanks-panel {
  max-width: 620px;
  margin: 40px auto 80px;
  padding: 0 24px;
  text-align: center;
}

.thanks-panel .success-mascot {
  width: 150px;
  margin: 0 auto;
  filter: drop-shadow(0 12px 22px rgba(48, 24, 48, 0.22));
}

.thanks-panel .button {
  margin-top: 28px;
}

@keyframes tp-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes tp-twinkle {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes tp-orbit {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes tp-orbit-rev {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes tp-d20-tumble {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .nav {
    padding: 13px 18px;
  }

  .brand-name {
    font-size: 18px;
  }

  .nav-cta {
    padding: 9px 13px;
    font-size: 13px;
  }

  .hero {
    padding: 42px 24px 54px;
  }

  .hero-stage {
    width: 214px;
    height: 214px;
  }

  .mascot-plane img {
    width: 178px;
  }

  .orbit-arm {
    transform: translateX(104px);
  }

  .hero h1 {
    font-size: 39px;
    letter-spacing: 0;
  }

  .hero p {
    font-size: 17px;
  }

  .section {
    padding: 46px 24px;
  }

  .pitch {
    font-size: 20px;
  }

  .beats {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .nav-links {
    display: none;
  }

  .founder-card {
    padding: 28px 24px;
  }

  .survey-cta {
    padding: 48px 24px;
  }

  .survey-cta h2 {
    font-size: 34px;
  }

  .event-band {
    padding: 38px 24px;
  }

  .notify-form {
    flex-direction: column;
  }

  .notify-form button {
    min-height: 46px;
  }

  .footer {
    padding: 32px 24px;
  }

  .survey-header {
    align-items: flex-start;
  }

  .home-link {
    margin-top: 8px;
  }

  .survey-intro h1,
  .thanks-panel h1 {
    font-size: 38px;
  }

  .carryover-prompt {
    flex-direction: column;
  }

  .prompt-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .optional-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .nav {
    gap: 12px;
  }

  .brand img {
    width: 28px;
  }

  .brand-name {
    font-size: 16px;
  }

  .nav-cta {
    white-space: nowrap;
  }

  .survey-header {
    padding-inline: 18px;
  }
}

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