/* /showcase/build-signal: candidate treatment of /what-we-build, "Pick the
   signal". Stylesheet for this page only; tokens come from base.css.

   The world: a Slate mosaic of 1,921 squares is the page's colour field.
   Ink and Teal arrive only as answers, and Teal means worth engaging.
   Amber appears once, as the rule under "called for nothing". Pick rows
   are typographic records on hairlines. The one Surface object is the
   receipt. No shadows, no cards, no icons. */

::selection { background: var(--pill-yes-bg); color: var(--ink); }

.sg-sr,
.sg-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 1. The pick ─────────────────────────────────────────────────── */

.sg-hero { padding: 26px 0 64px; }

.sg-hero-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 588px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro side"
    "rail  side"
    "table table";
  column-gap: clamp(40px, 4.4vw, 64px);
}
.sg-intro { grid-area: intro; }
.sg-side { grid-area: side; align-self: start; min-width: 0; position: relative; }
.sg-rail { grid-area: rail; }
.sg-table-wrap { grid-area: table; }

.sg-h1 {
  font-size: clamp(38px, 4.45vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--ink);
}
.sg-line { display: block; white-space: nowrap; }

.sg-lede {
  margin-top: 18px;
  max-width: 33em;
  font-size: 17px;
  line-height: 1.58;
  color: var(--body);
}

.sg-planlink {
  display: none;
  margin-top: 6px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease;
}
.sg-planlink:hover { text-decoration-color: var(--ink); }

/* The field. */
.sg-labels {
  position: relative;
  height: 44px;
  margin-bottom: 8px;
}
.sg-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  transition: opacity 200ms ease;
}
.sg-blocklabels {
  position: absolute; left: 0; top: 0; bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.sg-blocklabels { right: 0; }
.sg-bl {
  position: absolute; bottom: 0;
  left: var(--x, 0);
  width: var(--wd, 30%);
  display: flex; flex-direction: column; gap: 2px;
}
.sg-bl-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.sg-bl-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sg-bl[data-block="found"] .sg-bl-n { color: var(--teal-deep); }
/* Amber, once: the rule under the count of calls spent for nothing. It is
   a mark here, never type: Amber on Paper is under 3:1. */
.sg-bl-nothing .sg-bl-n {
  align-self: flex-start;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.sg-sw {
  display: inline-block;
  width: 9px; height: 9px;
  flex: none;
  border-radius: 2px;
}
.sg-sw-found { background: var(--teal); }
.sg-sw-nothing { background: var(--ink); }
.sg-sw-missed { background: var(--bg); outline: 1.5px solid var(--teal); outline-offset: -1.5px; }

.sg-figure[data-state="blocks"] .sg-caption,
.sg-figure[data-state="strip"] .sg-caption { opacity: 0; }
.sg-figure[data-state="blocks"] .sg-blocklabels,
.sg-figure[data-state="strip"] .sg-blocklabels {
  opacity: 1; visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}

.sg-canvas-wrap {
  position: relative;
  aspect-ratio: 586 / 478;
}
.sg-canvas-wrap.is-sized { aspect-ratio: auto; }
.sg-canvas { display: block; width: 100%; height: 100%; }
.sg-canvas-wrap.is-sized .sg-canvas { width: auto; height: auto; }

.sg-stripend {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.sg-figure[data-state="strip"] .sg-stripend { opacity: 1; }
.sg-restlabel {
  position: absolute; left: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.sg-figure[data-state="blocks"] .sg-restlabel,
.sg-figure[data-state="strip"] .sg-restlabel { opacity: 1; }

/* The scoreline: the pick's share of calls that land, and under it, at
   the same scale, the share picking at random. The count found follows
   as the second line, beside the action. */
.sg-scorerow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "a a"
    "b b"
    "f cta";
  align-items: center;
  column-gap: 16px;
  margin-top: 18px;
}
.sg-score-a,
.sg-score-b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sg-score-a { grid-area: a; color: var(--ink); }
.sg-score-b { grid-area: b; color: var(--muted); }
.sg-found {
  grid-area: f;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sg-found-n { font-weight: 600; color: var(--ink); }
.sg-cta { grid-area: cta; margin-top: 12px; }
.sg-figure[data-state="blocks"] .sg-found-n,
.sg-figure[data-state="strip"] .sg-found-n { color: var(--teal-deep); }

/* The fifteen named banks, under the strip once the story closes. */
.sg-logos { margin-top: 22px; }
.sg-logos.is-overlay { position: absolute; left: 0; right: 0; margin-top: 0; }
.sg-logos-cap {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sg-logos-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 10px;
  list-style: none;
}
.sg-logo {
  display: grid; place-items: center;
  width: 35px; height: 35px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.sg-logo img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sg-logo:hover { border-color: var(--ink); }
.sg-logos.is-in { animation: sg-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sg-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The rail: six typographic records on hairlines. */
.sg-rail { margin-top: 26px; }
.sg-rail fieldset { border: 0; min-width: 0; }
.sg-legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sg-pick {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 56px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.sg-pick:last-of-type { border-bottom: 1px solid var(--rule); }
.sg-radio {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
  pointer-events: none;
}
.sg-box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--bg);
  transition: background 160ms ease, border-color 160ms ease;
}
.sg-pick:hover .sg-box { border-color: var(--teal-deep); }
.sg-radio:checked ~ .sg-box { background: var(--ink); border-color: var(--ink); }
.sg-pick:has(.sg-radio:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

.sg-pick-text { display: flex; flex-direction: column; min-width: 0; }
.sg-pick-label {
  font-size: 16.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}
.sg-radio:checked ~ .sg-pick-text .sg-pick-label { font-weight: 600; }
.sg-pick-sub {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sg-pick-record:empty { display: none; }
.sg-pick.is-scored .sg-pick-trait { display: none; }
.sg-pick-record { animation: sg-fade 300ms ease both; }
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }

.sg-tally {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.sg-pick.is-scored .sg-tally-n { color: var(--ink); font-weight: 500; }

/* Row 6, locked: its title shows, its trait sits under a Slate bar. */
.sg-pick-trait { position: relative; align-self: flex-start; }
.sg-veil {
  position: absolute; inset: 2px 0;
  background: var(--slate);
  border-radius: 2px;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 340ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sg-trait-text { transition: opacity 240ms ease 160ms; }
.sg-pick.is-locked { cursor: default; }
.sg-pick.is-locked .sg-box { border-color: var(--slate); }
.sg-pick.is-locked .sg-veil { transform: scaleX(1); }
.sg-pick.is-locked .sg-trait-text { opacity: 0; transition: none; }
.sg-pick.is-locked:hover .sg-box { border-color: var(--slate); }

.sg-skip,
.sg-showall {
  display: none;
  margin-top: 6px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: text-decoration-color 160ms ease;
}
.sg-skip:hover,
.sg-showall:hover { text-decoration-color: var(--ink); }
.sg-js .sg-skip,
.sg-board.is-live .sg-showall { display: inline-block; }
.sg-js .sg-skip[hidden],
.sg-board.is-live .sg-showall[hidden] { display: none; }

/* The no-script table, and the state the page falls back to when the
   market file cannot be read. */
.sg-table-wrap { margin-top: 36px; overflow-x: auto; }
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.sg-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  font-size: 14.5px;
  color: var(--muted);
}
.sg-table th,
.sg-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  vertical-align: baseline;
}
.sg-table thead th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sg-table th[scope="row"],
.sg-table thead th:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.sg-table td { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--body); }
.sg-table tr.is-answer th,
.sg-table tr.is-answer td:last-child { font-weight: 600; color: var(--ink); }

@media (scripting: enabled) {
  .sg-table-wrap { display: none; }
}
@media (scripting: none) {
  .sg-side, .sg-rail { display: none; }
  .sg-planlink { display: inline-block; }
  .sg-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "table"; }
}
.sg-fallback .sg-side,
.sg-fallback .sg-rail { display: none; }
.sg-fallback .sg-table-wrap { display: block; }
.sg-fallback .sg-planlink { display: inline-block; }
.sg-fallback .sg-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "table"; }

/* ── Sections below the pick ─────────────────────────────────────── */

.sg-sec { padding: 82px 0; border-top: 1px solid var(--rule); }

.sg-body {
  max-width: 34em;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* 2. What the pick showed. */
.sg-showed-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.sg-showed h2 { max-width: 13em; }

.sg-board { padding-top: 10px; }
.sg-board:focus { outline: none; }
.sg-board:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.sg-board-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sg-board-axis,
.sg-lb {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 64px;
  column-gap: 16px;
  align-items: center;
}
.sg-board-axis { height: 34px; margin-top: 8px; }
.sg-board-axis::before { content: ""; }
.sg-chance-tag {
  grid-column: 2;
  position: relative;
  justify-self: start;
  margin-left: calc(var(--c) - 1px);
  padding-left: 8px;
  align-self: end;
  padding-bottom: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
  border-left: 1px solid var(--ink);
}
.sg-board-rows { list-style: none; }
.sg-lb { min-height: 44px; }
.sg-lb-name {
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.sg-lb-track {
  position: relative;
  height: 14px;
  background: var(--track);
  border-radius: 2px;
}
.sg-lb-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: var(--teal);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(var(--s));
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sg-lb-chance {
  position: absolute;
  left: calc(var(--c) - 0.5px);
  top: -15px; bottom: -15px;
  width: 1px;
  background: var(--ink);
}
.sg-lb:last-child .sg-lb-chance { bottom: -4px; }
.sg-lb-val {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sg-lb-answer .sg-lb-name,
.sg-lb-answer .sg-lb-val { font-weight: 600; }
.sg-board.is-live .sg-lb:not(.is-on) .sg-lb-fill { transform: scaleX(0); }
.sg-board.is-live .sg-lb:not(.is-on) .sg-lb-val,
.sg-board.is-live .sg-lb:not(.is-on) .sg-lb-name { color: var(--muted); }
.sg-showall { margin-top: 14px; }

/* 3. The receipt. */
.sg-build { background: var(--tint); }
.sg-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.sg-build-h { position: sticky; top: 96px; }

.sg-receipt {
  position: relative;
  margin-top: 10px;
  padding: 30px 36px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 0;
}
/* The perforated top edge: a row of half-round teeth, drawn as a mask so
   both layers take their colour from the tokens. The first layer is the
   hairline, the second the paper of the receipt one pixel inside it. */
.sg-receipt::before,
.sg-receipt::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  height: 8px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8V4a6 4 0 0 1 12 0v4z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 8px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8V4a6 4 0 0 1 12 0v4z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 8px;
}
.sg-receipt::before { top: -8px; background: var(--rule); }
.sg-receipt::after { top: -7px; left: 0; right: 0; background: var(--surface); }

.sg-receipt-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sg-receipt-lines { list-style: none; }
.sg-rl {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  padding: 18px 0 17px;
  border-bottom: 1px dashed var(--rule);
  scroll-margin-top: 96px;
}
.sg-rl:last-child { border-bottom: 0; }
.sg-rl-ord {
  grid-row: 1 / span 2;
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--teal-deep);
}
.sg-rl-name {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.sg-arrow { flex: none; transition: transform 160ms ease; }
.sg-rl-name:hover { color: var(--teal-deep); }
.sg-rl-name:hover .sg-arrow { transform: translateX(3px); }
.sg-rl:target .sg-rl-name { text-decoration-color: var(--ink); }
.sg-rl-proof {
  margin-top: 6px;
  max-width: 46em;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
}
.sg-demo {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  font-family: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
}

/* 4. Close. */
.sg-close { padding: 96px 0 90px; }
.sg-close h2 { max-width: 20em; }
.sg-close-lede {
  max-width: 32em;
  margin-top: 22px;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
}
.sg-textlink {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms ease;
}
.sg-textlink:hover { text-decoration-color: var(--ink); }
.sg-house {
  margin-top: 40px;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Narrower desktops and tablets ───────────────────────────────── */

@media (max-width: 999px) {
  .sg-hero-grid {
    display: flex;
    flex-direction: column;
  }
  .sg-side { display: contents; }
  .sg-intro { order: 1; }
  .sg-figure { order: 2; margin-top: 26px; }
  .sg-rail { order: 3; }
  .sg-logos { order: 4; }
  .sg-table-wrap { order: 5; }
  .sg-figure { max-width: 588px; }
  .sg-showed-grid,
  .sg-build-grid { grid-template-columns: minmax(0, 1fr); }
  .sg-board { margin-top: 36px; }
  .sg-build-h { position: static; margin-bottom: 30px; }
}

/* ── Phone ───────────────────────────────────────────────────────── */

@media (max-width: 699px) {
  .sg-hero { padding: 8px 0 44px; }
  .sg-h1 { font-size: 38px; line-height: 1; }
  .sg-lede { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
  .sg-planlink { display: inline-block; margin-top: 0; line-height: 1.45; }

  .sg-figure { margin: 6px -4px 0; }
  .sg-labels { height: 32px; margin-bottom: 5px; }
  .sg-caption { font-size: 12.5px; line-height: 1.4; }
  .sg-canvas-wrap { aspect-ratio: 61.833 / 30.833; }
  .sg-bl-name { font-size: 11.5px; line-height: 13px; gap: 4px; letter-spacing: 0.02em; }
  .sg-bl-n { font-size: 18px; line-height: 18px; }
  .sg-bl-nothing .sg-bl-n { text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .sg-sw { width: 7px; height: 7px; }
  .sg-restlabel, .sg-stripend { font-size: 11.5px; line-height: 13px; }
  .sg-scorerow {
    grid-template-areas:
      "a a"
      "b f";
    align-items: baseline;
    column-gap: 10px;
    margin-top: 6px;
  }
  .sg-score-a, .sg-score-b { font-size: 28px; line-height: 1; }
  .sg-found { margin-top: 0; font-size: 12.5px; justify-self: end; }
  .sg-cta { display: none; }

  .sg-rail { margin-top: 8px; }
  .sg-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sg-pick { min-height: 46px; padding: 4px 0; column-gap: 12px; }
  .sg-pick-label { font-size: 15px; }
  .sg-pick-sub { font-size: 11px; }
  .sg-tally { font-size: 12px; }
  .sg-tally-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .sg-logos { margin-top: 18px; }
  .sg-logos-row { gap: 6px; }
  .sg-logo { width: 44px; height: 44px; }
  .sg-logo img { width: 26px; height: 26px; }

  .sg-sec { padding: 56px 0; }
  .sg-board-axis,
  .sg-lb { grid-template-columns: 112px minmax(0, 1fr) 48px; column-gap: 10px; }
  .sg-lb-name { font-size: 13.5px; }
  .sg-lb-val { font-size: 12px; }

  .sg-receipt { margin: 10px -4px 0; padding: 22px 18px 8px; }
  .sg-rl { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; padding: 15px 0 14px; }
  .sg-rl-name { font-size: 18px; }
  .sg-rl-proof { font-size: 13px; }
  .sg-close { padding: 64px 0 60px; }
  .sg-close h2 .line { display: inline; }
  .sg-close-lede { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-caption, .sg-blocklabels, .sg-stripend, .sg-restlabel,
  .sg-veil, .sg-trait-text, .sg-lb-fill, .sg-box, .sg-arrow { transition: none; }
  .sg-logos.is-in, .sg-pick-record { animation: none; }
}