/* Shared shell — nav, footer, and skeleton-page styles for every page
   except home (which keeps its own inline <style>). Nav/footer rules here
   are copied verbatim from pages_src/home.html so they render pixel-
   identical across the site — if you change nav or footer on home, port
   the same change here, and vice versa. Requires tokens.css loaded first. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.section-pad { padding-left: 64px; padding-right: 64px; }
.wrap { max-width: 1280px; margin: 0 auto; }

@media (max-width: 980px) {
  .section-pad { padding-left: 24px; padding-right: 24px; }
}

/* ── Nav ── */
.site-nav-wrap {
  position: sticky; top: 0; z-index: 100; background: var(--surface);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.site-nav-wrap.scrolled { box-shadow: var(--shadow-raised); }
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 64px; max-width: 1280px; margin: 0 auto;
  position: relative; /* anchors the absolute mobile .nav-links panel */
}
/* Temporary wordmark treatment -- plain "beat'em" set in a self-hosted
   font supplied directly by Kelly (assets/fonts/gaktahu-regular.ttf),
   standing in until real branding lands. */
@font-face {
  font-family: 'GakTahu';
  src: url('/assets/fonts/gaktahu-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.wordmark { font-family: 'GakTahu', cursive; font-size: 36px; letter-spacing: -0.01em; color: var(--brand); }
/* Small maple leaf next to the wordmark, shown only to visitors Cloudflare's
   edge reports as Canadian (see /api/geo.js + the fetch in nav.js) -- same
   leaf glyph and same geo-check as the homepage hero's "Made in Canada"
   badge, just persistent in the nav instead of a one-time hero moment.
   Hidden by default; nav.js adds .visible once the geo check resolves. */
.nav-ca-leaf { width: 14px; height: 14px; flex-shrink: 0; display: none; }
.nav-ca-leaf.visible { display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14.5px; font-weight: 600; }
.nav-links a { text-decoration: none; color: var(--foreground); opacity: .7; }
.nav-cta {
  padding: 11px 22px; border-radius: 9999px; background: var(--brand); color: var(--brand-foreground);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}

/* ── Platforms dropdown -- live platforms only (no coming-soon ones).
   Pure CSS (:hover / :focus-within), no JS needed. padding-top on the
   menu (not margin) keeps the hoverable area contiguous with the
   trigger so there's no dead gap that drops the hover state. */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown-menu-inner {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-overlay); padding: 6px; min-width: 130px;
}
.nav-links .nav-dropdown-menu-inner a {
  display: block; padding: 8px 12px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: var(--foreground); opacity: 1;
  text-decoration: none; white-space: nowrap;
}
.nav-links .nav-dropdown-menu-inner a:hover { background: var(--secondary); opacity: 1; }

/* ── Mobile nav (<= 920px). The desktop link row (.nav-links) becomes a
   collapsible panel toggled by .nav-toggle (hamburger). The Platforms
   dropdown's hover behavior doesn't work on touch, so a separate
   .nav-dropdown-toggle button reveals the sub-links as an accordion
   inside the mobile panel. Above 920px everything below is inert
   (.nav-toggle and .nav-dropdown-toggle stay display:none) and the
   desktop hover/focus-within dropdown from the block above is unchanged.
   Mirrored verbatim in pages_src/home.html's inline <style> -- port
   changes both ways, same discipline as the nav block above. ── */
.nav-toggle {
  display: none; /* shown only at <= 920px */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border: none; background: none;
  cursor: pointer; flex-shrink: 0;
}
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; margin: 0 auto;
  background: var(--foreground); border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
/* Hamburger -> X when open */
.site-nav-wrap.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-wrap.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-nav-wrap.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Accordion chevron (mobile-only, sits next to the Platforms link) */
.nav-dropdown-toggle {
  display: none; /* shown only at <= 920px */
  width: 28px; height: 28px; padding: 0; border: none; background: none;
  cursor: pointer; color: var(--foreground); flex-shrink: 0;
}
.nav-dropdown-toggle svg { transition: transform var(--duration-fast) var(--ease-standard); }
.nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 920px) {
  /* Comfortable mobile gutters on the bar itself */
  .site-nav { padding: 16px 20px; }
  /* Swap the row for a hamburger + keep the CTA in the bar */
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-overlay);
    padding: 0;
    /* Hidden via max-height (clips content); revealed when the wrap has
       .nav-open. No max-height transition -- in some engines a class-flip
       from 0 -> 80vh never registers a transition start and pins the panel
       closed, so the open is instant instead. */
    max-height: 0; overflow: hidden;
  }
  .site-nav-wrap.nav-open .nav-links { max-height: 80vh; overflow-y: auto; padding: 8px 0; }
  .nav-links > a, .nav-links .nav-dropdown > a {
    display: block; padding: 14px 24px; font-size: 15px;
  }
  /* Platforms becomes an accordion row: link + chevron side by side */
  .nav-links .nav-dropdown { display: flex; align-items: center; }
  .nav-links .nav-dropdown > a { flex: 1; }
  .nav-dropdown-toggle { display: inline-flex; margin-right: 16px; }
  /* Sub-links render inline (accordion), not as a hovered flyout */
  .nav-links .nav-dropdown-menu {
    position: static; transform: none; padding-top: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: none;
    /* Collapsed unless the toggle opens it */
    max-height: 0; overflow: hidden;
  }
  .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu { max-height: 300px; }
  .nav-links .nav-dropdown-menu-inner {
    border: none; box-shadow: none; padding: 0 0 8px;
  }
  .nav-links .nav-dropdown-menu-inner a {
    padding: 10px 24px 10px 40px; font-size: 14px; opacity: .75;
  }
}

/* ── Footer ── */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 0; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 40px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-heading {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground); margin-bottom: 4px;
}
.footer-col a { font-size: 14px; color: var(--foreground); text-decoration: none; opacity: .75; }
.footer-col a:hover { opacity: 1; }
.footer-bottom { text-align: center; padding: 20px 0; font-size: 12.5px; color: var(--muted-foreground); border-top: 1px solid var(--border); }
.footer-bottom p { margin: 0; }
/* Trademark attribution -- deliberately quiet. Present and legible, not a
   design element. Pairs with .platform-wordmark: we name the marketplaces in
   text rather than reproducing their logos. */
.footer-bottom .footer-trademarks { margin: 8px auto 0; max-width: 760px; padding: 0 24px; font-size: 11px; line-height: 1.5; opacity: .75; }

/* Text stand-in for a marketplace logo. Used wherever a platform used to be
   shown as its own wordmark image -- naming a marketplace is nominative use;
   reproducing its logo invites a brand-impersonation read, which is exactly
   what an automated brand-protection crawler flagged us for in Aug 2026. */
.platform-wordmark { font-weight: 800; letter-spacing: -.01em; color: var(--foreground); white-space: nowrap; }

/* ── Skeleton pages — pricing, features/*, platforms/*, compare/*, etc.
   Everything still waiting on real content and a real layout of its own. ── */
.page-container { max-width: 720px; margin: 0 auto; padding: 80px 24px; }
.page-container h1 { font-weight: 800; font-size: 40px; letter-spacing: -.02em; margin: 0 0 16px; color: var(--foreground); }
.page-container .page-subtitle { font-size: 17px; color: var(--muted-foreground); line-height: 1.7; margin: 0 0 40px; }
.page-container .coming-soon { font-size: 14px; color: var(--muted-foreground); opacity: .8; }

/* ── Legal documents (Terms, Privacy) -- plain reading typography inside
   .page-container. Not styled as a "designed" page on purpose; a legal
   doc should read like a document. ── */
.legal-updated { font-size: 13px; color: var(--muted-foreground); margin: -20px 0 32px; }
.legal-doc h2 { font-size: 21px; font-weight: 800; color: var(--foreground); margin: 36px 0 12px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { font-size: 15px; line-height: 1.7; color: var(--foreground); margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { font-size: 15px; line-height: 1.7; color: var(--foreground); margin-bottom: 6px; }
.legal-doc a { color: var(--brand-deep); font-weight: 600; }

.badge-soon {
  display: inline-block; padding: 3px 10px; border-radius: 9999px;
  background: var(--secondary); color: var(--muted-foreground); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; vertical-align: middle;
}

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid a {
  display: block; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border);
  text-decoration: none; color: var(--foreground); font-size: 14px; font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.card-grid a:hover { border-color: var(--brand); }
.card-grid a .card-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.card-grid a .platform-logo { margin-bottom: 10px; opacity: .85; }

/* ── Platform logos — one consistent sizing rule so every real platform
   logo (Poshmark, eBay, Depop, Mercari, ...) renders at the same visual
   height everywhere it's used, regardless of that logo's native aspect
   ratio -- no per-platform pixel tuning, ever. Source URLs live in
   build.mjs's PLATFORMS array; any current or future page just drops in
   <img class="platform-logo" src="..."> and gets this for free. ── */
.platform-logo { height: 18px; width: auto; max-width: 100%; display: block; }

@media (max-width: 640px) {
  .page-container { padding: 56px 20px; }
  .page-container h1 { font-size: 30px; }
}

/* ── Reusable content components — mirrored from pages_src/home.html's
   inline styles (what-it-does / trust-section / final CTA) so real content
   pages (Features, and future ones) share the same visual language without
   home needing to load this file. Port changes both ways, same discipline
   as the nav/footer block above. ── */

.section-heading { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section-heading .eyebrow {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 12px;
}
.section-heading h2 { font-weight: 800; font-size: 34px; letter-spacing: -.02em; margin: 0 0 12px; color: var(--foreground); }
@media (max-width: 640px) {
  /* 34px wraps heavily in a ~312px content column -- scale down so two-line
     section headings stay readable on phones without dominating the section. */
  .section-heading h2 { font-size: 26px; }
}
.section-heading p { font-size: 16px; line-height: 1.6; color: var(--muted-foreground); margin: 0 auto; }

.bg-surface { background: var(--surface); }
.bg-background { background: var(--background); }
.bg-soft { background: var(--brand-soft); }
/* Longhand (not the `padding: 88px 0` shorthand) so combining .section-py
   with .section-pad on the same element keeps .section-pad's horizontal
   padding intact -- the shorthand was clobbering it to 0, leaving content
   pinned to the viewport edges on mobile. */
.section-py { padding-top: 88px; padding-bottom: 88px; }

.feature-grid {
  max-width: 1000px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feature-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 26px 24px;
}
.feature-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--brand); color: var(--brand-foreground);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-weight: 800; font-size: 16.5px; margin: 0 0 10px; color: var(--foreground); }
.feature-card p { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin: 0; }
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.trust-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
.trust-item {
  display: flex; gap: 16px; padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.trust-item:first-child { padding-top: 0; }
.trust-item:last-child { border-bottom: none; padding-bottom: 0; }
.trust-item-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: var(--brand-foreground);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.trust-item-check svg { width: 14px; height: 14px; }
.trust-item h3 { font-weight: 800; font-size: 16.5px; margin: 0 0 10px; color: var(--foreground); }
.trust-item p { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0; }

.cta-section { position: relative; overflow: hidden; background: var(--brand-deep); padding: 120px 0; text-align: center; }
.cta-section::before {
  content: '';
  position: absolute; top: -180px; right: -140px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-foreground) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cta-h2 { font-weight: 900; font-size: 42px; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px; color: var(--brand-foreground); }
.cta-sub { font-size: 17px; color: color-mix(in srgb, var(--brand-foreground) 85%, transparent); margin: 0 0 32px; }
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border-radius: 9999px; border: none; cursor: pointer;
  background: var(--surface); color: var(--brand-deep);
  font-size: 16px; font-weight: 700; font-family: var(--font-sans);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.btn-cta:hover { transform: translateY(-1px); }
.cta-micro { font-size: 13.5px; color: color-mix(in srgb, var(--brand-foreground) 70%, transparent); margin-top: 16px; }
@media (max-width: 640px) {
  .cta-h2 { font-size: 32px; }
}