/* SaaS sign-in extras (signin.html, onboarding.html): Google button, "or" divider, notes, links, the organisation form. */
.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 15px var(--font); transition: box-shadow .2s, transform .2s; }
.google svg { width: 20px; height: 20px; } .google:hover { box-shadow: 0 6px 18px -8px rgba(10, 30, 80, .35); transform: translateY(-1px); }
.google:disabled { opacity: .6; cursor: progress; }
.or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #ecf7f1; color: #136c45; font-size: 13.5px; line-height: 1.45; }
.switch { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.link { border: 0; background: none; padding: 0; color: var(--red-2); font: 600 13.5px var(--font); cursor: pointer; }
.link:hover { text-decoration: underline; } .link[hidden] { display: none; }
.field select { width: 100%; height: 56px; padding: 22px 14px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .85);
  color: var(--ink); font: 500 15px var(--font); appearance: none; }
.field select + label { transform: translateY(-10px) scale(.76); }