/* J4Market public landing pages.
 *
 * Palette matches the in-app share-preview pages (see
 * server/productPreview/productPreview.controller.js) so the web surface and
 * the app read as one product. Lemon #DEF213 is AppColors.primary from
 * waxx_app/lib/utils/app_colors.dart.
 *
 * Mobile-first: nearly all traffic is phones. Desktop rules live in the one
 * media query block at the bottom of each section.
 */

:root {
  color-scheme: dark;

  --bg: #0b0b0c;
  --surface: #15151a;
  --surface-2: #1e1e26;
  --surface-3: #2a2a32;
  --border: #26262e;

  --lemon: #def213;
  --lemon-grad: linear-gradient(135deg, #f7ff17, #b1ff1f);

  /* Print-poster yellow used only by the seller-recruitment banner. Warmer
     than --lemon on purpose: it matches the artwork the banner is based on. */
  --banner-yellow: #ffe500;

  --text: #ffffff;
  --text-muted: #c8c8d0;
  --text-dim: #9b9ba8;
  --text-faint: #6b6b75;

  --live: #ff0000;
  --star: #ffc107;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1140px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* Visible only to screen readers — used for form labels the design hides. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--lemon);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
.logo span {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Header search collapses on phones; the hero search is the primary one. */
.header-search { display: none; flex: 1; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-actions .icon-btn {
  display: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.header-actions .icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--lemon-grad); color: #000; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary { background: var(--surface-3); color: var(--text); }
.btn-secondary:hover { background: #35353f; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--lemon); color: var(--lemon); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------- search field */

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 6px 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.15s ease;
}
.search:focus-within { border-color: var(--lemon); }
.search svg { flex-shrink: 0; color: var(--text-faint); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.search input::placeholder { color: var(--text-faint); }
.search .btn { height: 40px; padding: 0 18px; border-radius: 10px; }

.search-sm { height: 42px; padding-left: 12px; border-radius: 11px; }
.search-sm input { font-size: 14px; }
.search-sm .btn { height: 32px; padding: 0 14px; font-size: 13px; }

/* --------------------------------------------------------- promo banner */

/* Seller-recruitment panel at the top of the homepage.
 *
 * Every colour in the banner comes from the --pb-* tokens below, so
 * retheming is a matter of swapping one block instead of hunting hex codes
 * through thirty rules. Choose a theme with `promoBanner.theme` in
 * landing.content.js — it arrives here as a data attribute on .pb-frame.
 *
 * Default is "midnight": the banner sits inside the dark site palette and
 * lets the brand lemon carry the emphasis, so it reads as part of the
 * product rather than as a flyer stapled to the top of it. The original
 * flat-yellow print treatment is kept as "poster".
 */

.promo-banner { padding: 14px 14px 0; }

.pb-frame {
  /* -- midnight (default) -- */
  --pb-bg: linear-gradient(158deg, #17171f 0%, #101017 62%);
  --pb-ink: #ffffff;
  --pb-ink-dim: rgba(255, 255, 255, 0.62);
  --pb-rule: rgba(255, 255, 255, 0.13);
  --pb-edge: #2b2b36;
  --pb-edge-width: 1px;
  --pb-accent: var(--lemon);
  --pb-ribbon-bg: rgba(222, 242, 19, 0.13);
  --pb-ribbon-ink: var(--lemon);
  --pb-chip-bg: var(--lemon-grad);
  --pb-chip-ink: #0b0b0c;
  --pb-ring: rgba(255, 255, 255, 0.82);
  --pb-glow: rgba(222, 242, 19, 0.11);

  position: relative;
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 16px 16px;
  /* No panel box: the banner sits directly on the page background (--bg)
     rather than in its own bordered/tinted card — a boxed frame here read as
     a flyer stapled onto the page. --pb-bg/--pb-edge stay defined per theme
     below only for the accent tokens (ribbon, chip, ring) that still key off
     them; the poster theme's black border/yellow fill is the one look that
     depended on this box, so switching to it will render flat. */
  color: var(--pb-ink);
  text-align: center;
}

/* Soft accent glow behind the wordmark, matching the hero's treatment. */
.pb-frame::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: 760px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--pb-glow), transparent 70%);
  pointer-events: none;
}
.pb-frame > * { position: relative; }

/* -- deep slate: navy-teal panel, lemon accents. Reads corporate and calm;
      the extra hue costs one colour that is not in the app palette. -- */
.pb-frame[data-theme="slate"] {
  --pb-bg: linear-gradient(158deg, #17293c 0%, #0d1a27 65%);
  --pb-ink: #ffffff;
  --pb-ink-dim: rgba(222, 235, 248, 0.66);
  --pb-rule: rgba(255, 255, 255, 0.15);
  --pb-edge: #27455f;
  --pb-glow: rgba(222, 242, 19, 0.09);
  --pb-chip-ink: #08131d;
}

/* -- paper: light premium panel. Keeps the printed-poster contrast against
      a dark page, without the shouting. -- */
.pb-frame[data-theme="paper"] {
  --pb-bg: linear-gradient(158deg, #faf9f5 0%, #edece3 72%);
  --pb-ink: #15151b;
  --pb-ink-dim: rgba(21, 21, 27, 0.6);
  --pb-rule: rgba(21, 21, 27, 0.14);
  --pb-edge: #e0ded3;
  --pb-accent: #15151b;
  --pb-ribbon-bg: #15151b;
  --pb-ribbon-ink: #ffffff;
  --pb-chip-bg: #15151b;
  --pb-chip-ink: var(--lemon);
  --pb-ring: rgba(21, 21, 27, 0.85);
  --pb-glow: rgba(222, 242, 19, 0.3);
}

/* -- poster: the original black-on-yellow print piece. -- */
.pb-frame[data-theme="poster"] {
  --pb-bg: var(--banner-yellow);
  --pb-ink: #000000;
  --pb-ink-dim: rgba(0, 0, 0, 0.62);
  --pb-rule: rgba(0, 0, 0, 0.25);
  --pb-edge: #000000;
  --pb-edge-width: 4px;
  --pb-accent: #000000;
  --pb-ribbon-bg: #000000;
  --pb-ribbon-ink: #ffffff;
  --pb-chip-bg: #000000;
  --pb-chip-ink: #ffffff;
  --pb-ring: #000000;
  --pb-glow: transparent;
  border-radius: 12px;
}

/* Sized to its text rather than the full width: a wide tinted bar reads as a
   muddy block, a pill reads as a badge. Same treatment as .eyebrow, which is
   how every other section on the page labels itself. */
.pb-ribbon {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--pb-ribbon-bg);
  color: var(--pb-ribbon-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* The print treatment keeps its folded-ribbon ends. */
.pb-frame[data-theme="poster"] .pb-ribbon {
  display: block;
  max-width: 640px;
  padding: 8px 30px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%, 15px 50%);
}

.pb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pb-bag { width: 32px; height: 32px; flex-shrink: 0; color: var(--pb-accent); }
.pb-brand span {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.pb-lead {
  margin: 2px 0 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.pb-routes {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dotted var(--pb-rule);
  color: var(--pb-ink-dim);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.pb-routes span { opacity: 0.55; }
.pb-shout {
  margin: 4px 0 0;
  color: var(--pb-accent);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.005em;
}

.pb-map {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 8px 0 4px;
}
.pb-map-art { width: 100%; max-width: 290px; height: auto; color: var(--pb-accent); }

.pb-pins {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pb-pin { width: 64px; }
.pb-flag {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 3px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--pb-ring);
}
.pb-flag svg { width: 100%; height: 100%; display: block; }
.pb-pin-label { font-size: 11.5px; font-weight: 800; line-height: 1.2; }

.pb-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
  padding: 12px 0;
  border-top: 1px solid var(--pb-rule);
  border-bottom: 1px solid var(--pb-rule);
}
.pb-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}
.pb-feature:hover,
.pb-feature:focus-visible { opacity: 0.75; }
/* Hairline rules between the columns, centred in the 8px grid gap. */
.pb-feature + .pb-feature::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--pb-rule);
}
.pb-feature-icon { width: 32px; height: 32px; color: var(--pb-accent); }
.pb-feature span { font-size: 12px; font-weight: 800; line-height: 1.2; }

.pb-recruit {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.pb-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.pb-onboard {
  margin: 0;
  max-width: 230px;
  color: var(--pb-ink-dim);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
/* The one solid block of accent in the panel — it is the call to action. */
.pb-url {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 10px;
  background: var(--pb-chip-bg);
  color: var(--pb-chip-ink);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.01em;
  transition: filter 0.12s ease;
}
.pb-url:hover { filter: brightness(1.08); }

/* --------------------------------------------------------- global strip */

.global-strip { padding: 26px 0 2px; text-align: center; }
.global-strip h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.025em;
  background: var(--lemon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gs-lead { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.gs-sub { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ------------------------------------------------------------------- hero */

/* The strip already carries the top spacing when it precedes the hero. */
.global-strip + .hero { padding-top: 26px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 40px;
  text-align: center;
}
/* Soft lemon glow behind the headline. */
.hero::before {
  content: "";
  position: absolute;
  top: -180px; left: 50%;
  width: 620px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(222, 242, 19, 0.14), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero h1 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal;
  background: var(--lemon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.sub {
  margin: 0 auto 24px;
  max-width: 620px;
  color: var(--text-muted);
  font-size: 16px;
}
.hero form { max-width: 620px; margin: 0 auto 20px; }

.store-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.store-badges a { display: block; transition: transform 0.12s ease; }
.store-badges a:hover { transform: translateY(-2px); }
.store-badges svg { height: 48px; width: auto; display: block; }

.trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.trust b { color: var(--text); }
.trust .dot { color: var(--text-faint); }

/* --------------------------------------------------------------- sections */

.section { padding: 46px 0; }
.section-alt { background: var(--surface); }

.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-head p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(222, 242, 19, 0.12);
  color: var(--lemon);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- how it works */

.steps {
  display: grid;
  gap: 14px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 24px 20px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -14px; left: 20px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lemon);
  color: #000;
  font-size: 14px;
  font-weight: 800;
}
.step .step-icon { font-size: 26px; margin-bottom: 8px; }
.step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.step p { margin: 0; color: var(--text-dim); font-size: 14px; }

/* -------------------------------------------------------- seller cards */

.seller-grid { display: grid; gap: 14px; }

.seller-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.seller-card:hover { border-color: var(--lemon); transform: translateY(-3px); }

.seller-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
}
.seller-thumb img { width: 100%; height: 100%; object-fit: cover; }
.seller-thumb .placeholder {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  font-size: 42px;
  background: linear-gradient(135deg, #1e1e26, #15151a);
}

.live-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--live);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.live-badge .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.verified-badge {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lemon);
  color: #000;
  font-size: 13px;
  font-weight: 800;
}

.seller-body { padding: 14px 16px 16px; }
.seller-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-meta {
  color: var(--text-faint);
  font-size: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}
.seller-stats .star { color: var(--star); }

.section-cta { text-align: center; margin-top: 26px; }

/* -------------------------------------------------------- campus banner */

.campus {
  position: relative;
  overflow: hidden;
  margin: 0 16px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--lemon-grad);
  color: #000;
  text-align: center;
}
.campus-inner { max-width: var(--maxw); margin: 0 auto; }
.campus .emoji { font-size: 30px; line-height: 1; }
.campus h3 {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.campus p {
  margin: 0 auto 16px;
  max-width: 560px;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.82;
}
.campus .btn {
  background: #000;
  color: var(--lemon);
}
.campus .btn:hover { filter: brightness(1.35); }

/* ------------------------------------------------------------ categories */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 10px;
  min-height: 108px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cat-card:hover { border-color: var(--lemon); transform: translateY(-2px); }
.cat-card .cat-icon { font-size: 27px; line-height: 1; }
.cat-card img.cat-icon {
  width: 42px; height: 42px;
  object-fit: cover;
  border-radius: 10px;
}
.cat-card span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.25;
}

/* -------------------------------------------------------------- app CTA */

.app-cta {
  padding: 40px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.app-cta h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.app-cta p {
  margin: 0 auto 20px;
  max-width: 480px;
  color: var(--text-dim);
  font-size: 15px;
}
.app-cta .store-badges { margin-bottom: 0; }

/* ------------------------------------------------------- /sellers page */

.benefits { display: grid; gap: 12px; }
.benefit {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.benefit .b-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(222, 242, 19, 0.12);
  font-size: 21px;
}
.benefit h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.benefit p { margin: 0; color: var(--text-dim); font-size: 14px; }

.form-card {
  padding: 24px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.form-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.form-card > p.form-sub {
  margin: 0 0 20px;
  color: var(--text-dim);
  font-size: 14px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.field input,
.field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.15s ease;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b75' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field input:focus,
.field select:focus { border-color: var(--lemon); }
.field input::placeholder { color: var(--text-faint); }
.field .hint { margin-top: 5px; font-size: 12px; color: var(--text-faint); }

.field-row { display: grid; gap: 14px; }

/* Honeypot: hidden from humans, tempting to naive bots. Must stay empty.
   Kept out of the layout entirely rather than display:none so that bots
   which skip hidden fields still fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
}
.alert-success {
  background: rgba(0, 197, 102, 0.1);
  border: 1px solid rgba(0, 197, 102, 0.35);
  color: #7ff0b6;
}
.alert-error {
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.35);
  color: #ff9a97;
}
.alert b { display: block; color: var(--text); margin-bottom: 2px; }

.quote-card {
  padding: 26px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lemon);
  border-radius: var(--radius-lg);
}
.quote-card .q-mark {
  font-size: 42px;
  line-height: 1;
  color: var(--lemon);
  margin-bottom: 4px;
}
.quote-card blockquote {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.quote-card .q-author { font-size: 14px; font-weight: 700; }
.quote-card .q-role { font-size: 13px; color: var(--text-faint); }
.quote-card .video-wrap {
  margin-top: 18px;
  aspect-ratio: 9 / 16;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.quote-card .video-wrap iframe { width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------- search results */

.results-head {
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 26px;
}
.results-head h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.results-head p { margin: 0; color: var(--text-dim); font-size: 14px; }

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.tabs a {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.tabs a.active {
  background: var(--lemon);
  border-color: var(--lemon);
  color: #000;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.product-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.product-card:hover { border-color: var(--lemon); transform: translateY(-3px); }
.product-card .p-thumb {
  aspect-ratio: 1;
  background: var(--surface-3);
}
.product-card .p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .p-thumb .placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 34px;
}
.product-card .p-body { padding: 11px 12px 13px; }
.product-card .p-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .p-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--lemon);
}
.product-card .p-seller {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty {
  padding: 56px 20px;
  text-align: center;
}
.empty .e-icon { font-size: 48px; margin-bottom: 14px; }
.empty h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.empty p {
  margin: 0 auto 22px;
  max-width: 420px;
  color: var(--text-dim);
  font-size: 15px;
}

/* --------------------------------------------------- horizontal card rail */

/* Rows with more items than fit: scroll on phones, grid on desktop.
   Scroll-snap makes the swipe feel native rather than laggy. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 47%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  /* Bleed to the screen edge so cards look like they continue off-screen. */
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.rail::-webkit-scrollbar-track { background: transparent; }

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.section-head-row h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-head-row p { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.section-head-row a.more {
  flex-shrink: 0;
  color: var(--lemon);
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------------------- reels */

.reel-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.reel-card img { width: 100%; height: 100%; object-fit: cover; }
.reel-card .placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 34px;
  background: linear-gradient(135deg, #1e1e26, #15151a);
}
.reel-card .reel-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 10px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.86));
}
.reel-card .reel-seller {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-card .reel-stats {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.reel-card .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  font-size: 15px;
  padding-left: 3px;
}
.reel-type-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Tabs that filter the reel rail client-side. */
.reel-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.reel-tabs button {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.reel-tabs button[aria-selected="true"] {
  background: var(--lemon);
  border-color: var(--lemon);
  color: #000;
}

/* ------------------------------------------------------ live & upcoming */

.live-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.live-card .live-thumb { aspect-ratio: 4 / 3; background: var(--surface-3); }
.live-card .live-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-card .live-thumb .placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 32px;
}
.live-card .live-body { padding: 11px 12px 13px; }
.live-card .live-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-card .live-when { font-size: 12px; color: var(--lemon); font-weight: 700; }
.live-card .live-seller { font-size: 12px; color: var(--text-faint); }

/* --------------------------------------------------------- flash sale */

.flash {
  border: 1px solid rgba(255, 90, 90, 0.4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at top left, rgba(255, 60, 60, 0.16), transparent 60%),
    var(--surface-2);
  padding: 22px 18px;
}
.flash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.flash-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.flash-head p { margin: 3px 0 0; font-size: 14px; color: var(--text-dim); }

.countdown { display: flex; align-items: center; gap: 6px; }
.countdown .unit {
  min-width: 46px;
  padding: 6px 4px;
  border-radius: 9px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
}
.countdown .num {
  display: block;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.countdown .lbl {
  display: block;
  font-size: 9px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.countdown .sep { font-size: 17px; font-weight: 800; color: var(--text-faint); }

.discount-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.promo-badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--lemon);
  color: #000;
  font-size: 11px;
  font-weight: 800;
}
.p-thumb { position: relative; }
.p-was {
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 500;
}

/* ---------------------------------------------------- hero banner carousel */

/* Sits inside the same .wrap column as every other section (see .flash for
   the same "contained, rounded card" treatment) rather than bleeding full
   width — a full-bleed hero read as visually disconnected from the rest of
   the page's 1140px content column, especially on wide screens. Uses the
   plain .section class for spacing (see below), same rhythm as every other
   section on the page. */
.hero-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.hero-track {
  display: flex;
  transition: transform 0.5s ease;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  aspect-ratio: 16 / 7;
  background: var(--surface-2);
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-caption {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  /* Full-height scrim, not just a bottom strip — keeps text legible against
     any background art without needing a near-opaque bar. */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.05) 75%);
  color: #fff;
}
.hero-slide-caption .inner { max-width: 640px; }
.hero-slide-caption .eyebrow {
  background: none;
  padding: 0;
  margin-bottom: 8px;
  color: var(--lemon);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-slide-caption h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero-slide-caption p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
}
.hero-dot.is-active { background: var(--lemon); width: 18px; border-radius: 4px; }

/* ------------------------------------------------------------ featured video */

.fv-caption { text-align: center; margin-bottom: 18px; }
.fv-caption h2 { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.fv-caption p { margin: 0; color: var(--text-dim); font-size: 15px; }

.fv-player {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #000;
  aspect-ratio: 16 / 9;
}

.fv-cta { display: flex; margin: 18px auto 0; width: max-content; }

/* --------------------------------------------------- sliding tile carousel */

/* Featured-sellers/promo-deals/biggest-price-drop rows: 2-6 tiles visible at
   once (by breakpoint), auto-advancing one tile at a time — a "shelf"
   carousel, unlike the hero's one-full-slide-at-a-time carousel. Tiles are
   real seller-card/product-card markup (see templates/home.js
   spotlightSellersSection/promoDealsSection/discountDealsSection), just
   given an explicit flex-basis here so they size like a shelf item instead
   of their usual grid/rail placement. --tiles-visible drives both the CSS
   sizing below and the JS step size in homeScript() (read via
   getComputedStyle, so the two never drift out of sync). */
.tile-slider {
  position: relative;
  overflow: hidden;
  --tiles-visible: 2;
  --tile-gap: 12px;
}
.tile-track {
  display: flex;
  gap: var(--tile-gap);
  transition: transform 0.5s ease;
}
.tile-track > .seller-card,
.tile-track > .product-card {
  flex: 0 0 calc((100% - (var(--tiles-visible) - 1) * var(--tile-gap)) / var(--tiles-visible));
  min-width: 0;
}

.tile-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}
.tile-prev { left: 6px; }
.tile-next { right: 6px; }
.tile-arrow[hidden] { display: none; }

@media (min-width: 640px) { .tile-slider { --tiles-visible: 3; } }
@media (min-width: 900px) { .tile-slider { --tiles-visible: 5; } }
@media (min-width: 1140px) { .tile-slider { --tiles-visible: 6; } }

/* ------------------------------------------------------- deal of the day */

.dotd {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(222, 242, 19, 0.35);
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at top left, rgba(222, 242, 19, 0.1), transparent 60%), var(--surface-2);
}
.dotd-thumb {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
}
.dotd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dotd-ribbon {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lemon-grad);
  color: #000;
  font-size: 11px;
  font-weight: 800;
}
.dotd-body { display: flex; flex-direction: column; align-items: flex-start; }
.dotd-body h2 { margin: 4px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.dotd-price { margin-bottom: 6px; }
.dotd-price .p-price { font-size: 22px; font-weight: 800; color: var(--lemon); }
.dotd-body .p-seller { font-size: 13px; color: var(--text-faint); margin-bottom: 14px; }

/* ------------------------------------------------------------ price index */

.index-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.index-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.index-row:first-child { border-top: none; }
.index-row:hover { background: var(--surface-3); }
.index-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-prices { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.index-market { font-size: 12px; color: var(--text-faint); text-decoration: line-through; }
.index-price { font-size: 14px; font-weight: 800; color: var(--lemon); }
.index-pct {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 7px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* -------------------------------------------------------- testimonials */

.testi-card {
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.testi-stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.testi-quote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testi-who { display: flex; align-items: center; gap: 10px; }
.testi-who img,
.testi-who .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.testi-name { font-size: 13px; font-weight: 700; }
.testi-product {
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------- poll / quiz */

.poll-card {
  padding: 24px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.poll-card h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.poll-card .poll-meta { margin: 0 0 18px; font-size: 13px; color: var(--text-faint); }

.poll-options { display: flex; flex-direction: column; gap: 10px; }

.poll-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.poll-option:hover { border-color: var(--lemon); }
.poll-option input { accent-color: var(--lemon); width: 17px; height: 17px; flex-shrink: 0; }

/* Result rows: a filled bar behind the label, sized by vote share. */
.poll-result {
  position: relative;
  overflow: hidden;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
}
.poll-result .bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(222, 242, 19, 0.16);
  transition: width 0.5s ease;
}
.poll-result.is-correct .bar { background: rgba(0, 197, 102, 0.22); }
.poll-result.is-wrong .bar { background: rgba(229, 57, 53, 0.2); }
.poll-result .row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
}
.poll-result .pct { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 700; }
.poll-result .mark { margin-left: 6px; }

.poll-explain {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(222, 242, 19, 0.08);
  border: 1px solid rgba(222, 242, 19, 0.2);
  font-size: 13px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ referral */

.referral {
  padding: 30px 22px;
  border-radius: var(--radius-lg);
  background: var(--lemon-grad);
  color: #000;
  text-align: center;
}
.referral h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.referral p { margin: 0 auto 18px; max-width: 520px; font-size: 15px; font-weight: 600; opacity: 0.82; }
.referral-rewards {
  display: grid;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 20px;
}
.referral-reward {
  padding: 13px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.09);
}
.referral-reward b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.62; }
.referral-reward span { font-size: 15px; font-weight: 800; }
.referral .btn { background: #000; color: var(--lemon); }
.referral .btn:hover { filter: brightness(1.35); }
.referral-code {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--border);
  padding: 38px 0 28px;
  margin-top: 20px;
}
.footer-top { display: grid; gap: 26px; margin-bottom: 28px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p {
  margin: 0 0 14px;
  max-width: 300px;
  color: var(--text-dim);
  font-size: 14px;
}
.footer-col h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-muted); font-size: 14px; }
.footer-col a:hover { color: var(--lemon); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}
.footer-bottom a { color: var(--text-faint); }
.footer-bottom a:hover { color: var(--text-muted); }

/* ------------------------------------------------------------- desktop */

@media (min-width: 640px) {
  .hero-slide-caption { padding: 28px 32px; }
  .hero-slide-caption h3 { font-size: 28px; }
  .hero-slide-caption p { font-size: 15px; }

  .hero { padding: 60px 0 52px; }
  .global-strip + .hero { padding-top: 34px; }
  .hero h1 { font-size: 46px; }
  .hero p.sub { font-size: 17px; }

  .promo-banner { padding: 20px 16px 0; }
  .pb-frame { padding: 22px 28px 20px; }
  .pb-ribbon { font-size: 14px; padding: 9px 36px; margin-bottom: 16px; }
  .pb-bag { width: 44px; height: 44px; }
  .pb-brand span { font-size: 58px; }
  .pb-lead { font-size: 24px; margin: 4px 0 10px; }
  .pb-routes { font-size: 15px; }
  .pb-shout { font-size: 22px; }

  .pb-map { flex-wrap: nowrap; gap: 28px; margin: 4px 0; }
  .pb-map-art { max-width: 400px; }
  /* One column, same order as the destinations list — London, New York,
     France all aligned under each other. */
  .pb-pins { gap: 14px; }
  .pb-pin { width: 78px; }
  .pb-flag { width: 56px; height: 56px; }
  .pb-pin-label { font-size: 13px; }

  .pb-features { gap: 16px; padding: 16px 0; }
  .pb-feature + .pb-feature::before { left: -9px; }
  .pb-feature-icon { width: 44px; height: 44px; }
  .pb-feature span { font-size: 17px; }

  .pb-recruit { font-size: 17px; margin-bottom: 12px; }
  .pb-foot { justify-content: space-between; gap: 12px 24px; }
  .pb-onboard { text-align: left; font-size: 12.5px; max-width: 260px; }
  .pb-url { font-size: 28px; padding: 8px 26px; }

  .global-strip { padding-top: 34px; }
  .global-strip h2 { font-size: 32px; }
  .gs-lead { font-size: 18px; }
  .gs-sub { font-size: 15px; }

  .steps { grid-template-columns: repeat(3, 1fr); }
  .seller-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr 1fr; }

  .form-card { padding: 30px 28px; }
  .section { padding: 60px 0; }
  .section-head h2 { font-size: 30px; }
  .section-head-row h2 { font-size: 26px; }
  .campus { padding: 34px 28px; margin: 0 16px; }
  .campus h3 { font-size: 26px; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .rail { grid-auto-columns: 30%; }
  .referral-rewards { grid-template-columns: 1fr 1fr; }
  .flash { padding: 28px 26px; }
}

@media (min-width: 900px) {
  .header-search { display: block; max-width: 440px; margin: 0 16px; }
  .header-actions .icon-btn { display: inline-flex; }
  .hero h1 { font-size: 54px; }
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .benefits { grid-template-columns: repeat(3, 1fr); }

  /* Enough room for a full row — drop the horizontal scroll entirely. */
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    overflow-x: visible;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .rail-4 { grid-template-columns: repeat(4, 1fr); }
  .rail-3 { grid-template-columns: repeat(3, 1fr); }
  .referral-rewards { grid-template-columns: 1fr 1fr; }

  .dotd { grid-template-columns: 340px 1fr; align-items: center; }
  /* No aspect-ratio bump here (unlike most other breakpoints) — the hero is
     now capped at the same 1140px column as the rest of the page (.wrap),
     not full viewport width, so 16/7 already gives a sane height at every
     size instead of needing to widen further. */
  .hero-slide-caption { padding: 32px 48px; }
  .hero-slide-caption h3 { font-size: 32px; }
  .hero-slide-caption p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}