/* TrimPlayer — /switch/* migration pages.
   Pairs with the site's styles.css (load styles.css first for nav/footer/tokens).
   Tokens are re-declared so this file also renders correctly on its own. */
:root{
  --orange:#F57C00; --orange-lt:#FFB74D; --orange-dk:#E65100;
  --bg:#080808; --bg2:#0e0e0e; --surface:#181818; --surface2:#202020;
  --border:rgba(255,255,255,0.06); --border-hover:rgba(245,124,0,0.28);
  --text:#F0F0F0; --text2:#888; --r:14px; --r-lg:22px;
  --ease:cubic-bezier(0.4,0,0.2,1);
}

.btn-large{ padding:0.95rem 2rem; font-size:1rem; }

/* Switch pages load styles.css (fixed, transparent nav) but not main.js (the
   scroll handler that opacifies it), so give the nav a solid background here —
   otherwise content scrolls under a see-through bar. */
body[data-app] .nav{ background:rgba(8,8,8,0.9); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }

/* ── Hero ── */
.sw-hero{ max-width:820px; margin:0 auto; padding:7.5rem 2rem 1rem; text-align:center; }
.sw-hero h1{ margin-bottom:1.1rem; }
.sw-hero-sub{ font-size:1.08rem; max-width:620px; margin:0 auto 2rem; }
.sw-hero-cta{ margin-bottom:2.4rem; }

.sw-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-bottom:0.9rem; }
.sw-chip{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.42rem 0.9rem; border-radius:9999px; font-size:0.82rem; font-weight:600;
  border:1px solid var(--border);
}
.sw-chip.on{ color:#ffd9a8; border-color:var(--border-hover); background:rgba(245,124,0,0.08); }
.sw-chip.off{ color:var(--text2); }
.sw-chips-note{ font-size:0.85rem; max-width:560px; margin:0 auto; color:var(--text2); }

/* ── Callout (e.g. Pocket Casts web-only export) ── */
.sw-callout{
  display:flex; gap:1rem; align-items:flex-start;
  max-width:760px; margin:0 auto 3rem; padding:1.2rem 1.4rem;
  background:rgba(245,124,0,0.07); border:1px solid var(--border-hover); border-radius:var(--r);
}
.sw-callout-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange-lt),var(--orange-dk));
  color:#fff; font-weight:900; display:grid; place-items:center;
}
.sw-callout h4{ margin-bottom:0.25rem; }
.sw-callout p{ font-size:0.9rem; }

/* ── Two-column flow (export | import) ── */
.sw-cols{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.sw-cols.one{ grid-template-columns:1fr; max-width:680px; margin:0 auto; }
.sw-col-title{ margin-bottom:0.3rem; }
.sw-col-sub{ font-size:0.88rem; margin-bottom:1.6rem; }
.sw-col-title + .sw-steps{ margin-top:1.6rem; }

.sw-steps{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.sw-step{
  display:grid; grid-template-columns:auto 1fr; gap:0.5rem 1rem; align-items:start;
  padding:1.1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
}
.sw-step-n{
  grid-row:1 / span 2; width:30px; height:30px; border-radius:50%;
  background:rgba(245,124,0,0.12); color:var(--orange-lt);
  font-weight:800; font-size:0.9rem; display:grid; place-items:center;
}
.sw-step-body h3{ margin-bottom:0.2rem; }
.sw-step-body p{ font-size:0.88rem; }
.sw-step-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.82em;
  background:var(--surface2); padding:0.1em 0.4em; border-radius:5px; color:#ffd9a8;
}

/* Screenshot frame + graceful placeholder when the image is absent */
.sw-shot{ grid-column:2; margin-top:0.5rem; }
.sw-shot img{ width:100%; max-width:280px; border-radius:10px; border:1px solid var(--border); display:block; }
.sw-shot.ph{ min-height:120px; border:1px dashed var(--border-hover); border-radius:10px;
  display:grid; place-items:center; max-width:280px; }
.sw-shot.ph::after{ content:'screenshot ' attr(data-n); color:var(--text2); font-size:0.78rem; }

/* ── Resell strip ── */
.sw-resell h2{ margin-bottom:0.7rem; }
.sw-resell p{ font-size:1.05rem; margin-bottom:1.8rem; }
.sw-resell .gradient-text{ font-weight:800; }

/* ── FAQ ── */
.sw-faq-list{ display:flex; flex-direction:column; gap:0.7rem; }
.sw-faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.sw-faq-item summary{
  cursor:pointer; padding:1.05rem 1.3rem; font-weight:600; font-size:0.96rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.sw-faq-item summary::-webkit-details-marker{ display:none; }
.sw-faq-item summary::after{ content:'+'; color:var(--orange-lt); font-size:1.3rem; font-weight:400; }
.sw-faq-item[open] summary::after{ content:'–'; }
.sw-faq-a{ padding:0 1.3rem 1.15rem; }
.sw-faq-a p{ font-size:0.9rem; }

/* ── Related grid ── */
.sw-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.sw-card{
  padding:1.4rem 1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  display:flex; flex-direction:column; gap:0.4rem; transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.sw-card:hover{ border-color:var(--border-hover); transform:translateY(-2px); }
.sw-card-name{ font-weight:700; font-size:1.05rem; }
.sw-card-go{ color:var(--orange-lt); font-size:0.85rem; }

/* ── Footer CTA ── */
.sw-foot-note{ margin-top:1.2rem; font-size:0.88rem; }
.sw-foot-note a{ color:var(--orange-lt); }

/* ── Optional demo clip ── */
.sw-demo{ display:block; width:100%; max-width:880px; margin:1rem auto 0; border-radius:var(--r-lg);
  border:1px solid var(--border); }

/* ── Responsive ── */
@media (max-width:820px){
  .sw-cols{ grid-template-columns:1fr; gap:2.4rem; }
  .sw-hero{ padding-top:6rem; }
  .sw-shot img, .sw-shot.ph{ max-width:100%; }
}