/* Signup uses the site's type, palette and button system.
   Selected choices use a warmer red in each theme; required-message red stays separate. */
.waitlist-flow { --choice-red: #8f4337; --choice-ink: #fff8ec; --choice-focus: #642d25; max-width: 780px; margin-inline: auto; text-align: left; scroll-margin-top: 110px; }
:root[data-theme="dark"] .waitlist-flow { --choice-red: #a54f42; --choice-ink: #fff4dc; --choice-focus: #e4b896; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .waitlist-flow { --choice-red: #a54f42; --choice-ink: #fff4dc; --choice-focus: #e4b896; } }
.waitlist-flow .screen { animation: flow-in .25s ease-out; }
.waitlist-flow .screen[hidden], .waitlist-flow [hidden], #confirmation-success[hidden], #confirmation-intro[hidden] { display: none !important; }
.waitlist-flow .screen-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.waitlist-flow .screen-head .step-count { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 1; }
.waitlist-flow h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.035em; }
.waitlist-flow .field { display: grid; gap: .5rem; margin: 1.5rem 0; }
.waitlist-flow .field label { font-weight: 600; }
.waitlist-flow input[type="email"], .waitlist-flow input:not([type]), .waitlist-flow textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--line, #7776); background: var(--surface, #fff1); color: inherit; font: inherit; padding: .9rem 1rem; border-radius: 12px; }
.waitlist-flow textarea { resize: vertical; min-height: 95px; }
.waitlist-flow .check { display: flex; gap: .8rem; align-items: flex-start; margin: 1.2rem 0; }
.waitlist-flow .check input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: .2rem; accent-color: var(--choice-red); }
.waitlist-flow .screen-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.waitlist-flow .spacer { flex: 1; }
.waitlist-flow .chips { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0; min-width: 0; }
.waitlist-flow .chips legend { margin-bottom: .8rem; font-weight: 600; }
.waitlist-flow .chips label { position: relative; cursor: pointer; }
.waitlist-flow .chips label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.waitlist-flow .chips span { display: block; padding: .55rem .85rem; border: 1px solid var(--line, #8886); border-radius: 999px; font-size: .9rem; }
.waitlist-flow .chips :checked + span { background: var(--choice-red); border-color: var(--choice-red); color: var(--choice-ink); }
.waitlist-flow .chips :focus-visible + span { outline: 3px solid var(--choice-focus); outline-offset: 3px; }
.waitlist-flow .email-last { border-top: 1px solid var(--line, #8885); padding-top: 1rem; margin-top: 2rem; }
.waitlist-flow .email-last h2 { font-size: 1.7rem; }
.waitlist-flow .flow-submit { margin-top: 1.5rem; }
.waitlist-flow .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-flow .text-button { background: none; color: inherit; border: 0; padding: .75rem .25rem; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.waitlist-flow .together { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; margin: 2rem 0; }
.waitlist-flow .kinds { list-style: none; padding: 0; display: grid; gap: .65rem; font-size: .85rem; }
.waitlist-flow .join-lines { height: 220px; width: 100%; fill: none; stroke: var(--choice-red); stroke-width: 1; }
.waitlist-flow .into { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.waitlist-flow .into img { width: 65px; }
.waitlist-flow .into span { font-size: .75rem; opacity: .7; }
.waitlist-flow .status { min-height: 1.5em; }
.review-example { padding: .65rem 1rem; border: 1px dashed currentColor; border-radius: 10px; font-size: .8rem; }
@keyframes flow-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 500px) { .waitlist-flow .screen-nav { gap: .5rem; } .waitlist-flow .screen-nav .button { margin-left: auto; } .waitlist-flow .together { grid-template-columns: 1.3fr 30px 1fr; } }
@media (prefers-reduced-motion: reduce) { .waitlist-flow .screen { animation: none; } }
/* Required marks are above their checkbox, including when motion is reduced. */
.waitlist-flow .required-marker { color: #b63830; font-size: .8rem; font-weight: 600; margin: 1rem 0 .35rem; }
.waitlist-flow .required-marker + .check { margin-top: .35rem; }
.waitlist-flow .answer-protection { margin-top: -.6rem; margin-left: 2rem; font-size: .8rem; }
.waitlist-flow .join-only { font-size: .78rem; opacity: .85; }
.waitlist-flow .unsubscribe-note { justify-self: end; text-decoration: underline; text-underline-offset: .18em; font-size: .72rem; margin-top: -.15rem; }
.waitlist-flow .together-domain { font-size: .65rem; letter-spacing: .025em; color: var(--muted); }
:root[data-theme="dark"] .waitlist-flow .required-marker { color: #ff9f93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .waitlist-flow .required-marker { color: #ff9f93; } }
@media (min-width: 1000px) {
  .waitlist-flow .together { grid-template-columns: 1.2fr 100px 1fr; gap: 0; margin-block: 2.4rem; }
  .waitlist-flow .kinds { gap: .8rem; font-size: .88rem; }
  .waitlist-flow .join-lines { height: 255px; stroke-width: 1.7; opacity: .82; }
  .waitlist-flow .into { gap: .7rem; }
  .waitlist-flow .into img { width: 104px; }
  .waitlist-flow .into strong { font-size: 1.65rem; letter-spacing: -.045em; }
  .waitlist-flow .into .together-domain { font-size: .7rem; }
}
@media (max-width: 500px) { .waitlist-flow .screen-nav .join-only { order: 4; width: 100%; text-align: right; font-size: .75rem; } }
.waitlist-flow .join-lines path, .waitlist-flow .join-lines circle { vector-effect: non-scaling-stroke; }

/* Small type supplies subtlety; the domain keeps full readable contrast. */
.waitlist-flow .into .together-domain { opacity: 1; }

/* Domain belongs to the wordmark, aligned to its final e rather than the cell. */
.waitlist-flow .into .together-wordmark { display: grid; justify-items: end; gap: 1px; line-height: 1.05; font-size: 1rem; opacity: 1; }
.waitlist-flow .into .together-wordmark strong { font-size: inherit; }
.waitlist-flow .into .together-domain { display: block; line-height: 1.15; }
@media (min-width: 1000px) { .waitlist-flow .into .together-wordmark { font-size: 1.65rem; } }

/* Screen 1 opens with the six-kinds graphic (26 Oct); the promise is one line. */
.waitlist-flow .together-line { margin-top: .6rem; }
.waitlist-flow .promise-line { font-size: .88rem; color: var(--muted); border-left: 2px solid var(--steak); padding-left: .9rem; margin-top: 1.1rem; }
.waitlist-flow .promise-line strong { color: var(--text); }
.waitlist-flow .beta-nudge { font-size: .88rem; color: var(--muted); margin-top: .7rem; padding-left: calc(.9rem + 2px); }
.waitlist-flow .beta-nudge strong { color: var(--text); }
/* Each kind sits exactly at the height of its line, even when a label wraps. */
.waitlist-flow .together { --lines-h: 220px; }
.waitlist-flow .join-lines { height: var(--lines-h); }
.waitlist-flow .kinds { height: var(--lines-h); grid-template-rows: repeat(6, 1fr); gap: 0; margin: 0; }
.waitlist-flow .kinds li { display: flex; align-items: center; margin: 0; line-height: 1.25; }
@media (max-width: 500px) { .waitlist-flow .kinds { font-size: .8rem; } .waitlist-flow .into .together-wordmark { font-size: .9rem; } }

/* The signup diagram uses the same selected identity as the site frame. */
.waitlist-flow .into .brand-icon{width:65px;opacity:1}
.waitlist-flow .into .brand-icon img{width:100%;height:100%}
.waitlist-flow .into .brand-wordmark{width:clamp(92px,12vw,160px);opacity:1}
@media(min-width:1000px){.waitlist-flow .into .brand-icon{width:104px}}
@media (min-width: 1000px) { .waitlist-flow .together { --lines-h: 255px; } }