/* ── Reset scope ──────────────────────────────────────────────────────────── */
#sonder-self-serve-root *,
#sonder-self-serve-root *::before,
#sonder-self-serve-root *::after {
  box-sizing: border-box;
}
#sonder-self-serve-root {
  font-weight: 400;
}
#sonder-self-serve-root button {
  font-weight: 500;
}

:root {
  --sss-bg-primary: #ffffff;
  --sss-bg-secondary: #f7f6f3;
  --sss-bg-success: #eaf3de;
  --sss-text-primary: #2c2c2a;
  --sss-text-secondary: #5f5e5a;
  --sss-text-tertiary: #737169;
  --sss-text-info: #0c447c;
  --sss-text-success: #27500a;
  --sss-text-danger: #791f1f;
  --sss-border-tertiary: rgba(44, 44, 42, 0.12);
  --sss-border-secondary: rgba(44, 44, 42, 0.25);
  --sss-mono: "SF Mono", "Fira Code", monospace;
  --sss-r-md: 8px;
  --sss-r-lg: 12px;
}

html {
  scrollbar-gutter: stable;
}

:root {
  --sss-site-h: 80px;
}
@media (max-width: 992px) {
  :root {
    --sss-site-h: 60px;
  }
  #sonder-self-serve-root .sss-trust-pills {
    display: none;
  }
  .sss-plans:not(.sss-cmode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#sonder-self-serve-root {
  font-family: inherit;
  color: var(--sss-text-primary);
  line-height: 1.5;
}

/* ── Page wrap ────────────────────────────────────────────────────────────── */
.sss-page-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.sss-shell {
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-lg);
  overflow: clip;
  background: var(--sss-bg-primary);
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.sss-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  background: var(--sss-bg-primary);
  flex-wrap: wrap;
  gap: 8px;
}
.sss-topbar-brand {
  font-size: 16px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-trust-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sss-tpill {
  font-size: 13px;
  color: var(--sss-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
#sonder-self-serve-root .sss-tpill-link {
  color: inherit;
  text-decoration: none;
}
#sonder-self-serve-root .sss-tpill-link:hover {
  text-decoration: underline;
}
.sss-tpill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1d9e75;
  flex-shrink: 0;
}

/* ── Config bar ───────────────────────────────────────────────────────────── */
.sss-config-bar {
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  background: var(--sss-bg-secondary);
  padding: 10px 20px;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: var(--sss-site-h, 80px);
  z-index: 10;
}
.sss-cb-group {
  display: grid;
  grid-template-rows: 14px 1fr;
  gap: 6px;
  align-items: center;
  justify-items: start;
}
.sss-cb-label {
  font-size: clamp(9px, 0.85vw, 10px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sss-text-tertiary);
  align-self: start;
}
.sss-cb-divider {
  width: 0.5px;
  background: var(--sss-border-tertiary);
  flex-shrink: 0;
  margin: 0 14px;
  align-self: center;
  height: 38px;
}
.sss-seat-row {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.sss-seat-num {
  width: 56px;
  text-align: center;
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: 500;
  padding: 0 4px;
  border: 0.5px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  background: var(--sss-bg-primary);
  color: var(--sss-text-primary);
  line-height: 1.4;
  -moz-appearance: textfield;
}
.sss-seat-num::-webkit-inner-spin-button,
.sss-seat-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.sss-disabled-tip {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sss-disabled-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  white-space: nowrap;
  padding: 6px 9px;
  background: #2c2c2a;
  color: #f0ede9;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
.sss-disabled-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 5px solid transparent;
  border-bottom-color: #2c2c2a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
.sss-disabled-tip:has(button:disabled):hover::after,
.sss-disabled-tip:has(button:disabled):hover::before {
  opacity: 1;
}
.sss-disabled-tip--top::after {
  top: auto;
  bottom: calc(100% + 7px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.sss-disabled-tip--top::before {
  top: auto;
  bottom: 100%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: transparent;
  border-top-color: #2c2c2a;
}

.sss-seat-err {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  white-space: nowrap;
  padding: 6px 9px;
  background: #2c2c2a;
  color: #f0ede9;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}
.sss-seat-err::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-bottom-color: #2c2c2a;
}
.sss-seat-err.sss-visible {
  opacity: 1;
}
.sss-fa-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sss-fa-row-label {
  font-size: 14px;
  color: var(--sss-text-secondary);
}
.sss-tog {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--sss-border-secondary);
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sss-tog.sss-on {
  background: #325bea;
}
.sss-tog::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.15s;
}
.sss-tog.sss-on::after {
  transform: translateX(16px);
}
.sss-cb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 14px;
  flex-shrink: 0;
}
#sss-config-bar .sss-cb-right {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}
#sss-config-bar.sss-stuck .sss-cb-right {
  visibility: visible;
  opacity: 1;
}
.sss-cb-plan-label {
  min-width: 11ch;
  display: inline-block;
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-cb-total-val {
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--sss-text-primary);
  line-height: 1;
}
.sss-cb-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#sonder-self-serve-root button {
  text-align: center;
}
#sonder-self-serve-root .sss-cb-cta {
  padding: 9px 18px;
  border-radius: var(--sss-r-md);
  background: #325bea;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
  font-family: inherit;
}
#sonder-self-serve-root .sss-cb-cta:hover:not(:disabled) {
  background: #2b4ecb;
}
#sonder-self-serve-root .sss-cb-cta:disabled {
  background: var(--sss-border-secondary);
  color: var(--sss-text-tertiary);
  cursor: not-allowed;
}

/* ── Layout grids ─────────────────────────────────────────────────────────── */
.sss-cfg-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.sss-cfg-main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.sss-checkout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.sss-checkout-main {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 0.5px solid var(--sss-border-tertiary);
  min-width: 0;
}
.sss-checkout-rail {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  background: var(--sss-bg-secondary);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.sss-progress-wrap {
  margin-bottom: 24px;
}
.sss-progress-bar {
  display: flex;
  align-items: center;
}
.sss-pb-step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sss-pb-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  border: 0.5px solid var(--sss-border-secondary);
  background: var(--sss-bg-secondary);
  color: var(--sss-text-tertiary);
  transition: all 0.2s;
}
.sss-pb-circle.sss-done {
  background: #eaf3de;
  border-color: #1d9e75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%231d9e75' d='m7.958 12.625 7.063-7.062a.81.81 0 0 1 .594-.25q.344 0 .593.25.25.25.25.593 0 .344-.25.594l-7.666 7.667a.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25l-3.583-3.584a.78.78 0 0 1-.24-.593.85.85 0 0 1 .26-.594.81.81 0 0 1 .594-.25q.344 0 .594.25z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}
.sss-pb-circle.sss-active {
  background: #325bea;
  color: white;
  border-color: #325bea;
}
.sss-pb-label {
  font-size: 14px;
  color: var(--sss-text-tertiary);
}
.sss-pb-label.sss-done {
  color: var(--sss-text-secondary);
}
.sss-pb-label.sss-active {
  color: var(--sss-text-primary);
  font-weight: 500;
}
.sss-pb-line {
  flex: 1;
  height: 0.5px;
  background: var(--sss-border-tertiary);
  margin: 0 8px;
}
.sss-pb-line.sss-done {
  background: #1d9e75;
}

/* ── Section heading ──────────────────────────────────────────────────────── */
.sss-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#sonder-self-serve-root .sss-next-btn {
  padding: 7px 16px;
  border-radius: var(--sss-r-md);
  background: #325bea;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  flex-shrink: 0;
}
#sonder-self-serve-root .sss-next-btn:hover:not(:disabled) {
  background: #2b4ecb;
}
#sonder-self-serve-root .sss-next-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sss-sec-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
#sonder-self-serve-root .sss-cmp-toggle-btn {
  font-size: 14px;
  color: var(--sss-text-info);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.sss-plan-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
#sonder-self-serve-root #sss-faq-btn {
  background: #fff;
  border: 0.5px solid var(--sss-border-tertiary);
  color: var(--sss-text-secondary);
  border-radius: var(--sss-r-md);
  padding: 6px 14px;
  font-size: 12px;
}
#sonder-self-serve-root #sss-details-faq-btn {
  justify-self: flex-end;
}
#sonder-self-serve-root #sss-faq-btn:hover {
  background: var(--sss-bg-secondary);
  color: var(--sss-text-primary);
}
.sss-cmp-arrow {
  display: inline-block;
  transition: transform 0.25s;
}
.sss-cmp-arrow.sss-rotated {
  transform: rotate(180deg);
}

/* ── Plan cards ───────────────────────────────────────────────────────────── */
.sss-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.sss-plans.sss-cmode {
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-lg);
  overflow: clip;
}
.sss-cmp-lbl-hd {
  position: sticky;
  top: calc(var(--sss-site-h, 80px) + var(--sss-bar-h, 62px));
  z-index: 5;
  background: var(--sss-bg-primary);
  border-bottom: 0.5px solid var(--sss-border-tertiary);
}
.sss-cmp-plan-hd {
  position: sticky;
  top: calc(var(--sss-site-h, 80px) + var(--sss-bar-h, 62px));
  z-index: 5;
  background: var(--sss-bg-primary);
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  border-left: 0.5px solid var(--sss-border-tertiary);
  border-radius: 0;
  border-right: none;
  border-top: none;
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sss-plans.sss-cmode .sss-pc-price span {
  display: block;
  margin-left: 0;
  vertical-align: top;
}
.sss-plans.sss-cmode .sss-pc-name {
  font-size: clamp(12px, 1.3vw, 16px);
}
.sss-plans.sss-cmode .sss-pc-price {
  font-size: clamp(12px, 1.6vw, 20px);
}
.sss-plans.sss-cmode .sss-pc-price span {
  font-size: clamp(8px, 0.75vw, 10px);
}
.sss-cmp-plan-hd.sss-sel {
  background: #eeedfe;
}
.sss-plans.sss-cmode .sss-pc {
  border-radius: 0;
}
.sss-plans.sss-cmode .sss-pc.sss-sel {
  outline: none;
}
.sss-cmp-cat-row {
  grid-column: 1 / -1;
  padding: 14px 12px;
  background: var(--sss-bg-primary);
  font-size: 13px;
  font-weight: 500;
  color: #000;
  border-top: 0.5px solid var(--sss-border-tertiary);
  box-shadow: 0 .1em .2em rgba(0,0,0,0.05);
  position: sticky;
  top: calc(calc(var(--sss-site-h, 80px) + var(--sss-bar-h, 62px)) + var(--sss-cmp-plan-hd-h, 80px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sss-cmp-cat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(1500%) hue-rotate(215deg) brightness(105%);
}
.sss-cmp-feat-lbl {
  padding: 16px 12px;
  border-top: 0.5px solid var(--sss-border-tertiary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sss-cmp-feat-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--sss-text-primary);
  line-height: 1.3;
}
.sss-cmp-feat-desc {
  font-size: 11px;
  color: var(--sss-text-tertiary);
  margin-top: 3px;
  line-height: 1.4;
}
.sss-cmp-val {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-top: 0.5px solid var(--sss-border-tertiary);
  border-left: 0.5px solid var(--sss-border-tertiary);
  text-align: center;
}
.sss-cmp-val.sss-sel-col {
  background: rgba(83, 74, 183, 0.04);
}
@media (max-width: 992px) {
  .sss-plans.sss-cmode {
    grid-template-columns: repeat(4, 1fr);
  }
  .sss-cmp-lbl-hd {
    display: none;
  }
  .sss-cmp-plan-hd {
    border-left: none;
    border-right: 0.5px solid var(--sss-border-tertiary);
    font-size: 12px;
    padding: 8px 6px;
  }
  .sss-cmp-plan-hd:last-of-type {
    border-right: none;
  }
  .sss-cmp-feat-lbl {
    grid-column: 1 / -1;
    border-left: none;
    background: var(--sss-bg-primary);
    padding: 8px 12px;
  }
  .sss-cmp-cat-row {
    background: #e8e6f0;
    color: var(--sss-text-secondary);
    top: calc(calc(var(--sss-site-h, 60px) + var(--sss-bar-h, 62px)) + var(--sss-cmp-plan-hd-h, 60px));
  }
  .sss-cmp-val {
    border-top: none;
    border-bottom: 0.5px solid var(--sss-border-tertiary);
  }
  .sss-cmp-val:first-of-type {
    border-left: none;
  }
}
.sss-pc {
  background: var(--sss-bg-primary);
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-lg);
  cursor: pointer;
  transition: border-color 0.12s;
}
.sss-pc:hover .sss-pc-header {
  background: var(--sss-bg-secondary);
}
.sss-pc.sss-sel {
  outline: 2px solid #325bea;
}
.sss-pc-header {
  padding: 11px 10px 10px;
  transition: background 0.15s;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  display: flex;
  flex-direction: column;
}
.sss-plans:not(.sss-cmode) .sss-pc-header {
  border-bottom: none;
}
.sss-pc-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--sss-text-primary);
  margin-bottom: 1px;
  overflow: hidden;
}
.sss-pc-who {
  font-size: 12px;
  color: var(--sss-text-secondary);
  margin-bottom: 7px;
  line-height: 1.3;
  overflow: hidden;
}
.sss-pc-price {
  font-size: 20px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-pc-price span {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  color: var(--sss-text-secondary);
  line-height: 1.2;
  vertical-align: middle;
  margin-left: 5px;
}
@media (max-width: 1200px) {
  .sss-pc-price span {
    display: block;
    margin-left: 0;
  }
}
.sss-pc-monthly {
  font-size: 13px;
  color: var(--sss-text-secondary);
  margin-top: 2px;
}
.sss-pc-sel-tag {
  font-size: 12px;
  font-weight: 500;
  color: #325bea;
  margin-top: 8px;
  visibility: hidden;
  flex-shrink: 0;
}
.sss-pc.sss-sel .sss-pc-sel-tag {
  visibility: visible;
}
.sss-pc-compact {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sss-pc-compact-feat {
  font-size: 12px;
  color: var(--sss-text-secondary);
  display: flex;
  gap: 3px;
  line-height: 1.3;
  align-items: flex-start;
}
.sss-ck {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%231d9e75' d='m7.958 12.625 7.063-7.062a.81.81 0 0 1 .594-.25q.344 0 .593.25.25.25.25.593 0 .344-.25.594l-7.666 7.667a.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25l-3.583-3.584a.78.78 0 0 1-.24-.593.85.85 0 0 1 .26-.594.81.81 0 0 1 .594-.25q.344 0 .594.25z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  font-size: 0;
  margin-top: 2px;
}
.sss-pc-obj {
  display: none;
}
.sss-tick {
  display: inline-flex;
  align-items: center;
}
.sss-dash {
  color: var(--sss-text-tertiary);
  font-size: 14px;
}
.sss-cmp-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--sss-text-secondary);
  background: var(--sss-bg-secondary);
  border: 0.5px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  padding: 2px 5px;
  white-space: nowrap;
}
.sss-cmp-tag--payg {
  background: oklch(95.1% 0.026 236.824);
  color: oklch(50% 0.134 242.749);
  padding: .2em .4em;
  border-radius: .2em;
  border: none;
  text-align: center;
}
.sss-cmp-tag--addon {
  background: #EFE4F5;
  color: oklch(38.1% 0.176 304.987);
  padding: .2em .4em;
  border-radius: .2em;
  border: none;
  text-align: center;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.sss-form-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.sss-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 18px;
}
.sss-form-bottom {
  margin-top: auto;
  padding-top: 24px;
}
.sss-fsec-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sss-text-tertiary);
  margin-bottom: 2px;
}
.sss-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#sonder-self-serve-root .sss-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#sonder-self-serve-root .sss-field input,
#sonder-self-serve-root .sss-field select {
  font-size: 15px;
  padding: 7px 9px;
  border-radius: var(--sss-r-md);
  border: 0.5px solid var(--sss-border-secondary);
  background: var(--sss-bg-primary);
  color: var(--sss-text-primary);
  width: 100%;
  transition: border-color 0.12s;
  font-family: inherit;
}
#sonder-self-serve-root .sss-field input:focus,
#sonder-self-serve-root .sss-field select:focus {
  outline: none;
  border-color: #325bea;
  box-shadow: 0 0 0 2px rgba(83, 74, 183, 0.12);
}
.sss-field-hint {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  margin-top: 1px;
}
.sss-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.sss-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 9px;
}

/* ── Checkboxes ───────────────────────────────────────────────────────────── */
.sss-chk-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-md);
  cursor: pointer;
  transition: border-color 0.12s;
}
.sss-chk-field:hover {
  border-color: var(--sss-border-secondary);
}
.sss-chk-field.sss-checked {
  border-color: #325bea;
  background: #eeedfe;
}
.sss-chk-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 0.5px solid var(--sss-border-secondary);
  background: var(--sss-bg-primary);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.sss-chk-box.sss-checked {
  background: #325bea;
  border-color: #325bea;
}
.sss-chk-box.sss-checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='m7.958 12.625 7.063-7.062a.81.81 0 0 1 .594-.25q.344 0 .593.25.25.25.25.593 0 .344-.25.594l-7.666 7.667a.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25l-3.583-3.584a.78.78 0 0 1-.24-.593.85.85 0 0 1 .26-.594.81.81 0 0 1 .594-.25q.344 0 .594.25z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sss-chk-txt {
  font-size: 13px;
  color: var(--sss-text-secondary);
  line-height: 1.5;
}
#sonder-self-serve-root .sss-chk-txt a {
  color: var(--sss-text-info);
}

/* ── Submit button ────────────────────────────────────────────────────────── */
.sss-quote-validity {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  margin-bottom: 10px;
}
#sonder-self-serve-root .sss-gen-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--sss-r-md);
  background: #325bea;
  color: white;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
#sonder-self-serve-root .sss-gen-btn:hover:not(:disabled):not(.sss-loading) {
  background: #2b4ecb;
}
#sonder-self-serve-root .sss-gen-btn:disabled {
  background: var(--sss-border-secondary);
  color: var(--sss-text-tertiary);
  cursor: not-allowed;
}
#sonder-self-serve-root .sss-gen-btn.sss-loading {
  background: #6e66c5;
  cursor: wait;
}
.sss-gen-reassure {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* ── Order summary rail ───────────────────────────────────────────────────── */
.sss-order-rail-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sss-text-primary);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
}
.sss-order-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.sss-order-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  font-size: 14px;
}
.sss-order-row:last-child {
  border-bottom: none;
}
.sss-order-row .sss-ol {
  color: var(--sss-text-secondary);
}
.sss-order-row .sss-ov {
  color: var(--sss-text-primary);
  font-weight: 500;
  text-align: right;
}
.sss-order-total-block {
  background: var(--sss-bg-primary);
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-md);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.sss-order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 14px;
}
.sss-order-total-row:last-child {
  margin-bottom: 0;
}
.sss-order-total-row .sss-ol {
  color: var(--sss-text-secondary);
}
.sss-order-total-row .sss-ov {
  color: var(--sss-text-primary);
  font-weight: 500;
}
.sss-order-total-row.sss-big .sss-ov {
  font-size: 20px;
}
.sss-order-acv {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  text-align: right;
  margin-top: 1px;
}
.sss-trust-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.sss-trust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sss-text-secondary);
}
.sss-trust-check {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #eaf3de;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: #27500a;
}
.sss-lock-note {
  font-size: 12px;
  font-style: italic;
  color: var(--sss-text-tertiary);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 0.5px solid var(--sss-border-tertiary);
}

/* ── Sent state ───────────────────────────────────────────────────────────── */
.sss-sent-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 0;
  flex: 1;
}
.sss-sent-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sss-sent-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
}
.sss-sent-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eaf3de;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2327500a' d='m7.958 12.625 7.063-7.062a.81.81 0 0 1 .594-.25q.344 0 .593.25.25.25.25.593 0 .344-.25.594l-7.666 7.667a.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25l-3.583-3.584a.78.78 0 0 1-.24-.593.85.85 0 0 1 .26-.594.81.81 0 0 1 .594-.25q.344 0 .594.25z'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto 12px;
  font-size: 0;
}
.sss-sent-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--sss-text-primary);
  margin-bottom: 5px;
}
.sss-sent-desc {
  font-size: 15px;
  color: var(--sss-text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 340px;
}
.sss-link-box {
  background: var(--sss-bg-secondary);
  border: 0.5px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
  text-align: left;
}
.sss-link-url {
  flex: 1;
  font-size: 13px;
  color: var(--sss-text-info);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sss-mono);
}
#sonder-self-serve-root .sss-copy-btn {
  font-size: 13px;
  color: var(--sss-text-secondary);
  border: 0.5px solid var(--sss-border-secondary);
  background: var(--sss-bg-primary);
  border-radius: var(--sss-r-md);
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
#sonder-self-serve-root .sss-copy-btn.sss-copied {
  color: var(--sss-text-success);
  border-color: #1d9e75;
}
.sss-copy-link-btn {
  width: 100%;
  padding: 9px;
  border-radius: var(--sss-r-md);
  background: none;
  border: 0.5px solid var(--sss-border-secondary);
  font-size: 14px;
  font-weight: 500;
  color: var(--sss-text-secondary);
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
  transition: background 0.12s;
}
.sss-copy-link-btn:hover {
  background: var(--sss-bg-secondary);
}
.sss-sent-validity {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: center;
}
#sonder-self-serve-root .sss-open-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--sss-r-md);
  background: #325bea;
  color: white;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-bottom: 8px;
  font-family: inherit;
  transition: background 0.12s;
}
#sonder-self-serve-root .sss-open-btn:hover {
  background: #2b4ecb;
}
.sss-reading-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 0.5px solid var(--sss-border-tertiary);
}
.sss-reading-hd {
  font-size: 14px;
  font-weight: 500;
  color: var(--sss-text-primary);
  margin-bottom: 14px;
}
.sss-reading-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sss-reading-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: var(--sss-bg-primary);
  border: 1px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sss-reading-card--full {
  grid-column: 1 / -1;
}
.sss-reading-card--static {
  cursor: default;
}
.sss-reading-card:not(.sss-reading-card--static):hover {
  border-color: var(--sss-border-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.sss-reading-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sss-text-primary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
a.sss-reading-card .sss-reading-card-title::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  margin-left: 6px;
  background-color: currentColor;
  opacity: 0.35;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1H11v7.5M11 1L4 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1H11v7.5M11 1L4 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.sss-reading-card-sub {
  font-size: 12px;
  color: var(--sss-text-secondary);
  line-height: 1.4;
}
@media (max-width: 992px) {
  .sss-reading-grid {
    grid-template-columns: 1fr;
  }
  .sss-reading-card--full,
  .sss-reading-card {
    grid-column: 1 / -1;
  }
}
.sss-exp-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--sss-text-secondary);
  background: var(--sss-bg-secondary);
  border-radius: var(--sss-r-md);
  padding: 7px 10px;
  text-align: left;
  width: 100%;
}
.sss-exp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef9f27;
  flex-shrink: 0;
}

/* ── Review modal ─────────────────────────────────────────────────────────── */
.sss-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  z-index: 999;
}
.sss-overlay.sss-open {
  display: flex;
}
.sss-rev-modal {
  background: var(--sss-bg-primary);
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-lg);
  width: 100%;
  max-width: 560px;
}
@media (max-width: 620px) {
  .sss-rev-modal {
    max-width: 100%;
  }
}
.sss-rev-head {
  position: relative;
  padding: 20px 22px 16px;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
}
.sss-rev-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sss-text-tertiary);
  margin-bottom: 4px;
}
.sss-rev-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-rev-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sss-rev-summary {
  background: var(--sss-bg-secondary);
  border-radius: var(--sss-r-md);
  padding: 10px 12px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sss-rsi {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sss-rsi-l {
  font-size: 12px;
  color: var(--sss-text-tertiary);
}
.sss-rsi-v {
  font-size: 15px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-rev-check-item {
  border: 0.5px solid var(--sss-border-tertiary);
  border-radius: var(--sss-r-md);
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.sss-rci-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--sss-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.sss-rci-body {
  flex: 1;
  min-width: 0;
}
.sss-rci-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
.sss-rci-desc {
  font-size: 13px;
  color: var(--sss-text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.sss-rci-tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.sss-rci-status {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  background: #fef9c3;
  color: #854d0e;
}
.sss-rci-status.sss-included {
  background: #dcfce7;
  color: #166534;
}
.sss-wn {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sss-wn-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.sss-wn-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sss-bg-secondary);
  border: 0.5px solid var(--sss-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--sss-text-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}
.sss-wn-txt {
  font-size: 13px;
  color: var(--sss-text-secondary);
  line-height: 1.4;
}
.sss-wn-txt strong {
  color: var(--sss-text-primary);
  font-weight: 500;
}
.sss-rev-foot {
  padding: 0 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sss-rev-foot-secondary {
  display: flex;
  gap: 7px;
}
.sss-rev-foot-secondary .sss-btn-s {
  flex: 1;
}
#sonder-self-serve-root .sss-btn-p {
  width: 100%;
  padding: 10px;
  border-radius: var(--sss-r-md);
  background: #325bea;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
#sonder-self-serve-root .sss-btn-p:hover {
  background: #2b4ecb;
}
#sonder-self-serve-root .sss-btn-s {
  width: 100%;
  padding: 7px;
  border-radius: var(--sss-r-md);
  background: none;
  border: 0.5px solid var(--sss-border-secondary);
  font-size: 14px;
  color: var(--sss-text-secondary);
  cursor: pointer;
  font-family: inherit;
}
#sonder-self-serve-root .sss-btn-s:hover {
  background: var(--sss-bg-secondary);
}
.sss-rev-panel--hidden {
  display: none;
}
.sss-rev-survey-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--sss-text-tertiary);
  cursor: pointer;
  padding: 0;
}
.sss-rev-survey-close:hover {
  color: var(--sss-text-primary);
}
.sss-survey-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sss-survey-opt {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  background: var(--sss-bg-primary);
  text-align: left;
  font-size: 14px;
  color: var(--sss-text-primary);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.12s, background 0.12s;
}
.sss-survey-opt:hover {
  border-color: #325bea;
  background: var(--sss-bg-secondary);
}
.sss-modal-reassure {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* ── FAQ flyout ───────────────────────────────────────────────────────────── */
.sss-faq-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
}
.sss-faq-overlay.sss-open {
  display: block;
}
.sss-faq-flyout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--sss-bg-primary);
  border-left: 0.5px solid var(--sss-border-tertiary);
  z-index: 998;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sss-faq-flyout.sss-open {
  transform: translateX(0);
}
.sss-faq-flyout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  flex-shrink: 0;
  height: 60px;
}

@media (width > 991px) {
  .sss-faq-flyout-head {
    height: 80px;
  }
}

.sss-faq-flyout-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--sss-text-primary);
}
#sonder-self-serve-root .sss-faq-flyout-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--sss-text-tertiary);
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
#sonder-self-serve-root .sss-faq-flyout-close:hover {
  color: var(--sss-text-primary);
}
.sss-faq-flyout-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}
#sss-faq-list {
  flex: 1;
}
.sss-faq-item {
  border-bottom: 0.5px solid var(--sss-border-tertiary);
}
.sss-faq-item:last-of-type {
  border-bottom: none;
}
#sonder-self-serve-root .sss-faq-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 20px 0;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sss-faq-q {
  font-size: 14px;
  font-weight: 500;
  color: var(--sss-text-primary);
  line-height: 1.3;
  flex: 1;
}
.sss-faq-chev {
  font-size: 0;
  color: var(--sss-text-tertiary);
  flex-shrink: 0;
}
.sss-faq-chev::before {
  content: "+";
  font-size: 16px;
  font-weight: 400;
}
.sss-faq-chev.sss-open::before {
  content: "−";
}
.sss-faq-a {
  font-size: 13px;
  color: var(--sss-text-secondary);
  line-height: 1.5;
  padding-bottom: 40px;
  display: none;
}
.sss-faq-a p {
  margin-bottom: 8px;
}
.sss-faq-a p:last-child {
  margin-bottom: 0;
}
.sss-faq-a span[style*="display:block"] {
  margin-bottom: 2px;
}
.sss-faq-a.sss-open {
  display: block;
}
.sss-rail-faq-trigger {
  margin-top: auto;
  padding-top: 12px;
  border-top: 0.5px solid var(--sss-border-tertiary);
  display: flex;
  justify-content: flex-end;
}
.sss-rail-human {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sss-border-tertiary);
  font-size: 13px;
  color: var(--sss-text-secondary);
  text-align: center;
  line-height: 1.6;
}
#sonder-self-serve-root .sss-rail-human a {
  color: var(--sss-text-info);
  text-decoration: none;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.sss-loading-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}
.sss-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sss-border-tertiary);
  border-top-color: #325bea;
  border-radius: 50%;
  animation: sss-spin 0.7s linear infinite;
}
.sss-spinner--lg {
  width: 52px;
  height: 52px;
  border-width: 4px;
  margin-bottom: 1.5rem;
}
@keyframes sss-spin {
  to {
    transform: rotate(360deg);
  }
}
.sss-loading-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  max-width: 280px;
  margin: 0 auto;
}
.sss-loading-step {
  font-size: 0.875rem;
  color: var(--sss-text-tertiary);
  padding-left: 1.5rem;
  position: relative;
}
.sss-loading-step::before {
  content: "○";
  position: absolute;
  left: 0;
}
.sss-loading-step.is-active {
  color: #325bea;
  font-weight: 500;
}
.sss-loading-step.is-active::before {
  content: "●";
}
.sss-loading-step.is-done {
  color: var(--sss-text-success);
}
.sss-loading-step.is-done::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%231d9e75' d='m7.958 12.625 7.063-7.062a.81.81 0 0 1 .594-.25q.344 0 .593.25.25.25.25.593 0 .344-.25.594l-7.666 7.667a.8.8 0 0 1-.584.25.8.8 0 0 1-.583-.25l-3.583-3.584a.78.78 0 0 1-.24-.593.85.85 0 0 1 .26-.594.81.81 0 0 1 .594-.25q.344 0 .594.25z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 2px;
}

/* ── Quote rail — service period & date editor ────────────────────────────── */
.sss-qr-section {
  margin-bottom: 22px;
}

/* ── Quote rail — payment schedule card ──────────────────────────────────── */
.sss-qr-section--payment {
  background: var(--sss-bg-primary);
  border: 1px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.sss-qr-section--payment .sss-qr-annual-hd {
  padding: 10px 12px 0;
  margin-bottom: 0;
}
.sss-qr-section--payment .sss-qr-annual-lines {
  padding: 6px 12px 12px;
}
.sss-qr-section--payment .sss-qr-annual-line {
  padding: 6px 0;
}
.sss-qr-section--payment .sss-qr-annual-line--total {
  border-top: 0.5px solid var(--sss-border-tertiary);
  border-bottom: none;
  padding-top: 10px;
  margin-top: 4px;
  align-items: center;
}
.sss-qr-section--payment .sss-qr-annual-line--total .sss-qr-av {
  font-size: 20px;
  font-weight: 500;
}

/* ── Quote rail — footer paragraphs ──────────────────────────────────────── */
.sss-qr-foot {
  font-size: 12px;
  color: var(--sss-text-tertiary);
  line-height: 1.6;
  margin-top: 6px;
}
.sss-qr-foot a {
  color: var(--sss-text-info);
}

.sss-qr-foot--italic {
  font-style: italic;
}

/* ── Quote rail ───────────────────────────────────────────────────────────── */
.sss-qr-monthly-block {
  background: var(--sss-bg-primary);
  border: 1px solid var(--sss-border-secondary);
  border-radius: var(--sss-r-md);
  margin-bottom: 12px;
}
.sss-qr-lines {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
}
.sss-qr-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.sss-qr-ll {
  color: var(--sss-text-secondary);
}
.sss-qr-lv {
  color: var(--sss-text-primary);
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 8px;
}
.sss-qr-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--sss-text-tertiary);
}
.sss-qr-monthly-total {
  position: relative;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eeedfe;
  gap: 8px;
  border-radius: 0 0 var(--sss-r-md) var(--sss-r-md);
}
.sss-qr-monthly-tip {
  position: absolute;
  top: 7px;
  right: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  font-size: 11px;
  color: var(--sss-text-tertiary);
  line-height: 1;
}
.sss-qr-monthly-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  padding: 6px 9px;
  background: #2c2c2a;
  color: #f0ede9;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
.sss-qr-monthly-tip:hover::after {
  opacity: 1;
}
.sss-qr-mt-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--sss-text-secondary);
  line-height: 1.3;
}
.sss-qr-mt-val {
  font-size: 22px;
  font-weight: 500;
  color: var(--sss-text-primary);
  line-height: 1;
  flex-shrink: 0;
}
.sss-qr-annual-block {
  margin-top: 22px;
  margin-bottom: 14px;
}
.sss-qr-annual-hd {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sss-text-tertiary);
  margin-bottom: 5px;
}
.sss-qr-annual-lines {
  display: flex;
  flex-direction: column;
}
.sss-qr-annual-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--sss-border-tertiary);
  font-size: 13px;
}
.sss-qr-annual-line:last-child {
  border-bottom: none;
}
.sss-qr-al {
  color: var(--sss-text-secondary);
  flex: 1;
  padding-right: 8px;
  font-weight: 500;
}
.sss-qr-av {
  color: var(--sss-text-primary);
  font-weight: 500;
  flex-shrink: 0;
}
.sss-qr-qty {
  font-size: 11px;
  font-weight: 400;
  color: var(--sss-text-tertiary);
}
.sss-qr-annual-line--total .sss-qr-al {
  color: var(--sss-text-primary);
  font-weight: 500;
}

/* ── Focus-visible styles ─────────────────────────────────────────────────── */
.sss-pc:focus-visible {
  outline: 2px solid #325bea;
  outline-offset: 1px;
}
.sss-chk-field:focus-visible {
  outline: 2px solid #325bea;
  outline-offset: 1px;
}
.sss-tog:focus-visible {
  outline: 2px solid #325bea;
  outline-offset: 2px;
}
#sonder-self-serve-root .sss-cb-cta:focus-visible,
#sonder-self-serve-root .sss-gen-btn:focus-visible,
#sonder-self-serve-root .sss-btn-p:focus-visible,
#sonder-self-serve-root .sss-btn-s:focus-visible,
#sonder-self-serve-root .sss-open-btn:focus-visible,
#sonder-self-serve-root .sss-copy-btn:focus-visible,
#sonder-self-serve-root .sss-faq-btn:focus-visible,
#sonder-self-serve-root .sss-cmp-toggle-btn:focus-visible,
#sonder-self-serve-root .sss-faq-flyout-close:focus-visible {
  outline: 2px solid #325bea;
  outline-offset: 2px;
}

/* ── Progress step back-button reset ──────────────────────────────────────── */
#sonder-self-serve-root .sss-pb-step--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}
#sonder-self-serve-root .sss-pb-step--btn:focus-visible {
  outline: 2px solid #325bea;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sss-checkout-grid {
    grid-template-columns: 1fr;
  }
  .sss-checkout-rail {
    display: none;
  }
  .sss-plans:not(.sss-cmode) {
    grid-template-columns: 1fr;
  }
  .sss-two-col,
  .sss-three-col,
  .sss-form-grid {
    grid-template-columns: 1fr;
  }
}