/* Hallmark · shape: Offer page · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(97% 0.005 258) · accent: oklch(49% 0.081 203) · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans · hero: split, the round panel beside the offer · nav: kept · footer: kept · signature: the round panel, a live countdown to the closing time and the places left
 * axes: cool grey/Jakarta 800/teal · posture: split · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V3 · weakest: V, the site's chrome, brand and type stay as they are on every other page; the variety is in the composition (round panel, figures, path, two-step form) */
/* Hallmark · dropped company, store_url, country, role, account_type, years, ad_spend, skus, brand_registry, platforms, tools, challenge, heard_other, select[name=revenue] · moved with the same names from #fsForm to the optional step 2 form #fsMore (revenue is now a row of radio choices in step 1), because the owner asked for a much simpler form */
/* Hallmark · reworded "run your amazon store on sellerpilot, free for", "how it works", "apply for the founding seller program", "about you", "your amazon business", "one last thing", "questions" to "90 days of growth, free, no card", "from application to founding seller", "apply in 2 minutes", "before you apply" · the hero review asked for the offer as the headline; one short form step replaces three form sections (58); the finish review asked for a head only this page could have */
/* Hallmark · waive 44c · the round panel and the product picture run to about 750 of 900 at 1440 · the copy column is centred against them and the offer figures start above the fold */
/* Hallmark · waive 79 · the empty band sits beside the copy column only · the round panel fills that height on the right */
/* Hallmark · waive 49b · every wrapping link is in the site's shared phone menu or footer columns · those long names wrap the same on all 85 site pages and a page-only nowrap would push the columns off the phone */
/* Hallmark · answered F19 · the site's own type scale uses five Jakarta weights across ~85 pages; this page adds none */
/* Hallmark · kept: site header and footer (shared by every page), the brand tokens of site.css; the trial offer bar is hidden on this page only */

/* sp-194: Founding Seller Program page (/founding-sellers). Tokens map onto the site's own (site.css); light and dark follow it. */
:root {
  --fsp-paper: var(--bg); --fsp-surface: var(--surface); --fsp-sunk: var(--surface-2); --fsp-track: var(--surface-3);
  --fsp-ink: var(--ink); --fsp-ink-2: var(--ink-2); --fsp-muted: var(--ink-3); --fsp-rule: var(--line); --fsp-rule-2: var(--line-2);
  --fsp-accent: var(--accent); --fsp-accent-ink: var(--accent-ink); --fsp-accent-soft: var(--accent-soft); --fsp-bad: var(--bad);
  --fsp-hero-line: var(--hero-line); --fsp-focus: var(--accent);
  --fsp-field-edge: #7D889B;
  --fsp-font: var(--font);
  --fsp-s1: 4px; --fsp-s2: 8px; --fsp-s3: 12px; --fsp-s4: 16px; --fsp-s5: 24px; --fsp-s6: 32px; --fsp-s7: 48px; --fsp-s8: 64px;
  --fsp-gap: clamp(56px, 6.5vw, 104px);
  --fsp-text-section: clamp(2rem, 2.2vw + 1rem, 3rem);
  --fsp-text-display: clamp(2.5rem, 3.6vw + 0.5rem, 4rem);
  --fsp-text-clock: clamp(2rem, 1.6vw + 1rem, 2.75rem);
  --fsp-text-fig: clamp(2rem, 2vw + 1rem, 2.75rem);
  --fsp-radius: 12px; --fsp-radius-s: 8px;
  --fsp-dur: 120ms;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fsp-field-edge: #64748C; } }
:root[data-theme="dark"] { --fsp-field-edge: #64748C; }

html, body { overflow-x: clip; }
html { scroll-padding-top: 88px; }   /* #apply and #how land below the sticky site header */
.mk-founding .offerbar { display: none; }   /* one action on this page: apply */
.mk-founding .skip { left: 12px; transform: translateY(-200%); }   /* off the top, not off the side (no sideways overflow on phones) */
.mk-founding .skip:focus { transform: none; }
.mk-founding .sp-consent-open { min-height: 44px; }
.mk-founding :is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--fsp-focus); outline-offset: 2px; }

/* hero: the offer on the left, the round panel on the right */
.fsp-hero { padding-block: clamp(48px, 7vw, 112px); }
.fsp-hero h1, .fsp-sec h2 { text-wrap: balance; }
.fsp-hero h1 { font-size: var(--fsp-text-display); line-height: 1.04; letter-spacing: -0.025em; max-width: 100%; overflow-wrap: break-word; min-width: 0; font-weight: 800; }
.fsp-hero .lead { font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem); margin-top: var(--fsp-s4); }
.fsp-hero .ctas { margin-top: var(--fsp-s6); }
.fsp-hero .btn { min-height: 48px; padding-inline: var(--fsp-s5); font-size: 1rem; }
.fsp-hero .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--fsp-s7); }
.fsp-hero + .fsp-sec { padding-top: var(--fsp-s8); }

.fsp-round { background: var(--fsp-surface); color: var(--fsp-ink); border: 1px solid var(--fsp-hero-line); border-radius: var(--fsp-radius); padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--fsp-s5); }
.fsp-round-h { margin: 0; font-weight: 700; font-size: 1.25rem; }
.fsp-clock { margin: 0; display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--fsp-s2) var(--fsp-s5); }
.fsp-clock[hidden], .fsp-meter[hidden] { display: none; }
.fsp-u { font-size: 1rem; color: var(--fsp-ink-2); white-space: nowrap; }
.fsp-u b { font-size: var(--fsp-text-clock); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fsp-ink); }
.fsp-closes { margin: 0; color: var(--fsp-ink-2); }
.fsp-places { display: grid; gap: var(--fsp-s2); border-top: 1px solid var(--fsp-rule); padding-top: var(--fsp-s4); }
.fsp-places p { margin: 0; }
.fsp-places b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.fsp-meter { height: 8px; border-radius: 999px; background: var(--fsp-track); overflow: hidden; }
.fsp-meter span { display: block; height: 100%; width: 100%; background: var(--fsp-accent); transform-origin: left center; transform: scaleX(1); transition: transform var(--fsp-dur) ease-out; }
.fsp-round.is-closed .fsp-meter span { background: var(--fsp-muted); }

/* sections */
.fsp-sec { padding-block: var(--fsp-gap); }
.fsp-alt { background: var(--fsp-surface); }
.fsp-sec h2 { font-size: var(--fsp-text-section); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; max-width: 22ch; margin: 0 0 var(--fsp-s7); overflow-wrap: break-word; min-width: 0; }
.fsp-note { max-width: 68ch; color: var(--fsp-ink-2); margin: var(--fsp-s6) 0 0; font-size: 1.0625rem; }
.fsp-small { font-size: 0.875rem; color: var(--fsp-ink-2); margin: 0; }

/* what you get: the offer as figures */
.fsp-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--fsp-rule-2); }
.fsp-figs li { display: grid; gap: var(--fsp-s2); padding: var(--fsp-s5) var(--fsp-s4) 0 0; }
.fsp-figs li + li { border-left: 1px solid var(--fsp-rule); padding-left: var(--fsp-s4); }
.fsp-figs b { font-size: var(--fsp-text-fig); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fsp-ink); }
.fsp-figs li:first-child b { color: var(--fsp-accent); }
.fsp-figs span { color: var(--fsp-ink-2); font-size: 0.9375rem; }

.fsp-peek { margin: 0; }
.fsp-peek img { border-radius: var(--fsp-radius-s); border: 1px solid var(--fsp-rule); width: 100%; height: auto; }

/* from application to founding seller */
.fsp-ask { margin-top: var(--fsp-s7); display: grid; gap: var(--fsp-s3); max-width: 68ch; }
.fsp-ask h3 { margin: 0; font-size: 1.25rem; }
.fsp-ask ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--fsp-s2); color: var(--fsp-ink); }
.fsp-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fsp-s5); counter-reset: fsp; }
.fsp-path li { counter-increment: fsp; border-top: 2px solid var(--fsp-rule-2); padding-top: var(--fsp-s4); display: grid; align-content: start; gap: var(--fsp-s2); }
.fsp-path li::before { content: counter(fsp); font-weight: 800; font-size: 1.25rem; color: var(--fsp-accent); font-variant-numeric: tabular-nums; }
.fsp-path h3 { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.fsp-path p { margin: 0; color: var(--fsp-ink-2); }

/* apply */
.fsp-apply { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--fsp-s7); align-items: start; }
.fsp-apply-h { position: sticky; top: 96px; display: grid; gap: var(--fsp-s4); }
.fsp-apply-h h2 { margin: 0; }
.fsp-apply-h > p { margin: 0; color: var(--fsp-ink-2); font-size: 1.0625rem; }
.fsp-next { list-style: none; margin: var(--fsp-s2) 0 0; padding: 0; display: grid; gap: var(--fsp-s3); border-top: 1px solid var(--fsp-rule); padding-top: var(--fsp-s4); }
.fsp-next li { color: var(--fsp-ink); }
.fsp-card { background: var(--fsp-paper); border: 1px solid var(--fsp-rule); border-radius: var(--fsp-radius); padding: var(--fsp-s6); }
.fsp-alt .fsp-card { background: var(--fsp-paper); }
.fsp-form { display: grid; gap: var(--fsp-s5); }
.fsp-form h3 { margin: 0; font-size: 1.375rem; line-height: 1.2; }
.fsp-step { margin: 0; display: flex; flex-wrap: wrap; gap: var(--fsp-s2); align-items: baseline; color: var(--fsp-ink-2); font-size: 0.9375rem; }
.fsp-step b { color: var(--fsp-accent); }
.fsp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fsp-s5) var(--fsp-s4); align-items: start; }
.fsp-f { display: grid; gap: var(--fsp-s2); align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.fsp-l { font-weight: 700; font-size: 0.9375rem; color: var(--fsp-ink); padding: 0; }
legend.fsp-l { margin-bottom: var(--fsp-s2); }
.fsp-l i, .fsp-check i { font-style: normal; font-weight: 500; color: var(--fsp-muted); }
.fsp-f small { color: var(--fsp-muted); font-size: 0.8125rem; }
.fsp-f input, .fsp-f select, .fsp-f textarea { min-height: 48px; border: 1px solid var(--fsp-field-edge); border-radius: var(--fsp-radius-s); padding: var(--fsp-s3) var(--fsp-s3); background: var(--fsp-surface); color: var(--fsp-ink); font: inherit; font-size: 1rem; width: 100%; box-sizing: border-box; }
.fsp-f textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.fsp-f :is(input, select, textarea):hover { border-color: var(--fsp-ink-2); }
.fsp-f :is(input, select, textarea):disabled { opacity: 0.6; cursor: not-allowed; }
.fsp-f [aria-invalid="true"], .fsp-f[aria-invalid="true"] .fsp-chips { border-color: var(--fsp-bad); }
.fsp-err { font-style: normal; font-weight: 600; font-size: 0.875rem; color: var(--fsp-bad); }
.fsp-err:empty { display: none; }

/* choice chips: the input stays in the page for keyboards and screen readers, drawn as the chip around it */
.fsp-chips { display: flex; flex-wrap: wrap; gap: var(--fsp-s2); border: 1px solid transparent; border-radius: var(--fsp-radius-s); }
.fsp-chip { position: relative; display: inline-flex; }
.fsp-chip input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.fsp-chip span { display: inline-flex; align-items: center; gap: var(--fsp-s2); min-height: 44px; padding: 0 var(--fsp-s4); border: 1px solid var(--fsp-field-edge); border-radius: 999px; background: var(--fsp-surface); color: var(--fsp-ink); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; transition: border-color var(--fsp-dur) ease-out, background-color var(--fsp-dur) ease-out; }
.fsp-chip:hover span { border-color: var(--fsp-ink-2); }
.fsp-chip input:checked + span { background: var(--fsp-accent); border-color: var(--fsp-accent); color: var(--fsp-accent-ink); }
.fsp-chip input:focus-visible + span { outline: 2px solid var(--fsp-focus); outline-offset: 2px; }
.fsp-chip input:active + span { transform: translateY(1px); }
.fsp-chip input:disabled + span { opacity: 0.6; cursor: not-allowed; }
.fsp-flag { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; outline: 1px solid var(--fsp-rule-2); }
.fsp-more { margin-top: var(--fsp-s3); }
.fsp-more summary { cursor: pointer; font-weight: 700; color: var(--fsp-accent); min-height: 44px; display: inline-flex; align-items: center; }
.fsp-more summary:hover { text-decoration: underline; }
.fsp-region { display: grid; gap: var(--fsp-s2); margin-top: var(--fsp-s3); }
.fsp-region > span { font-size: 0.875rem; color: var(--fsp-ink-2); font-weight: 600; }
.fsp-check { display: flex; align-items: flex-start; gap: var(--fsp-s3); font-size: 0.9375rem; color: var(--fsp-ink); line-height: 1.45; cursor: pointer; }
.fsp-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--fsp-accent); flex: none; }
.fsp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fsp-cf:empty { display: none; }
.fsp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fsp-s3); }
.fsp-go { min-height: 48px; padding-inline: var(--fsp-s5); font-size: 1rem; }
.fsp-skip { min-height: 48px; }
.mk-founding .btn:active { transform: translateY(1px); }
.mk-founding .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fsp-status { font-size: 0.9375rem; color: var(--fsp-ink-2); }
.fsp-status.bad { color: var(--fsp-bad); font-weight: 600; }
.fsp-done { border-color: var(--fsp-accent); display: grid; gap: var(--fsp-s3); }
.fsp-done h3 { margin: 0; font-size: 1.375rem; }
.fsp-done p { margin: 0; }
#fsMore:focus, .fsp-done:focus { outline: none; }

/* questions */
.fsp-faq .faq { max-width: 820px; }
.fsp-faq .faq summary { min-height: 48px; }

@media (max-width: 60rem) {
  .fsp-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--fsp-s6); }
  .fsp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--fsp-s5); }
  .fsp-figs li:nth-child(4) { border-left: 0; padding-left: 0; }
  .fsp-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsp-apply { grid-template-columns: minmax(0, 1fr); gap: var(--fsp-s6); }
  .fsp-apply-h { position: static; }
}
@media (max-width: 40rem) {
  .fsp-hero { padding-block: var(--fsp-s6) var(--fsp-s7); }
  .fsp-round { padding: var(--fsp-s5); }
  .fsp-clock { gap: var(--fsp-s3); }
  .fsp-u { font-size: 0.875rem; }
  .fsp-u b { font-size: 1.75rem; }
  .fsp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsp-figs li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fsp-figs li:nth-child(4) { border-left: 1px solid var(--fsp-rule); padding-left: var(--fsp-s4); }
  .fsp-path { grid-template-columns: minmax(0, 1fr); }
  .fsp-pair { grid-template-columns: minmax(0, 1fr); }
  .fsp-card { padding: var(--fsp-s5) var(--fsp-s4); }
}
@media (prefers-reduced-motion: reduce) {
  .fsp-meter span, .fsp-chip span { transition: none; }
  .fsp-chip input:active + span, .mk-founding .btn:active { transform: none; }
}
