/* Home bands. Shared chrome lives in substrate.css. */

.sp-frame-home {
  background: var(--sp-header);
}

.sp-opener {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: calc(825 * var(--sp-k));
  padding: calc(200 * var(--sp-k)) calc(48 * var(--sp-k));
  background: var(--sp-header);
}

.sp-opener .sp-display {
  max-width: 18em;
}

.sp-opener-lead {
  max-width: calc(900 * var(--sp-k));
  margin-top: calc(37.77 * var(--sp-k));
}

.sp-opener .sp-cta-hero {
  margin-top: calc(42 * var(--sp-k));
}

.sp-fine {
  margin: calc(12 * var(--sp-k)) 0 0;
  font-size: calc(12 * var(--sp-k));
  line-height: calc(17.662 * var(--sp-k));
  color: var(--sp-muted);
}

.sp-fine a {
  color: inherit;
  text-decoration: underline;
}

.sp-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--sp-k));
  margin: calc(8 * var(--sp-k)) 0 0;
  opacity: 0.7;
  font-size: calc(12 * var(--sp-k));
  line-height: calc(17.662 * var(--sp-k));
  color: var(--sp-muted);
}

.sp-check {
  width: calc(15 * var(--sp-k));
  height: calc(15 * var(--sp-k));
  border: calc(0.75 * var(--sp-k)) solid var(--sp-muted);
  border-radius: calc(1.5 * var(--sp-k));
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.sp-check input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sp-check::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 8%;
  width: 35%;
  height: 62%;
  border: solid var(--sp-ink);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}

.sp-check:has(input:checked)::after {
  opacity: 1;
}

.sp-consent > span:last-child {
  cursor: default;
}

.sp-features {
  padding: calc(230.4 * var(--sp-k)) calc(46.08 * var(--sp-k)) 0;
  font-variation-settings: "opsz" 14;
}

.sp-features .sp-h2 {
  margin-bottom: calc(64.95 * var(--sp-k));
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12 * var(--sp-k));
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-tile {
  min-height: calc(510.4 * var(--sp-k));
  padding: calc(37.12 * var(--sp-k));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(27.84 * var(--sp-k));
  overflow: hidden;
}

.sp-tile-text {
  display: flex;
  flex-direction: column;
  gap: calc(8.58 * var(--sp-k));
  width: 100%;
  max-width: calc(483.82 * var(--sp-k));
}

.sp-tile-mock-first .sp-tile-text {
  margin-top: auto;
}

.sp-tile-a { background: var(--sp-c1); }
.sp-tile-b { background: var(--sp-c2); }
.sp-tile-c { background: var(--sp-c3); }
.sp-tile-d { background: var(--sp-c4); }
.sp-tile-e { background: var(--sp-c5); }
.sp-tile-f { background: var(--sp-footer); }

.sp-tile-title {
  margin: 0;
  font-size: calc(28.7 * var(--sp-k));
  line-height: calc(43 * var(--sp-k));
  letter-spacing: calc(-0.431 * var(--sp-k));
  font-weight: 600;
}

.sp-tile-copy {
  margin: 0;
  font-size: calc(22 * var(--sp-k));
  line-height: calc(33 * var(--sp-k));
}

.sp-mock {
  width: 100%;
  max-width: calc(482.56 * var(--sp-k));
  padding: 1px;
  background: var(--sp-white);
  border: 1px solid var(--sp-line);
  border-radius: calc(8 * var(--sp-k));
  overflow: hidden;
  margin-top: auto;
  font-size: calc(17.4 * var(--sp-k));
  line-height: calc(24.36 * var(--sp-k));
}

.sp-tile-mock-first .sp-mock {
  margin-top: 0;
}

.sp-convert {
  display: flex;
  align-items: center;
  gap: calc(13.9 * var(--sp-k));
  padding: calc(12.064 * var(--sp-k)) calc(15.776 * var(--sp-k));
  background: var(--sp-bar);
}

.sp-convert > span:nth-child(2) {
  flex: 1 1 0;
  min-width: 0;
}

.sp-convert img {
  width: calc(23.2 * var(--sp-k));
  height: auto;
  max-width: none;
}

.sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(41.76 * var(--sp-k));
  height: calc(41.76 * var(--sp-k));
  border-radius: calc(4 * var(--sp-k));
  color: var(--sp-white);
  font-size: calc(13.9 * var(--sp-k));
  line-height: calc(19.49 * var(--sp-k));
  font-weight: 600;
}

.sp-badge-doc { background: var(--sp-doc); }
.sp-badge-pdf { background: var(--sp-pdf); }

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(9.28 * var(--sp-k));
  padding: calc(15.77 * var(--sp-k));
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  height: calc(39.34 * var(--sp-k));
  border-radius: 999px;
  padding: 0 calc(13.992 * var(--sp-k));
  background: var(--sp-chip);
  border: 1px solid var(--sp-line);
  color: var(--sp-ink);
  font-weight: 500;
}

.sp-chip-on {
  background: var(--sp-blue);
  border-color: var(--sp-blue);
  color: var(--sp-white);
}

.sp-file {
  display: flex;
  align-items: center;
  gap: calc(13.9 * var(--sp-k));
  padding: calc(12.064 * var(--sp-k)) calc(15.776 * var(--sp-k));
}

.sp-file > span:nth-child(2) {
  flex: 1 1 0;
  min-width: 0;
}

.sp-file + .sp-file,
.sp-file-result {
  border-top: 1px solid var(--sp-line);
}

.sp-file-hot {
  background: var(--sp-bar);
}

.sp-nudge {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--sp-k));
}

.sp-nudge i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(25.98 * var(--sp-k));
  height: calc(18.55 * var(--sp-k));
  border: 1px solid var(--sp-line);
  border-radius: calc(3 * var(--sp-k));
  background: var(--sp-chip);
  color: var(--sp-muted);
  font-style: normal;
  font-size: calc(13 * var(--sp-k));
  line-height: calc(18.19 * var(--sp-k));
  font-weight: 500;
}

.sp-file-result {
  display: flex;
  align-items: center;
  gap: calc(13.9 * var(--sp-k));
  padding: calc(12.064 * var(--sp-k)) calc(15.776 * var(--sp-k));
  color: var(--sp-muted);
}

.sp-file-result strong {
  flex: 1 1 0;
  min-width: 0;
  color: var(--sp-ink);
  font-weight: 700;
}

.sp-winbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--sp-k));
  padding: calc(11.136 * var(--sp-k)) calc(15.77 * var(--sp-k)) calc(12.136 * var(--sp-k));
  background: var(--sp-chip);
  border-bottom: 1px solid var(--sp-line);
  font-weight: 600;
}

.sp-winbar .sp-quiet {
  color: var(--sp-muted);
}

.sp-dots {
  display: inline-flex;
  gap: calc(9.3 * var(--sp-k));
}

.sp-dots i {
  width: calc(13.91 * var(--sp-k));
  height: calc(13.91 * var(--sp-k));
  border-radius: 50%;
  background: var(--sp-line);
  display: block;
}

.sp-dots .sp-dot-close {
  background: var(--sp-close);
}

.sp-drop {
  width: calc(100% - 29.55 * var(--sp-k));
  margin: calc(15.8 * var(--sp-k)) auto;
  border: 2px dashed var(--sp-line);
  border-radius: calc(6 * var(--sp-k));
  padding: calc(43.01 * var(--sp-k)) calc(20.56 * var(--sp-k)) calc(43.86 * var(--sp-k));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2.96 * var(--sp-k));
  text-align: center;
}

.sp-drop strong {
  font-weight: 600;
}

.sp-drop span,
.sp-mock-note {
  color: var(--sp-muted);
  font-weight: 400;
}

.sp-mock-note {
  margin: 0;
  padding: calc(12.32 * var(--sp-k)) calc(15.776 * var(--sp-k)) calc(12.06 * var(--sp-k));
  border-top: 1px solid var(--sp-line);
  text-align: right;
}

.sp-tile-d .sp-mock {
  padding: 0;
}

.sp-progress {
  margin: calc(14.76 * var(--sp-k)) calc(15.77 * var(--sp-k)) calc(15.77 * var(--sp-k));
  height: calc(10 * var(--sp-k));
  border-radius: calc(5 * var(--sp-k));
  background: var(--sp-chip);
  overflow: hidden;
}

.sp-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sp-blue);
}

.sp-ready {
  display: flex;
  align-items: center;
  gap: calc(13.92 * var(--sp-k));
  margin: 0;
  padding: calc(13.92 * var(--sp-k)) calc(15.776 * var(--sp-k));
}

.sp-dot {
  width: calc(11.13 * var(--sp-k));
  height: calc(11.13 * var(--sp-k));
  border-radius: 50%;
  background: var(--sp-ok);
  flex: 0 0 auto;
}

.sp-dot-off {
  background: var(--sp-pdf);
}

.sp-openrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(13.91 * var(--sp-k));
  padding: calc(12.064 * var(--sp-k)) calc(15.776 * var(--sp-k));
  border-top: 1px solid var(--sp-line);
}

.sp-pill {
  background: var(--sp-blue);
  color: var(--sp-white);
  border: 1px solid var(--sp-blue);
  border-radius: 999px;
  padding: calc(6.74 * var(--sp-k)) calc(13.992 * var(--sp-k)) calc(7.6 * var(--sp-k));
  font-weight: 500;
}

.sp-status {
  display: flex;
  align-items: center;
  gap: calc(13.9 * var(--sp-k));
  padding: calc(13.92 * var(--sp-k)) calc(15.776 * var(--sp-k));
}

.sp-status img {
  width: calc(27.84 * var(--sp-k));
  height: auto;
  max-width: none;
}

.sp-status .sp-quiet {
  color: var(--sp-muted);
}

.sp-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--sp-white);
  font-weight: 500;
}

.sp-tabs span {
  padding: calc(13.16 * var(--sp-k)) calc(9.28 * var(--sp-k)) calc(14.02 * var(--sp-k));
  text-align: center;
  white-space: nowrap;
  color: var(--sp-muted);
  border-left: 1px solid var(--sp-line);
}

.sp-tabs span:first-child {
  border-left: 0;
}

.sp-tabs .sp-tab-on {
  background: var(--sp-blue);
  color: var(--sp-white);
}

.sp-tools {
  padding: calc(6.496 * var(--sp-k));
}

.sp-tool {
  padding: calc(8.52 * var(--sp-k)) calc(13.92 * var(--sp-k)) calc(9.38 * var(--sp-k));
  border-radius: calc(5 * var(--sp-k));
}

.sp-tool-on {
  background: var(--sp-chip);
}

.sp-tool-dim {
  color: var(--sp-muted);
}

.sp-flow {
  width: min(calc(1200 * var(--sp-k)), calc(100% - calc(80 * var(--sp-k))));
  margin-inline: auto;
  padding-top: calc(230.4 * var(--sp-k));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(23.2 * var(--sp-k));
  font-variation-settings: "opsz" 14;
}

.sp-flow .sp-h2,
.sp-step-row {
  width: 100%;
  margin: 0;
}

.sp-step-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--sp-k));
}

.sp-flow .sp-step {
  min-height: calc(324 * var(--sp-k));
}

.sp-flow-action {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-top: calc(32 * var(--sp-k));
}

.sp-ask {
  display: grid;
  grid-template-columns: minmax(0, calc(591 * var(--sp-k))) minmax(0, calc(1209 * var(--sp-k)));
  justify-content: space-between;
  gap: calc(28 * var(--sp-k));
  padding: calc(120 * var(--sp-k)) calc(46.08 * var(--sp-k)) calc(80 * var(--sp-k));
}

.sp-ask-title {
  margin: 0;
  font-size: calc(83.5 * var(--sp-k));
  line-height: calc(81.85 * var(--sp-k));
  letter-spacing: calc(-2.923 * var(--sp-k));
  font-weight: 600;
}

.sp-ask-note {
  max-width: calc(342 * var(--sp-k));
  margin: calc(24 * var(--sp-k)) 0 0;
  color: var(--sp-muted);
  font-size: calc(22 * var(--sp-k));
  line-height: calc(33 * var(--sp-k));
}

.sp-close {
  text-align: center;
  padding: calc(160 * var(--sp-k)) calc(48 * var(--sp-k));
}

.sp-close h2 {
  margin: 0 0 calc(40 * var(--sp-k));
  font-size: calc(83.5 * var(--sp-k));
  line-height: calc(96 * var(--sp-k));
  letter-spacing: calc(-2.923 * var(--sp-k));
  font-weight: 600;
}

@media (max-width: 900px) {
  .sp-opener {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 48px 20px 36px;
  }

  .sp-opener-lead,
  .sp-fine,
  .sp-consent,
  .sp-ask-note,
  .sp-tile-copy,
  .sp-tile-title,
  .sp-step p,
  .sp-chip,
  .sp-convert,
  .sp-file,
  .sp-file-result,
  .sp-winbar,
  .sp-drop,
  .sp-ready,
  .sp-openrow,
  .sp-status,
  .sp-tabs,
  .sp-tool,
  .sp-mock-note {
    font-size: 16px;
    line-height: 1.4;
  }

  .sp-tile-title,
  .sp-step-title {
    font-size: 22px;
  }

  .sp-features,
  .sp-ask,
  .sp-close {
    padding: 56px 20px;
  }

  .sp-features .sp-h2,
  .sp-close h2 {
    margin-bottom: 24px;
  }

  .sp-grid,
  .sp-step-row,
  .sp-ask {
    grid-template-columns: 1fr;
  }

  .sp-tile {
    min-height: 0;
  }

  .sp-tile-text,
  .sp-mock {
    max-width: none;
  }

  .sp-chip {
    height: auto;
    padding: 6px 12px;
  }

  .sp-flow {
    width: 100%;
    padding: 56px 20px;
  }

  .sp-ask-title,
  .sp-close h2 {
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.05;
  }

  .sp-ask-note {
    max-width: none;
  }
}