/* ═══════════════════════════════════════════════════════════════════════════
   FORMS — signup and licence activation.
   Loaded after landing-desk.css, scoped to body.form-desk.

   These two are the only signed-out pages where somebody types something that
   costs them money. Their DOM is generated by the checkout and activation
   scripts, so the markup contract is left exactly as it is and this file
   restyles it into the desk language. Changing the shape of a payment form to
   match a landing page is not a trade worth making.
   ═══════════════════════════════════════════════════════════════════════════ */

body.form-desk { --fm: #6366f1; }

/* the shell: desk nav and footer, a centred column between them */
body.form-desk .fm-wrap { padding: 30px 0 70px; }
body.form-desk .fm-head { text-align: center; padding: 34px 0 6px; }
body.form-desk .fm-kicker {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fm);
  margin-bottom: 14px;
}
body.form-desk h1.fm-title {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--dk-ink);
}
body.form-desk .fm-lede {
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--dk-mute);
  max-width: 560px;
}

/* ── the card the form sits on ────────────────────────────────────────────── */
body.form-desk .fm-card,
body.form-desk .signup-card,
body.form-desk .activation-card,
body.form-desk .success-card,
body.form-desk .license-info-card {
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 34px 36px 36px;
}

/* ── inputs ───────────────────────────────────────────────────────────────── */
body.form-desk input[type="text"],
body.form-desk input[type="email"],
body.form-desk input[type="tel"],
body.form-desk input[type="password"],
body.form-desk select,
body.form-desk textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(6, 9, 15, 0.5);
  border: 1px solid var(--dk-line);
  border-radius: 11px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--dk-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.form-desk input::placeholder,
body.form-desk textarea::placeholder { color: #5f6b80; }
body.form-desk input:focus,
body.form-desk select:focus,
body.form-desk textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fm) 65%, transparent);
  background: rgba(6, 9, 15, 0.72);
}
body.form-desk label,
body.form-desk .form-label {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
  margin-bottom: 7px;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
body.form-desk button[type="submit"],
body.form-desk .btn-primary,
body.form-desk .submit-btn {
  background: var(--fm);
  color: #fff;
  border: 0;
  border-radius: 11px;
  padding: 13px 26px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
body.form-desk button[type="submit"]:hover,
body.form-desk .btn-primary:hover,
body.form-desk .submit-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
body.form-desk button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── the order summary on signup ──────────────────────────────────────────── */
body.form-desk .order-summary,
body.form-desk .order-card {
  border-radius: 16px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.04);
  padding: 24px 26px;
}
body.form-desk .order-plan-name {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
}
body.form-desk .order-row,
body.form-desk .order-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  color: var(--dk-mute);
}
body.form-desk .order-row .value,
body.form-desk .order-line .value {
  font-family: var(--font-family-mono);
  color: var(--dk-ink);
  font-variant-numeric: tabular-nums;
}
body.form-desk .order-total .value { font-size: 19px; }
body.form-desk .order-per-month {
  margin-top: 8px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--dk-dim);
}

/* ── messages ─────────────────────────────────────────────────────────────── */
body.form-desk .error-message,
body.form-desk .message.error {
  border-radius: 11px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  padding: 12px 15px;
  font-size: 14px;
}
body.form-desk .success-message,
body.form-desk .message.success {
  border-radius: 11px;
  border: 1px solid rgba(74, 222, 128, 0.34);
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
  padding: 12px 15px;
  font-size: 14px;
}

/* ── reassurance strip under the form ─────────────────────────────────────── */
body.form-desk .fm-assure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
body.form-desk .fm-assure div {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.035);
}
body.form-desk .fm-assure b { display: block; font-size: 13.5px; color: var(--dk-ink); margin-bottom: 4px; }
body.form-desk .fm-assure span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--dk-dim); }

@media (max-width: 700px) {
  body.form-desk .fm-card,
  body.form-desk .signup-card,
  body.form-desk .activation-card { padding: 24px 20px 26px; }
}

/* activation is a single short form; a full-width card makes it look lost */
body.form-desk .login-form-panel.fm-card {
  max-width: 620px;
  margin: 30px auto 0;
}
body.form-desk .login-form-panel .form-group { margin-bottom: 18px; }
body.form-desk .login-form-panel .license-textarea { min-height: 130px; resize: vertical; }
body.form-desk .login-form-panel .form-hint,
body.form-desk .login-form-panel .login-footer-text {
  font-size: 13px;
  color: var(--dk-dim);
  margin-top: 10px;
}
body.form-desk .login-form-panel a { color: var(--fm); text-decoration: none; }
body.form-desk .login-form-panel a:hover { text-decoration: underline; }

/* ── signup layout ────────────────────────────────────────────────────────────
   The old page carried 20KB of inline CSS that did both the skin AND the
   layout. Dropping it took the layout with it, so the structural rules the
   checkout markup needs live here now: a two-column split with the form on
   the left and the order summary beside it, collapsing to one column when
   there is no room for two. */
body.form-desk .signup-header { text-align: center; margin-bottom: 26px; }
body.form-desk .signup-header h1 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 8px;
}
body.form-desk .signup-header .subtitle { font-size: 14.5px; color: var(--dk-mute); margin: 0; }
body.form-desk .signup-header .subtitle strong { color: var(--dk-ink); }

body.form-desk .signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 24px;
  align-items: start;
}
body.form-desk .signup-form-card,
body.form-desk .order-summary-card {
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 30px 32px 32px;
}
body.form-desk .order-summary-card { position: sticky; top: 24px; }
body.form-desk .signup-form-card h2,
body.form-desk .order-summary-card h2 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 20px;
}
body.form-desk .form-group { margin-bottom: 18px; }
body.form-desk .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.form-desk .required { color: #fca5a5; }
body.form-desk .help-text { display: block; margin-top: 7px; font-size: 12.5px; color: var(--dk-dim); }
body.form-desk .signup-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;
}
body.form-desk .signup-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--dk-dim);
}
body.form-desk .signup-footer a { color: var(--fm); text-decoration: none; }
body.form-desk .signup-footer a:hover { text-decoration: underline; }
body.form-desk .signup-message { margin-top: 16px; }
body.form-desk .order-divider { height: 1px; background: rgba(255, 255, 255, 0.09); margin: 12px 0; }
body.form-desk .order-line .label { color: var(--dk-mute); }
body.form-desk .order-total { border-bottom: 0; padding-top: 14px; }
body.form-desk .order-total .label { color: var(--dk-ink); font-weight: 600; }
body.form-desk .order-trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86efac;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.32);
}
body.form-desk .no-plan-message { text-align: center; padding: 50px 20px; }
body.form-desk .no-plan-message p { color: var(--dk-mute); margin: 0 0 8px; }
body.form-desk .no-plan-message a { color: var(--fm); }

@media (max-width: 940px) {
  body.form-desk .signup-layout { grid-template-columns: 1fr; }
  body.form-desk .order-summary-card { position: static; }
  body.form-desk .form-row { grid-template-columns: 1fr; }
}

/* ── sign in, register, password reset ────────────────────────────────────────
   These four keep their own DOM because the auth scripts bind to it. What
   changes is the shell around them and the surfaces underneath. A signed-out
   person arriving here has usually just come from a page in the desk
   language, and landing somewhere that looks like a different product is a
   small but real reason to hesitate. */
body.form-desk .auth-container,
body.form-desk .login-form-container { max-width: 460px; margin: 0 auto; }
body.form-desk .auth-card,
body.form-desk .login-form-container.fm-card,
body.form-desk #forgotPasswordCard,
body.form-desk #resetCard,
body.form-desk #errorCard,
body.form-desk #successCard {
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 30px 32px 32px;
}
body.form-desk .auth-header { text-align: center; margin-bottom: 22px; }
body.form-desk .auth-header h1,
body.form-desk .auth-header h2 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 6px;
}
body.form-desk .auth-subtitle { font-size: 14px; color: var(--dk-mute); margin: 0; }
body.form-desk .auth-logo-img { height: 26px; width: auto; margin-bottom: 16px; }
body.form-desk .auth-form .form-group,
body.form-desk .login-form .form-group { margin-bottom: 17px; }
body.form-desk .auth-footer,
body.form-desk .login-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--dk-dim);
}
body.form-desk .auth-link,
body.form-desk .auth-footer a,
body.form-desk .login-footer a { color: var(--fm); text-decoration: none; }
body.form-desk .auth-link:hover,
body.form-desk .auth-footer a:hover { text-decoration: underline; }
body.form-desk .login-submit-btn,
body.form-desk .auth-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}
/* the password reveal sits inside the field */
body.form-desk .input-wrapper { position: relative; }
body.form-desk .input-wrapper button,
body.form-desk .password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--dk-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
body.form-desk .input-wrapper button:hover,
body.form-desk .password-toggle:hover { color: var(--dk-ink); background: rgba(255, 255, 255, 0.06); }
body.form-desk .input-wrapper input { padding-right: 42px; }
/* the old pages carried their own backdrop and a theme toggle; the desk has
   its own wash and is dark-only, so both are noise here */
body.form-desk .auth-grid-overlay,
body.form-desk .auth-theme-toggle,
body.form-desk .showcase-bg { display: none; }

/* leading icon inside a field — the auth markup puts an SVG before the input */
body.form-desk .input-wrapper .input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #5f6b80;
  pointer-events: none;
}
body.form-desk .input-wrapper:has(.input-icon) input { padding-left: 40px; }
body.form-desk .form-input { width: 100%; box-sizing: border-box; }

/* sign-in: the form container IS the card here */
body.form-desk .login-form-container {
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 30px 32px 32px;
  margin-top: 28px;
}
/* label and "forgot password" share a line — stacked, the link reads as if it
   belongs to the field above it */
body.form-desk .label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}
body.form-desk .label-row .form-label { margin-bottom: 0; }
body.form-desk .forgot-password-link {
  font-size: 12.5px;
  color: var(--fm);
  text-decoration: none;
}
body.form-desk .forgot-password-link:hover { text-decoration: underline; }

/* ── button spinner ───────────────────────────────────────────────────────────
   button-spinner.js injects a .btn-spinner and expects the stylesheet to keep
   it hidden until the button carries .loading. That rule used to live in
   login-redesign.css; dropping that file left the spinner running on every
   submit button forever. It lives here now, with the auth pages. */
body.form-desk .btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fmSpin 0.7s linear infinite;
}
body.form-desk button.loading .btn-spinner,
body.form-desk .loading .btn-spinner { display: inline-block; }
body.form-desk button.loading { pointer-events: none; opacity: 0.9; }
body.form-desk button.loading .btn-arrow { display: none; }
@keyframes fmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.form-desk .btn-spinner { animation-duration: 1.6s; }
}

/* ── sign-in: a split, not a card floating in space ───────────────────────────
   A centred box on an empty page tells somebody nothing about what they are
   signing in to. The left column carries the claim and the product's own wave;
   the right carries the form. */
body.form-desk .fm-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
  padding: 54px 0 80px;
}
body.form-desk .fm-pitch h2 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--dk-ink);
  margin: 18px 0 0;
}
body.form-desk .fm-pitch > p {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--dk-mute);
  max-width: 480px;
}
body.form-desk .fm-wave {
  margin-top: 32px;
  height: 116px;
  border-radius: 14px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  position: relative;
}
body.form-desk .fm-wave svg { width: 100%; height: 100%; display: block; }
body.form-desk .fm-wave span {
  position: absolute;
  left: 16px;
  top: 12px;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
}
body.form-desk .fm-points { margin: 26px 0 0; display: grid; gap: 12px; }
body.form-desk .fm-points div {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dk-mute);
}
body.form-desk .fm-points svg {
  width: 14px; height: 14px;
  margin-top: 3px;
  fill: none;
  stroke: var(--fm);
  stroke-width: 2.6;
}
body.form-desk .fm-points b { color: var(--dk-ink); font-weight: 600; }

@media (max-width: 920px) {
  body.form-desk .fm-split { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
  body.form-desk .fm-pitch { order: 2; }
}

/* the auth markup's container was built to fill the viewport on a page that
   had no header above it. Inside the desk shell that leaves a screen-height
   hole between the heading and the card. */
body.form-desk .auth-container {
  min-height: 0;
  padding: 0;
  display: block;
  margin-top: 28px;
}

/* styles.css carries `body:has(.auth-container) { display: flex }` to centre a
   bare auth page. Inside the desk shell that turns the whole wrap into a
   shrink-to-fit flex item, so the page renders at about half width. */
body.form-desk {
  display: block;
  align-items: initial;
  justify-content: initial;
}

/* styles.css is loaded here for the spinner, and brings its own page gradient
   with it — which reads noticeably bluer than every other desk page. */
body.form-desk { background: var(--dk-bg); }

/* the form column of a split page: its panel IS the card */
body.form-desk .fm-formcol .login-form-panel,
body.form-desk .fm-formcol .login-form-container {
  border-radius: 20px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 30px 32px 32px;
  max-width: none;
  margin: 0;
}
/* ...but only once — the activation panel wraps its own form container */
body.form-desk .fm-formcol .login-form-panel .login-form-container {
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}
body.form-desk .fm-formcol .fm-head { margin-bottom: 22px; }

/* buttons carry an icon and a label; without an explicit flex box the SVG sits
   on the text baseline and rides a couple of pixels high */
body.form-desk button[type="submit"],
body.form-desk .btn-primary,
body.form-desk .submit-btn,
body.form-desk .login-submit-btn,
body.form-desk .auth-submit-btn,
body.form-desk .signup-submit-btn,
body.form-desk #activateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1;
}
body.form-desk button svg,
body.form-desk .btn-primary svg {
  width: 17px;
  height: 17px;
  flex: none;
  display: block;
}
/* the label is the thing that should sit on the optical centre */
body.form-desk button .btn-text { display: inline-block; line-height: 1; }