/* Sign up — ported against designs/Signup.dc.html (2026-08-20 handoff). */
/* Namespaced under .p-signup; uses shell tokens from marketing-shell.css
   (--green is brand orange var(--brand); --green-2 is its dark pair). */

.p-signup {
  /* design-local tokens (success green + gold), scoped to the page wrapper */
  --su: #1f8a5b;
  --su-2: #3fb37f;
  --gd: #d9a23a;
  /* Ink for anything sitting ON brand orange. marketing-shell.css has no
     --on-brand; the brand reference and arena/chrome.css both use #201009.
     White on orange is never allowed, and this page shipped three of them
     (submit button, Founder's badge, ::selection). */
  --on-brand: #201009;
  flex: 1;
  padding: 46px 36px 72px;
  position: relative;
  background:
    radial-gradient(1100px 620px at 84% -10%, rgba(239, 89, 32,.10), transparent 60%),
    radial-gradient(760px 520px at -6% 8%, rgba(31,138,91,.06), transparent 62%);
}

/* Desktop: headline over the supporting copy in the left column, card
   spanning both rows on the right. Explicit placement, because the DOM order
   (head → pitch → form) is the phone's order, not the desktop's. Row gap is 0
   so the head/pitch seam is controlled by .su-pitch's own margin. */
.p-signup .su-grid {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 524px;
  /* auto 1fr, not two autos: the card spans both rows and is far taller than
     the headline, and auto rows would split its slack between them — which
     opened a ~180px hole between the chips and the supporting copy. */
  grid-template-rows: auto 1fr;
  gap: 0 76px; align-items: start;
}
.p-signup .su-head { grid-column: 1; grid-row: 1; min-width: 0; }
.p-signup .su-pitch { grid-column: 1; grid-row: 2; margin-top: 26px; }
.p-signup .su-form-col { grid-column: 2; grid-row: 1 / span 2; }

/* Phone / tablet: one column, and the 2026-08-20 order — headline and chips,
   then the form, then the supporting copy. The older draft moved the entire
   pitch column below the card, which took the H1 with it. */
@media (max-width: 1100px) {
  .p-signup .su-grid { grid-template-columns: 1fr; }
  .p-signup .su-head,
  .p-signup .su-pitch,
  .p-signup .su-form-col { grid-column: 1; grid-row: auto; }
  .p-signup .su-head { order: 1; margin-bottom: 24px; }
  .p-signup .su-form-col { order: 2; }
  .p-signup .su-pitch { order: 3; margin-top: 40px; }
}

/* ── headline + supporting copy ───────────────────────────────────── */
.p-signup .su-pitch { min-width: 0; }
@keyframes su-led { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.p-signup .su-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.p-signup .su-head h1 .accent { color: var(--green); }

/* Promise chips, straight under the H1 (2026-08-20 design). */
.p-signup .su-promises {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.p-signup .su-promises li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px;
  padding: 7px 11px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
}
.p-signup .su-promises li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}
.p-signup .su-sub { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 480px; margin: 16px 0 0; }
.p-signup .su-sub b { color: var(--ink); }

.p-signup .su-perks { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; max-width: 480px; }
.p-signup .su-perk { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.p-signup .su-perk .ic {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-1); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--green);
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  box-shadow: 0 2px 8px -4px rgba(13,16,14,.2);
}
.p-signup .su-perk .ic svg { width: 17px; height: 17px; }
.p-signup .su-perk .ic.su-ic-green { color: var(--su); }
.p-signup .su-perk .ic.su-ic-gold { color: var(--gd); }
.p-signup .su-perk h4 { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25; margin: 0; }
.p-signup .su-perk p { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 3px 0 0; }

/* ── form card ────────────────────────────────────────────────────── */
.p-signup .su-form-col { min-width: 0; width: 100%; }
.p-signup .su-card {
  position: relative;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px;
  box-shadow: 0 24px 60px -30px rgba(13,16,14,.28), 0 0 0 1px rgba(239, 89, 32,.03);
}
/* Design: brand → gold → brand, not a fade to transparent. */
.p-signup .su-card-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--green), var(--accent-2), var(--green));
}

/* Card eyebrow — mono, uppercase, brand-dark, blinking LED (design). */
.p-signup .su-card-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-2);
}
.p-signup .su-card-eyebrow .led {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: none;
  animation: su-led 2.4s infinite;
}

.p-signup .su-form { display: flex; flex-direction: column; gap: 18px; }
.p-signup .su-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p-signup .su-name-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.p-signup .su-row label, .p-signup .su-label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.p-signup .su-row label .req { color: var(--green); margin-left: 2px; }
.p-signup .su-row label .opt { color: var(--ink-4); }

.p-signup .su-input {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 13px 14px; color: var(--ink);
  font-family: var(--sans); font-size: 14px;
  outline: none; width: 100%; min-width: 0;
  transition: border .15s, box-shadow .15s;
}
.p-signup .su-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(239, 89, 32,.14); }
.p-signup .su-input::placeholder { color: var(--ink-4); }
.p-signup .su-input.invalid { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(196,71,26,.12); }
.p-signup .su-field-err { font-family: var(--mono); font-size: 11px; color: var(--green-2); display: none; }
.p-signup .su-field-err.visible { display: block; }

/* ── company logo dropzone ────────────────────────────────────────── */
.p-signup .su-drop {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 13px;
  border: 1.5px dashed var(--line-2); border-radius: 11px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  transition: border-color .15s; cursor: pointer;
}
.p-signup .su-drop:hover, .p-signup .su-drop.dragover { border-color: var(--green); }
.p-signup .su-drop-tile {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  color: var(--ink-4);
}
.p-signup .su-drop-tile svg { width: 20px; height: 20px; }
.p-signup .su-drop-tile img { width: 100%; height: 100%; object-fit: cover; }
.p-signup .su-drop-txt { flex: 1; min-width: 0; }
.p-signup .su-drop-title {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-signup .su-drop-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.p-signup .su-drop-browse {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 8px 12px; cursor: pointer; flex-shrink: 0;
}
.p-signup .su-drop-browse:hover { border-color: var(--green); color: var(--green); }
.p-signup .su-file-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.p-signup .su-logo-actions { display: flex; gap: 16px; margin-top: 2px; }
.p-signup .su-link-btn {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.p-signup .su-link-btn[hidden] { display: none; }

/* ── plan picker ──────────────────────────────────────────────────── */
.p-signup .su-plan-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.p-signup .su-plan {
  position: relative; display: block;
  border: 1.5px solid var(--line-2); border-radius: 11px;
  padding: 11px 12px; cursor: pointer;
  background: var(--bg-1);
  transition: all .14s;
}
.p-signup .su-plan input { position: absolute; opacity: 0; pointer-events: none; }
.p-signup .su-plan.selected {
  border-color: var(--ink); background: var(--bg-2);
  box-shadow: 0 6px 18px -12px rgba(13,16,14,.3);
}
.p-signup .su-plan-pro { border-color: var(--green); background: rgba(239, 89, 32,.03); }
.p-signup .su-plan-pro.selected {
  border-color: var(--green); background: rgba(239, 89, 32,.06);
  box-shadow: 0 6px 18px -10px rgba(239, 89, 32,.28);
}
.p-signup .su-plan-top { display: flex; align-items: center; justify-content: space-between; }
.p-signup .su-plan-name { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); }
.p-signup .su-plan-pro .su-plan-name { color: var(--green); }
.p-signup .su-plan-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; display: inline-block;
  border: 2px solid var(--line-2); background: var(--bg-1);
}
.p-signup .su-plan.selected .su-plan-dot {
  border-color: var(--green);
  background: radial-gradient(circle, #fff 0 32%, var(--green) 40%);
  box-shadow: none;
}
.p-signup .su-plan-price { display: block; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 7px; }
.p-signup .su-plan-price small { font-size: 9px; color: var(--ink-3); font-weight: 500; }
.p-signup .su-plan-desc { display: block; font-family: var(--mono); font-size: 9px; color: var(--ink-3); line-height: 1.4; margin-top: 3px; }
.p-signup .su-plan-badge {
  position: absolute; top: -8px; right: 9px;
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .06em;
  color: var(--on-brand); background: var(--green); padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(239, 89, 32,.28);
}
.p-signup .su-plan-note { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.p-signup .su-plan-note a { color: var(--green); text-decoration: underline; }

/* ── password rules ───────────────────────────────────────────────── */
.p-signup .su-pw-rules {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 12px; margin-top: 2px;
  display: flex; flex-direction: column; gap: 4px;
}
.p-signup .su-pw-rules .rule { display: flex; align-items: center; gap: 9px; color: var(--ink-4); }
.p-signup .su-pw-rules .rule svg { width: 13px; height: 13px; flex-shrink: 0; }
.p-signup .su-pw-rules .rule .tick { display: none; }
.p-signup .su-pw-rules .rule.ok { color: var(--su); }
.p-signup .su-pw-rules .rule.ok .tick { display: block; }
.p-signup .su-pw-rules .rule.ok .cross { display: none; }

/* ── TOS clickwrap ────────────────────────────────────────────────── */
.p-signup .tos-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 12px 14px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
}
.p-signup .tos-row input[type="checkbox"] {
  margin-top: 2px; width: 16px; height: 16px;
  accent-color: var(--green); cursor: pointer; flex-shrink: 0;
}
.p-signup .tos-row label { cursor: pointer; flex: 1; font-size: 13.5px; letter-spacing: 0; color: var(--ink-2); }
.p-signup .tos-row .tos-link {
  color: var(--green); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
}

/* ── error banner / submit / foot ─────────────────────────────────── */
.p-signup .su-error {
  display: none; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: 9px;
  background: rgba(196,71,26,.07); border: 1px solid rgba(196,71,26,.4);
  font-family: var(--mono); font-size: 12px; color: var(--green-2);
}
.p-signup .su-error.visible { display: flex; }
.p-signup .su-error svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Design: a hard 4px shadow ledge that presses in, brand-ink label. */
.p-signup .su-submit {
  width: 100%; justify-content: center;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 54px; padding: 14px; border: none; border-radius: 11px;
  font-family: var(--mono); font-size: 14.5px; font-weight: 500;
  color: var(--on-brand); background: var(--green);
  box-shadow: 0 4px 0 #a83a12;
  cursor: pointer; margin-top: 14px;
  transition: transform .08s, box-shadow .08s, opacity .15s;
}
.p-signup .su-submit:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #a83a12; }
.p-signup .su-submit:disabled { cursor: wait; opacity: .78; }
.p-signup .su-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(32,16,9,.3); border-top-color: var(--on-brand);
  border-radius: 50%; display: none;
  animation: su-spin .8s linear infinite;
}
.p-signup .su-spinner.visible { display: inline-block; }
@keyframes su-spin { to { transform: rotate(360deg); } }
.p-signup .su-cursor {
  width: 7px; height: 15px; display: inline-block;
  background: var(--on-brand); animation: su-blink 1.1s step-end infinite;
}
.p-signup .su-cursor[hidden] { display: none; }
@keyframes su-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* "or" rule + the sign-in ghost button that follows it (design). */
.p-signup .su-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}
.p-signup .su-or span { flex: 1; height: 1px; background: var(--line); }
.p-signup .su-alt {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--bg-1);
  color: var(--ink-2); font-family: var(--mono); font-size: 14px;
  box-shadow: 0 3px 0 var(--bg-3); text-decoration: none;
  transition: transform .08s, box-shadow .08s, border-color .12s;
}
.p-signup .su-alt:hover { border-color: var(--green); color: var(--green); }
.p-signup .su-alt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bg-3); }

/* Full-bleed promise strip closing the card. Negative margins match the
   card's 32px padding so it reaches both edges without restructuring. */
.p-signup .su-card-strip {
  margin: 22px -32px -32px; padding: 13px 18px;
  border-top: 1px solid var(--line); border-radius: 0 0 15px 15px;
  background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  text-align: center;
}

/* Compact legal row under the card (design). */
.p-signup .su-legal {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 24px; font-size: 13px;
}
.p-signup .su-legal a { color: var(--ink-3); text-decoration: none; }
.p-signup .su-legal a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ── TOS summary modal (kept from the working page, light theme) ──── */
.p-signup .tos-modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(13,16,14,.55); z-index: 200;
  align-items: center; justify-content: center;
  padding: 20px;
}
.p-signup .tos-modal-backdrop.show { display: flex; }
.p-signup .tos-modal {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -20px rgba(13,16,14,.45), 0 0 0 1px rgba(239, 89, 32,.06);
  overflow: hidden;
}
.p-signup .tos-modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.p-signup .tos-modal-head h2 {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; margin: 0;
}
.p-signup .tos-modal-head .close {
  background: transparent; border: 1px solid var(--line);
  width: 30px; height: 30px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); transition: all .12s;
}
.p-signup .tos-modal-head .close:hover { background: var(--bg-2); color: var(--ink); }
.p-signup .tos-modal-body {
  padding: 20px 22px; overflow-y: auto; flex: 1;
  color: var(--ink-2); font-size: 13.5px; line-height: 1.65;
}
.p-signup .tos-modal-body h3 {
  font-family: var(--display); font-size: 14px; color: var(--ink);
  font-weight: 600; margin: 18px 0 6px; letter-spacing: -.005em;
}
.p-signup .tos-modal-body h3:first-child { margin-top: 0; }
.p-signup .tos-modal-body p { margin-bottom: 10px; }
/* The design's one-line summary under each heading — the "60-second" read. */
.p-signup .tos-modal-body .tos-lede {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 10px;
}
.p-signup .tos-modal-body b { color: var(--ink); font-weight: 600; }
.p-signup .tos-modal-body ul { padding-left: 20px; margin-bottom: 10px; }
.p-signup .tos-modal-body li { margin-bottom: 4px; }
.p-signup .tos-modal-body a { color: var(--green); text-decoration: underline; }
.p-signup .tos-modal-body .caps {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink); text-transform: uppercase;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 10px 12px; margin: 10px 0; line-height: 1.7; letter-spacing: .02em;
}
.p-signup .tos-modal-body .caps b { color: var(--green); }
.p-signup .tos-modal-foot {
  padding: 14px 22px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0;
  background: var(--bg-2);
}
.p-signup .tos-modal-foot .btn { padding: 10px 18px; font-size: 13px; }
/* The fourth white-on-orange, and the one the port missed because it is
   inherited rather than written here: marketing-shell.css sets
   `.btn-primary { background: var(--green); color: #ffffff; }` and repeats
   the white under body[data-theme="dark"]. That is the "I agree" button in
   this modal — #fff on var(--brand), ~3:1, in both themes. Overridden page-scoped
   at (0,3,0), which beats both shell rules; the shell rule itself serves
   every other marketing page and is not this page's to change. */
.p-signup .tos-modal-foot .btn-primary { color: var(--on-brand); }

/* ── responsive ───────────────────────────────────────────────────── */
.p-signup ::selection { background: var(--brand); color: var(--on-brand); }
@media (max-width: 560px) {
  .p-signup .su-name-row { grid-template-columns: 1fr; }
  .p-signup .su-plan-row { grid-template-columns: 1fr; }
  /* Phone padding from the design: 18px on the page and inside the card,
     not the desktop 36/32. At 375px the old values left 237px of usable
     width and squeezed the dropzone row. */
  .p-signup { padding: 20px 18px 30px; }
  .p-signup .su-card { padding: 20px 18px; border-radius: 18px; }
  .p-signup .su-card-bar { border-radius: 17px 17px 0 0; }
  .p-signup .su-card-strip { margin: 20px -18px -20px; border-radius: 0 0 17px 17px; }
  .p-signup .su-head h1 { font-size: 34px; }
  .p-signup .su-perks, .p-signup .su-sub { max-width: none; }
  /* The card sets the page's minimum width; nothing inside it may exceed it. */
  .p-signup .su-drop { gap: 10px; padding: 10px; }
  .p-signup .su-drop-browse { padding: 8px 10px; }
  /* "Read the full document →" and "I agree" do not fit side by side at
     375px — the row is justify-content:flex-end inside an overflow:hidden
     modal, so the first button was silently clipped at the left edge rather
     than scrolling the page. Stack them, full width, doc link on top as the
     design orders them. */
  .p-signup .tos-modal-backdrop { padding: 12px; }
  .p-signup .tos-modal-foot { flex-direction: column; gap: 8px; }
  .p-signup .tos-modal-foot .btn { width: 100%; justify-content: center; text-align: center; }
}