/* Set-list app gate — editorial copy + decorative phone. Ported from the
   design mockups; legacy --fel accent slot mapped to the clean --accent system
   so it re-skins per section (.section--worship here). */

.setlist-gate-sec { padding: 32px 0; background: var(--paper-3); border-top: 1px solid var(--line); }
.wt-gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.wt-gate-copy .eyebrow { color: var(--accent); }
.wt-gate-copy h2 { font-family: var(--serif); font-weight: 500; font-size: 52px; line-height: 1.1; letter-spacing: -1.1px; margin: 14px 0 16px; color: var(--ink); text-wrap: balance; }
.wt-gate-copy h2 em { color: var(--accent); font-style: normal; }
.wt-gate-copy .lede { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; max-width: 480px; }

.wt-gate-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
.wt-gate-features li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.wt-gate-features li strong { font-family: var(--serif); font-weight: 500; color: var(--ink); display: block; margin-bottom: 2px; font-size: 16px; letter-spacing: -0.2px; }
.wt-gate-features li .check { width: 24px; height: 24px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }

.wt-gate-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wt-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14.5px; border: none; cursor: pointer; font-family: inherit; letter-spacing: -0.1px; box-shadow: 0 6px 18px rgba(165,60,126,0.32); transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.wt-btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(165,60,126,0.40); }

/* Phone mock (decorative). */
.wt-phone-wrap { position: relative; max-width: 340px; margin: 0 auto; }
.wt-phone-custom { width: 100%; height: auto; display: block; }
.wt-phone { width: 340px; height: 700px; background: #0A0A0A; border-radius: 48px; padding: 12px; box-shadow: 0 40px 80px rgba(74,23,56,0.32), 0 16px 32px rgba(0,0,0,0.18); position: relative; }
.wt-phone-screen { width: 100%; height: 100%; background: #FBFAF7; border-radius: 38px; overflow: hidden; position: relative; }
.wt-phone .notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 110px; height: 28px; background: #0A0A0A; border-radius: 999px; z-index: 5; }
.wt-phone-status { position: absolute; top: 16px; left: 0; right: 0; padding: 0 36px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #0A0A0A; z-index: 4; }
.wt-phone-status .icons { display: inline-flex; gap: 6px; align-items: center; }
.wt-phone-status .icons svg { width: 14px; height: 12px; }

.phs { position: absolute; top: 58px; left: 0; right: 0; bottom: 0; padding: 0 20px; overflow: hidden; }
.phs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 8px; }
.phs-back { width: 32px; height: 32px; border-radius: 999px; background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.phs-edit { font-size: 14px; font-weight: 600; color: var(--accent); }
.phs-cover { aspect-ratio: 1/1; max-width: 180px; margin: 6px auto 14px; border-radius: 18px; background: linear-gradient(135deg, #4A1738 0%, #A862C9 60%, #A53C7E 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; overflow: hidden; position: relative; }
.phs-cover .quad { background-color: rgba(255,255,255,0.10); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; color: #fff; font-size: 22px; }
.phs-cover .quad:nth-child(1) { background-color: rgba(255,255,255,0.18); }
.phs-cover .quad:nth-child(4) { background-color: rgba(255,255,255,0.16); }
.phs-title { font-family: var(--serif); font-size: 22px; font-weight: 500; text-align: center; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.3px; }
.phs-sub { font-size: 12px; color: var(--ink-3); text-align: center; margin: 0 0 16px; }
.phs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #1D8E3D; background: rgba(52,199,89,0.14); padding: 4px 10px; border-radius: 999px; margin: 0 auto 16px; align-self: center; }
.phs-status .d { width: 6px; height: 6px; border-radius: 999px; background: #34C759; }
.phs-songs { display: flex; flex-direction: column; gap: 0; }
.phs-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0.5px solid #E5E5EA; }
.phs-handle { width: 16px; color: #C7C7CC; }
.phs-num { width: 18px; font-family: var(--serif); font-size: 14px; color: #98989D; text-align: center; }
.phs-info { flex: 1; min-width: 0; }
.phs-info .pt { font-family: var(--serif); font-size: 14px; font-weight: 500; color: #1C1C1E; margin: 0; letter-spacing: -0.1px; }
.phs-info .pa { font-size: 11px; color: #98989D; margin: 0; }
.phs-key { padding: 2px 7px; border-radius: 6px; background: var(--accent-tint); color: var(--accent); font-family: var(--serif); font-size: 12px; font-weight: 500; }
.phs-cta { position: absolute; bottom: 24px; left: 20px; right: 20px; background: var(--accent); color: #fff; border-radius: 14px; padding: 14px; text-align: center; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(165,60,126,0.34); }

.wt-phone-lock { position: absolute; inset: 12px; border-radius: 38px; background: linear-gradient(180deg, rgba(251,250,247,0.0) 0%, rgba(74,23,56,0.6) 50%, rgba(74,23,56,0.94) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 28px 36px; pointer-events: none; }
.wt-phone-lock .lock-ico { align-self: center; margin-bottom: 14px; width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.30); }
.wt-phone-lock h4 { font-family: var(--serif); font-weight: 500; color: #fff; font-size: 22px; text-align: center; letter-spacing: -0.3px; margin: 0 0 6px; }
.wt-phone-lock p { font-size: 13px; color: rgba(255,255,255,0.78); text-align: center; margin: 0 0 14px; line-height: 1.5; }

/* RTL: Farsi display faces. */
[dir="rtl"] .wt-gate-copy h2,
[dir="rtl"] .phs-title,
[dir="rtl"] .wt-phone-lock h4 { font-family: var(--farsi); font-weight: 700; letter-spacing: 0; }

@media (max-width: 980px) {
  .wt-gate-grid { grid-template-columns: 1fr; gap: 40px; }
  .wt-gate-copy h2 { font-size: 36px; }
}
@media (max-width: 720px) {
  .wt-gate-copy h2 { font-size: 30px; }
  .wt-phone { width: 280px; height: 580px; }
  .wt-phone-screen { border-radius: 32px; }
  .wt-phone-lock { border-radius: 32px; }
  .phs { padding: 0 16px; }
  .phs-cover { max-width: 140px; }
}