/* Avouch's inner pages: the marketplace, a product, a receipt, the listing form, a business's page, joining, the classic portal.
   17 Oct: the same tokens as avouch.html (Mona Sans, ink #0b0b0b on paper #f2efe8, ink pills). The old token NAMES are kept
   (--cobalt is now ink, --lemon is now sand) so every page that uses them changes with this one block. Motion: custom curves only, under 300ms, transform and opacity only. */
:root{--cobalt:#111;--cobalt-deep:#2a2a2a;--cobalt-ink:#0b0b0b;--lemon:#e6dfcf;--lemon-soft:#fbf8f1;--paper:#f2efe8;--card:#fff;--ink:#0b0b0b;--dim:#5f5b53;--faint:#8a867c;
  --line:rgba(11,11,11,.10);--line2:rgba(11,11,11,.16);--soft:#e9e4d8;--ok:#178a57;--ok-bg:#dcf5ea;--bad:#b3261e;--bad-bg:#fde4e1;--warn-bg:#fff4cc;
  --display:"Mona Sans",ui-sans-serif,system-ui,sans-serif;--text:"Mona Sans",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--gut:clamp(16px,4vw,40px);--max:1180px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 12px}

/* ── the floating bar ── */
.top{position:sticky;top:0;z-index:20;padding:12px var(--gut) 0}
.top .bar{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 18px;border-radius:999px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(11,11,11,.35)}
.logo{font:600 20px/1 var(--display);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:20px;height:20px;border-radius:6px;background:var(--ink)}
.top nav{display:flex;align-items:center;gap:clamp(6px,2vw,22px);font-size:15px;font-weight:500}
.top nav a:not(.btn){text-decoration:none;color:var(--dim);padding:8px 4px;transition:color 160ms var(--ease-out)}
main{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut) 90px}

/* ── type ── */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,52px);max-width:860px}
.hero.dash{max-width:none}
.eyebrow{font:500 12.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin:0 0 18px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,7.4vw,88px);font-weight:300;letter-spacing:-.04em}
h2{font-size:clamp(23px,2.6vw,31px);margin:0 0 12px}
h3{font-size:20px;letter-spacing:-.02em;margin:0 0 8px}
.inner h2:not(:first-child),.inner h3:not(:first-child){margin-top:28px}
.lead{font-size:clamp(18px,2vw,22px);color:var(--dim);max-width:60ch;margin:22px 0 28px;text-wrap:pretty}
.dim{color:var(--dim);font-size:15px}
.mono{font-family:var(--mono);font-size:14px;overflow-wrap:anywhere}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}

/* ── buttons: press is scale(.97), hover only where there is a real pointer ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--text);padding:16px 24px;border-radius:999px;border:0;background:var(--cobalt);color:#fff;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 140ms var(--ease-out),background-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.lemon{background:var(--lemon);color:var(--cobalt-ink)}
.btn.sm{padding:11px 18px;font-size:14.5px}
.btn.xs{padding:7px 12px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--cobalt-deep)} .btn.ghost:hover{background:#fff} .btn.lemon:hover{background:#ddd5c2}
  .top nav a:not(.btn):hover{color:var(--ink)}
  .pcard:hover .pin{transform:translateY(-3px)} .pcard:hover .go{transform:translateX(3px)}
}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── cards: a tray and the plate in it ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pcard{display:block;text-decoration:none;padding:7px;border-radius:30px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.pin{display:flex;flex-direction:column;gap:10px;min-height:236px;padding:24px;border-radius:24px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -20px rgba(11,11,11,.3);transition:transform 220ms var(--ease-out)}
.ptop{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--faint)}
.ptop .mono{font-size:12.5px}
.pin b{font:500 28px/1.05 var(--display);letter-spacing:-.03em}
.pin em{font-style:normal;color:var(--dim);flex:1}
.pay{font-size:14px;font-weight:500}
.pay i{font-style:normal;font-weight:600;background:var(--lemon);padding:3px 9px;border-radius:999px;margin-right:6px}
.pfoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;font-size:13.5px;color:var(--dim)}
.go{font-size:18px;color:var(--cobalt);transition:transform 200ms var(--ease-out)}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.shellcard{padding:7px;border-radius:32px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.inner{padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -30px rgba(11,11,11,.35);min-width:0}
.fact{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:var(--paper);margin:0 0 12px}
.fact.lemon{background:var(--lemon-soft);box-shadow:inset 0 0 0 1px rgba(11,11,11,.08)}
.fact b{font:500 22px/1.1 var(--display);letter-spacing:-.02em}
.fact span{color:var(--dim);font-size:15px}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
.ticks{list-style:none;padding:0;display:grid;gap:10px}
.ticks li{display:grid;gap:2px;padding:14px 16px 14px 44px;border-radius:16px;background:var(--paper);position:relative;margin:0}
.ticks li::before{content:"";position:absolute;left:16px;top:18px;width:14px;height:8px;border-left:2.5px solid var(--cobalt);border-bottom:2.5px solid var(--cobalt);transform:rotate(-45deg)}
.ticks b{font-weight:600}.ticks span{color:var(--dim);font-size:15px}

/* ── numbers ── */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 30px}
.stat{padding:18px 18px 16px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.stat b{font:500 clamp(28px,3vw,38px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat span{font-size:13.5px;color:var(--dim);line-height:1.35}
.stat.hot{background:var(--cobalt);color:#fff;box-shadow:none}.stat.hot span{color:rgba(244,245,255,.75)}
.block{margin:0 0 34px}
.bhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:0 0 14px}
.bhead h2{margin:0}.bhead p{margin:0;max-width:62ch}

/* ── tables scroll inside their own box, never the page ── */
.tablewrap{border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
tr:last-child td{border-bottom:0}
th{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:rgba(241,242,248,.6)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.empty{white-space:normal;color:var(--dim);padding:26px 16px}
td small{color:var(--faint)}
td code,.inner code{font:500 13px/1 var(--mono);background:var(--paper);padding:4px 7px;border-radius:7px}
.why{display:block;color:var(--dim);white-space:normal;max-width:30ch;margin-top:4px;font-size:12.5px}

/* status chips */
.st{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--text);padding:6px 9px;border-radius:999px;background:var(--paper);color:var(--dim);white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.st-held{background:#ece7db;color:#3d3a34}
.st-payable{background:var(--ok-bg);color:var(--ok)}
.st-paid{background:var(--ink);color:#fff}
.st-reversed{background:var(--soft);color:var(--faint)}
.st-rejected{background:var(--bad-bg);color:var(--bad)}
.st-unverified{background:var(--warn-bg);color:#7a5a00}
.st-unattributed{background:var(--soft);color:var(--dim)}
.st-test{background:transparent;box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim)}
.st-test::before{display:none}

/* code */
pre.code{margin:12px 0;padding:16px 18px;border-radius:16px;background:var(--ink);color:#ece7db;overflow-x:auto;font:500 12.5px/1.6 var(--mono);-webkit-overflow-scrolling:touch}
pre.code code{background:none;padding:0;font:inherit;color:inherit;white-space:pre}
.block-code{display:block;margin:10px 0;padding:12px 14px!important;overflow-wrap:anywhere}
details.secret{margin:10px 0 4px}
details.secret summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--cobalt)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fact.example{margin-top:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.plan{padding:7px;border-radius:32px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.plan.on{background:var(--cobalt)}
.plan-in{padding:clamp(22px,3vw,30px);border-radius:26px;background:var(--card);height:100%}
.plan h3{font-size:32px}
.plan dl{margin:18px 0;display:grid;gap:0}
.plan dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.plan dt{color:var(--dim)}.plan dd{margin:0;font-weight:600;text-align:right}
.ph{display:inline;padding:1px 7px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--line2);background-image:none;outline:1.5px dashed rgba(11,11,11,.28);outline-offset:-1.5px;color:var(--dim);font-weight:500;white-space:normal}
.current{display:inline-block;font:600 13px/1 var(--text);background:var(--lemon);color:var(--cobalt-ink);padding:8px 12px;border-radius:999px;margin:0}

/* forms */
label{display:block;font-size:14px;font-weight:600;margin:16px 0 7px}
.help{display:block;font-weight:400;color:var(--dim);margin-top:3px}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],select,textarea{width:100%;font:16px/1.4 var(--text);color:var(--ink);padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);
  transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
input[type=date]{min-height:52px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cobalt);background:#fff}
textarea{resize:vertical;min-height:120px}
.bad input,.bad textarea{border-color:#d92b2b}
.err{color:#b81f1f;font-size:14px;margin-top:6px}
.tick{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:15px}
.tick input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--cobalt)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.confirm{margin:0 0 14px}
.saleform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px;align-items:end}
.saleform .row,.saleform .dim{grid-column:1/-1;margin-top:16px}
.words{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px;align-items:end}
.terms .row,.terms .dim{grid-column:1/-1;margin-top:18px}
.hp{position:absolute;left:-9999px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 0}
.seg label{margin:0;cursor:pointer;display:block;padding:16px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.seg label:active{transform:scale(.99)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg b{display:block;font:500 19px/1.1 var(--display);letter-spacing:-.02em;margin-bottom:6px}
.seg span{display:block;font-weight:400;font-size:13.5px;color:var(--dim);line-height:1.4}
.seg label:has(input:checked){background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.report{margin-top:26px;font-size:15px;color:var(--dim)}
.report summary{cursor:pointer;display:inline-block}
.report form{max-width:520px}
.done{padding:clamp(22px,3vw,34px);border-radius:26px;background:var(--lemon)}
.done code{display:block;font:500 14px/1.5 var(--mono);background:#fff;padding:12px 14px;border-radius:12px;margin:8px 0 14px;overflow-wrap:anywhere}

/* toast: enters on opacity and a small rise, leaves faster than it came */
.toast{position:fixed;left:50%;bottom:24px;z-index:50;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font:600 14.5px/1 var(--text);pointer-events:none;
  opacity:0;transform:translate(-50%,8px) scale(.97);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1);transition-duration:220ms}

.foot{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:30px var(--gut) 50px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
.foot a{color:var(--dim)}

@media (max-width:980px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats .stat.hot{grid-column:1/-1;order:-1}}
@media (max-width:820px){.cols,.cols2,.two,.plans,.terms,.saleform{grid-template-columns:1fr}.top nav a:not(.btn){display:none}.top nav a.keep{display:inline}}
@media (max-width:520px){.seg{grid-template-columns:1fr}.btn{padding:15px 20px}.cta .btn{flex:1 1 auto}}
/* 17 Oct: the money table on a phone. Six columns don't fit at 390px, and the two that matter (what the affiliate gets, what
   Sharecut keeps) were the ones scrolled out of sight. Below 640px each row becomes a small card with its own labels. */
@media (max-width:640px){
  table.split tr:first-child{display:none}
  table.split,table.split tbody,table.split tr,table.split td{display:block;width:100%}
  table.split tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:14px 16px;border-bottom:1px solid var(--line)}
  table.split td{border:0;padding:0;white-space:normal;text-align:left;font-variant-numeric:tabular-nums}
  table.split td::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim,#6b7280);margin-bottom:2px}
  table.split td:nth-child(1),table.split td:nth-child(2){font-weight:600}
  table.split td.key{font-weight:700}
}
@media (prefers-reduced-motion:reduce){.btn,.pin,.go,.toast,.seg label{transition:none}.btn:active{transform:none}}