/* BeatBed sign-up mocks (Night Flat): flat component kit, no gradients, no glow.
   One button system, one field system. Each direction only sets tokens + layout.
   Mock only: nothing here ships until the owner picks a direction. */
@font-face{font-family:"Instrument Sans";src:url(fonts/InstrumentSans-Variable.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/DMSans-Variable.ttf) format("truetype");font-weight:100 1000;font-display:swap}
/* Instrument Sans and DM Sans load only for the producer font-choice preview */
@font-face{font-family:"Inter";src:url(/platform/shared/fonts/Inter-subset.woff2) format("woff2");font-weight:100 900;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
[hidden]{display:none!important}
a{color:inherit}
img,svg{max-width:100%}
button,input{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
h1:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.035em;text-decoration:none;color:var(--ink)}
.brand-mark{width:32px;height:32px;border-radius:9px;background:#e42020;display:grid;place-items:center;flex:none}
/* same wordmark sizes as the marketplace header: 21px, 19px under 480px wide, mark only under 380px */
@media(max-width:480px){.top .brand{font-size:19px}}
@media(max-width:380px){.top .brand,.top .bb-neutral{font-size:0;gap:0}}

/* type */
.h1{font-size:clamp(28px,3.2vw,38px);line-height:1.08;letter-spacing:-.04em;font-weight:700}
.sub{color:var(--muted);margin-top:10px;font-size:16px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.link{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.link:hover{text-decoration-thickness:2px}

/* buttons: ONE system (primary, secondary, social) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r-btn);border:1px solid transparent;font-weight:600;font-size:15px;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s,transform .15s,background .15s;position:relative}
.btn.block{display:flex;width:100%}
.btn:hover{filter:brightness(.94)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface-2);filter:none}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn-social{font-size:17px;font-weight:500;letter-spacing:-.01em}
.btn-google{background:var(--g-bg);color:var(--g-ink);border-color:var(--g-line)}
.btn-social svg{width:20px;height:20px;flex:none}
.btn[aria-busy=true]{pointer-events:none;opacity:.85}
.btn[aria-busy=true]::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn[disabled],.btn[aria-disabled=true]:not([aria-busy]){opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-text{background:none;border:0;padding:0;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes spin{to{transform:rotate(360deg)}}
.socials{display:grid;gap:10px}

/* fields */
.field{display:grid;gap:7px;margin-bottom:16px}
.field>label,.label{font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.field>label a{font-weight:500;font-size:13px;flex:none;white-space:nowrap}   /* label row: the label text wraps, the link stays one line on the right */
.field>label>span{min-width:0}
.input{width:100%;height:52px;padding:0 15px;border:1px solid var(--line-strong);border-radius:var(--r-in);background:var(--field);color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--muted);opacity:.8}
.input:hover{border-color:var(--ink)}
.input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.input[aria-invalid=true]{border-color:var(--err)}
.hint{font-size:13px;color:var(--muted)}
.pw{position:relative}
.pw .input{padding-right:70px}
.pw .toggle{position:absolute;right:6px;top:6px;height:40px;padding:0 12px;border:0;background:none;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;border-radius:8px}
.pw .toggle:hover{color:var(--ink)}
.slugbox{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--r-in);background:var(--field);transition:border-color .15s,box-shadow .15s;overflow:hidden}
.slugbox:hover{border-color:var(--ink)}
.slugbox:focus-within{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.slugbox .input{border:0;border-radius:0;box-shadow:none!important;background:transparent;min-width:0;text-align:right;padding-right:2px;font-weight:600}
.slugbox .suffix{display:flex;align-items:center;padding:0 15px 0 0;color:var(--muted);font-weight:500;white-space:nowrap}
[data-slugfield][data-state=taken] .slugbox,[data-slugfield][data-state=reserved] .slugbox,[data-slugfield][data-state=invalid] .slugbox,[data-slugfield][data-state=short] .slugbox{border-color:var(--err)}
[data-slugfield][data-state=ok] .slugbox{border-color:var(--ok)}
.status{display:flex;gap:9px;align-items:flex-start;font-size:14px;min-height:24px;color:var(--muted);flex-wrap:wrap;margin-top:2px}
.status::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;background:var(--line-strong)}
.status[data-state=idle]::before{background:none;border:2px dashed var(--line-strong)}
.status[data-state=checking]::before{background:none;border:2px solid var(--muted);border-right-color:transparent;animation:spin .7s linear infinite}
.status[data-state=ok]{color:var(--ok)}
.status[data-state=ok]::before{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.status[data-state=taken],.status[data-state=reserved],.status[data-state=invalid],.status[data-state=short]{color:var(--err)}
.status[data-state=taken]::before,.status[data-state=reserved]::before,.status[data-state=invalid]::before,.status[data-state=short]::before{background:var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5v5.5M9 12.6v.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
.status>span{flex:1;min-width:0}
.status b{color:var(--ink);font-weight:600}
.status[data-state=ok] b{color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.chip:hover{background:var(--surface-2)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.meter i{height:4px;border-radius:9px;background:var(--line)}
.meter[data-score="1"] i:nth-child(-n+1){background:var(--err)}
.meter[data-score="2"] i:nth-child(-n+2){background:#e0a400}
.meter[data-score="3"] i:nth-child(-n+3){background:var(--ok)}
.meter[data-score="4"] i:nth-child(-n+4){background:var(--ok)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer;margin:2px 0 18px;line-height:1.45}
.check input{appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--field);cursor:pointer;display:grid;place-items:center}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:10px;height:5px;border:2px solid var(--bg);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check span{padding-top:1px}

.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;margin:20px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* alerts */
.alert{display:flex;gap:12px;padding:13px 15px;border-radius:var(--r-in);border:1px solid;font-size:14px;line-height:1.45;margin-bottom:16px;align-items:flex-start}
.alert strong{font-weight:600;display:block}
.alert-err{background:var(--err-bg);border-color:var(--err);color:var(--ink)}
.alert-info{background:var(--info-bg);border-color:var(--line-strong);color:var(--ink)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ink)}
.alert .ico{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;margin-top:1px}
.alert-err .ico{background:var(--err)}.alert-info .ico{background:var(--muted)}.alert-ok .ico{background:var(--ok)}

.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:28px}
.seg a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;color:var(--muted)}
.seg a[aria-current=page]{background:var(--ink);color:var(--bg)}
.ctx{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-in);font-size:14px;color:var(--muted);margin-bottom:22px}
.ctx strong{color:var(--ink);font-weight:600}
.ctx .thumbs{display:flex}
.ctx .thumbs i{width:28px;height:28px;border-radius:7px;border:2px solid var(--bg);margin-left:-8px;background:var(--accent)}
.ctx .thumbs i:first-child{margin-left:0;background:var(--surface-2)}
.legal{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:16px}
.legal a{color:var(--ink)}
.switch{margin-top:26px;font-size:15px;color:var(--muted)}
.switch a{color:var(--ink);font-weight:600}
.route-note{margin-top:14px;font-size:13px;color:var(--muted)}
.route-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:9px;vertical-align:middle}
.route-note b{color:var(--ink);font-weight:600}

/* verification / link / routed */
.bigicon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);margin-bottom:24px}
.pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:22px 0}
.pair .id{border:1px solid var(--line-strong);border-radius:var(--r-in);padding:14px;font-size:14px;min-width:0;background:var(--surface)}
.pair .id small{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.pair .id strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair .plus{color:var(--muted);font-weight:700}
.dest{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
.dest a{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line-strong);border-radius:var(--r-card);text-decoration:none;background:var(--surface);transition:border-color .15s,transform .15s}
.dest a:hover{border-color:var(--ink);transform:translateY(-1px)}
.dest .di{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);flex:none;font-weight:700}
.dest strong{display:block;font-weight:600}
.dest small{color:var(--muted);font-size:13px}
.dest a>span:nth-child(2){min-width:0}   /* address line: one line, cut off with … (never broken mid-word) */
.dest small,.dest strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest .go{flex:none}
.dest .go{margin-left:auto;color:var(--muted);font-size:20px}

/* onboarding checklist */
.ob-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:14px 0 22px}
.bar>i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .5s cubic-bezier(.3,.7,.2,1)}
.tasks{display:grid;gap:10px}
.task{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden;transition:border-color .2s}
.task[data-open=true]{border-color:var(--line-strong)}
.task-head{display:flex;align-items:center;gap:14px;width:100%;padding:12px 18px;min-height:64px;background:none;border:0;text-align:left;cursor:pointer}
.task-head strong{display:block;font-weight:600;font-size:16px}
.task-head small{display:block;color:var(--muted);font-size:13px}
.task-head .tx{flex:1;min-width:0}
.task-head .time{font-size:12px;color:var(--muted);white-space:nowrap}
.tick{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted);transition:background .2s}
.task.done .tick{background:var(--ok);border-color:var(--ok);color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:70%;background-position:center;background-repeat:no-repeat}
.task.done .task-head strong{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
.task-body{padding:2px 18px 20px 60px}
.task[data-open=false] .task-body{display:none}
.task-body p{color:var(--muted);font-size:15px;margin-bottom:14px}
.drop{border:1.5px dashed var(--line-strong);border-radius:var(--r-card);padding:26px;text-align:center;color:var(--muted);font-size:14px;margin-bottom:14px;background:var(--surface-2)}
.drop strong{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
.pay-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-in);margin-bottom:10px;flex-wrap:wrap}
.pay-row .lg{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.pay-row .tx{flex:1;min-width:140px}.pay-row .tx strong{display:block;font-size:15px}.pay-row .tx small{color:var(--muted)}
.pay-row[data-on=true] .st{color:var(--ok);font-weight:600;font-size:14px}
.lic{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.lic label{display:block;border:1px solid var(--line-strong);border-radius:var(--r-in);padding:12px 14px;cursor:pointer;font-size:14px}
.lic label strong{display:block;font-weight:600}
.lic label span{color:var(--muted);font-size:13px}
.lic input{position:absolute;opacity:0}
.lic label:has(input:checked){border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.lic label:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}
.locked-note{font-size:13px;color:var(--muted);margin-top:10px}
.skel{border-radius:8px;background:var(--surface-2);animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.avatar-up{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar-up i{width:56px;height:56px;border-radius:50%;background:var(--surface-2);border:1.5px dashed var(--line-strong);display:grid;place-items:center;font-style:normal;color:var(--muted);font-size:22px}

/* mock-only control bar */
.mockbar{position:fixed;right:12px;bottom:12px;z-index:50;font:500 13px/1.3 "Inter",system-ui,sans-serif}
.mockbar summary{list-style:none;cursor:pointer;background:#111;color:#fff;border:1px solid #444;border-radius:99px;padding:8px 14px;min-height:36px;display:flex;align-items:center;opacity:.85}
.mockbar summary::-webkit-details-marker{display:none}
.mockbar[open] summary{opacity:1}
.mockbar .panel{position:absolute;right:0;bottom:44px;width:260px;max-height:70vh;overflow:auto;background:#111;color:#eee;border:1px solid #444;border-radius:14px;padding:10px}
.mockbar h4{margin:8px 6px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#999;font-weight:600}
.mockbar a{display:block;padding:7px 8px;border-radius:7px;color:#eee;text-decoration:none}
.mockbar a:hover,.mockbar a[aria-current=true]{background:#2a2a2a}
.mockbar .tip{font-size:11px;color:#999;padding:6px 8px}

@media(max-width:520px){
  .pair{grid-template-columns:1fr}.pair .plus{text-align:center}
  .lic{grid-template-columns:1fr}
  .task-body{padding-left:18px}
  .btn-social{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.btn[aria-busy=true]::before,.status[data-state=checking]::before{animation:spin 2s linear infinite!important;animation-iteration-count:infinite!important}}

/* ---------- producer-branded mode (buyer-facing views only) ----------
   Same layout + components. Only tokens swap. Google keeps its official theme
   (dark theme on dark brands, light theme on light brands). */
.bb-neutral,.bb-prod{display:inline-flex;align-items:center;gap:10px}
body[data-brand=neutral] .bb-prod,body:not([data-brand]) .bb-prod{display:none}
body[data-brand=gold] .bb-neutral,body[data-brand=paper] .bb-neutral{display:none}
.plogo{width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:var(--primary-ink);font-weight:700;font-size:16px;border-radius:10px;flex:none}
body[data-brand=gold] .plogo{border-radius:50%;font-weight:600;letter-spacing:-.02em}
.powered{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);text-decoration:none}
.powered .brand-mark{width:16px;height:16px;border-radius:5px}
.powered .brand-mark svg{width:10px;height:10px}
.powered-top{margin-left:auto}
body[data-brand=neutral] .powered,body:not([data-brand]) .powered{display:none}
.nb-only{display:none}
/* the plain 'beatbed.com' next to the logo is gone: the logo matches the marketplace header instead */
body[data-brand=neutral] .pb-only,body:not([data-brand]) .pb-only{display:none}

body[data-brand=gold][class]{
  --bg:#0e0c08;--surface:#171410;--surface-2:#211c14;--ink:#f6efdc;--muted:#b7ab8d;--line:#2f291c;--line-strong:#7a6e4e;--field:#12100b;
  --primary:#d4a63a;--primary-ink:#17120a;--accent:#d4a63a;--ring:#e3b950;--ring-soft:rgba(212,166,58,.28);
  --ok:#6fd49a;--ok-bg:#12201a;--err:#ff7f70;--err-bg:#241413;--info-bg:#171410;
  --g-bg:#131314;--g-ink:#e3e3e3;--g-line:#8e918f;--stage-bg:#171410;--stage-ink:#f6efdc;
}
body[data-brand=paper][class]{
  --bg:#f3f2ee;--surface:#fff;--surface-2:#e9e7e1;--ink:#151515;--muted:#5e5b55;--line:#dcd9d1;--line-strong:#807c74;--field:#fff;
  --primary:#ff7a1a;--primary-ink:#151515;--accent:#ff7a1a;--ring:#b34700;--ring-soft:rgba(179,71,0,.18);
  --ok:#0b7a4b;--ok-bg:#e6f3ec;--err:#b3261e;--err-bg:#fbeae8;--info-bg:#fff;
  --g-bg:#fff;--g-ink:#1f1f1f;--g-line:#747775;--stage-bg:#e9e7e1;--stage-ink:#151515;
}
.mini{font-family:var(--b-font,inherit);color:var(--b-ink);background:var(--b-bg);border:1px solid var(--b-line);border-radius:12px;overflow:hidden;font-size:11px;line-height:1.35}
.mini .mh{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--b-line)}
.mini .ml{width:18px;height:18px;border-radius:5px;background:var(--b-accent);color:var(--b-on);display:grid;place-items:center;font-weight:700;font-size:10px}
.mini .mb{padding:12px 10px}
.mini .mb h5{margin:0 0 4px;font-size:13px;letter-spacing:-.02em}
.mini .mbtn{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--b-accent);color:var(--b-on);font-weight:700;font-size:10.5px;margin-top:6px}
.mini .mlink{color:var(--b-acctext);font-weight:600;text-decoration:underline}
.mini .mfield{height:22px;border:1px solid var(--b-line);border-radius:6px;margin-top:6px}
.mini .mbeat{display:flex;gap:6px;align-items:center;margin-top:6px}
.mini .mbeat i{width:22px;height:22px;border-radius:5px;background:var(--b-line)}
.mini .mbeat b{flex:1;height:5px;border-radius:3px;background:var(--b-line)}
.mini .msoc{height:22px;border-radius:6px;margin-top:5px;border:1px solid var(--b-line);display:grid;place-items:center;font-size:10px}
.brandprev{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.brandprev figcaption{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.brandprev figure{margin:0}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px;align-items:center}
.opts .chip[aria-pressed=true]{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.sw{width:36px;height:36px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--ring)}
.hexrow{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.hexrow .input{width:120px;height:44px}
.hexrow input[type=color]{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;padding:2px;background:var(--field)}
.guard{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px;font-size:13px;color:var(--muted)}
.guard li{padding-left:24px;position:relative}
.guard li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%}
.guard li.ok::before{background:var(--ok)}
.guard li.warn::before{background:#e0a400}
.guard b{color:var(--ink)}
@media(max-width:520px){.brandprev{grid-template-columns:1fr}}
.mt{margin-top:26px}.mt-s{margin-top:12px}
body[data-brand=gold] .seg,body[data-brand=paper] .seg{display:none}
.toplink{font-size:13px;color:var(--muted);text-decoration:none;margin-left:auto;padding:12px 0}
.toplink:hover{color:var(--ink)}
.powered-top{margin-left:auto}
.powered-top+.toplink{margin-left:16px}

.pfoot{display:none}
@media(max-width:520px){
  .toplink,.powered-top+.toplink{margin-left:auto!important}
  body[data-brand=gold] .pfoot,body[data-brand=paper] .pfoot{display:inline-flex;margin-left:auto}
}

/* ---------- Pick your plan (producer sign-up step) ----------
   Spacing: bb.css system (8 in a group, 12 title to content, 32 between sections).
   Billing switch = the kit's .seg (picked = white fill, like .fbtn).
   Plan cards = the .lopt selectable tile from bb.css (picked = white outline + check, no radio dots). */
body{--gap:8px;--title:12px;--section:32px}
.seg button{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;border:0;background:none;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;padding:0 16px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.plan-pick{margin-top:var(--section)}
/* billing switch centered over the cards, "2 months free" centered under it */
.plan-bar{display:flex;flex-direction:column;align-items:center;gap:var(--gap);margin-bottom:var(--title);text-align:center}
.seg.plan-bill{display:inline-grid;width:min(100%,260px);margin:0}

/* selectable tile (same as bb.css .lopt) */
.lopt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:baseline;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.lopt:hover{border-color:var(--line-strong)}
.lopt:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.lopt:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:3px}
.lopt{-webkit-tap-highlight-color:transparent}
@media (hover:none){.lopt:has(input:focus-visible){outline:none}}   /* phones: a tap already shows the white picked border; the extra focus ring made it look doubled */
.lopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lopt .nm{font-weight:600;font-size:15.5px;display:flex;align-items:center;gap:8px}
.lopt .ck{width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);display:none;place-items:center;flex:none}
.lopt .ck svg{width:12px;height:12px}
.lopt:has(input:checked) .ck{display:grid}

.plans{display:grid;gap:var(--gap);grid-auto-flow:column;grid-auto-columns:minmax(208px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px;margin:-2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.plans>.plan{scroll-snap-align:start}
.lopt.plan{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px;border-radius:var(--r-card);min-width:0}
.plan .nm{font-size:17px;letter-spacing:-.01em;min-height:24px;flex-wrap:wrap}
.plan .ck{margin-left:auto}
.ptag{font-size:12px;font-weight:600;line-height:1;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:4px 8px;white-space:nowrap}
.plan .price{display:flex;align-items:baseline;gap:2px;margin-top:var(--gap);white-space:nowrap}
.plan .price b{font-size:28px;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.plan .price small{font-size:14px;color:var(--muted);font-weight:500}
.plan .bill{font-size:13px;color:var(--muted);min-height:20px}
.plan .bill[data-k=deal]{color:var(--ok)}
.plan .pitch{font-size:14px;margin-top:var(--gap);line-height:1.4}
/* included (✓, ink) then not included (✕, muted) */
.plan .feats{display:grid;gap:4px;margin-top:var(--title);padding-top:var(--title);border-top:1px solid var(--line);font-size:13px;line-height:1.35}
.plan .feats>span{position:relative;padding-left:20px}
.plan .feats .nw{white-space:nowrap}
.plan .feats .lead{padding-left:0;color:var(--muted)}
.plan .feats .in::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:5px;border:1.75px solid var(--ink);border-top:0;border-right:0;transform:rotate(-45deg)}
.plan .feats .out{color:var(--muted)}
.plan .feats .out::before,.plan .feats .out::after{content:"";position:absolute;left:2px;top:8px;width:10px;height:1.5px;border-radius:1px;background:var(--muted);transform:rotate(45deg)}
.plan .feats .out::after{transform:rotate(-45deg)}
.plan .feats .in+.out{margin-top:4px}
.plan .fee{order:9;margin-top:auto;padding-top:var(--title);font-size:13px;font-weight:600}
.plan .fee[data-k=fee]{color:var(--muted)}

/* action area: main button centered under the cards; "Have a code?" sits to its right and opens in that spot.
   Grid: empty | button, note, compare link | code. Phones: everything centered in one column, button full width. */
.plan-act{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:24px;margin-top:var(--section);container-type:inline-size}
.plan-go{grid-column:2;grid-row:1;min-width:320px;white-space:nowrap;text-align:center;line-height:1.25;padding:10px 28px}   /* one line; the "· free with your code" part drops in narrow boxes (.t-long, below) */
.plan-go .nw{white-space:nowrap}
.plan-note{grid-column:2;grid-row:2;font-size:13px;color:var(--muted);margin-top:var(--gap);text-align:center}
.plan-more{grid-column:2;grid-row:3;margin-top:4px;text-align:center}
.plan-more .btn-text{font-size:14px}
.plan-signin{grid-row:4;font-size:14px;color:var(--muted);margin-top:8px}
.code{grid-column:3;grid-row:1/span 3;justify-self:start;align-self:start;width:min(100%,300px);min-height:52px;display:flex;flex-direction:column;justify-content:flex-start}
.code-toggle{align-self:flex-start;min-height:52px;color:var(--muted);font-weight:500;font-size:14px}
.code-toggle:hover{color:var(--ink)}
.code-box{display:grid;gap:var(--gap);padding-top:4px}
.code-row{display:flex;gap:var(--gap)}
.code-row .input{flex:1;min-width:0;height:44px;text-transform:uppercase;font-size:15px;font-weight:600;letter-spacing:.02em}
.code-row .input::placeholder{text-transform:none;font-weight:400;letter-spacing:0}
.code-row .btn{flex:none}
.code-box .status{font-size:13px}
.code-on{display:flex;align-items:center;column-gap:var(--title);min-height:52px}   /* row: code text wraps, Remove stays on the right */
.code-on .status{flex:1 1 auto;min-width:0;margin:0;color:var(--ink);font-size:13px;align-items:center}
.code-on .status::before{margin-top:0}
.code-on .status b{font-weight:700;white-space:nowrap}   /* a code never breaks mid-word */
.code{container-type:inline-size}
/* narrow side column (e.g. 768px): just "✓ CODE … Remove" on one row; the button + note already say what it gives */
@container (max-width:240px){
  .code-on [data-code-msg]{display:none}
  .code-on{column-gap:2px}.code-on .status{gap:6px}
  .code-on .status>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .code-on .code-remove{font-size:0;width:32px;min-height:36px;display:grid;place-items:center;border-radius:50%}   /* rule 2: still too tight, so Remove becomes an icon button (aria-label "Remove code") */
  .code-on .code-remove::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%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 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .code-on .code-remove:hover{background:var(--surface-2)}
}
.code-remove{color:var(--muted);font-weight:500;font-size:13px;flex:none}
@media(max-width:760px){
  .plan-act{display:flex;flex-direction:column;align-items:center}
  .plan-go{order:1;min-width:min(100%,320px)}
  .code{order:2;width:min(100%,440px);min-height:0;align-items:center;margin-top:var(--gap)}
  .code-toggle{align-self:center;min-height:44px}
  .code-box{width:100%;padding-top:0}
  .code-on{justify-content:center;min-height:44px}
  .code-on .status{flex:0 1 auto}
  .plan-note{order:3;margin-top:4px}
  .plan-more{order:4;margin-top:0}
  .plan-signin{order:5}
}
@media(max-width:560px){.plan-go{width:100%;min-width:0}}
.ctx-ok{flex:none;width:18px;height:18px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* ---------- Compare features (below the plan step) ----------
   Data-driven (COMPARE in mock.js). Desktop: feature column + one column per plan.
   Phones: feature name on its own line, values in a row under it, under a sticky row of short plan names.
   Picked plan = flat lighter column (--surface-2) from the header to the Pick row. */
.cmp{margin-top:calc(var(--section) * 2);padding-top:var(--section);border-top:1px solid var(--line);scroll-margin-top:16px}
.cmp-top{margin-bottom:var(--title)}
.cmp-h2{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.cmp-h2:focus{outline:none}
/* "Every plan includes": one compact line, wraps between items */
.cmp-all{margin-top:var(--gap);font-size:13px;line-height:1.6;color:var(--muted);max-width:820px}
.cmp-all b{color:var(--ink);font-weight:600}
.cmp-all span{display:inline-block;max-width:100%;vertical-align:top}   /* each item moves to the next line whole; only an item longer than the box wraps inside */
.cmp-all i{font-style:normal;color:var(--line-strong)}
.cmp-tip{margin-top:var(--title);font-size:12px;color:var(--muted)}

.cmp-tbl{--fc:minmax(240px,2.2fr)}
.cmp-body{position:relative}
.cmp-row{display:grid;grid-template-columns:var(--fc) repeat(var(--n,4),minmax(0,1fr));align-items:stretch}
.cmp-head{position:sticky;top:0;z-index:5;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line-strong)}
.cmp-corner{display:flex;align-items:flex-end;padding:0 12px 12px 0;font-size:12px;color:var(--muted)}
.cmp-col{padding:8px 4px 0;border-radius:12px 12px 0 0}
.cmp-pl{width:100%;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--ink)}
.cmp-pl:hover{background:var(--surface)}
.cmp-col.on .cmp-pl:hover{background:none}
.cmp-pl:focus-visible{outline-offset:-2px}
.cmp-nm{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.cmp-nm .ck{width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--bg);display:none;place-items:center;flex:none}
.cmp-nm .ck svg{width:10px;height:10px}
.cmp-pl[aria-pressed=true] .ck{display:grid}
.cmp-pr{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-pr small{font-size:12px;color:var(--muted);font-weight:500}
[data-col].on{background:var(--surface-2)}

.cmp-srow{border-bottom:1px solid var(--line)}
.cmp-s h3{margin:0;padding:16px 0 6px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.cmp-frow{border-bottom:1px solid var(--line)}
.cmp-f{display:block;padding:9px 16px 9px 0;font-size:14px;line-height:1.35;min-width:0;align-self:center}
.cmp-fb{display:inline;padding:12px 0;margin:-12px 0;border:0;background:none;cursor:pointer;text-align:left;font-size:14px;line-height:1.35;color:var(--ink);text-decoration:underline dotted var(--line-strong);text-decoration-thickness:1px;text-underline-offset:4px}
.cmp-fb:hover,.cmp-fb[aria-expanded=true]{text-decoration-color:var(--ink)}
.ptag.soon{display:inline-block;font-size:11px;padding:3px 6px;margin-left:4px;vertical-align:1px}
.cmp-x{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.cmp-c{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;min-height:40px;min-width:0;text-align:center}
.cmp-e{min-height:0;padding:0}
.cv{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25}
.cv svg{width:18px;height:18px}
.cv.yes{color:var(--ink)}
.cv.no{color:var(--line-strong)}
.cv.no svg{width:16px;height:16px}
.cv.txt{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cv.txt small{font-size:12px;font-weight:500;color:var(--muted)}
.cmp-prow .cmp-c{padding:12px 4px;gap:var(--gap);border-radius:0 0 12px 12px}
.cmp-pf{font-size:14px;font-weight:600;color:var(--muted)}
.cmp-go{min-width:88px;padding:0 14px}
.cmp-go.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* toast (same look as bb.css BB.toast): one sentence, wraps */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);opacity:0;z-index:70;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:500;line-height:1.4;pointer-events:none;transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1);width:max-content;max-width:min(440px,calc(100% - 24px))}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* plans always sit in one row; when they don't fit, the row scrolls sideways (never a 2x2 grid) */
/* phones: short tiles. Name + price on one line, pitch and trial under it; only the picked plan shows its lines */
@media(max-width:560px){
  .plans{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding:0;margin:0}
  .lopt.plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:0;padding:12px 14px;border-radius:14px;align-items:center}
  .plan .nm{grid-column:1;font-size:16px;min-height:28px;gap:6px}
  .plan .ck{margin-left:0}
  .plan .price{grid-column:2;grid-row:1;margin:0}
  .plan .price b{font-size:17px;letter-spacing:-.02em}
  .plan .price small{font-size:13px}
  .plan .bill{grid-column:1/-1;min-height:0;margin:0;font-size:12.5px}
  .plan .bill[data-k=plain]{display:none}
  .plan .pitch,.plan .fee{grid-column:1/-1;margin:2px 0 0;padding:0;font-size:13px}
  .plan .pitch{color:var(--muted)}
  .plan .fee{order:0;font-weight:600}
  .plan .feats{grid-column:1/-1;display:none;margin-top:10px;padding-top:10px;gap:4px;font-size:13px}
  .plan:has(input:checked) .feats{display:grid}
  .plan-act{margin-top:24px}
  .toast{bottom:16px}

  /* compare: name line, then the values in a row */
  .cmp{margin-top:var(--section);padding-top:24px}
  .cmp-h2{font-size:21px}
  .cmp-row{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
  .cmp-corner{display:none}
  .cmp-col{padding:4px 2px 0;border-radius:10px 10px 0 0}
  .cmp-pl{min-height:52px;padding:6px 2px}
  .cmp-nm{font-size:13.5px;gap:4px}
  .cmp-nm .ck{width:14px;height:14px}
  .cmp-nm .ck svg{width:9px;height:9px}
  .cmp-pr{font-size:12px}
  .cmp-pr small{font-size:11px}
  .cmp-s,.cmp-f{grid-column:1/-1}
  .cmp-s h3{padding:16px 0 6px}
  .cmp-e{display:none}
  .cmp-f{padding:12px 0 2px}
  .cmp-fb{font-size:14px}
  .cmp-c{min-height:40px;padding:4px 2px 10px}
  .cv.txt{font-size:13px}
  .cv.txt small{font-size:11px}
  .cmp-pf{padding:16px 0 0}
  .cmp-prow .cmp-c{padding:8px 2px 12px}
  .cmp-go{min-width:0;width:100%;padding:0 4px;font-size:13px}
  /* Free added (5 plans): the table scrolls sideways inside itself; the sticky header follows it (mock.js) */
  .cmp[data-n="5"] .cmp-body{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .cmp[data-n="5"] .cmp-row{min-width:400px}
  .cmp[data-n="5"] .cmp-f,.cmp[data-n="5"] .cmp-s{position:sticky;left:0;justify-self:start;max-width:calc(100vw - 2 * clamp(22px,5vw,72px))}
}
@media(max-width:360px){.ptag{font-size:11px;padding:3px 6px}.cmp-nm{font-size:12.5px}.cv.txt{font-size:12px}.cmp-pr{font-size:11.5px}}

/* ---------- Add a card to start your trial (after "Start 14-day free trial") ----------
   Summary, wallet pair (one row, half each), "or pay with card", mock of the Stripe Payment Element, one full-width button. */
.card-sum{display:flex;align-items:center;gap:var(--title);margin-top:var(--title);padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-in);background:var(--surface)}
.card-sum>div{flex:1;min-width:0;display:grid;gap:2px}
.card-sum strong{font-weight:600;font-size:15px}
.card-sum span{font-size:13px;color:var(--muted)}
.card-sum .btn-text{flex:none;font-size:14px;padding:0 4px}
.wallets{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--section)}
.btn-wallet{min-height:52px;padding:0 12px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.btn-wallet .lbl{display:inline-flex;align-items:center;gap:4px}
.btn-wallet svg{width:auto;height:20px;flex:none}
.btn-gpay svg{height:18px;margin-right:2px}
.btn-apple{background:#fff;color:#000}
.btn-gpay{background:#000;color:#fff;border-color:var(--line-strong)}
.pe .field{margin-bottom:var(--title)}
.pe .alert{margin-bottom:var(--title)}
.pe-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pe-row .field{min-width:0}
.pe+.btn{margin-top:4px}
@media(max-width:380px){.pe-row{grid-template-columns:1fr 1fr}.pe-zip{grid-column:1/-1}}

/* ===== Narrow widths (COMPONENTS.md "Narrow widths", rules 1-9). Same names as bb.css so pages read alike. =====
   .cq: a box that its insides respond to (container). .one: one line, cut off with "…".
   .t-long / .t-short: two labels in one button; the short one shows when the box is under 400px. */
.cq{container-type:inline-size}
.one{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-short{display:none!important}   /* !important: utility wins over page rules like ".row span{display:block}" */
@container (max-width:400px){.t-long{display:none!important}.t-short{display:inline!important}}
/* producer-only sign-up with Starter/Creator picked: no own store, so the address is greyed out with a "Switch to Pro" upsell */
[data-slugfield][data-locked] .slugbox{opacity:.45;border-style:dashed;pointer-events:none}
[data-slugfield][data-locked] .status{display:none}
.slug-up{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-in);background:var(--surface-2)}
.slug-up .su-main{flex:1 1 220px;min-width:0}
.su-t{margin:0;font-size:14.5px;font-weight:500;color:var(--ink)}
.su-t b{font-weight:700}
.su-p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.su-list{display:grid;gap:3px;margin:8px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:1.35;color:var(--muted)}
.su-list li{position:relative;padding-left:20px}
.su-list li::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:5px;border:1.75px solid var(--ok);border-top:0;border-right:0;transform:rotate(-45deg)}
.slug-up .btn{flex:none;white-space:nowrap}
/* Pro picked: the Pro+ upsell sits on its own after the address field, not inside it */
.plus-up{margin-top:0;margin-bottom:var(--gap, 8px)}

/* ---------- Pick your plan: motion (fx.js). Same feel as the marketplace section fade-in: up 16px, 0.6s ---------- */
@keyframes fx-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* entrance when the step opens: heading, switch, cards one after another, then the start button */
.fx-enter .plan-head>*,.fx-enter .plan-bar,.fx-enter [data-plan-list]>*,.fx-enter .plan-act{animation:fx-up .6s cubic-bezier(.2,.8,.2,1) both}
.fx-enter .plan-head>:nth-child(2){animation-delay:60ms}
.fx-enter .plan-head>:nth-child(3){animation-delay:120ms}
.fx-enter .plan-bar{animation-delay:180ms}
.fx-enter [data-plan-list]>*{animation-delay:calc(240ms + var(--fx-i,0) * 80ms)}
.fx-enter .plan-act{animation-delay:560ms}
/* scroll reveal below the first screen: compare heading, table header, each row, the tip */
.fx{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.fx.cmp-row{transform:translateY(10px);transition-duration:.45s}
.fx.fx-in{opacity:1;transform:none}
.fx.fx-now{transition:none}
@media(prefers-reduced-motion:reduce){.fx-enter *{animation:none!important}.fx{opacity:1;transform:none;transition:none}}