/* ============================================================
   main.css  —  Swopsmart shared styles (loads on every page)
   Tokens · reset · typography · buttons · header · footer ·
   overlays · mobile menu · FAQ · a11y · reduced-motion
   ============================================================ */

/* ============ NEUE HAAS GROTESK DISPLAY (Commercial Type web licence; 500/600/700 only) ============ */
@font-face {
  font-family: 'Haas Grot Display Web';
  src: url('/fonts/NeueHaasGroteskDisplay-55Roman-Web.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Grot Display Web';
  src: url('/fonts/NeueHaasGroteskDisplay-65Medium-Web.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haas Grot Display Web';
  src: url('/fonts/NeueHaasGroteskDisplay-75Bold-Web.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============ DESIGN TOKENS ============ */
:root {
  --bg: #f2efe8;         /* warm off-white canvas */
  --bg-soft: #ebe7dd;
  --bg-card: #ffffff;
  --ink: #0e2a22;
  --ink-2: #3a5a52;
  --ink-3: #677973;
  --line: rgba(14, 42, 34, 0.09);
  --line-strong: rgba(14, 42, 34, 0.18);
  --mint: #00c896;
  --mint-ink: #007a5a;
  --mint-soft: #dff5ec;
  --forest: #0e2a22;
  --forest-deep: #081a15;
  --amber: #e9b949;
  --shadow-sm: 0 1px 2px rgba(14,42,34,0.04), 0 4px 12px rgba(14,42,34,0.04);
  --shadow-md: 0 8px 24px rgba(14,42,34,0.08);
  --shadow-lg: 0 24px 60px rgba(14,42,34,0.14);
  --radius: 18px;
  --radius-lg: 24px;
  --section-py: 96px;
  --font-display: 'Haas Grot Display Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media (max-width: 768px) { :root { --section-py: 64px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* the hidden attribute must always win — explicit display:flex/grid on a
   class otherwise overrides the UA default and .hidden toggles go inert
   (the bug that froze the instant-search filtering) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input { font: inherit; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes boxSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes boxSlideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
@keyframes menuSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes menuSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes mScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes softFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(-4deg); }
}
@keyframes softFloat3 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes softFloat2 {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(-12px) rotate(10deg); }
}
@keyframes pulseDot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }


.fade-in { opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.fade-1 { animation-delay: 0.05s; }
.fade-2 { animation-delay: 0.15s; }
.fade-3 { animation-delay: 0.28s; }
.fade-4 { animation-delay: 0.42s; }
.fade-5 { animation-delay: 0.56s; }

/* Scroll-triggered reveal (Apple-style). Kept subtle: 14px of travel over
   0.7s. Elements that appear SUDDENLY (fast scroll, or already in view on
   load) get .reveal-instant from the observer — they render in place with
   no transition instead of sliding late, which is what made fast scrolling
   feel jumpy. The class is removed a frame later so hover transitions on
   the same element (e.g. bento tiles) keep working. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.reveal-instant { transition: none !important; }
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

body.scroll-lock, html:has(body.scroll-lock) { overflow: hidden; }
/* Freeze the page's pixels while locked instead of letting them jump: the
   header-pin rule below pulls the header out of the flow (content under it
   would rise by its height) and overflow:hidden lets engines clamp the
   root scroll to 0 — both were visible behind the header panels during
   open. The body is fixed at its pre-lock offset (--lock-scroll-y, set by
   lockScroll) and padded by the pinned header's height to fill the flow
   space it vacated. position:fixed on body does NOT capture fixed
   descendants, so the header and the overlay panels keep their viewport
   positioning. Same technique the quote wizard's modals already use. */
body.scroll-lock {
  position: fixed; left: 0; right: 0; width: 100%;
  top: calc(var(--lock-scroll-y, 0px) * -1);
}
/* The compensation padding fills the flow space the pinned header vacates —
   but it pushes EVERYTHING down, including the promo bar that sits above
   the header, shoving it underneath the pinned header. So the pin and its
   padding only apply when the header was already sticky-engaged at lock
   time (.hdr-pinned, set by lockScroll): scrolled, the promo bar is above
   the viewport and the push is invisible; at the top of the page the
   frozen body holds the header in place by itself and nothing needs to
   move. */
body.scroll-lock.hdr-pinned {
  padding-top: var(--lock-header-height, 0px);
}


/* ============ HEADER ============ */
.site-header {
  /* above the overlays (z-index 200): they anchor to this header's measured
     bottom edge, and if that measurement is ever off the failure should be a
     visible seam, not the header vanishing under an opaque panel.
     .acct-menu's z-index:300 is scoped to this header's stacking context. */
  position: sticky; top: 0; z-index: 300;
  background: #f2efe8;
  border-bottom: 1px solid var(--line);
}
/* While an overlay is open the root has overflow:hidden, which kills sticky
   (see lockScroll in main.js). Pin the header at the top it occupied when the
   lock was applied so it stays visible and its controls stay tappable — the
   mobile menu has no close button of its own and relies on the hamburger. */
body.scroll-lock.hdr-pinned .site-header {
  position: fixed; top: var(--hdr-top, 0px); left: 0; right: 0;
}
.nav-bar {
  display: flex; align-items: center; gap: 20px;
  max-width: 1440px; margin: 0 auto;
  padding: 10px 28px; height: 64px;
}
.brand { display: inline-flex; align-items: center; color: var(--forest); text-decoration: none; }
.brand-logo { height: 28px; width: auto; display: block; color: var(--forest); }
.nav-links { display: flex; gap: 4px; margin-left: 32px; align-items: center; }
.nav-links .icon-btn { color: var(--ink); }
.nav-link {
  padding: 8px 14px; border-radius: 10px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; color: var(--ink);
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); position: relative;
  transition: background 0.15s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn .badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 10px; background: var(--mint); color: var(--forest);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
/* logged-in presence dot on the account icon.
   NB: global border-box applies to ::after, so 12px here = the mockup's
   8px mint core + 2px bg ring (an 8px width would leave only a 4px core). */
.icon-btn.is-authed::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mint); border: 2px solid var(--bg);
}
/* account dropdown (desktop, logged-in) — beige like the site's other menus */
.acct-wrap { position: relative; display: inline-flex; }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 216px; padding: 10px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(14,42,34,0.16);
}
.acct-menu[hidden] { display: none; }
.acct-menu-label {
  display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 12px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
}
.acct-menu-link {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-size: 15px; font-weight: 500; color: var(--ink);
  padding: 9px 12px; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-family: inherit; letter-spacing: inherit;
  transition: background 0.12s, color 0.12s;
}
.acct-menu-ico { flex-shrink: 0; width: 17px; height: 17px; color: var(--ink-3); transition: color 0.12s; }
.acct-menu-link:hover { background: var(--bg-card); text-decoration: none; color: var(--forest); box-shadow: 0 1px 2px rgba(14,42,34,0.05); }
.acct-menu-link:hover .acct-menu-ico { color: var(--mint-ink); }
.acct-menu-signout-form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line-strong); }
.acct-menu-signout { color: var(--ink-2); }
#boxBtn svg { width: 20px; height: 20px; }
.nav-cta {
  margin-left: 8px; padding: 10px 18px;
  border-radius: 10px; background: var(--forest); color: #f2efe8;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s, background 0.15s;
}
.nav-cta:hover { background: #1a3d34; transform: translateY(-1px); }

.mobile-nav { display: none; margin-left: auto; gap: 6px; align-items: center; }
.hamburger {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s, opacity 0.2s, clip-path 0.25s ease;
}
.hamburger span:nth-child(1) { clip-path: inset(0 0 0 0); }
.hamburger span:nth-child(2) { clip-path: inset(0 27% 0 0); }
.hamburger span:nth-child(3) { clip-path: inset(0 45% 0 0); }
.hamburger[aria-expanded="true"] span { clip-path: inset(0 0 0 0); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .desktop-nav { display: none !important; }
  .mobile-nav { display: flex; }
  .nav-bar { gap: 12px; padding: 10px 20px; height: 60px; }
  .brand-logo { height: 30px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn .badge { top: -1px; right: -1px; }
  #boxBtn svg { width: 20px; height: 20px; }
}


/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--forest); color: #f2efe8;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 24px rgba(14,42,34,0.15);
}
.btn-primary:hover { background: #1a3d34; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 32px rgba(14,42,34,0.22); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-secondary {
  background: transparent; color: var(--forest);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { border-color: var(--forest); background: rgba(14,42,34,0.03); }

/* Disabled state — shared across all .btn variants. */
.btn[disabled], .btn:disabled {
  opacity: 0.4; cursor: not-allowed;
  box-shadow: none; pointer-events: none;
}


/* ============ FAQ ============ */
.faq {
  padding: var(--section-py) 28px;
  border-top: 1px solid var(--line);
}
.faq-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
}
@media (max-width: 900px) {
  .faq-inner { grid-template-columns: 1fr; gap: 0; display: flex; flex-direction: column; }
  .faq-aside { order: 0; display: contents; }
  .faq-aside > .section-eyebrow { order: 0; }
  .faq-aside > .section-title { order: 0; display: block; margin-bottom: 36px; }
  .faq-aside > .faq-contact { order: 2; margin-top: 32px; }
  #faqList { order: 1; }
}
.faq-aside {
  position: sticky; top: 96px; height: fit-content;
}
@media (max-width: 900px) { .faq-aside { position: static; } }
.faq-list { display: flex; flex-direction: column; gap: 12px; --faq-pad: 22px; --faq-dur: 0.35s; }
.faq-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.faq-card:hover { box-shadow: var(--shadow-md); border-color: rgba(14, 59, 46, 0.12); }
.faq-card.active { box-shadow: var(--shadow-md); border-color: rgba(14, 59, 46, 0.18); }
.faq-summary {
  padding: 20px var(--faq-pad);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  cursor: pointer; list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-q {
  font-size: 16px; font-weight: 500; color: var(--forest);
  letter-spacing: -0.005em; line-height: 1.35;
  font-family: var(--font-mono);
}
.faq-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-soft); border: none; color: var(--forest);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.2s, transform 0.3s;
}
.faq-toggle svg { width: 14px; height: 14px; }
.faq-card.active .faq-toggle { background: var(--forest); color: var(--mint); transform: rotate(180deg); }
.faq-a {
  padding: 0 var(--faq-pad) 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.6; max-width: 620px;
  overflow: hidden; max-height: 0; letter-spacing: 0.01em;
  transition: max-height var(--faq-dur) ease, padding-bottom var(--faq-dur) ease;
}

.faq-contact {
  margin-top: 40px; padding: 24px;
  background: var(--bg-soft); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.faq-contact h3 { font-size: 16px; font-weight: 600; }
.faq-contact p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }


/* ============ FOOTER ============ */
.site-footer {
  background: var(--forest-deep);
  color: rgba(242, 239, 232, 0.6);
  padding: 80px 28px 32px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 85% 0%, rgba(0, 200, 150, 0.16), transparent 60%),
    radial-gradient(ellipse 600px 300px at 10% 100%, rgba(0, 200, 150, 0.07), transparent 60%);
  pointer-events: none;
}
.footer-inner { max-width: 1320px; margin: 0 auto; position: relative; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 56px;
  padding-bottom: 48px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-divider { display: none; } }
.footer-brand {
  font-size: 20px; font-weight: 600; letter-spacing: -0.5px;
  color: #f2efe8; display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.footer-brand-mark {
  width: 32px; height: 32px; background: var(--mint); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.footer-brand-mark img { width: 22px; height: 22px; filter: brightness(0) saturate(100%); }
.footer-tagline {
  font-size: 17px; color: rgba(242, 239, 232, 0.85); line-height: 1.25;
  margin-bottom: 22px; letter-spacing: -0.01em; font-weight: 500;
}
.newsletter-title { font-size: 13px; color: rgba(242, 239, 232, 0.5); margin-bottom: 12px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.newsletter-form { position: relative; margin-bottom: 20px; max-width: 360px; }
.newsletter-input {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid rgba(242,239,232,0.2);
  border-radius: 0;
  padding: 10px 36px 10px 0;
  color: #f2efe8; font-size: 14px; outline: none;
  transition: border-color 0.2s;
}
.newsletter-input:focus { border-color: var(--mint); }
.newsletter-input::placeholder { color: rgba(242, 239, 232, 0.35); }
.newsletter-submit {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; color: var(--mint);
  padding: 0; border-radius: 0;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center;
}
.social-list { display: flex; flex-direction: row; gap: 8px; }
.social-link {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(242, 239, 232, 0.7);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.social-link:hover { background: var(--mint); color: var(--forest); border-color: var(--mint); transform: translateY(-2px); }

.footer-col-title { font-size: 11px; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-bottom: 20px; }
.footer-nav ul:not(.social-list) { display: flex; flex-direction: column; gap: 12px; }
.footer-link { font-size: 14px; color: rgba(242, 239, 232, 0.72); transition: color 0.15s; line-height: 1.4; }
.footer-link:hover { color: var(--mint); }

.talk-card {
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(0,200,150,0.16), rgba(0,200,150,0.03));
  border-radius: 14px;
  margin-top: 4px;
}
.talk-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.talk-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(0,200,150,0.18); animation: pulseDot 2s ease-in-out infinite; }
.talk-card-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); font-weight: 500; }
.talk-card-rows { display: flex; flex-direction: column; gap: 10px; }
.talk-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(242,239,232,0.88); transition: color 0.15s; }
.talk-row:hover { color: var(--mint); }
.talk-row svg { flex-shrink: 0; opacity: 0.7; }
.talk-row.muted { color: rgba(242,239,232,0.55); font-size: 13px; }
.talk-row.muted:hover { color: rgba(242,239,232,0.55); }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; align-items: center; padding-top: 28px;
}
.footer-copy { font-size: 12px; color: rgba(242, 239, 232, 0.4); font-family: var(--font-mono); letter-spacing: 0.02em; }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { font-size: 12px; color: rgba(242, 239, 232, 0.5); font-family: var(--font-mono); letter-spacing: 0.02em; }
.footer-legal a:hover { color: rgba(242, 239, 232, 0.8); }


/* ============ OVERLAYS ============ */
.overlay {
  /* --hdr-bottom is kept current by main.js (syncHdrOffset): the
     header is sticky under the dismissible promo banner, so its
     bottom edge moves with scroll and with banner show/dismiss.
     While locked the header is pinned with position:fixed (see
     body.scroll-lock .site-header) because overflow:hidden on the root
     kills sticky; lockScroll() re-syncs this after applying the lock. */
  /* -1px: the header and this panel are separate compositor layers that
     snap to device pixels independently; at fractional positions (promo-bar
     line height, DPR scaling) they can land a pixel apart, showing a
     hairline of page background between them. Tucking the panel one pixel
     under the header (z 300 vs 200, opaque) closes the seam at every DPR. */
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--hdr-bottom, 64px) - 1px);
  z-index: 200;
  overflow-y: auto;
  background: var(--bg);
}
.overlay[hidden] { display: none; }
.overlay.opening { animation: boxSlideDown 0.28s cubic-bezier(0.4,0,0.2,1); }
.overlay.closing { animation: boxSlideUp 0.28s cubic-bezier(0.4,0,0.2,1) forwards; }
@media (max-width: 900px) { .overlay { top: calc(var(--hdr-bottom, 60px) - 1px); } }

.search-header { padding: 28px; max-width: 760px; margin: 0 auto; }
.search-input-wrap { position: relative; }
.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 56px;
  font-size: 16px; color: var(--ink); outline: none;
  box-shadow: var(--shadow-sm);
}
.search-input:focus { border-color: var(--mint); }
.search-icon-in { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search-close-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); padding: 6px; }
.search-body { max-width: 1100px; margin: 0 auto; padding: 8px 28px 32px; }
.search-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.search-cat {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  text-align: left; transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.search-cat:hover { border-color: var(--forest); box-shadow: var(--shadow-sm); }
.search-cat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
}
/* the inline SVGs carry only a viewBox (no width/height attributes);
   Safari/iOS collapses such SVGs in flex containers to 0×0 unless CSS
   sizes them explicitly — desktop Chrome is lenient, so this only ever
   showed on real iPhones */
.search-cat-icon svg { width: 29px; height: 29px; display: block; flex-shrink: 0; }
.search-cat-name { font-size: 15px; font-weight: 600; color: var(--ink); }

.box-inner { max-width: 640px; margin: 0 auto; padding: 36px 28px; }
.box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.box-title-group { display: flex; align-items: center; gap: 12px; }
.box-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.box-count { font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); }
.box-close { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.box-close:hover { background: var(--bg-soft); }
.box-empty { text-align: center; padding: 80px 0; }
.box-empty h3 { font-size: 20px; font-weight: 600; margin: 20px 0 8px; letter-spacing: -0.02em; }
.box-empty p { font-size: 15px; color: var(--ink-3); margin-bottom: 28px; }
.box-list { display: flex; flex-direction: column; gap: 10px; }
.box-item { padding: 18px 20px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--line); }
.box-item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.box-item-info { display: flex; align-items: center; gap: 14px; }
.box-item-icon { width: 42px; height: 42px; background: var(--mint-soft); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--mint-ink); }
.box-item-name { font-size: 15px; font-weight: 600; }
.box-item-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); }
.box-item-meta .good { color: var(--mint-ink); font-weight: 600; }
.box-item-meta .fair { color: #c89418; font-weight: 600; }
.box-item-price { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.box-item-actions { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.box-item-remove { font-size: 12px; color: #cc3333; font-weight: 500; font-family: var(--font-mono); }
.box-item-edit { font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }
.box-summary { margin-top: 28px; padding: 24px 0; border-top: 1px dashed var(--line-strong); }
.box-summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); }
.box-summary-total { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.box-total-label { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.box-total { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }


/* ============ MOBILE MENU ============ */
.mobile-menu {
  /* -1px tuck under the header: same hairline-seam fix as .overlay above */
  position: fixed; top: calc(var(--hdr-bottom, 60px) - 1px); left: 0; right: 0; bottom: 0;
  z-index: 200; background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.opening { animation: menuSlideIn 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.mobile-menu.closing { animation: menuSlideOut 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.mobile-menu-body { padding: 32px 28px 0; }
.mobile-menu-link {
  display: block; padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink);
}
/* account section inside the mobile menu */
.mobile-menu-acct { border-bottom: none; }
.mobile-menu-sublink { font-size: 16px; font-weight: 500; color: var(--ink-2); padding: 13px 0 13px 18px; }
.mobile-menu-signout-form { margin: 0; }
.mobile-menu-signout {
  /* button chrome reset only — look comes from .mobile-menu-sublink */
  width: 100%; text-align: left; background: none; cursor: pointer;
  font-family: inherit; letter-spacing: inherit;
  border: none; border-bottom: 1px solid var(--line);
}
.mobile-menu-footer { padding: 24px 28px 36px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  width: auto; height: auto; padding: 12px 20px;
  margin: 0; overflow: visible; clip: auto;
  background: var(--forest); color: #f2efe8;
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  outline: 2px solid var(--mint); outline-offset: 2px;
}


/* ============ FONT WEIGHT / LETTER-SPACING POLICY ============ */
/* Font-family is set via CSS variables on :root — no universal override needed. */

/* Section headings & emphasis → 600 */
.cta-title,
.faq-aside h2,
.stat-hero-num,
.num,
h2, h3 {
  font-weight: 600;
}

/* Body copy → 500 (lightest weight in the licensed set) */
p, li, .section-lede, .faq-a,
.footer-col a, .meta-label, .sat-card,
.btn-primary, .btn-ghost, input, textarea, button {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Small caps labels (eyebrows, overlines) → 500 for presence at small sizes */
.meta-label { font-weight: 400; }
.nav-link { font-weight: 500; }

/* FAQ questions: keep semi-emphasis */
.faq-q { font-weight: 500; letter-spacing: 0.005em; }

/* ============================================================
   Shared section-header system (moved here from home.css so every
   page gets it without loading home.css): eyebrow, title, subtext,
   the centered/flex head wrapper, and the dark-section variant.
   ============================================================ */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 40px; margin-bottom: 36px;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--mint-ink);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--mint-ink); }
.section-title {
  margin-top: 12px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1; letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 620px;
}
.section-subtext {
  margin-top: 12px;
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
}
/* Dark section modifier: flips title/eyebrow to light palette */
.section--dark .section-eyebrow { color: var(--mint); }
.section--dark .section-eyebrow::before { background: var(--mint); }
.section--dark .section-title { color: #f2efe8; }
@media (max-width: 768px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
}


/* ============================================================
   Shared device-search bar — the Start Selling section on / and
   /sell, and the brand-selection pages.

   The bar itself is the flex container (was: a bare positioning
   context with an absolutely-placed icon and clear button). The
   three children declare an explicit `order`, so the magnifier
   sits on the trailing edge no matter where the <svg> appears in
   a page's markup — that is what lets the brand-selection views
   pick up this design without a markup change.
   ============================================================ */
.search-wrap { max-width: 720px; margin: 0 auto 72px; position: relative; }
.search-form {
  /* position:relative preserved from the old block: it is the containing
     block for .search-devices-float on pages that render the floating
     results panel inside the form. Dropping it would re-anchor that panel
     to .search-wrap and push it below the hint line. */
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px 24px 6px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within {
  border-color: var(--mint);
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(0, 200, 150, 0.18);
}
.sell-search {
  order: 1; flex: 1 1 auto; min-width: 0;
  background: none; border: none; box-shadow: none;
  padding: 14px 0;
  text-align: center;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
}
.sell-search::placeholder { color: rgba(14, 42, 34, 0.26); font-weight: 600; }
/* the native "x" would sit beside our own clear button */
.sell-search::-webkit-search-cancel-button,
.sell-search::-webkit-search-decoration { -webkit-appearance: none; }
.clear-btn {
  order: 2; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft);
  display: none; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.clear-btn.visible { display: flex; }
/* `.search-icon-left` is the legacy class name, kept as an alias so the
   brand-selection views keep matching until they are migrated to
   `.search-icon`. The name no longer describes the position. */
.search-icon,
.search-icon-left {
  order: 3; flex: 0 0 auto;
  position: static; transform: none;
  color: var(--ink-3);
  pointer-events: none;
  transition: color 0.2s;
}
.search-form:focus-within .search-icon,
.search-form:focus-within .search-icon-left { color: var(--mint-ink); }

/* Trust line under the search bar (replaces the homepage quick-links) */
.search-hints {
  margin-top: 14px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.search-hint-separator { color: var(--line-strong); }
@media (max-width: 640px) {
  /* No trust line on mobile — the search bar hands straight off to the
     category grid. The full three-hint line is 641px-and-up. */
  .search-hints { display: none; }
}


/* ============================================================
   Device category cards — the Start Selling grid on / and /sell,
   and the instant-search results main.js renders into
   `.search-results-grid`.

   These rules used to live in home.css, which left /sell depending
   on the homepage sheet for its own card styling. They live here so
   both pages render identically regardless of $pageCss.
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1280px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.sell-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 22px 22px 20px;
  min-height: 206px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s, border-color 0.22s, background 0.22s;
}
.sell-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 200, 150, 0.35);
  box-shadow: var(--shadow-md);
  background: #f1faf6;
}
/* negative margin pulls the well flush with the card's optical edge
   while keeping the hover fill inset from the corner radius */
.sell-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  margin: -6px 0 0 -6px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--forest);
  transition: background 0.22s, color 0.22s;
}
.sell-card-icon svg { width: 26px; height: 26px; }
.sell-card:hover .sell-card-icon { background: var(--mint-soft); color: var(--mint-ink); }
/* One-line reserve: since the "Sell" prefix moved into the sub-line
   sentence, every category title fits a single line even at six across
   in the 1200px container (the widest is "Apple Accessories"). */
.sell-card-name {
  margin-top: 22px;
  min-height: 20px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--ink);
}
/* Two-line floor for the "Sell {brands} {noun}." sentence; longer sentences
   wrap to three and the row stretches — margin-top:auto on the footer keeps
   every footer pinned to the card bottom, so rows stay aligned either way. */
.sell-card-sub {
  margin-top: 4px;
  min-height: 35px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
}
.sell-card-footer {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono);
  /* label size only ("UP TO" / "GET A QUOTE"); the price carries its own
     explicit size below and stays put */
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.22s, border-color 0.22s;
}
.sell-card-price {
  font-weight: 500; font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink);
}
.sell-card-arrow {
  flex: 0 0 auto;
  opacity: 0; transform: translateX(-5px);
  transition: opacity 0.22s, transform 0.22s;
}
.sell-card:hover .sell-card-footer { color: var(--mint-ink); border-top-color: rgba(0, 200, 150, 0.3); }
.sell-card:hover .sell-card-price { color: var(--mint-ink); }
.sell-card:hover .sell-card-arrow { opacity: 1; transform: none; }

/* Instant-search results: same card chassis as the categories (padding,
   radius, mint hover), with the content centered as a stack — photo, model
   name, payout line. Only the card background stays white through hover:
   the product shots are white-background JPGs, and the mint tint would
   frame each one in a white rectangle. */
.search-results-grid .sell-card { align-items: center; text-align: center; }
.search-results-grid .sell-card:hover { background: var(--bg-card); }
/* fixed-height photo band so every model name starts on the same line
   regardless of each shot's aspect ratio */
.search-results-grid .sell-card-photo {
  height: 110px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  color: var(--forest);
}
.search-results-grid .sell-card-photo img {
  max-width: 96px; max-height: 96px; width: auto; height: auto; object-fit: contain;
}
.search-results-grid .sell-card-name {
  margin-top: 0; min-height: 0;
  font-size: 15px; line-height: 1.35;
}
.search-results-grid .sell-card-payout {
  margin-top: 4px;
  font-size: 13px; color: var(--ink-3);
  font-family: var(--font-mono);
}
.search-results-grid .sell-card-payout strong { font-weight: 700; color: var(--forest); }
.search-results-grid .sell-card-name mark.search-hl {
  background: rgba(0, 200, 150, 0.22); color: inherit; border-radius: 3px; padding: 0 1px;
}

/* Empty state, shared by / and /sell (was duplicated in home.css and
   start-selling.css with the same values in both) */
.no-results {
  text-align: center; padding: 60px 20px;
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
}
.no-results h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.no-results p { color: var(--ink-2); font-size: 14px; }

/* Centered head above the search bar, on both pages */
.sell-page-head { text-align: center; margin-bottom: 36px; }
.sell-page-head .section-title { max-width: 100%; margin-left: auto; margin-right: auto; }
/* Centered eyebrow gets a line on BOTH sides — the shared .section-eyebrow
   draws only the leading dash, which reads off-balance when centered. The
   trailing line mirrors it; the eyebrow's flex gap spaces both. Scoped here
   so the left-aligned section heads elsewhere keep their single dash. */
.sell-page-head .section-eyebrow::after {
  content: ""; width: 18px; height: 1px; background: var(--mint-ink);
}

/* Search-to-grid rhythm shared by every sell-funnel page — the Start
   Selling section (.categories) and the three browse grids. 84px desktop
   (the prototype's 44px below the hint line plus 40px above the grid, set
   as one value because adjacent block margins collapse), halved on mobile
   where 84px of empty canvas reads as a void. Overrides the 72px base on
   .search-wrap above. */
.categories .search-wrap,
.brands .search-wrap,
.series .search-wrap,
.products .search-wrap { margin-bottom: 84px; }
@media (max-width: 768px) {
  .categories .search-wrap,
  .brands .search-wrap,
  .series .search-wrap,
  .products .search-wrap { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sell-card, .sell-card-icon, .sell-card-footer, .sell-card-arrow,
  .search-form, .search-icon, .search-icon-left { transition: none; }
  .sell-card:hover { transform: none; }
  .sell-card:hover .sell-card-arrow { transform: none; }
}


/* ============================================================
   Shared breadcrumb — reused across device-selection steps
   (brand page, series page, and any future step). Left-aligned.
   The page wrappers, heads, grids, and empty states stay
   page-specific.
   ============================================================ */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 36px;
  font-family: var(--font-mono);
  font-size: 13px; color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); transition: color 0.15s; }
.crumbs a:hover { color: var(--forest); }
.crumbs .crumb-sep { color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--forest); font-weight: 600; }


/* ============ MONO FOR NUMERIC RECEIPTS ============ */
/* JetBrains Mono on payout amounts, stats, and timestamps only.
   Keeps tabular alignment on figures; never on headings or body. */
.qc-price,
.qc-diff,
.stat-hero-num,
.num,
.meta-val,
[data-mono] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.02em;
}
/* Slightly lighter weight for mono so it doesn't over-bold */
.qc-price, .stat-hero-num, .num, .meta-val {
  font-weight: 500;
}
.qc-diff {
  font-weight: 400;
}


/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .strip-track {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   "Trusted by sellers" — why-sellers-choose-us section
   Ported from the Sell.html design (Variant C header only).
   Header uses our shared .section-eyebrow + .section-title
   (NOT the design's .tv2-headline). Tiles animate via our
   shared .reveal mechanism (main.js observer): the design's
   .tile.in / .t-stat.in / .t-since.in were rewritten to
   .reveal.visible equivalents.
   ============================================================ */

.trust-v2 {
  position: relative;
  padding: 120px 28px 140px;
  background: linear-gradient(180deg, #faf8f3 0%, #f5f2ea 38%, var(--bg) 100%);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 768px) { .trust-v2 { padding: 80px 24px 100px; } }
.trust-v2-inner { max-width: 1200px; margin: 0 auto; position: relative; }

/* Header (centered) — eyebrow + title come from main.css shared classes.
   We only need to center them as a unit, matching the Start Selling head. */
.trust-v2-head { text-align: center; margin-bottom: 56px; }
.trust-v2-head .section-eyebrow { justify-content: center; }
.trust-v2-head .section-title { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .trust-v2-head { margin-bottom: 36px; } }

/* ----- Bento grid ----- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 12px;
}
@media (max-width: 960px) { .bento { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .bento { grid-template-columns: repeat(2, 1fr); } }

.tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s;
}
.tile:hover { border-color: rgba(14,42,34,0.14); box-shadow: 0 12px 32px rgba(14,42,34,0.06); }

.tile-label {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.tile-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

.tile-headline {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--forest);
  margin-bottom: 10px;
}
.tile-sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 32ch; }

/* Stagger: scoped to tiles so it doesn't affect the header's .reveal */
.tile.reveal:nth-child(1) { transition-delay: 0.04s; }
.tile.reveal:nth-child(2) { transition-delay: 0.09s; }
.tile.reveal:nth-child(3) { transition-delay: 0.14s; }
.tile.reveal:nth-child(4) { transition-delay: 0.19s; }
.tile.reveal:nth-child(5) { transition-delay: 0.24s; }

/* TILE 1 — Big stat (forest) */
.t-stat {
  grid-column: span 3; grid-row: span 2;
  background: var(--forest);
  color: var(--bg);
  border-color: var(--forest);
  padding: 36px;
  justify-content: space-between;
}
.t-stat .tile-label { color: rgba(242,239,232,0.5); }
.t-stat .tile-label::before { background: var(--mint); box-shadow: 0 0 0 4px rgba(0,200,150,0.18); animation: pulseDot 2s ease-in-out infinite; }
.stat-num {
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bg);
  font-feature-settings: "tnum";
}
.stat-num .plus { color: var(--mint); }
.stat-caption { font-size: 16px; color: rgba(242,239,232,0.7); max-width: 36ch; line-height: 1.4; margin-top: 18px; }
.stat-caption strong { color: var(--bg); font-weight: 600; }
.stat-trend { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(242,239,232,0.1); }
.stat-trend-bars { display: flex; gap: 3px; align-items: end; height: 28px; }
.stat-trend-bars span {
  width: 6px; border-radius: 2px; background: var(--mint);
  opacity: 0; transform: scaleY(0); transform-origin: bottom;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.t-stat.reveal.visible .stat-trend-bars span { opacity: 1; transform: scaleY(1); }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(1) { transition-delay: 0.20s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(2) { transition-delay: 0.25s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(3) { transition-delay: 0.30s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(4) { transition-delay: 0.35s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(5) { transition-delay: 0.40s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(6) { transition-delay: 0.45s; }
.t-stat.reveal.visible .stat-trend-bars span:nth-child(7) { transition-delay: 0.50s; }
.stat-trend-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(242,239,232,0.6); }
.stat-trend-text strong { color: var(--mint); font-weight: 500; }

/* TILE 2 — Pull quote */
.t-quote {
  grid-column: span 3; grid-row: span 2;
  background: var(--bg-card);
  padding: 36px;
  justify-content: space-between;
}
.t-quote::before {
  content: "\201C";
  position: absolute;
  top: -34px; left: 22px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 220px;
  font-weight: 600;
  color: var(--mint-soft);
  line-height: 1;
  pointer-events: none;
}
.quote-body {
  position: relative;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--forest);
  max-width: 40ch;
  text-wrap: pretty;
  margin-top: 28px;
}
.quote-body em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 65%, var(--mint-soft) 65%);
  padding: 0 2px;
}
.quote-foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote-stars { display: flex; gap: 2px; color: #00b67a; }
.quote-author { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.02em; }
.quote-author strong { color: var(--ink); font-weight: 500; }
.quote-source { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; }

/* TILE 3 — BBB */
.t-bbb {
  grid-column: span 2;
  background: linear-gradient(180deg, #fff 0%, #f7f4ec 100%);
  align-items: flex-start;
  justify-content: space-between;
}
.bbb-letter {
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--forest);
  font-feature-settings: "tnum";
  margin-top: 12px;
}
.bbb-letter sup {
  font-size: 36px;
  vertical-align: super;
  color: var(--mint-ink);
  margin-left: 4px;
  font-weight: 600;
}

/* TILE 4 — Speed (24h) */
.t-speed {
  grid-column: span 2;
  background: var(--mint-soft);
  border-color: rgba(0,200,150,0.18);
}
.speed-clock {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--forest);
  position: relative;
  margin-bottom: 18px;
}
.speed-clock::before, .speed-clock::after {
  content: "";
  position: absolute;
  background: var(--forest);
  left: 50%; top: 50%;
  transform-origin: 0 0;
  border-radius: 1px;
}
.speed-clock::before { width: 16px; height: 2px; transform: rotate(0deg); }
.speed-clock::after { width: 12px; height: 2px; transform: rotate(-90deg); }
.speed-clock .dot {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
}
.speed-num {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--forest);
  font-feature-settings: "tnum";
}
.speed-num .unit { font-size: 22px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }

/* TILE 5 — Since 2016 */
.t-since {
  grid-column: span 2;
  background: var(--forest-deep);
  color: var(--bg);
  border-color: var(--forest-deep);
}
.t-since .tile-label { color: rgba(242,239,232,0.4); }
.t-since .tile-label::before { background: var(--amber); }
.since-year {
  font-size: 72px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--bg);
  font-family: var(--font-mono);
  margin-bottom: 14px;
}
.since-line {
  position: relative;
  height: 1px;
  background: rgba(242,239,232,0.15);
  margin: 14px 0;
}
.since-line::after {
  content: "";
  position: absolute;
  left: 0; top: -3px;
  width: 100%;
  height: 7px;
  background: var(--mint);
  border-radius: 4px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s;
}
.t-since.reveal.visible .since-line::after { transform: scaleX(1); }
.since-line-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(242,239,232,0.5);
  letter-spacing: 0.08em;
}
.since-line-labels strong { color: var(--mint); font-weight: 500; }
.since-foot { margin-top: auto; padding-top: 16px; }

/* Bottom mini-strip */
.tv2-foot {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding: 20px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: rgba(255,255,255,0.4);
}
.tv2-foot-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.tv2-foot-item svg { color: var(--mint-ink); flex-shrink: 0; }
.tv2-foot-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--forest);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--forest);
  transition: gap 0.2s;
}
.tv2-foot-cta:hover { gap: 12px; }

/* Responsive span resets */
@media (max-width: 960px) {
  .t-stat   { grid-column: span 4; grid-row: span 2; }
  .t-quote  { grid-column: span 4; grid-row: auto; }
  .t-bbb    { grid-column: span 2; }
  .t-speed  { grid-column: span 2; }
  .t-since  { grid-column: span 4; }
}
@media (max-width: 600px) {
  .bento { grid-auto-rows: auto; gap: 12px; }
  .t-stat, .t-quote, .t-bbb, .t-speed, .t-since { grid-column: 1 / -1; grid-row: auto; }
  .tile { padding: 24px; }
  .t-stat { padding: 28px; }
  .stat-num { font-size: clamp(72px, 22vw, 110px); }
  .tile-label { top: 18px; right: 18px; }
  .t-quote::before { font-size: 160px; top: -22px; left: 16px; }
  .quote-body { margin-top: 22px; font-size: 20px; }
  .quote-foot { flex-wrap: wrap; gap: 10px; }
  .quote-source { margin-left: 0; }
  .bbb-letter { font-size: 80px; }
}

/* pulseDot keyframe (used by the live-counter dot) */
@keyframes pulseDot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---- Header box overlay: real items (mini-cart) ---- */
.box-mini-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.box-mini-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid rgba(14, 42, 34, 0.08);
}
.box-mini-item:last-child { border-bottom: none; }
.box-mini-media {
  width: 44px; height: 44px; flex: none; mix-blend-mode: multiply;
  color: var(--forest);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.box-mini-media img { max-width: 36px; max-height: 36px; width: auto; height: auto; object-fit: contain; }
.box-mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.box-mini-name { font-size: 15px; font-weight: 600; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-mini-meta { font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-mini-price { font-size: 14px; font-weight: 600; color: var(--forest); flex: none; }
.box-mini-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 4px 0; margin-top: 6px; border-top: 1px solid rgba(14, 42, 34, 0.14);
  font-size: 13px; color: var(--ink-2);
}
.box-mini-payout { font-size: 18px; font-weight: 700; color: var(--forest); }
.box-mini-actions { display: flex; gap: 10px; margin-top: 16px; }
.box-mini-actions .btn { flex: 1; justify-content: center; }

/* ---- Header search overlay: instant device results ---- */
.search-devices { margin-bottom: 26px; }
.search-devices-list { display: flex; flex-direction: column; }
.search-device {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px; border-radius: 12px;
  background: #fff;
  margin-bottom: 6px;
  border: 1px solid rgba(14, 42, 34, 0.06);
}
.search-device:last-child { margin-bottom: 0; }
.search-device:hover { background: rgba(0, 200, 150, 0.07); }
.search-device-photo {
  width: 48px; height: 48px; flex: none;
  color: var(--forest);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.search-device-photo img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.search-device-name {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 600; color: var(--forest);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-device-price {
  flex: none; font-size: 14px; color: var(--ink-3); font-family: var(--font-mono);
}
.search-device-price strong { color: var(--forest); font-weight: 700; }

/* query highlight inside result names */
.search-device-name mark.search-hl {
  background: rgba(0, 200, 150, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* floating instant-search panel (home + /sell start-selling search).
   `.search-wrap { position: relative }` is declared once, with the
   shared search-bar rules above. */
.search-devices-float {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: 60;
  background: #f7f5ef;
  border: 1px solid rgba(14, 42, 34, 0.12);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 32px -8px rgba(14, 42, 34, 0.18);
  margin-bottom: 0;
  max-height: 420px; overflow-y: auto;
}

/* ---- announcement bar (Promo System v2) ----
   Readability pass (2026-08-30, variant C): deep-forest bar, and a
   STRUCTURED CTA chip — mint outline + faint mint tint — replacing the
   old unpadded neon text. Hierarchy: the message reads first but sits
   back slightly (14.5px, 92% white) so the chip is the single brightest
   accent. The link is a FLEX row (align-items: center) so message and
   chip share one vertical center — no baseline math, no pixel nudges.
   The activated badge is the same chip flipped to solid mint, rendered
   TRAILING (the CTA's slot, see promo_banner.php) so the state change
   answers in place instead of teleporting to the left. */
.promo-bar {
  position: relative;
  background: var(--forest-deep); color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 14.5px; letter-spacing: 0.01em;
}
.promo-bar-link {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 44px;
  color: inherit;
}
/* hover: no underline — the whole bar lightens slightly instead */
.promo-bar-link:hover { text-decoration: none; }
.promo-bar:hover { background: var(--forest); }
.promo-bar-cta {
  flex-shrink: 0;
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--mint);
  background: rgba(0, 200, 150, 0.14);
  color: #00e5ab;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; line-height: 1;
  text-decoration: none !important;
}
/* applied state: the same chip, solid — mint fill, deep-forest ink */
.promo-bar-activated {
  flex-shrink: 0;
  padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--mint);
  background: var(--mint);
  color: var(--forest-deep);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; line-height: 1;
}
.promo-bar-text-short { display: none; }
@media (max-width: 640px) {
  .promo-bar-text-full { display: none; }
  .promo-bar-text-short { display: inline; }
  .promo-bar-link { padding: 10px 40px 10px 12px; font-size: 13px; gap: 8px; }
  .promo-bar-cta { padding: 4px 10px; font-size: 11px; }
  .promo-bar-activated { padding: 4px 10px; font-size: 11px; }
}
.promo-bar-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 8px; border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s, background 0.15s;
}
.promo-bar-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
@keyframes promoBarPulse {
  0% { background: var(--forest-deep); }
  35% { background: #1e5a48; }
  100% { background: var(--forest-deep); }
}
.promo-bar-pulse { animation: promoBarPulse 0.9s ease; }

/* ---- coupon strip (box page + quote wizard aside) ---- */
.coupon-strip {
  /* three fixed columns: icon | text | action. The text column wraps
     internally to as many lines as it needs; icon and action stay
     vertically centered beside it (per the approved screenshot). */
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--mint-soft);
  border-radius: 12px;
  font-size: 15px; color: var(--ink);
  line-height: 1.45;
}
.coupon-strip-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 200, 150, 0.18); color: var(--mint-ink);
}
.coupon-strip-text { flex: 1 1 auto; min-width: 0; }
.coupon-strip-text strong { font-weight: 700; color: var(--forest); }
.coupon-strip-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--forest);
  transition: border-color 0.15s, background 0.15s;
}
.coupon-strip-remove:hover { border-color: var(--mint); background: #fff; }
.coupon-strip--compact { padding: 11px 13px; font-size: 13.5px; gap: 11px; border-radius: 10px; }
.coupon-strip--compact .coupon-strip-icon { width: 32px; height: 32px; }
.coupon-strip-amt {
  flex: 0 0 auto; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(0, 200, 150, 0.16); color: var(--mint-ink);
  font-size: 14px; font-weight: 700;
}

@media (max-width: 640px) {
  .coupon-strip { font-size: 14px; }
}

/* Custom-quote CTA inside empty search states (all sell pages + home) */
.no-results .btn { margin-top: 18px; }

/* Header search overlay: no-results guard. Kept self-contained — the overlay
   renders on every page, and some page sheets (sell-brand.css etc.) still
   carry their own .no-results block. */
.search-no-results {
  text-align: center;
  padding: 40px 20px;
  margin: 8px 0 24px;
  background: var(--bg-card);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.search-no-results h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.search-no-results p { color: var(--ink-2); font-size: 14px; margin-bottom: 0; }