
.ipu-page {
  --ipu-purple:       #7c3aed;
  --ipu-purple-dark:  #6d28d9;
  --ipu-purple-light: #a78bfa;
  --ipu-ink:          #101424;
  --ipu-line:         #e9e8ef;
  --ipu-wa:           #25d366;
  --ipu-wa-dark:      #1ebe5d;
  --ipu-amber:        #f59e0b;
  --ipu-green:        #22c55e;
  --ipu-red:          #ef4444;
  color: var(--ipu-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── SHARED ── */
.ipu-eyebrow { display: inline-block; margin-bottom: 14px; color: var(--ipu-purple); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.ipu-section-title { margin: 0; color: var(--ipu-ink); font-size: clamp(30px, 2.9vw, 44px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.ipu-section-text { margin: 16px 0 0; color: #6f7584; font-size: 14px; line-height: 1.75; }
.ipu-prose { color: #454d5e; font-size: 14.5px; line-height: 1.78; }
.ipu-prose p { margin: 0 0 14px; }
.ipu-prose p:last-child { margin-bottom: 0; }
.ipu-prose strong { color: var(--ipu-ink); font-weight: 800; }

/* ── BUTTONS ── */
.ipu-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; color: #fff !important; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--ipu-purple-dark), var(--ipu-purple) 55%, #9333ea); box-shadow: 0 10px 26px rgba(124,58,237,.22); font-size: 14px; font-weight: 700; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.ipu-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124,58,237,.3); }
.ipu-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; color: #1a2030 !important; border: 1.5px solid #c4b8f7; border-radius: 10px; background: rgba(255,255,255,.9); font-size: 14px; font-weight: 700; text-decoration: none !important; transition: transform .2s, border-color .2s; }
.ipu-btn-outline:hover { border-color: var(--ipu-purple); transform: translateY(-2px); }
.ipu-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 32px; color: #fff !important; border: 0; border-radius: 12px; background: var(--ipu-wa); box-shadow: 0 12px 30px rgba(37,211,102,.28); font-size: 15px; font-weight: 700; text-decoration: none !important; transition: background .2s, transform .2s, box-shadow .2s; }
.ipu-wa-btn:hover { background: var(--ipu-wa-dark); transform: translateY(-2px); }
.ipu-outline-dark { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; color: rgba(255,255,255,.86) !important; border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13.5px; font-weight: 700; text-decoration: none !important; transition: background .2s, border-color .2s, transform .2s; }
.ipu-outline-dark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.38); transform: translateY(-2px); }
.ipu-text-link { color: var(--ipu-purple); font-weight: 700; font-size: 12.5px; text-decoration: none; }
.ipu-text-link:hover { color: var(--ipu-purple-dark); text-decoration: underline; }

/* ── HERO ── */
.ipu-hero { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
.ipu-hero-bg { position: absolute; inset: 0; z-index: -2; background: url("/wp-content/uploads/2026/09/iptv-player-uk.webp") center right / cover no-repeat; }
.ipu-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 28%, rgba(255,255,255,.93) 42%, rgba(255,255,255,.52) 56%, rgba(255,255,255,.06) 72%, rgba(255,255,255,0) 84%); pointer-events: none; }
.ipu-hero-title { margin: 0; color: var(--ipu-ink); font-size: clamp(44px, 4.8vw, 66px); font-weight: 800; line-height: .98; letter-spacing: -.05em; }
.ipu-hero-title span { display: block; margin-top: 8px; font-size: .62em; font-weight: 700; line-height: 1.06; letter-spacing: -.04em; color: #3a4258; }
.ipu-hero-desc { max-width: 560px; margin: 20px 0 0; color: #596174; font-size: 17px; line-height: 1.65; }
.ipu-trust-div { width: 1px; height: 18px; background: #d4d6df; }

/* ── QUICK PICKS BAR ── */
.ipu-picks-bar { background: #0f0c1d; }
.ipu-pick-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; }
.ipu-pick-label { color: var(--ipu-purple-light); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ipu-pick-val { color: #fff; font-size: 12.5px; font-weight: 800; }
.ipu-pick-div { width: 1px; height: 28px; background: rgba(255,255,255,.12); }

/* ── WARNING BANNER ── */
.ipu-warning { padding: 14px 18px; border-radius: 10px; background: linear-gradient(90deg, #fffbeb, #fff); border: 1.5px solid #fcd34d; display: flex; align-items: flex-start; gap: 12px; }
.ipu-warning-icon { color: var(--ipu-amber); font-size: 18px; flex: 0 0 20px; margin-top: 1px; }
.ipu-warning p { margin: 0; color: #78350f; font-size: 12.5px; font-weight: 600; line-height: 1.58; }
.ipu-warning strong { color: #92400e; }

/* ── MASTER COMPARISON TABLE ── */
.ipu-table-wrap { overflow-x: auto; border: 1px solid var(--ipu-line); border-radius: 16px; box-shadow: 0 8px 26px rgba(18,23,38,.05); }
.ipu-cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 780px; }
.ipu-cmp-table th, .ipu-cmp-table td { padding: 12px 14px; border-bottom: 1px solid #eeedf4; vertical-align: middle; }
.ipu-cmp-table tr:last-child td { border-bottom: 0; }
.ipu-cmp-table thead th { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.3; }
.ipu-cmp-table thead th:first-child { text-align: left; background: #f5f4fb; color: #6b7280; border-radius: 14px 0 0 0; min-width: 130px; }
.ipu-th-1 { background: linear-gradient(135deg, #faf7ff, #f3eeff); color: var(--ipu-purple-dark); }
.ipu-th-2 { background: #f0fdf6; color: #15803d; }
.ipu-th-3 { background: #eff6ff; color: #1d4ed8; }
.ipu-th-4 { background: #fdf4ff; color: #7e22ce; }
.ipu-th-5 { background: #fff7ed; color: #c2410c; }
.ipu-th-6 { background: #f0f9ff; color: #0369a1; }
.ipu-th-7 { background: #fafafa; color: #374151; border-radius: 0 14px 0 0; }
.ipu-cmp-table td:first-child { font-weight: 700; color: #363d52; font-size: 12px; }
.ipu-cmp-table td:not(:first-child) { text-align: center; }
.ipu-cmp-table tbody tr:nth-child(odd) td { background: #faf9ff; }
.ipu-cmp-table tbody tr:nth-child(odd) td:first-child { background: #f7f6fc; }
.ipu-cmp-table tbody tr:nth-child(even) td { background: #fff; }
.ipu-yes { color: var(--ipu-green); font-size: 16px; line-height: 1; }
.ipu-no  { color: var(--ipu-red);   font-size: 16px; line-height: 1; }
.ipu-part { color: var(--ipu-amber); font-size: 11px; font-weight: 700; }
.ipu-winner { display: inline-block; padding: 2px 8px; border-radius: 20px; background: linear-gradient(135deg, var(--ipu-purple-dark), #8b5cf6); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ipu-winner-g { background: linear-gradient(135deg, #15803d, #22c55e); }

/* ── APP REVIEW CARDS ── */
.ipu-app-card { border: 1px solid var(--ipu-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(18,23,38,.05); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.ipu-app-card-featured { border: 2px solid var(--ipu-purple); background: linear-gradient(180deg, #faf7ff 0%, #fff 20%); }
.ipu-app-header { padding: 24px 24px 0; }
.ipu-app-rank { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.ipu-rank-1 { background: linear-gradient(135deg, var(--ipu-purple-dark), #8b5cf6); color: #fff; }
.ipu-rank-2 { background: #f0fdf6; color: #15803d; border: 1px solid #bbf7d0; }
.ipu-rank-3 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.ipu-rank-4 { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.ipu-rank-5 { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ipu-rank-6 { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.ipu-rank-7 { background: #fafafa; color: #374151; border: 1px solid #e5e7eb; }
.ipu-app-name { color: var(--ipu-ink); font-size: 20px; font-weight: 900; letter-spacing: -.03em; margin: 0 0 4px; }
.ipu-app-tagline { color: #6f7584; font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.ipu-app-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ipu-meta-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.ipu-meta-free { background: #f0fdf6; color: #15803d; border: 1px solid #bbf7d0; }
.ipu-meta-paid { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.ipu-meta-os { background: #f5f4fb; color: #4b5563; border: 1px solid #e5e7eb; }
.ipu-meta-code { background: #0f0c1d; color: var(--ipu-purple-light); font-family: monospace; font-size: 12px; font-weight: 800; border-radius: 7px; padding: 5px 10px; letter-spacing: .04em; }
.ipu-app-body { padding: 0 24px 24px; flex: 1; display: flex; flex-direction: column; }
.ipu-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.ipu-pros, .ipu-cons { padding: 14px; border-radius: 10px; }
.ipu-pros { background: #f0fdf6; border: 1px solid #bbf7d0; }
.ipu-cons { background: #fef2f2; border: 1px solid #fecaca; }
.ipu-pros h4, .ipu-cons h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.ipu-pros h4 { color: #15803d; }
.ipu-cons h4 { color: #dc2626; }
.ipu-pros ul, .ipu-cons ul { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 5px; }
.ipu-pros ul li, .ipu-cons ul li { color: #374151; font-size: 11.5px; line-height: 1.4; }
.ipu-verdict { padding: 14px 16px; border-radius: 10px; background: #faf8ff; border-left: 3px solid var(--ipu-purple); margin-top: auto; }
.ipu-verdict p { margin: 0; color: #3d3560; font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.ipu-verdict strong { color: var(--ipu-purple-dark); }
.ipu-install-box { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #0f0c1d; }
.ipu-install-label { color: rgba(255,255,255,.5); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.ipu-install-val { color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.ipu-install-code { color: var(--ipu-purple-light); font-family: monospace; font-size: 14px; font-weight: 900; }
.ipu-app-divider { width: 100%; height: 1px; background: var(--ipu-line); margin: 0 24px 18px; width: calc(100% - 48px); }

/* ── DEVICE PICKER ── */
.ipu-device-tab-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ipu-device-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1.5px solid #e4e2ef; border-radius: 50px; background: #fff; color: #2b3044; font-size: 12.5px; font-weight: 700; cursor: default; }
.ipu-device-tab-best { border-color: var(--ipu-purple); background: #faf8ff; color: var(--ipu-purple-dark); }
.ipu-device-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid #e8e7ef; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(18,23,38,.04); margin-bottom: 10px; }
.ipu-device-icon { font-size: 22px; flex: 0 0 32px; text-align: center; }
.ipu-device-name { color: var(--ipu-ink); font-size: 13.5px; font-weight: 800; min-width: 120px; }
.ipu-device-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.ipu-app-chip { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.ipu-chip-top { background: linear-gradient(135deg, var(--ipu-purple-dark), #8b5cf6); color: #fff; }
.ipu-chip-alt { background: #f0fdf6; color: #15803d; border: 1px solid #bbf7d0; }
.ipu-chip-ok { background: #f5f4fb; color: #4b5563; border: 1px solid #e5e7eb; }

/* ── HOW TO INSTALL SECTION ── */
.ipu-install-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border: 1px solid #e8e7ef; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(18,23,38,.03); }
.ipu-install-num { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--ipu-purple-dark), var(--ipu-purple)); box-shadow: 0 5px 14px rgba(124,58,237,.22); }
.ipu-install-step h3 { margin: 0 0 4px; color: var(--ipu-ink); font-size: 14px; font-weight: 800; line-height: 1.28; }
.ipu-install-step p { margin: 0; color: #6f7584; font-size: 12.5px; line-height: 1.6; }
.ipu-path { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding: 7px 11px; border: 1px solid #e4e2ef; border-radius: 8px; background: #faf8ff; font-size: 11.5px; }
.ipu-path-s { color: var(--ipu-purple-dark); font-weight: 800; white-space: nowrap; }
.ipu-path-a { color: #a0a6b8; font-size: 10px; }

/* ── HIGHLIGHT ── */
.ipu-highlight { padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, #faf7ff, #f3eeff); border: 1px solid rgba(124,58,237,.14); }
.ipu-highlight p { margin: 0; color: #3d3560; font-size: 13px; font-weight: 600; line-height: 1.65; }

/* ── FAQ ── */
.ipu-faq { background: linear-gradient(180deg, #fbfaff 0%, #fff 100%); }
.ipu-faq-accordion .accordion-item { overflow: hidden; border: 1px solid #e8e7ef !important; border-radius: 11px !important; background: #fff; box-shadow: 0 5px 16px rgba(18,23,38,.03); }
.ipu-faq-accordion .accordion-button { min-height: 62px; padding: 16px 18px; color: #1b1f2d; background: #fff; box-shadow: none !important; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.ipu-faq-accordion .accordion-button:not(.collapsed) { color: var(--ipu-purple-dark); background: #fbf9ff; }
.ipu-faq-accordion .accordion-button:hover { color: var(--ipu-purple-dark); }
.ipu-faq-accordion .accordion-button::after { width: 25px; height: 25px; flex: 0 0 25px; margin-left: 14px; display: flex; align-items: center; justify-content: center; content: "+"; color: #343947; border-radius: 50%; background: #f5f4f8; background-image: none !important; font-size: 17px; font-weight: 500; transform: none !important; }
.ipu-faq-accordion .accordion-button:not(.collapsed)::after { content: "\\2212"; color: #fff; background: var(--ipu-purple); }
.ipu-faq-accordion .accordion-body { padding: 0 18px 19px; color: #6f7583; background: #fbf9ff; font-size: 12.5px; line-height: 1.72; }
.ipu-faq-accordion .accordion-body p { margin: 0; }
.ipu-faq-accordion .accordion-body p + p { margin-top: 8px; }
.ipu-faq-accordion .accordion-body a { display: inline-flex; margin-top: 10px; color: var(--ipu-purple); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.ipu-faq-accordion .accordion-body a:hover { color: #5b21b6; text-decoration: underline; }

/* ── FINAL CTA ── */
.ipu-final { background: linear-gradient(135deg, #0d0b1a 0%, #1a0e35 48%, #0f1324 100%); position: relative; overflow: hidden; isolation: isolate; }
.ipu-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 65% at 78% 50%, rgba(124,58,237,.2), transparent 68%), radial-gradient(ellipse 38% 48% at 18% 60%, rgba(37,211,102,.07), transparent 64%); }
.ipu-final-eyebrow { display: inline-block; margin-bottom: 16px; color: var(--ipu-purple-light); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ipu-final-title { margin: 0; color: #fff; font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.ipu-final-text { max-width: 560px; margin: 18px auto 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.68; }
.ipu-final-note { margin-top: 16px; color: rgba(255,255,255,.42); font-size: 11.5px; font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 991.98px) {
  .ipu-hero-bg, .ipu-hero::before { display: none; }
  .ipu-pros-cons { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .ipu-hero-title { font-size: clamp(40px, 10vw, 56px); }
  .ipu-device-row { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .ipu-hero-title { font-size: clamp(36px, 10.5vw, 50px); }
  .ipu-faq-accordion .accordion-button { min-height: 56px; padding: 14px 15px; font-size: 12px; }
  .ipu-faq-accordion .accordion-body { padding: 0 15px 17px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ipu-page *, .ipu-page *::before, .ipu-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
