/* ==========================================================================
   DealR — pages beyond the homepage
   Market, listing detail, owners, plans, console, profile, onboarding.
   ========================================================================== */
.page{padding:clamp(34px,5vw,64px) 0 clamp(70px,8vw,110px)}
.page-head{max-width:66ch;margin-bottom:clamp(30px,4vw,52px)}
.page-head .h1{margin-top:18px}
.page-head .lead{margin-top:18px}
.crumbs{display:flex;gap:9px;margin:0 0 22px;font-size:12.5px;color:var(--ink-4)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--cyan)}

/* ------------------------------------------------------------- market ---- */
.market-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.filters{position:sticky;top:96px;display:grid;gap:22px}
.filter-block h2{margin:0 0 9px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.opt{
  display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;
  border-radius:4px;font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.opt:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.opt input{accent-color:var(--cyan);width:14px;height:14px;flex:0 0 auto;margin:0}
.opt .n{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.market-results{min-width:0}
.market-strip{margin-top:8px}
.market-more{margin:26px 0 0}

.pager{display:flex;align-items:center;gap:14px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.pager .chip:disabled{opacity:.4;cursor:default}
.pager-pages{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:13px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.pager-pages b{color:var(--ink)}
.pager-pages a:hover{color:var(--cyan)}

/* ------------------------------------------------------ listing detail ---- */
.detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,3.5vw,52px);align-items:start}
.detail-shot{grid-row:span 2;margin:0;border-radius:5px;overflow:hidden;background:var(--void)}
.detail-shot img{width:100%;height:auto;display:block}
.detail-shot figcaption{padding:11px 14px;font-size:11.5px;color:var(--ink-4);background:var(--raise-1)}
.detail-main .h2{margin:10px 0 0}
.detail-main .lead{margin-top:12px}
.detail-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px 22px;margin:24px 0 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.detail-terms dt{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.detail-terms dd{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
.detail-terms dd.strong{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.detail-terms dd.ok{color:var(--ink-2)}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.detail-note{margin-top:14px;max-width:44ch}
.detail-side{display:grid;gap:20px}
.side-block h2{margin:0 0 11px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.who-row{display:flex;align-items:center;gap:11px}
.who-row span{display:grid;gap:2px;min-width:0}
.who-row b{font-size:14px;font-weight:600;letter-spacing:-.012em}
.who-row small{font-size:12px;color:var(--ink-4)}
.side-block .meta{margin-top:10px}
.activity{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.activity li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.activity time{margin-left:auto;color:var(--ink-4);font-size:11.5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.dot.cy{background:var(--cyan)}
.dot.am{background:var(--ink-2)}
.dot.ok{background:var(--success)}
.more{margin-top:clamp(50px,6vw,84px)}

/* -------------------------------------------------------------- owners ---- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,4vw,60px);padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--rule)}
.plain{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.plain li{font-size:14px;color:var(--ink-2);line-height:1.55}
.plain b{display:block;color:var(--ink);font-weight:600;letter-spacing:-.012em;margin-bottom:2px}
.setup{padding:clamp(40px,5vw,70px) 0;border-bottom:1px solid var(--rule)}
.faq{padding-top:clamp(40px,5vw,70px)}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 44px}
.faq details{border-top:1px solid var(--rule)}
.faq summary{padding:16px 0;cursor:pointer;font-size:14.5px;font-weight:550;letter-spacing:-.012em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";margin-right:11px;color:var(--ink-4)}
.faq details[open] summary:before{content:"\2013"}
.faq p{margin:0 0 18px 24px;font-size:13.5px;color:var(--ink-3);line-height:1.6;max-width:52ch}

/* --------------------------------------------------------------- plans ---- */
/* The comparison is held to a readable width. Full-bleed put the feature name
   and its answer 700px apart, which made every row a hunt. */
.plans-shell{width:min(900px,100% - var(--gutter)*2)}
.plans-page-wrap .page-head{max-width:none;margin-bottom:clamp(26px,3vw,40px)}
.plans-page{margin-bottom:clamp(38px,4vw,58px)}
.compare{width:100%;table-layout:fixed}
.compare .col-plan{width:158px}
.compare .col-pro{background:rgba(255,106,42,.035)}

.compare thead th{padding:0 0 18px;vertical-align:bottom;text-transform:none;letter-spacing:0}
.ph{display:grid;gap:9px;justify-items:start;padding:0 14px}
.ph b{font-size:15px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.ph em{font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.ph em strong{font-size:22px;font-weight:680;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ph em small{display:block;font-size:11.5px;color:var(--ink-4)}
.ph .btn{width:100%}

/* Group rows break the list into three readable stretches. */
.compare tr.grp th{
  padding:26px 0 9px;text-align:left;border-top:0;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.compare tr.grp span{color:var(--ink-4);text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.compare tbody td{padding:12px 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2)}
.compare tbody td:first-child{padding-right:20px}
.compare tbody tr:hover td{background:rgba(255,255,255,.022)}
/* A tick reads instantly; "Included" eleven times does not. */
.compare td.y,.compare td.n{text-align:center;padding-left:14px;padding-right:14px}
.compare td.y{color:var(--accent);font-size:14px}
.compare td.n{color:var(--ink-4)}

.plans-tail{display:grid;gap:clamp(34px,3.5vw,50px)}
.pick h2{margin:0 0 16px}
.pick-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px 44px;border-top:1px solid var(--rule);padding-top:20px}
.pick-rows div{display:grid;gap:6px}
.pick-rows b{font-size:14px;font-weight:600;letter-spacing:-.012em}
.pick-rows span{font-size:13.5px;color:var(--ink-2);line-height:1.6}

@media (max-width:700px){
  .compare .col-plan{width:76px}
  .ph{padding:0 6px;gap:7px}
  .ph em strong{font-size:18px}
  .ph .btn{display:none}
  .compare tbody td{font-size:13px}
}

/* ------------------------------------------------------------- console ---- */
.attention{display:grid;gap:1px;background:var(--rule);border-radius:5px;overflow:hidden;margin-bottom:28px}
.att{display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--ground)}
.att div{display:grid;gap:2px;min-width:0}
.att b{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.att small{font-size:12px;color:var(--ink-4)}
.att .chip{margin-left:auto}
.console-demo{background:var(--raise-1);border-radius:5px;padding:18px 20px 8px}
.console-demo .metrics{background:var(--rule)}
.console-demo .metrics>div{background:var(--raise-1)}

/* ------------------------------------------------ create-listing modal ---- */
.modal{border-radius:5px;background:var(--raise-1);padding:18px 20px 16px;box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
/* A dark surface inside the light band has to carry the whole dark palette,
   not just part of it. Missing --raise-3/4 here made the Cancel button
   white-on-cream. */
.bone .modal{
  background:#0F0F0F;color:#F5F5F5;
  --void:#050505;--ground:#0A0A0A;
  --ink:#F5F5F5;--ink-2:#A1A1AA;--ink-3:#9A9AA3;--ink-4:#8B8B94;
  --rule:rgba(245,245,245,.1);--rule-2:rgba(245,245,245,.18);
  --raise-1:#151515;--raise-2:#1E1E1E;--raise-3:#262626;--raise-4:#323232;
  --accent:#FF6A2A;--cyan:#FF6A2A;--amber:#F59E0B;--warning:#F59E0B;--danger:#EF4444;--success:#22C55E;
  box-shadow:0 34px 70px -40px rgba(30,26,18,.55);
}
.modal-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.modal-top b{font-size:16px;font-weight:650;letter-spacing:-.02em}
.modal-x{margin-left:auto;border:0;background:none;color:var(--ink-4);font-size:20px;line-height:1;cursor:pointer}
.modal-warn{margin:0 0 16px;padding:10px 12px;border-radius:4px;background:rgba(245,158,11,.1);color:var(--warning);font-size:12px;line-height:1.5}
.field-row{display:block;margin-bottom:13px}
.field-row>span{display:block;margin-bottom:6px;font-size:12.5px;font-weight:550;color:var(--ink-2)}
.field-row i{color:var(--danger);font-style:normal}
.field-row input{width:100%;height:38px;padding:0 11px;border-radius:4px;border:1px solid var(--rule);background:var(--raise-2);color:var(--ink);font-size:13.5px}
.file-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:4px;background:var(--raise-2);font-size:13px;color:var(--ink-2)}
.file-row img{width:58px;height:34px;object-fit:cover;border-radius:2px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.shot-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-3)}
.shot-note code{font-family:var(--f-mono);font-size:12px}

/* ---------------------------------------------------------- onboarding ---- */
body.onboarding{min-height:100vh;display:flex;flex-direction:column}
.ob-top{display:flex;align-items:center;gap:20px;padding:22px clamp(20px,4vw,54px);position:relative;z-index:1}
.ob-top .brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.03em}
.ob-top .brand em{font-style:normal;font-weight:500;color:var(--ink-3)}
.ob-top .glyph{width:24px;height:24px}
.ob-top .meta{margin-left:auto}
.ob-top .meta:hover{color:var(--cyan)}
.ob{
  flex:1;position:relative;z-index:1;
  width:min(620px,100% - 40px);margin-inline:auto;
  padding:clamp(24px,6vh,70px) 0 60px;
}
.ob-step{display:none}
.ob-step.is-active{display:block;animation:obIn .45s var(--ease-out)}
@keyframes obIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ob-count{margin:0 0 14px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.ob-count.ok{color:var(--cyan)}
.ob .lead{margin-top:14px}
.ob-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ob-fine{margin-top:16px;max-width:52ch}
.discord-btn{background:#5865f2;color:#fff}
.discord-btn:hover{background:#6b76f5}

.ob-choices{display:grid;gap:10px;margin-top:28px}
.choice{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  padding:16px 17px;border:0;border-radius:5px;
  background:var(--raise-1);color:var(--ink);text-align:left;cursor:pointer;
  border:1px solid var(--rule);
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.choice:hover{background:var(--raise-2);border:1px solid var(--rule-2)}
.choice:active{transform:translateY(1px)}
.choice.picked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.choice-mark{flex:0 0 auto;width:22px;color:var(--ink-4);font-size:15px;line-height:1.4}
.choice.picked .choice-mark{color:var(--cyan)}
.choice-body{display:grid;gap:5px;min-width:0}
.choice-body b{font-size:15px;font-weight:620;letter-spacing:-.018em}
.choice-body small{font-size:13px;color:var(--ink-3);line-height:1.55}
.choice-tick{margin-left:auto;color:var(--cyan);opacity:0;transition:opacity var(--t-fast);font-size:13px}
.choice.picked .choice-tick{opacity:1}

.ob-summary{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:0}
.ob-summary li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:15px 0;border-top:1px solid var(--rule)}
.ob-summary b{font-size:13px;font-weight:600;letter-spacing:-.012em}
.ob-summary span{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.ob-rail{display:flex;gap:6px;margin:44px 0 0;padding:0;list-style:none}
.ob-rail li{height:2px;width:38px;border-radius:0px;background:var(--rule-2);transition:background var(--t-mid)}
.ob-rail li.on{background:var(--cyan)}

@media (max-width:900px){
  .market-layout{grid-template-columns:1fr}
  .filters{position:static;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .detail{grid-template-columns:1fr}
  .detail-shot{grid-row:auto}
  .ob-summary li{grid-template-columns:1fr;gap:4px}
}

/* The form fills its column rather than floating inside one — a capped width
   here just moved the empty space instead of removing it. */
.install-body .modal{width:100%}

/* ------------------------------------------------------------------ 404 ---- */
.notfound{padding-top:clamp(50px,8vw,110px)}
.nf-code{
  margin:0 0 18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;
  color:var(--accent);
}
.notfound .h1{max-width:18ch}
.notfound .lead{margin-top:18px}
.nf-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 40px;margin-top:clamp(34px,4vw,56px);
  border-top:1px solid var(--rule);
}
.nf-links a{
  display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--rule);
  transition:padding-left var(--t-mid) var(--ease);
}
.nf-links a:hover{padding-left:8px}
.nf-links b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.nf-links a:hover b{color:var(--accent)}
.nf-links span{font-size:13px;color:var(--ink-3)}

/* ---------------------------------------------------------------- legal ---- */
.legal .h1{max-width:16ch}
.legal-updated{margin:16px 0 0;font-size:12.5px;color:var(--ink-4)}
.legal-body{max-width:68ch;margin-top:clamp(34px,4vw,52px)}
.legal-body h2{
  margin:38px 0 0;font-size:15px;font-weight:620;letter-spacing:-.02em;
  padding-top:20px;border-top:1px solid var(--rule);
}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body p{margin:11px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.legal-body a{color:var(--accent)}
.legal-body a:hover{text-decoration:underline}

/* ------------------------------------------------------- how it works ---- */
/* Two beats, composed the same way.

   Each row is prose on the left and one exhibit on the right. The second row
   used to put bare text there, so the rows carried different weight, the list
   floated away from the heading it belonged to, and whichever column ran short
   left a hole under it. Both asides are panels now, both stretch to their row,
   and a rule between the rows makes them read as two beats rather than four
   loose columns. */
.hiw{
  margin-top:clamp(46px,5vw,80px);
  display:grid;gap:clamp(40px,5vw,64px)}
.hiw-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.5vw,56px);align-items:stretch}
.hiw-row+.hiw-row{padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.hiw-row>div{min-width:0}
.hiw-row h2{margin:0 0 14px}
.hiw-row p{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:52ch}
.hiw-row p:last-child{margin-bottom:0}
.hiw-row code{font-family:var(--f-mono);font-size:13.5px;color:var(--ink)}

.hiw-aside{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(18px,2vw,24px);
  border:1px solid var(--rule);border-radius:var(--r-panel);
  background:var(--raise-1)}
.hiw-aside-label{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.hiw-aside .plain{margin:0}
.hiw-aside .plain li+li{margin-top:14px}
.hiw-demo{justify-content:center}
.hiw-demo .discord{grid-template-columns:1fr;width:100%}

@media (max-width:820px){
  /* One column: the exhibit follows the prose it belongs to. */
  .hiw-row{grid-template-columns:1fr;gap:24px}
  .hiw-row+.hiw-row{padding-top:32px}
}
.hiw-cta{margin-top:clamp(50px,6vw,90px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.hiw-cta .lead{margin-top:16px}
.hiw-cta .hero-cta{margin-top:26px}

/* --------------------------------------------------------------- viewer ---- */
/* Signed-in account chip in the header. */
.acct{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:4px;background:var(--raise-2);font-size:13px}
.acct i{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#0A0A0A;font-style:normal;font-size:11px;font-weight:700;
}
.acct b{font-weight:550;letter-spacing:-.01em}

/* Prototype persona switcher. Deliberately looks like a dev tool, not product
   chrome, so it is never mistaken for part of DealR. */


@media (max-width:700px){}

/* Contextual banner that explains what this viewer can and cannot do. */
.viewer-note-bar{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin-bottom:26px;border-radius:5px;
  background:var(--raise-1);border:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}

/* The one server setting that changes who can see a market. */
.setting-row{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;margin-bottom:24px;border-radius:5px;
  background:var(--raise-1);border:1px solid var(--rule);
}
.setting-row.on{border:1px solid var(--accent-wash)}
.setting-row div{display:grid;gap:3px;min-width:0}
.setting-row b{font-size:14px;font-weight:620;letter-spacing:-.015em}
.setting-row small{font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:64ch}
.setting-row .chip{margin-left:auto;flex:0 0 auto}

/* -------------------------------------------------------- markets picker ---- */
.market-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.market-card{
  display:flex;flex-direction:column;gap:9px;
  padding:20px 21px 18px;border-radius:5px;
  background:var(--raise-1);border:1px solid var(--rule);
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.market-card:hover{background:var(--raise-2);border:1px solid var(--rule-2);transform:translateY(-2px)}
.mc-top{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.mc-plan{margin-left:auto;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.mc-plan.free{color:var(--ink-4)}
.market-card h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.022em}
.mc-meta{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.mc-stats{display:flex;gap:26px;margin:10px 0 0;padding-top:13px;border-top:1px solid var(--rule)}
.mc-stats dt{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.mc-stats dd{margin:3px 0 0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.mc-go{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.market-card:hover .mc-go{color:var(--accent)}
.market-card.add{background:transparent;border:1px solid var(--rule);justify-content:flex-start}
.market-card.add:hover{background:var(--raise-1)}
.mc-add{
  width:34px;height:34px;border-radius:5px;display:grid;place-items:center;
  background:var(--raise-2);color:var(--ink-3);font-size:19px;margin-bottom:4px;
}
.markets-note{margin-top:26px;font-size:12.5px;color:var(--ink-4)}

/* --------------------------------------------------- prototype chrome ---- */
.skip{
  position:fixed;left:-9999px;top:10px;z-index:200;
  padding:10px 16px;background:var(--accent);color:#0A0A0A;font-weight:600;border-radius:2px;
}
.skip:focus{left:10px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  padding:11px 18px;border-radius:3px;
  background:var(--raise-3);color:var(--ink);border:1px solid var(--rule-2);
  font-size:13px;opacity:0;pointer-events:none;z-index:90;
  transition:opacity var(--t-mid),transform var(--t-mid) var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Filters are buttons now, because they do something. */
.filter-block .opt{
  width:100%;border:0;background:transparent;text-align:left;
  font:inherit;font-size:13.5px;
}
.filter-block .opt.on{background:var(--raise-2);color:var(--ink);font-weight:550}
.filter-block .opt.on .n{color:var(--ink-2)}

/* Sort as an underline tab row rather than another set of pills. */
.tabs{display:flex;gap:20px;align-items:center}
.tab{
  padding:6px 0;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font:inherit;font-size:13.5px;
  border-bottom:2px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:550}

/* Saving a listing */
.listing{position:relative}
.listing-link{display:block;color:inherit}
.save{
  position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;border:0;border-radius:2px;
  background:rgba(10,10,10,.6);color:var(--ink-2);
  font-size:15px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);
  transition:background var(--t-fast),color var(--t-fast);
}
.save:hover{background:rgba(10,10,10,.85);color:var(--ink)}
.save[aria-pressed="true"]{color:var(--accent)}
.empty-state{padding:40px 0;color:var(--ink-3);font-size:14px}

/* -------------------------------------------------- per-server upgrade ---- */
/* The plan cards on the upgrade page are a radio group, so which one is chosen
   has to be visible, and a plan that cannot be changed has to look settled
   rather than broken. */
.upgrade-page .plan-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  border:1px solid var(--rule);border-radius:var(--r-panel);overflow:hidden;margin:22px 0 0}
.upgrade-page .plan-cols .plan{cursor:pointer;transition:background var(--t-fast),box-shadow var(--t-fast)}
.upgrade-page .plan-cols .plan:hover{background:var(--raise-1)}
.upgrade-page .plan-cols .plan.chosen{background:var(--raise-1);box-shadow:inset 0 2px 0 var(--accent)}
.upgrade-page .plan-cols .plan.chosen .plan-select{background:var(--accent);border-color:var(--accent);color:#0A0A0A}
.upgrade-page .plan-cols .plan:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.upgrade-page .plan-cols .plan.locked{cursor:default}
.upgrade-page .plan-cols .plan.locked:hover{background:inherit}
.upgrade-page .plan-cols .plan.locked:not(.chosen){opacity:.55}
.upgrade-page .plan-select{display:inline-flex;margin-top:18px}

.upgrade-page .billing-choice{margin-top:30px;transition:opacity var(--t-fast)}
.upgrade-page .billing-choice.inactive{opacity:.4}
.upgrade-page .billing-choice.inactive .seg button{cursor:not-allowed}

.upgrade-page .server-context{display:flex;align-items:center;gap:12px;margin:22px 0 0}
.upgrade-page .server-context i{
  flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-control);display:grid;place-items:center;
  background:var(--accent);color:#0A0A0A;font-style:normal;font-size:16px;font-weight:700}
.upgrade-page .server-context span{display:grid;gap:2px;min-width:0}
.upgrade-page .server-context small{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.upgrade-page .server-context b{font-size:15px;font-weight:620;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.upgrade-page .st-apply{margin-top:30px;padding:22px;border:1px solid var(--rule);border-radius:var(--r-panel);background:var(--raise-1)}
.upgrade-page .st-apply b{display:block;font-size:15px;font-weight:640;letter-spacing:-.02em}
.upgrade-page .st-apply p{margin:5px 0 0;font-size:13px;color:var(--ink-3)}
.upgrade-page .st-apply .save-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.upgrade-page .st-apply .meta{font-size:12px;color:var(--ink-4)}

/* ----------------------------------------------------- owners: the invite --- */
/* Adding DealR is what this page is for, so the offer appears beside the step
   that describes it and again at the end. It is shown to every persona: an
   owner who already runs one market is exactly who adds a second. */
.step-act{margin:12px 0 0}
.owner-invite{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);
  align-items:center;margin:56px 0 0;padding:clamp(24px,3.4vw,40px);
  border:1px solid var(--rule);border-radius:var(--r-panel);background:var(--raise-1)}
.owner-invite h2{margin:0}
.owner-invite p{margin:10px 0 0;font-size:14px;color:var(--ink-3);line-height:1.6;max-width:52ch}
.owner-invite-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.owner-invite-act .meta{flex:1 0 100%;margin:2px 0 0;font-size:12px;color:var(--ink-4)}
@media (max-width:820px){
  .owner-invite{grid-template-columns:1fr;gap:22px}
}

/* --------------------------------------------------- create-listing demo --- */
/* The panel on the homepage is the real form, working, so it needs the states
   a working form has. It stays visually identical to the static version it
   replaced; only the behaviour is new. */
.listing-demo .demo-tag{
  margin-left:auto;padding:2px 8px;border-radius:3px;
  border:1px solid var(--rule-2);color:var(--ink-4);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.listing-demo .modal-x{margin-left:10px}
.demo-types{display:flex;gap:6px;margin:0 0 15px}
.demo-types button{
  flex:1;padding:8px 6px;border-radius:4px;
  border:1px solid var(--rule);background:var(--raise-2);color:var(--ink-3);
  font:inherit;font-size:12.5px;font-weight:560;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.demo-types button:hover{color:var(--ink);border-color:var(--rule-2)}
.demo-types button.on{background:var(--accent);border-color:var(--accent);color:#0A0A0A;font-weight:640}
.demo-types button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.listing-demo .field-row input:focus{outline:none;border-color:var(--accent)}
.listing-demo .field-row input::placeholder{color:var(--ink-4)}

button.file-row{
  width:100%;border:1px solid var(--rule);cursor:pointer;text-align:left;font:inherit;
  transition:border-color var(--t-fast)}
button.file-row:hover{border-color:var(--accent)}
button.file-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.file-row em{margin-left:auto;flex:0 0 auto;font-style:normal;font-size:12px;color:var(--ink-4)}
button.file-row:hover em{color:var(--accent)}

.demo-result{
  display:grid;gap:3px;margin-top:14px;padding:12px 13px;border-radius:4px;
  border:1px solid var(--rule);background:var(--raise-2)}
.demo-result b{font-size:12.5px;font-weight:640}
.demo-result span{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.demo-result.ok{border-color:color-mix(in srgb,var(--success) 45%,transparent)}
.demo-result.ok b{color:var(--success)}
.demo-result.warn{border-color:color-mix(in srgb,var(--warning) 45%,transparent)}
.demo-result.warn b{color:var(--warning)}
.demo-result[hidden]{display:none}

@media (max-width:420px){
  .demo-types{flex-wrap:wrap}
  .demo-types button{flex:1 0 calc(50% - 3px)}
}

/* Game chips are built from whatever is live, so the row wraps. */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.toolbar .chip:disabled{opacity:.4;cursor:not-allowed}

/* The homepage's console picture says it is a picture. */
.console-demo-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.console-demo-tag{
  padding:2px 8px;border-radius:3px;border:1px solid var(--rule-2);color:var(--ink-4);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.console-demo-note{font-size:12px;color:var(--ink-4);min-width:0}

/* The comparison table pairs a tick with a cross. It used to pair a tick with
   an em dash, which reads as "no value" rather than "not included" and was the
   last em dash left in the interface. */
.compare td.n{color:var(--ink-4);font-size:13px}
.compare td.y{color:var(--success)}

/* The market's next page.

   The directory answers in pages of 24; this is the control that asks for the
   next one. It is hidden unless the directory has said there is more, so it
   never offers something that does not exist. */
.market-more{display:flex;justify-content:center;padding:28px 0 4px}
.market-more button[disabled]{opacity:.55;cursor:default}

/* --------------------------------------------------------------------------
   Phones: things you have to hit with a thumb
   Measured at 375px rather than guessed. The footer's links were 19px tall on
   every page, the listing breadcrumbs the same, and several labels were set at
   9.5px, which is legible on a desktop monitor and not on a phone held at
   arm's length. Nothing is redesigned here; the same elements are given room.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  /* 19px of link in a row of eight is a coin toss with a thumb. */
  .site-footer nav a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
  .footer-row nav{gap:2px 22px}

  .crumbs{gap:6px;font-size:13px}
  .crumbs a{display:inline-flex;align-items:center;min-height:38px}

  /* The smallest labels on a card: the field names and the type chip. */
  .listing-terms dt,.listing-kind,.embed-fields dt{font-size:11.5px}
  .listing-where,.listing-who,.listing-age{font-size:12.5px}

  /* A 25x22 close button is smaller than the fingertip aiming at it. The box
     grows without moving the glyph, which stays where it was drawn. */
  .modal-x{display:grid;place-items:center;width:40px;height:40px;margin:-9px -9px -9px auto}

  /* Filter rows are already full width; they were just short. */
  .market-filters .opt,.filter-block .opt{min-height:42px}

  /* A search field 23px tall is hard to hit and reads as an afterthought.
     The wrapper carries the height so the icon stays centred with the text. */
  .search{min-height:46px}
  .search input{min-height:44px;font-size:16px}

  /* The wordmark is the way back to the homepage, and it was 26px of target. */
  .brand{min-height:44px}

  /* "See all" and "Open the full market" sit beside a heading, so they are the
     one link in that row and were 19px of it. */
  .section-title a,.market-head a{display:inline-flex;align-items:center;min-height:40px}

  /* Saving a listing is a deliberate action taken with a thumb. */
  .save{width:42px;height:42px}

  /* The last of the labels set below 11px. */
  .demo-tag,.console-demo-tag,.hiw-aside-label,.ph span{font-size:11px}

  /* Sort is three narrow buttons in a row: the row is easy to hit, each button
     inside it was not. */
  .tabs .tab{min-height:42px;padding-left:12px;padding-right:12px}

  /* The detail page's own term list, which has its own smaller scale. */
  .detail-terms dt,.terms-list dt{font-size:11.5px}
}

/* --------------------------------------------------------------------------
   Support panel
   The shape of a Discord panel, because that is where DealR lives and where
   the person asking already is.
   -------------------------------------------------------------------------- */
.support{display:grid;gap:22px;max-width:720px;margin:34px 0 0}
.support-panel{border:1px solid var(--rule-2);border-radius:var(--r-panel);background:var(--raise-1);overflow:hidden}
.support-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--rule);font-size:14px;font-weight:650;color:var(--ink)}
.support-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--raise-3);overflow:hidden}
.support-hint{margin-left:auto;padding:2px 8px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-4);font-size:10.5px;font-weight:500;letter-spacing:.03em}
.support-embed{margin:14px 16px 0;padding:11px 14px;border-left:3px solid var(--accent);border-radius:3px;background:var(--raise-2)}
.support-embed p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.support-picks{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px}
.support-picks .dbtn{cursor:pointer;border:0;font:inherit;font-size:13px;font-weight:550}

.support-card{display:grid;gap:14px;padding:clamp(20px,3vw,28px);border:1px solid var(--rule-2);border-radius:var(--r-panel);background:var(--raise-1)}
.support-card h2{margin:0;outline:0}
.support-card p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.support-card code{font-family:var(--f-mono);font-size:13px;padding:2px 6px;border-radius:3px;background:var(--raise-3);color:var(--ink)}
.support-card label{display:grid;gap:6px;font-size:12.5px;color:var(--ink-3)}
.support-card input,.support-card textarea{
  width:100%;padding:11px 13px;border:1px solid var(--rule-2);border-radius:var(--r-control);
  background:var(--raise-2);color:var(--ink);font:inherit;font-size:14px;resize:vertical}
.support-card input:focus,.support-card textarea:focus{outline:0;border-color:var(--accent)}
.support-note{padding:11px 13px;border-radius:var(--r-control);background:var(--raise-2);color:var(--ink-3);font-size:13px}
.support-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.support-status{font-size:13px;color:var(--ink-3)}
.support-status.error{color:var(--accent)}
.support-status a{color:var(--accent);text-decoration:underline}

@media (max-width:820px){
  .support-picks .dbtn{flex:1 1 100%;min-height:44px}
  .support-card input,.support-card textarea{font-size:16px}
  .support-actions .btn{flex:1 1 100%;justify-content:center;min-height:44px}
}