/* Download request page (get-scai/). Band 300px on desktop; single column below 900px; field pairs stack below 600px. */
.req { background: var(--surface); padding: 0 16px 64px; overflow-x: clip; }
.req-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 1200px; margin: 0 auto;
}
/* Full-bleed dark band behind the first row; box-shadow + clip-path extend it to the viewport edges without overflow. */
.req-band {
  grid-column: 1 / -1; grid-row: 1;
  background: var(--ink);
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}
.req-intro { grid-row: 1; position: relative; padding: 40px 0 72px; color: #fff; }
.req-title { margin-top: 12px; font-weight: 500; font-size: 36px; line-height: 44px; letter-spacing: var(--ls-display); }
.req-lead { margin-top: 12px; max-width: 34em; font-size: 17px; line-height: 24px; color: #c3c7cb; }
.req-card {
  grid-row: 2; position: relative; z-index: 1; margin-top: -40px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 20px;
}
.req-side { grid-row: 3; padding-top: 32px; }
.req-side-title { font-weight: 600; font-size: 17px; line-height: 24px; color: var(--fg); }
.req-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.req-list li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; color: var(--fg-2); }
.req-list svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--ink); }

@media (min-width: 600px) {
  .req { padding: 0 32px 96px; }
  .req-card { padding: 32px; }
  .req-title { font-size: 40px; line-height: 48px; }
}
@media (min-width: 900px) {
  .req-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: minmax(300px, auto) 1fr;
    column-gap: 48px;
  }
  .req-intro { grid-column: 1; grid-row: 1; padding: 56px 0 40px; }
  .req-side { grid-column: 1; grid-row: 2; padding-top: 40px; }
  .req-card { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 56px; padding: 40px; }
}
@media (min-width: 1200px) {
  .req { padding: 0 48px 120px; }
}

/* ---------- Fields ---------- */
.f-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; }
.f-field { min-width: 0; }
.f-field label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--fg-2); }
.f-req { margin-left: 2px; color: var(--required); }
.f-opt { font-weight: 400; color: var(--fg-3); }
.f-input {
  display: block; width: 100%; height: 44px; padding: 0 12px;
  background: #fff; color: var(--fg);
  border: 1px solid var(--input-line); border-radius: 4px;
  font: 400 16px/24px var(--font); letter-spacing: normal;
  transition: border-color .2s;
}
.f-input:hover { border-color: #b9bcbf; }
.f-input:focus-visible { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
textarea.f-input { height: auto; min-height: 112px; padding: 10px 12px; resize: vertical; }
.f-input[aria-invalid="true"] { border-color: var(--required); }
.f-err { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--required); }
.f-note { margin-top: 20px; font-size: 12px; line-height: 18px; color: var(--fg-3); }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.f-submit { min-width: 200px; min-height: 44px; font-size: 15px; }
.f-hint { font-size: 13px; line-height: 18px; color: var(--fg-3); }
@media (min-width: 600px) {
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-full { grid-column: 1 / -1; }
}

/* ---------- Confirmation panel ---------- */
.req-done-title { font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: var(--ls-display); color: var(--fg); }
.req-done-title:focus { outline: none; }
.req-done-text { margin-top: 8px; font-size: 17px; line-height: 24px; color: var(--fg); }
.req-done-alt { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--fg-3); }
.req-msg {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  min-height: 240px; resize: vertical;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: 4px;
  font: 400 13px/20px Consolas, "Courier New", monospace; letter-spacing: normal;
}
.req-msg:focus-visible { outline: 2px solid var(--link); outline-offset: 0; }
.req-done .btn { min-width: 120px; }
.link-btn { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { text-decoration-thickness: 2px; }