/* ═══════════════════════════════════════════════════════════════════════════
   sk2-s4.css — the Bookings + Channel partners product pages (S4), from the
   founder-approved landing redesign of 16 Oct 2026 (artifact YWpx2m7mXpByFq9q46xAyN).
   Daylight tokens only (sk2-tokens.css); every rule scoped under .sk2, no
   !important (landing/test_sk_css.py). Desktop → tablet (≤1000) → phone (≤560).
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hero stage: the desktop screen, the phone beside it, and the facts as cards. */
.sk2 .s4stage { position:relative; max-width:1180px; margin:64px auto 0; padding:0 150px 40px 0; }
.sk2 .s4stage--left { padding:0 0 40px 205px; }
.sk2 .s4stage .reveal__glow { z-index:0; }
.sk2 .s4stage__desk { position:relative; z-index:1; }
.sk2 .s4stage__phone { position:absolute; z-index:2; right:0; top:70px; width:250px; }
.sk2 .s4stage--left .s4stage__phone { right:auto; left:0; top:60px; }
.sk2 .phn { background:var(--sk2-ink); border-radius:38px; padding:10px; box-shadow:var(--sk2-sh-3); }
.sk2 .phn img { display:block; width:100%; height:auto; border-radius:29px; }
.sk2 .s4chip { position:absolute; z-index:3; width:260px; display:flex; gap:10px; align-items:flex-start; text-align:left;
  background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:var(--sk2-r2); padding:12px 14px;
  box-shadow:var(--sk2-sh-2); font-size:13px; line-height:1.4; color:var(--sk2-ink-2); }
.sk2 .s4chip b { display:block; color:var(--sk2-ink); font-size:13.5px; }
.sk2 .s4chip--1 { left:-12px; bottom:120px; }
.sk2 .s4chip--2 { left:260px; bottom:-6px; }
.sk2 .s4stage--left .s4chip--1 { left:auto; right:-12px; bottom:80px; }
.sk2 .s4chip__ic { width:28px; height:28px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.sk2 .s4chip__ic--bad { background:var(--sk2-risk-wash); color:var(--sk2-risk); }
.sk2 .s4chip__ic--ok { background:var(--sk2-good-wash); color:var(--sk2-good); }
.sk2 .s4chip__ic--brand { background:var(--sk2-brand-wash); color:var(--sk2-brand); }

/* How a visit happens — five numbered steps on a dashed line. */
.sk2 .s4flow { list-style:none; margin:56px 0 0; padding:0; position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; }
.sk2 .s4flow::before { content:""; position:absolute; left:8%; right:8%; top:27px; border-top:2px dashed var(--sk2-brand-line); }
.sk2 .s4flow li { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.sk2 .s4flow__n { width:56px; height:56px; border-radius:18px; background:var(--sk2-paper); border:1px solid var(--sk2-brand-line);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--sk2-brand); font-size:18px; box-shadow:var(--sk2-sh-1); }
.sk2 .s4flow li b { display:block; font-size:16px; line-height:1.25; }
.sk2 .s4flow li span:not(.s4flow__n) { display:block; font-size:14px; color:var(--sk2-ink-2); line-height:1.45; margin-top:4px; }

/* Set up for your business — one card per industry. */
.sk2 .s4inds { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-top:48px; }
.sk2 .s4ind { background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:var(--sk2-r3); padding:20px; display:flex; flex-direction:column; gap:10px; }
.sk2 .s4ind--on { border:2px solid var(--sk2-brand); box-shadow:var(--sk2-sh-2); }
.sk2 .s4ind b { font-size:17px; }
.sk2 .s4pills { display:flex; flex-wrap:wrap; gap:6px; }
.sk2 .s4pills span { font-size:12.5px; font-weight:600; background:var(--sk2-brand-wash); color:var(--sk2-brand-deep); border-radius:999px; padding:3px 10px; }
.sk2 .s4ind__note { font-size:13.5px; color:var(--sk2-ink-2); }

/* From register to payout — six steps, the money step tinted. */
.sk2 .s4jour { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; margin-top:56px; }
.sk2 .s4js { background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.sk2 .s4js--money { background:linear-gradient(155deg, var(--sk2-brand-wash) 0%, var(--sk2-paper) 70%); border-color:var(--sk2-brand-line); }
.sk2 .s4js__k { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px; color:var(--sk2-ink-3); }
.sk2 .s4js b { font-size:15.5px; line-height:1.25; }
.sk2 .s4js > span:not(.s4js__k) { font-size:13.5px; color:var(--sk2-ink-2); line-height:1.45; }
.sk2 .s4sum { margin:6px 0 0; display:grid; grid-template-columns:1fr auto; gap:2px 10px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.sk2 .s4sum dt, .sk2 .s4sum dd { margin:0; }
.sk2 .s4sum .s4sum__tot { font-weight:800; border-top:1px solid var(--sk2-line); padding-top:4px; }
.sk2 .s4note { text-align:center; font-size:13px; color:var(--sk2-ink-2); margin:16px 0 0; }

/* Two sides, one truth. */
.sk2 .s4two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-top:52px; }
.sk2 .s4side { border-radius:24px; padding:28px; background:var(--sk2-paper); border:1px solid var(--sk2-line); }
.sk2 .s4side--p { background:var(--sk2-ink); border-color:var(--sk2-ink); color:#fff; }
.sk2 .s4side h3 { margin:0 0 14px; font-size:20px; letter-spacing:-.02em; }
.sk2 .s4side ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sk2 .s4side li { display:flex; gap:10px; font-size:15px; line-height:1.45; }
.sk2 .s4side li::before { content:"✓"; font-weight:800; color:var(--sk2-good); }
.sk2 .s4side--p li { color:#E4E1FF; }
.sk2 .s4side--p li::before { color:#9F94FF; }
.sk2 .s4side li.no::before { content:"✕"; color:#F08A7E; }

/* A phone screenshot in a feature row. */
.sk2 .s4phonecell { display:flex; justify-content:center; padding:20px 0; border-radius:var(--sk2-r2);
  background:linear-gradient(155deg, var(--sk2-brand-wash) 0%, var(--sk2-paper) 60%); }
.sk2 .s4phonecell .phn { width:240px; }

@media (max-width: 1000px) {
  .sk2 .s4stage { padding-right:110px; }
  .sk2 .s4stage--left { padding:0 0 40px 120px; }
  .sk2 .s4stage__phone { width:200px; }
  .sk2 .s4chip--2 { display:none; }
  .sk2 .s4flow { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:34px; }
  .sk2 .s4flow::before { display:none; }
  .sk2 .s4inds { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sk2 .s4jour { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .sk2 .s4two { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .sk2 .s4stage, .sk2 .s4stage--left { padding:0 0 24px; margin-top:40px; }
  .sk2 .s4stage__desk, .sk2 .s4chip { display:none; }
  .sk2 .s4stage__phone, .sk2 .s4stage--left .s4stage__phone { position:relative; top:0; left:auto; right:auto; width:250px; margin:0 auto; }
  .sk2 .s4flow { grid-template-columns:1fr; gap:18px; }
  .sk2 .s4flow li { flex-direction:row; align-items:flex-start; text-align:left; gap:14px; }
  .sk2 .s4flow__n { flex-shrink:0; }
  .sk2 .s4inds, .sk2 .s4jour { grid-template-columns:1fr; }
}
.sk2 .ovw .pshot.s4phonecell { display:flex; justify-content:center; align-items:center; }