/* Override del design system per il sito Arked: il volt del marchio al posto
   dell'accento blu, così link, focus ring e selezione seguono l'identità. */
:root { --color-accent: #4d5600; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 84px; } /* l'header è sticky */
body { margin: 0; background: var(--color-bg); }
a { color: #4d5600; text-decoration: none; }
a:hover { color: #2b3200; }

.beta-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 11px; border: 1px solid #4d5600; color: #4d5600;
}

/* — testo lungo: pagina privacy — */
.prose { max-width: 70ch; }
.prose h2 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(23px, 3vw, 30px); text-transform: uppercase;
  letter-spacing: 0.02em; margin: 44px 0 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose .placeholder {
  background: #fff8b0; border-bottom: 1px dashed #8a7a00;
  color: var(--color-text); padding: 0 3px;
}

/* — moduli: richiesta di accesso alla beta e cancellazione dei dati — */
/* .form e' una griglia, e display batterebbe l'attributo hidden. */
[hidden] { display: none !important; }
.btn-volt { background: #dff500; border-color: #dff500; color: #0a0b0a; text-decoration: none; }
.btn-volt:hover { background: #ecff5c; border-color: #ecff5c; color: #0a0b0a; }
.btn-line { border-color: #4d5600; color: #4d5600; text-decoration: none; }
.btn-line:hover { background: color-mix(in srgb, #4d5600 9%, transparent); color: #2b3200; }
.page { max-width: 760px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { position: relative; border: 1px solid var(--color-divider); padding: 16px 20px 16px 62px; }
.steps .num {
  position: absolute; left: 20px; top: 17px;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.2em; color: #4d5600;
}
.steps h2 { font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 4px; }
.steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }
.form { margin-top: 34px; display: grid; gap: 22px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px; }
.field > label { font-size: 13px; }
/* 16px: sotto, Safari su iPhone ingrandisce la pagina al tocco del campo. */
.field .input { font-size: 16px; min-height: 44px; }
.field textarea.input { min-height: 120px; }
.req { margin-left: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #4d5600; }
.help { display: block; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--color-neutral-600); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); cursor: pointer; }
.check input { flex: none; width: 17px; height: 17px; margin-top: 3px; accent-color: #4d5600; }
.form-note { border-left: 2px solid #b8c400; padding: 2px 0 2px 16px; }
.form-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-700); }
.form-note strong { color: var(--color-text); }
.captcha:empty { display: none; }
.form-status:empty { display: none; }
.form-status { margin: 0; padding: 12px 14px; border: 1px solid var(--color-divider); font-size: 14px; line-height: 1.5; }
.form-status.error { border-color: #a4262c; color: #7a1c21; }
.done { margin-top: 34px; border: 1px solid #4d5600; padding: 24px 26px; }
.done h2 { font-size: 23px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 10px; }
.done ul { margin: 0; padding-left: 20px; }
.done li { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); margin-bottom: 6px; }

/* La voce della pagina in cui si e': testata uguale ovunque, cambia solo aria-current. */
header nav a[aria-current="page"] { color: var(--color-text) !important; }