/* /start — the threshold of the Book: the bare feed shell holding one question.
   Layout reserves the feed's rail column so the page can grow into the real feed.
   Proportions follow the Google homepage; the headline treatment mirrors the
   sorting landing hero (green highlight pills + soft serif). */

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

/* Standalone page: hide the viewport scrollbar, keep scrolling */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; }

.start-home { --start-motion-normal: 350ms; --start-motion-slow: 550ms; --start-motion-rail: 700ms; display: grid; grid-template-columns: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))) minmax(0, 1fr); overflow: clip; height: 100dvh; margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); }

.start-home__rail { position: fixed; z-index: var(--z-rail); inset: 0 auto 0 0; overflow: hidden; display: flex; width: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))); height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; align-items: center; gap: var(--space-2); padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-2) calc(env(safe-area-inset-bottom, 0px) + var(--space-3)); border-right: 1px solid var(--border-default); background: var(--surface-app); touch-action: pan-y; overscroll-behavior: contain; }
/* Steven 2026-08-10: the rail logo target sits in a FILLED yellow disc (the
   Toll Bench yellow) so the top bar reads as one black bar with a yellow-circled
   target. The .start-home__rail-about neighbor stays transparent -- leave it as
   is. The bookofhouses.com variant (.boh-home__mark) supplies its own green fill
   and is unaffected by this base rule. */
.start-home__mark { position: relative; z-index: 2; display: grid; place-items: center; width: var(--size-10); height: var(--size-10); border-radius: var(--radius-full); background: var(--color-yellow-400); color: var(--text-primary); }
.start-home__mark svg { width: var(--size-6); height: var(--size-6); }
.start-home__mark iconify-icon { font-size: var(--size-6); display: block; }
.start-home__rail-stack { position: relative; order: 2; flex: 1 1 auto; align-self: stretch; min-height: 0; margin-top: var(--space-3); }
.start-home__rail-brandline { position: absolute; left: 50%; top: 0; display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; transform-origin: 0 0; transform: rotate(90deg) translateY(-50%); }
.start-home__rail-eyebrow { color: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .12em; line-height: 1; }
.start-home__rail-spine { color: var(--slate); font-family: var(--font-serif); font-size: var(--size-6); font-weight: 500; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.start-home__rail-spine em { font-style: italic; }
/* Rail "?" glyph (Steven 2026-08-09): rides the END of the rotated
   Book of Houses spine so it sits right BELOW the "S", just past the
   text. It is the brandline's last flex child; counter-rotated -90deg so
   the glyph reads upright. Borderless purple accent, never green.
   Crosses to the old bookofhouses.com homepage. */
.start-home__rail-about { display: grid; place-items: center; width: var(--size-8); height: var(--size-8); background: transparent; color: var(--accent-tertiary); text-decoration: none; transform: rotate(-90deg); transition: background var(--start-motion-normal) ease, color var(--start-motion-normal) ease; }
.start-home__rail-about iconify-icon { display: block; font-size: var(--size-5); }
.start-home__rail-about:hover { background: var(--accent-tertiary-subtle); }
.start-home__rail-about:focus-visible { outline: 2px solid var(--accent-tertiary); outline-offset: 2px; }
.start-home__rail-orb { position: absolute; left: 0; top: calc(var(--orb-index) * (var(--boh-rail-control-size, var(--size-10)) + var(--space-2))); overflow: hidden; display: grid; place-items: center; width: var(--boh-rail-control-size, var(--size-10)); height: var(--boh-rail-control-size, var(--size-10)); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--color-black); box-shadow: var(--shadow-xs); opacity: 1; transform: translateY(0) scale(1); transition: transform var(--start-motion-rail) cubic-bezier(.16, .84, .24, 1), opacity var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease; transition-delay: calc(var(--orb-index) * 70ms); }
.start-home__rail-letter { display: grid; place-items: center; width: var(--size-6); height: var(--size-6); font-family: var(--lockup-font); font-size: var(--size-6); font-weight: 900; letter-spacing: 0; line-height: 1; opacity: 1; transition: opacity var(--start-motion-normal) ease; }
.start-home__rail-letter--of { font-family: var(--font-serif); font-style: italic; font-weight: 600; }

.start-home__page { grid-column: 2; display: flex; min-width: 0; flex-direction: column; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; scroll-padding-top: var(--size-16); }
.start-home__page::-webkit-scrollbar { display: none; width: 0; height: 0; }
.start-home__topbar { transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
/* Steven 2026-08-10: the Toll Bench top bar is always black with legible light contents. */
.market-topbar { display: flex; min-height: var(--size-16); align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-dark-700); background: var(--color-dark-900); }
.market-brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--text-inverse); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-extrabold, 800); line-height: 1; text-decoration: none; white-space: nowrap; }
.market-brand:hover { color: var(--color-yellow-400); }
.market-brand__icon { display: block; font-size: var(--size-6); }
.market-nav { display: flex; align-items: center; gap: var(--space-2); }
.market-nav__link { color: var(--text-inverse); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.market-nav__link:hover,
.market-nav__link[aria-current="page"] { text-decoration: underline; }
.market-nav__sep { color: var(--color-dark-500); font-size: var(--text-sm); line-height: 1; }
.market-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: var(--size-10); min-height: var(--size-10); padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--highlight-purple); color: var(--text-inverse); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.market-cta:hover { background: var(--accent-tertiary); color: var(--text-inverse); }
.market-cta__label--mobile { display: none; }
.market-menu-toggle { display: none; align-items: center; justify-content: center; width: var(--size-10); height: var(--size-10); padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-inverse); font-size: var(--size-6); cursor: pointer; }
.market-menu { display: none; }
.market-menu__link { display: block; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); text-decoration: none; }
.market-menu__link:last-child { border-bottom: 0; }
@media (max-width: 520px) {
  .market-topbar { gap: var(--space-3); padding-inline: var(--space-3); }
  .market-brand { font-size: var(--text-xl); }
  .market-nav { gap: var(--space-1); }
  .market-nav__link { font-size: var(--text-xs); }
}
@media (max-width: 390px) {
  .market-topbar { gap: var(--space-2); padding-inline: var(--space-2); }
  .market-brand { font-size: var(--text-lg); }
  .market-nav { gap: var(--space-1); }
}


.start-home__main { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); place-items: start center; padding: var(--space-5) var(--space-5) calc(var(--size-16) * 2 + var(--size-8)); }

.start-hero { position: relative; display: grid; width: 100%; min-width: 0; max-width: var(--feed-card-max-width); justify-items: start; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); text-align: left; transition: background var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease, padding var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1); }
.start-hero__eyebrow { margin: 0 0 var(--space-4); color: var(--slate); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }

.start-hero__headline { display: grid; justify-items: start; gap: var(--space-2); margin: 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--text-primary); font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
.start-hero__line { display: block; max-width: 100%; }
.start-hero__headline .hl { margin: 0; padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); line-height: 1.05; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-hero__headline .soft { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.start-hero__sub { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic; line-height: 1.4; color: var(--slate); font-weight: 400; transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }

.start-hero__entry { position: sticky; top: var(--space-2); z-index: calc(var(--z-topbar, 50) - 1); display: grid; width: 100%; justify-items: center; margin-top: var(--space-8); transition: transform var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1); }
.start-hero__entry::before { position: absolute; z-index: 0; inset: calc(var(--space-4) * -1) 0 auto; height: calc(var(--size-16) + var(--space-5)); content: ""; border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); opacity: 0; pointer-events: none; transform: translateY(34px) scale(.98); transition: height var(--start-motion-normal) cubic-bezier(.2, .8, .2, 1); }
.start-card__pills { position: absolute; z-index: 2; top: calc((var(--space-4) + 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); visibility: hidden; opacity: 0; pointer-events: none; filter: blur(12px); transform: translateY(var(--space-3)); }
.start-card__maker,
.start-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; }
.start-card__maker { min-width: 0; padding-left: var(--space-1); border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--text-primary); }
.start-card__maker > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-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); }
.start-card__type { flex: 0 0 auto; background: var(--accent-primary); color: var(--color-black); }
.start-card__write-word { display: inline-block; clip-path: inset(0 100% 0 0); }
.start-hero__form { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; width: 100%; justify-items: center; margin: 0; }
.start-hero__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; }
.start-hero__form input { width: 100%; min-width: 0; min-height: var(--size-12); padding: 0 var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; box-shadow: var(--shadow-sm); transition: border-color var(--start-motion-normal) ease, background var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease, font-size var(--start-motion-normal) ease, font-weight var(--start-motion-normal) ease; }
.start-hero__form input:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-drop); }
.start-card__want { display: none; min-width: 0; min-height: var(--size-12); justify-self: stretch; padding: var(--space-4) var(--space-6) 0; overflow-wrap: anywhere; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; font-style: italic; letter-spacing: 0; line-height: var(--leading-normal, 1.5); text-align: left; white-space: normal; }
.start-card__want .hl { padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Target glyph before the want (Steven 2026-08-03): inline at text start,
   inherits the title color and 1em size; quotes are gone on /start renders. */
.start-card__want-icon,
.start-wantcard__quote-icon { margin-right: var(--space-2); vertical-align: -0.1em; color: inherit; }
.start-card__odds { position: absolute; z-index: 2; top: var(--start-odds-top, calc(var(--size-12) + var(--space-3))); right: var(--space-6); left: var(--space-6); display: grid; visibility: hidden; justify-items: start; margin: 0; opacity: 0; transform: translateY(var(--space-4)); }
.start-card__odds-title { justify-self: stretch; max-width: none; margin: var(--space-2) 0 var(--space-1); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: 0; line-height: var(--leading-snug); text-align: left; }
.start-card__wave { --odds-inset: 50%; display: block; width: min(100%, 620px); height: var(--size-6); margin-top: var(--space-3); overflow: visible; clip-path: inset(0 var(--odds-inset) 0); transition: clip-path 27ms linear; }
/* One continuous green dashed line across the full width, no dots and no gray projection half -- Steven 2026-07-31. */
.start-card__wave path { fill: none; stroke: var(--accent-primary); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .023 .014; vector-effect: non-scaling-stroke; animation: start-wave-travel 1800ms linear infinite; }
.start-card__odds-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-card__odds-line { display: flex; flex: 1; min-width: 0; align-items: baseline; gap: var(--space-3); margin-top: 0; }
/* The step-to-step move sits at the right end of the odds row, just
   inside the Minimize button. */
.start-card__odds-move { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.start-card__odds-move[hidden] { display: none; }
.start-card__odds-move-arrow { display: none; width: var(--size-4); height: var(--size-4); }
.start-card__odds-move--up { color: var(--status-success); }
.start-card__odds-move--down { color: var(--status-error); }
/* Steven 2026-08-03: a flat number prints in the plain text color with no
   arrow. The indicator never disappears once a probability exists. */
.start-card__odds-move--flat { color: var(--text-primary); }
.start-card__odds-move--up .start-card__odds-move-arrow--up,
.start-card__odds-move--down .start-card__odds-move-arrow--down { display: inline-flex; }
.start-card__odds-about { color: var(--slate); font-size: var(--text-base); font-weight: var(--font-semibold); }
.start-card__odds-pill { display: inline-flex; align-items: baseline; padding: var(--space-1) var(--space-4); border-radius: var(--radius-lg); background: var(--accent-primary); color: var(--color-black); font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.start-card__quest-bar { display: none; overflow: hidden; justify-self: stretch; height: var(--space-2); margin-top: var(--space-4); border-radius: var(--radius-full); background: var(--surface-tertiary); }
.start-card__quest-bar-fill { display: block; width: 7%; height: 100%; border-radius: var(--radius-full); background: var(--accent-primary); transform-origin: left center; }
.start-home--odds-complete .start-card__quest-bar,
.start-home--odds-complete .start-card__wave { display: none; }
.start-card__trajectory { display: none; width: 100%; margin-top: var(--space-4); }
.start-home--odds-complete .start-card__trajectory:not([hidden]) { display: block; }
.start-card__trajectory-svg { display: block; width: 100%; height: auto; overflow: visible; }
.start-card__trajectory-grid line { stroke: var(--border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__trajectory-line { fill: none; stroke: var(--accent-primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The climb to the target, drawn apart from the projection so the projection
   can stay flat. Light gray and DOTTED — round caps plus a near-zero dash
   (0.001 12) is what makes dots instead of dashes; the two properties only
   work together. */
.start-card__trajectory-target-path { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.001 12; vector-effect: non-scaling-stroke; }
.start-card__trajectory-dot { fill: var(--accent-primary); stroke: var(--surface-primary); stroke-width: 4; vector-effect: non-scaling-stroke; cursor: help; }
/* The current probability is the anchor of the chart: biggest dot, widest
   collar so it separates from the green line running into it. */
.start-card__trajectory-dot--current { stroke-width: 5; }
/* Projections stay legible but recessive — a thin hollow ring, never heavier
   than the taken steps. */
.start-card__trajectory-dot:focus { outline: none; stroke: var(--text-primary); }
.start-card__trajectory-step-label { fill: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-base); text-anchor: middle; }
.start-card__trajectory-step-label--complete { fill: var(--text-primary); font-weight: var(--font-bold); }
.start-card__trajectory-value { fill: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); text-anchor: middle; }
.start-card__trajectory-value--current { text-anchor: start; }
.start-card__trajectory-goal { fill: var(--text-muted); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-bold); text-anchor: end; }
.start-card__trajectory-target { fill: var(--text-muted); font-size: var(--text-xl); text-anchor: middle; dominant-baseline: central; }
.start-card__trajectory-scale-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.start-card__trajectory-scale-line { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__trajectory-scale-arrow { fill: var(--text-muted); stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.start-card__inline-cta { margin-top: var(--space-3); }
.start-card__inline-cta[hidden] { display: none; }
.start-card__compact-next { display: none; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-sm); }
.start-card__compact-next strong { color: var(--accent-tertiary); }
/* The next step reads under the chart in the expanded state too, the way the
   logged-in primary-want card always shows what is coming next. */
.start-home--odds-complete .start-card__compact-next { display: flex; flex-wrap: wrap; }

/* --------------------------------------------------------
   Start-card fold (Steven 2026-07-31)
   .start-hero__entry--min is the class on the CLONE that
   the fold script builds and pins to <body> as
   position:fixed.  The real .start-hero__entry never moves.
   Mirroring the /feed primary-want-card fold pattern exactly.
   -------------------------------------------------------- */
.start-hero__entry--min {
  position: fixed;
  top: 0;
  z-index: calc(var(--z-topbar, 50) - 1);
  overflow: hidden;
  padding: var(--space-3) var(--space-6) var(--space-3);
  background: var(--feed-card-bg);
  border-bottom: var(--feed-card-border);
  box-shadow: var(--feed-card-shadow);
  animation: start-card-fold-drop 240ms ease;
  /* Reset any transforms from .start-home--future that survive on the clone.
     !important is required: .start-home--future .start-hero__entry has specificity
     (0,2,0) which outranks (0,1,0) here without it -- the folded bar renders
     ~297px above the viewport. Consistent with other !important overrides on
     .start-hero__entry--min children in this file. */
  transform: none !important;
  transition: none;
  margin: 0;
}
.start-hero__entry--min::before { display: none; }
@keyframes start-card-fold-drop {
  from { transform: translateY(calc(-100% - var(--space-4))); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* In the folded bar / docked card: show want text, probability pill, compact-next.
   Hide everything else that makes the card tall.
   --min  = the body-hung fixed clone (scroll mechanic, pre-budget-click)
   --docked = the real sticky card after visitor clicks "Choose your budget" */
.start-hero__entry--min .start-card__pills,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__pills { display: none; }
.start-hero__entry--min .start-hero__form label,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-hero__form label { display: none; }
.start-hero__entry--min input[data-start-want],
.start-hero__entry--docked:not(.start-hero__entry--expanded) input[data-start-want] { display: none; }
.start-hero__entry--min .start-hero__actions,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-hero__actions { display: none; }
.start-hero__entry--min .start-card__trajectory,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__trajectory { display: none !important; }
.start-hero__entry--min .start-card__wave,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__wave { display: none; }
.start-hero__entry--min .start-card__quest-bar,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__quest-bar { display: none; }
.start-hero__entry--min .start-card__odds-label,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-label { display: none !important; }
.start-hero__entry--min .start-card__odds-note,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-note { display: none !important; }
.start-hero__entry--min .start-card__odds-mission,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-mission { display: none !important; }
.start-hero__entry--min .start-card__inline-cta,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__inline-cta { display: none; }
.start-hero__entry--min .start-card__odds-result,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__odds-result { display: none; }
.start-hero__entry--min .start-card__crisis,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__crisis { display: none; }
.start-hero__entry--min .start-card__retry,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__retry { display: none; }
.start-hero__entry--min .start-why,
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-why { display: none; }
/* Keep the odds head (pill + probability of success label) visible. */
.start-hero__entry--min .start-card__odds,
.start-hero__entry--docked .start-card__odds {
  position: static;
  /* The form is justify-items:center; a static shrink-wrapped grid item gets
     centered, pushing the odds/next-step rows off the card's left line
     (Steven 2026-08-03). Stretch so rows share the face content edge. */
  justify-self: stretch;
  visibility: visible;
  opacity: 1;
  transform: none;
  margin-top: var(--space-2);
}
/* The compact-next (next step) row stays visible; caret floats right. */
.start-hero__entry--min .start-card__compact-next,
.start-hero__entry--docked .start-card__compact-next {
  display: flex;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}
/* One shared left line (Steven 2026-08-03). In docked/min mode the face (or
   --min bar) already pads --space-6, so the quote's own --space-6 padding --
   which exists to line up with the input's rounded-pill inset pre-dock --
   doubles the indent. And the absolute pills row kept its pre-dock --space-4
   inset, landing 8px left of the content edge. */
.start-hero__entry--min .start-card__want,
.start-hero__entry--docked .start-card__want {
  padding-right: 0;
  padding-left: 0;
}
.start-hero__entry--docked .start-card__pills {
  right: var(--space-6);
  left: var(--space-6);
}
/* Chevron button: hidden until docked, shown inside the docked card.
   Floats below the compact-next row. The --expanded modifier flips the icon. */
.start-card__dock-toggle { display: none; }
.start-hero__entry--docked .start-card__dock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-8);
  height: var(--size-8);
  margin-top: var(--space-2);
  justify-self: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--start-motion-normal) ease, color var(--start-motion-normal) ease;
}
.start-hero__entry--docked .start-card__dock-toggle:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}
.start-hero__entry--docked .start-card__dock-toggle iconify-icon {
  width: var(--size-4);
  height: var(--size-4);
  transition: transform var(--start-motion-normal) ease;
}
.start-hero__entry--docked.start-hero__entry--expanded .start-card__dock-toggle iconify-icon {
  transform: rotate(180deg);
}
/* Docked state: the stats panel also hides in compact mode */
.start-hero__entry--docked:not(.start-hero__entry--expanded) .start-card__stats { display: none; }
/* ── Docked: expansion pushes content below the card down in normal flow.
   (Steven ruling 2026-07-31)

   ROOT CAUSE: .start-point (the baseline intake) is position:absolute relative
   to .start-hero__entry. When the chevron expands the card, the odds block
   (now position:static) makes the entry taller in flow — but .start-point stays
   at its absolute top:--start-card-height coordinate and does not move.
   The trajectory chart was occupying that space, so the two overlapped.

   FIX: In docked state, switch .start-point and .start-story to position:relative
   so they live in normal document flow after the card content. The sticky entry
   expands its in-flow height when expanded (trajectory + notes visible), and
   .start-point flows naturally below the full card height.

   The ::before card chrome (position:absolute, height:--start-card-height) would
   overlap .start-point once it is in flow, so in docked mode we suppress ::before
   and give the entry its own surface styling directly — matching the visual style
   of .start-hero__entry--min (the pre-docked scroll clone).

   SCOPE: every selector is prefixed with --docked. No pre-docked state is touched. */

/* Card surface: own background replaces the ::before chrome in docked mode.
   The compact-face wrapper covers only the want/odds content, not the baseline
   question card (.start-point) that follows it — so only the face has borders.
   display:contents in the base rule makes the face transparent to layout in
   non-docked mode; it becomes display:block here to form the visible card. */
.start-card__compact-face { display: contents; }
.start-hero__entry--docked .start-card__compact-face {
  display: block;
  /* The entry grid is justify-items:center, so this block face (width:auto)
     shrink-wraps to fit-content -- a SHORT want quote rendered the docked card
     visibly narrower than the stack. The docked card must match the stack
     card width (Steven 2026-08-03). */
  width: 100%;
  padding: var(--space-3) var(--space-6) var(--space-4);
  background: var(--feed-card-bg);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  box-shadow: var(--feed-card-shadow);
}
/* In docked mode the face owns the card chrome; entry needs no surface of its own. */
.start-hero__entry--docked {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Suppress the ::before card chrome — the compact-face owns its surface now. */
.start-hero__entry--docked::before { display: none; }

/* Docked: the compact-face owns the card surface at the entry's own top edge
   (the ::before chrome that sat 16px proud is suppressed), which left the pill
   row floating fully above the card with a gap. Re-anchor it so the pills
   straddle the card's top edge -- half above, half on the paper -- matching
   the feed-card pill straddle. Offset = half the pill min-height. */
.start-hero__entry--docked .start-card__pills { top: calc((var(--size-6) + var(--space-1)) / -2); }

/* Bring the baseline intake (.start-point) into normal document flow.
   In compact docked mode: intake appears directly below the compact card.
   In expanded docked mode: intake appears below the full expanded card.
   position:absolute is removed; margin-top provides the gap. */
.start-hero__entry--docked .start-point,
.start-hero__entry--docked .start-story {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  margin-top: var(--space-6);
  /* Visibility is controlled by .start-home--point / --story state classes
     on the root, which this does not override. */
}
/* The top:auto above loses to two later flow rules that print a top offset
   with higher or equal specificity:
   .start-home--future.start-home--point .start-point (0,3,0) and
   .start-home--retry-allowed .start-point (0,2,0, later in file).
   On this now position:relative box, that top offset shifts the baseline card
   DOWN visually without affecting layout, leaving ~250px of dead background
   between the docked card and the baseline card. Outrank both so the card
   lands directly below the docked card at margin-top spacing. */
.start-home--future.start-home--point .start-hero__entry--docked .start-point,
.start-home--retry-allowed .start-hero__entry--docked .start-point,
.start-home--future.start-home--point .start-hero__entry--docked .start-story,
.start-home--retry-allowed .start-hero__entry--docked .start-story {
  top: auto;
}

/* In expanded docked: .start-why is hidden in compact (display:none above);
   if it is re-shown it must also flow in document order, not overlap. */
.start-hero__entry--docked.start-hero__entry--expanded .start-why {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  margin-top: var(--space-4);
  /* animation from .start-home--future still fires; leave visibility/opacity
     to that rule so the reveal transition is unchanged. */
}




/* ── The Toll Bench bar paints OVER the card; Minimize pins the card UNDER it.
   (Steven 2026-07-30) Two separate faults were in play.
   (1) .start-home__topbar was position:static, and a z-index on a static box
   does nothing at all, so the bar could never outrank anything. Meanwhile
   .start-hero__entry is positioned WITH a z-index, so it opens its own stacking
   context that beat the bar every time -- and --future pushed it to 401, above
   even the .start-prompts modal. The bar now sticks at --z-topbar and the card
   sits exactly one below it, which is the same contract .feed-primary-want--min
   already uses on /feed.
   (2) Minimize only collapsed the card in place: measured on staging, at
   scrollTop 600 the card's top was -229, i.e. it scrolled clean off. It now
   pins under the bar the way the feed card does.
   SCOPE / the /wants overlay: every rule below is keyed on body.start-home.
   The "Post a want" overlay injects this same markup as a partial -- it renders
   no topbar, puts the start-home--* state classes on a <div class="start-home">,
   and its <body> is "wants-page-body drawer-layout". So none of these can match
   there, and nothing can escape the overlay to pin itself over /wants.
   The bar rule now ALSO covers .toll-bench and .for-agents (fix #2,
   2026-08-07 mobile pass): those pages had no sticky rule and the topbar
   scrolled away on phones. Extended to all body.start-home public pages. */
body.start-home .start-home__topbar { position: sticky; top: 0; z-index: var(--z-topbar, 50); background: var(--color-dark-900); }  /* Steven 2026-08-10: the Toll Bench top bar is always black. */
/* Park the docked card clear of the sticky topbar: bar height (--size-16 = 64px)
   + pill overhang (--space-4 + --space-3 + --space-1/4 ≈ 29px) + breathing room (--space-2).
   Only /start carries .start-hero__entry, so this stays scoped away from toll-bench/for-agents. */
body.start-home:not(.toll-bench):not(.for-agents) .start-hero__entry { top: calc(var(--size-16) + var(--space-4) + var(--space-3) + var(--space-2)); }
.start-card__stats { display: none; }
.start-home--odds-complete .start-card__stats { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); justify-self: stretch; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-secondary); animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) both; }
.start-card__stat { display: grid; gap: var(--space-1); }
.start-card__stat-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.start-card__stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); }
.start-card__stat--goal { text-align: right; }
.start-card__stat--goal .start-card__stat-label,
.start-card__stat--goal .start-card__stat-value { color: var(--accent-dark, var(--accent-primary)); }
.start-card__stats-bar { grid-column: 1 / -1; position: relative; height: var(--space-1); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-default); }
.start-card__stats-dot { position: absolute; top: 50%; left: 1%; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--accent-primary); transform: translate(-50%, -50%); transition: left var(--start-motion-normal) ease; }
.start-card__stats-cap { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.start-card__stats-cap--right { text-align: right; }
.start-card__odds-label { display: none; justify-self: stretch; margin: var(--space-4) 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.start-home--odds-complete .start-card__odds-label:not([hidden]) { display: block; }
.start-home--future .start-card__odds-label:not([hidden]) { display: block; }
.start-home--odds-complete .start-card__quest-bar-fill { animation: start-quest-bar-begin 900ms cubic-bezier(.2, .8, .2, 1) 350ms both; }
.start-card__odds-note { display: none; justify-self: stretch; max-width: none; margin: var(--space-4) 0 0; color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); font-style: italic; line-height: var(--leading-relaxed); text-align: left; }
.start-home--odds-complete .start-card__odds-label:not([hidden]) + .start-card__odds-note { margin-top: 0; }
.start-home--future .start-card__odds-label:not([hidden]) + .start-card__odds-note { margin-top: 0; }
.start-home--future .start-card__odds-note { display: block; }
.start-home--odds-complete .start-card__odds-note { display: block; animation: start-result-slide-in var(--start-motion-normal) ease 120ms both; }
.start-home--odds-complete .start-card__odds-note--wait { display: none; }
/* Reserve space for the reason paragraph so the layout does not jump when
   partial streaming delivers the number before the reason arrives.
   The typical reason is 2-4 lines at --text-base with --leading-relaxed. */
.start-home--odds-complete .start-card__odds-note { min-height: calc(var(--text-base) * var(--leading-relaxed, 1.625) * 3); }
.start-card__odds-mission { display: none; justify-self: stretch; max-width: none; gap: var(--space-2); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading-relaxed); text-align: left; }
.start-card__odds-mission iconify-icon { flex: none; width: var(--size-4); height: var(--size-4); color: var(--accent-tertiary); }
.start-home--odds-complete .start-card__odds-mission { display: flex; animation: start-result-slide-in var(--start-motion-normal) ease 240ms both; }
.start-card__odds-mission .hl { padding: 2px var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-card__odds-result { justify-self: stretch; max-width: none; margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); text-align: left; animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) both; }
.start-card__odds-result strong { color: var(--text-primary); font-weight: var(--font-bold); }
.start-card__crisis { display: grid; justify-self: stretch; max-width: var(--auth-card-max-width); justify-items: start; gap: var(--space-3); margin: var(--space-4) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); text-align: left; }
.start-card__crisis[hidden] { display: none; }
.start-card__crisis p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-card__crisis p strong { color: var(--text-primary); }
.start-card__crisis-call { background: var(--color-black); color: var(--text-inverse); }
.start-card__crisis-call iconify-icon { width: var(--size-5); height: var(--size-5); }
.start-home .instructional-card__cta { transition: background-color var(--start-motion-normal) ease, border-color var(--start-motion-normal) ease, color var(--start-motion-normal) ease; }
.start-home .instructional-card__cta:hover,
.start-home .instructional-card__cta:focus-visible,
.start-home .instructional-card__cta:active { border-color: var(--color-black); background: var(--color-black); color: var(--text-inverse); transform: none; }
.start-why { position: absolute; z-index: 1; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transition: top var(--start-motion-normal) ease; }
.start-home--future .start-why { visibility: visible; animation: start-result-slide-in var(--start-motion-normal) ease 240ms both; }
.start-why--dismissed { display: none; }
.start-why__pills { position: absolute; top: calc((var(--space-3) + var(--space-1) / 4) * -1); left: var(--space-4); display: flex; }
.start-why__title { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-tight); }
.start-why__title .hl { padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); }
.start-why__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.start-why__body { overflow: hidden; position: relative; max-height: calc(var(--size-32) * 2); margin-top: var(--space-3); }
.start-why__body::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: var(--size-16); background: linear-gradient(180deg, transparent, var(--feed-card-bg)); }
.start-why--expanded .start-why__body { max-height: none; }
.start-why--expanded .start-why__body::after { content: none; }
.start-why--expanded .start-why__more { display: none; }
.start-why__body p { margin: 0 0 var(--space-3); color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-why__tools { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.start-why__tools li { color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-why__more { margin-top: var(--space-1); padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: underline; cursor: pointer; }
.start-why__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.start-why__got-it { min-height: var(--size-10); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full); background: var(--accent-tertiary); color: var(--color-white); font: inherit; font-weight: var(--font-bold); cursor: pointer; }
.start-why__skip { padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; }

.start-point { position: absolute; z-index: 1; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transition: top var(--start-motion-normal) ease; }
.start-home--point .start-point { visibility: visible; animation: start-result-slide-in var(--start-motion-slow) cubic-bezier(.2, .8, .2, 1) 120ms both; }
.start-home--future.start-home--point .start-point { top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6) + var(--start-why-offset, 0px)); }
.start-point__eyebrow { display: inline-flex; align-items: center; margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .14em; text-transform: uppercase; }
.start-point__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-point__count { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.start-point__title .hl-underline { text-decoration: underline; text-decoration-color: var(--highlight-yellow); text-decoration-thickness: var(--space-2); text-underline-offset: calc(-1 * var(--space-1)); text-decoration-skip-ink: none; }
.start-point__sub { margin: var(--space-2) 0 0; color: var(--text-secondary); font-family: var(--font-serif); font-style: italic; font-size: var(--text-base); }
.start-point__steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.start-point__step { position: relative; display: flex; gap: var(--space-3); }
.start-point__step:not(:last-child)::before { content: ""; position: absolute; top: var(--size-8); left: calc(var(--size-8) / 2); height: calc(100% - var(--size-8) + var(--space-4)); border-left: 1px solid var(--border-default); }
.start-point__step-num { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-8); height: var(--size-8); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-point__step--done .start-point__step-num { border-color: transparent; background: var(--accent-primary); color: var(--color-black); }
.start-point__step--next .start-point__step-num { border-color: transparent; background: var(--slate); color: var(--color-white); }
.start-point__step-body { min-width: 0; flex: 1; }
.start-point__step-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-bold); }
.start-point__step-chip { margin-left: auto; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
/* .start-point__step-optional retired 2026-07-26: "Build your baseline" now holds
   the pledge and the card read-back, so the step is not skippable and nothing on
   the page carries an Optional chip any more. */
.start-point__step-desc { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-point__cta--go { border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); }
.start-point__title { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-snug); }
.start-point__title .hl { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-point__intro { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.start-point__list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.start-point__list li { color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-relaxed); }
.start-point__list li::marker { color: var(--accent-tertiary); }
.start-point__note { margin: var(--space-4) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
/* Flow buttons wear the design-system button tokens (ds-btn--primary / ds-btn--secondary). */
.start-point__cta { display: block; width: 100%; min-height: var(--size-12); margin-top: var(--space-3); padding: var(--btn-padding); border: 1px solid var(--btn-primary-border); border-radius: var(--btn-radius); background: var(--btn-primary-bg); color: var(--btn-primary-color); font-family: var(--btn-font); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); cursor: pointer; transition: var(--btn-transition); }
.start-point__cta:hover { border-color: var(--btn-primary-bg-hover); background: var(--btn-primary-bg-hover); color: var(--btn-primary-color-hover); box-shadow: var(--btn-primary-glow); }
.start-point__nav { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-3); }
.start-point__nav .start-point__cta { flex: 1 1 auto; width: auto; margin-top: 0; }
.start-point__back { flex: 0 0 auto; min-height: var(--size-12); padding: var(--btn-padding); border: 1px solid var(--btn-secondary-border); border-radius: var(--btn-radius); background: var(--btn-secondary-bg); color: var(--btn-secondary-color); font-family: var(--btn-font); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); cursor: pointer; transition: var(--btn-transition); }
.start-point__back:hover { border-color: var(--btn-secondary-border-hover); background: var(--btn-secondary-bg-hover); }

.start-point__em { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.start-baseline__loading { margin: var(--space-4) 0 0; color: var(--text-secondary); font-size: var(--text-base); animation: start-solution-pulse 1200ms ease-in-out infinite alternate; }
.start-baseline__options { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.start-baseline__option { display: grid; gap: var(--space-1); justify-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--start-motion-normal) ease, box-shadow var(--start-motion-normal) ease; }
.start-baseline__option:hover, .start-baseline__option:focus-visible { border-color: var(--accent-tertiary); box-shadow: var(--shadow-xs); }
.start-baseline__option strong { font-size: var(--text-base); font-weight: var(--font-bold); }
.start-baseline__option span { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-baseline__chip { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--accent-tertiary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.start-baseline__option.is-selected, .start-baseline__fill.is-selected { border-color: var(--accent-primary); box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent-primary)); }
.start-cardback { display: grid; gap: var(--space-3); margin-top: var(--space-4); text-align: left; }
.start-cardback__row { display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-cardback__key { color: var(--text-primary); font-weight: 800; }
.start-cardback__val { color: var(--text-secondary); }
.start-baseline__skip { margin-top: var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }
.start-baseline__terms { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); font-style: italic; }
.start-baseline__agree { margin-top: var(--space-4); }
.start-baseline__agree:disabled { opacity: .4; cursor: default; }
.start-baseline__fill { display: grid; gap: var(--space-2); }
.start-baseline__fill input { min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); }
.start-baseline__fill input:focus { border-color: var(--accent-tertiary); }
.start-baseline__fill .start-point__cta { margin-top: 0; }
/* Steven 2026-07-30: the budget blank lives inside the BUDGETED tile. The tile
   turns into a plain box when it opens, so it stops being a hoverable choice
   and stretches its children instead of hugging them left. */
.start-baseline__option--open { cursor: default; justify-items: stretch; }
.start-baseline__option--open:hover { box-shadow: none; }
.start-baseline__nested { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.start-baseline__nested-label { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-baseline__nested input { min-height: var(--size-10); padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); }
.start-baseline__nested input:focus { border-color: var(--accent-tertiary); }
.start-wantcard__primary { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-green-50); }
.start-wantcard__primary-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); font-size: var(--text-base); }
.start-wantcard__primary-body strong { display: block; font-size: var(--text-base); font-weight: var(--font-bold); }
.start-wantcard__primary-body p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-baseline__quote { margin: var(--space-4) 0 0; color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; line-height: var(--leading-relaxed); }
.start-baseline__copy { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-baseline__steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.start-baseline__steps li::marker { color: var(--accent-tertiary); font-weight: var(--font-bold); }
.start-baseline__step-head { display: flex; align-items: center; gap: var(--space-2); }
.start-baseline__step-head strong { font-size: var(--text-base); }
.start-baseline__steps p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.start-point--dismissed { display: none; }

.start-home__footer { display: flex; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-8); }
.start-home__prompts-btn { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.start-prompts { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; padding: var(--space-4); background: var(--zine-modal-backdrop); }
.start-prompts[hidden] { display: none; }
.start-prompts__panel { overflow: auto; width: min(680px, 100%); max-height: 86dvh; padding: var(--space-5); border-radius: var(--feed-card-radius); background: var(--surface-primary); box-shadow: var(--shadow-drop); }
.start-prompts__head { display: flex; align-items: center; justify-content: space-between; }
.start-prompts__head strong { font-family: var(--font-heading); font-size: var(--text-base); }
.start-prompts__close { padding: 0 var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-2xl); line-height: 1; cursor: pointer; }
.start-prompts__map { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-relaxed); list-style: none; }
.start-prompts__map b { color: var(--text-primary); font-weight: var(--font-bold); }
.start-prompts__map span { color: var(--accent-tertiary); }
.start-prompts__stage { margin: var(--space-1) 0 0; color: var(--accent-tertiary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.start-prompts__item { margin-top: var(--space-5); }
.start-prompts__item h3 { margin: 0; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-bold); }
.start-prompts__item p { margin: var(--space-1) 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.start-prompts__item textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); resize: vertical; }
.start-prompts__item textarea:focus { border-color: var(--accent-tertiary); outline: 0; }
.start-prompts__row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.start-prompts__row span { margin-right: auto; color: var(--text-secondary); font-size: var(--text-xs); }
.start-prompts__row button { padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--color-black); color: var(--color-white); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }
.start-prompts__row .start-prompts__reset { border: 1px solid var(--border-default); background: none; color: var(--text-secondary); }

.start-card__retry { position: absolute; z-index: 3; top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-2)); right: 0; left: 0; display: flex; visibility: hidden; align-items: center; gap: var(--space-2); opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--start-motion-normal) ease, transform var(--start-motion-normal) ease; }
.start-card__retry label { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.start-card__retry input { min-width: 0; min-height: var(--size-10); flex: 1; padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); box-shadow: var(--shadow-xs); }
.start-card__retry input:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
.start-card__retry button { min-height: var(--size-10); flex: 0 0 auto; padding: 0 var(--space-4); border: 1px solid var(--color-black); border-radius: var(--radius-full); background: var(--color-black); color: var(--color-white); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; }

.start-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); transition: opacity var(--start-motion-normal) ease, filter var(--start-motion-slow) ease, transform var(--start-motion-slow) ease; }
.start-hero__btn { display: inline-flex; min-height: var(--size-10); align-items: center; justify-content: center; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-full); font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; cursor: pointer; }
.start-hero__btn--future { border-color: var(--accent-tertiary); background: var(--accent-tertiary); color: var(--color-white); }
.start-hero__btn--unsure { border-color: var(--color-black); background: var(--color-black); color: var(--color-white); }
.start-hero__btn:disabled { cursor: wait; opacity: var(--btn-disabled-opacity); }

.start-story { position: absolute; z-index: 2; top: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transform: translateY(var(--space-3)); }
.start-story__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; }
.start-card__ident--sterling { background: var(--accent-primary); }
.start-story__layout { display: grid; grid-template-columns: minmax(128px, 180px) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.start-story__portrait { overflow: hidden; min-height: 100%; margin: 0; border-radius: var(--radius-md); background: var(--surface-secondary); }
.start-story__portrait img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 24%; }
.start-story__body { display: grid; min-width: 0; align-content: start; }
.start-story__eyebrow { margin: var(--space-1) 0 var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-transform: uppercase; }
.start-story h2 { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: 0; line-height: var(--leading-tight); }
.start-story p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-story p + p { margin-top: var(--space-3); }
.start-story__form { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.start-story__form label { color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: 0; line-height: var(--leading-snug); }
.start-story__form textarea { width: 100%; min-height: var(--size-24); resize: vertical; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); line-height: var(--leading-relaxed); box-shadow: var(--shadow-xs); }
.start-story__form textarea:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
.start-story__status { min-height: var(--text-lg); color: var(--text-muted) !important; font-family: var(--font-mono); font-size: var(--text-xs) !important; font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug) !important; text-transform: uppercase; }
.start-story__form .instructional-card__cta { justify-self: start; border: 0; }
.start-story__form .instructional-card__cta:disabled { cursor: wait; opacity: var(--btn-disabled-opacity); }

.start-solution { position: absolute; z-index: 2; top: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); right: 0; left: 0; visibility: hidden; width: 100%; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); color: var(--text-primary); box-shadow: var(--feed-card-shadow); opacity: 0; text-align: left; transform: translateY(var(--space-3)); }
.start-solution__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; }
.start-solution__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.start-solution__odds { color: var(--accent-tertiary); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.start-solution__odds > span:last-child { color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.start-solution__status { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-align: right; text-transform: uppercase; }
.start-solution__status iconify-icon { width: var(--size-4); height: var(--size-4); flex: 0 0 auto; animation: start-working-spin 1200ms linear infinite; }
.start-home--quest-ready .start-solution__status iconify-icon,
.start-home--quest-error .start-solution__status iconify-icon { display: none; }
.start-solution h2 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: 0; line-height: var(--leading-tight); }
.start-solution__description { max-width: var(--auth-card-max-width); margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-solution__steps { display: grid; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.start-solution-step { display: grid; min-width: 0; grid-template-columns: var(--size-8) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.start-solution-step__check { display: grid; width: var(--size-8); height: var(--size-8); place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); cursor: pointer; }
.start-solution-step__check:hover,
.start-solution-step__check:focus-visible { background: var(--surface-secondary); color: var(--text-primary); }
.start-solution-step__check iconify-icon { width: var(--size-5); height: var(--size-5); }
.start-solution-step__body { min-width: 0; }
.start-solution-step__meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0; line-height: var(--leading-snug); text-transform: uppercase; }
.start-solution-step__meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-solution-step__owner { flex: 0 0 auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); }
.start-solution-step__owner--ai { background: var(--accent-primary); color: var(--color-black); }
.start-solution-step h3 { margin: var(--space-2) 0 0; font-family: var(--font-heading); font-size: var(--text-base); letter-spacing: 0; line-height: var(--leading-snug); }
.start-solution-step__body > p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-solution-step__tool { display: grid; grid-template-columns: var(--size-6) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-secondary); }
.start-solution-step__tool.is-required { border-color: var(--accent-tertiary); background: color-mix(in srgb, var(--accent-tertiary) 8%, var(--surface-primary)); }
.start-solution-step__tool > iconify-icon { width: var(--size-5); height: var(--size-5); color: var(--text-primary); }
.start-solution-step__tool > div { display: grid; min-width: 0; gap: var(--space-1); }
.start-solution-step__tool strong { color: var(--text-primary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.start-solution-step__tool span { font-size: var(--text-xs); line-height: var(--leading-snug); }
.start-solution-step__tool a { color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--font-bold); }
.start-solution-step.is-complete h3,
.start-solution-step.is-complete .start-solution-step__body > p { color: var(--text-muted); text-decoration: line-through; }
.start-solution-step.is-loading { min-height: var(--size-16); align-items: center; opacity: .5; animation: start-solution-pulse 1200ms ease-in-out infinite alternate; }
.start-solution-step.is-loading > span { grid-column: 1 / -1; width: 72%; height: var(--space-3); border-radius: var(--radius-sm); background: var(--border-default); }
.start-solution__tool-rule { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.start-solution__tool-rule iconify-icon { width: var(--size-4); height: var(--size-4); flex: 0 0 auto; margin-top: var(--space-1); }
.start-solution__continue { visibility: hidden; margin-top: var(--space-4); opacity: 0; }

.start-home--future .start-home__rail-orb { border-color: transparent; box-shadow: none; opacity: 0; transform: translateY(calc((var(--size-10) + var(--space-2) + var(--space-4) + (var(--orb-index) * (var(--boh-rail-control-size, var(--size-10)) + var(--space-2)))) * -1)) scale(.72); transition-delay: calc(var(--orb-reverse-index) * 70ms); }
.start-home--future .start-home__rail-letter { opacity: 0; }
.start-home--future .start-hero { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
.start-home--future.start-home--point .start-home__main { min-height: var(--start-flow-height, 100dvh); }
.start-home--future .start-hero__eyebrow { opacity: 0; filter: blur(14px); transform: translateY(calc(var(--space-3) * -1)); }
.start-home--future .start-hero__headline { opacity: 0; filter: blur(16px); transform: translateY(calc(var(--space-6) * -1)) scale(.96); }
.start-home--future .start-hero__sub { opacity: 0; filter: blur(14px); transform: translateY(calc(var(--space-3) * -1)) scale(.98); transition-delay: 80ms; }
.start-home--future .start-hero__entry { z-index: calc(var(--z-topbar, 50) - 1); transform: translateY(var(--start-entry-rise, clamp(-320px, -34vh, -180px))); transition-delay: 100ms; }
/* The mist is a fixed --z-modal sheet that covers the page for ~900ms after
   submit; the card has to ride above it for that moment and only that moment.
   Before this split the card kept 401 forever, which is why it painted over
   the Toll Bench bar (and over .start-prompts) for the rest of the session. */
.start-home--future.start-home--misting .start-hero__entry { z-index: calc(var(--z-modal) + 1); }
.start-home--future .start-hero__entry::before { height: var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)); animation: start-card-from-mist 500ms cubic-bezier(.2, .8, .2, 1) 120ms forwards; }
.start-home--future .start-card__pills { visibility: visible; animation: start-card-details-from-mist 400ms cubic-bezier(.2, .8, .2, 1) 180ms forwards; }
.start-home--future [data-sharpie-write] { visibility: visible; }
.start-home--future [data-sharpie-write] .start-card__write-word { animation: start-sharpie-write var(--write-duration) linear var(--write-delay) forwards; }
.start-home--future .start-card__odds { visibility: visible; animation: start-odds-panel-in 300ms cubic-bezier(.2, .8, .2, 1) 240ms forwards; }
.start-home--future .start-hero__actions { opacity: 0; pointer-events: none; filter: blur(16px); transform: translateY(var(--space-6)); transition-delay: 130ms; }
.start-home--future .start-hero__form input { display: none; }
.start-home--future .start-card__want { display: block; }
.start-home--odds-complete .start-card__wave { animation: none; }
.start-home--retry-allowed .start-card__retry { visibility: visible; opacity: 1; transform: translateY(0); }
/* Retry bar occupies the gap above the next card — push the followers down so it never overlaps. */
.start-home--retry-allowed .start-why,
.start-home--retry-allowed .start-point { top: calc(var(--start-card-height, calc(var(--size-32) * 2 + var(--size-24) * 2)) + var(--space-6) + var(--size-10) + var(--space-3)); }
.start-home--story-moving .start-hero__entry::before { animation: start-feed-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--story-moving .start-card__pills,
.start-home--story-moving .start-hero__form,
.start-home--story-moving .start-card__retry { animation: start-feed-content-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.start-home--story .start-story { visibility: visible; animation: start-feed-next-card-ready 160ms ease-out forwards; }
.start-home--story-moving .start-story { animation: start-feed-next-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--story-settled .start-hero__entry { transform: none; transition: none; }
.start-home--story-settled .start-story { position: relative; top: auto; right: auto; left: auto; grid-area: 1 / 1; visibility: visible; opacity: 1; transform: none; animation: none; }
.start-home--solution .start-solution { visibility: visible; animation: start-feed-next-card-ready 160ms ease-out forwards; }
.start-home--solution-moving .start-story { animation: start-feed-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.start-home--solution-moving .start-solution { animation: start-feed-next-card-up 1200ms cubic-bezier(.4, 0, .2, 1) forwards; }
.start-home--solution-settled .start-hero__entry { transform: none; transition: none; }
.start-home--solution-settled .start-story { position: absolute; visibility: hidden; pointer-events: none; }
.start-home--solution-settled .start-solution { position: relative; top: auto; right: auto; left: auto; grid-area: 1 / 1; visibility: visible; opacity: 1; transform: none; animation: none; }
.start-home--quest-ready .start-solution__continue,
.start-home--quest-error .start-solution__continue { visibility: visible; opacity: 1; }

.start-home__mist { display: none; position: fixed; inset: 0; z-index: var(--z-modal); overflow: hidden; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--surface-primary) 20%, transparent); transition: opacity 520ms ease; }
.start-home__mist::before,
.start-home__mist::after,
.start-home__mist-cloud { content: ""; position: absolute; width: 70vw; height: 42vh; border-radius: var(--radius-full); filter: blur(54px); opacity: 0; transform: scale(.6) translateY(25vh); }
.start-home__mist::before { left: -12vw; top: 24vh; background: color-mix(in srgb, var(--color-brightcyan-500) 24%, var(--surface-primary)); }
.start-home__mist::after { right: -18vw; top: 34vh; background: color-mix(in srgb, var(--accent-tertiary) 14%, var(--surface-primary)); }
.start-home__mist-cloud { left: 18vw; top: 32vh; background: var(--surface-primary); }
.start-home--misting .start-home__mist { display: block; opacity: 1; }
.start-home--misting .start-home__mist::before,
.start-home--misting .start-home__mist::after,
.start-home--misting .start-home__mist-cloud { animation: start-gather-mist 4400ms var(--ease-default) both; }
.start-home--misting .start-home__mist::after { animation-delay: 280ms; }
.start-home--misting .start-home__mist-cloud { animation-delay: 520ms; }

@keyframes start-gather-mist {
  0% { opacity: 0; transform: scale(.6) translateY(25vh); }
  42% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.45) translateY(-12vh); }
}

@keyframes start-card-from-mist {
  0% { opacity: 0; filter: blur(18px); transform: translateY(34px) scale(.98); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes start-card-details-from-mist {
  0% { opacity: 0; filter: blur(12px); transform: translateY(var(--space-3)); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-odds-panel-in {
  from { opacity: 0; transform: translateY(var(--space-4)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes start-result-slide-in {
  from { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes start-wave-travel {
  to { stroke-dashoffset: -.074; }
}

@keyframes start-wave-return-to-center {
  to { clip-path: inset(0 50% 0); opacity: 0; }
}

@keyframes start-wave-space-close {
  to { height: 0; margin-top: 0; }
}

@keyframes start-quest-bar-begin {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes start-odds-outline-wrap {
  to { stroke-dashoffset: 0; }
}

@keyframes start-feed-card-up {
  0% { opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-content-up {
  0% { visibility: visible; opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { visibility: hidden; opacity: 0; transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-next-card-ready {
  from { opacity: 0; filter: blur(8px); transform: translateY(var(--space-3)); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-feed-next-card-up {
  from { opacity: 1; filter: blur(0); transform: translateY(0); }
  to { opacity: 1; filter: blur(0); transform: translateY(calc(var(--start-card-height) * -1)); }
}

@keyframes start-feed-following-card-in {
  0% { opacity: 0; filter: blur(0); transform: translateY(var(--space-16)); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes start-working-spin {
  to { transform: rotate(360deg); }
}

@keyframes start-working-counterspin {
  to { transform: rotate(-360deg); }
}

@keyframes start-solution-pulse {
  to { opacity: .25; }
}

@keyframes start-sharpie-write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 767px) {
  .start-home__main { padding-right: 0; padding-left: 0; }
  .start-hero {
    width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
    max-width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
    margin-right: auto;
    margin-left: auto;
  }
  .market-nav { display: none; }
  .market-cta__label--desktop { display: none; }
  .market-cta__label--mobile { display: inline; }
  .market-menu-toggle { display: inline-flex; }
  .market-menu:not([hidden]) { display: block; border-bottom: 1px solid var(--border-default); padding: var(--space-1) var(--space-4) var(--space-2); }
}

@media (max-width: 640px) {
  .start-home__topbar { padding-inline: var(--space-3); }
  .start-home__rail-orb { width: var(--size-10); height: var(--size-10); top: calc(var(--orb-index) * (var(--size-10) + var(--space-1))); }
  .start-home__rail-letter { font-size: var(--size-6); }
  .start-card__maker,
  .start-card__type { font-size: calc(var(--text-xs) - 1px); }
  .start-card__odds { right: var(--space-4); left: var(--space-4); }
  .start-card__odds-title { font-size: var(--text-base); margin-top: var(--space-2); margin-bottom: var(--space-1); }
  .start-card__odds-pill { font-size: var(--text-3xl); }
  .start-card__odds-head { align-items: flex-start; }
  .start-card__odds-line { flex-wrap: wrap; gap: var(--space-2); }
  .start-card__odds-about { font-size: var(--text-sm); min-width: 0; }
  .start-card__odds-move { font-size: var(--text-lg); }
  .start-card__compact-next { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .start-story { padding: var(--feed-card-padding-mobile); }
  .start-story__layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .start-story__portrait { max-height: 220px; }
  .start-story__portrait img { min-height: 220px; object-position: 50% 20%; }
  .start-story h2 { font-size: var(--text-xl); }
  .start-story__form label { font-size: var(--text-base); }
  .start-solution { padding: var(--feed-card-padding-mobile); }
  .start-solution__header { align-items: flex-start; flex-direction: column; }
  .start-solution__status { justify-content: flex-start; text-align: left; }
  .start-solution h2 { font-size: var(--text-xl); }
  .start-hero__headline { font-size: var(--text-4xl); }
  .start-hero__sub { font-size: var(--text-lg); }
  .start-home--future:not(.start-home--story-settled):not(.start-home--solution-settled):not(.start-home--odds-compact) .start-hero__entry { transform: translateY(var(--start-entry-rise, clamp(-260px, -30vh, -150px))); }
  .start-solution-step__tool { grid-template-columns: var(--size-6) minmax(0, 1fr); }
  .start-solution-step__tool a { grid-column: 2; }
  .start-card__retry { right: var(--space-1); left: var(--space-1); }
}

/* ── Phone (<=430px): tight gutters, compact card padding, side-by-side buttons ──
   TWO-PATHS NOTE: strictly visual — no structural/DOM changes.
   (1) Outer gutters: reduce wants-page container padding so card sits ~8px from column edge.
   (2) Inner padding: step card down to feed-card-padding-mobile (space-4/space-5).
   (3) Buttons: force flex row, compact gap/padding so both fit in one line at 390px. */
@media (max-width: 430px) {
  /* (1) Tighten wants-page container when hosted inside the market_page shell */
  .start-home__main .wants-page { padding-inline: var(--space-2); }

  /* (2) Step card inner padding down one tier — space-5/space-8 → space-4/space-5 */
  .start-hero { padding: var(--feed-card-padding-mobile); }

  /* (3) Force the action buttons onto one row, compact gap/padding, both equal width */
  .start-hero__actions {
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .start-hero__btn {
    padding: 0 var(--space-3);
    white-space: nowrap;
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-home__topbar,
  .start-hero__headline,
  .start-hero__sub,
  .start-hero__actions,
  .start-hero__entry,
  .start-hero__form input,
  .start-home__rail-orb,
  .start-home__mist { transition-duration: 1ms; }
  .start-home--misting .start-home__mist::before,
  .start-home--misting .start-home__mist::after,
  .start-home--misting .start-home__mist-cloud,
  .start-home--future .start-hero__entry::before,
  .start-home--future .start-card__pills,
  .start-home--future .start-card__odds,
  .start-home--story-moving .start-card__pills,
  .start-home--story-moving .start-hero__form,
  .start-home--story-moving .start-card__retry,
  .start-home--story .start-story,
  .start-home--solution-moving .start-story,
  .start-home--solution .start-solution,
  .start-solution-step.is-loading { animation-duration: 1ms; }
  .start-home--future [data-sharpie-write] .start-card__write-word { clip-path: inset(0); animation: none; }
  .start-card__wave path,
  .start-solution__status iconify-icon { animation: none; }
  .start-home--odds-complete .start-card__wave { height: 0; margin-top: 0; clip-path: inset(0 50% 0); opacity: 0; animation: none; }
  .start-home--odds-complete .start-card__quest-bar,
  .start-home--odds-complete .start-card__quest-bar-fill,
  .start-home--odds-complete .start-card__odds-note,
  .start-home--future .start-why,
  .start-home--point .start-point { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Register-to-post card */
.start-register__row { display: grid; gap: var(--space-2); margin-top: var(--space-3); text-align: left; }
.start-register__label { font-size: var(--text-sm); font-weight: 700; }
.start-register__age-note { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.start-register__input { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-base); }
.start-register__phone { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.start-register__cc { width: var(--size-14); text-align: center; }
.start-register__alt { margin-top: var(--space-2); border: 0; background: none; color: var(--text-secondary); font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }

/* Post-registration claimed state (start_claimed.html) */
.start-claimed { margin: 0; min-height: 100dvh; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); }
.start-claimed__page { margin-left: var(--boh-rail-width, calc(var(--size-16) + var(--space-1))); padding: var(--space-16) var(--space-4) var(--space-8); }
.start-claimed__topbar { position: fixed; z-index: var(--z-sticky, 200); top: var(--space-2); left: 50%; transform: translateX(-50%); }
.start-claimed__pill { text-decoration: none; }
.start-claimed__main { display: grid; gap: var(--space-6); max-width: var(--auth-card-max-width); margin: 0 auto; }
.start-claimed__card { padding: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); }
.start-claimed__eyebrow { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.start-claimed__odds { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; }
.start-claimed__note { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-claimed__want { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-tight); }
.start-claimed__quest-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; }
.start-claimed__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0 0 0 var(--space-5); }
.start-claimed__step { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.start-claimed__step.is-done { opacity: .55; text-decoration: line-through; }
.start-claimed__step-title { font-weight: 700; }
.start-claimed__step-detail { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.start-claimed__cta { display: inline-block; margin-top: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); font-weight: 800; text-decoration: none; }

/* ── Want Request card (Card 8 read-back) — pills straddle the top edge ── */
.start-point--wantcard { padding-top: var(--space-8); }
.start-wantcard__tags { position: absolute; z-index: 1; top: 0; left: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; align-items: center; transform: translateY(-50%); pointer-events: none; }
.start-wantcard__kind, .start-wantcard__no { display: inline-flex; align-items: center; gap: var(--space-1); min-height: calc(var(--size-6) + 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; }
.start-wantcard__kind { background: var(--accent-primary); color: var(--accent-dark); }
.start-wantcard__no { background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-strong); }
.start-wantcard__quote { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-snug); }
.start-wantcard__quote .hl { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.start-wantcard__byline { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.start-wantcard__strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.start-wantcard__strip + .start-wantcard__strip { margin-top: var(--space-3); }
.start-wantcard__strip-key { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__strip-val { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-normal); text-align: right; }
.start-wantcard__rows { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.start-wantcard__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.start-wantcard__key { flex: 0 0 auto; max-width: 55%; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__dots { flex: 1 1 auto; min-width: var(--space-4); align-self: center; border-bottom: 2px dotted var(--border-strong); }
.start-wantcard__val { flex: 0 1 auto; color: var(--text-secondary); font-weight: var(--font-normal); text-align: right; }
.start-wantcard__section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.start-wantcard__section-key { margin: 0; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__section-key--solo { margin-top: var(--space-4); }
.start-wantcard__section-note { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.start-wantcard__drag { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.start-wantcard__proof { margin: var(--space-3) 0 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── /start/welcome — first state inside the Book: passport + continue ── */
.start-welcome { display: grid; gap: var(--space-4); justify-items: center; max-width: var(--auth-card-max-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); text-align: center; }
.start-welcome .start-point__eyebrow { margin: 0; }
.start-welcome .start-point__title { margin: 0; }
.start-welcome__passport { width: 100%; text-align: left; }
.start-welcome__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }

/* Step explainer: collapsed dropdown card shown between funnel steps */
.start-explainer { justify-self: stretch; max-width: var(--auth-card-max-width); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-primary); }
.start-explainer__pills { display: flex; margin-bottom: var(--space-2); }
.start-explainer__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-bold); text-align: left; cursor: pointer; }
.start-explainer__toggle iconify-icon { flex: none; width: var(--size-4); height: var(--size-4); transition: transform var(--start-motion-normal) ease; }
.start-explainer__toggle[aria-expanded="false"] iconify-icon { transform: rotate(-90deg); }
.start-explainer__toggle[aria-expanded="false"] + .start-explainer__body { display: none; }
.start-explainer__body { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.start-explainer__body p + p { margin-top: var(--space-2); }
.start-explainer__drop { margin-top: var(--space-2); }
.start-explainer__toggle[aria-expanded="false"] + .start-explainer__drop { display: none; }
.start-why__toggle { margin-top: var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-tight); }
.start-why__toggle .hl { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); }

.start-card__maker--prob { border-color: transparent; background: var(--highlight-yellow); color: var(--color-black); padding-left: var(--space-3); }
/* Steven 2026-08-09: the top-right TARGET chip on the odds card carries the
   Toll Bench yellow (was purple/accent-tertiary), matching the yellow target
   branding on the rail and the per-want bullseye. Dark text on yellow. */
.start-card__type { border-color: transparent; background: var(--highlight-yellow); color: var(--color-black); }

/* ── Want-flow file attachment control (2026-07-23) ── */
.start-baseline__files { margin-top: var(--space-4); }
.start-baseline__add-files { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--btn-ghost-bg); color: var(--btn-ghost-color); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background var(--transition-default, 150ms), border-color var(--transition-default, 150ms), color var(--transition-default, 150ms); }
.start-baseline__add-files:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-color-hover); border-color: var(--border-default); }
.start-baseline__add-files iconify-icon { width: var(--size-4); height: var(--size-4); }
.start-baseline__files-err { margin-top: var(--space-2); color: var(--color-error, #d32f2f); font-size: var(--text-sm); }
.start-baseline__file-list { margin-top: var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.start-baseline__file-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: var(--text-sm); }
.start-baseline__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.start-baseline__file-size { flex: none; color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.start-baseline__file-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border: 0; border-radius: var(--radius-full); background: none; color: var(--text-secondary); font-size: var(--text-base); cursor: pointer; line-height: 1; }
.start-baseline__file-remove:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* ── Age-gate error (2026-07-28) ── */
.start-point .form-error, .start-register__row .form-error { margin: var(--space-2) 0 0; color: var(--status-error); font-size: var(--text-sm); line-height: var(--leading-relaxed); }


/* ── Approach sliders (v2, step 5 -- "What can you bring?") ── */
.start-approach { margin-bottom: var(--space-4); }
.start-approach__header { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-3); }
.start-approach__row { margin-bottom: var(--space-3); }
.start-approach__labels { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.start-approach__label { font-size: var(--text-xs); color: var(--text-secondary); }
.start-approach__range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}
.start-approach__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-purple-500);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.start-approach__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-purple-500);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.start-approach__note { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-1) 0 0; }

/* ── Approach bars on the read-back card ── */
.start-wantcard__approach { margin-top: var(--space-3); margin-bottom: 0; display: grid; gap: var(--space-2); }
.start-wantcard__approach-title { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-normal); letter-spacing: .06em; text-transform: uppercase; }
.start-wantcard__approach-row { display: grid; grid-template-columns: 5rem 1fr 5rem; align-items: center; gap: var(--space-2); }
.start-wantcard__approach-label { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-wantcard__approach-label--right { text-align: right; }
.start-wantcard__approach-track { position: relative; height: 4px; background: var(--surface-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.start-wantcard__approach-fill { position: absolute; inset: 0; left: 0; width: var(--approach-pct, 50%); background: var(--color-purple-500); border-radius: var(--radius-full); }