/* grant-connect-deploy/css/founder-profile.css */
/* V1 Profile UI — rail link + editor modal. */

/* Rail link (sits in workspace-pane hub-nav) */
.fp-rail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: #1F3D2A;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  /* R3-6 (2026-05-11): desktop touch target. */
  min-height: 36px;
}

.fp-rail-link:hover,
.fp-rail-link:focus-visible {
  background: rgba(31,61,42,0.06);
  outline: none;
}

.fp-rail-link:focus-visible {
  outline: 2px solid #7A4524;
  outline-offset: -2px;
}

.fp-rail-icon {
  font-size: 14px;
  line-height: 1;
}

.fp-rail-label {
  flex: 1;
}

.fp-rail-completeness {
  margin-left: auto;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 500;
  background: rgba(122,69,36,0.08);
  color: #7A4524;
}

.fp-rail-completeness.fp-completeness-good {
  background: rgba(31,61,42,0.1);
  color: #1F3D2A;
}

.fp-rail-completeness.fp-completeness-low {
  background: rgba(122,69,36,0.1);
  color: #7A4524;
}

/* R3-5 (2026-05-11): zero-percent state — neutral sienna "Add details" badge,
   not the alarming red/orange that reads as an error. */
.fp-rail-completeness.fp-completeness-zero {
  background: rgba(122,69,36,0.07);
  color: #7A4524;
  font-style: italic;
  font-weight: 400;
}

/* R3-6 (2026-05-11): fp-rail-link 44px touch target on mobile. */
@media (max-width: 767px) {
  .fp-rail-link {
    min-height: 44px;
  }
}

/* Modal */
.fp-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.fp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31,61,42,0.45);
  animation: fpFadeIn 0.18s ease-out;
}

.fp-modal-content {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: fpSlideIn 0.22s ease-out;
}

@keyframes fpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fpSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fp-modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1F3D2A;
  margin: 0;
}

.fp-modal-close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.fp-modal-close:hover,
.fp-modal-close:focus-visible {
  background: rgba(31,61,42,0.06);
  color: #1F3D2A;
  outline: none;
}

.fp-modal-subtitle {
  font-size: 13.5px;
  color: #555;
  line-height: 1.55;
  margin: 10px 0 20px 0;
}

.fp-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-field {
  display: block;
  margin-bottom: 14px;
}

.fp-field > span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1F3D2A;
  margin-bottom: 5px;
}

.fp-field-hint {
  font-weight: 400;
  font-style: normal;
  color: #888;
  margin-left: 4px;
}

.fp-field input,
.fp-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(31,61,42,0.18);
  border-radius: 5px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1F3D2A;
  background: #fff;
}

.fp-field input:focus,
.fp-field select:focus {
  outline: 2px solid #7A4524;
  outline-offset: -1px;
  border-color: #7A4524;
}

.fp-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(31,61,42,0.08);
  margin-top: 6px;
}

.fp-cancel,
.fp-save {
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(31,61,42,0.18);
  font-family: inherit;
}

.fp-cancel {
  background: #fff;
  color: #1F3D2A;
}

.fp-cancel:hover {
  background: rgba(31,61,42,0.04);
}

.fp-save {
  background: #1F3D2A;
  color: #FAF7F2;
  border-color: #1F3D2A;
  font-weight: 500;
}

.fp-save:hover {
  background: #2A4D3A;
}

.fp-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Onboarding modal variant (Task 14) — same chrome, with Skip pushed left */
.fp-modal--onboarding .fp-modal-content {
  /* Slightly warmer subtitle treatment — onboarding feels welcoming, not transactional */
  border-top: 3px solid #1F3D2A;
}

.fp-modal--onboarding .fp-modal-header h2 {
  font-weight: 600;
}

.fp-modal-footer .fp-skip {
  margin-right: auto; /* Push Skip to the left, Save to the right */
}

/* Mobile responsive */
@media (max-width: 600px) {
  .fp-modal-content {
    max-width: 100%;
    padding: 20px;
  }

  /* P1-6 (2026-05-11): bump touch targets on mobile for inputs, buttons, close. */
  .fp-field input,
  .fp-field select {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .fp-cancel,
  .fp-save {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .fp-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === Progressive enrichment prompt (Task 15) === */
/* Bottom-right toast-style prompt used by Phase 5 AI co-pilot to collect
   missing profile fields just-in-time during drafting. */

.fp-progressive-prompt {
  position: fixed;
  /* P1-15 (2026-05-15, Lens 1 verification): the prompt was bottom-right at
     z-index: 9999, which physically overlapped the "Show example" + "Check
     eligibility" AI tool buttons on the right side of the editor (y:742-800).
     Lens 3's blind reviewer mistook this for "all AI tools fail" because
     pointer events landed on the prompt, not the buttons.
     Fix: move to TOP-LEFT — below the 56px nav + 44px workspace back-strip
     (100px) so it sits in the upper-LEFT corner above the rail, which has
     no time-sensitive interactive content the user might need at that moment.
     The arc of attention on the editor (text drafting + AI tool clicks) is
     undisturbed. */
  top: calc(56px + 44px + 16px);
  left: 20px;
  max-width: 360px;
  background: #fff;
  border: 1px solid rgba(122,69,36,0.2);
  border-left: 4px solid #7A4524;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(31,61,42,0.12);
  z-index: 9999;
  animation: fpSlideDown 0.22s ease-out;
}

@keyframes fpSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fpSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fp-pp-body strong {
  display: block;
  color: #1F3D2A;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.fp-pp-input-wrap {
  display: block;
}

.fp-pp-field-name {
  display: block;
  font-size: 11px;
  color: #7A4524;
  margin-bottom: 3px;
  font-weight: 500;
}

.fp-pp-body input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(31,61,42,0.18);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  color: #1F3D2A;
}

.fp-pp-body input:focus {
  outline: 2px solid #7A4524;
  outline-offset: -1px;
  border-color: #7A4524;
}

.fp-pp-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.fp-pp-skip,
.fp-pp-save {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(31,61,42,0.18);
  font-family: inherit;
}

.fp-pp-skip {
  background: #fff;
  color: #666;
}

.fp-pp-save {
  background: #1F3D2A;
  color: #FAF7F2;
  border-color: #1F3D2A;
}

.fp-pp-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile — full-width top sheet (matches the new top-anchored desktop
   position so the prompt animates in from the same direction on both
   surfaces — was bottom on mobile, top on desktop; now both top). */
@media (max-width: 600px) {
  .fp-progressive-prompt {
    left: 12px;
    right: 12px;
    /* keep top: calc(...) from the base rule; clear nav + mob-tabs */
    top: calc(56px + 50px + 12px);
    max-width: none;
  }
}

/* ── Round-2 (2026-07-16): Radar sections in the profile editor ─────────────
   Questions the user's matches hang on (dimensionAnswers), funding-profile
   provenance rows, coverage meter, Radar pause toggle. Touch targets ≥44px
   (adversarial review P1-6). */
.fp-radar-sections { grid-column: 1 / -1; }
.fp-section { border-top: 1px solid #ece5d7; padding: 16px 0 6px; margin-top: 14px; }
.fp-section-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8175; margin: 0 0 10px; }
.fp-section-hint { font-size: 12.5px; color: #6b6257; margin: 6px 0 8px; line-height: 1.5; }
.fp-section-hint a { color: #1a5632; font-weight: 700; }
.fp-static-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin: 4px 0; }
.fp-static-row span { color: #6b6257; }
.fp-meter-track { height: 6px; background: #e2dccd; border-radius: 99px; overflow: hidden; }
.fp-meter-fill { height: 100%; background: linear-gradient(90deg, #1a5632, #3f7d5a); border-radius: 99px; transition: width .3s ease; }
.fp-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #ece5d7; }
.fp-q:last-child { border-bottom: 0; }
.fp-q-txt { font-size: 13.5px; line-height: 1.45; min-width: 0; }
.fp-q-unlock { display: block; font-size: 11.5px; color: #8a8175; margin-top: 2px; }
.fp-q-btns { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.fp-q-btn { font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid #d9d2c4; background: #fff; border-radius: 999px; padding: 5px 14px; min-height: 44px; min-width: 44px; cursor: pointer; }
.fp-q-btn:hover { border-color: #1a5632; color: #1a5632; }
.fp-q-btn--quiet { border-style: dashed; color: #8a8175; }
.fp-q-btn:disabled { opacity: .5; cursor: default; }
.fp-q-state { font-size: 12.5px; font-weight: 700; color: #1a5632; flex-shrink: 0; text-align: right; }
.fp-q-prov { display: block; font-size: 11px; color: #8a8175; font-weight: 400; margin-top: 1px; }
/* "Change" on an answered condition (2026-09-05). Until then an answer could not
   be revised anywhere in the product: every surface that asks these questions
   skips the ones already answered, so a wrong Yes silently widened a member's
   matches forever. Quiet by default so a list of a dozen answered rows still
   scans, but a real 44px target — these are pressed on a phone, from an email. */
.fp-q-change { display: inline-block; margin-top: 4px; font: inherit; font-size: 11px; font-weight: 600;
  color: #1a5632; background: none; border: 0; border-bottom: 1px solid rgba(26, 86, 50, .35);
  padding: 0; cursor: pointer; }
.fp-q-change:hover, .fp-q-change:focus-visible { border-bottom-color: #1a5632; }
/* The tap target is grown with a pseudo-element so the 44px floor is met without
   a 44px-tall link sitting in the middle of a compact row. */
.fp-q-change { position: relative; }
.fp-q-change::after { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: max(44px, 100%); height: 44px; }
/* The answer currently on file, when the row is re-opened to change it. */
.fp-q-btn.is-current { border-color: #1a5632; color: #1a5632; background: #f2f7f3; }
.fp-radar-pref { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #f5f1e8; border-radius: 10px; padding: 12px 14px; }
.fp-toggle { width: 46px; height: 26px; min-width: 46px; border-radius: 99px; background: #1a5632; position: relative; cursor: pointer; border: 0; padding: 0; box-sizing: content-box; /* 44px hit area via generous padding hitbox */ }
.fp-toggle::before { content: ''; position: absolute; inset: -10px; /* extends the touch target past 44px without visual size */ }
.fp-toggle::after { content: ''; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.fp-toggle.is-off { background: #c9c2b4; }
.fp-toggle.is-off::after { transform: translateX(-20px); }
.fp-toggle:focus-visible { outline: 2px solid #1a5632; outline-offset: 3px; }
@media (max-width: 640px) { .fp-q { flex-wrap: wrap; } .fp-q-btns { width: 100%; justify-content: flex-start; } }

/* === Company scan (Frames A/B, 2026-08-26) ===================================== */
.fp-modal--scan .fp-modal-content { max-width: 560px; }
.fpscan-privacy { margin: 4px 0 0; font-size: 12.5px; color: #57534E; background: rgba(184,134,11,.06); border: 1px solid rgba(184,134,11,.25); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.fpscan-error { margin: 8px 0 0; font-size: 12.5px; color: #c0392b; }
.fpscan-receipt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #1C1917; color: #A8A29E; padding: 11px 48px 11px 24px; font-size: 11px; letter-spacing: .04em; border-radius: 14px 14px 0 0; }
.fpscan-receipt b { color: #fff; font-weight: 700; }
.fpscan-close2 { position: absolute; top: 6px; right: 10px; color: #fff; opacity: .85; }
.fp-modal--scan .fp-modal-content { position: relative; padding: 0; overflow: hidden; }
.fp-modal--scan .fp-modal-content > .fp-modal-header,
.fp-modal--scan .fp-modal-content > .fp-modal-subtitle,
.fp-modal--scan .fp-modal-content > .fp-form { padding-left: 28px; padding-right: 28px; }
.fp-modal--scan .fp-modal-content > .fp-modal-header { padding-top: 24px; }
.fp-modal--scan .fp-modal-content > .fp-modal-footer { padding: 14px 28px 20px; }
.fpscan-body { max-height: min(64vh, 560px); overflow-y: auto; }
.fpscan-sec { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-bottom: 1px solid #E7E5E4; }
.fpscan-sec-l { grid-column: 1; grid-row: 1; padding: 15px 0 15px 24px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A8A29E; line-height: 1.45; }
.fpscan-sec-b { grid-column: 2; grid-row: 1; padding: 13px 24px 13px 14px; min-width: 0; }
.fpscan-selfline { margin: 0; font-size: 13.5px; line-height: 1.5; }
.fpscan-selfline b { color: #1B4332; }
.fpscan-ck { display: inline-grid; place-items: center; width: 16px; height: 16px; background: #D8F3DC; color: #1B4332; border-radius: 999px; font-size: 10px; font-weight: 800; margin-right: 4px; }
.fpscan-selfsub { margin: 3px 0 0; font-size: 12px; color: #A8A29E; line-height: 1.45; }
.fpscan-confirm-row { display: flex; gap: 10px; margin-top: 10px; }
.fpscan-btn-primary { background: #1B4332; color: #fff; border: none; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.fpscan-btn-secondary { background: none; border: 1.5px solid #D6D3D1; color: #57534E; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.fpscan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #E7E5E4; border: 1px solid #E7E5E4; border-radius: 10px; overflow: hidden; }
.fpscan-stat { background: #FFFDF9; padding: 10px 12px; }
.fpscan-stat-v { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; color: #1B4332; }
.fpscan-stat-k { font-size: 10.5px; color: #A8A29E; margin-top: 2px; line-height: 1.35; }
/* peer row: fully explicit grid placement on BOTH axes (v3 lesson — semi-explicit
   placement lets a definite-row cell seize column 1 and flip the row) */
.fpscan-peer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid #E7E5E4; }
.fpscan-peer:last-child { border-bottom: none; }
.fpscan-peer-n { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 13.5px; min-width: 0; }
.fpscan-peer-why { grid-column: 1; grid-row: 2; font-size: 12px; color: #57534E; font-style: italic; min-width: 0; }
.fpscan-peer-a { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; color: #1B4332; }
.fpscan-peer-a small { display: block; font-family: inherit; font-size: 10.5px; color: #A8A29E; font-weight: 600; }
.fpscan-plan { margin: 0; font-size: 13px; line-height: 1.55; background: rgba(196,83,43,.08); border: 1px solid rgba(196,83,43,.2); border-radius: 10px; padding: 12px 14px; }
.fpscan-plan strong { color: #A3401F; }
.fpscan-ogl { margin: 0; padding: 11px 24px 14px; font-size: 10.5px; color: #A8A29E; line-height: 1.4; }
@media (max-width: 560px) {
  .fpscan-sec { grid-template-columns: 1fr; }
  .fpscan-sec-l { grid-row: 1; padding: 12px 20px 0; }
  .fpscan-sec-b { grid-column: 1; grid-row: 2; padding: 6px 20px 12px; }
  .fpscan-stats { grid-template-columns: 1fr 1fr; }
  /* ...and the odd cell spans, so the grid never paints an empty tile (2026-08-27) */
  .fpscan-stat:nth-child(3):last-child { grid-column: 1 / -1; }
  .fp-modal--scan .fp-modal-content > .fp-modal-header,
  .fp-modal--scan .fp-modal-content > .fp-modal-subtitle,
  .fp-modal--scan .fp-modal-content > .fp-form { padding-left: 20px; padding-right: 20px; }
}
/* The scan verdict sits OUTSIDE .fpscan-body deliberately: the body is a 540px scroll
   pane, and the answer to "is my company in the record" cannot live below its fold. */
.fpscan-verdict { margin: 0; padding: 11px 20px; font-size: 12.5px; line-height: 1.5; color: #57534E; background: #FAF7F2; border-bottom: 1px solid #E7E5E4; }
.fpscan-verdict b { color: #1C1917; }

/* ── Onboarding step 2 (2026-08-27): lead with what we do NOT have ──────────────────
   Industry+province are already known for 68.3% of users; a business name for 1.7%.
   So the space is CONFIRMED in one line and the question is spent on the name. */
.fp-known { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 1px solid #E7E5E4; border-radius: 0; padding: 2px 0 11px; margin-bottom: 14px; font-size: 12.5px; color: #57534E; }
.fp-known[hidden] { display: none; }
.fp-known-tick { color: #1B4332; font-weight: 800; }
.fp-known-txt { font-weight: 600; color: #57534E; min-width: 0; }
.fp-known-edit { margin-left: auto; background: none; border: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: #A8A29E; text-decoration: none; cursor: pointer; padding: 8px 4px; min-height: 44px; white-space: nowrap; }
.fp-known-edit:hover, .fp-known-edit:focus-visible { color: #1B4332; text-decoration: underline; text-underline-offset: 2px; }
.fp-space-fields[hidden] { display: none; }
/* One clause does not need a bordered callout — the box was more weight than the
   sentence, on a step whose whole promise is "one quick thing". */
.fp-unlock { margin: 6px 0 2px; font-size: 12px; line-height: 1.5; color: #A8A29E; }
.fp-alt { margin: 2px 0 0; }
.fp-more { margin-top: 10px; }
.fp-more > summary { cursor: pointer; font-size: 12px; font-weight: 500; color: #A8A29E; list-style: none; padding: 9px 2px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.fp-more > summary:hover { color: #1B4332; }
.fp-more > summary::-webkit-details-marker { display: none; }
.fp-more > summary::before { content: '+'; font-weight: 800; color: #A8A29E; }
.fp-more[open] > summary::before { content: '\2212'; }
.fp-more > summary span { display: none; }
/* <summary> is neither a button nor an anchor, so the sitewide focus-ring rule
   (button:focus-visible, a:focus-visible) leaves it keyboard-reachable with no ring. */
.fp-more > summary:focus-visible { outline: 2px solid #1B4332; outline-offset: 2px; border-radius: 6px; }
.fp-more-body { padding-top: 4px; }

/* The 44px floor is a TOUCH requirement, not a width one. The existing mobile
   breakpoint sizes these correctly at phone widths, which left a real gap on
   tablets: at 768px the inputs render 37px and the close button 32px, and a 768px
   viewport is overwhelmingly a finger. Target the pointer, not the pixel count. */
@media (pointer: coarse) {
  .fp-field input, .fp-field select, .fp-modal-close, .fp-save, .fp-skip, .fp-cancel {
    min-height: 44px;
  }
  .fp-modal-close { min-width: 44px; }
}
/* The website is the ALTERNATIVE to the name, not a second question — a full-width
   input for it made a one-question step look like a form. */
.fp-alt { margin: -2px 0 2px; }
.fp-alt > summary { cursor: pointer; font-size: 12px; font-weight: 500; color: #A8A29E; list-style: none; padding: 8px 2px; min-height: 44px; display: flex; align-items: center; }
.fp-alt > summary:hover { color: #1B4332; text-decoration: underline; text-underline-offset: 2px; }
.fp-alt > summary::-webkit-details-marker { display: none; }
.fp-alt > summary:focus-visible { outline: 2px solid #1B4332; outline-offset: 2px; border-radius: 6px; }
.fp-field--alt { margin-top: 4px; }
.fp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ★ The form controls were 100% wide PLUS their own 13px horizontal padding, so every
   input overflowed the modal's content box by exactly 26px. Invisible on desktop (the
   card is wide enough to absorb it) and clearly wrong at 390px, where the field ran past
   the card edge. Pre-existing; found by looking at a phone screenshot, not by a test. */
.fp-field input, .fp-field select, .fp-field textarea { box-sizing: border-box; max-width: 100%; }

/* ══ Step 2 of signup — MUST look like step 1 ═══════════════════════════════════════
   Khalid, 2026-08-27: "it doesn't have the same visual language as step 1 of sign up."
   Correct: step 2 was wearing the founder-profile EDITOR's clothes (560px, left-aligned
   title, a green top rule, a two-button footer bar) while step 1 is a 420px centred card
   with filled inputs and a single full-width button. Two screens, one flow, two products.
   Every value below is MEASURED from the live step-1 modal (.dash-auth-modal__content),
   not approximated. Scoped to --step2 so the editor and scan modals are untouched. */
.fp-modal--step2 .fp-modal-content {
  /* border-box, or the 64px of padding is ADDED to the 420 and the card renders 486 —
     the same missing box-sizing that made every input overflow by exactly its padding. */
  box-sizing: border-box; position: relative;   /* the close button anchors to the CARD */
  max-width: 420px; width: 100%;   /* .fp-modal already pads 16px; do not double-gutter */
  padding: 36px 32px; border-radius: 16px;
  background: #FFFCF7; border: 1px solid #F2EBE0;
  box-shadow: 0 12px 32px rgba(26,23,20,.08);
  border-top: 1px solid #F2EBE0;          /* kill the editor's green top rule */
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.fp-modal--step2 h2 {
  font-family: 'Fraunces', Georgia, serif; font-size: 21.6px; font-weight: 600;
  text-align: center; color: #1A1714; margin: 0 0 8px; padding: 0; border: 0;
}
.fp-modal--step2 .fp-modal-subtitle {
  font-size: 14px; text-align: center; color: #706660; line-height: 1.5; margin: 0 0 20px;
}
.fp-modal--step2 .fp-modal-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #A8A29E; font-size: 22px; cursor: pointer;
}
.fp-modal--step2 .fp-field > span { font-size: 13px; font-weight: 500; color: #5C5549; }
.fp-modal--step2 .fp-field input, .fp-modal--step2 .fp-field select {
  background: #FAF8F4; border: 1px solid #F2EBE0; border-radius: 10px;
  padding: 11px 14px; font-size: 14.4px; min-height: 42px;
}
.fp-modal--step2 .fp-field input:focus, .fp-modal--step2 .fp-field select:focus {
  background: #fff; border-color: #2D6A4F; outline: none;
}
/* One full-width primary, then a quiet centred link — step 1's exact footer grammar. */
.fp-modal--step2 .fp-save {
  display: block; width: 100%; background: #2D6A4F; color: #fff; border: 0;
  border-radius: 10px; font-family: inherit; font-weight: 600; font-size: 14.4px;
  padding: 12px 24px; min-height: 44px; cursor: pointer; margin: 18px 0 0;
}
.fp-modal--step2 .fp-save:hover { background: #1B4332; }
.fp-modal--step2 .fp-skip {
  display: block; width: 100%; background: none; border: 0; font-family: inherit;
  font-size: 13px; color: #706660; cursor: pointer; padding: 12px 0 0; min-height: 44px;
}
.fp-modal--step2 .fp-skip:hover { color: #1A1714; text-decoration: underline; text-underline-offset: 2px; }
/* the confirmed line and the two disclosures, quieted to match the calmer card */
.fp-modal--step2 .fp-known { border-bottom-color: #F2EBE0; }
.fp-modal--step2 .fp-unlock { text-align: center; }
@media (max-width: 480px) {
  .fp-modal--step2 .fp-modal-content { padding: 28px 24px; }
}

/* Vertical rhythm: each disclosure carried a 44px summary plus its own margins, which put
   ~50px of air between every block on a card that is meant to read as one short question. */
.fp-modal--step2 .fp-known { padding-bottom: 9px; margin-bottom: 12px; }
.fp-modal--step2 .fp-field { margin-bottom: 6px; }
.fp-modal--step2 .fp-alt { margin: 0; }
.fp-modal--step2 .fp-alt > summary { padding: 6px 0; min-height: 34px; justify-content: center; }
.fp-modal--step2 .fp-unlock { margin: 8px 0 0; font-size: 11.5px; }
.fp-modal--step2 .fp-more { margin: 6px 0 0; }
.fp-modal--step2 .fp-more > summary { padding: 6px 0; min-height: 34px; justify-content: center; }
.fp-modal--step2 .fp-save { margin-top: 14px; }
.fp-modal--step2 .fp-skip { padding-top: 8px; min-height: 40px; }


/* The 44px touch floor has to out-specify the --step2 rules above (which mirror step 1's
   42px desktop inputs). Step 1 has the same gap on touch; do not propagate it. */
@media (pointer: coarse) {
  .fp-modal--step2 .fp-field input, .fp-modal--step2 .fp-field select,
  .fp-modal--step2 .fp-skip, .fp-modal--step2 .fp-save,
  .fp-modal--step2 .fp-alt > summary, .fp-modal--step2 .fp-more > summary {
    min-height: 44px;
  }
}

/* Step 1 separates its two routes with a centred "OR" rule; step 2 uses the same device
   so the name/website pair reads as one choice rather than two requests. */
.fp-modal--step2 .fp-or { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.fp-modal--step2 .fp-or::before, .fp-modal--step2 .fp-or::after { content: ''; flex: 1; height: 1px; background: #F2EBE0; }
.fp-modal--step2 .fp-or span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #A8A29E; text-transform: uppercase; }