/* Shared fixes on top of each guide's own styles: phone layout, tap targets and
   full-size screenshots. Loaded after the page's <style>, so equal selectors win. */

nav.toc a { padding-block: 8px; }

/* Hero logo: the black bird on its own, no dark tile behind it. */
.hero-brand .mark { width: auto; background: none; border-radius: 0; }
.hero-brand img.mark { height: 34px; }

/* Hero "Calculate earnings" chip: glides to the calculator, stopping just above it. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#calc { scroll-margin-top: 24px; }
a.chip, a.pill { text-decoration: none; cursor: pointer; }
a.chip:hover, a.pill:hover { filter: brightness(0.95); }
a.chip:focus-visible, a.pill:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* The +/− sat in a float and dropped below questions that wrap. */
summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
summary::after { float: none; flex: 0 0 auto; }

/* Layout screenshots on their own row, the two finished-clip phones side by side
   under them. Sharing one row split the phones across lines at 780–900px wide. */
.phones .stack { flex-basis: 100%; }
.phones .phone { width: min(220px, calc(50% - 14px)); }

.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 4px solid currentColor; outline-offset: 4px; }
.zoom-box { position: fixed; inset: 0; z-index: 50; display: flex; background: rgba(10, 10, 12, 0.94); }
.zoom-scroll { margin: auto; max-width: 100%; max-height: 100%; overflow: auto; padding: 64px 16px 32px; overscroll-behavior: contain; }
.zoom-scroll img { max-width: none; width: auto; height: auto; border-radius: 6px; }
.zoom-close { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F2EFE9; color: #111113; font: 700 28px/1 system-ui, sans-serif; cursor: pointer; }
.zoom-hint { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom, 0px)); text-align: center; color: #C9C6BF; font: 600 14px/1.3 system-ui, sans-serif; pointer-events: none; }

/* ── Whop and Vyro screens, rebuilt in HTML from the original screenshots so they
   stay sharp at any size. Copy, numbers and layout match what those screens showed
   on 2026-10-27; only the small brand thumbnails are still images. ── */
.ic { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.125em; }

.wm { font-family: "Inter", system-ui, sans-serif; color: #F2F2F2; background: #161618; padding: 14px; line-height: 1.25; }
.wm b { font-weight: 700; }
.wm-dim { color: #8E8E93; font-size: 14px; }
.wm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wm-card { background: #1E1E21; border: 1px solid #2C2C30; border-radius: 16px; padding: 14px 16px 16px; min-width: 0; }
.wm-top { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.wm-av { width: 26px; height: 26px; border-radius: 7px; }
.wm-ver { color: #F5A524; font-size: 17px; }
.wm-plats { margin-left: auto; display: flex; gap: 6px; }
.wm-plats i { width: 30px; height: 30px; border-radius: 50%; background: #2C2C30; display: grid; place-items: center; font-size: 15px; font-style: normal; }
.wm-title { font-size: 19px; font-weight: 700; margin: 14px 0 12px; overflow-wrap: anywhere; }
.wm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wm-money { color: #8E8E93; font-size: 15px; margin-right: auto; }
.wm-money b { color: #D1D1D6; }
.wm-pill, .wm-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: #2C2C30; color: #E5E5EA; }
.wm-rate { background: #0E3B27; color: #34C77B; }
.wm-bar { height: 6px; border-radius: 99px; background: #2C2C30; margin-top: 16px; overflow: hidden; }
.wm-bar span { display: block; height: 100%; border-radius: inherit; background: #E8650F; }
.wm-bar-full { height: 9px; margin-top: 12px; }
.wm-bar-full span { background: linear-gradient(90deg, #FF9F0A, #FF6A00); }
.wm-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wm-plat { background: #1E1E21; border: 1px solid #2C2C30; border-radius: 12px; min-width: 0; }
.wm-plat-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; padding: 12px 14px; border-bottom: 1px solid #2C2C30; }
.wm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wm-stats div { padding: 10px 12px 12px; min-width: 0; }
.wm-stats div + div { border-left: 1px solid #2C2C30; }
.wm-stats span { display: block; font-size: 11.5px; color: #8E8E93; margin-bottom: 8px; white-space: nowrap; }
.wm-stats b { font-size: 16px; }
.wm-budget { padding: 0; display: flow-root; }
.wm-budget-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #2C2C30; font-size: 15px; }
.wm-budget-h span { display: flex; align-items: center; gap: 8px; }
.wm-budget-h .ic { color: #8E8E93; font-size: 13px; }
.wm-budget em, .wm-budget-b em { font-style: normal; color: #FF8A1F; font-weight: 600; font-size: 14px; }
.wm-budget-b { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 16px 0; }
.wm-budget-n { font-size: 22px; color: #8E8E93; font-weight: 600; }
.wm-budget-n b { color: #F2F2F2; }
.wm-budget .wm-bar { margin: 12px 16px 18px; }

.vm { font-family: "Poppins", system-ui, sans-serif; color: #1A1A1A; line-height: 1.3; padding: 18px; }
.vm-ver { font-size: 0.95em; color: #1A1A1A; vertical-align: -0.12em; }
.vm-plats { display: inline-flex; gap: 12px; font-size: 21px; color: #1A1A1A; vertical-align: middle; }
.vm-signup { padding: 30px 32px 26px; text-align: center; }
.vm-signup-h { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.vm-signup-sub { margin: 12px auto 22px; color: #6B7280; font-size: 16px; line-height: 1.5; max-width: none; }
.vm-input { text-align: left; background: #F2F2F2; border: 2px solid #1A1A1A; border-radius: 12px; padding: 14px 16px; color: #9CA3AF; font-size: 15px; }
.vm-btn { border-radius: 999px; padding: 13px; font-weight: 600; font-size: 16px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
.vm-btn-off { background: #F2F2F2; color: #A3A3A3; }
.vm-btn-g { background: #0A0A0A; color: #fff; margin-top: 0; }
.vm-g { width: 20px; height: 20px; position: absolute; left: 26px; }
.vm-or { display: flex; align-items: center; gap: 14px; color: #6B7280; font-size: 16px; margin: 18px 0; }
.vm-or::before, .vm-or::after { content: ""; flex: 1; height: 1px; background: #E5E7EB; }
.vm-fine { font-size: 12.5px; color: #4B5563; line-height: 1.5; margin: 18px 0 0; max-width: none; }
.vm-fine u { text-underline-offset: 2px; }
.vm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; background: #F7F7F8; }
.vm-card { background: #fff; border: 1px solid #ECECEE; border-radius: 22px; padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.vm-card-h { display: flex; gap: 14px; align-items: center; }
.vm-card-h img { width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto; }
.vm-card-h b { display: block; font-size: 18px; font-weight: 600; }
.vm-card-h span { color: #8A8A8E; font-size: 13.5px; }
.vm-card p { margin: 14px 0 18px; font-size: 15px; color: #333; max-width: none; flex: 1; }
.vm-card-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vm-pay { text-align: right; }
.vm-pay b { display: block; font-size: 25px; font-weight: 600; color: #4A4A4A; line-height: 1.1; }
.vm-pay small { font-size: 10.5px; font-weight: 600; color: #6B6B70; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; }
.vm-camp { padding: 26px; }
.vm-camp-h { display: flex; gap: 18px; align-items: center; }
.vm-camp-h img { width: 104px; height: 104px; border-radius: 24px; flex: 0 0 auto; }
.vm-camp-h b { font-size: 16px; font-weight: 600; }
.vm-camp-h strong { display: block; font-size: 22px; font-weight: 600; margin: 4px 0 6px; letter-spacing: -0.01em; }
.vm-camp-h span { color: #8A8A8E; font-size: 14px; }
.vm-camp-h > div { flex: 1; min-width: 0; }
.vm-camp-h em { align-self: flex-start; font-style: normal; font-weight: 600; font-size: 14px; color: #8A8A8E; background: #F2F2F4; border-radius: 12px; padding: 9px 16px; }
.vm-camp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 26px; background: #F6F6F8; border: 1px solid #ECECEE; border-radius: 20px; padding: 18px 6px; text-align: center; }
.vm-camp-stats div { padding: 4px 6px; min-width: 0; }
.vm-camp-stats div + div { border-left: 1px solid #E4E4E8; }
.vm-camp-stats div > span { display: block; font-size: 13.5px; color: #8A8A8E; margin-bottom: 8px; }
.vm-camp-stats b { display: block; font-size: 17px; font-weight: 500; }
.vm-camp-stats small { display: block; font-size: 10px; font-weight: 600; color: #4B4B50; margin-top: 4px; letter-spacing: 0.02em; }
.vm-camp-stats .vm-plats { font-size: 18px; gap: 9px; }

@media (max-width: 760px) {
  .wm-cards, .wm-rates, .vm-cards { grid-template-columns: minmax(0, 1fr); }
  .vm-camp { padding: 18px; }
  .vm-camp-h { gap: 14px; }
  .vm-camp-h img { width: 72px; height: 72px; border-radius: 18px; }
  .vm-camp-h strong { font-size: 18px; }
  .vm-camp-h em { padding: 6px 11px; font-size: 13px; }
  .vm-camp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .vm-camp-stats div + div { border-left: 0; }
  .vm-camp-stats div:last-child { grid-column: 1 / -1; }
  .vm-signup { padding: 24px 20px 20px; }
}

@media (max-width: 760px) {
  /* Section number above its heading, every time (beside it only fitted for short titles). */
  .head { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Step number above the step, so the step's screenshots get the full width. */
  .step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .phones { gap: 16px; }
  .phones .phone { width: calc(50% - 8px); }
  /* Term table as one card per row: three columns of 100px wrapped every few words. */
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: 100%; }
  .tablewrap thead { display: none; }
  .tablewrap tr { padding: 14px 16px; }
  .tablewrap tr + tr { border-top: 2px solid rgba(17, 17, 19, 0.14); }
  .tablewrap td { padding: 0; border: 0; }
  .tablewrap td:first-child { margin-bottom: 4px; }
  .tablewrap td:last-child { margin-top: 6px; font-size: 15px; color: #5E5E66; }
  .tablewrap td:last-child::before { content: "e.g. "; font-weight: 700; }
}

/* Phones: "Get started with Zoupyu" pinned to the bottom, to the sign-up page. It
   slides away while reading down and comes back on any scroll up (guide.js), like
   the landing page's sticky button. Each page colours its own button. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .sticky-cta.show { transform: none; }
  .sticky-cta a { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; text-decoration: none; transition: transform 0.1s; }
  .sticky-cta a:active { transform: scale(0.98); }
  .sticky-cta a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }