/* ============================================================================
   /share-your-story on the sub page system (9 Oct 2026). Loaded in PageStyles, after sub.css.
   Every rule under .sp, tokens only (no hex outside tos-site.css, canon guard rule 4).
   The layout of /get-started: the words, the form, then what happens next on a phone;
   the words and what happens next on the left, the form on the right from 981px.
   The form itself is sub.css section 12.8 (site-form, site-field, the honeypot .hp).
   ============================================================================ */

.sp .sys { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "next"; padding-block: 28px 72px; }
.sp .sys-intro { grid-area: intro; min-width: 0; }
.sp .sys-form { grid-area: form; min-width: 0; margin-top: 36px; }
.sp .sys-next { grid-area: next; min-width: 0; margin-top: 56px; }

/* what happens next */
.sp .sys-steps .lg-k { color: var(--lp-ink); font-weight: 600; }
.sp .sys-steps .lg-x { font-weight: 600; }
@media (min-width: 600px) {
  .sp .ledger.sys-steps li { grid-template-columns: 40px minmax(0, 1fr); }
}
.sp .sys-promise { margin-top: 28px; }

/* the form panel: on a phone it sits on the page under a rule; framed from 640px */
.sp .sys-form.site-form { border: 0; border-top: 1px solid var(--lp-ink); background: none; padding: 20px 0 0; }
.sp .sys-form .site-form-success .cta { margin-top: 20px; }
.sp .sys-form .site-form-success p { font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); }
@media (min-width: 640px) {
  .sp .sys-form.site-form { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 32px; }
}

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