:root{
    /* Offline Security-style palette. offlinesec.com's own stylesheet couldn't be
       fetched directly (blocked by proxy), so these are close, editable stand-ins.
       Swap the hex values below to match your exact brand kit. */
    --os-navy: #0b2340;      /* header / footer / primary dark */
    --os-navy-2: #123258;    /* secondary dark, gradients */
    --os-blue: #1c6fd6;      /* primary accent / links / buttons */
    --os-blue-dark: #14549e; /* hover state */
    --os-teal: #16a3a3;      /* success / valid state */
    --os-red: #d64545;       /* error state */
    --os-bg: #f4f7fb;        /* page background */
    --os-card: #ffffff;
    --os-border: #d7e0ec;
    --os-text: #1c2b3a;
    --os-muted: #64748b;
    --radius: 8px;
  }

  *{ box-sizing:border-box; }

  main{
    max-width:720px;
    margin:36px auto 64px;
    padding:0 20px;
  }

  .os-card{
    background:var(--os-card);
    border:1px solid var(--os-border);
    border-radius:var(--radius);
    box-shadow:0 8px 24px rgba(11,35,64,.06);
    overflow:hidden;
  }

  .os-card__head{
    background:linear-gradient(135deg,var(--os-blue),var(--os-navy-2));
    color:#fff;
    padding:22px 28px;
  }
  .os-card__head h1{
    margin:0 0 6px;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .os-card__head p{
    margin:0;
    color:#dbe8fb;
    font-size:.92rem;
    line-height:1.4;
  }

  form{ padding:26px 28px 30px; }

  .field{
    margin-bottom:20px;
    position:relative;
  }
  .field label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    font-size:.92rem;
    margin-bottom:6px;
    color:var(--os-navy);
  }
  .field label .optional{
    font-weight:400;
    color:var(--os-muted);
    font-size:.8rem;
  }
  .field .hint{
    font-size:.78rem;
    color:var(--os-muted);
    margin-top:4px;
  }

  .doc-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--os-blue);
    text-decoration:none;
    font-weight:600;
    margin-left:6px;
  }
  .doc-link:hover{ color:var(--os-blue-dark); text-decoration:underline; }

  #turnstileField{
    display:flex;
    justify-content:flex-start;
    margin-bottom:8px;
  }

  .input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="file"]{
    width:100%;
    padding:10px 38px 10px 12px;
    border:1px solid var(--os-border);
    border-radius:6px;
    font-size:.95rem;
    color:var(--os-text);
    background:#fff;
    transition:border-color .15s, box-shadow .15s;
  }
  input[type="file"]{ padding:8px 38px 8px 8px; }

  input:focus{
    outline:none;
    border-color:var(--os-blue);
    box-shadow:0 0 0 3px rgba(28,111,214,.15);
  }

  input.is-valid{ border-color:var(--os-teal); }
  input.is-invalid{ border-color:var(--os-red); }

  .status-icon{
    position:absolute;
    right:10px;
    width:18px;
    height:18px;
    display:none;
  }
  .status-icon.show{ display:block; }

  .error-msg{
    display:none;
    color:var(--os-red);
    font-size:.78rem;
    margin-top:5px;
    align-items:center;
    gap:5px;
  }
  .error-msg.show{ display:flex; }

  /* honeypot - hidden from real users, visible to bots that auto-fill all fields */
  .os-hp{
    position:absolute;
    left:-9999px;
    top:-9999px;
    opacity:0;
    height:0;
    width:0;
    overflow:hidden;
  }

  .submit-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:26px;
    flex-wrap:wrap;
  }

  button#submitBtn{
    background:var(--os-blue);
    color:#fff;
    border:none;
    padding:12px 26px;
    font-size:.98rem;
    font-weight:600;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:background .15s, transform .05s;
  }
  button#submitBtn:hover:not(:disabled){ background:var(--os-blue-dark); }
  button#submitBtn:active:not(:disabled){ transform:translateY(1px); }
  button#submitBtn:disabled{
    background:#aebdd0;
    cursor:not-allowed;
  }

  .form-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.86rem;
    color:var(--os-muted);
  }
  .form-status.all-good{ color:var(--os-teal); font-weight:600; }

  #successBanner{
    display:none;
    margin:18px 28px 0;
    background:#e8f7f4;
    border:1px solid var(--os-teal);
    color:#0c5f5f;
    padding:12px 14px;
    border-radius:6px;
    font-size:.9rem;
    align-items:center;
    gap:8px;
  }
  #successBanner.show{ display:flex; }

  footer.os-footer{
    text-align:center;
    color:var(--os-muted);
    font-size:.78rem;
    padding:26px 20px 40px;
  }
  footer.os-footer a{ color:var(--os-blue); text-decoration:none; }

  svg.icon{ vertical-align:middle; }