/* Trex IPTV - pages.css: content pages (plans, setup, apps, faq, about, privacy, terms, refund, 404, error page).
   Loaded after site.css on those pages (render_document 'styles' option). Markup: app/handlers/pages.php (pg_*),
   component_downloads() / component_downloads_table() in app/lib/components.php, error_page_html() in render.php.
   Shared classes (.band, .split, .trio, .tile, .letter, .statement, .fact-list, .qa, .faq-grid ...) live in
   site.css; this file only adds what the content pages need. Mobile first; strict CSP (no inline styles). */

/* ---------- page head: a faded crop of the brand art (--art), the narrow reading measure (--doc) ---------- */
/* The art is 2.15 times as wide as its box and pinned right, so only the television wall shows - never the wordmark;
   the crop sits at 44% of the picture (the rows of thumbnails), below the headline painted into the screen. Two
   masks fade it in from the left and from under the floating bar, so nothing of it lies beneath the bar or the
   breadcrumb. Phones (under 600px) get no crop at all: it was a 70 KB file for a dim sliver behind the title.
   The two files it uses are preloaded by render_head() on the pages that carry this head (pages.php). */
.page-head--art::after{content:"";position:absolute;z-index:-1;top:calc(var(--head-h)*-1);right:0;bottom:1px;width:min(100%,780px);background:linear-gradient(180deg,rgba(6,11,23,.3),rgba(6,11,23,.1) 45%,var(--ink-1)),url(/images/trex-iptv-800.webp) 100% 44%/215% auto no-repeat;opacity:.4;-webkit-mask-image:linear-gradient(90deg,transparent,#000 58%),linear-gradient(180deg,transparent var(--head-h),#000 calc(var(--head-h) + 90px));-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 58%),linear-gradient(180deg,transparent var(--head-h),#000 calc(var(--head-h) + 90px));mask-composite:intersect}
.page-head--art h1,.page-head--art .lead{text-shadow:0 2px 20px rgba(3,6,13,.8)}
.page-head--doc>.wrap,.doc--legal{width:min(100% - var(--gut)*2,940px)}
@media (max-width:599px){.page-head--art::after{display:none}}
@media (min-width:900px){.page-head--art::after{opacity:.6;background-image:linear-gradient(180deg,rgba(6,11,23,.3),rgba(6,11,23,.1) 45%,var(--ink-1)),url(/images/trex-iptv-1200.webp)}}

/* ---------- shared pieces ---------- */
.pg-related .related{padding:clamp(38px,5.6vw,68px) 0 clamp(34px,5vw,56px)}
.pg-related:last-child .related{padding-bottom:clamp(48px,7vw,84px)}
.pg-intro{display:grid;gap:1rem;margin-bottom:clamp(24px,3.6vw,40px)}
.pg-cols{display:grid;gap:1rem;margin-top:clamp(22px,3.2vw,36px)}
/* tiles that each hold a whole section; a --wide one spans the row and sets its paragraphs in columns */
.tile-grid{display:grid;gap:14px}
.tile-grid .tile h2{font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem)}
.tile__cols{display:grid;gap:1rem}
/* running text never runs past about 75 characters a line (--measure at 16px, 36rem at 17px), whatever box it sits in */
:root{--measure:34.5rem}
.page-head .lead,.sec-intro{max-width:36rem}
.band .prose>p:not(.big),.pg-cols>p,.tile__cols>p,.tile-grid .tile>p,.duo>.tile>p,.statement__cell>p,.callout>span,.nf__main>p,.qa p,.fact__rest{max-width:var(--measure)}
.callout{max-width:41rem}
.band .faq-grid{margin-top:14px}
.band .sec-head+.faq-grid,.fq .faq-grid{margin-top:0}
/* tablets: question cards two to a row already (site.css starts at 960px), which keeps the answers at a readable measure */
@media (min-width:760px) and (max-width:959px){
  .faq-grid{grid-template-columns:1fr 1fr}
  .faq-grid>.sec-head{margin:0;padding-right:12px;align-self:center}
}
@media (min-width:900px){
  .pg-cols{grid-template-columns:1fr 1fr;gap:20px 64px}
  .tile-grid{grid-template-columns:1fr 1fr;gap:16px}
  .tile--wide{grid-column:1/-1}
  .tile__cols--2{grid-template-columns:1fr 1fr;gap:20px 48px}
}
@media (min-width:1080px){.tile__cols--3{grid-template-columns:repeat(3,1fr);gap:20px 40px}}
@media (min-width:940px){.pg-intro{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:72px;align-items:end}}
/* "On this page": numbered in-page links. --side = card beside the text, --row = one line of chips */
.toc{padding:18px 20px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.toc-title{margin-bottom:8px;color:var(--text-3);font:700 .75rem/1 var(--font);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase}
.toc ol{counter-reset:toc}
.toc li{counter-increment:toc}
.toc li+li{border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:2em 1fr;padding:9px 0;color:var(--text-2);font-size:.9375rem;line-height:1.35;text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--gold-2);font-size:.8125rem;font-weight:700;line-height:1.56;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--gold-1)}
.toc--row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(20px,3vw,32px);padding:14px 18px}
.toc--row .toc-title{margin:0}
.toc--row ol{display:flex;flex-wrap:wrap;gap:8px}
.toc--row li+li{border:0}
.toc--row a{display:flex;gap:8px;align-items:baseline;padding:11px 14px;border:1px solid var(--line-2);border-radius:99px;background:rgba(255,255,255,.03);color:var(--text);font-weight:550}
.toc--row a:hover{border-color:var(--gold-line);color:var(--text);background:rgba(251,208,125,.06)}
ul.list--no li::before{left:3px;top:.42em;width:13px;height:13px;border:0;transform:none;background:linear-gradient(45deg,transparent 43%,var(--bad) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--bad) 43% 57%,transparent 57%)}

/* ---------- /plans ---------- */
.pl-stage>.stage{padding-block:clamp(20px,3.1vw,44px) clamp(18px,2.4vw,32px)}
/* live price ledger (inside a .letter card): plan name | the sentence about it */
.ledger{padding:4px 20px 8px}
.ledger li{display:grid;gap:2px 20px;padding:15px 0}
.ledger li+li{border-top:1px solid var(--line)}
.ledger__k{color:var(--text);font:800 1.25rem/1.3 var(--font);font-stretch:86%}
.ledger__v{color:var(--text-2);font-variant-numeric:tabular-nums}
/* name and sentence share a line wherever the card is wide enough for the sentence to stay on one line */
@media (min-width:560px) and (max-width:939px),(min-width:1240px){.ledger li{grid-template-columns:6.2rem 1fr;align-items:baseline}}
@media (min-width:1240px){.trio--ledger{grid-template-columns:minmax(0,4fr) minmax(0,5.6fr)}}
/* device examples: four figure cards */
.examples{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.examples li{display:flex;flex-direction:column;padding:16px 14px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(6,39,79,.6),rgba(255,255,255,.02) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.examples__n{display:flex;gap:5px;margin-bottom:14px;color:var(--blue-2)}
.examples__k{margin-bottom:8px;line-height:1.35}
.examples__v{margin-top:auto;color:var(--text);font:800 clamp(1.5rem,1.05rem + 2vw,2.25rem)/1 var(--font);font-stretch:80%;font-variant-numeric:tabular-nums}
/* label cards ("What is not on offer"): the struck icon says "not sold" without a word */
.lcards{display:grid;gap:12px}
.lcard{padding:22px 20px 24px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(6,11,23,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.lcard__ico{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:13px;color:var(--blue-1);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.lcard__ico.is-struck::after{content:"";position:absolute;left:5px;right:5px;top:calc(50% - 1px);height:2px;border-radius:2px;background:var(--bad);box-shadow:0 0 0 2px #0a1830;transform:rotate(-45deg)}
.lcard__k{display:block;margin-bottom:8px;color:var(--text);font:800 1.375rem/1.1 var(--font);font-stretch:86%}
@media (min-width:600px){.lcards{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .examples{grid-template-columns:repeat(4,1fr);gap:14px}
  .examples li{padding:22px 22px 24px}
}
@media (min-width:1080px){.lcards{grid-template-columns:repeat(4,1fr)}}

/* ---------- /setup: "On this page" beside one panel per section ---------- */
/* phones: ruled sections, so the cards inside them get the full width; from 720px each section is a panel */
.guide{display:grid;gap:18px;padding-top:clamp(20px,3.2vw,40px)}
.guide__body{display:grid;min-width:0}
.gs{padding:30px 0 32px;border-top:1px solid var(--line)}
.gs:first-child{padding-top:10px;border-top:0}
.gs__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gs__head>.ico{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;color:var(--gold-2);background:rgba(251,208,125,.09);box-shadow:inset 0 0 0 1px rgba(251,208,125,.26)}
.gs:nth-child(even) .gs__head>.ico{color:var(--blue-2);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.gs__head .idx{margin-bottom:7px}
.gs h2{font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem)}
.gs .prose>p{max-width:var(--measure)}
.gs .callout{margin-top:18px}
.gs__cols{display:grid;gap:18px}
/* two login formats / device -> app map */
.fmt{display:grid;gap:10px;align-content:start}
.fmt li{position:relative;padding:14px 16px 15px 56px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(3,6,13,.34)}
.fmt .ico{position:absolute;left:16px;top:15px;color:var(--blue-2)}
.fmt__k{display:block;margin-bottom:2px;color:var(--text);font-weight:700}
.fmt--map{margin-top:18px}
@media (max-width:479px){.fmt li{padding-left:50px}.fmt .ico{left:13px}}
/* numbered steps */
.gsteps{counter-reset:gst;max-width:37.5rem;margin-top:14px;border-top:1px solid var(--line)}
.gsteps li{counter-increment:gst;position:relative;min-height:56px;padding:14px 0 14px 48px;border-bottom:1px solid var(--line);color:var(--text)}
.gsteps li::before{content:counter(gst);position:absolute;left:0;top:13px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(251,208,125,.1);box-shadow:inset 0 0 0 1px var(--gold-line);color:var(--gold-2);font:800 .9375rem/1 var(--font);font-variant-numeric:tabular-nums}
.gs__cols--steps .callout{max-width:37.5rem;margin-top:0}
/* Windows | Mac */
.pair{display:grid;gap:12px}
.pair__cell{padding:18px 18px 20px;border:1px solid var(--line);border-left:2px solid var(--blue-2);border-radius:4px var(--r-md) var(--r-md) 4px;background:rgba(3,6,13,.34)}
.pair__cell:nth-child(even){border-left-color:var(--gold-2)}
.pair__cell .ico{margin-bottom:12px;color:var(--blue-2)}
/* troubleshooting list: numbered, never a checkbox */
.checks{counter-reset:ck;display:grid;gap:10px;margin-top:18px}
.checks li{counter-increment:ck;position:relative;padding:14px 16px 14px 54px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(3,6,13,.4);color:var(--text)}
.checks li::before{content:counter(ck);position:absolute;left:14px;top:13px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold-line);color:var(--gold-2);font:700 .875rem/1 var(--font)}
/* app rows: the whole row is the link to the file */
.dl-list{display:grid;gap:8px;margin-top:18px}
.dl-list li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) 20px;gap:1px 14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(3,6,13,.34);transition:border-color .2s,background-color .2s}
.dl-list li:hover{border-color:var(--gold-line);background:rgba(251,208,125,.06)}
.dl-ico{color:var(--blue-2)}
.dl-list .dl-ico{grid-row:1/span 2}
.dl-list .dl{grid-column:2;color:var(--text);font-weight:700;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.dl-list .dl::after{content:"";position:absolute;inset:0;border-radius:inherit}
.dl-list .dl:focus-visible{outline:0}
.dl-list .dl:focus-visible::after{outline:2px solid var(--gold-2);outline-offset:2px}
.dl-meta{grid-column:2;color:var(--text-3);font-size:.875rem;line-height:1.4}
.dl-go{grid-column:3;grid-row:1/span 2;width:20px;height:20px;color:var(--gold-2)}
.dl-more{margin-top:18px}
.dl-more .btn{padding-block:12px}
@media (max-width:599px){.dl-more .btn{width:100%}}
@media (max-width:719px){.gs .callout{gap:12px;padding:16px}}
@media (min-width:720px){
  .guide__body{gap:14px}
  .gs,.gs:first-child{padding:28px 28px 30px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .gs--prep{border-color:var(--line-2);background:linear-gradient(140deg,rgba(6,39,79,.62),var(--ink-2) 62%)}
  .gs--checks{border-color:var(--gold-line);background:linear-gradient(140deg,rgba(251,208,125,.08),var(--ink-2) 55%)}
  .fmt--map,.checks,.dl-list{grid-template-columns:1fr 1fr}
  .pair{grid-template-columns:1fr 1fr}
}
@media (min-width:860px){.gs--prep .gs__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}}
@media (min-width:1000px){
  .guide{grid-template-columns:268px minmax(0,1fr);gap:48px;align-items:start}
  .guide>.toc{position:sticky;top:92px}
}
@media (min-width:1180px){
  .gs__cols--steps{grid-template-columns:minmax(0,1fr) 276px;gap:28px;align-items:start}
  .gs__cols--steps .callout{grid-template-columns:1fr;gap:10px;margin-top:14px;padding:18px 18px 20px;line-height:1.55}
}

/* ---------- /apps: the downloads table. Cards (label above each value) below 1000px, a real table from there ---------- */
.dl-table{display:block;font-size:.9375rem}
.dl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dl-table tbody{display:grid;gap:10px}
.dl-table tr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dl-table th,.dl-table td{display:block;padding:0;border:0;white-space:normal}
.dl-table tbody th{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:1.0625rem;line-height:1.25}
.dl-table td{color:var(--text);font-variant-numeric:tabular-nums}
.dl-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--text-3);font:700 .6875rem/1.3 var(--font);font-stretch:108%;letter-spacing:.1em;text-transform:uppercase}
.dl-table td:nth-child(6),.dl-act{grid-column:1/-1}
.dl-act .btn{width:100%}
/* the checksum is working data (the page asks the reader to compare it character by character): readable size, one click selects the whole string */
.hash{display:block;font-size:.8125rem;line-height:1.5;color:var(--text-2);word-break:break-all;-webkit-user-select:all;user-select:all}
@media (max-width:379px){.dl-table td[data-label]::before{font-size:.625rem;letter-spacing:.05em}}
@media (min-width:380px) and (max-width:999px){
  /* the button moves up beside the app name, so a card is one tap target shorter */
  .dl-table tbody th{min-height:54px;padding-right:126px}
  .dl-act{position:absolute;top:14px;right:14px}
  .dl-act .btn{width:auto;min-width:104px;min-height:44px}
}
@media (min-width:680px) and (max-width:999px){.dl-table tbody{grid-template-columns:1fr 1fr;gap:12px}}
@media (min-width:1000px){
  .dl-wrap{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:0 40px 90px -60px rgba(47,123,214,.8),inset 0 1px 0 rgba(255,255,255,.06)}
  .dl-table{display:table;width:100%}
  .dl-table thead{position:static;display:table-header-group;width:auto;height:auto;clip-path:none}
  .dl-table tbody{display:table-row-group}
  .dl-table tr{display:table-row;border:0;border-radius:0;background:none;box-shadow:none}
  .dl-table th,.dl-table td{display:table-cell;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
  .dl-table thead th{padding-block:14px;line-height:1.35}
  .dl-table thead th:first-child{padding-left:20px}
  .dl-table tbody th{position:relative;display:table-cell;padding:13px 14px 13px 58px;font-size:1rem}
  .dl-table tbody th .dl-ico{position:absolute;left:20px;top:50%;margin-top:-12px}
  .dl-table tbody tr:last-child>*{border-bottom:0}
  .dl-table tbody tr:hover{background:rgba(255,255,255,.03)}
  .dl-table td{color:var(--text-2)}
  .dl-table td[data-label]::before{display:none}
  .dl-table td:nth-child(-n+5){white-space:nowrap}
  .dl-table td:nth-child(6){width:30%}
  .dl-act{padding-right:18px;text-align:right;white-space:nowrap}
  .dl-act .btn{width:auto;min-width:104px}
}
@media (min-width:1000px) and (max-width:1199px){
  /* small laptops: the four short columns shrink to their content and the app name takes what is left */
  .dl-table{font-size:.875rem}
  .dl-table th,.dl-table td{padding-inline:10px}
  .dl-table tbody th{padding-left:50px;font-size:.9375rem}
  .dl-table tbody th .dl-ico{left:14px}
  .dl-table thead th:first-child{padding-left:14px}
  .dl-table td:nth-child(-n+5){width:1%}
  .dl-table td:nth-child(6){width:240px}
  .dl-act{padding-right:12px}
  .dl-act .btn{min-width:92px;padding-inline:12px}
}

/* ---------- /about, /privacy, /terms, /refund: long-form reading (17px, about 70 characters a line) ---------- */
.doc{display:grid;gap:34px;padding-top:clamp(26px,4vw,52px)}
.doc__body{min-width:0;max-width:35.5rem;font-size:1.0625rem;line-height:1.72}
.doc-sec+.doc-sec{margin-top:clamp(30px,4.2vw,46px);padding-top:clamp(28px,4vw,42px);border-top:1px solid var(--line)}
.doc-sec>*+*{margin-top:1.05rem}
.doc-sec>.idx{margin-bottom:12px}
.doc-sec>.idx+h2{margin-top:0}
.doc-sec h2{font-size:clamp(1.4375rem,1.2rem + 1vw,1.875rem);line-height:1.14}
.doc-sec .list{gap:12px}
.doc--legal .doc__aside{display:none}
@media (min-width:640px) and (max-width:939px){.doc__body{max-width:38rem;font-size:1.125rem}}
@media (min-width:940px){
  .doc{grid-template-columns:minmax(0,35.5rem) minmax(0,1fr);gap:64px;align-items:start}
  .doc__aside,.doc--legal .doc__aside{display:block;position:sticky;top:92px}
  .doc--legal .doc__aside{justify-self:end;width:100%;max-width:288px}
  .doc--art{gap:88px}
}

/* ---------- 404 ---------- */
.nf{display:grid;gap:34px;padding-block:clamp(22px,4vw,48px) clamp(48px,7vw,84px)}
.nf__main::before{content:"404";display:block;margin-bottom:18px;font:900 clamp(5.5rem,24vw,10.5rem)/.78 var(--font);font-stretch:62%;color:transparent;-webkit-text-stroke:1.5px rgba(251,208,125,.66);-webkit-user-select:none;user-select:none}
.nf__main>*+*{margin-top:1rem}
.nf__main h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.05rem)}
.nf__links{display:grid;gap:10px;margin-top:22px}
.nf__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.03);color:var(--text);font-weight:550;text-decoration:none;transition:border-color .2s,background-color .2s}
.nf__links a::after{content:"";flex:none;width:8px;height:8px;border:solid var(--gold-2);border-width:1.8px 1.8px 0 0;transform:rotate(45deg)}
.nf__links a:hover{border-color:var(--gold-line);background:rgba(251,208,125,.06);color:var(--text)}
.nf__home{margin-top:22px}
@media (max-width:479px){.nf__home .btn{width:100%}}
@media (min-width:560px){.nf__links{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.nf{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:72px;align-items:center}}

/* ---------- plain error page (error_page_html) ---------- */
.err-page{display:grid;align-items:center;min-height:100vh;background:radial-gradient(70% 60% at 0% 0%,rgba(6,39,79,.8),transparent 70%),radial-gradient(50% 50% at 100% 0%,rgba(229,151,68,.12),transparent 70%),var(--ink-1)}
.err__brand .brand{font-size:1.375rem}
.err__brand .brand-mark{width:42px;height:42px}
.err__card{margin-top:22px;padding:26px 22px 28px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--ink-2);box-shadow:0 50px 110px -60px rgba(47,123,214,.9),inset 0 1px 0 rgba(255,255,255,.07)}
.err__card>*+*{margin-top:16px}
.err__card h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem)}
@media (min-width:620px){.err__card{padding:36px 36px 38px}}

@media (forced-colors:active){.gs,.lcard,.examples li,.dl-table tr,.toc,.err__card{border:1px solid ButtonText}}