/* Partner self-onboarding: the pitch at /partners, the form at /partners/start and the preview overlay.
   Tokens, type and buttons come from intake.css (sn-*); section layout reuses home.css (home-*). */

/* Page mock: a small browser frame that paints a brand from --pm-primary. */
.pm { --pm-primary: var(--sn-blue); --pm-ink: #fff; background: #fff; border: 1px solid var(--sn-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(20, 40, 40, .45); font-size: 12px; line-height: 1.4; color: var(--sn-text); }
.pm-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f1f3f6; border-bottom: 1px solid var(--sn-line); }
.pm-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #d4d9e1; }
.pm-url { flex: 1; margin-left: 8px; padding: 5px 10px; border-radius: 6px; background: #fff; color: var(--sn-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-url b { color: var(--sn-ink); font-weight: 500; }
.pm-nav { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--sn-line); }
.pm-logo { display: flex; align-items: center; min-width: 0; max-width: 42%; }
.pm-logo img { display: block; max-height: 34px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.pm-logo-text { font-weight: 700; font-size: 15px; color: var(--sn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-with { color: var(--sn-muted); font-size: 10px; }
.pm-sn { height: 11px; width: auto; }
.pm-hero { position: relative; padding: 20px 14px 22px; background: linear-gradient(100deg, var(--pm-primary) 0%, color-mix(in srgb, var(--pm-primary) 86%, #000) 100%); color: #fff; display: flex; flex-direction: column; gap: 12px; }
.pm-h1 { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; max-width: 88%; color: #fff; }
.pm-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-btn { padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--pm-primary); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 14px; background: #f5f6f8; }
.pm-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.pm-card-img { height: 64px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #eef0f4; }
.pm-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.pm-card-img-empty { background: linear-gradient(135deg, #f1f3f6, #e4e8ee); }
.pm-card-body { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 8px; }
.pm-card-name { font-size: 9.5px; font-weight: 600; color: var(--sn-ink); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-card-price { font-size: 9px; color: var(--sn-muted); }
.pm-card-name-muted { color: var(--sn-muted); font-weight: 500; }
.pm-card-price-muted { color: #c3c9d3; }
.pm-card-btn { display: block; margin-top: 4px; padding: 4px 6px; border-radius: 999px; background: var(--pm-primary); color: #fff; font-size: 7.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The pitch: core's home page look. A sky hero with a torn cream edge, cream sections with centred heads,
   a sky band for the steps, white cards with no borders. */
.partners { background: var(--sn-cream); }
.pp-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; z-index: 1; pointer-events: none; line-height: 0; }
.pp-edge svg { width: 100%; height: 100%; display: block; }
.pp-edge-top { top: -1px; bottom: auto; transform: scaleY(-1); }
@media (max-width: 640px) { .pp-edge { height: 56px; } }
.pp-hero { background: var(--sn-sky); padding: 56px 0 150px; }
.pp-hero .home-hero-body { position: relative; z-index: 2; }
.partners .home-hero-cta { align-items: center; }
.pp-hero-line { font-size: 14px; color: var(--sn-text); margin: 0; opacity: .8; }
.pp-hero-mock { flex: 1 1 380px; min-width: 0; max-width: 520px; }
.pp-hero-mock figure { margin: 0; }
.pp-hero-mock figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--sn-text); opacity: .85; }
.pp-hero-mock .pm { box-shadow: 0 30px 60px -26px rgba(16, 60, 90, .5); }
@media (max-width: 640px) { .pp-hero { padding: 36px 0 110px; } }
.partners .home-section { position: relative; padding: 80px 0; }
.partners .home-section-head { max-width: 640px; margin: 0 auto; align-items: center; text-align: center; }
.partners .home-section .home-hero-cta { justify-content: center; }
@media (max-width: 640px) { .partners .home-section { padding: 56px 0; } }
.pp-gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-get { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 26px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -22px rgba(22, 33, 58, .35); }
.pp-get h3 { font-size: 1.2rem; }
.pp-get p { margin: 0; font-size: 15.5px; }
.pp-get-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sn-tint); color: var(--sn-blue); font-size: 18px; }
.pp-band { background: var(--sn-sky); padding: 130px 0 140px !important; }
.pp-band > .sn-wrap { position: relative; z-index: 2; }
.pp-band .eyebrow-muted { color: var(--sn-text); }
.pp-steps { gap: 20px; }
.pp-steps .home-step { background: rgba(255, 255, 255, .6); border: 0; border-radius: 16px; padding: 28px 28px 28px 92px; }
.pp-steps .home-step-number { background: #fff; }
.pp-steps .home-step p { font-size: 15.5px; }
@media (max-width: 640px) { .pp-band { padding: 90px 0 100px !important; } .pp-steps .home-step { padding: 24px; } }
.pp-logos { padding: 40px 0 56px !important; }
.pp-logos-line { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pp-logos-line .home-logos { justify-content: center; gap: 12px 24px; width: 100%; max-width: 900px; flex-wrap: nowrap; }
@media (max-width: 640px) { .pp-logos-line .home-logos { flex-wrap: wrap; } }
.pp-logos-line .home-logos li { flex: 1 1 0; min-width: 90px; max-width: 170px; }
.pp-logos-line .home-logos a { height: 64px; padding: 6px; border: 0; background: transparent; }
.pp-logos-line .home-logos img { max-height: 48px; opacity: .85; }
.partners .home-faq { max-width: 760px; width: 100%; margin: 0 auto; }
.partners .home-faq-item { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 10px 30px -24px rgba(22, 33, 58, .35); }
.partners .home-faq-item p { max-width: none; }
.pp-center { text-align: center; }
.pp-close { position: relative; background: var(--sn-sky); padding: 150px 0 100px; }
.pp-close .home-close-inner { position: relative; z-index: 2; }
@media (max-width: 640px) { .pp-close { padding: 100px 0 72px; } }

/* The form */
.po { padding-top: 40px; padding-bottom: 72px; }
.po-head { display: flex; flex-direction: column; gap: 10px; max-width: 680px; margin-bottom: 28px; }
.po-grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.po-form { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.po-aside { flex: 1 1 340px; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .po-aside { position: static; order: -1; } }
.po-group { display: flex; flex-direction: column; gap: 14px; }
.po-group h2 { font-size: 1.3rem; }
.po-group-head { display: flex; align-items: baseline; gap: 10px; }
.po-group-head .sn-tiny { margin-left: auto; }
.po-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.po-kind { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--sn-line-strong); border-radius: 999px; background: #fff; font-size: 14px; color: var(--sn-ink); cursor: pointer; }
.po-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.po-kind:has(input:checked) { border-color: var(--sn-blue); background: var(--sn-tint); color: var(--sn-blue-dark); font-weight: 500; }
.po-kind:has(input:focus-visible) { outline: 3px solid var(--sn-sky); }
.po-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .po-row { grid-template-columns: 1fr; } }
.po-color { display: flex; align-items: center; gap: 10px; }
.po-color input[type="color"] { width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--sn-line-strong); border-radius: 8px; background: #fff; cursor: pointer; }
.po-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; }
.po-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.po-color .sn-input { max-width: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.po-color-note { font-size: 12.5px; color: var(--sn-muted); }
.po-logo { display: flex; align-items: center; gap: 14px; }
.po-logo-thumb { width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--sn-line-strong); border-radius: 10px; background: #fff; overflow: hidden; }
.po-logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.po-logo-thumb svg { color: var(--sn-muted); }
.po-logo .sn-upload { flex: 1; justify-content: flex-start; padding: 14px 16px; }
.po-logo .sn-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.po-url { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: var(--sn-tint); color: var(--sn-ink); font-size: 14px; }
.po-url b { font-weight: 500; }
.po-url svg { flex: none; color: var(--sn-blue); }
.po-submit { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.po-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.po-points li { display: flex; gap: 8px; align-items: flex-start; }
.po-points svg { flex: none; color: var(--sn-blue); margin-top: 3px; }
.po-errors { display: flex; flex-direction: column; gap: 4px; }
.po-field-error { font-size: 13px; color: var(--sn-red); }
.sn-page .po-form .sn-input.is-invalid { border-color: var(--sn-red); }

/* The preview overlay, painted in the previewed brand */
.pv-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: #14171c; color: #fff; font-size: 14px; }
.pv-bar-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--brand-primary, #188aec); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pv-bar-copy { flex: 1 1 240px; min-width: 0; color: #c9cfd8; }
.pv-bar-copy b { color: #fff; font-weight: 500; }
.pv-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-bar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pv-bar-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pv-bar-btn-solid { background: #fff; border-color: #fff; color: #14171c; }
.pv-bar-btn-solid:hover { background: #fff; color: #14171c; }
.pv-dialog { border: 0; border-radius: 16px; padding: 0; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); color: var(--sn-text); font-family: "FT Polar", system-ui, sans-serif; }
.pv-dialog::backdrop { background: rgba(10, 14, 20, .62); backdrop-filter: blur(2px); }
.pv-dialog-head { padding: 28px 28px 20px; background: var(--brand-primary, #188aec); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.pv-dialog-head .p-eyebrow { color: rgba(255, 255, 255, .8); }
.pv-dialog-head h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.pv-dialog-body { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 16px; font-size: 15.5px; line-height: 1.55; }
.pv-dialog-body p { margin: 0; }
.pv-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-next li { display: flex; gap: 12px; align-items: flex-start; }
.pv-next-n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--brand-primary, #188aec); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pv-dialog-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 4px; }
.pv-dialog-actions .p-btn { margin-left: auto; }
.pv-dialog-url { font-size: 13px; color: var(--sn-muted); }
.pv-dialog-url b { color: var(--sn-ink); font-weight: 500; }
.pv-toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 0); padding: 12px 18px; border-radius: 999px; background: #14171c; color: #fff; font-size: 14px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); transition: opacity .2s ease, transform .2s ease; }
.pv-toast[hidden] { display: none; }
@media (max-width: 640px) { .pv-bar { padding: 10px 16px; } .pv-dialog-head, .pv-dialog-body { padding-left: 20px; padding-right: 20px; } }

/* Sample product tiles on the preview take a wash of the brand instead of a bare initial. */
[data-controller="preview-mode"] ~ .p-page .p-tile { background: color-mix(in srgb, var(--brand-primary) 9%, #fff); }
[data-controller="preview-mode"] ~ .p-page .p-tile::before { color: color-mix(in srgb, var(--brand-primary) 45%, #fff); }

/* The circle hugs one word here instead of sprawling into the margin. */
.partners .marked-circle::after { width: 140%; }