:root {
  --ink: #082820;
  --green: #0d8648;
  --dark-green: #075c39;
  --lime: #e7ff69;
  --mint: #b9f2ce;
  --cream: #fffaf0;
  --paper: #fffef9;
  --line: #aac7b5;
  --red: #b9362f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 8px 8px, rgba(8, 40, 32, .08) 1.2px, transparent 1.3px) 0 0 / 20px 20px,
    var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

button, input, textarea { font: inherit; }
button, label:has(input[type="radio"]) { cursor: pointer; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }

main { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 70px 0 90px; }
.feedback-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 54px; align-items: center; margin-bottom: 46px; }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 12px; font-weight: 950; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(54px, 7vw, 96px); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
h1 em { color: var(--green); font-style: normal; text-shadow: 4px 4px 0 var(--lime); }
.lede { max-width: 700px; margin: 26px 0 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }

.clipboard { position: relative; padding: 48px 34px 30px; border: 2px solid var(--ink); border-radius: 12px; background: var(--mint); box-shadow: 8px 8px 0 var(--ink); transform: rotate(1.3deg); }
.clip { position: absolute; top: -14px; left: 50%; width: 92px; height: 34px; border: 2px solid var(--ink); border-radius: 8px; background: #d8d3c9; transform: translateX(-50%); }
.clipboard strong { display: block; font-size: 18px; }
.clipboard ul { margin: 16px 0 0; padding-left: 20px; line-height: 1.9; }

.feedback-card { overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 9px 9px 0 var(--ink); }
.form-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 30px 34px 25px; border-bottom: 2px solid var(--ink); background: var(--lime); }
.form-heading h2, .success-card h2 { margin: 0; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.045em; }
.form-heading > span { padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 850; white-space: nowrap; }
form { padding: 34px; }
fieldset { margin: 0 0 32px; padding: 0; border: 0; }
legend, .field > span { display: block; margin-bottom: 11px; font-size: 13px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.field > span small { color: #537066; font-weight: 700; text-transform: lowercase; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.category-grid label { position: relative; min-height: 105px; }
.category-grid input { position: absolute; opacity: 0; }
.category-grid label > span { display: flex; height: 100%; flex-direction: column; gap: 5px; padding: 17px; border: 1.5px solid var(--line); border-radius: 10px; background: white; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.category-grid small { color: #537066; line-height: 1.35; }
.category-grid input:checked + span { border: 2px solid var(--ink); background: var(--mint); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.category-grid input:focus-visible + span { outline: 3px solid #367de8; outline-offset: 3px; }
.field { display: block; position: relative; }
.field textarea, .field input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; background: white; color: var(--ink); outline: none; }
.field textarea { resize: vertical; min-height: 180px; padding: 17px 18px 34px; line-height: 1.5; }
.field input { height: 52px; padding: 0 15px; }
.field textarea:focus, .field input:focus { border: 2px solid var(--green); box-shadow: 0 0 0 3px rgba(13, 134, 72, .13); }
.field > small { display: block; margin-top: 7px; color: #597269; font-size: 12px; line-height: 1.45; }
.field .character-count { position: absolute; right: 13px; bottom: 10px; margin: 0; padding: 3px 6px; background: white; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { margin-top: 28px; min-height: 65px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-footer p { max-width: 560px; margin: 0; color: #4f6d63; font-size: 12px; line-height: 1.45; }
.form-footer button, .success-card button { flex: 0 0 auto; padding: 13px 19px; border: 2px solid var(--ink); border-radius: 8px; background: var(--green); box-shadow: 4px 4px 0 var(--ink); color: white; font-weight: 900; }
.form-footer button:hover, .success-card button:hover { background: var(--dark-green); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.form-footer button:disabled { cursor: wait; opacity: .6; }
.form-status { min-height: 22px; margin: 18px 0 0; font-size: 14px; font-weight: 750; }
.form-status.error { color: var(--red); }
.success-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; padding: 54px 36px; background: var(--mint); outline: none; }
.success-card > span { display: grid; width: 60px; height: 60px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); font-size: 30px; font-weight: 950; }
.success-card p:last-child { margin: 8px 0 0; }
.success-card button { background: var(--paper); color: var(--ink); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px max(18px, calc((100% - 1160px) / 2)); border-top: 2px solid var(--ink); background: var(--ink); color: #cfe0d8; font-size: 12px; }
footer a { color: var(--lime); font-weight: 950; text-decoration: none; text-transform: uppercase; }

@media (max-width: 900px) {
  .feedback-intro { grid-template-columns: 1fr; }
  .clipboard { max-width: 540px; transform: none; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  main { width: min(100% - 24px, 1160px); padding-top: 42px; }
  .feedback-intro { gap: 34px; }
  h1 { font-size: clamp(46px, 16vw, 68px); }
  .clipboard { padding-inline: 24px; }
  .form-heading { align-items: start; padding: 25px 20px; }
  .form-heading > span { display: none; }
  form { padding: 24px 20px; }
  .category-grid, .field-row { grid-template-columns: 1fr; }
  .category-grid label { min-height: 78px; }
  .form-footer, .success-card, footer { align-items: stretch; flex-direction: column; }
  .form-footer { display: flex; }
  .form-footer button { width: 100%; }
  .success-card { display: flex; }
  footer { display: flex; text-align: center; }
}