body.page-signup {
      background:
        radial-gradient(circle at 18% 10%, rgba(0, 122, 61, 0.08), transparent 26%),
        radial-gradient(circle at 82% 24%, rgba(116, 198, 157, 0.11), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfc 42%, #f7fbf9 100%);
      overflow-x: hidden;
    }

    body.page-signup.signup-modal-open {
      overflow: hidden;
    }

    body.page-signup main {
      max-width: 1280px;
      width: 100%;
      padding: 24px 38px 44px;
    }

    .signup-page {
      display: grid;
      gap: 28px;
      width: 100%;
      min-width: 0;
    }

    .signup-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .signup-logo {
      display: inline-flex;
      align-items: center;
      width: 224px;
      max-width: 62vw;
    }

    .signup-logo img {
      width: 100%;
      height: auto;
    }

    .signup-safe-note,
    .signup-chip,
    .signup-small-note {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #53606e;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .signup-safe-note img,
    .signup-chip img,
    .signup-small-note img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .signup-progress-card {
      padding: 34px 56px 28px;
      border: 1px solid rgba(205, 215, 211, 0.94);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 22px 54px rgba(20, 34, 49, 0.08);
      backdrop-filter: blur(12px);
    }

    .signup-progress {
      display: grid;
      grid-template-columns: repeat(var(--signup-progress-count, 5), minmax(0, 1fr));
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .signup-progress.is-company-flow {
      --signup-progress-count: 3;
    }

    .signup-progress-step {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 10px;
      color: #66707b;
      font-weight: 700;
      text-align: center;
    }

    .signup-progress-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 24px;
      left: calc(50% + 50px);
      width: calc(100% - 100px);
      height: 1px;
      background: #d6dce0;
    }

    .signup-progress-dot {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid #cfd7dc;
      background: #ffffff;
      color: #5f6872;
      font-size: 18px;
      font-weight: 800;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88);
    }

    .signup-progress-step.is-active {
      color: #007a3d;
    }

    .signup-progress-step.is-active .signup-progress-dot {
      border-color: transparent;
      color: #ffffff;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28), transparent 28%),
        linear-gradient(145deg, #39a66a 0%, #007a3d 100%);
      box-shadow: 0 12px 22px rgba(0, 122, 61, 0.22);
    }

    .signup-hero {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      justify-items: center;
      gap: 14px;
      text-align: center;
    }

    .signup-hero h1 {
      max-width: 820px;
      font-size: clamp(42px, 5.3vw, 66px);
      line-height: 0.98;
      letter-spacing: 0;
      color: #13202b;
    }

    .signup-hero p {
      max-width: 680px;
      color: #626c77;
      font-size: clamp(17px, 1.8vw, 21px);
      line-height: 1.5;
    }

    .signup-chips {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 22px;
      margin-top: 10px;
    }

    .signup-chip {
      min-height: 48px;
      padding: 0 26px;
      border-radius: 999px;
      background: rgba(229, 244, 235, 0.92);
      color: #172533;
      box-shadow: inset 0 0 0 1px rgba(0, 122, 61, 0.04);
    }

    .signup-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
      gap: 30px;
      align-items: start;
      max-width: 1160px;
      width: 100%;
      margin: 0 auto;
    }

    .signup-panel {
      min-width: 0;
      border: 1px solid rgba(205, 215, 211, 0.94);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 22px 48px rgba(20, 34, 49, 0.07);
    }

    .signup-form-panel {
      padding: 30px 34px 26px;
    }

    .signup-panel h2,
    .signup-panel h3 {
      margin: 0;
      font-family: "Manrope", "Segoe UI", sans-serif;
      color: #162233;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .signup-panel h2 {
      font-size: 24px;
      font-weight: 800;
    }

    .signup-panel h3 {
      font-size: 20px;
      font-weight: 800;
    }

    .signup-form {
      display: grid;
      gap: 14px;
      margin-top: 22px;
    }

    .signup-google-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      min-height: 50px;
      margin-top: 20px;
      border: 1px solid #cfdad4;
      border-radius: 12px;
      background: #ffffff;
      color: #172233;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 8px 18px rgba(20, 34, 49, 0.05);
    }

    .signup-google-button:hover {
      border-color: #8ebfa1;
      background: #f7fbf8;
    }

    .signup-google-mark {
      color: #4285f4;
      font-family: Arial, sans-serif;
      font-size: 22px;
      font-weight: 800;
    }

    .signup-google-note {
      margin: 10px 0 0;
      color: #64717c;
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }

    .signup-google-separator {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0 -4px;
      color: #77828c;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .signup-google-separator::before,
    .signup-google-separator::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #dbe4df;
    }

    .signup-field {
      display: grid;
      gap: 8px;
      color: #1c2940;
      font-size: 14px;
      font-weight: 800;
      text-align: left;
    }

    .signup-required {
      color: #e14d3d;
    }

    .signup-field input,
    .signup-field select,
    .signup-field textarea {
      min-width: 0;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 12px;
      border: 1px solid #ccd6dd;
      background: #ffffff;
      color: #162233;
      box-shadow: inset 0 1px 0 rgba(20, 34, 49, 0.02);
    }

    .signup-field textarea {
      min-height: 112px;
      padding-top: 14px;
      padding-bottom: 14px;
      resize: vertical;
    }

    .signup-field input::placeholder,
    .signup-field textarea::placeholder {
      color: #9aa5b1;
    }

    .signup-field input:focus,
    .signup-field select:focus,
    .signup-field textarea:focus {
      outline: none;
      border-color: #21945a;
      box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.1);
    }

    .signup-account-type {
      display: grid;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(0, 122, 61, 0.18);
      border-radius: 14px;
      background: #f8fcfa;
      text-align: left;
    }

    .signup-account-type > span,
    .signup-company-fields > span {
      color: #1c2940;
      font-size: 14px;
      font-weight: 900;
    }

    .signup-account-type ul,
    .signup-account-type > div {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .signup-account-type li,
    .signup-account-type > div > div {
      min-width: 0;
    }

    .signup-account-type label {
      position: relative;
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 14px 10px 40px;
      border: 1px solid #d1dce3;
      border-radius: 10px;
      background: #fff;
      color: #162233;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.25;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .signup-account-type input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }

    .signup-account-type label::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 14px;
      width: 16px;
      height: 16px;
      border: 2px solid #9aa8b2;
      border-radius: 999px;
      background: #ffffff;
      transform: translateY(-50%);
      transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

    .signup-account-type label:hover {
      border-color: rgba(0, 122, 61, 0.34);
      background: #fbfefc;
    }

    .signup-account-type label:has(input:checked) {
      border-color: rgba(0, 122, 61, 0.7);
      background: #edf8f2;
      color: #075f36;
      box-shadow: inset 0 0 0 1px rgba(0, 122, 61, 0.06);
    }

    .signup-account-type label:has(input:checked)::before {
      border-color: #007a3d;
      background: #007a3d;
      box-shadow: inset 0 0 0 4px #ffffff;
    }

    .signup-account-type label:has(input:focus-visible) {
      outline: 3px solid rgba(0, 122, 61, 0.16);
      outline-offset: 2px;
    }

    .signup-company-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding: 14px;
      border: 1px solid rgba(0, 122, 61, 0.18);
      border-radius: 14px;
      background: #fbfdfc;
    }

    .signup-company-fields[hidden] {
      display: none;
    }

    .signup-company-only[hidden],
    .signup-individual-only[hidden],
    .signup-doc-row[hidden] {
      display: none;
    }

    .signup-company-fields > span,
    .signup-company-fields .is-wide {
      grid-column: 1 / -1;
    }

    .signup-password-wrap {
      position: relative;
    }

    .signup-password-wrap input {
      padding-right: 54px;
    }

    body.page-signup .signup-eye-button {
      position: absolute;
      top: 50%;
      right: 12px;
      width: 34px;
      min-width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      transform: translateY(-50%);
      border: none;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
    }

    body.page-signup .signup-eye-button:hover {
      transform: translateY(-50%);
      box-shadow: none;
      background: rgba(0, 122, 61, 0.08);
    }

    .signup-eye-button img {
      width: 22px;
      height: 22px;
      object-fit: contain;
    }

    .signup-error {
      display: block;
      color: #9c2620;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .signup-form-errors {
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(185, 28, 28, 0.2);
      background: rgba(185, 28, 28, 0.06);
      color: #8f1d1d;
      font-weight: 700;
      line-height: 1.55;
    }

    .signup-docs {
      display: grid;
      gap: 12px;
      margin-top: 10px;
      padding-top: 22px;
      border-top: 1px solid #dfe5e8;
    }

    .signup-docs p {
      margin: 0;
      color: #687380;
      line-height: 1.55;
    }

    .signup-doc-list {
      display: grid;
      gap: 0;
      border: 1px solid #dbe2e6;
      border-radius: 14px;
      overflow: hidden;
      background: #ffffff;
    }

    .signup-doc-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      padding: 9px 14px;
      border-bottom: 1px solid #e1e7ea;
    }

    .signup-doc-row:last-child {
      border-bottom: none;
    }

    .signup-doc-consent {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0;
      color: #172538;
      font-weight: 800;
      line-height: 1.25;
      min-width: 0;
    }

    .signup-doc-consent span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .signup-doc-consent input {
      width: 19px;
      height: 19px;
      margin: 0;
      accent-color: #007a3d;
      flex: 0 0 auto;
    }

    body.page-signup .signup-read-button {
      min-height: 42px;
      padding: 0 22px;
      border-radius: 10px;
      border: 1px solid #209459;
      background: #ffffff;
      color: #007a3d;
      font-size: 14px;
      font-weight: 800;
      box-shadow: none;
    }

    body.page-signup .signup-read-button:hover {
      transform: none;
      background: rgba(0, 122, 61, 0.06);
      box-shadow: none;
    }

    body.page-signup .signup-submit {
      width: 100%;
      min-height: 56px;
      margin-top: 10px;
      border-radius: 12px;
      background: linear-gradient(135deg, #39a66a 0%, #007a3d 100%);
      color: #ffffff;
      box-shadow: 0 18px 34px rgba(0, 122, 61, 0.22);
      font-size: 20px;
    }

    .signup-form-footer {
      display: grid;
      justify-items: center;
      gap: 16px;
      padding-top: 14px;
      text-align: center;
    }

    .signup-small-note {
      color: #7a8490;
      font-weight: 700;
    }

    .signup-small-note img {
      width: 18px;
      height: 18px;
    }

    .signup-login-link {
      display: inline-flex;
      color: #007a3d;
      font-weight: 800;
      text-decoration: none;
    }

    .signup-side {
      display: grid;
      gap: 30px;
    }

    .signup-plan-card {
      display: grid;
      gap: 14px;
      padding: 30px 34px 26px;
      text-align: center;
      background:
        radial-gradient(circle at 80% 12%, rgba(0, 122, 61, 0.08), transparent 32%),
        rgba(255, 255, 255, 0.92);
    }

    .signup-eyebrow {
      color: #007a3d;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .signup-plan-card h2 {
      font-family: "Fraunces", "Georgia", serif;
      font-size: 34px;
      line-height: 1.05;
    }

    .signup-plan-card p {
      color: #66707c;
      font-size: 15px;
      line-height: 1.55;
    }

    .signup-price-list {
      display: grid;
      text-align: left;
    }

    .signup-price-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 9px 0;
      border-bottom: 1px solid #dde6e9;
      color: #64707d;
      line-height: 1.4;
    }

    .signup-price-row strong {
      color: #172233;
      white-space: nowrap;
    }

    .signup-price-row.is-total {
      align-items: center;
      margin-top: 6px;
      padding: 12px 14px;
      border: 1px solid #d2e4da;
      border-radius: 10px;
      background: #eef8f2;
      color: #172233;
      font-weight: 800;
    }

    .signup-price-row.is-total strong {
      font-size: 20px;
    }

    .signup-vat-note {
      margin: 8px 0 0;
      color: #66707c;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.45;
      text-align: right;
    }

    .signup-info-box {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      padding: 12px;
      border: 1px solid #cfded6;
      border-radius: 12px;
      background: rgba(240, 248, 244, 0.88);
      color: #4e5d68;
      text-align: left;
      font-size: 14px;
      line-height: 1.45;
    }

    .signup-info-box img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }

    .signup-feature-list {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: left;
    }

    .signup-feature-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: #172233;
      line-height: 1.35;
    }

    .signup-feature-list li::before {
      content: "";
      width: 21px;
      height: 21px;
      margin-top: 1px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, #39a66a 0%, #007a3d 100%);
      flex: 0 0 auto;
      box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0);
    }

    .signup-feature-list li span {
      position: relative;
    }

    .signup-feature-list li span::before {
      content: "";
      position: absolute;
      left: -26px;
      top: 8px;
      width: 8px;
      height: 4px;
      border-left: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      transform: rotate(-45deg);
    }

    .signup-next-card {
      display: grid;
      gap: 20px;
      padding: 30px 34px;
    }

    .signup-next-list {
      display: grid;
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .signup-next-list li {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      color: #313f4c;
      line-height: 1.5;
    }

    .signup-next-icon,
    .signup-trust-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #eef8f3;
      border: 1px solid rgba(0, 122, 61, 0.12);
    }

    .signup-next-icon {
      width: 58px;
      height: 58px;
    }

    .signup-next-icon img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }

    .signup-trust {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      max-width: 1220px;
      margin: 8px auto 0;
      padding: 24px;
      border: 1px solid rgba(205, 215, 211, 0.94);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 16px 38px rgba(20, 34, 49, 0.05);
    }

    .signup-trust-item {
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 0 24px;
      text-align: center;
      border-right: 1px solid #dfe7e3;
    }

    .signup-trust-item:last-child {
      border-right: none;
    }

    .signup-trust-icon {
      width: 54px;
      height: 54px;
      background: transparent;
      border: none;
    }

    .signup-trust-icon img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .signup-trust-item strong {
      color: #172233;
      font-size: 16px;
    }

    .signup-trust-item p {
      margin: 0;
      color: #677481;
      line-height: 1.55;
    }

    dialog.document-modal {
      width: min(920px, calc(100vw - 32px));
      max-height: min(900px, calc(100vh - 28px));
      border: 1px solid rgba(205, 215, 211, 0.96);
      border-radius: 24px;
      padding: 0;
      background:
        radial-gradient(circle at 86% 4%, rgba(0, 122, 61, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      box-shadow: 0 32px 82px rgba(17, 24, 39, 0.28);
      overflow: hidden;
    }

    dialog.document-modal::backdrop {
      background: rgba(15, 23, 42, 0.5);
      backdrop-filter: blur(6px);
    }

    .document-modal-shell {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      max-height: min(900px, calc(100vh - 28px));
      text-align: left;
    }

    .document-modal-topbar,
    .document-modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(14px);
      z-index: 2;
    }

    .document-modal-topbar {
      padding: 18px 22px;
      border-bottom: 1px solid #dde7e2;
    }

    .document-modal-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #007a3d;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .document-modal-kicker img {
      width: 22px;
      height: 22px;
      object-fit: contain;
    }

    .document-modal-topbar h2 {
      margin: 4px 0 0;
      font-family: "Manrope", "Segoe UI", sans-serif;
      font-size: clamp(18px, 2vw, 24px);
      line-height: 1.2;
      color: #172233;
    }

    body.page-signup .document-close-button {
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid #cfded6;
      color: #172233;
      box-shadow: none;
      white-space: nowrap;
    }

    body.page-signup .document-close-button:hover {
      transform: none;
      background: #eef8f3;
      box-shadow: none;
    }

    .document-modal-body {
      min-height: 0;
      padding: 24px;
      overflow-y: auto;
    }

    .document-modal-body .legal-sheet {
      display: grid;
      gap: 16px;
    }

    .document-modal-body .legal-sheet-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      padding: 22px;
      border: 1px solid #d9e6df;
      border-radius: 18px;
      background:
        radial-gradient(circle at top right, rgba(0, 122, 61, 0.08), transparent 34%),
        #ffffff;
      box-shadow: 0 16px 34px rgba(20, 34, 49, 0.05);
    }

    .document-modal-body .legal-sheet-header img {
      width: 132px;
      max-width: 100%;
      height: auto;
    }

    .document-modal-body .legal-sheet-meta {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .document-modal-body .legal-sheet-meta h1 {
      margin: 0;
      font-family: "Fraunces", "Georgia", serif;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.02;
      letter-spacing: 0;
      color: #172233;
    }

    .document-modal-body .badge {
      padding: 9px 13px;
      border-radius: 999px;
      background: #e8f6ee;
      color: #007a3d;
      font-size: 12px;
      box-shadow: none;
    }

    .document-modal-body .legal-summary,
    .document-modal-body .muted {
      margin: 0;
      color: #62707d;
      line-height: 1.65;
    }

    .document-modal-body .legal-draft-note {
      display: none;
    }

    .document-modal-body .legal-section,
    .document-modal-body .legal-closing-note,
    .document-modal-body .legal-references {
      display: grid;
      gap: 10px;
      padding: 18px;
      border: 1px solid #dfe7e3;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
    }

    .document-modal-body .legal-section h2,
    .document-modal-body .legal-references h2 {
      margin: 0;
      font-family: "Manrope", "Segoe UI", sans-serif;
      font-size: 18px;
      line-height: 1.25;
      color: #172233;
    }

    .document-modal-body .legal-section p,
    .document-modal-body .legal-section li,
    .document-modal-body .legal-closing-note p,
    .document-modal-body .legal-references li {
      margin: 0;
      color: #53616d;
      font-size: 15px;
      line-height: 1.72;
    }

    .document-modal-body .legal-section ul,
    .document-modal-body .legal-references ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 20px;
    }

    .document-modal-body .legal-references a {
      color: #007a3d;
      font-weight: 800;
      text-decoration: none;
    }

    .document-modal-body .legal-references a:hover {
      text-decoration: underline;
    }

    .document-modal-actions {
      justify-content: flex-end;
      padding: 16px 22px;
      border-top: 1px solid #dde7e2;
    }

    .document-modal-actions .button,
    .document-modal-actions button {
      min-height: 46px;
      border-radius: 12px;
      box-shadow: none;
    }

    .document-modal-actions button:not(.secondary) {
      background: linear-gradient(135deg, #39a66a 0%, #007a3d 100%);
      color: #ffffff;
    }

    .document-modal-actions .button.secondary {
      background: #ffffff;
      border-color: #209459;
      color: #007a3d;
    }

    @media (max-width: 880px) {
      body.page-signup main {
        padding-left: 24px;
        padding-right: 24px;
      }

      .signup-progress-card {
        padding: 28px 24px;
      }

      .signup-progress-step:not(:last-child)::after {
        left: calc(50% + 42px);
        width: calc(100% - 84px);
      }

      .signup-grid {
        grid-template-columns: 1fr;
      }

      .signup-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .signup-trust-item:nth-child(2) {
        border-right: none;
      }

      .signup-trust-item:nth-child(-n + 2) {
        padding-bottom: 24px;
        border-bottom: 1px solid #dfe7e3;
      }

      .signup-trust-item:nth-child(n + 3) {
        padding-top: 24px;
      }
    }

    @media (max-width: 680px) {
      body.page-signup main {
        padding: 22px 16px 36px;
      }

      .signup-page {
        gap: 26px;
      }

      .signup-topbar,
      .signup-progress-card,
      .signup-hero,
      .signup-grid,
      .signup-trust {
        width: min(100%, 358px);
        max-width: 358px;
        justify-self: start;
        margin-left: 0;
        margin-right: 0;
      }

      .signup-hero h1 {
        width: min(100%, 330px);
      }

      .signup-hero p {
        width: min(100%, 330px);
      }

      .signup-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .signup-topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .signup-safe-note {
        font-size: 13px;
      }

      .signup-progress-card {
        padding: 20px 14px;
        border-radius: 18px;
      }

      .signup-progress {
        grid-template-columns: repeat(var(--signup-progress-count, 5), minmax(0, 1fr));
        overflow: visible;
      }

      .signup-progress-dot {
        width: 42px;
        height: 42px;
      }

      .signup-progress-step {
        min-width: 0;
        font-size: 12px;
      }

      .signup-progress-step:not(:last-child)::after {
        top: 20px;
        left: calc(50% + 26px);
        width: calc(100% - 52px);
      }

      .signup-hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 9.3vw, 42px);
        overflow-wrap: break-word;
      }

      .signup-hero p {
        max-width: 100%;
        font-size: 17px;
      }

      .signup-chips {
        gap: 10px;
      }

      .signup-chip {
        width: 100%;
        justify-content: center;
        min-height: 46px;
      }

      .signup-form-panel,
      .signup-plan-card,
      .signup-next-card {
        padding: 24px 20px;
      }

      .signup-doc-row {
        grid-template-columns: 1fr;
      }

      .signup-account-type ul,
      .signup-account-type > div,
      .signup-company-fields {
        grid-template-columns: 1fr;
      }

      body.page-signup .signup-read-button {
        width: 100%;
      }

      .signup-next-list li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
      }

      .signup-next-icon {
        width: 52px;
        height: 52px;
      }

      .signup-next-icon img {
        width: 32px;
        height: 32px;
      }

      .signup-trust {
        grid-template-columns: 1fr;
        padding: 18px;
      }

      .signup-trust-item,
      .signup-trust-item:nth-child(2),
      .signup-trust-item:nth-child(-n + 2),
      .signup-trust-item:nth-child(n + 3) {
        padding: 20px 0;
        border-right: none;
        border-bottom: 1px solid #dfe7e3;
      }

      .signup-trust-item:last-child {
        border-bottom: none;
      }

      dialog.document-modal {
        width: calc(100vw - 22px);
        max-height: calc(100vh - 22px);
        border-radius: 18px;
      }

      .document-modal-shell {
        max-height: calc(100vh - 22px);
      }

      .document-modal-topbar {
        align-items: flex-start;
        padding: 16px;
      }

      .document-modal-topbar h2 {
        font-size: 18px;
      }

      body.page-signup .document-close-button {
        min-height: 38px;
        padding: 0 12px;
      }

      .document-modal-body {
        padding: 16px;
      }

      .document-modal-body .legal-sheet-header {
        grid-template-columns: 1fr;
        padding: 18px;
      }

      .document-modal-body .legal-sheet-header img {
        width: 148px;
      }

      .document-modal-body .legal-section,
      .document-modal-body .legal-closing-note,
      .document-modal-body .legal-references {
        padding: 16px;
      }

      .document-modal-actions {
        display: grid;
        padding: 14px 16px;
      }

      .document-modal-actions .button,
      .document-modal-actions button {
        width: 100%;
      }
    }

    /* Public-site visual alignment */
    body.page-signup {
      --signup-green: #007a3d;
      --signup-green-dark: #056334;
      --signup-text: #142235;
      --signup-muted: #5f6c7c;
      --signup-line: #dfe8e3;
      --signup-soft: #eef7f1;
      --signup-soft-2: #f6faf8;
      background:
        linear-gradient(180deg, #ffffff 0%, #f8fbf8 54%, #eef8f2 100%);
    }

    body.page-signup .site-header {
      display: block;
      background: rgba(255, 255, 255, 0.97);
    }

    body.page-signup .public-footer {
      display: grid;
    }

    body.page-signup main {
      max-width: none;
      padding: 0 0 72px;
    }

    .signup-page {
      gap: 28px;
      color: var(--signup-text);
    }

    .signup-topbar,
    .signup-progress-card,
    .signup-hero,
    .signup-grid,
    .signup-trust {
      width: min(calc(100% - 76px), 1360px);
      max-width: 1360px;
      margin-left: auto;
      margin-right: auto;
    }

    .signup-topbar {
      justify-content: flex-end;
      padding-top: 22px;
    }

    .signup-logo {
      display: none;
    }

    .signup-safe-note {
      padding: 9px 14px;
      border-radius: 999px;
      background: #dff1e6;
      color: var(--signup-green-dark);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .signup-safe-note img {
      width: 18px;
      height: 18px;
    }

    .signup-progress-card {
      padding: 20px 28px;
      border-color: var(--signup-line);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 14px 34px rgba(15, 31, 47, 0.06);
      backdrop-filter: none;
    }

    .signup-progress-step {
      gap: 8px;
      color: var(--signup-muted);
      font-size: 13px;
      font-weight: 900;
    }

    .signup-progress-step:not(:last-child)::after {
      top: 18px;
      left: calc(50% + 40px);
      width: calc(100% - 80px);
      background: var(--signup-line);
    }

    .signup-progress-dot {
      width: 38px;
      height: 38px;
      border-color: #cfd9de;
      color: var(--signup-muted);
      font-size: 15px;
      box-shadow: none;
    }

    .signup-progress-step.is-active {
      color: var(--signup-green-dark);
    }

    .signup-progress-step.is-active .signup-progress-dot {
      background: linear-gradient(90deg, #006c37 0%, #008844 100%);
      box-shadow: 0 10px 20px rgba(0, 122, 61, 0.2);
    }

    .signup-hero {
      justify-items: center;
      gap: 18px;
      padding: 8px 0 0;
      text-align: center;
    }

    .signup-hero h1 {
      max-width: 760px;
      font-family: "Manrope", "Segoe UI", sans-serif;
      font-size: clamp(40px, 4.5vw, 64px);
      line-height: 1.08;
      color: var(--signup-text);
    }

    .signup-hero p {
      max-width: 760px;
      color: #26333f;
      font-size: clamp(17px, 1.4vw, 21px);
      font-weight: 600;
      line-height: 1.58;
    }

    .signup-chips {
      justify-content: center;
      gap: 12px;
      margin-top: 0;
    }

    .signup-chip {
      min-height: 44px;
      padding: 0 16px;
      background: var(--signup-soft);
      color: var(--signup-text);
      font-size: 13px;
      font-weight: 900;
      box-shadow: none;
    }

    .signup-chip img {
      width: 18px;
      height: 18px;
    }

    .signup-grid {
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.76fr);
      gap: 24px;
      align-items: start;
    }

    .signup-panel {
      border-color: var(--signup-line);
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 20px 50px rgba(15, 31, 47, 0.1);
    }

    .signup-form-panel,
    .signup-plan-card,
    .signup-next-card {
      padding: clamp(28px, 3vw, 42px);
    }

    .signup-panel h2,
    .signup-panel h3 {
      color: var(--signup-text);
      text-align: left;
    }

    .signup-panel h2 {
      font-size: clamp(26px, 2.1vw, 34px);
      line-height: 1.16;
    }

    .signup-panel h3 {
      font-size: 20px;
      line-height: 1.2;
    }

    .signup-form {
      gap: 18px;
      margin-top: 24px;
    }

    .signup-field {
      gap: 10px;
      color: var(--signup-text);
      font-size: 14px;
      font-weight: 900;
    }

    .signup-field input,
    .signup-field select,
    .signup-field textarea {
      width: 100%;
      min-height: 58px;
      border-color: #cfd9de;
      border-radius: 7px;
      color: var(--signup-text);
      font-size: 16px;
      font-weight: 600;
    }

    .signup-field textarea {
      min-height: 108px;
    }

    .signup-field input:focus,
    .signup-field select:focus,
    .signup-field textarea:focus {
      border-color: rgba(0, 122, 61, 0.62);
      box-shadow: 0 0 0 4px rgba(0, 122, 61, 0.08);
    }

    .signup-account-type,
    .signup-company-fields {
      border-color: var(--signup-line);
      border-radius: 10px;
      background: var(--signup-soft-2);
    }

    .signup-account-type {
      padding: 14px;
    }

    .signup-account-type label {
      min-height: 54px;
      border-color: transparent;
      border-radius: 7px;
      color: var(--signup-text);
      box-shadow: none;
    }

    .signup-account-type label:hover {
      background: rgba(255, 255, 255, 0.76);
      border-color: transparent;
    }

    .signup-account-type label:has(input:checked) {
      border-color: transparent;
      background: #ffffff;
      color: var(--signup-green-dark);
      box-shadow: 0 10px 24px rgba(15, 31, 47, 0.08);
    }

    .signup-account-type label:has(input:checked)::before {
      border-color: var(--signup-green);
      background: var(--signup-green);
    }

    .signup-company-fields {
      padding: 18px;
    }

    .signup-docs {
      border-top-color: var(--signup-line);
    }

    .signup-docs p,
    .signup-plan-card p,
    .signup-next-list li,
    .signup-trust-item p {
      color: var(--signup-muted);
    }

    .signup-doc-list {
      border-color: var(--signup-line);
      border-radius: 8px;
    }

    .signup-doc-row {
      border-bottom-color: var(--signup-line);
    }

    body.page-signup .signup-read-button {
      border-color: var(--signup-green);
      border-radius: 7px;
      color: var(--signup-green);
    }

    body.page-signup .signup-submit {
      min-height: 64px;
      border-radius: 7px;
      background: linear-gradient(90deg, #006c37 0%, #008844 100%);
      box-shadow: 0 16px 30px rgba(0, 122, 61, 0.22);
      font-size: 17px;
    }

    .signup-login-link {
      color: var(--signup-green);
    }

    .signup-side {
      gap: 18px;
    }

    .signup-visual {
      min-height: 280px;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--signup-line);
      border-radius: 10px;
      background: var(--signup-soft);
      box-shadow: 0 20px 50px rgba(15, 31, 47, 0.08);
    }

    .signup-visual img {
      width: 100%;
      height: 100%;
      min-height: 280px;
      object-fit: cover;
      object-position: center;
    }

    .signup-plan-card {
      gap: 18px;
      text-align: left;
      background: #ffffff;
    }

    .signup-eyebrow {
      color: var(--signup-green);
      letter-spacing: 0.1em;
    }

    .signup-plan-card h2 {
      font-family: "Manrope", "Segoe UI", sans-serif;
      font-size: clamp(26px, 2.1vw, 34px);
      line-height: 1.12;
    }

    .signup-price-row {
      border-bottom-color: var(--signup-line);
      color: var(--signup-muted);
    }

    .signup-price-row.is-total,
    .signup-info-box {
      border-color: #cfe4d7;
      border-radius: 8px;
      background: #edf7f1;
    }

    .signup-feature-list {
      gap: 12px;
    }

    .signup-feature-list li::before {
      background: var(--signup-green);
    }

    .signup-next-card {
      gap: 22px;
    }

    .signup-next-icon {
      border-radius: 8px;
      background: var(--signup-soft);
    }

    .signup-trust {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding: 34px 28px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(90deg, #f3faf6 0%, #ffffff 100%);
      box-shadow: none;
    }

    .signup-trust-item {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      grid-template-areas:
        "icon title"
        "icon copy";
      gap: 6px 18px;
      justify-items: start;
      align-items: center;
      padding: 0 24px;
      border-right-color: var(--signup-line);
      text-align: left;
    }

    .signup-trust-icon {
      grid-area: icon;
      width: 62px;
      height: 62px;
    }

    .signup-trust-icon img {
      width: 46px;
      height: 46px;
    }

    .signup-trust-item strong {
      grid-area: title;
      color: var(--signup-green);
      font-weight: 900;
    }

    .signup-trust-item p {
      grid-area: copy;
      line-height: 1.45;
      font-size: 14px;
    }

    dialog.document-modal {
      border-color: var(--signup-line);
      border-radius: 10px;
      background: #ffffff;
    }

    .document-modal-topbar,
    .document-modal-actions {
      background: rgba(255, 255, 255, 0.97);
    }

    .document-modal-body .legal-sheet-header,
    .document-modal-body .legal-section,
    .document-modal-body .legal-closing-note,
    .document-modal-body .legal-references {
      border-color: var(--signup-line);
      border-radius: 8px;
      box-shadow: none;
    }

    .document-modal-actions .button,
    .document-modal-actions button {
      border-radius: 7px;
    }

    @media (max-width: 1080px) {
      .signup-grid {
        grid-template-columns: 1fr;
      }

      .signup-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .signup-visual {
        grid-column: 1 / -1;
      }

      .signup-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 0;
      }

      .signup-trust-item:nth-child(2) {
        border-right: 0;
      }
    }

    @media (max-width: 680px) {
      body.page-signup {
        overflow-x: hidden;
      }

      body.page-signup main {
        padding: 0 0 48px;
      }

      .signup-page {
        max-width: 100vw;
        gap: 18px;
        overflow-x: clip;
      }

      .signup-topbar,
      .signup-progress-card,
      .signup-hero,
      .signup-grid,
      .signup-trust {
        width: calc(100vw - 32px);
        max-width: none;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
      }

      .signup-topbar {
        display: none;
      }

      .signup-safe-note {
        width: fit-content;
      }

      .signup-progress-card {
        padding: 12px 10px;
        overflow: hidden;
      }

      .signup-progress {
        grid-template-columns: repeat(var(--signup-progress-count, 5), minmax(0, 1fr));
      }

      .signup-progress-step {
        gap: 6px;
        font-size: 11px;
      }

      .signup-progress-step span:last-child {
        max-width: 54px;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }

      .signup-progress-dot {
        width: 32px;
        height: 32px;
      }

      .signup-progress-step:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 19px);
        width: calc(100% - 38px);
      }

      .signup-hero h1,
      .signup-hero p {
        width: auto;
        max-width: 100%;
      }

      .signup-hero {
        gap: 10px;
        padding-top: 0;
      }

      .signup-hero h1 {
        max-width: 13ch;
        font-size: clamp(30px, 8vw, 34px);
        line-height: 1.12;
        overflow-wrap: break-word;
        text-wrap: balance;
      }

      .signup-hero p {
        max-width: 34ch;
        font-size: 15px;
        line-height: 1.5;
      }

      .signup-chips {
        width: 100%;
      }

      .signup-chip {
        width: 100%;
        justify-content: center;
      }

      .signup-form-panel,
      .signup-plan-card,
      .signup-next-card {
        padding: 24px 20px;
      }

      .signup-side {
        grid-template-columns: 1fr;
      }

      .signup-visual,
      .signup-visual img {
        min-height: 220px;
      }

      .signup-trust {
        grid-template-columns: 1fr;
        padding: 24px 18px;
      }

      .signup-trust-item,
      .signup-trust-item:nth-child(2),
      .signup-trust-item:nth-child(-n + 2),
      .signup-trust-item:nth-child(n + 3) {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid var(--signup-line);
      }

      .signup-trust-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .document-modal-actions {
        grid-template-columns: 1fr;
      }
    }