/* CSS Document */
/* structure from the Betty AI project via Rick Schwartz */
    body {
      min-height: 100vh;
		min-width: 100vw;
      display: flex;
      align-items: stretch;
      justify-content: center;
      background: #0b1f33;
      color: #0b1f33;
    }

    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background-image:
        linear-gradient(135deg, rgba(0, 40, 80, 0.40), rgba(0, 160, 200, 0.35)),
        url("/graphics/backgrounds/forge-lander-background.jpg");
      background-size: cover;
      background-position: center;
	  width: 100% !important;
    }

    .card {
      width: 100%;
      max-width: 520px;
      background: rgba(255, 255, 255, 0.77);
      border-radius: 22px;
      padding: 30px 26px 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(8px);
    }

    .chip {
      display: inline-block;
      padding: 7px 18px;
      border-radius: 999px;
      background: #0d6ecc;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 18px;
    }

    .brand {
      font-size: 32px;
      font-weight: 800;
      color: #123457;
      margin-bottom: 6px;
    }

    .subline {
      font-size: 14px;
      color: #4e5968;
      margin-bottom: 18px;
    }

    .headline {
      font-size: 22px;
      font-weight: 700;
      color: #123457;
      margin-bottom: 8px;
    }

    .tagline {
      font-size: 14px;
      color: #47505c;
      margin-bottom: 18px;
      max-width: 460px;
    }

    form {
      margin-bottom: 16px;
    }

    .field {
      margin-bottom: 10px;
    }

    label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #313843;
      margin-bottom: 4px;
    }

    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid #c4cfda;
      font-size: 14px;
      background: #f6f8fb;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    input[type="text"]:focus,
    input[type="email"]:focus {
      border-color: #0d6ecc;
      box-shadow: 0 0 0 1px rgba(13, 110, 204, 0.35);
      background: #ffffff;
    }

    .buttons {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    button {
      width: 100%;
      padding: 11px 16px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffffff;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20);
      transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    }

    .btn-primary {
      background: #0d6ecc;
    }

    .btn-secondary {
      background: #f28b20;
    }

    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
      opacity: 0.97;
    }

    button:active {
      transform: translateY(0);
      box-shadow: 0 9px 16px rgba(0, 0, 0, 0.20);
      opacity: 0.9;
    }

    .note {
      font-size: 12px;
      color: #6a7280;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .franchise-text {
      font-size: 12px;
      color: #e36e00;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .footer {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #dde4ee;
      font-size: 11px;
      color: #7a8393;
    }

    .footer strong {
      color: #445069;
    }

    .footer a {
      color: rgba(38,159,227,1.00);
      text-decoration: none;
      font-weight: 600;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    @media (max-width: 640px) {
      .card {
        padding: 22px 18px 18px;
      }
      .brand {
        font-size: 26px;
      }
      .headline {
        font-size: 19px;
      }
    }