/* FDS IPTV Player guides: shares the homepage palette (cream, gold, espresso). */
:root { --amber:#a8660a; --gold:#f5b921; --gold-2:#ffd978; --navy:#1c120a; --brown:#3a2412; --ink:#1d140c; --muted:#6e6152; --bg:#fbf7ef; --line:#efe3cc; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { overflow-x:clip; }
body { font-family:Inter, system-ui, sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; }
a { color:var(--amber); }
img { max-width:100%; height:auto; }
h1, h2, h3 { font-family:Montserrat, sans-serif; letter-spacing:-.02em; line-height:1.1; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.narrow { max-width:760px; margin:0 auto; padding:0 20px; }

.top { position:sticky; top:0; z-index:10; background:rgba(255,251,243,.93); backdrop-filter:blur(14px); box-shadow:0 6px 30px rgba(60,35,10,.08); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font:900 17px Montserrat; color:var(--ink); white-space:nowrap; }
.logo img { width:38px; height:38px; border-radius:10px; }
.logo b { color:var(--gold); }
.top nav { display:flex; gap:24px; font-weight:600; font-size:14px; }
.top nav a { color:var(--ink); text-decoration:none; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font:800 14px Montserrat; text-decoration:none; white-space:nowrap; }
.btn.gold { background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1a1300; box-shadow:0 10px 26px rgba(245,185,33,.4); }
.btn.dark { background:linear-gradient(180deg, #33200f, #150d06); color:var(--gold-2); border:1px solid rgba(245,185,33,.55); }

.hero { background:radial-gradient(120% 120% at 10% 0%, #5a3a17, var(--navy) 60%); color:#fff; padding:64px 0 56px; }
.eyebrow { font:800 12px Montserrat; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }
.hero h1 { font-size:clamp(32px,5vw,54px); font-weight:900; margin:12px 0 14px; }
.hero h1 i { color:var(--gold); }
.hero p { color:#eadcc6; font-size:18px; max-width:680px; }
.meta { margin-top:16px; font-size:14px; color:#cdb99b; }
.crumbs { font-size:13px; color:#cdb99b; margin-bottom:18px; }
.crumbs a { color:#cdb99b; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:56px 0 80px; }
.card { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 18px 44px rgba(60,35,10,.07); transition:transform .2s ease, border-color .2s ease; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-5px); border-color:var(--gold); }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.card .t { padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .tag { font:800 11px Montserrat; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.card h2 { font-size:20px; }
.card p { color:var(--muted); font-size:15px; line-height:1.55; }
.card .more { margin-top:auto; font:800 14px Montserrat; color:var(--amber); }

article { padding:48px 0 30px; }
article h2 { font-size:28px; margin:42px 0 14px; }
article h3 { font-size:20px; margin:28px 0 10px; }
article p, article li { font-size:17px; color:#3b3024; }
article p { margin:0 0 16px; }
article ul, article ol { margin:0 0 18px 22px; display:grid; gap:8px; }
article strong { color:var(--ink); }
.lead { font-size:19px !important; color:var(--ink) !important; }
.tldr { background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:16px; padding:20px 22px; margin:0 0 28px; }
.tldr b { font-family:Montserrat; display:block; margin-bottom:6px; }
.note { background:#fbf0da; border-radius:14px; padding:16px 18px; font-size:15px !important; }
table { width:100%; border-collapse:collapse; margin:0 0 22px; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); font-size:15px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#fbf0da; font-family:Montserrat; font-size:14px; }
.shot { margin:8px 0 26px; }
.shot img { width:100%; border-radius:16px; display:block; box-shadow:0 18px 44px rgba(60,35,10,.15); }
.shot figcaption { font-size:13px; color:var(--muted); margin-top:8px; text-align:center; }
.cta-box { margin:40px 0 10px; background:linear-gradient(160deg, var(--brown), var(--navy)); color:#fff; border-radius:24px; padding:30px 28px; border:1.5px solid rgba(245,185,33,.6); }
.cta-box h2 { margin:0 0 8px; color:#fff; font-size:24px; }
.cta-box p { color:#eadcc6; }
.cta-box .row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.faq summary { cursor:pointer; font:800 16px Montserrat; }
.faq details p { margin:8px 0 0; }
.related { padding:10px 0 70px; }
.related h2 { font-size:22px; margin-bottom:14px; }
.related a { display:block; padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; text-decoration:none; }

.foot { background:radial-gradient(120% 90% at 15% 0%, #4a2f12 0%, var(--navy) 55%, #0c0703 100%); color:#d9cbb4; padding:36px 0; font-size:14px; }
.foot .wrap { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot a { color:#d9cbb4; margin-right:16px; text-decoration:none; }
.foot a:hover { color:var(--gold-2); }
.legal h2 { scroll-margin-top:84px; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; }
.toc a { font:700 13px Inter, sans-serif; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); padding:7px 12px; border-radius:999px; }
.toc a:hover { border-color:var(--gold); color:var(--amber); }
.legal table td:first-child { font-weight:600; width:34%; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

@media (max-width:900px) {
  .top nav { display:none; }
  .cards { grid-template-columns:1fr; }
  article h2 { font-size:24px; }
  article p, article li { font-size:16px; }
}
@media (max-width:520px) { .logo { font-size:15px; gap:8px; } .logo img { width:32px; height:32px; } .top .btn { padding:10px 14px; font-size:12px; } }