/* Platform detail pages (Poshmark, and eBay/Depop once their steps are
   locked). Requires tokens.css + shared.css loaded first.

   Accent color is a CSS custom property, --platform-accent /
   --platform-accent-soft, set inline per page (see build.mjs) to that
   platform's own real brand token (--platform-poshmark, --platform-ebay,
   etc.) -- so this file is written once and every platform page reuses
   it with its own color, no per-platform CSS needed. Falls back to the
   site's own brand teal if a page ever forgets to set it. */

.platform-page { --platform-accent: var(--brand); --platform-accent-soft: var(--brand-soft); }

.platform-hero { position: relative; overflow: hidden; background: var(--background); padding: 64px 0 56px; text-align: center; }
.platform-hero::before {
  content: '';
  position: absolute; top: -200px; right: -180px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--platform-accent) 0%, transparent 70%);
  opacity: .16; pointer-events: none; z-index: 0;
}
.platform-hero > div { position: relative; z-index: 1; }
.platform-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: 9999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-raised);
  font-size: 12.5px; font-weight: 700; color: var(--foreground);
  margin: 0 auto 20px; width: fit-content;
}
.platform-hero h1 {
  font-weight: 900; font-size: 44px; letter-spacing: -.03em; line-height: 1.12;
  margin: 0 auto 16px; max-width: 720px; color: var(--foreground);
}
.platform-hero p { font-size: 17px; color: var(--muted-foreground); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ── Step timeline -- numbered circles connected by a line, each step
   fading/sliding in and its circle switching to the platform's accent
   color the first time it scrolls into view (assets/platform.js). No JS
   / old browser = .in-view is simply never toggled and the CSS default
   (visible, un-highlighted) stands in for it -- content is never hidden
   outright. ── */
/* Longhand (not `padding: 24px 0 88px`) so combining .platform-steps-section
   with .section-pad keeps .section-pad's horizontal padding -- the shorthand
   was zeroing it, pinning the step content to the right edge on mobile. */
.platform-steps-section { position: relative; overflow: hidden; background: var(--platform-accent-soft); padding-top: 24px; padding-bottom: 88px; }
.platform-steps { max-width: 680px; margin: 0 auto; }
.platform-step {
  display: flex; gap: 20px; padding-bottom: 40px; position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-standard), transform .5s var(--ease-standard);
}
.platform-step.in-view { opacity: 1; transform: translateY(0); }
.platform-step:last-child { padding-bottom: 0; }
/* Squiggly connector: a solid-color bar (so it still picks up each
   platform's own --platform-accent) cut into a repeating wave shape via
   mask, instead of a flat line -- mask-repeat means it works at any step
   height without needing a fixed-length SVG. */
.platform-step-line {
  position: absolute; left: 14px; top: 44px; bottom: 0;
  width: 10px; background: var(--platform-accent); opacity: .3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath d='M5,0 C9,4 9,6 5,10 C1,14 1,16 5,20' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath d='M5,0 C9,4 9,6 5,10 C1,14 1,16 5,20' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}
.platform-step:last-child .platform-step-line { display: none; }
.platform-step-num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; position: relative; z-index: 1;
  box-shadow: var(--shadow-raised);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.platform-step.in-view .platform-step-num { background: var(--platform-accent); color: var(--surface); }
.platform-step-body { padding-top: 6px; }
.platform-step-body h3 {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 17.5px; margin: 0 0 10px; color: var(--foreground);
}
.platform-step-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--platform-accent); }
.platform-step-icon svg { width: 100%; height: 100%; }
.platform-step-body p { font-size: 14.5px; line-height: 1.65; color: var(--muted-foreground); margin: 0; max-width: 560px; }

@media (max-width: 640px) {
  .platform-hero h1 { font-size: 32px; }
}

/* No-JS fallback: without assets/platform.js, .in-view never gets added
   and opacity:0 would hide every step permanently. `scripting: none` is a
   real media feature (unlike a JS-set class, which needs JS to exist in
   the first place to ever apply) -- it matches exactly the browsers this
   guards against. */
@media (scripting: none) {
  .platform-step { opacity: 1; transform: none; }
}