/* Assist U Build — brand system (Ink · Scarlet · Paper) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --ink:#151316; --ink-2:#2A292E; --scarlet:#FB2932; --scarlet-dark:#C9141C;
  --paper:#FFFFFF; --bg:#ECECEE; --line:#E2E2E5; --muted:#6E6E76; --muted-2:#9A9AA1;
  --tint:#FFE9EA; --ok-bg:#E6F4EC; --ok:#1f7a48;
  --font:'Archivo',-apple-system,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}

.wrap{max-width:620px;margin:0 auto;padding:28px 16px 64px}
.card{background:var(--paper);border:1px solid var(--line)}

/* header */
.hdr{background:var(--ink);padding:22px 28px;display:flex;align-items:center;gap:14px}
.hdr img{height:42px;width:auto;display:block}
.hdr .name{font-weight:800;font-size:20px;letter-spacing:2.5px;text-transform:uppercase;color:#fff;line-height:1}
.hdr .tag{font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.ridge{height:6px;background:var(--scarlet)}

/* body */
.body{padding:32px 28px}
h1{font-weight:800;font-size:26px;line-height:1.15;letter-spacing:.3px;text-transform:uppercase;margin:0 0 8px}
.lede{color:var(--muted);font-size:15px;margin:0 0 26px}

/* fields */
.field{margin:0 0 18px}
.field.row{display:flex;gap:14px}
.field.row > div{flex:1}
label{display:block;font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink);margin:0 0 7px}
label .req{color:var(--scarlet)}
input,select,textarea{
  width:100%;font-family:var(--font);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;padding:12px 13px;outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--scarlet);box-shadow:0 0 0 3px var(--tint)}
input::placeholder{color:var(--muted-2)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236E6E76' stroke-width='2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* button */
.btn{display:inline-block;width:100%;border:0;border-radius:0;cursor:pointer;margin-top:6px;
  background:var(--scarlet);color:#fff;font-family:var(--font);font-weight:800;font-size:15px;
  letter-spacing:1.2px;text-transform:uppercase;padding:16px 24px;transition:background .12s}
.btn:hover{background:var(--scarlet-dark)}
.btn:disabled{opacity:.55;cursor:default}

/* messages */
.msg{display:none;padding:13px 15px;font-size:14px;line-height:1.45;margin:0 0 20px;border-left:4px solid}
.msg.err{background:var(--tint);border-color:var(--scarlet);color:#7a1018}
.note{color:var(--muted);font-size:12px;margin-top:6px}
/* invalid field highlight (branded, consistent with the message box) */
input.invalid,select.invalid,textarea.invalid{border-color:var(--scarlet)!important;box-shadow:0 0 0 3px var(--tint)!important}

/* success state */
.done{text-align:center;padding:14px 0}
.done .mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--ok-bg);color:var(--ok);font-size:30px;margin-bottom:8px}
.done h1{margin-bottom:10px}
.done p{color:var(--muted);font-size:15px}

/* footer */
.foot{padding:18px 28px 26px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6}
.foot b{color:var(--ink);letter-spacing:1px;text-transform:uppercase}
.legal{text-align:center;color:var(--muted-2);font-size:11px;margin-top:18px}

/* mobile: stack grouped rows, tighten padding */
@media (max-width:520px){
  .wrap{padding:18px 12px 48px}
  .hdr{padding:18px 20px;gap:12px}
  .hdr img{height:38px}
  .hdr .name{font-size:18px;letter-spacing:2px}
  .body{padding:26px 20px}
  .foot{padding:18px 20px 24px}
  h1{font-size:23px}
  .field.row{flex-direction:column;gap:0}
  .field.row > div{flex:1 1 auto;max-width:none!important;margin:0 0 16px}
  .field.row > div:last-child{margin-bottom:0}
}