/* Scale — the home page (index.html), loaded after site.css: its first screen.
   The story under the headline is assets/story.css; the timeline in the bottleneck section is assets/flow.css. */

/* The invite code, folded behind one line of text. server/stealth.py opens it when a code didn't work, and
   site.js puts the caret in the field when someone opens it. */
.door-invite {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--muted);
}

.door-invite summary {
  display: inline-block;
  padding: 7px 8px;
  border-radius: 6px;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}
.door-invite summary::-webkit-details-marker { display: none; }
.door-invite summary:hover { color: var(--ink); text-decoration-color: currentColor; }
.door-invite[open] summary { color: var(--ink); text-decoration-color: transparent; }

.door-invite .door-code { margin-top: 2px; }
.door-invite[open] .door-code { animation: door-invite-in 260ms var(--ease) both; }
.door-invite .form-error { margin-top: 8px; }

@keyframes door-invite-in {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (min-width: 721px) {
  .door-invite { margin-top: calc(4 * var(--u)); font-size: calc(14.5 * var(--u)); }
}

/* The bottleneck section on a phone: the heading first, then the timeline it introduces (flow.css). */
@media (max-width: 860px) {
  .problem-grid > .flow { order: 1; }
}

/* The first screen, tightened so the story starts higher: the waitlist note on one line where it fits, and less
   air above the stage (story.css sets 32 to 36px). */
.hero-story #wait-note { max-width: none; }
.hero-story .story { margin-top: 24px; }
@media (min-width: 721px) {
  .hero-story .story { margin-top: calc(26 * var(--u)); }
}