/* ==========================================================================
   SalesZE.com — design system (Walmart-bright consumer theme)
   Owner decisions 2026-08-02: SalesZE wordmark · Inter font · $400/$800 tiers.
   Single source of truth for all hand-authored marketing pages in /www.
   Later: port these tokens into salesze/render/{site,replay}.py so the
   generated marketplace/replay pages match (plan §8 step 6).
   ========================================================================== */

/* Inter — walmart-ish humanist sans for UI/body; Baloo 2 — rounded/chunky for the brand wordmark
   (friendlier, Whatnot-energy). Both degrade to system-ui offline. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* palette */
  --bg:#ffffff;
  --surface:#f6f7f9;        /* section bands / cards-on-white */
  --surface-2:#eef1f5;
  --card:#ffffff;
  --ink:#10151c;            /* near-black text */
  --muted:#5b6470;          /* secondary text */
  --border:#e6e8ec;
  --brand:#1e5eff;          /* friendly bright blue — primary CTA */
  --brand-ink:#0b3ea8;      /* hover/pressed */
  --brand-tint:#eaf1ff;     /* light blue wash */
  --accent:#ffb703;         /* warm amber spark */
  --accent-ink:#8a5b00;
  --live:#e5322d;           /* LIVE badge / live-video motif */
  --ok:#1a7f4b;
  /* type + geometry */
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(16,21,28,.06), 0 8px 24px rgba(16,21,28,.06);
  --shadow-lg:0 12px 40px rgba(16,21,28,.12);
  --maxw:1120px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--muted);line-height:1.55}
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.band{background:var(--surface)}
.band--ink{background:var(--ink);color:#fff}
.band--brand{background:var(--brand);color:#fff}
.center{text-align:center}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.stack>*+*{margin-top:1rem}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  padding:.85em 1.4em;border-radius:999px;border:2px solid transparent;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink);box-shadow:var(--shadow)}
.btn-accent{background:var(--accent);color:#3a2600}
.btn-accent:hover{filter:brightness(.96);box-shadow:var(--shadow)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-white{background:#fff;color:var(--brand)}
.btn-white:hover{box-shadow:var(--shadow)}
.btn-lg{font-size:1.1rem;padding:1em 1.7em}
.btn-block{display:flex;width:100%}

/* ---- badges / chips ------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
.badge--live{background:var(--live);color:#fff}
.badge--live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 .5em rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.badge--new{background:var(--brand-tint);color:var(--brand-ink)}
.chip{display:inline-block;font-size:.85rem;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);padding:.3em .8em;border-radius:999px}

/* ---- grids ---------------------------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Past-sales replays on /live. Sized to match a MARKETPLACE product card's footprint (owner,
   2026-08-27), so the two pages read as one site: ~2 across on desktop rather than the 3 that
   .grid-3 forced, which made a 16:9 player 300px wide in a 960px container.

   ⛔ auto-FILL, NOT auto-FIT, AND THE DIFFERENCE IS THE WHOLE POINT OF THIS RULE.
   auto-fit COLLAPSES the tracks it did not fill, so the one card left stretches across every
   one of them -- a single past sale rendered edge to edge at ~920px no matter what minimum was
   set, which is exactly the bug this rule was rewritten to fix and did not. auto-fill KEEPS the
   empty track, so one sale occupies one ~448px column and the rest of the row stays empty.
   Changing the minmax value cannot fix an auto-fit grid; only the keyword can. .grid-auto, which
   the marketplace uses, has always been auto-fill -- matching it is what makes the footprints agree.

   The MEDIA stays 16:9 and is deliberately NOT the marketplace's 9:16 -- .reelcard__media is
   portrait because a reel is portrait, while an event replay is a landscape YouTube archive.
   Forcing it into a 9:16 box would letterbox roughly 60% of the card black.

   ⚠️ min(380px,100%) and never a bare 380px: a track minimum wider than the container does not
   collapse, it OVERFLOWS, so a bare value breaks the page on a narrow phone. That is also why
   this needs no entry in the breakpoints below, unlike .grid-3/.grid-4. */
.grid-replays{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}

/* ---- cards ---------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
.card--pad-lg{padding:36px}
.card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand);font-size:1.6rem;margin-bottom:16px}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted);margin:0}

/* ---- header / nav (injected by components.js) ----------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:24px;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.brand{font-family:'Baloo 2','Inter',system-ui,sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:.4em}
.brand:hover{text-decoration:none}
.brand .ze{color:var(--brand)}
.brand__logo{height:34px;width:auto;display:block}
.brand__dot{width:.5em;height:.5em;border-radius:50%;background:var(--live);display:inline-block;margin-left:.15em}
.nav__links{display:flex;align-items:center;gap:22px;margin-left:12px}
.nav__links a{color:var(--ink);font-weight:600;font-size:.98rem}
.nav__links a:hover{color:var(--brand);text-decoration:none}
.nav__links a.active{color:var(--brand)}
.nav__spacer{flex:1}
.nav__cta{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
@media(max-width:860px){
  .nav__links{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--border);padding:12px 20px;gap:4px;
    transform:translateY(-140%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .nav__links.open{transform:translateY(0)}
  .nav__links a{padding:12px 4px;border-bottom:1px solid var(--surface)}
  .nav__toggle{display:block}
  .nav .btn-ghost{display:none}
}

/* ---- hero ----------------------------------------------------------------- */
.hero{padding:64px 0 40px;background:
  radial-gradient(1200px 500px at 80% -10%, var(--brand-tint), transparent 60%),
  radial-gradient(900px 400px at 0% 0%, #fff7e6, transparent 55%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1 span.hl{color:var(--brand)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero__trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-weight:600;font-size:.95rem}
.hero__trust span{display:inline-flex;align-items:center;gap:.4em}
.hero__trust .tick{color:var(--ok);font-weight:900}

/* stylized "live frame" placeholder (swap for real event photo) */
.liveframe{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(135deg,#12203f,#1e5eff 60%,#5b8cff);box-shadow:var(--shadow-lg);color:#fff}
.liveframe__tag{position:absolute;top:16px;left:16px}
.liveframe__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;background:linear-gradient(to top,rgba(6,12,28,.72),transparent 55%)}
.liveframe__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  color:var(--brand);font-size:1.9rem;box-shadow:var(--shadow-lg)}
.liveframe__price{font-weight:900;font-size:1.6rem}
.liveframe__meta{opacity:.85;font-size:.9rem}
.liveframe__viewers{position:absolute;top:16px;right:16px;background:rgba(6,12,28,.55);
  padding:.3em .7em;border-radius:999px;font-size:.8rem;font-weight:700}

/* ---- steps ---------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.step{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;margin-bottom:14px}
.step h3{margin-bottom:.3em}
.step p{color:var(--muted);margin:0}

/* ---- pricing -------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px;margin:0 auto}
.tier{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;text-align:center;box-shadow:var(--shadow)}
.tier--feature{border:2px solid var(--brand);position:relative}
.tier__name{font-weight:800;font-size:1.15rem}
.tier__price{font-size:2.8rem;font-weight:900;margin:.1em 0}
.tier__price small{font-size:1rem;font-weight:700;color:var(--muted)}
.tier__meta{color:var(--muted);margin-bottom:18px}
.tier ul{list-style:none;padding:0;margin:0 0 22px;text-align:left}
.tier li{padding:8px 0 8px 28px;position:relative;color:var(--ink)}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}
.pricing-note{max-width:640px;margin:22px auto 0;color:var(--muted);font-size:.92rem;text-align:center}

/* ---- audience ------------------------------------------------------------- */
.audience{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.audience .card{text-align:center;padding:26px 18px}
.audience .card__icon{margin:0 auto 14px}

/* ---- reel / product cards (marketplace reuse) ----------------------------- */
.reelcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease;display:flex;flex-direction:column}
.reelcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.reelcard__media{position:relative;aspect-ratio:9/16;background:linear-gradient(135deg,#1c2330,#2a3550)}
.reelcard__media .badge{position:absolute;top:10px;left:10px}
.reelcard__body{padding:14px 16px 18px}
.reelcard__title{font-weight:700;font-size:1rem;margin:0 0 4px}
.reelcard__price{font-weight:900;color:var(--ink)}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{text-align:center;padding:64px 0}
.cta-band h2{color:inherit}
.cta-band .btn{margin-top:8px}

/* ---- footer --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:#c7ccd3;padding:56px 0 28px;font-size:.95rem}
.site-footer a{color:#c7ccd3}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer__brand .brand{color:#fff}
.footer__brand .brand .ze{color:#7aa2ff}
.footer__col h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.footer__col a{display:block;padding:5px 0}
.footer__bottom{border-top:1px solid #232733;padding-top:20px;color:#9aa0a6;font-size:.85rem;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__disclaimer{max-width:720px;color:#7f8794;font-size:.8rem;margin-top:12px;line-height:1.5}

/* ---- forms (contact / scheduler / onboarding) ----------------------------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.7em .8em;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.field .hint{color:var(--muted);font-size:.85rem;margin-top:4px}
/* ⛔⛔ A CONTROL THAT *CARRIES* .field, NOT ONE THAT SITS INSIDE ONE. The rules above are
   descendant selectors (`.field select`), so every admin filter bar -- which puts class="field"
   on the <select> itself -- matched only `.field{margin-bottom:16px}`, and then killed even that
   with an inline `margin:0`. The result was a raw browser default select with no border, radius,
   padding or focus ring sitting in a styled page. 16 of them across 13 admin pages, all the same
   line copied forward.
   ⛔ width:auto, NOT the 100% the descendant rule sets. These live in flex header rows beside an
   <h1>; inheriting that width would push every filter onto its own full-width line.
   ⭐ The border/padding/radius match `.shop-sort select`, which is the site's own already-correct
   inline select, and the focus ring matches `.field select:focus` so a keyboard user sees the
   same affordance everywhere. The native arrow is kept -- appearance:none would need a bespoke
   chevron and `.shop-sort select` does not use one either. */
select.field,input.field,textarea.field{
  width:auto;font:inherit;font-size:.95rem;padding:.5em .7em;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
select.field:focus,input.field:focus,textarea.field:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- tabbed form (onboarding) --------------------------------------------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:28px}
.tab{padding:11px 18px;border:0;background:none;font:inherit;font-weight:700;color:var(--muted);
  cursor:pointer;border-bottom:3px solid transparent;border-radius:10px 10px 0 0}
.tab:hover{color:var(--ink);background:var(--surface)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab .dot{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:.8rem;margin-right:7px}
.tab.active .dot{background:var(--brand);color:#fff}
.tab.done .dot{background:var(--ok);color:#fff}
.panel{display:none}
.panel.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel h2{font-size:1.35rem}
.panel .sub{color:var(--muted);margin:-.3em 0 20px}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.note-box{background:var(--brand-tint);border:1px solid #cfe0ff;border-radius:var(--radius-sm);padding:12px 16px;font-size:.9rem;color:#0b3ea8;margin-bottom:18px}
.warn-box{background:#fff5f5;border:1px solid #ffd4d1;border-radius:var(--radius-sm);padding:12px 16px;font-size:.9rem;color:#9b1c17;margin:14px 0}
.connect-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.connect-row .field{flex:1;min-width:180px;margin-bottom:0}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0}
.check input{width:auto;margin-top:4px}
.pay-summary{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border)}
.pay-summary .amt{font-size:2rem;font-weight:900}

/* ---- marketplace (browse) ------------------------------------------------- */
.shop{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start}
.filters{position:sticky;top:84px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.filters h4{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.filters h4:first-child{margin-top:0}
.filters label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.95rem;cursor:pointer}
.filters input[type=checkbox],.filters input[type=radio]{width:auto}
.filters .price-row{display:flex;gap:8px;align-items:center}
.filters .price-row input{width:100%;padding:.5em;border:1px solid var(--border);border-radius:8px;font:inherit}
.filters .btn{margin-top:16px}
.shop-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.shop-search{flex:1;min-width:220px;display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:#fff}
.shop-search input{flex:1;border:0;padding:.75em 1.1em;font:inherit;font-size:1rem;outline:none}
.shop-search button{border:0;background:var(--brand);color:#fff;padding:0 1.2em;font-size:1.1rem;cursor:pointer}
.shop-count{color:var(--muted);font-size:.95rem}
.shop-sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--muted)}
.shop-sort select{padding:.5em .7em;border:1px solid var(--border);border-radius:8px;font:inherit;background:#fff}
.reelcard__cond{font-size:.82rem;color:var(--muted);margin-top:2px}
.reelcard__seller{font-size:.8rem;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}
.media-ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.85)}
.media-ph .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--brand);display:grid;place-items:center;font-size:1.3rem}
.demo-banner{background:#fff7e6;border:1px solid #ffe1a6;color:#8a5b00;border-radius:var(--radius);padding:12px 16px;margin-bottom:22px;font-size:.92rem}
.empty-state{text-align:center;padding:64px 20px;color:var(--muted)}

/* ---- product page (PDP, eBay-style, simplified) --------------------------- */
.breadcrumb{color:var(--muted);font-size:.9rem;margin:20px 0 8px}
.breadcrumb a{color:var(--muted)}
.pdp{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:44px;align-items:start;padding:8px 0 24px}
.pdp__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;
  background:linear-gradient(135deg,#1c2330,#2a3550);box-shadow:var(--shadow)}
.pdp__media video,.pdp__media img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__media .badge{position:absolute;top:12px;left:12px;z-index:2}
.pdp__title{font-size:1.7rem;margin:0 0 10px}
.pdp__price{font-size:2.2rem;font-weight:900;color:var(--ink)}
.pdp__price.ask{font-size:1.4rem;color:var(--muted)}
.pdp__meta{margin:14px 0;color:var(--muted)}
.pdp__meta div{padding:3px 0}
.pdp__cta{display:flex;flex-direction:column;gap:10px;margin:22px 0;max-width:360px}
/* .btn sets white-space:nowrap globally, which is right for the short labels everywhere
   else on the site. This CTA carries a whole sentence -- "More information -> see it on
   the seller's store" -- so nowrap made it a single line wider than its own pill, clipped
   at BOTH ends with the first and last words cut in half. Overridden here only, so no
   other button on the site reflows. text-align matters because .btn is inline-flex: without
   it the wrapped second line sits left while the first is centred. */
.pdp__cta .btn{white-space:normal;text-align:center;line-height:1.35}
.pdp__note{font-size:.85rem;color:var(--muted)}
.pdp__desc{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}
.pdp__features{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}
.pdp__features h3{margin:0 0 10px}
.pdp__features ul{margin:0;padding-left:20px}
.pdp__features li{padding:3px 0;color:var(--muted)}
.pdp__counts{display:flex;gap:18px;margin-top:14px;color:var(--muted);font-size:.85rem}
.pdp__counts b{color:var(--ink)}
.related{margin-top:12px}

/* ==========================================================================
   SELLER PORTAL (portal*.html) — added 2026-08-21.
   ⭐ ADDITIVE ONLY. Every class here is prefixed .pt- and nothing above this line was changed,
   so no marketing page can be affected by this block. The portal deliberately has NO design
   system of its own: it uses the tokens, .card, .field, .btn, .badge and .tabs defined above, and
   adds only the things a signed-in area needs that a marketing page does not — a sidebar, a table,
   a file row and an empty state.
   ========================================================================== */

.pt-shell{display:grid;grid-template-columns:236px 1fr;gap:36px;align-items:start;
  max-width:var(--maxw);margin:0 auto;padding:28px 20px 72px}

/* Sidebar nav (injected by portal.js) */
.pt-nav{position:sticky;top:84px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.pt-nav__who{padding:6px 10px 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
.pt-nav__biz{font-weight:800;font-size:.98rem;line-height:1.25;word-break:break-word}
.pt-nav__email{color:var(--muted);font-size:.8rem;word-break:break-all}
.pt-nav a{display:flex;align-items:center;gap:.6em;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--ink);font-weight:600;font-size:.94rem}
.pt-nav a:hover{background:var(--surface);text-decoration:none}
.pt-nav a.active{background:var(--brand-tint);color:var(--brand-ink)}
.pt-nav a .ic{width:1.15em;text-align:center;flex:none}
.pt-nav__out{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.pt-nav__out button{width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:600;
  font-size:.94rem;color:var(--muted);padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer}
.pt-nav__out button:hover{background:var(--surface);color:var(--ink)}

/* Page head */
.pt-head{margin-bottom:22px}
.pt-head h1{font-size:1.75rem;margin-bottom:.15em}
.pt-head p{color:var(--muted);margin:0}

.pt-section{margin-bottom:28px}
.pt-section > h2{font-size:1.15rem;margin-bottom:.6em}

/* Stat row (dashboard) */
.pt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.pt-stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.pt-stat__n{font-size:1.9rem;font-weight:900;line-height:1.1}
.pt-stat__l{color:var(--muted);font-size:.85rem;font-weight:600}

/* File rows — same shape as the .dl-item pattern client-reels.html established */
.pt-event{border:1px solid var(--border);border-radius:var(--radius);background:#fff;
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.pt-event__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:6px}
.pt-event__head h3{margin:0;font-size:1.15rem}
.pt-item{padding:16px 0;border-top:1px solid var(--border)}
.pt-item:first-of-type{border-top:0}
.pt-item__title{font-weight:700;margin-bottom:8px}
.pt-files{display:flex;flex-wrap:wrap;gap:8px}
.pt-file{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;background:#fff;color:var(--ink);
  font-weight:600;font-size:.9rem;text-decoration:none}
.pt-file:hover{border-color:var(--brand);text-decoration:none}
.pt-file .fn{font-weight:400;font-size:.72rem;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.pt-file--gone{opacity:.5}
.pt-rowbtns{display:flex;gap:8px;align-items:center;margin-left:auto}
.pt-linkbtn{background:none;border:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);
  cursor:pointer;padding:4px 6px;border-radius:8px}
.pt-linkbtn:hover{color:var(--brand);background:var(--surface)}
.pt-linkbtn--danger:hover{color:#9b1c17}

/* Simple table (contacts, sessions, charges) */
.pt-table{width:100%;border-collapse:collapse;font-size:.94rem}
.pt-table th{text-align:left;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--border);white-space:nowrap}
.pt-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--surface);vertical-align:middle}
.pt-table tr:last-child td{border-bottom:0}
.pt-wrap{overflow-x:auto}

/* Feedback */
.pt-msg{border-radius:var(--radius-sm);padding:11px 15px;font-size:.92rem;margin:14px 0}
.pt-msg--ok{background:#eaf7ef;border:1px solid #bfe4cd;color:#14603a}
.pt-msg--err{background:#fff5f5;border:1px solid #ffd4d1;color:#9b1c17}
.pt-msg--info{background:var(--brand-tint);border:1px solid #cfe0ff;color:#0b3ea8}
.pt-empty{text-align:center;padding:44px 20px;color:var(--muted);
  border:1px dashed var(--border);border-radius:var(--radius)}
.pt-hint{color:var(--muted);font-size:.85rem}

/* Media preview */
.pt-preview{max-width:340px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface)}
.pt-progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:10px 0}
.pt-progress span{display:block;height:100%;background:var(--brand);width:0;transition:width .3s ease}

/* The seller's own logo, top of the sidebar on every page. Bounded by HEIGHT rather than width so a
   wide wordmark and a square badge both sit on the same baseline instead of one of them dwarfing
   the nav. Only ever rendered when they actually uploaded one (portal.js). */
.pt-nav__logo:not(:empty){margin-bottom:10px}
.pt-nav__logo img{display:block;max-width:100%;max-height:64px;width:auto;
  border-radius:var(--radius-sm)}

/* Read-back of details we already hold (the booking form's "Booking as" block). A definition list
   because that is what it is - these are values being CONFIRMED, not fields being entered. */
.pt-kv{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0}
.pt-kv dt{color:var(--muted);font-size:.85rem;font-weight:600}
.pt-kv dd{margin:0;font-weight:600;word-break:break-word}

/* A control this deployment cannot honour yet (Portal.disableUnavailable). Reads as switched off
   rather than as broken, and keeps a cursor that says "not now" instead of "click me". */
.pt-shell button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

@media(max-width:860px){
  .pt-shell{grid-template-columns:1fr;gap:20px;padding-top:18px}
  .pt-nav{position:static}
  .pt-nav__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px}
  .pt-nav__logo img{max-height:52px}
}

/* ---- portal on a phone ------------------------------------------------------------------------
   ⛔ A 5-COLUMN TABLE DOES NOT BECOME READABLE BY BEING SCROLLABLE. .pt-wrap's overflow-x keeps the
   layout from breaking, which is not the same as the seller being able to read their own charges on
   the device they actually carry. At this width the rows STACK into cards and each cell grows its
   own label out of `data-label`, so nothing is hidden and nothing scrolls sideways.
   ⚠️ The label text lives in the markup, not here: a <td> with no data-label stacks with a blank
   label rather than silently losing its meaning, so a new column has to opt in deliberately. */
@media(max-width:560px){
  .pt-head h1{font-size:1.45rem}
  .pt-nav__links{grid-template-columns:1fr 1fr}

  /* 16px is the threshold below which iOS Safari zooms the page on focus, which then leaves the
     seller scrolled sideways in a form they were halfway through. */
  .pt-shell input,.pt-shell select,.pt-shell textarea{font-size:16px}
  .pt-shell input[type=file]{max-width:100%}

  .pt-kv{grid-template-columns:1fr;gap:2px 0}
  .pt-kv dd{margin-bottom:10px}
  .pt-preview{max-width:100%}
  .pt-event__head{flex-wrap:wrap;gap:4px}
  .pt-rowbtns{margin-left:0}

  .pt-table--stack thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pt-table--stack tr{display:block;border:1px solid var(--border);border-radius:var(--radius);
    background:#fff;padding:12px 14px;margin-bottom:10px}
  .pt-table--stack td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:5px 0;border:0;text-align:right}
  .pt-table--stack td::before{content:attr(data-label);flex:none;text-align:left;color:var(--muted);
    font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
  .pt-table--stack td:empty{display:none}
  .pt-table--stack tr:last-child td{border-bottom:0}
}

/* ---- responsive ----------------------------------------------------------- */
@media(max-width:860px){
  .shop{grid-template-columns:1fr}
  .filters{position:static}
  .pdp{grid-template-columns:1fr;gap:24px}
  .pdp__media{max-width:360px;margin:0 auto}
}
@media(max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .grid-4,.audience{grid-template-columns:repeat(2,1fr)}
  .grid-3,.steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .section{padding:52px 0}
  .grid-2,.grid-4,.audience,.tiers,.field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}