/* The sign-up at the app host (lane self-serve, boards S1 to S3), on the sign-in's own look (signin.css): the navy panel,
   the white card, Inter. No external font or resource. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field select {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  width: 100%;
}
.field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24, 68, 112, 0.25); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* S1 frame 2: one field that takes a paste, drawn as six slots */
.field input.code {
  height: 56px;
  font-size: 28px;
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.providers { display: flex; flex-direction: column; gap: 12px; }
.provider { text-decoration: none; }
.aside { margin: 24px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.legal { margin: 16px 0 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }

.workspace-card.static { cursor: default; }
.workspace-card.static:hover { background: #ffffff; }
.company-card { display: flex; flex-direction: column; gap: 8px; }

.separate { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }

/* S2 frames 2 and 3: the address's live state and the hyphen-free alternatives */
.state { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; min-height: 20px; }
.state.ok { color: #15803d; font-weight: 600; }
.state.ok::before {
  content: "";
  width: 16px;
  height: 16px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.state.bad { color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; color: var(--navy); cursor: pointer; }
.chip:hover { border-color: var(--navy); }
.chip:focus-visible { outline: 3px solid rgba(24, 68, 112, 0.45); outline-offset: 2px; }

/* S3 frames 1 and 2: three large choices, one question per screen */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  font: inherit;
  font-size: 16px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}
.choice:hover, .choice[aria-pressed="true"] { border-color: var(--navy); background: #f1f5fb; }
.choice:focus-visible { outline: 3px solid rgba(24, 68, 112, 0.45); outline-offset: 2px; }

.access { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.access legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* round 2, rank 3: "Your name" heads its two fields at their labels' size, as "Access" heads its choices */
.name-caption { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.access-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.access-choice input { margin-top: 3px; }

/* S3 frame 5: the named steps on the brand panel, each ticking only when done */
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: center; gap: 10px; color: #b7c9e1; }
.step .mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #7f9cc2; }
.step.running { color: #f8fbff; font-weight: 600; }
.step.running .mark { border-color: #f8fbff; border-right-color: transparent; animation: kp-spin 1s linear infinite; }
.step.done { color: #e7effa; }
.step.done .mark {
  border: 0;
  background: #22c55e center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.step.failed { color: #fecaca; }
.step.failed .mark { border-color: #f87171; background: #7f1d1d; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .step.running .mark { animation: none; border-right-color: #f8fbff; }
}
.phone-steps { display: none; margin: 0 0 16px; font-size: 13px; color: var(--muted); }
/* the owner, 2026-10-28: while the workspace is built, the same steps in the card, on white */
.card .steps { margin: 4px 0 24px; }
.card .step { color: var(--muted); }
.card .step .mark { border-color: var(--line); }
.card .step.running { color: var(--ink); }
.card .step.running .mark { border-color: var(--navy); border-right-color: transparent; }
.card .step.done { color: var(--ink); }
.card .step.failed { color: #b91c1c; }
.card .step.failed .mark { border-color: #dc2626; background: #fee2e2; }
@media (prefers-reduced-motion: reduce) {
  .card .step.running .mark { border-right-color: var(--navy); }
}
/* the owner, 2026-10-28: the build reads like an agent at work, each step a call with what it does */
.agent { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.agent .orb { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); animation: kp-orb 1.6s ease-out infinite; }
.agent-time, .step-time { margin-left: auto; padding-left: 12px; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.card .step { align-items: flex-start; }
.card .step .mark { margin-top: 1px; }
.step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step-detail { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); }
/* the running line's sub text turns from one sentence to the next with a cross-fade (the owner, 2026-10-29) */
.step-detail { transition: opacity 0.3s ease; }
.step-detail.fading { opacity: 0; }
.panel .step-detail, .panel .step-time { display: none; }
.card .step.running .step-title {
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, #7f9cc2 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kp-think 2s linear infinite;
}
.step-detail.typing::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--muted); animation: kp-caret 0.9s steps(1) infinite; }
@keyframes kp-orb {
  0% { box-shadow: 0 0 0 0 rgba(24, 68, 112, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(24, 68, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 68, 112, 0); }
}
@keyframes kp-think { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes kp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .agent .orb, .step-detail.typing::after { animation: none; }
  .step-detail { transition: none; }
  .card .step.running .step-title { animation: none; background: none; color: var(--ink); }
}


/* S3 frames 1 and 2 (board fold F-2): an icon on each choice, Phosphor glyphs as @kpilot/kit draws them
   (kp-icon.glyphs.ts, @phosphor-icons/core 2.1.1, MIT), inline so the CSP loads nothing more. */
.choice { display: flex; align-items: center; gap: 14px; }
.choice-icon { flex: none; width: 22px; height: 22px; background: center / contain no-repeat; }
.choice-icon.icon-briefcase { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z'/%3E%3C/svg%3E"); }
.choice-icon.icon-bank { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M24,104H48v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16H208V104h24a8,8,0,0,0,4.19-14.81l-104-64a8,8,0,0,0-8.38,0l-104,64A8,8,0,0,0,24,104Zm40,0H96v64H64Zm80,0v64H112V104Zm48,64H160V104h32ZM128,41.39,203.74,88H52.26ZM248,208a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H240A8,8,0,0,1,248,208Z'/%3E%3C/svg%3E"); }
.choice-icon.icon-kanban { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M216,48H40a8,8,0,0,0-8,8V208a16,16,0,0,0,16,16H88a16,16,0,0,0,16-16V160h48v16a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V56A8,8,0,0,0,216,48ZM88,208H48V128H88Zm0-96H48V64H88Zm64,32H104V64h48Zm56,32H168V128h40Zm0-64H168V64h40Z'/%3E%3C/svg%3E"); }
.choice-icon.icon-wallet { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,128H56a8,8,0,0,1-8-8V78.63A23.84,23.84,0,0,0,56,80H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,132Z'/%3E%3C/svg%3E"); }
.choice-icon.icon-chart-pie { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M100,116.43a8,8,0,0,0,4-6.93v-72A8,8,0,0,0,93.34,30,104.06,104.06,0,0,0,25.73,147a8,8,0,0,0,4.52,5.81,7.86,7.86,0,0,0,3.35.74,8,8,0,0,0,4-1.07ZM88,49.62v55.26L40.12,132.51C40,131,40,129.48,40,128A88.12,88.12,0,0,1,88,49.62ZM128,24a8,8,0,0,0-8,8v91.82L41.19,169.73a8,8,0,0,0-2.87,11A104,104,0,1,0,128,24Zm0,192a88.47,88.47,0,0,1-71.49-36.68l75.52-44a8,8,0,0,0,4-6.92V40.36A88,88,0,0,1,128,216Z'/%3E%3C/svg%3E"); }
.choice-icon.icon-users { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z'/%3E%3C/svg%3E"); }

/* The language switch with its globe (board fold F-1), on the sign-up only */
.signup .lang { display: inline-flex; align-items: center; gap: 6px; }
.signup .globe { width: 16px; height: 16px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='24%2024%20208%20208'%3E%3Cpath%20fill='%23184470'%20d='M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z'/%3E%3C/svg%3E"); }
.phone-wordmark { display: none; }
.counter { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }

@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; }
  /* phone (board fold F-1): the form alone, under a small navy wordmark and the language switch; no navy band, no
     pitch, no host line. The steps as a slim line above the question (S3). The sign-in's own phone look is untouched. */
  .signup .shell { display: block; }
  .signup .panel { display: none; }
  .signup .main { padding: 16px 16px 32px; gap: 16px; }
  .signup .topbar { justify-content: space-between; align-items: center; }
  .signup .phone-wordmark { display: block; height: 24px; width: auto; }
  .panel .steps { display: none !important; }
  .phone-steps { display: block; }
}

/* S3 frame 3: the yearly salary, the currency before it and "a year" after it, on the address field's look */
.amount .prefix { padding: 0 0 0 14px; color: var(--muted); font-size: 15px; height: 100%; display: flex; align-items: center; }
.field .amount input[type="text"] { border: 0; height: 100%; padding: 0 4px 0 8px; box-shadow: none; }
.nudge { margin: 0; font-size: 13px; color: var(--ink); }

/* Board S10 frame 8 (C3): a personal address's card step, the period then the plans, on the questions' choice look */
.periods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.period { font: inherit; font-size: 14px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; color: var(--navy); cursor: pointer; }
.period:hover, .period[aria-pressed="true"] { border-color: var(--navy); background: #f1f5fb; }
.period[aria-pressed="true"] { font-weight: 600; }
.period:focus-visible { outline: 3px solid rgba(24, 68, 112, 0.45); outline-offset: 2px; }
.saving { font-size: 13px; font-weight: 600; color: #15803d; }
.plans { margin-bottom: 12px; }
.plans .choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.plan-name { font-weight: 600; color: var(--ink); }
.plan-tag { font-weight: 600; color: var(--navy); }
.plan-price, .plan-text { font-size: 14px; line-height: 1.45; color: var(--muted); }
.plan-price { color: var(--ink); }
#card-pick .hint + .hint { margin-top: 6px; }
#card-add, #card-again { margin-top: 16px; }
#card-secure { margin-top: 8px; }
.note { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f1f5fb; font-size: 14px; color: var(--ink); }
/* billing-api.md 2.2: the trial's line on the build card */
.trial { margin: 8px 0 0; font-size: 14px; color: var(--ink); }

/* ---------- Board b7be4cbf "KPilot Sign-up Flow", the account screens (the coordinator's 10 AM cut) ----------
   No left column: a 64 px top bar (the mark, the four-part progress line, "Français"), then one centred column on white.
   Values from the board's own styles: ink #09090b, body #3f3f46, muted #71717a, lines #e4e4e7 / #f0f0f2, field border
   #d4d4d8, brand #184470, brand tint #e8eef5, success #10b981 / #047857, panel #fafafa. */
.signup { background: #ffffff; }
.signup .shell { display: block; min-height: 0; }
.flowbar {
  height: 64px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 640px) minmax(120px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid #f0f0f2;
  background: #ffffff;
}
.flow-logo { display: flex; align-items: center; }
.flow-wordmark { height: 20px; width: auto; display: block; }
.flow-progress { min-width: 0; display: flex; justify-content: center; }
.flow-progress ol { width: 100%; max-width: 640px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.part { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.part-bar { display: block; height: 3px; border-radius: 999px; background: #e4e4e7; }
.part.current .part-bar { background: #184470; }
.part-name { font-size: 12px; font-weight: 500; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part.current .part-name { font-weight: 700; color: #09090b; }
.flow-right { display: flex; justify-content: flex-end; align-items: center; }
.signup .lang { height: 32px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #52525b; }
.signup .lang:hover { background: #f4f4f5; color: #18181b; }
.signup .globe { width: 14px; height: 14px; }

.signup .main { padding: 0 0 56px; justify-content: flex-start; gap: 0; background: #ffffff; }
.signup .card { max-width: 456px; border: 0; border-radius: 0; background: transparent; padding: 72px 28px 0; }
.signup .card.wide { max-width: 880px; padding-top: 48px; }
.signup .card.wide .form, .signup .card.wide .links { max-width: 480px; }
.signup .heading { gap: 8px; margin-bottom: 28px; }
.signup .heading h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; color: #09090b; }
.signup .heading p { font-size: 15px; line-height: 1.6; color: #3f3f46; }
.signup .footer { margin-top: 40px; }
.signup .primary { align-self: flex-start; }
.signup .primary:disabled, .signup .primary[aria-disabled="true"] { background: #f4f4f5; color: #a1a1aa; cursor: default; }
.signup .primary.wide { align-self: stretch; width: 100%; }
.secondary.small { align-self: flex-start; height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-radius: 7px; }
.link.strong { font-weight: 600; font-size: 13px; }
.label { font-size: 13px; font-weight: 600; color: #3f3f46; }

/* the company field with its initial (board: a 20 px navy square with the name's first letter) */
.named { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff; }
.named:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24, 68, 112, 0.25); }
.named .initial { width: 20px; height: 20px; flex: none; border-radius: 5px; background: #184470; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.named .initial:empty { background: #e4e4e7; }
.field .named input[type="text"] { border: 0; height: 100%; padding: 0; box-shadow: none; outline: none; flex: 1; min-width: 0; }

/* the place line with "Change", and its three pickers with "Done" */
.place { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #fafafa; font-size: 13px; color: #3f3f46; }
.place-pick { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fafafa; }

/* the workspace address: the address, "Available", "Change"; taken, with its suggestions */
.address { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid #e4e4e7; border-radius: 8px; background: #ffffff; }
.address.invalid { border-color: #ef4444; }
.address-host { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 600; color: #18181b; overflow-wrap: anywhere; }
.address .addr { flex: 1 1 200px; min-width: 0; height: 32px; }
.address .addr input { height: 100%; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.tag.ok { background: #ecfdf5; color: #047857; }
.tag-check { width: 11px; height: 11px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
#address-rule { font-size: 12.5px; }
#address-rule.bad { color: var(--danger); }
.state.bad { font-size: 13px; }
.state[hidden] { display: none !important; }

/* "A few questions": the build's count above the title, chips one choice at a time, the helper box */
.building { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #184470; font-variant-numeric: tabular-nums; }
.spin { width: 12px; height: 12px; flex: none; border-radius: 999px; border: 2px solid #d9e2ec; border-top-color: #184470; box-sizing: border-box; animation: kp-spin 0.9s linear infinite; }
.questions { gap: 24px; max-width: 520px; }
.ask { display: flex; flex-direction: column; gap: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: inherit; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #d4d4d8; background: #ffffff; color: #3f3f46; }
.pill[aria-checked="true"] { border-color: #184470; background: #e8eef5; color: #184470; }
.pill:focus-visible { outline: 3px solid rgba(24, 68, 112, 0.45); outline-offset: 2px; }
.pill:disabled { cursor: default; opacity: 0.7; }
.field input.short { max-width: 120px; }
.questions .amount { max-width: 260px; }
.helper { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: #fafafa; }
.helper-title { margin: 0; font-size: 14px; font-weight: 600; color: #18181b; }

/* the build card: the six lines in a bordered list, the count under it, "Taking longer" and "Could not finish" */
.signup .heading .trial { margin: 0; font-size: 13.5px; line-height: 1.5; color: #184470; font-weight: 600; }
.build-card .steps { margin: 0; gap: 0; border: 1px solid #e4e4e7; border-radius: 12px; background: #ffffff; }
.build-card .step { padding: 12px 16px; border-top: 1px solid #f4f4f5; font-size: 14px; line-height: 1.45; }
.build-card .step:first-child { border-top: 0; }
.build-card .step.done .mark { width: 20px; height: 20px; background-color: #10b981; }
.build-card .step.failed .mark { width: 20px; height: 20px; border: 0; background: #dc2626 center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.build-card .step.pending { color: #a1a1aa; }
.build-card .step.running { color: #09090b; font-weight: 600; }
.build-card .step.done { color: #3f3f46; }
.build-card .step-detail { color: #71717a; font-weight: 400; }
.build-count { margin: 12px 0 16px; font-size: 13px; font-weight: 600; color: #52525b; font-variant-numeric: tabular-nums; }
.notice { display: flex; gap: 12px; padding: 16px 18px; border-radius: 12px; margin-bottom: 16px; }
.notice.warn { border: 1px solid #fde68a; background: #fffbeb; }
.notice.bad { border: 1px solid #fecaca; background: #fef2f2; }
.notice-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; background: center / contain no-repeat; }
.notice.warn .notice-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.notice.bad .notice-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; color: #3f3f46; }
.notice-title { font-size: 14.5px; font-weight: 600; color: #18181b; }
.notice .secondary.small { margin-top: 4px; }

@media (max-width: 760px) {
  .flowbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 0 16px; }
  .signup .card, .signup .card.wide { padding: 32px 16px 0; }
  .signup .main { padding: 0 0 32px; }
  .part-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}
/* the board's buttons: 34 px and as wide as their words on the company and questions screens, the build card's full width */
.signup .card.wide .primary { width: auto; height: 34px; padding: 0 14px; border-radius: 7px; font-size: 13.5px; }
.signup .primary.wide { height: 40px; border-radius: 7px; font-size: 13.5px; }
.signup .secondary.small { width: auto; }

/* Board "Your email" and "Check your inbox": "Back" with its arrow, the button as wide as its words, the notes under
   it; six 44 x 52 boxes, red when the code did not work; "Resend code in 30 s" grey until it can be pressed */
.signup .back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0 0 20px -6px; padding: 0 10px 0 6px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #52525b; text-decoration: none; cursor: pointer; }
.signup .back::before { content: ""; width: 15px; height: 15px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.signup .back:hover { background: #f4f4f5; color: #18181b; }
.signup .back:focus-visible { outline: 3px solid rgba(24, 68, 112, 0.45); outline-offset: 2px; }
#view-email, #view-code { display: flex; flex-direction: column; }
#view-email[hidden], #view-code[hidden] { display: none !important; }
#email-form { max-width: 400px; }
#email-form .primary { align-self: flex-start; width: auto; height: 34px; padding: 0 14px; border-radius: 7px; font-size: 13.5px; }
.email-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; font-size: 13px; color: #71717a; }
.email-notes p { margin: 0; }
.email-notes .strong { font-weight: 600; }
.email-notes .legal { margin: 0; font-size: 12px; color: #a1a1aa; text-align: left; }
.code-boxes { display: flex; gap: 8px; }
.field .code-boxes input.code-box { flex: none; width: 44px; height: 52px; padding: 0; border: 1px solid #d4d4d8; border-radius: 7px; font: inherit; font-size: 22px; font-weight: 600; text-align: center; color: #18181b; background: #ffffff; font-variant-numeric: tabular-nums; }
.field .code-boxes input.code-box:focus { outline: none; border-color: #184470; box-shadow: 0 0 0 3px rgba(24, 68, 112, 0.15); }
.field .code-boxes.invalid input.code-box { border-color: #ef4444; }
.resent { margin: 0; font-size: 13px; line-height: 1.5; color: #047857; }
#code-life { max-width: 440px; font-size: 13px; line-height: 1.5; color: #71717a; }
.code-links { justify-content: flex-start; gap: 20px; font-size: 13.5px; font-weight: 600; }
.link.waiting:disabled { color: #a1a1aa; cursor: default; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .code-boxes { gap: 6px; }
  .field .code-boxes input.code-box { width: 42px; }
}

/* Board "Setting up" with the password (CONTRACT B1 to B3): the fields, the three rules ticking, the passkey's card and
   button, the thin build bar under the button; "Get started" with its check once the way is held */
#view-ready { display: flex; flex-direction: column; }
#view-ready[hidden] { display: none !important; }
.password { gap: 16px; margin-bottom: 16px; }
.rules { margin: -4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rules li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717a; }
.rules li.ok { color: #18181b; }
.rule-mark { width: 16px; height: 16px; flex: none; border-radius: 999px; border: 1px solid #d4d4d8; background: #ffffff; box-sizing: border-box; }
.rules li.ok .rule-mark { border: 0; background: #10b981 center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.fingerprint { width: 18px; height: 18px; flex: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184470' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4M14 13.12c0 2.38 0 6.38-1 8.88M17.29 21.02c.12-.6.43-2.3.5-3.02M2 12a10 10 0 0 1 18-6M2 16h.01M21.8 16c.2-2 .131-5.354 0-6M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2M8.65 22c.21-.66.45-1.32.57-2M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E"); }
.passkey-chosen { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid #d4d4d8; border-radius: 7px; background: #ffffff; font-size: 13.5px; font-weight: 600; color: #18181b; }
.fallback { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: #fafafa; font-size: 13.5px; line-height: 1.5; color: #3f3f46; }
.build-bar { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.bar-track { display: block; height: 3px; border-radius: 999px; background: #ececef; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #184470; transition: width 0.6s ease; }
.bar-fill[data-done="1"] { width: 17%; }
.bar-fill[data-done="2"] { width: 33%; }
.bar-fill[data-done="3"] { width: 50%; }
.bar-fill[data-done="4"] { width: 67%; }
.bar-fill[data-done="5"] { width: 83%; }
.bar-fill[data-done="6"] { width: 100%; }
.bar-fill.ready { background: #10b981; }
.bar-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.45; color: #71717a; }
.bar-now { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bar-now span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-spin { width: 10px; height: 10px; flex: none; border-radius: 999px; border: 1.5px solid #184470; border-right-color: transparent; box-sizing: border-box; animation: kp-spin 0.9s linear infinite; }
.bar-spin[hidden] { display: none !important; }
.bar-count { flex: none; font-variant-numeric: tabular-nums; }
.passkey-offer { display: flex; flex-direction: column; gap: 12px; }
.signup .secondary.passkey { width: 100%; height: 40px; gap: 8px; border: 1px solid #d4d4d8; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: #18181b; }
.signup .secondary.passkey:hover { background: #fafafa; }
.link.center { align-self: center; margin-top: 4px; }
.part.done .part-name::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
  .bar-spin { animation: none; }
  .bar-fill { transition: none; }
}