/* GeekScope request access. Loads after css/system.css.
   A static form: fill-in lines on a slide, the first call shown as a circled patch of the field. */

.ra { max-width: var(--max); margin: 0 auto; padding: 28px var(--g) 0; display: grid; gap: 40px; }
.ra-head .lede { max-width: 30em; }
@media (min-width: 768px) { .ra { padding-top: 56px; } }
@media (min-width: 1100px) {
  .ra {
    padding-top: clamp(56px, 9vh, 104px);
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px;
    grid-template-areas: "head head head head head head . form form form form form" "next next next next next . . form form form form form";
    align-items: start;
  }
  .ra-head { grid-area: head; }
  .ra-head h1 .ln { display: block; }
  .ra-panel { grid-area: form; }
  .ra-next { grid-area: next; }
}

/* ---------- the form panel ---------- */
.ra-panel { position: relative; background: var(--slide); box-shadow: inset 0 0 0 1px var(--ink); padding: 8px 20px 28px; }
.ra-panel .reg { display: none; }
@media (min-width: 768px) { .ra-panel { padding: 16px 40px 40px; } }
@media (min-width: 1100px) {
  .ra-panel { padding: 20px 44px 44px; }
  .ra-panel .reg { display: block; }
  .ra-panel .reg-tl, .ra-panel .reg-bl { left: -26px; }
  .ra-panel .reg-tr, .ra-panel .reg-br { right: -26px; }
  .ra-panel .reg-tl, .ra-panel .reg-tr { top: -26px; }
  .ra-panel .reg-bl, .ra-panel .reg-br { bottom: -26px; }
}

.f-row { display: grid; gap: 0 32px; }
@media (min-width: 768px) { .f-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f { display: flex; flex-direction: column; padding-top: 22px; }
.f label { font-size: 16px; font-weight: 650; letter-spacing: -0.005em; }
.f input, .f select, .f textarea {
  width: 100%; margin: 6px 0 0; font: 400 19px/1.35 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-radius: 0; border-bottom: 2px solid var(--ink);
  min-height: 52px; padding: 10px 2px 8px; caret-color: var(--signal);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.f input:hover, .f select:hover, .f textarea:hover { background: var(--plate); }
.f input:focus, .f select:focus, .f textarea:focus { border-bottom-color: var(--signal); background: var(--plate); }
.sel { position: relative; display: block; }
.f select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.f select:invalid { color: var(--ink-2); }
.f option { color: var(--ink); }
.sel::after {
  content: ""; position: absolute; right: 12px; top: calc(50% + 0px); width: 8px; height: 8px; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-50%) rotate(45deg);
}
.f-area { padding-top: 26px; }
.f-hint { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.f textarea {
  margin-top: 12px; min-height: 132px; resize: vertical; padding: 12px 14px;
  border: 0; box-shadow: inset 0 0 0 1px var(--ink), inset 0 -2px 0 var(--ink);
}
.f textarea:focus { box-shadow: inset 0 0 0 1px var(--ink), inset 0 -2px 0 var(--signal); }
.f-go { margin-top: 32px; display: grid; gap: 16px; }
.ra-submit { width: 100%; min-height: 56px; }
.f-note { font-size: 15px; color: var(--ink-2); }
.f-note a { color: var(--ink); text-underline-offset: 0.22em; }
@media (min-width: 768px) {
  .ra-submit { width: auto; justify-self: start; padding: 0 28px; }
}

/* ---------- what happens next: the first call, and the price ---------- */
.ra-call { margin: 0; }
.ra-field { position: relative; background: var(--slide); box-shadow: inset 0 0 0 1px var(--rule); padding: 6px; }
.ra-svg { width: 100%; height: auto; overflow: visible; }
.ra-dots { fill: none; stroke: var(--ink); stroke-width: 4.6; stroke-linecap: round; }
.ra-big { stroke-width: 6.6; }
.ra-pn {
  position: absolute; margin: 0; left: 61%; top: 7.5%; white-space: nowrap; padding: 1px 5px; background: var(--slide);
  font: 600 15px/1.2 var(--mono); font-variation-settings: "wdth" 87; letter-spacing: -0.01em; color: var(--burnt);
  transform: translateX(-100%) rotate(-3deg); transform-origin: right top;
}
.ra-call figcaption { margin-top: 20px; color: var(--ink-2); max-width: 32em; }
.ra-price { margin-top: 24px; padding-top: 18px; box-shadow: 0 -1px 0 var(--rule); font-size: 15px; color: var(--ink-2); max-width: 36em; }
.ra-price .tnum:first-child { color: var(--ink); font-weight: 650; }
@media (min-width: 1100px) {
  .ra-call figcaption { font-size: 17px; }
}

/* body copy: no single word left on a last line */
main p, main li, main figcaption { text-wrap: pretty; }

/* CSP-safe positions from the approved mockup. */
.request-access-position-1 { --i:0; }

.field-error { display: block; color: var(--burnt); font-size: 15px; margin-top: 8px; }
[aria-invalid="true"] { border-color: var(--burnt); }
#form-status:empty { display: none; }