/* E-commerce landing page (landing/new_ui/sellers.html). Tokens from desk.css; shared parts from
   site-pages.css. The page's design is the home page's, so home.css is loaded with it and <main>
   carries .home; this file holds only what belongs to this page: the header over its hero, the
   hero artwork, the marketplace rows, the capability matrix and the savings calculator. */

/* ── Header over the hero ──────────────────────────────────────────────────────────────────────
   home.css does this for body[data-page="index"]; the same two rules for this page, so the hero
   grid and the lit blobs show through the header until home-sections.js adds .is-stuck on the
   first scroll. This file loads before site-chrome.css, so the body[data-page] prefix is what
   outweighs the plain .sc-header there rather than the load order. */
body[data-page="seller_hub"] .sc-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; }
body[data-page="seller_hub"] .sc-header.is-stuck { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--border); box-shadow: 0 10px 26px -22px rgba(10,29,41,.6); }
@media (prefers-reduced-motion: reduce) { body[data-page="seller_hub"] .sc-header { transition: none; } }

/* ── Hero ──────────────────────────────────────────────────────────────────────────────────────
   The crumbs sit at the top of the hero's own column, so the backdrop still starts at the top of
   the page instead of below a separate breadcrumb row. */
.hub .hh .crumbs { padding: 0 0 12px; }

/* The headline is three lines here, not the home page's two; home.css staggers the second one, so
   the third follows it at the same step. */
.hub .hh h1 .ln:nth-child(3) > span { animation-delay: .2s; }

/* The artwork, in the same browser shell as the home page's crop demo (.hd, from home.css): the
   panel PDF with its label area marked, the labels that come out of it, and the courier stacks
   they are sorted into along the bottom. */
.hub-art { min-width: 0; }
/* The faint grid under the artwork is the hero backdrop's, at a size that suits a card */
.hub-art__body { display: grid; grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr); gap: 12px; align-items: center; padding: 18px 16px; background-color: var(--surface-alt); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.hub-art__side { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.hub-art__cap { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hub-art__dim { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }

/* The depicted sheet keeps its paper palette in both themes, the way the home page's does */
.hub-art__sheet { position: relative; width: 100%; max-width: 128px; border-radius: 3px; overflow: hidden; background: var(--hd-paper); box-shadow: 0 18px 34px -20px rgba(3,61,99,.55); }
.hub-art__sheet svg { display: block; width: 100%; height: auto; }
.hub-art__sheet svg text { font-family: var(--font); }
/* The label is the top 4.6-121.7 mm of the A4 page, so the marked area is 1.5% to 41% of it. The
   wide spread shadow dims the rest of the sheet; .hub-art__sheet clips it to the paper. */
.hub-art__crop { position: absolute; left: 2%; top: 1.5%; width: 96%; height: 39.4%; border: 1.2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(10,29,41,.4); }
.hub-art__size { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--badge-text); font-size: 8px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }

.hub-art__flow { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-primary); box-shadow: 0 6px 16px -8px rgba(3,61,99,.7); }
.hub-art__flow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Three labels fanned down the square: each is 58% of it tall, so steps of 21% leave the pile
   exactly as tall as it is wide. */
.hub-art__stack { position: relative; width: 100%; max-width: 232px; aspect-ratio: 1 / 1; }
.hub-art__lbl { position: absolute; left: 0; width: 100%; aspect-ratio: 202 / 118; border-radius: 4px; overflow: hidden; background: var(--hd-paper); border: 1px solid var(--border); box-shadow: 0 16px 30px -20px rgba(3,61,99,.6); }
.hub-art__lbl svg { display: block; width: 100%; height: auto; }
.hub-art__lbl svg text { font-family: var(--font); }
/* They come out of the sheet one after another, so they arrive that way too */
.hub-art__lbl:nth-child(1) { top: 0; transform: rotate(-2.4deg); animation: hub-deal .5s .25s cubic-bezier(.2,.85,.25,1) backwards; }
.hub-art__lbl:nth-child(2) { top: 21%; transform: rotate(1.4deg); animation: hub-deal .5s .4s cubic-bezier(.2,.85,.25,1) backwards; }
.hub-art__lbl:nth-child(3) { top: 42%; transform: rotate(-.8deg); animation: hub-deal .5s .55s cubic-bezier(.2,.85,.25,1) backwards; }
@keyframes hub-deal { from { opacity: 0; transform: translate(-16px, -14px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .hub-art__lbl { animation: none; } }

.hub-art__foot { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-top: 1px solid var(--border); background: var(--border); }
.hub-art__foot li { display: grid; gap: 1px; justify-items: center; padding: 9px 4px; background: var(--surface); }
.hub-art__foot span { font-size: var(--fs-caption); color: var(--text-muted); }
.hub-art__foot b { font-size: var(--fs-label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* The stack the artwork above is showing */
.hub-art__foot .is-on { background: var(--primary-soft); }
.hub-art__foot .is-on span { color: var(--primary-text); font-weight: var(--fw-semibold); }
.hub-art__foot .is-on b { color: var(--primary-text); }

/* ── Sections ──────────────────────────────────────────────────────────────────────────────────
   The section heads are the home page's centred ones (.tools__head), so their lead centres too. */
.hub .tools__head .section-lead { margin-left: auto; margin-right: auto; }

/* The tool picker: the home page's tool rows, with each tool's own logo in place of the tool icon
   and the quick-crop note always showing rather than only on hover. The category pills and the
   search box are home.css's .segs and .tfind, driven by home-sections.js. */
.toollist--brands .toolrow__icon--img { background: #fff; border: 1px solid var(--border); }
.toollist--brands .toolrow__icon img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.toollist--brands .toolrow__tag { opacity: 1; }
.toolrow__tag--new { color: var(--primary-text); background: var(--primary-soft); }
/* The counts on the category pills read as a count, not as part of the name */
.hub .seg { display: inline-flex; align-items: center; gap: 7px; }
.hub .segs { margin-bottom: 2px; }

/* ── What you get back ─────────────────────────────────────────────────────────────────────────
   home.css's .facts is a narrow side column; given a section of its own the list becomes cards
   across the page, with the icon large enough to carry the line. */
/* Six rows with the icon in front of the words read as a list to skim past; with the icon over
   them they read as six things you get, three to a row, and they lift under the pointer the way
   the tool rows above them do. */
.facts--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.facts--cards li { flex-direction: column; align-items: flex-start; gap: 13px; padding: 18px 19px 19px; border-radius: var(--r-lg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.facts--cards li:hover { border-color: var(--primary-soft-border); box-shadow: 0 1px 2px rgba(10,29,41,.05), 0 18px 36px -26px rgba(3,61,99,.5); transform: translateY(-2px); }
.facts--cards .facts__icon { width: 44px; height: 44px; border-radius: 14px; }
.facts--cards .facts__icon svg { width: 21px; height: 21px; }
.facts--cards b { font-size: var(--fs-body-lg); letter-spacing: -.01em; }
.facts--cards small { margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .facts--cards li:hover { transform: none; } }

/* ── Capability matrix ─────────────────────────────────────────────────────────────────────────
   Ten setting columns do not fit a phone, so the table scrolls sideways inside .table. The
   marketplace column is pinned to the left edge while it does, or the ticks lose the row they
   belong to; each pinned cell needs its own opaque background for every row state the table has. */
.hub-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0 2px 10px; font-size: var(--fs-label); color: var(--text-muted); }
.hub-key__item { display: inline-flex; align-items: center; gap: 7px; }
.hub-key__yes { width: 19px; height: 19px; border-radius: 50%; background: var(--success-soft); display: grid; place-items: center; }
.hub-key__yes svg { width: 11px; height: 11px; fill: none; stroke: var(--success-text); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hub-key__no { width: 19px; height: 19px; border-radius: 50%; border: 1px dashed var(--border-strong); }
.hub-key__scroll { margin-left: auto; font-size: var(--fs-small); color: var(--text-faint); }
@media (min-width: 981px) { .hub-key__scroll { display: none; } }

.hub-matrix { margin-bottom: 18px; }
.hub-matrix table { min-width: 900px; }
.hub .hub-matrix th { font-size: var(--fs-small); white-space: normal; line-height: 1.25; }
/* Eleven columns do fit a desktop column once they share it equally and the headings are allowed
   to wrap - so above the breakpoint the whole table is on screen and nothing has to be scrolled
   to; below it the min-width comes back and .table scrolls as before. */
@media (min-width: 981px) {
  .hub-matrix table { min-width: 0; table-layout: fixed; }
  .hub-matrix th:first-child { width: 148px; }
  .hub .hub-matrix thead th { padding: 9px 6px; }
}
.hub .hub-matrix thead th { vertical-align: bottom; }
/* The name column stays put while the settings scroll past it */
.hub-matrix th:first-child { position: sticky; left: 0; z-index: 2; }
.hub-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 0 10px 0 14px; height: 40px; font-weight: var(--fw-semibold); border-bottom: 1px solid var(--grid); }
.hub-matrix tbody tr:nth-child(even) th { background: var(--surface-alt); }
.hub-matrix tbody tr:hover th { background: var(--primary-soft); }
.hub-matrix tbody tr:last-child th { border-bottom: none; }
.hub-matrix th:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--border); }
/* A tick in a soft disc reads at a glance across ten columns; a plain dash did not */
.hub-matrix td.yes svg { width: 12px; height: 12px; fill: none; stroke: var(--success-text); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hub-matrix td.yes svg { padding: 4px; box-sizing: content-box; border-radius: 50%; background: var(--success-soft); }
.hub-matrix td.no i { display: inline-block; width: 19px; height: 19px; border-radius: 50%; border: 1px dashed var(--border-strong); vertical-align: middle; }
.hub-matrix__name { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; white-space: nowrap; }
.hub-matrix__name img { width: 20px; height: 20px; border-radius: 5px; background: #fff; }
.hub-matrix__name:hover { color: var(--primary-text); }
/* Note under the capability matrix (replaces the twelve per-marketplace cards, 2026-10-17) */
.hub-matrix__note { margin: 2px 2px 0; font-size: var(--fs-label); color: var(--text-muted); }

/* With the facts moved out, the slider section is two columns: the words, then the slider. */
.hub .wipe-sec__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; }
.hub .wipe-sec__copy { grid-column: auto; }
@media (max-width: 900px) { .hub .wipe-sec__grid { grid-template-columns: minmax(0, 1fr); } }

/* The tool list takes focus when something jumps to it; no ring needed for a mouse click */
.hub #tools:focus { outline: none; }
.hub #tools:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-lg); }

/* The matrix takes focus when the slider section's second button jumps to it; no ring for a click */
.hub #marketplaces:focus { outline: none; }
.hub #marketplaces:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-lg); }

/* ── Savings calculator ────────────────────────────────────────────────────────────────────────
   Two halves of one card: what it works out and the quick picks on the left, the number you can
   move and what it comes to on the right. It sits in a section of its own, so no margin here.
   site-pages.css loads before this file but its .calc rules are one class deep, including the one
   inside its own media query - hence the .hub prefix on all of these, and a media query of our
   own for the narrow layout. */
.hub .calc { margin-top: 0; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 34px); padding: clamp(20px, 2.6vw, 30px); align-items: center; background: radial-gradient(120% 140% at 0% 0%, var(--primary-soft), transparent 62%), var(--surface); }
.hub .calc h2 { margin-top: 12px; font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--fw-bold); letter-spacing: -.025em; margin-bottom: 0; }
.hub .calc__copy p { margin-top: 10px; max-width: 44ch; }

/* Quick picks: the usual order counts, so the card can be read without typing anything */
.calc__presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.calc__chip { height: 31px; padding: 0 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.calc__chip:hover { border-color: var(--primary); color: var(--primary-text); }
.calc__chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }

.hub .calc__form { gap: 15px; }
.calc__field { display: grid; gap: 7px; }
.calc__input { position: relative; display: flex; align-items: center; }
.hub .calc__form .input { height: 50px; padding-right: 108px; font-size: 22px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.calc__unit { position: absolute; right: 14px; font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-faint); pointer-events: none; }

/* The track fills to where the handle is (--fill, set by the page's own script) */
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 2px 0 4px; border-radius: 3px; background: linear-gradient(90deg, var(--primary) var(--fill, 10%), var(--border) var(--fill, 10%)); cursor: pointer; }
.calc__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); box-shadow: 0 5px 12px -5px rgba(10,29,41,.7); cursor: grab; }
.calc__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); box-shadow: 0 5px 12px -5px rgba(10,29,41,.7); cursor: grab; }

.hub .calc__stat { padding: 15px 16px; }
.calc__stat-i { width: 28px; height: 28px; margin-bottom: 8px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.calc__stat-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub .calc__stat b { font-size: clamp(24px, 3vw, 31px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.calc__note { font-size: var(--fs-small); color: var(--text-faint); line-height: 1.45; }

@media (max-width: 960px) { .hub .calc { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Past the hero's own breakpoint the column is the whole width, so the artwork keeps a sane
   size in the middle of it rather than stretching with a lot of paper around nothing. */
@media (max-width: 1000px) { .hub-art { width: 100%; max-width: 520px; margin-inline: auto; } }
/* The browser bar the artwork borrows from home.css holds a nowrap URL and a nowrap pill, and a
   flex item's default min-width is its own min-content - so on a phone the pair of them were wider
   than the screen and pushed the whole hero sideways. The URL may shrink to an ellipsis here, and
   the count pill, which only decorates, steps out. */
@media (max-width: 520px) {
  .hub-art .hd__url { min-width: 0; flex-shrink: 1; text-overflow: ellipsis; }
  .hub-art .hd__bar .pill { display: none; }
}

/* On a phone the sheet would be too small to read as a page, so the two halves stack and the
   arrow turns to point down the column. */
@media (max-width: 420px) {
  .hub-art__body { grid-template-columns: 1fr; gap: 10px; }
  .hub-art__sheet { max-width: 150px; }
  .hub-art__flow { transform: rotate(90deg); }
  .hub-art__foot { grid-template-columns: repeat(2, 1fr); }
}


/* ── Screens ───────────────────────────────────────────────────────────────────────────────────
   What follows is the whole page read at each width: desktop (the 1180px column), laptop, tablet
   and phone. The parts that already carry their own breakpoints - the hero (home.css, one column
   below 1000px), the tool rows, the fact cards, the slider section and the calculator - are left
   to them; these are the places where something actually broke or crowded. Layout only: every
   control, link and script hook is untouched. */

/* The depicted A4 page is sized by the height it has, not by the width of the box. At 48% of the
   width it came out 297/210 of that - taller than the frame at every size - so the top and the
   bottom of the sheet were clipped off. The label beside it already fits and is left alone. */
.hub .wipe__sheet { width: auto; height: 100%; aspect-ratio: 210 / 297; }
.hub .wipe__sheet > svg { width: 100%; height: 100%; }

/* ── Laptop ─────────────────────────────────────────────────────────────────────────────────── */
/* Between the hero's breakpoint and the full column the two hero halves are at their narrowest,
   so the gap between them comes in rather than the words. */
@media (min-width: 1001px) and (max-width: 1120px) {
  .hub .hh { gap: 26px; }
  .hub .hub-art__body { padding: 16px 12px; }
}

/* ── Tablet ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* The hero artwork is centred under the words by now; the matrix and the tool rows keep their
     own rules. Only the head of each section needs the room back. */
  .hub .tools__head { margin-bottom: 20px; }
  .hub .tools__head .section-lead { font-size: var(--fs-body); }
}

/* ── Phone ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Four category pills wrap into three rows and read as a block of text. Past this width they
     stay on one line and the strip scrolls sideways, the way the Desktop App's tabs do. */
  .hub .segs { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hub .segs::-webkit-scrollbar { display: none; }
  .hub .seg { flex: 0 0 auto; scroll-snap-align: start; }
  .hub .tfind { margin-top: 12px; }
  /* The quick picks and the figures are the width of the card now, not of a column beside it */
  .hub .calc { padding: 18px 16px; }
  .hub .calc__form .input { height: 46px; padding-right: 96px; font-size: 20px; }
}

@media (max-width: 420px) {
  /* Two figures side by side leave about 110px each for a number that can reach seven characters */
  .hub .calc__out { grid-template-columns: minmax(0, 1fr); }
  .hub .calc__stat { display: flex; align-items: center; gap: 12px; }
  .hub .calc__stat-i { margin-bottom: 0; }
  .hub .calc__stat b { font-size: 26px; }
  .hub .calc__stat span { margin-left: auto; text-align: right; }
}