:root{
  --bg:#F8F6F4;
  --surface:#F8F6F4;
  --surface-2:#F8F6F4;
  --text:#0a0a0a;
  --muted:#5f5f5f;
  --muted-2:#8f8f8f;
  --green:#188a4f;
  --amber:#b06b0e;
  --danger:#b8342b;
  --line:#e2e2e2;
  --line-strong:#c9c9c9;
}
*{box-sizing:border-box;border-radius:0!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
h1{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;letter-spacing:-.02em}

.wrap{width:min(900px,calc(100% - 48px));margin:0 auto}
nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px}
.mark{width:26px;height:26px;background:var(--green);display:grid;place-items:center;color:#F8F6F4}
.mark:before{content:"W";font-weight:800;font-family:"JetBrains Mono",monospace;font-size:13px}
.back{color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;padding:9px 14px;border:1px solid var(--line-strong);background:var(--surface);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.03em}
.back:hover{color:var(--text);border-color:var(--text)}
main{padding:36px 0 76px}

.hero{position:relative;text-align:center;padding:32px 0 36px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line-strong);color:var(--green);font-size:12px;font-weight:500;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.05em}
.dot{width:6px;height:6px;background:var(--green)}
h1{margin:22px 0 14px;font-size:clamp(34px,6vw,54px);line-height:1;letter-spacing:-.03em}
.hero p{max-width:560px;margin:0 auto;color:var(--muted);font-size:15.5px;line-height:1.65}

.form-wrap{padding:0}
.report-card{max-width:740px;margin:0 auto;border:1px solid var(--line-strong);background:var(--surface)}
.form-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;align-items:center;background:var(--surface-2)}
.form-head strong{font-size:15px}.form-head span{color:var(--muted);font-size:12px;text-align:right;font-family:"JetBrains Mono",monospace}
form{padding:24px;display:grid;gap:18px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:8px}
label{font-size:11.5px;font-weight:600;color:var(--muted);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.03em}.optional{font-weight:400;color:var(--muted-2);margin-left:4px;text-transform:none}
input,textarea{width:100%;border:1px solid var(--line-strong);outline:none;background:var(--bg);color:var(--text);padding:12px 13px;transition:border-color .16s}
input:focus,textarea:focus{border-color:var(--green)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}textarea{min-height:116px;resize:vertical;line-height:1.5}
.custom-select{position:relative;width:100%}
.custom-select-trigger{
  width:100%;
  min-height:44px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  color:var(--text);
  padding:12px 42px 12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  outline:none;
  transition:border-color .16s,background .16s;
}
.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger{border-color:var(--green)}
.custom-select-trigger:focus-visible{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.custom-select-arrow{
  position:absolute;
  right:14px;
  width:8px;
  height:8px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .14s;
}
.custom-select.is-open .custom-select-arrow{transform:rotate(225deg) translate(-1px,-1px)}
.custom-select-menu{
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 5px);
  border:1px solid var(--line-strong);
  background:#fff;
  box-shadow:6px 6px 0 rgba(0,0,0,.05);
  padding:5px;
  display:none;
}
.custom-select.is-open .custom-select-menu{display:block}
.custom-select-option{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:11px 12px 11px 30px;
  position:relative;
  font-size:14px;
}
.custom-select-option:hover,
.custom-select-option:focus-visible{
  outline:none;
  background:#f0efed;
}
.custom-select-option.is-selected{
  color:var(--green);
  font-weight:600;
}
.custom-select-option.is-selected:before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:7px;
  height:7px;
  background:var(--green);
  transform:translateY(-50%);
}


.meta{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line-strong);width:fit-content}
.meta-chip{font-size:11px;padding:7px 11px;color:var(--green);border-right:1px solid var(--line-strong);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.02em}
.meta-chip:last-child{border-right:0}
.privacy{font-size:11px;line-height:1.6;color:var(--muted-2)}
.actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.submit{border:1px solid var(--green);background:var(--green);color:#F8F6F4;padding:12px 20px;font-weight:700;min-width:130px;transition:background .12s,color .12s}
.submit:hover{background:transparent;color:var(--green)}.submit:disabled{opacity:.5}
.status{font-size:12px;color:var(--muted);font-family:"JetBrains Mono",monospace}.status.ok{color:var(--green)}.status.error{color:var(--danger)}
.config-note{margin:0 24px 24px;padding:11px 13px;border:1px solid var(--amber);background:transparent;color:var(--amber);font-size:11px;line-height:1.55;font-family:"JetBrains Mono",monospace;display:none}

footer{text-align:center;color:var(--muted-2);font-size:12px;padding:26px 0;border-top:1px solid var(--line);margin-top:26px;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.03em}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

@media(max-width:700px){
  .wrap{width:min(100% - 28px,900px)}
  nav{height:64px}
  main{padding:24px 0 54px}
  .grid-2{grid-template-columns:1fr}
  .form-head{align-items:flex-start;flex-direction:column}
  .form-head span{text-align:left}
  .actions{align-items:stretch;flex-direction:column-reverse}
  .submit{width:100%}
}
