* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body.want-home { margin: 0; min-width: 320px; background: var(--surface-app); color: var(--text-primary); }
body.want-home { font-family: var(--font-body); }
button, textarea, select { font: inherit; }
button, .want-today__continue, .want-card__link-button { display: inline-flex; min-height: var(--size-12); align-items: center; justify-content: center; padding: 0 var(--space-5); border: 1px solid var(--color-black); border-radius: var(--radius-full); background: var(--color-black); color: var(--color-white); font-weight: var(--font-bold); text-decoration: none; cursor: pointer; }
button:disabled { cursor: wait; opacity: var(--btn-disabled-opacity); }

.want-home__topbar { position: fixed; z-index: var(--z-sticky); top: 0; right: 0; left: 0; display: flex; min-height: var(--size-16); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid transparent; background: var(--surface-app); }
.want-home.is-building .want-home__topbar { border-bottom-color: var(--border-subtle); }
.want-home__brand { display: inline-flex; visibility: hidden; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); opacity: 0; text-decoration: none; text-transform: uppercase; transform: translateY(var(--space-2)); transition: opacity var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); pointer-events: none; }
.want-home.is-building .want-home__brand { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.want-home__brand img { width: var(--size-10); height: var(--size-10); }
.want-home__login { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; }

.want-home.is-building .want-home.has-member-rail 
.want-member-rail { position: fixed; z-index: var(--z-rail); top: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; transform: translateX(calc(var(--boh-rail-width) * -1)); transition: opacity var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); }
.want-member-rail.is-rail-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.want-member-rail .boh-rail { position: relative; top: 0; }
.want-member-rail .boh-rail__item--house { opacity: 1; transform: scale(1); transition: opacity var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); }
.want-member-rail:not(.is-house-entered) .boh-rail__item--house { opacity: 0; pointer-events: none; transform: scale(.72); }
.want-member-rail .boh-rail__bottom { opacity: 1; transform: translateY(0); transition: opacity var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); }
.want-member-rail:not(.is-chrome-visible) .boh-rail__bottom { opacity: 0; pointer-events: none; transform: translateY(var(--space-3)); }

.want-home__main { width: min(100%, var(--main-max-width)); margin: 0 auto; padding: var(--size-16) var(--space-5) var(--space-10); transition: padding var(--duration-normal); }

.want-threshold { display: grid; min-height: calc(100svh - var(--size-16)); max-width: var(--feed-card-max-width); align-content: center; justify-items: center; margin: 0 auto; text-align: center; }
.want-home.is-building .want-threshold { min-height: auto; justify-items: stretch; margin-bottom: var(--space-4); text-align: left; }
.want-threshold__lockup { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); letter-spacing: 0; }
.want-threshold__mark { display: grid; width: var(--size-12); height: var(--size-12); place-items: center; border-radius: var(--radius-full); background: var(--accent-primary); }
.want-threshold__mark img { width: var(--size-8); height: var(--size-8); }
.want-home.is-building .want-threshold__lockup, .want-home.is-building .want-threshold__form { display: none; }
.want-threshold h1 { max-width: var(--auth-card-max-width); margin: 0 0 var(--space-6); font-family: var(--font-heading); font-size: var(--text-4xl); letter-spacing: 0; line-height: var(--leading-tight); }
.want-home.is-building .want-threshold h1 { margin-bottom: 0; }
.want-threshold__form, .want-dump-form, .want-question-form { display: grid; width: 100%; gap: var(--space-3); text-align: left; }
.want-threshold__form label { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
textarea, select { width: 100%; min-width: 0; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; background: var(--surface-primary); color: var(--text-primary); }
textarea:focus, select:focus { border-color: var(--accent-primary); }

.want-loader { display: grid; max-width: var(--feed-card-max-width); justify-items: center; gap: var(--space-3); margin: var(--space-8) auto; color: var(--text-primary); }
.want-loader__ring { position: relative; width: calc(var(--size-16) + var(--space-3)); height: calc(var(--size-16) + var(--space-3)); }
.want-loader__ring::before { content: ""; position: absolute; inset: 0; border: calc(var(--space-1) - var(--space-1) / 4) solid color-mix(in srgb, var(--text-primary) 12%, transparent); border-top-color: var(--accent-primary); border-radius: var(--radius-full); animation: want-spin calc(var(--duration-slow) * 2 + var(--duration-normal)) linear infinite; }
.want-loader__glyph { position: absolute; top: 50%; left: 50%; width: var(--size-10); height: var(--size-10); border-radius: var(--radius-md); transform: translate(-50%, -50%); }
.want-loader__label { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; text-transform: uppercase; }

.want-story { display: grid; max-width: var(--feed-card-max-width); gap: var(--space-4); margin: 0 auto; }
.want-card, .want-today { padding: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); box-shadow: var(--shadow-drop); }
.want-card[data-reveal-card] { clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%)); filter: blur(var(--space-1)); }
.want-card[data-reveal-card].is-visible { clip-path: circle(var(--reveal-radius) at var(--reveal-x, 50%) var(--reveal-y, 50%)); filter: blur(0); transition: clip-path var(--reveal-duration-open) var(--reveal-easing-open), filter var(--reveal-duration-open) var(--reveal-easing-open); }
.want-card--statement { background: var(--color-black); color: var(--color-white); }
.want-card--invitation,
.want-card--question,
.want-card--ahha,
.want-card--failure,
.want-card--quest,
.want-card--registration,
.want-card--odds-correction,
.want-card--house,
.want-card--passport,
.want-card--locked-in,
.want-card--shadow-result { position: relative; padding-top: calc(var(--space-6) + var(--space-3)); }
.want-card--shadow { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-secondary); }
.want-card h2, .want-today h2 { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); }
.want-card p { line-height: var(--leading-relaxed); }
.want-card__eyebrow { margin: 0 0 var(--space-2); color: var(--accent-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.want-card--statement .want-card__eyebrow { color: var(--highlight-yellow); }
.want-card__quote { margin: 0; font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; }
.want-card--invitation .want-card__body,
.want-card--question .want-card__body,
.want-card--ahha .want-card__body,
.want-card--failure .want-card__body,
.want-card--quest .want-card__body,
.want-card--registration .want-card__body,
.want-card--odds-correction .want-card__body,
.want-card--house .want-card__body,
.want-card--passport .want-card__body,
.want-card--locked-in .want-card__body,
.want-card--shadow-result .want-card__body { display: grid; gap: var(--space-3); }
.want-card--invitation h2,
.want-card--invitation p,
.want-card--question h2,
.want-card--question p,
.want-card--ahha h2,
.want-card--ahha p,
.want-card--failure h2,
.want-card--failure p,
.want-card--quest h2,
.want-card--quest p,
.want-card--registration h2,
.want-card--registration p,
.want-card--odds-correction h2,
.want-card--odds-correction p,
.want-card--house h2,
.want-card--house p,
.want-card--passport h2,
.want-card--passport p,
.want-card--locked-in h2,
.want-card--locked-in p,
.want-card--shadow-result h2,
.want-card--shadow-result p { margin: 0; }
.want-card--invitation .want-card__quote { color: var(--text-primary); }
.want-card__pills { position: absolute; z-index: 2; top: calc((var(--space-3) + var(--space-1) / 4) * -1); right: var(--space-4); left: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); pointer-events: none; }
.want-card__maker,
.want-card__type { display: inline-flex; min-height: calc(var(--size-6) + var(--space-1)); align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.want-card__maker { padding-left: var(--space-1); border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--text-primary); }
.want-card__ident { width: calc(var(--size-4) - var(--space-1) / 4); height: calc(var(--size-4) - var(--space-1) / 4); flex: 0 0 auto; border-radius: var(--radius-full); background: var(--accent-tertiary); }
.want-card__type { background: var(--status-success); color: var(--color-white); }
.want-card__restated { color: var(--text-muted); font-size: var(--text-sm); }
.want-odds { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); }
.want-odds__label { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; text-transform: uppercase; }
.want-odds strong { color: var(--accent-primary); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1; }
.want-odds__delta { padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--status-success); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); }
.want-odds__delta--down { color: var(--status-error); }
.want-card--failure .want-card__type { background: var(--status-error); }
.want-card--registration .want-card__type { background: var(--accent-tertiary); }
.want-card--odds-correction .want-card__type { background: var(--accent-primary); }
.want-card--house .want-card__type { background: var(--accent-primary); }
.want-card--passport .want-card__type { background: var(--accent-primary); }
.want-card--locked-in .want-card__type { background: var(--status-success); }
.want-card__ask { font-weight: var(--font-bold); }
.want-ahha-choice { display: grid; gap: var(--space-2); }
.want-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.want-button--quiet { border-color: var(--border-default); background: var(--surface-primary); color: var(--text-primary); }
.want-card__link-button--quiet { border-color: var(--border-default); background: var(--surface-primary); color: var(--text-primary); }
.want-card__link-button:hover { color: var(--color-white); text-decoration: none; }
.want-card__link-button--quiet:hover { color: var(--text-primary); }
.want-card__aside, .want-today__note { color: var(--text-muted); font-size: var(--text-sm); }
.want-house-statusline { font-style: italic; }
.want-card__error { margin: 0; color: var(--status-error); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.want-card__loader-ring { position: relative; width: var(--size-10); height: var(--size-10); flex: 0 0 auto; }
.want-card__loader-ring::before { content: ""; position: absolute; inset: 0; border: calc(var(--space-1) - var(--space-1) / 4) solid color-mix(in srgb, var(--text-primary) 12%, transparent); border-top-color: var(--accent-primary); border-radius: var(--radius-full); animation: want-spin calc(var(--duration-slow) * 2 + var(--duration-normal)) linear infinite; }
.want-card__loader-glyph { position: absolute; top: 50%; left: 50%; width: var(--size-6); height: var(--size-6); border-radius: var(--radius-sm); transform: translate(-50%, -50%); }
@keyframes want-spin { to { transform: rotate(1turn); } }

.want-today { background: var(--surface-app); }
.want-today__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.want-today__head > span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--font-bold); }
.want-today__intro { color: var(--text-secondary); }
.want-today__list { display: grid; gap: var(--space-2); margin: var(--space-5) 0; padding: 0; list-style: none; }
.want-today__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-primary); }
.want-today__check { width: var(--size-5); height: var(--size-5); border: 1px solid var(--border-default); border-radius: var(--radius-full); }
.want-today__time { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.want-today__continue { width: 100%; }

.want-quest-steps { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.want-quest-step { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); }
.want-quest-step__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.want-quest-step__title { min-width: 0; color: var(--text-primary); font-weight: var(--font-bold); line-height: var(--leading-snug); }
.want-quest-step__owner,
.want-quest-step__tool,
.want-quest-step__opportunity { display: inline-flex; min-height: var(--size-7); align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.want-quest-step__owner--shadow { border-color: var(--accent-primary); color: var(--accent-primary); }
.want-quest-step__owner--you { border-color: var(--accent-tertiary); color: var(--accent-tertiary); }
.want-quest-step__plan { display: grid; gap: var(--space-3); padding-top: var(--space-2); color: var(--text-secondary); }
.want-quest-step__plan p { margin: 0; }
.want-quest-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.want-quest-step__actions button,
.want-quest-step__actions a { min-height: var(--size-10); padding-inline: var(--space-4); }
.want-quest-step__opportunity { border-color: var(--highlight-yellow); color: var(--text-primary); text-decoration: none; text-transform: none; }
.want-quest-step__opportunity:hover { color: var(--text-primary); text-decoration: none; }
.want-house-result { min-width: 0; overflow: hidden; }
.want-house-result .ds-result-card { max-width: 100%; margin: 0; }
.want-house-result .ds-result-card__bar { gap: var(--space-3); }
.want-house-actions { align-items: center; }
.want-passport-result { display: grid; min-width: 0; justify-items: center; overflow: hidden; }
.want-passport-result .ds-passport-card { max-width: 100%; }

@media (max-width: 640px) {
  .want-home__topbar { padding-inline: var(--space-3); }
  .want-home__brand span { display: none; }
        .want-threshold h1 { font-size: var(--text-3xl); }
  .want-card, .want-today { padding: var(--space-4); }
  .want-card--invitation,
  .want-card--question,
  .want-card--ahha,
  .want-card--failure,
  .want-card--quest,
  .want-card--registration,
  .want-card--odds-correction,
  .want-card--house,
  .want-card--passport,
  .want-card--locked-in,
  .want-card--shadow-result { padding-top: calc(var(--space-6) + var(--space-3)); }
  .want-card__pills { right: var(--space-3); left: var(--space-3); }
  .want-card__maker { max-width: calc(100% - var(--size-16) - var(--space-3)); font-size: calc(var(--text-xs) - 1px); }
  .want-card__type { flex: 0 0 auto; font-size: calc(var(--text-xs) - 1px); }
  .want-card__maker span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .want-card__actions button,
  .want-card__actions .want-card__link-button { width: 100%; }
  .want-house-result .ds-result-card__bar { align-items: stretch; }
  .want-quest-step__head { grid-template-columns: 1fr; }
  .want-quest-step__owner { justify-self: start; }
  .want-quest-step__actions button,
  .want-quest-step__actions a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .want-home__brand,
    .want-card[data-reveal-card],
  .want-card[data-reveal-card].is-visible { clip-path: none; }
  .want-card[data-reveal-card] { opacity: 0; filter: none; }
  .want-card[data-reveal-card].is-visible { opacity: 1; filter: none; }
  .want-loader__ring::before,
  .want-card__loader-ring::before { animation: none; }
}

/* Forming card: the next card sits blurred where it will live and sharpens into reality. */
.want-card--forming { pointer-events: none; }
.want-card--forming .want-forming__lines { display: grid; gap: var(--space-3); filter: blur(var(--space-1)); animation: want-forming-pulse calc(var(--duration-normal) * 4) var(--ease-default) infinite alternate; }
.want-card--forming .want-forming__lines span { display: block; height: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.want-card--forming .want-forming__lines span:nth-child(1) { width: 40%; }
.want-card--forming .want-forming__lines span:nth-child(2) { width: 90%; }
.want-card--forming .want-forming__lines span:nth-child(3) { width: 72%; }
@keyframes want-forming-pulse { from { opacity: 0.55; } to { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
  .want-card--forming .want-forming__lines { animation: none; filter: none; opacity: 0.7; }
}

/* answered card slides away; following cards slide up into place */
.want-card.is-dismissing { overflow: hidden; max-height: 0 !important; opacity: 0; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; transition: max-height var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default), padding var(--duration-normal) var(--ease-default), margin var(--duration-normal) var(--ease-default); }
@media (prefers-reduced-motion: reduce) { .want-card.is-dismissing { transition: none; } }

/* probability of success on every card */
.want-odds-chip { position: absolute; right: var(--space-4); bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); pointer-events: none; }
.want-odds-chip b { font-weight: var(--font-bold); color: var(--text-primary); }