/* ============================================================================
   /get-started on the sub page system (9 Oct 2026). The next step after the homepage's
   "Get started": the same paper, ink and one orange, the same buttons.

   Loaded BEFORE sub.css: Landing.Master emits HeadContent ahead of its own stylesheets, so a
   rule here wins only by specificity, never by order. Every override of a sub.css rule below
   carries one class more than the rule it overrides. Every rule under .sp, tokens only
   (--lp-*, --dl-*, --tos-*; no hex, canon guard rule 4). Square corners (2px on buttons and
   fields, as sub.css), hairlines, no shadows, no pills. Fields 48px, buttons 52px, every
   target 44px or more, nothing under 12px. Mobile first: the rules outside media queries
   are the 390px phone; 640 (the form's two-button row), 981 (two columns), 1180 (desktop type).

   .gs-js is added to the form by request-access.js. Without it the form is one plain page
   with both steps showing, posting to the server; the step controls are hidden because
   they would do nothing.
   ============================================================================ */

/* ---- layout: the words, the form, then the reason (phone); words + reason left, form right ---- */
.sp .gs { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "value"; padding-block: 28px 72px; }
.sp .gs-intro { grid-area: intro; min-width: 0; }
.sp .gs-form { grid-area: form; min-width: 0; margin-top: 36px; }
.sp .gs-value { grid-area: value; min-width: 0; margin-top: 64px; }

@media (min-width: 981px) {
  .sp .gs {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "intro form" "value form";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 112px);
    padding-block: 64px 120px;
  }
  .sp .gs-form { margin-top: 0; align-self: start; }
  .sp .gs-value { margin-top: 56px; }
}

/* ---- the reason: a record list, each row the moment over what changes ---- */
.sp .gs-value-h { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 16px; }
.sp .gs-moments .lg-k { color: var(--lp-accent-text); font-weight: 600; }
.sp .gs-m { display: block; color: var(--lp-ink-2); }
.sp .gs-c { display: block; margin-top: 2px; font-weight: 600; color: var(--lp-ink); }
@media (min-width: 600px) {
  .sp .ledger.gs-moments li { grid-template-columns: 40px minmax(0, 1fr); }
}
.sp .gs-mail { margin-top: 32px; }
@media (min-width: 1180px) {
  .sp .gs-value-h { font-size: 22px; }
  .sp .gs-mail.callout .big { font-size: 24px; }
}

/* ---- the form panel: a hairline frame on paper; on a phone the form sits on the page ---- */
.sp .gs-form.site-form { border: 0; border-top: 1px solid var(--lp-ink); background: none; padding: 20px 0 0; }
@media (min-width: 640px) {
  .sp .gs-form.site-form { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 32px; }
}
@media (min-width: 1180px) {
  .sp .gs-form.site-form { padding: 40px 44px 44px; }
}

.sp .gs-f.is-sent { display: none; }

/* ---- progress rail (JavaScript only): two hairline bars and "Step 1 of 2" ---- */
.sp .gs-rail { display: none; }
.sp .gs-js .gs-rail { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.sp .gs-rail-bars { display: inline-flex; gap: 6px; }
.sp .gs-rail-bars i { display: block; width: 32px; height: 3px; background: var(--lp-rule-2); transition: background-color .3s ease; }
.sp .gs-rail-bars i.is-on { background: var(--lp-accent); }
.sp .gs-rail-t { color: var(--lp-muted); }

/* ---- steps ---- */
.sp .gs-step { border: 0; margin: 0; padding: 0; min-width: 0; }   /* a fieldset's default min-width overflows a phone */
/* without JavaScript both steps show, one after the other */
.sp .gs-step + .gs-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--lp-rule); }
.sp .gs-js .gs-step { display: none; }
.sp .gs-js .gs-step.is-on { display: block; animation: gsStepIn .28s ease both; }
.sp .gs-js .gs-step + .gs-step { margin-top: 0; padding-top: 0; border-top: 0; }
@keyframes gsStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* the legend floats, so it sits inside the step's padding (a plain legend sits in the border,
   which put the no-JavaScript second step's padding between its title and its first line) */
.sp .gs-step-h { float: inline-start; display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; margin: 0 0 22px; font: 600 22px/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); }
.sp .gs-step-h + * { clear: both; }
.sp .gs-step-n { font-size: 13px; font-weight: 600; color: var(--lp-accent-text); }
.sp .gs-step-h:has(+ .gs-step-p) { margin-bottom: 10px; }
.sp .gs-step-p { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--lp-ink-2); }

/* ---- fields: label above, 48px, the same frame as sub.css's form fields ---- */
.sp .gs-field { margin: 0 0 22px; }
.sp .gs-field > label,
.sp .gs-label { display: block; padding: 0; margin: 0 0 8px; font: 600 15px/1.4 var(--tos-font-body); color: var(--lp-ink); }

.sp .gs-field input[type="text"],
.sp .gs-field input[type="email"],
.sp .gs-field select,
.sp .gs-field textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px;
  border: 1px solid var(--lp-rule-2); border-radius: 2px; background-color: var(--lp-paper); color: var(--lp-ink);
  font: 400 16px/1.4 var(--tos-font-body);   /* 16px: below this, iOS zooms the page on focus */
  font-weight: inherit;                       /* the body's weight: 450 on a phone or touch screen */
  transition: border-color .15s ease;
}
.sp .gs-field textarea { min-height: 120px; resize: vertical; }
.sp .gs-field select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--lp-ink) 50%), linear-gradient(135deg, var(--lp-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
[dir="rtl"] .sp .gs-field select { background-position: 14px 50%, 20px 50%; }

.sp .gs-field input[type="text"]:hover,
.sp .gs-field input[type="email"]:hover,
.sp .gs-field select:hover,
.sp .gs-field textarea:hover { border-color: var(--lp-ink-2); }

.sp .gs-field input[type="text"]:focus,
.sp .gs-field input[type="email"]:focus,
.sp .gs-field select:focus,
.sp .gs-field textarea:focus { outline: 2px solid var(--lp-accent); outline-offset: -1px; border-color: var(--lp-ink); }

/* a field that needs the reader: the orange edge and the note under it */
.sp .gs-field input[aria-invalid="true"],
.sp .gs-field select[aria-invalid="true"],
.sp .gs-field textarea[aria-invalid="true"] { border-color: var(--lp-accent); }

.sp .gs-hint { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--lp-muted); }

/* ---- company size: five choices, each a 48px square-cornered tile ---- */
.sp .gs-sizes { border: 0; padding: 0; min-width: 0; }
.sp .gs-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .sp .gs-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp .gs-chip { position: relative; display: block; margin: 0; cursor: pointer; }
/* The radio stays a real, focusable radio: it covers the tile, invisible, so the whole
   tile is the target and the keyboard still moves through the group with the arrows. */
.sp .gs-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sp .gs-chip span {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 48px; height: 100%; padding: 10px 12px;
  border: 1px solid var(--lp-rule-2); border-radius: 2px; background: var(--lp-paper); color: var(--lp-ink-2);
  font-size: 15px; line-height: 1.3; text-align: start;
  transition: border-color .15s ease, background-color .15s ease;
}
/* the homepage's small square, empty until chosen */
.sp .gs-chip span::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--lp-muted); }
.sp .gs-chip:hover span { border-color: var(--lp-ink-2); color: var(--lp-ink); }
.sp .gs-chip input:checked + span { border-color: var(--lp-ink); background: var(--lp-paper-2); color: var(--lp-ink); font-weight: 600; }
.sp .gs-chip input:checked + span::before { background: var(--lp-accent); border-color: var(--lp-accent); }
.sp .gs-chip input:focus-visible + span { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.sp .gs-sizes[aria-invalid="true"] .gs-chip span { border-color: var(--lp-accent); }

/* ---- notes: one per field, and the summary at the top (sub.css draws .site-form-error) ---- */
.sp .gs-err { display: none; margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--lp-ink); }
.sp .gs-err.is-on { display: flex; align-items: baseline; gap: 8px; }
.sp .gs-err::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--lp-accent); transform: translateY(-1px); }
.sp .site-form-error.gs-summary { margin-bottom: 22px; }
.sp .gs-summary a { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-underline-offset: 3px; }

/* ---- buttons: the homepage's .btn. On a phone, full width, the forward one on top ---- */
.sp .gs-nav { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 8px; }
.sp .gs-form .gs-nav .btn { width: 100%; margin: 0; cursor: pointer; }
.sp .gs-form .gs-nav .btn-p { border: 0; }
.sp .gs-form .gs-nav .btn:disabled { opacity: .6; cursor: wait; }
@media (min-width: 640px) {
  .sp .gs-nav { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .sp .gs-form .gs-nav .btn { width: auto; min-width: 168px; }
}

/* Back and Continue only exist with JavaScript; Get started only on the last step. */
.sp .gs-nav .gs-js-only { display: none; }
.sp .gs-js .gs-nav .gs-js-only.is-on { display: inline-flex; }
.sp .gs-form .gs-js .gs-nav .btn[type="submit"]:not(.is-on) { display: none; }

.sp .gs-privacy { margin: 20px 0 0; font-size: 14px; line-height: 1.55; color: var(--lp-muted); }
.sp .gs-privacy a {
  color: var(--lp-ink-2); text-decoration: underline; text-underline-offset: 3px;
  /* a 44px-tall hit area without moving the line: padding out, the same margin back */
  display: inline-block; padding-block: 13px; margin-block: -13px;
}

/* ---- thank you ---- */
.sp .site-form-success.gs-ok { padding: 4px 0; }
.sp .gs-ok-h { margin: 0 0 14px; font-size: clamp(28px, 6.4vw, 36px); }
.sp .gs-ok-h:focus { outline: none; }
.sp .gs-ok-p { font-size: 17px; line-height: 1.55; color: var(--lp-ink-2); max-width: 30em; }
.sp .gs-ok .cta { margin-top: 24px; }
.sp .gs-ok .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }