/* =========================================================================
   Guru Gossip — landing page styles
   Mobile first. Scales from 320px phones to ultrawide desktops via clamp().
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  /* brand */
  --violet: #8b5cf6;
  --violet-bright: #a78bfa;
  --pink: #ec4899;
  --pink-bright: #f472b6;
  --amber: #fbbf24;
  --mint: #34d399;
  --sky: #38bdf8;
  --flame: #fb7185;

  /* surfaces */
  --bg: #0b0a12;
  --bg-alt: #0f0e18;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* text */
  --text: #f4f2fb;
  --text-muted: #b6b0cd;
  --text-dim: #8b85a3;

  /* layout */
  --shell: 1180px;
  --shell-wide: 1560px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* type */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-display: 'Space Grotesk', var(--font);

  /* effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 3px rgba(167, 139, 250, 0.45);

  --grad-brand: linear-gradient(115deg, var(--violet-bright), var(--pink) 55%, var(--amber));
}

/* light theme */
[data-theme='light'] {
  color-scheme: light;

  --bg: #fbfaff;
  --bg-alt: #f3f0fb;
  --surface: rgba(15, 10, 40, 0.035);
  --surface-2: rgba(15, 10, 40, 0.06);
  --border: rgba(20, 14, 45, 0.12);
  --border-strong: rgba(20, 14, 45, 0.22);

  --text: #17122b;
  --text-muted: #4d4666;
  --text-dim: #6b6484;

  --violet: #7c3aed;
  --violet-bright: #6d28d9;
  --pink: #db2777;
  --amber: #b45309;
  --mint: #047857;
  --sky: #0369a1;

  --shadow: 0 10px 30px -14px rgba(40, 25, 90, 0.28);
  --shadow-lg: 0 28px 60px -28px rgba(40, 25, 90, 0.32);
  --ring: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

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

html {
  /* Belt and braces against decorative elements (the hero blur, the ticker)
     creating a horizontal scrollbar. `clip` avoids creating a scroll
     container, so position: sticky keeps working. */
  overflow-x: clip;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: clamp(0.975rem, 0.94rem + 0.18vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--violet-bright);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

:focus-visible {
  outline: 2px solid var(--violet-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

/* Parked off-screen with a transform rather than a percentage `top`, so its
   hidden position does not depend on the height of whatever containing block
   it happens to land in. */
.skip-link {
  position: fixed;
  inset-inline: 0;
  top: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2rem);
  z-index: 100;
  background: var(--violet);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -110%;
  transition: translate 0.2s ease;
}

.skip-link:focus {
  translate: 0 0;
}

/* Honeypot — visually gone, still in the DOM for bots.
   Needs to beat the `input[type='text']` width rule below, hence the selector. */
input.hp[type='text'] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-inline-size: 0 !important;
  max-inline-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  --btn-bg: var(--grad-brand);
  --btn-fg: #14091f;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--violet) 70%, transparent);
}

[data-theme='light'] .btn-primary {
  --btn-fg: #fff;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
}

.btn-lg {
  padding: 1.05rem 2rem;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
}

/* ---------------------------------------------------------------- header */

/* An opaque-ish background rather than backdrop-filter. Blurring whatever
   scrolls underneath meant re-blurring on every frame that anything on the page
   moved — including the ticker. It cost more than it was worth, and a solid
   header is easier to read anyway. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 94%, var(--surface-2));
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}

@supports (backdrop-filter: blur(1px)) {
  /* Opt in only where there is a GPU, and only while pinned, so the cost is
     never paid during normal scrolling. */
  @media (min-width: 900px) {
    .site-header[data-stuck] {
      background: color-mix(in oklab, var(--bg) 72%, transparent);
      backdrop-filter: blur(12px) saturate(150%);
    }
  }
}

.site-header[data-stuck] {
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding-block: 0.65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: var(--grad-brand);
  color: #17092a;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--violet) 80%, transparent);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: #8b5cf6;
}

.brand-text small {
  color: var(--text-dim);
  font-size: 0.74rem;
}

/* nav collapses to a scroll strip on small screens rather than a hamburger:
   four short items fit, and it avoids a JS menu for no gain. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Flex items default to min-width:auto, which stops the nav from shrinking
     and pushes the header wider than the viewport on narrow screens. */
  min-width: 0;
  flex: 0 1 auto;
}

.header-inner {
  overflow: hidden;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  flex-shrink: 0;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
  transition: color 0.2s, background 0.2s;
}

.site-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.nav-cta {
  background: var(--grad-brand) !important;
  color: #14091f !important;
  padding-inline: 1.1rem !important;
  font-weight: 700;
}

[data-theme='light'] .nav-cta {
  color: #fff !important;
}

@media (max-width: 560px) {
  .brand-text small {
    display: none;
  }
  .site-nav a {
    font-size: 0.85rem;
    padding: 0.45rem 0.5rem;
  }
}

.theme-toggle {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.theme-toggle-track {
  display: block;
  width: 2.9rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.25s;
}

.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  translate: 0 -50%;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--grad-brand);
  transition: translate 0.25s ease;
}

[data-theme='light'] .theme-toggle-thumb {
  translate: 1.3rem -50%;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 9vw, 7rem) clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* Radial gradients are already smooth, so no blur filter is needed. A 28px
   blur over an element this large cost more main-thread time than everything
   else on the page combined, for no visible gain. */
.hero-bg {
  position: absolute;
  inset: -30% -15% auto;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(46rem 32rem at 18% 10%, color-mix(in oklab, var(--violet) 40%, transparent), transparent 68%),
    radial-gradient(40rem 30rem at 84% 24%, color-mix(in oklab, var(--pink) 32%, transparent), transparent 66%),
    radial-gradient(42rem 28rem at 50% 88%, color-mix(in oklab, var(--amber) 20%, transparent), transparent 68%);
}

[data-theme='light'] .hero-bg {
  opacity: 0.5;
}

.hero-inner {
  max-width: 62ch;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1100px) {
  .hero-inner {
    max-width: 72ch;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}

/* The ring expands via a pseudo-element whose opacity is animated, instead of
   animating box-shadow. Opacity is a compositor-only property; box-shadow
   repaints on every frame. */
.pulse-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mint);
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--mint) 60%, transparent);
  opacity: 0;
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

.hero-title {
  font-size: clamp(2.6rem, 1.4rem + 6.4vw, 5.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.35rem;
}

.grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.32rem);
  color: var(--text-muted);
  max-width: 58ch;
  margin-bottom: 2.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 44rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-stats > div {
  background: color-mix(in oklab, var(--bg) 70%, var(--surface));
  padding: 1.1rem 0.75rem;
  text-align: center;
}

.hero-stats dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.hero-stats dd {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  margin: 0.15rem 0 0;
}

@media (min-width: 620px) {
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- ticker */

.ticker {
  border-block: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  padding-block: 0.6rem;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: max-content;
  animation: ticker 42s linear infinite;
  font-size: 0.86rem;
  color: var(--text-muted);
  padding-inline: 1.2rem;
  /* Composited transform only — no layout or paint per frame. */
  will-change: transform;
}

.ticker-item {
  white-space: nowrap;
}

.ticker-sep {
  color: var(--violet-bright);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* Stop the marquee whenever nobody can see it: scrolled past, or in a
   backgrounded tab. An off-screen infinite animation is pure battery drain.
   Toggled from JS. */
.ticker[data-idle] .ticker-track {
  animation-play-state: paused;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------- section */

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  position: relative;
}

.section:nth-of-type(even) {
  background: var(--bg-alt);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  margin-bottom: 0.85rem;
}

.section-lede {
  color: var(--text-muted);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
}

/* ------------------------------------------------------------ card grid */

.card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  transition: transform 0.25s ease, border-color 0.25s, background 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.card:hover::after {
  opacity: 1;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--violet) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* ------------------------------------------------------------ ad slots */

.section-adbreak {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.ad-slot {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.6rem;
  text-align: center;
  overflow: hidden;
}

.ad-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.ad-frame {
  min-height: clamp(6rem, 14vw, 10rem);
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 9px,
    var(--surface) 9px,
    var(--surface) 18px
  );
}

.ad-placeholder {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  padding: 1.5rem 1rem;
}

.ad-placeholder code {
  color: var(--text-muted);
}

/* The sidebar unit deliberately does NOT stick to the viewport.
   A sticky element keeps its place in the flow but shifts out of its reserved
   box, so it slides over whatever sits below it — here that meant the ad
   covering the "Ground rules" panel as you scrolled. Scrolling away with the
   content is predictable, and an ad that chases the reader is more likely to be
   flagged as intrusive anyway. */
.ad-slot-sidebar {
  max-width: 20rem;
  margin-inline: auto;
}

/* ----------------------------------------------------------- split area */

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 1000px) {
  .split {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }
}

.split-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --------------------------------------------------------- board grid */

.board-grid {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.board {
  --accent: var(--violet);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s;
}

.board::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.board:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}

.board-flame {
  --accent: var(--flame);
}
.board-sparkle {
  --accent: var(--amber);
}
.board-mint {
  --accent: var(--mint);
}
.board-violet {
  --accent: var(--violet-bright);
}
.board-amber {
  --accent: var(--amber);
}
.board-slate {
  --accent: var(--sky);
}

.board h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.board p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}

.board-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}

/* --------------------------------------------------------------- panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
}

.panel-title {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.rules {
  counter-reset: rule;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.rules li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  align-items: start;
}

.rules li::before {
  counter-increment: rule;
  content: counter(rule);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--violet) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
  color: var(--violet-bright);
  font-size: 0.75rem;
  font-weight: 700;
}

/* --------------------------------------------------------------- survey */

.section-survey {
  border-top: 1px solid var(--border);
}

.survey-progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.survey-progress-bar {
  flex: 1 1 12rem;
  max-width: 22rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.survey-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-brand);
  transition: width 0.35s ease;
}

.survey {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.survey-fields {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.loading {
  color: var(--text-dim);
  padding: 2rem 0;
  text-align: center;
}

.q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
}

.q[data-invalid] {
  border-color: color-mix(in oklab, var(--flame) 60%, transparent);
}

/* The number and the prompt flow as run-in text on narrow screens — the number
   sits at the start of the heading and the prompt wraps underneath it — then
   become a tidy two-part flex row once there is room. */
.q-head {
  display: block;
  padding: 0;
  margin-bottom: 0.4rem;
  max-width: 100%;
}

.q-prompt {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.q-num {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-right: 0.55rem;
  vertical-align: 0.15em;
}

@media (min-width: 620px) {
  .q-head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .q-num {
    margin-right: 0;
  }
}

.q-help {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.q-options {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 620px) {
  .q-options {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }
  .q.q-scale .q-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* choice chips */
.choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  font-size: 0.93rem;
  line-height: 1.4;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.choice:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.choice input {
  appearance: none;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.18s, background 0.18s;
}

.choice input[type='checkbox'] {
  border-radius: 5px;
}

.choice input::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: inherit;
  background: #14091f;
  scale: 0;
  transition: scale 0.15s ease;
}

.choice input[type='checkbox']::after {
  width: 0.3rem;
  height: 0.55rem;
  border-radius: 0;
  background: none;
  border-left: 2.5px solid #14091f;
  border-bottom: 2.5px solid #14091f;
  rotate: -45deg;
  translate: 0 -8%;
  scale: 0;
}

.choice:has(input:checked) {
  border-color: color-mix(in oklab, var(--violet) 60%, transparent);
  background: color-mix(in oklab, var(--violet) 12%, var(--bg-alt));
}

.choice input:checked {
  border-color: var(--violet-bright);
  background: var(--violet-bright);
}

.choice input:checked::after {
  scale: 1;
}

.choice:has(input:focus-visible) {
  box-shadow: var(--ring);
}

.choice[data-capped] {
  opacity: 0.45;
}

/* Scale questions get compact pill buttons: radio and label stay on one line
   so the number and its meaning read together. */
.q.q-scale .choice {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.q.q-scale .choice input {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.1rem;
}

.q.q-scale .choice span {
  line-height: 1.35;
}

@media (min-width: 1100px) {
  .q.q-scale .choice {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.9rem 0.5rem;
    font-size: 0.8rem;
  }
  .q.q-scale .choice input {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------- fields */

.field {
  display: grid;
  gap: 0.45rem;
}

.label {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.label em {
  font-style: normal;
  font-weight: 450;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.req {
  color: var(--flame);
}

fieldset.field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

input[type='text'],
input[type='email'],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.6;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in oklab, var(--violet) 40%, var(--border-strong));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--violet-bright);
  box-shadow: var(--ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.25rem, calc(100% - 0.85rem) 1.25rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field-hint {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.field-error {
  font-size: 0.84rem;
  color: var(--flame);
  min-height: 0;
  display: none;
}

.field-error[data-shown] {
  display: block;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
}

.check input {
  appearance: none;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.check input::after {
  content: '';
  width: 0.3rem;
  height: 0.55rem;
  border-left: 2.5px solid #14091f;
  border-bottom: 2.5px solid #14091f;
  rotate: -45deg;
  translate: 0 -10%;
  scale: 0;
  transition: scale 0.15s ease;
}

.check input:checked {
  background: var(--violet-bright);
  border-color: var(--violet-bright);
}

.check input:checked::after {
  scale: 1;
}

/* --------------------------------------------------------------- survey foot */

.survey-foot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 1.2rem;
}

.survey-submit {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.form-note {
  font-size: 0.84rem;
  color: var(--text-dim);
}

.form-status {
  font-size: 0.92rem;
  font-weight: 550;
  display: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

.form-status[data-state='pending'] {
  display: block;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.form-status[data-state='ok'] {
  display: block;
  color: var(--mint);
  background: color-mix(in oklab, var(--mint) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--mint) 35%, transparent);
}

.form-status[data-state='error'] {
  display: block;
  color: var(--flame);
  background: color-mix(in oklab, var(--flame) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--flame) 35%, transparent);
}

.notice {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.notice-warn {
  background: color-mix(in oklab, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--amber) 32%, transparent);
  color: var(--text-muted);
}

/* --------------------------------------------------------------- signup */

.section-signup {
  border-top: 1px solid var(--border);
}

.signup-card {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--surface), transparent);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) + 6px);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  position: relative;
  overflow: hidden;
}

.signup-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}

@media (min-width: 900px) {
  .signup-card {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.signup-copy h2 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem);
  margin-bottom: 0.85rem;
}

.signup-copy > p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.perk-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.perk-list li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.6rem;
}

.perk-list li::before {
  content: '✓';
  color: var(--mint);
  font-weight: 700;
}

.signup-form {
  display: grid;
  gap: 1.05rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.signup-form .check + .field-error {
  margin-top: -0.6rem;
}

/* --------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  margin-top: auto;
}

.footer-inner {
  display: grid;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.footer-brand p {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-top: 0.2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.footer-legal {
  color: var(--text-dim);
  font-size: 0.84rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .footer-links {
    justify-content: flex-end;
  }
  .footer-legal {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------ ultrawide */

@media (min-width: 1700px) {
  .shell {
    width: min(100% - var(--gutter) * 2, var(--shell-wide));
  }
  .split {
    grid-template-columns: minmax(0, 1fr) 23rem;
  }
}

/* --------------------------------------------------------- large screens */

@media (min-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}