/* Submit a Black Friday deal (Figma section "2 · Submit a deal flow"): form, live preview, progress, success view.
   Uses the css/blog-post.css tokens (.post) and the deal card from css/blog-deals.css. */

.ds { padding-bottom: 0; }
.ds [hidden] { display: none !important; }

/* ------------------------------------------------------------------ hero */
.ds-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 32px 40px; text-align: center; }
.ds-hero .post-dek { max-width: 760px; }
.ds-hero .post-dek a { color: var(--post-text-accent); }
.ds-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 8px 0 0; list-style: none; }
.ds-promise li { position: relative; padding-left: 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); }
.ds-promise li::before, .ds-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ------------------------------------------------------------------ layout */
.ds-main { display: grid; grid-template-columns: minmax(0, 720px) 360px; justify-content: center; align-items: start; gap: 40px; padding: 8px 32px 120px; }
.ds-form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ds-legend { margin: 0; font-size: 14px; line-height: 20px; color: var(--post-text-2); }
.ds-req { color: #dc2626; font-weight: 500; }
.ds-opt { margin-left: 2px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--post-text-3); }

/* ------------------------------------------------------------------ section cards */
.ds-section { display: flex; flex-direction: column; gap: 24px; min-width: 0; margin: 0; padding: 32px; border: 1px solid var(--post-border); border-radius: 16px; background: var(--post-bg-surface); }
.ds-section-head { display: flex; align-items: flex-start; gap: 14px; }
.ds-step { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--post-bg-inverse); font-size: 12px; line-height: 16px; font-weight: 500; color: #fff; }
.ds-section-head h2 { margin: 2px 0 4px; font-size: 18px; line-height: 26px; letter-spacing: -0.18px; font-weight: 500; color: var(--post-text); }
.ds-section-head p { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.028px; color: var(--post-text-2); }
.ds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ds-row.is-three { grid-template-columns: repeat(3, 1fr); }
.ds-uploads { grid-template-columns: 240px 1fr; }

/* ------------------------------------------------------------------ fields */
.ds-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-field > label, .ds-label { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 20px; letter-spacing: -0.028px; font-weight: 500; color: var(--post-text); }
.ds-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--post-border-strong);
  border-radius: 10px;
  background: var(--post-bg-surface);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: var(--post-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input::placeholder, .ds-input input::placeholder, .ds-textarea textarea::placeholder { color: var(--post-text-3); }
.ds-input-icon, .ds-input-prefix { display: flex; align-items: center; gap: 10px; }
.ds-input-icon svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--post-text-3); }
.ds-input-icon input, .ds-input-prefix input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
.ds-input-prefix > span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--post-text-3); }
input.ds-input:focus, .ds-input:focus-within, .ds-select select:focus, .ds-textarea:focus-within {
  outline: 0;
  border-color: var(--post-accent);
  box-shadow: 0 0 0 3px rgba(5, 136, 240, 0.18);
}
.ds-input[aria-invalid="true"], .ds-input:has(input[aria-invalid="true"]) { border-color: #dc2626; }
.ds-input:disabled { background: var(--post-bg-muted); color: var(--post-text-3); }
.ds-mono { font-family: var(--post-mono); font-weight: 500; letter-spacing: 0.64px; text-transform: uppercase; }
.ds-mono::placeholder { text-transform: none; }
.ds-select { position: relative; }
.ds-select select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--post-border-strong);
  border-radius: 10px;
  background: var(--post-bg-surface);
  font: inherit;
  font-size: 16px;
  color: var(--post-text);
  appearance: none;
  cursor: pointer;
}
.ds-select svg { position: absolute; right: 14px; top: 16px; width: 16px; height: 16px; pointer-events: none; color: var(--post-text-2); }
.ds-currency { max-width: 220px; }
.ds-textarea { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; border: 1px solid var(--post-border-strong); border-radius: 10px; background: var(--post-bg-surface); }
.ds-textarea textarea { min-height: 48px; padding: 0; border: 0; outline: 0; resize: vertical; background: transparent; font: inherit; font-size: 16px; line-height: 24px; letter-spacing: -0.048px; color: var(--post-text); }
.ds-count { align-self: flex-end; font-size: 12px; line-height: 16px; color: var(--post-text-3); }
.ds-help { margin: 0; font-size: 12px; line-height: 16px; color: var(--post-text-3); }
.ds-error { display: flex; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; color: #b91c1c; }
.ds-error::before { content: "!"; display: grid; place-items: center; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: #dc2626; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; }
.ds-error.is-warning { color: #92400e; }
.ds-error.is-warning::before { background: #d97706; }
.ds-form-error { padding: 12px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; font-size: 14px; line-height: 20px; }

/* ------------------------------------------------------------------ toggles */
.ds-segmented, .ds-chips, .ds-radio-cards { display: flex; flex-wrap: wrap; }
.ds-segmented { gap: 4px; padding: 4px; border-radius: 10px; background: var(--post-bg-muted); }
.ds-segmented label { flex: 1 1 auto; }
.ds-chips { gap: 8px; }
.ds-segmented input, .ds-chips input, .ds-radio-cards input, .ds-check input { position: absolute; opacity: 0; pointer-events: none; }
.ds-segmented span { display: block; padding: 8px 14px; border-radius: 8px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text-2); cursor: pointer; }
.ds-segmented input:checked + span { background: var(--post-bg-surface); color: var(--post-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ds-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--post-border-strong); border-radius: 999px; background: var(--post-bg-surface); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); cursor: pointer; }
.ds-chips input:checked + span { border-color: var(--post-accent); background: var(--post-bg-accent-subtle); color: var(--post-text-accent); }
.ds-chips input:checked + span::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ds-radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-radio-cards label > span { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 16px 16px 16px 44px; border: 1px solid var(--post-border-strong); border-radius: 12px; background: var(--post-bg-surface); cursor: pointer; }
.ds-radio-cards label > span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--post-border-strong); border-radius: 50%; background: var(--post-bg-surface); }
.ds-radio-cards strong { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); }
.ds-radio-cards label > span > span { font-size: 12px; line-height: 16px; color: var(--post-text-2); }
.ds-radio-cards input:checked + span { border: 1.5px solid var(--post-accent); background: var(--post-bg-accent-subtle); }
.ds-radio-cards input:checked + span::before { border: 5px solid var(--post-accent); }
.ds-segmented input:focus-visible + span, .ds-chips input:focus-visible + span, .ds-radio-cards input:focus-visible + span, .ds-check input:focus-visible + span::before { outline: 2px solid var(--post-accent); outline-offset: 2px; }
.ds-check { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--post-text); cursor: pointer; }
.ds-check > span { display: flex; gap: 10px; }
.ds-check > span::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; box-sizing: border-box; margin-top: 1px; border: 1px solid var(--post-border-strong); border-radius: 5px; background: var(--post-bg-surface); }
.ds-check input:checked + span::before { border-color: var(--post-accent); background: var(--post-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ds-codes { display: flex; flex-direction: column; gap: 12px; }
.ds-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text-accent); cursor: pointer; }
@media (pointer: coarse) {
  .ds-add { position: relative; }
  .ds-add::after { content: ""; position: absolute; inset: -12px -8px; }
}
.ds-add svg { width: 14px; height: 14px; }
.ds-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ uploads */
.ds-drop { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 168px; padding: 16px; border: 1px solid var(--post-border-strong); border-radius: 12px; background: var(--post-bg-surface); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.ds-drop.is-dashed { border-style: dashed; background: var(--post-bg-page); }
.ds-drop:hover, .ds-drop.is-over { border-color: var(--post-accent); background: var(--post-bg-accent-subtle); }
.ds-drop:focus-within { border-color: var(--post-accent); box-shadow: 0 0 0 3px rgba(5, 136, 240, 0.18); }
.ds-drop-empty, .ds-drop-full { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ds-drop-icon { display: grid; place-items: center; padding: 10px; border-radius: 10px; background: var(--post-bg-accent-subtle); color: var(--post-text-accent); }
.ds-drop-icon svg { width: 20px; height: 20px; }
.ds-drop strong { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); overflow-wrap: anywhere; }
.ds-drop-empty > span:last-child { font-size: 12px; line-height: 16px; color: var(--post-text-3); }
.ds-thumb { display: grid; place-items: center; width: 64px; height: 64px; }
.ds-thumb.is-banner { width: 122px; }
.ds-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ds-drop-full strong { font-size: 12px; line-height: 16px; }
.ds-drop-actions { display: flex; gap: 12px; }
.ds-link { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--post-text-accent); cursor: pointer; }
.ds-link.is-muted { color: var(--post-text-3); }

/* ------------------------------------------------------------------ submit bar */
.ds-submit-bar { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--post-border); border-radius: 16px; background: var(--post-bg-surface); }
.ds-progress { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.ds-progress p { margin: 0; font-size: 14px; line-height: 20px; }
.ds-progress strong { font-weight: 500; color: var(--post-text); }
.ds-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--post-bg-muted); }
.ds-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--post-green); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
/* The checklist is a progress hint, not an error, until the visitor tries to submit: neutral first, red after */
.ds-progress .ds-missing, .ds-missing { font-size: 12px; line-height: 16px; color: var(--post-text-3); }
.is-ds-attempted .ds-missing { color: #b91c1c; }
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 8px; font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-btn svg { width: 16px; height: 16px; }
.ds-btn-primary { border: 0; background: var(--post-bg-inverse); color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.ds-btn-primary:hover { background: #262626; }
.ds-btn-primary[aria-disabled="true"] { background: #a3a3a3; box-shadow: none; }
.ds-btn-primary[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.ds-btn-secondary { border: 1px solid var(--post-border); background: var(--post-bg-surface); color: var(--post-text); }
.ds-btn-secondary:hover { background: var(--post-bg-muted); }
.ds-btn:focus-visible { outline: 2px solid var(--post-accent); outline-offset: 2px; }
.ds-fine { margin: 0; font-size: 12px; line-height: 16px; color: var(--post-text-3); }
.ds-sticky { display: none; }

/* ------------------------------------------------------------------ aside */
.ds-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.ds-preview-head { display: flex; align-items: center; gap: 8px; }
.ds-preview-head p { flex: 1; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); }
.ds-preview-head span { padding: 2px 8px; border-radius: 999px; background: var(--post-bg-accent-subtle); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--post-text-accent); }
.ds-preview-card { gap: 16px; padding: 20px; }
.ds-preview-card .bf-card-top { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.ds-preview-card .bf-card-top .bf-pill { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.ds-preview-card .bf-card-titles { grid-column: 1 / -1; }
.ds-preview-card h3 { margin: 0 0 4px; font-size: 18px; line-height: 26px; letter-spacing: -0.18px; font-weight: 500; color: var(--post-text); overflow-wrap: anywhere; }
.ds-preview-card .bf-card-titles p { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--post-text-2); overflow-wrap: anywhere; }
.ds-preview-card .bf-facts > div { flex-direction: column; gap: 4px; }
.ds-preview-card .bf-facts dt { flex-basis: auto; line-height: 20px; }
.ds-preview-card .bf-facts dd { overflow-wrap: anywhere; }
.ds-preview-logo { display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border-style: dashed; border-color: var(--post-border-strong); background: var(--post-bg-page); font-size: 12px; color: var(--post-text-3); }
.ds-preview-logo:has(img) { border-style: solid; border-color: var(--post-border); background: var(--post-bg-surface); }
.ds-preview-logo img { width: 100%; height: 100%; object-fit: contain; }
.ds-pending { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fff7ed; font-size: 12px; line-height: 18px; font-weight: 500; color: #9a3412; }
.ds-p-url { color: var(--post-text-accent); }
.ds-p-later { color: var(--post-text-3); }
.ds-p-btn { justify-content: center; width: 100%; border: 0; background: var(--post-accent); color: #fff; box-shadow: 0 4px 6px rgba(5, 136, 240, 0.28); }
.ds-next, .ds-checklist { padding: 24px; border-radius: 16px; }
.ds-next { border: 1px solid var(--post-border); background: var(--post-bg-surface); }
.ds-next h2, .ds-checklist h2 { margin: 0 0 16px; font-size: 18px; line-height: 26px; letter-spacing: -0.18px; font-weight: 500; color: var(--post-text); }
.ds-next ol { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: next; }
.ds-next li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 36px; counter-increment: next; font-size: 14px; line-height: 20px; }
.ds-next li::before { content: counter(next); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--post-bg-accent-subtle); font-size: 12px; font-weight: 500; color: var(--post-text-accent); }
.ds-next strong { font-weight: 500; color: var(--post-text); }
.ds-next span { color: var(--post-text-2); }
.ds-checklist { padding: 20px; background: var(--post-bg-muted); }
.ds-checklist h2 { margin-bottom: 10px; font-size: 14px; line-height: 20px; letter-spacing: 0; }
.ds-checklist ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ds-checklist li { position: relative; padding-left: 26px; font-size: 14px; line-height: 20px; color: var(--post-text); }
.ds-checklist li::before { background: var(--post-bg-surface); border: 1.5px dashed var(--post-border-strong); box-sizing: border-box; }
.ds-checklist li.is-done { color: var(--post-text-2); }
.ds-checklist li.is-done::before { border: 0; background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ds-preview-toggle { display: none; }

/* ------------------------------------------------------------------ success */
.ds-success { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 80px 24px 120px; text-align: center; }
.ds-success-badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: var(--bf-green); }
.ds-success-badge svg { width: 28px; height: 28px; }
.ds-success h1 { margin: 0; font-size: 44px; line-height: 52px; letter-spacing: -1.1px; font-weight: 500; color: var(--post-text); }
.ds-success h1:focus { outline: 0; }
.ds-success-text { max-width: 640px; margin: 0; font-size: 18px; line-height: 28px; letter-spacing: -0.09px; color: var(--post-text-2); }
.ds-summary { display: flex; flex-direction: column; gap: 14px; width: min(560px, 100%); box-sizing: border-box; padding: 24px; border: 1px solid var(--post-border); border-radius: 16px; background: var(--post-bg-surface); text-align: left; }
.ds-summary-top { display: flex; align-items: center; gap: 12px; }
.ds-summary-top .ds-preview-logo { width: 40px; height: 40px; border-radius: 10px; }
.ds-summary-top > div { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ds-summary-top strong { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--post-text); }
.ds-summary-top span { font-size: 14px; line-height: 20px; color: var(--post-text-2); }
.ds-summary dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ds-summary dl > div { display: flex; gap: 16px; padding-top: 10px; border-top: 1px solid var(--post-border); font-size: 14px; line-height: 20px; }
.ds-summary dt { flex: 0 0 96px; color: var(--post-text-3); }
.ds-summary dd { margin: 0; color: var(--post-text); overflow-wrap: anywhere; }
.ds-summary dd.ds-mono { text-transform: none; letter-spacing: 0; }
.ds-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ds-success-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--post-text-3); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
  .ds-main { grid-template-columns: minmax(0, 720px); padding: 8px 24px 140px; }
  .ds-aside { display: none; }
  .ds-preview-toggle { display: block; border: 1px solid var(--post-border); border-radius: 16px; background: var(--post-bg-surface); }
  .ds-preview-toggle summary { display: flex; align-items: center; gap: 12px; padding: 16px; list-style: none; cursor: pointer; }
  .ds-preview-toggle summary::-webkit-details-marker { display: none; }
  .ds-preview-toggle summary > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
  .ds-preview-toggle summary strong { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--post-text); }
  .ds-preview-toggle summary > span:nth-child(2) > span { font-size: 12px; line-height: 16px; color: var(--post-text-3); }
  .ds-preview-toggle summary > svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
  .ds-preview-toggle[open] summary > svg { transform: rotate(180deg); }
  .ds-preview-thumb { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--post-bg-accent-subtle); color: var(--post-text-accent); }
  .ds-preview-thumb svg { width: 16px; height: 16px; }
  .ds-preview-slot { padding: 0 16px 16px; }
  .ds-submit-bar { flex-direction: column; align-items: stretch; }
  .ds-submit-bar .ds-btn { width: 100%; }
  .ds-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--post-border);
    background: var(--post-bg-surface);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease;
  }
  .ds-sticky.is-suppressed { transform: translateY(100%); }
  .ds-sticky p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin: 0; font-size: 12px; line-height: 16px; }
  .ds-sticky strong { flex: none; white-space: nowrap; font-weight: 500; color: var(--post-text); }
  .ds-sticky .ds-btn { width: 100%; }
}

@media (max-width: 720px) {
  .ds-hero { padding: 32px 24px 24px; }
  .ds-promise { flex-direction: column; align-items: flex-start; text-align: left; }
  .ds-section { padding: 20px; gap: 20px; }
  .ds-row, .ds-row.is-three, .ds-uploads, .ds-radio-cards { grid-template-columns: 1fr; }
  .ds-currency { max-width: none; }
  .ds-success { padding: 48px 24px 96px; }
  .ds-success h1 { font-size: 32px; line-height: 38px; letter-spacing: -0.8px; }
  .ds-success-actions { flex-direction: column; width: 100%; }
  .ds-summary dl > div { flex-direction: column; gap: 2px; }
  .ds-summary dt { flex-basis: auto; }
}

[data-ds-count] { white-space: nowrap; }