/* ===========================================================================
   Forge Extension Sprint, layered on style.css (not product.css).

   A workshop sheet rather than a product page. There is no interface to put
   on a lit plate here, only a way of working, so the page draws that instead:
   a title block in the corner of a sheet of squared paper, numbered sections,
   the run of a sprint as a track with the two payments marked on it, and the
   four offers as a ladder in order of starting price. Every colour, size and
   focus style comes from the tokens in style.css. The small mono labels use
   the --mono system stack the site already sets code in; no font is added.

   The /partners page is a field guide: a chooser and one lit panel per app,
   with the product captures. This one has no captures and runs as numbered
   sheet sections, so the two read as different documents from the first
   scroll.

   Column widths are in px, not rem: with a larger default font size or text
   zoom, rem tracks grow with the text and squeeze the column beside them.
   =========================================================================== */

.page--sprint .shell > main {
  padding-top: clamp(20px, 3.2vw, 48px);
}

/* Lists on this page draw their own markers; drop the shared hairline. */
.sp-rules li,
.sp-run > li,
.sp-checks li,
.sp-fit li {
  margin: 0;
  padding-left: 0;
}

.sp-ladder > li {
  margin: 0;
}

.sp-rules li::before {
  content: none;
}

/* Squared paper, shared by the sheet at the top and the contact block. */
.sp-hero::before,
.sp-start__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  pointer-events: none;
}

/* ------------------------------------------------------------ the sheet */

.sp-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 40px clamp(40px, 5vw, 88px);
  align-items: end;
  padding: clamp(44px, 6vw, 92px) clamp(22px, 4vw, 56px) clamp(22px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--band);
}

.sp-hero::before {
  -webkit-mask-image: radial-gradient(130% 110% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
  mask-image: radial-gradient(130% 110% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
}

/* The brand mark's diamond, pinned to the top edge of the sheet. */
.sp-hero::after {
  content: "";
  position: absolute;
  top: -6px;
  left: clamp(22px, 4vw, 56px);
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--teal);
  border-radius: 2px;
  background: var(--ground);
  transform: rotate(45deg);
}

.sp-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}

.sp-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--teal);
  flex: none;
}

.sp-hero h1 {
  max-width: 11em;
  margin: 0;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.042em;
}

.sp-hero .lede {
  max-width: 44ch;
  margin: 28px 0 0;
}

.sp-hero .actions {
  margin-top: 28px;
  gap: 14px 22px;
}

/*
  With the text enlarged on a phone, "Extension" alone is wider than the
  sheet, and the button and link labels are too: let them break rather than
  run off the page, which body's overflow-x would clip.
*/
.sp-hero h1 {
  overflow-wrap: break-word;
}

.sp-hero .btn,
.sp-hero .arrow-link {
  white-space: normal;
}

/* The title block: the corner of a drawing where its particulars are kept. */
.sp-titleblock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-lit);
  border-radius: 12px;
  background: var(--line-lit);
}

.sp-titleblock > div {
  min-width: 0;
  padding: 14px 16px 16px;
  background: var(--ground);
}

.sp-titleblock dt {
  margin: 0 0 4px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
}

.sp-titleblock dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.4;
}

.sp-titleblock .sp-titleblock__key dd {
  color: var(--teal-lit);
}

/* -------------------------------------------------------------- sections */

.sp-sec {
  margin-top: clamp(80px, 9vw, 136px);
}

.sp-sec__head {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 416px);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: baseline;
  margin-bottom: clamp(28px, 3.6vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* A short teal tick over the section number, like a mark on a ruler. */
.sp-sec__head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 52px;
  height: 1px;
  background: var(--teal);
}

.sp-idx {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sp-sec__head h2 {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.sp-sec__intro {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

/* ------------------------------------------------------------ principles */

.sp-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 5vw, 88px);
  align-items: start;
}

.sp-statement {
  max-width: 30em;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(19px, 1.75vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.012em;
}

.sp-principles__text p:last-child {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-2);
}

.sp-rules {
  margin: 0;
  border-top: 1px solid var(--line);
}

.sp-rules li {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.sp-rules h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.sp-rules h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--teal);
  transform: translateY(-2px) rotate(45deg);
  flex: none;
}

.sp-rules p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* --------------------------------------------------- where it helps most */

.sp-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sp-case {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--band);
}

.sp-case__tag {
  margin: 0 0 14px;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
}

.sp-case h3 {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.6vw, 22px);
}

/* :where() keeps these at element weight, so the classed lines below win. */
:where(.sp-case) p {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* The one date on the page that someone else set. */
.sp-case__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px dashed rgba(78, 201, 168, 0.45);
  border-radius: 10px;
}

.sp-case p.sp-case__date {
  font-size: 14px;
  line-height: 1.45;
}

.sp-case__date time {
  color: var(--teal-lit);
  font-size: 15px;
  font-weight: 600;
}

.sp-case p.sp-case__price {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14.5px;
}

/* ---------------------------------------------------------- example jobs */

.sp-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Dashed, like a job ticket: a sketch of a case, not a record of one. */
.sp-job {
  min-width: 0;
  padding: 24px 24px 26px;
  border: 1px dashed var(--line-lit);
  border-radius: 16px;
}

.sp-job__label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-lit);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
}

.sp-job h3 {
  margin: 0 0 18px;
  font-size: 19px;
}

.sp-job__fields {
  margin: 0;
}

.sp-job__fields > div {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.sp-job__fields > div:last-child {
  padding-bottom: 0;
}

.sp-job__fields dt {
  margin: 0 0 4px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
}

.sp-job__fields dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.sp-job__fields > div:last-child dd {
  color: var(--ink);
}

/* ---------------------------------------------------- how a sprint runs */

/*
  A vertical track by default; across the page from 1180px. The track is
  each step's ::before, running from its node to the next one. The segment
  into the optional last step is dashed.
*/
.sp-run {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-run > li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 18px;
  padding-bottom: 34px;
}

.sp-run > li:last-child {
  padding-bottom: 0;
}

.sp-run > li::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 19.5px;
  width: 1px;
  background: var(--line-lit);
}

.sp-run > li:last-child::before {
  content: none;
}

.sp-run > li:nth-last-child(2)::before {
  background: repeating-linear-gradient(180deg, var(--ink-4) 0 4px, transparent 4px 9px);
}

.sp-run__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-lit);
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sp-run__step--optional .sp-run__node {
  border-style: dashed;
  border-color: var(--ink-4);
  color: var(--ink-3);
}

.sp-run__body {
  min-width: 0;
  padding-top: 7px;
}

.sp-run__when {
  margin: 0 0 4px;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.sp-run h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

:where(.sp-run__body) p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

.sp-run__body > :last-child {
  margin-bottom: 0;
}

/* A payment, marked where it falls in the run. */
.sp-run__body p.sp-pay {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 352px;
  margin: 16px 0 0;
  padding: 7px 12px 7px 7px;
  border-radius: 12px;
  background: var(--teal-deep);
  box-shadow: inset 0 0 0 1px rgba(78, 201, 168, 0.35);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.sp-pay__pct {
  display: grid;
  place-items: center;
  min-width: 3.2em;
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--teal);
  color: #06231e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  flex: none;
}

/* ----------------------------------------------------------------- price */

.sp-ladder-wrap {
  position: relative;
}

.sp-ladder-note {
  margin: 0 0 16px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
}

.sp-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.sp-offer h3 {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
}

.sp-offer__price {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sp-offer__from {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

:where(.sp-offer) p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.sp-offer p.sp-offer__unit {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 14px;
}

.sp-offer p.sp-offer__term {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
}

/* The sprint itself: lit from the top, the one teal edge in the row. */
.sp-offer--core {
  border-color: rgba(78, 201, 168, 0.4);
  background: linear-gradient(180deg, rgba(22, 52, 49, 0.9) 0%, var(--surface) 62%);
}

.sp-offer--core::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* On the teal-lit ground the quietest grey falls short of 4.5:1; step it up. */
.sp-offer--core .sp-offer__from,
.sp-offer--core p.sp-offer__unit {
  color: var(--ink-2);
}

/* Payment in two halves, drawn as two equal halves. */
.sp-split {
  display: grid;
  grid-template-columns: minmax(0, 304px) minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: 16px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--band);
}

.sp-split h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.sp-split__text p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.sp-split__bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-lit);
  border-radius: 12px;
}

.sp-split__half {
  min-width: 0;
  padding: 18px 20px 20px;
}

.sp-split__half--a {
  background: var(--teal-deep);
}

.sp-split__half--b {
  border-left: 1px dashed rgba(78, 201, 168, 0.5);
  background: var(--raised);
}

.sp-split__pct {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.sp-split__half p:last-child {
  margin: 0;
  color: #c9cfd3;
  font-size: 14.5px;
  line-height: 1.45;
}

.sp-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px clamp(28px, 3.5vw, 56px);
  margin-top: 28px;
}

:where(.sp-terms) p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.sp-terms p.sp-terms__partner {
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  color: var(--ink);
}

.sp-terms p.sp-terms__fine {
  color: var(--ink-3);
  font-size: 14px;
}

/* ------------------------------------------------ ownership, maintenance */

.sp-own {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px clamp(28px, 4vw, 72px);
  align-items: start;
}

.sp-own h3 {
  margin: 0 0 16px;
  font-size: 19px;
}

.sp-own__handover > p {
  max-width: 62ch;
  color: var(--ink-2);
}

.sp-own__handover > p:last-child {
  margin-bottom: 0;
}

.sp-checks {
  margin: 0 0 24px;
  border-top: 1px solid var(--line);
}

.sp-checks li {
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
}

/* A drawn tick, not a glyph, so nothing is read aloud. */
.sp-checks li::before,
.sp-fit__col--yes li::before {
  top: 18px;
  left: 3px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  border-radius: 0;
  background: none;
  transform: rotate(-45deg);
}

.sp-maint {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.sp-maint__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 15px;
}

.sp-maint__pct {
  color: var(--ink);
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.04em;
}

.sp-maint p.sp-maint__min {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

:where(.sp-maint) p,
.sp-maint li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

:where(.sp-maint) p {
  margin-bottom: 10px;
}

.sp-maint ul {
  margin: 0;
}

.sp-maint h4 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: 15px;
}

/* --------------------------------------------------- good fit, not a fit */

.sp-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sp-fit__col {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.sp-fit__col--yes {
  border-color: rgba(78, 201, 168, 0.28);
  background: linear-gradient(180deg, rgba(22, 52, 49, 0.55) 0%, rgba(22, 52, 49, 0) 70%);
}

.sp-fit__col--no {
  background: var(--band);
}

.sp-fit h3 {
  margin: 0 0 18px;
  font-size: 19px;
}

.sp-fit ul {
  margin: 0;
}

.sp-fit li {
  padding: 11px 0 11px 30px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

/* A drawn cross for what is out of scope. */
.sp-fit__col--no li::before {
  top: 18px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 0;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--ink-3) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--ink-3) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
}

/* ----------------------------------------------------------------- start */

.sp-start__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 88px);
  padding: clamp(26px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--band);
}

.sp-start__panel::before {
  -webkit-mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 80%);
  mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 80%);
}

.sp-start__label {
  margin: 0 0 6px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 13px;
}

.sp-start__mail {
  margin: 0 0 22px;
  font-size: clamp(22px, 3.4vw, 44px);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.sp-start__mail a {
  color: var(--ink);
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.sp-start__mail a:hover {
  color: var(--teal-lit);
}

.sp-start__main > p:not(.sp-start__label):not(.sp-start__mail) {
  max-width: 52ch;
  color: var(--ink-2);
}

.sp-start__main .actions {
  margin-top: 24px;
}

.sp-start__list h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.sp-start__list ul {
  margin: 0;
}

.sp-start__list li {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

.sp-start__alt {
  max-width: 72ch;
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: 15px;
}

/* ----------------------------------------------------------- responsive */

@media (min-width: 1180px) {
  /* The ladder climbs: each offer starts higher than the one before. */
  .sp-ladder > :nth-child(1) {
    margin-top: 120px;
  }
  .sp-ladder > :nth-child(2) {
    margin-top: 80px;
  }
  .sp-ladder > :nth-child(3) {
    margin-top: 40px;
  }
  /* The caption sits in the space the bottom rung leaves free. */
  .sp-ladder-note {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(25% - 14px);
    margin: 0;
  }

  /* The run goes across the page, with the payments level at the foot. */
  .sp-run {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sp-run > li {
    display: flex;
    flex-direction: column;
    padding: 0 28px 0 0;
  }
  .sp-run > li:last-child {
    padding-right: 0;
  }
  .sp-run > li::before {
    top: 19.5px;
    bottom: auto;
    left: 40px;
    right: 0;
    width: auto;
    height: 1px;
  }
  .sp-run > li:nth-last-child(2)::before {
    background: repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 9px);
  }
  .sp-run__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 22px;
  }
  .sp-run__body p.sp-pay {
    margin-top: auto;
  }
}

@media (max-width: 1179px) {
  .sp-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-jobs {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-run {
    max-width: 760px;
  }
}

@media (min-width: 700px) and (max-width: 1179px) {
  .sp-job__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .sp-job__fields > div:nth-last-child(2) {
    padding-bottom: 0;
  }
}

@media (max-width: 1080px) {
  .sp-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-hero__block {
    max-width: 544px;
  }
}

@media (max-width: 1000px) {
  .sp-sec__head {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .sp-sec__head::before {
    width: 44px;
  }
  .sp-sec__intro {
    grid-column: 2;
    max-width: 60ch;
    margin-top: 12px;
  }
  .sp-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-terms {
    grid-template-columns: minmax(0, 1fr);
    max-width: 62ch;
  }
}

@media (max-width: 900px) {
  .sp-principles,
  .sp-own,
  .sp-start__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .sp-cases,
  .sp-fit {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sp-ladder {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-hero {
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  .sp-titleblock {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-rules li {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-sec__head {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-sec__head::before {
    width: 44px;
  }
  .sp-idx {
    margin-bottom: 6px;
  }
  .sp-sec__intro {
    grid-column: auto;
  }
}

@media (max-width: 400px) {
  .sp-split__bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-split__half--b {
    border-top: 1px dashed rgba(78, 201, 168, 0.5);
    border-left: 0;
  }
}

/* Windows High Contrast drops backgrounds and shadows: keep the edges. */
@media (forced-colors: active) {
  .sp-pay,
  .sp-pay__pct,
  .sp-split__half,
  .sp-job__label {
    border: 1px solid CanvasText;
  }
  .sp-sec__head::before,
  .sp-kicker::before {
    background: CanvasText;
  }
}

@media print {
  .sp-hero,
  .sp-start__panel,
  .sp-case,
  .sp-job,
  .sp-offer,
  .sp-split,
  .sp-split__half,
  .sp-maint,
  .sp-fit__col,
  .sp-run__node,
  .sp-run__body p.sp-pay {
    background: none;
    border-color: #bbb;
    box-shadow: none;
  }
  .sp-hero::before,
  .sp-hero::after,
  .sp-start__panel::before,
  .sp-offer--core::before {
    display: none;
  }
  .sp-titleblock {
    background: #bbb;
  }
  .sp-titleblock > div {
    background: #fff;
  }
  .sp-ladder > li {
    margin-top: 0 !important;
  }
  .sp-titleblock dd,
  .sp-statement,
  .sp-run__node,
  .sp-run__body p.sp-pay,
  .sp-offer__price,
  .sp-split__pct,
  .sp-maint__pct,
  .sp-start__mail a,
  .sp-checks li,
  .sp-job__fields > div:last-child dd {
    color: #000;
  }
  .sp-case p,
  .sp-job__fields dd,
  .sp-run__body p,
  .sp-offer p,
  .sp-split__text p,
  .sp-split__half p:last-child,
  .sp-terms p,
  .sp-own__handover > p,
  .sp-maint p,
  .sp-maint li,
  .sp-fit li,
  .sp-rules p,
  .sp-principles__text p,
  .sp-start__main p,
  .sp-start__list li,
  .sp-sec__intro {
    color: #222;
  }
  .sp-sec__head {
    border-top-color: #bbb;
    break-after: avoid;
  }
  .sp-case,
  .sp-job,
  .sp-offer,
  .sp-run > li {
    break-inside: avoid;
  }
}