 
    .page-content { padding: 80px 40px 100px; min-height: 400px; }
    .page-content-inner { max-width: 640px; margin: 0 auto; }

    /* ── Single-page form ── */
    .demo-form-card {
      background: var(--white);
      border: 1px solid rgba(157, 201, 221, 0.25);
      border-radius: 20px;
      padding: 48px 44px 44px;
      box-shadow: 0 8px 40px rgba(35, 71, 109, 0.08);
    }
    .demo-form-card .form-title {
      font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.5px; color: var(--charcoal);
      margin-bottom: 4px; text-align: center;
    }
    .demo-form-card .form-subtitle {
      font-size: 14px; color: var(--gray-text); text-align: center; margin-bottom: 36px; line-height: 1.6;
    }

    /* form fields */
    .form-group { margin-bottom: 24px; }
    .form-group:last-of-type { margin-bottom: 0; }
    .form-label {
      display: block; font-family: var(--font-subtitle); font-size: 13px;
      text-transform: uppercase; letter-spacing: 1.5px; color: var(--blue);
      margin-bottom: 8px;
    }
    .form-input {
      width: 100%; padding: 14px 18px; font-family: var(--font-body); font-size: 16px;
      border: 1.5px solid var(--silver); border-radius: var(--radius); outline: none;
      transition: border-color var(--transition), box-shadow var(--transition);
      background: var(--off-white); color: var(--charcoal);
    }
    .form-input::placeholder { color: var(--gray-text); }
    .form-input:focus {
      border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); background: var(--white);
    }

    /* two-column row */
    .form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }

    /* divider */
    .form-divider {
      height: 1px; background: rgba(157, 201, 221, 0.25); margin: 28px 0;
    }

    /* counter group (users) */
    .counter-group { display: flex; flex-direction: column; gap: 12px; }
    .counter-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--off-white); border-radius: var(--radius); padding: 12px 18px;
    }
    .counter-row .counter-label { display: flex; flex-direction: column; gap: 2px; }
    .counter-row .counter-label span { font-family: var(--font-subtitle); font-size: 15px; color: var(--charcoal); }
    .counter-row .counter-label small { font-size: 12px; color: var(--gray-text); }
    .counter-controls { display: flex; align-items: center; gap: 14px; }
    .counter-btn {
      width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--silver);
      background: var(--white); color: var(--charcoal); font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition); font-family: var(--font-subtitle);
    }
    .counter-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,111,160,0.06); }
    .counter-btn:active { transform: scale(0.92); }
    .counter-value {
      font-family: var(--font-title); font-size: 20px; min-width: 28px; text-align: center; color: var(--charcoal);
    }

    /* sector chips */
    .sector-options {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .sector-chip {
      padding: 8px 18px; border-radius: 50px; border: 1.5px solid var(--silver);
      background: var(--off-white); font-family: var(--font-subtitle); font-size: 13px;
      color: var(--gray-text); cursor: pointer; transition: all 0.25s ease; user-select: none;
    }
    .sector-chip:hover { border-color: var(--blue); color: var(--charcoal); }
    .sector-chip.selected {
      background: var(--blue); border-color: var(--blue); color: var(--white);
      box-shadow: 0 4px 14px var(--blue-glow);
    }

    /* submit button */
    .btn-submit {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; margin-top: 32px;
      background: var(--blue); color: var(--white); font-family: var(--font-subtitle);
      font-size: 16px; padding: 15px 32px; border-radius: var(--radius); border: none;
      cursor: pointer; transition: all var(--transition);
    }
    .btn-submit:hover { background: var(--blue-light); }
    .btn-submit:active { transform: scale(0.98); }
    .btn-submit .arrow { transition: transform var(--transition); }
    .btn-submit:hover .arrow { transform: translateX(3px); }
    .btn-submit:disabled { opacity: 0.45; pointer-events: none; }

    .consent-note {
      font-family: var(--font-body);
      font-size: 10px;
      color: #888;
      line-height: 1.4;
      margin-top: 14px;
      text-align: center;
    }
    .consent-note a { color: var(--teal); text-decoration: underline; }
    .consent-note a:hover { color: var(--charcoal); }

    /* success state */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .form-success {
      display: none; flex-direction: column; align-items: center; gap: 16px;
      text-align: center; padding: 40px 0;
      animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .form-success.active { display: flex; }
    .form-success .check-circle {
      width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--blue));
      display: flex; align-items: center; justify-content: center;
    }
    .form-success .check-circle svg { width: 36px; height: 36px; color: var(--white); }
    .form-success h2 { font-size: 26px; color: var(--charcoal); }
    .form-success p { font-size: 15px; color: var(--gray-text); max-width: 400px; line-height: 1.7; }

    @media (max-width: 768px) {
      .demo-form-card { padding: 32px 24px; }
      .form-row { grid-template-columns: 1fr; }
      .page-content { padding: 60px 20px; }
    } 