/* =====================================================================
   BuyMyVenture - Shared CSS
   Extracted from duplicated inline <style> blocks across pages so the
   browser can cache one stylesheet instead of re-downloading identical
   CSS on every page. Page-specific rules (colors/spacing that differ
   per page) were deliberately left inline - only genuinely identical
   rules were moved here.

   NOTE ON DESIGN TOKENS: each page still defines its own :root custom
   properties inline (--paper, --ink, --text-dark, etc). Those were NOT
   extracted because their values genuinely differ page to page
   (dark-theme pages vs light-theme pages redefine the same token
   names to different colors). The rules below reference those tokens
   via var(), so they render correctly on every page regardless of
   that page own color values.
   ===================================================================== */

/* ===================================================================
   BASE RESET
   NOTE: h1-h4 and body are deliberately NOT extracted here - although
   several pages share an identical rule, other pages (e.g. index.html)
   define a genuinely different rule for the same selector (different
   font-family/line-height for h1-h4; different background/font-size
   for body). Extracting would leak the shared properties those pages
   do not redeclare (e.g. index would gain the shared serif heading
   font it deliberately does not use). Left inline everywhere.
   =================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ===================================================================
   GLOBAL CUSTOM SCROLLBAR
   The plain OS/browser scrollbar (thick, square, high-contrast grey)
   was the one un-themed element left on every scrollable panel site-
   wide — most visible on the profile page's Sectors/Cities dropdowns,
   but it's the same default anywhere content overflows (a couple of
   pages, e.g. admin-dashboard.html, already had their own copy of this
   exact rule; that page-local one still wins there via normal cascade
   order, this just covers every OTHER page that never had one).

   --line is the most common "subtle divider" token across this site's
   :root blocks and is already correctly themed per page (a light hex on
   dark pages, a dark hex on light pages) — reused here instead of a
   fixed color so the scrollbar always reads correctly against whichever
   theme the current page actually uses. Pages that don't define --line
   fall back through --ink-4, then --ink-3 (profile.html/checkout.html's
   own darkest surface tokens), then a neutral, theme-agnostic grey.
   =================================================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line, var(--ink-4, var(--ink-3, rgba(127, 127, 127, .5))));
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--buy, var(--sell, rgba(127, 127, 127, .75)));
}

/* html/body repeated explicitly, not just relying on the bare selector
   above — 34 of this site's pages run applyFullscreenZoom() (a
   document.documentElement.style.zoom hack that scales the whole page up
   to 1.6x to fill tall viewports). Confirmed live: the page-level
   scrollbar on a zoomed page fell back to the browser's plain native
   scrollbar instead of picking up the styling above, while index.html
   (no zoom hack) showed it correctly — a known Chromium quirk where the
   non-standard `zoom` property can make the outermost window scrollbar
   stop respecting ::-webkit-scrollbar on the bare universal selector.
   Targeting html/body directly is the standard, more reliable way to
   pin the document-level scrollbar's styling regardless of that. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--line, var(--ink-4, var(--ink-3, rgba(127, 127, 127, .5))));
  border-radius: 100px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--buy, var(--sell, rgba(127, 127, 127, .75)));
}

/* Firefox has no ::-webkit-scrollbar-* support — this is its equivalent
   (thumb color, track color), same token fallback chain as above. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line, var(--ink-4, var(--ink-3, rgba(127, 127, 127, .5)))) transparent;
}

/* ===================================================================
   GLOBAL CUSTOM CHECKBOX
   Same reasoning as the scrollbar above: buyer-portal.html's browse-page
   filters (.check-item) and profile.html's Sectors/Cities chips
   (.check-chip) already got a real, hand-drawn checkbox — appearance:none
   plus a drawn box/checkmark, instead of the plain OS square accent-color
   alone leaves behind. Every OTHER plain checkbox site-wide (e.g. the
   deal-stage pages' "CA report reviewed / Legal report reviewed /
   Licensing checked" checks) never got that treatment and still rendered
   as that same bare square. This is the same fix as a sane global
   default instead of a one-off per page.

   .check-item/.check-chip's own more specific per-page rules (same
   technique, slightly different sizing/checkmark color tuned for their
   own layout) still win wherever they're already defined — this only
   fills in everywhere nothing more specific exists yet.
   =================================================================== */

/* !important on the geometry/appearance properties only, deliberately —
   some mobile browsers / OS-level "force dark mode" engines re-skin
   native checkboxes with their own injected style (a big rounded green
   Material-style pill, exactly what was reported live), which otherwise
   silently wins over a plain, non-important custom rule since it's
   injected by the browser itself, not the page's own cascade. This is
   the same reasoning buyer-portal.html's original .check-item comment
   already flagged for this exact codebase ("most visible under a forced
   dark-mode renderer, which specifically leaves native form controls
   unthemed") — appearance:none alone wasn't always enough to guarantee
   that override loses. */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--line, var(--ink-4, var(--ink-3, rgba(127, 127, 127, .6))));
  background: transparent;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease;
}

input[type="checkbox"]:hover {
  border-color: var(--buy, var(--sell, rgba(127, 127, 127, .9)));
}

input[type="checkbox"]:checked {
  background: var(--buy, var(--sell, #2BC48F));
  border-color: var(--buy, var(--sell, #2BC48F));
}

/* A real checkmark glyph (SVG, rounded line caps/joins) instead of the
   classic CSS "rotate a bottom+right border" trick — that technique
   draws a sharp-cornered box-shaped border, not an actual tick, and at
   this small size (needs to work at 17-18px) it reads as a thick, blocky
   "L" rather than a check — reported live as looking unprofessional.
   This is how most polished component libraries (Stripe, Linear,
   shadcn/ui) actually draw a checked checkbox: a thin, round-capped
   stroke path, centered and scaled inside the box, not built out of
   border edges. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--buy, var(--sell, #2BC48F));
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ===================================================================
   NUMBER INPUT — real custom stepper, not just a hidden native one
   The browser's default spin-button can't be restyled with CSS beyond
   hide/show — there's no way to redraw its arrows in the site's own
   colors the way the checkbox above was. So this hides the native one
   and js/number-stepper.js draws a real, working replacement: it wraps
   every input[type="number"] in .num-stepper and injects two actual
   buttons (▲/▼) that increment/decrement respecting that field's own
   min/max/step — same functionality as the native control, this site's
   own look. See that file for the JS half of this.
   =================================================================== */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.num-stepper {
  position: relative;
  display: block;
  width: 100%;
}

/* !important on padding-right only — guarantees room for the buttons
   regardless of whatever padding shorthand a given page's own input
   styling already declares (several deal-stage pages set a 4-side
   `padding: 10px 13px` at the same selector specificity this rule ties
   with; without this, typed digits could render underneath the
   buttons). Every other padding side, and the input's own colors/
   border/font, are left completely alone — this only reserves space. */
.num-stepper input[type="number"] {
  padding-right: 34px !important;
  box-sizing: border-box;
  /* Wrapping the input in .num-stepper (number-stepper.js) demotes it
     from a direct child of .field-group (display:flex — its direct
     children stretch to fill by default) to a grandchild, one level
     inside the new wrapper. Without an explicit width here it falls back
     to auto/content-sized, leaving it narrower than the now-full-width
     .num-stepper wrapper — the up/down buttons (position:absolute inside
     that wrapper) then render detached out past the input's own visible
     right edge instead of sitting snug against it. */
  width: 100%;
}

.num-stepper-btns {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 0;
}

.num-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(127, 127, 127, .16);
  color: var(--text-mid, var(--muted, #96A49E));
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.num-stepper-btn:hover {
  background: var(--buy, var(--sell, #2BC48F));
  color: #fff;
}

.num-stepper-btn:active {
  transform: scale(.92);
}

.num-stepper-btn:focus-visible {
  outline: 2px solid var(--buy, var(--sell, #2BC48F));
  outline-offset: 1px;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

button, input, select {
  font: inherit;
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ===================================================================
   LAYOUT
   =================================================================== */

.wrap {
  width: 100%;
  /* min(var(--wrap), 100%), not just var(--wrap) — defensive: .wrap
     measured a few px wider than the actual viewport on sign-loi.html
     specifically (confirmed live — every real child was correctly
     sized to fit .wrap, .wrap itself was the one running past the
     edge). No overflow:clip here on purpose — .wrap is this site's
     most widely reused container, including under dropdown/menu panels
     that deliberately render outside its box; clipping it would break
     those everywhere instead of fixing one page's few-px rounding
     quirk. */
  max-width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ===================================================================
   NAVIGATION
   NOTE: .nav-shell and .nav-right are deliberately NOT extracted -
   buyer-dashboard.html and checkout.html (among others) define these
   with different values (missing a transition, different gap/margin)
   which would leak the missing shared properties onto those pages.
   =================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 14px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ===================================================================
   MOBILE MENU / ACCOUNT DROPDOWN
   NOTE: .menu-panel and .burger (base, non-hover/non-media) are
   deliberately NOT here even though several pages share an identical
   definition - other pages define them with a partial/different rule
   (missing some properties shared.css would otherwise contribute, or
   with a genuinely different z-index/margin-left/position), which
   would leak extra styling onto those pages via the cascade. Left
   inline everywhere to avoid that. See report for details.
   =================================================================== */

.menu {
  position: relative;
}

/* Real bug, found via a real mobile audit: .menu-panel is `position:
   absolute; left:0; width:220px` on every page (the one property that IS
   identical everywhere, unlike the rest of that rule — see the NOTE
   above). Anchoring at the trigger's own left edge is fine when the
   trigger sits near the left of the screen (the account menu, already
   given its own right:0 override inline per page), but "My deals ▾" sits
   further right in the nav — on a narrow phone a 220px panel starting
   there runs straight off the right edge, confirmed live (menu items cut
   off mid-word). !important because every page's own inline .menu-panel
   rule (via id, e.g. #userMenuPanel) or plain class rule loads AFTER this
   shared sheet and would otherwise win on source order alone; this is a
   correction that needs to always apply on narrow screens regardless of
   which specific menu it is. Doesn't touch anything already right-
   anchored (right:0 either way), only fixes the ones that weren't. */
@media (max-width: 480px) {
  .menu-panel {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 24px);
  }
}

.menu.open .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: #EDF3F0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  text-decoration: none;
}

.menu-panel a:hover {
  background: rgba(255, 255, 255, .06);
}

.menu-panel .tag {
  font-size: 12px;
  color: #6B7873;
  font-family: inherit;
  background: transparent;
  border: none;
  letter-spacing: normal;
  padding: 0;
  text-transform: none;
}

.menu-sep {
  height: 1px;
  background: var(--ink-3);
  margin: 7px 10px;
}

.burger span+span {
  margin-top: 5px;
}

.logo-mark {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--ink-3);
  color: var(--text-hi);
  background: transparent;
}

.btn-ghost:hover {
  border-color: #2E5477;
  background: rgba(255, 255, 255, .05);
}

.btn-buy {
  background: var(--buy);
  color: #fff;
}

.btn-buy:hover {
  background: var(--buy-deep);
}

.btn-solid {
  background: #fff;
  color: var(--ink);
}

.btn-solid:hover {
  background: #EDF3FA;
}

.btn-sell {
  background: var(--sell);
  color: #fff;
}

.btn-sell:hover {
  background: var(--sell-deep);
}

/* ===================================================================
   FOOTER
   NOTE: .foot and .foot h5 are deliberately NOT extracted - index.html
   defines these with different/fewer properties (no color on .foot;
   no text-transform on .foot h5), which would leak the missing shared
   properties onto index.html's footer. Left inline everywhere.
   =================================================================== */

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 38px;
}

.foot-brand p {
  margin-top: 16px;
  font-size: 14px;
  max-width: 30ch;
  line-height: 1.6;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.foot ul a {
  font-size: 14px;
  transition: color .2s;
}

.foot ul a:hover {
  color: #fff;
}

.foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-3);
  font-size: 13px;
  color: var(--text-low);
}

.foot-bar a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================================================================
   NAVIGATION - responsive (below 1020px)
   NOTE: .nav-links and .burger media overrides are deliberately NOT
   here even though identical on several pages - their BASE (non-media)
   rules are page-specific and stay inline (see NAVIGATION note above).
   Moving only the override here would put it earlier in the cascade
   than the page's own un-migrated base rule, flipping which one wins
   and breaking the mobile nav collapse. Confirmed via testing - see
   report. Only .nav-cta (whose base IS fully shared above) is safe.
   =================================================================== */

@media (max-width: 1020px) {
  .nav-cta {
    margin-left: 0;
  }
}
/* ===================================================================
   SELL-YOUR-BUSINESS ONBOARDING FORM
   This multi-step form widget (step nav, form fields, partner cards,
   upload zone, pricing/preview, success state) is embedded
   byte-identically on seller-portal.html, seller-dashboard.html and
   contact-us.html. Extracted as a unit since it is one component,
   not the base design system - kept as its own section so it is
   easy to find/remove later if the widget is ever consolidated.
   =================================================================== */

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.listing-section {
  padding-block: 60px;
}

.form-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

.form-nav {
  position: sticky;
  top: 100px;
}

.form-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.form-panel {
  display: none;
}

.form-panel.active {
  display: block;
}

.form-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  margin-bottom: 24px;
}

.form-card h2 {
  font-size: 24px;
  margin-bottom: 6px;
}

.form-card .form-desc {
  font-size: 15px;
  color: var(--text-dark-mid);
  margin-bottom: 28px;
  line-height: 1.6;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field-grid.full {
  /* minmax(0,1fr) — .field-grid.full (two classes) is more specific
     than the mobile-only `.field-grid { grid-template-columns:
     minmax(0,1fr) }` rule below, so it kept winning even on mobile and
     the Address field (which uses this variant) was still overflowing
     its card after that fix. Same root cause, same fix, just needed
     here too since specificity doesn't care which media query a rule
     sits in. */
  grid-template-columns: minmax(0, 1fr);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-group label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
}

.hint {
  font-size: 12.5px;
  color: var(--text-low);
}

.field-input {
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
  color: var(--text-dark);
}

.field-input:focus {
  outline: none;
  border-color: var(--sell);
  box-shadow: 0 0 0 3px rgba(43, 196, 143, .12);
}

.field-input::placeholder {
  color: var(--text-low);
}

.field-select {
  padding: 13px 36px 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  color: var(--text-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B819A' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .2s;
}

.field-select:focus {
  outline: none;
  border-color: var(--sell);
}

.field-textarea {
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: var(--paper);
  resize: vertical;
  min-height: 110px;
  color: var(--text-dark);
  transition: border-color .2s;
}

.field-textarea:focus {
  outline: none;
  border-color: var(--sell);
  box-shadow: 0 0 0 3px rgba(43, 196, 143, .12);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-item {
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 13.5px;
  color: var(--text-dark-mid);
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}

.chip-item.selected {
  border-color: var(--sell);
  color: var(--sell-deep);
  background: rgba(43, 196, 143, .07);
}

.chip-item:hover {
  border-color: rgba(43, 196, 143, .4);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-item {
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 13.5px;
  color: var(--text-dark-mid);
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}

.radio-item.selected {
  border-color: var(--sell);
  color: var(--sell-deep);
  background: rgba(43, 196, 143, .07);
}

.radio-item:hover:not(.selected) {
  border-color: rgba(43, 196, 143, .4);
}

.form-section-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sell);
  margin: 28px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.partner-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  position: relative;
}

.partner-card+.partner-card {
  margin-top: 16px;
}

.partner-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.partner-card-head h4 {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.partner-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-low);
  font-size: 13px;
  transition: color .2s;
}

.partner-remove:hover {
  color: #ef4444;
}

.add-partner-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 100px;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--text-mid);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  width: fit-content;
}

.add-partner-btn:hover {
  border-color: var(--sell);
  color: var(--sell);
}

.conditional {
  display: none;
}

.conditional.show {
  display: block;
}

/* .field-group's own display:flex;flex-direction:column (which stacks
   its label above its input with a 7px gap) loses to this rule once
   .conditional gets .show — two classes beats one, regardless of source
   order — so a just-revealed "Please specify" field fell back to plain
   inline flow: <label> and <input> are both inline-level by default, so
   they rendered on the same line with no gap between them at all.
   Matching specificity for this combination restores the intended
   stacked layout with its gap, without touching any other .conditional
   section (e.g. firmSection) that isn't also a .field-group and
   genuinely wants plain block display. */
.field-group.conditional.show {
  display: flex;
}

.fin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.fin-row label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}

.upload-zone:hover {
  border-color: var(--sell);
  background: rgba(43, 196, 143, .03);
}

.upload-zone p {
  font-size: 13px;
  color: var(--text-low);
}

.upload-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sell);
  background: rgba(43, 196, 143, .1);
  padding: 2px 8px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 8px;
}

.upload-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.uploaded-name {
  font-size: 13px;
  color: var(--sell);
  margin-top: 8px;
  font-weight: 500;
  min-height: 1em;
}

.conf-reminder {
  background: linear-gradient(135deg, rgba(43, 196, 143, .06), rgba(43, 196, 143, .02));
  border: 1px solid rgba(43, 196, 143, .2);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.conf-icon {
  width: 36px;
  height: 36px;
  background: rgba(43, 196, 143, .12);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.conf-text h4 {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--sell-deep);
  margin-bottom: 4px;
}

.conf-text p {
  font-size: 13px;
  color: var(--text-dark-mid);
  line-height: 1.5;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-back {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark-mid);
  cursor: pointer;
  transition: all .2s;
}

.btn-back:hover {
  border-color: var(--text-dark-mid);
  color: var(--text-dark);
}

.btn-next {
  background: var(--sell);
  color: #fff;
  border-radius: 100px;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s;
}

.btn-next:hover {
  background: var(--sell-deep);
  transform: translateY(-1px);
}

.step-indicator {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-low);
  letter-spacing: .08em;
}

.progress-bar-wrap {
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  margin-bottom: 32px;
}

.progress-bar-fill {
  height: 100%;
  background: var(--sell);
  border-radius: 4px;
  transition: width .4s var(--ease);
}

.preview-listing {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.preview-row:last-child {
  border-bottom: none;
}

.preview-label {
  font-size: 13px;
  color: var(--text-low);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.preview-value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: right;
  max-width: 60%;
}

.pricing-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.price-card {
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
}

.price-card .amount {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.price-card .price-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sell);
  margin-bottom: 8px;
}

.price-card .price-note {
  font-size: 13px;
  color: var(--text-mid);
  margin-top: 6px;
}

.coupon-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.self-decl {
  background: rgba(43, 196, 143, .05);
  border: 1px solid rgba(43, 196, 143, .2);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-dark-mid);
  line-height: 1.65;
}

.self-decl label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.self-decl input[type=checkbox] {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--sell);
  margin-top: 2px;
}

.success-state {
  text-align: center;
  padding: 48px 24px;
  display: none;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(43, 196, 143, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.success-state h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

@media (max-width: 1020px) {
  .form-layout {
    grid-template-columns: 1fr;
  }
  .form-nav {
    position: static;
  }
  .form-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  /* minmax(0,1fr), not plain 1fr — same grid-overflow gotcha fixed
     repeatedly elsewhere this session: a bare 1fr track still respects
     its item's own min-content width, and an input with no explicit
     width (.field-input has none) sizes to fit a long placeholder like
     "linkedin.com/in/…", forcing this single column — and the whole
     input — wider than its actual container. Confirmed live: every
     input in list-your-business.html's Partner card measured 247px
     inside a 192px-wide grid, visibly spilling past the card's own
     border on the right (screenshot showed every field poking out). */
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-highlight {
    grid-template-columns: 1fr;
  }
  .fin-row {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   MOBILE FORM FIELD FONT SIZE — iOS Safari auto-zoom prevention
   Real bug, found via a real mobile audit: every tested form's inputs
   (login/signup pages' .input-box input, contact-us.html's #cName etc.,
   list-your-business.html's .field-input, and others) render at
   14.5-15px — under the 16px floor iOS Safari uses to decide whether to
   auto-zoom the whole page when a field is focused. Below that size,
   tapping ANY text field on an iPhone zooms the page in, disorienting
   and requiring the visitor to manually zoom back out — on a long form
   (the 7-step listing wizard, checkout) that happens on every single
   field. Desktop/tablet never has this problem (only iOS Safari zooms
   on focus), so this is scoped to phone-width viewports specifically
   rather than bumping every page's already-approved desktop input size.
   !important because dozens of pages each define their own inline
   per-page input rule (buyer-login.html's .input-box input, etc.) at a
   HIGHER specificity/later source order than this shared sheet — a
   plain override here would just lose to every one of them individually.
   One rule here instead of hunting down and editing every page's own
   duplicated block. =================================================================== */
@media (max-width: 600px) {
  /* :not(#\9) is a specificity trick, not a real exclusion (no element
     ever has id="9") — a bare type selector (input) has LOWER specificity
     than even one class, so a page-local rule like buyer-portal.html's
     own ".range-input { font-size: 13.5px !important; }" (a class, plus
     !important) still won even with !important also on this rule, since
     among tied !important declarations normal specificity still decides
     the winner. Padding every selector here with one throwaway
     pseudo-class raises it to two classes' worth of specificity — beats
     any single-class page-local override without needing to know every
     page's exact class name, verified against the two pages this
     actually happened on (buyer-portal.html, listing-detail.html). */
  input:not(#\9), textarea:not(#\9), select:not(#\9) {
    font-size: 16px !important;
  }

  /* Direct feedback, with a screenshot: a longer placeholder (e.g.
     list-your-business.html's "Name of the main contact person") just
     ran straight past the input's own right edge with no ellipsis —
     browsers don't add one by default. text-overflow:ellipsis needs
     overflow:hidden + white-space:nowrap to actually take effect, which
     inputs don't have by default; site-wide since any input's
     placeholder or typed value can run long on a narrow phone, not just
     this one field. Same !important-for-a-reason as the block above —
     plenty of pages set their own per-input rule at higher source order.
     :not([type="range"]) added after a real mobile bug: overflow:hidden
     here clips Chromium's own custom-themed ::-webkit-slider-thumb
     rendering, silently falling back to the native unstyled thumb (a
     flat pill instead of the site's round dot) on every range slider
     site-wide — confirmed via isolated bisection of this exact rule.
     Range inputs have no text/placeholder to ellipsize, so they were
     never really this rule's target to begin with. */
  input:not(#\9):not([type="range"]) {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}