/* nafza.app: shared base for the new site (app identity: «ليل هادي», design-system/nafza/MASTER.md).
   Raw values live only in :root. Logical CSS only; no letter-spacing; no text-transform. */
@font-face{font-family:"Readex Pro";font-weight:400;font-display:swap;src:url(../fonts/readex-pro-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Readex Pro";font-weight:600;font-display:swap;src:url(../fonts/readex-pro-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Readex Pro";font-weight:400;font-display:swap;src:url(../fonts/readex-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Readex Pro";font-weight:600;font-display:swap;src:url(../fonts/readex-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  /* colour: a-night */
  --page:#07080B;--bg:#0E0F13;--surface:#17181D;--surface-2:#1F2026;--surface-3:#13141A;--border:#2A2C33;
  --text:#F2F2F4;--muted:#A3A6AF;--tint-ink:#D2C9FF;--ok:#34C77B;--on-accent:#FFFFFF;
  --a:#D6277E;--b:#6B4EFF;--grad:linear-gradient(135deg,var(--a),var(--b));
  --tint:linear-gradient(135deg,rgba(214,39,126,.20),rgba(107,78,255,.26));--tint-bd:rgba(150,120,255,.38);
  --wash:rgba(107,78,255,.10);--hi:rgba(255,255,255,.07);--lo:rgba(0,0,0,.55);--scrim:rgba(14,15,19,.94);
  /* scales */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-1:12px;--r-2:20px;--r-3:28px;--r-pill:999px;
  --t-s:.9375rem;--t-base:1.0625rem;--t-l:1.25rem;--t-xl:1.75rem;--t-2xl:clamp(1.875rem,3.4vw,2.625rem);--t-hero:clamp(2.25rem,5vw,3.75rem);
  --font-head:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;--font-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --raise:inset 0 1px 0 var(--hi),0 6px 14px var(--lo);--lift:0 24px 60px var(--lo);
  --dur:150ms;--ease:cubic-bezier(.2,.7,.2,1);
  --hit:48px;--wrap:1200px;--gutter:clamp(16px,4vw,40px);--head-h:68px;--logo-h:30px;--bw:1px;
  --badge-h:44px;--play-h:calc(var(--badge-h) * 1.488);--play-pad:calc(var(--badge-h) * -.244);
  --measure:34rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block-start:calc(var(--head-h) + var(--s-5));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);line-height:1.8;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.35;margin:0;text-wrap:balance}
h1{font-size:var(--t-hero);line-height:1.3}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-l)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--tint-ink);text-underline-offset:.25em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--tint-ink);outline-offset:3px;border-radius:var(--r-1)}
.wrap{width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto}
.muted{color:var(--muted)}
.lead{font-size:var(--t-l);line-height:1.8;color:var(--muted);max-width:var(--measure)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header: one calm bar, like the app's TV header */
.head{position:sticky;inset-block-start:0;z-index:20;background:var(--scrim);border-block-end:var(--bw) solid var(--border)}
.head .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:var(--head-h)}
.logo{display:inline-flex;align-items:center;min-height:var(--hit)}
.logo img{height:var(--logo-h);width:auto}
.nav{display:flex;gap:var(--s-1);margin-inline-start:auto}
.nav a{display:inline-flex;align-items:center;min-height:var(--hit);padding-inline:var(--s-3);border-radius:var(--r-pill);color:var(--muted);text-decoration:none;font-size:var(--t-s);transition:color var(--dur) var(--ease)}
.nav a:hover{color:var(--text)}
.lang{display:inline-flex;align-items:center;min-height:var(--hit);padding-inline:var(--s-4);border:var(--bw) solid var(--border);border-radius:var(--r-pill);color:var(--text);text-decoration:none;font-size:var(--t-s)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--hit);padding-inline:var(--s-5);border-radius:var(--r-pill);background:var(--grad);color:var(--on-accent);font-family:var(--font-head);font-weight:600;font-size:var(--t-s);text-decoration:none;box-shadow:var(--raise)}
.btn-quiet{background:var(--surface);border:var(--bw) solid var(--border);color:var(--text);box-shadow:none}
@media (max-width:900px){.nav{display:none}.head .lang{margin-inline-start:auto}.head .btn{display:none}}

/* store badges: official artwork, unaltered, equal visible height */
.stores{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.badge{display:inline-flex;height:var(--badge-h);align-items:center}
.badge img{height:100%;width:auto;max-width:none}
.badge[data-store="play"] img{height:var(--play-h);margin-inline:var(--play-pad)}
.stores-row{display:flex;flex-direction:column;gap:var(--s-3)}
.store-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.stores-row .what{font-size:var(--t-s);color:var(--muted)}
a.badge{min-height:var(--hit);height:auto}
a.badge img{height:var(--badge-h)}

/* designed store cards: scaled only: no crop, no border, no radius, no overlay */
.shot{display:block;width:100%;height:auto;box-shadow:var(--lift)}

/* real TV screens (16:9), framed like a TV */
.tv{display:block;background:var(--page);border:var(--s-2) solid var(--page);border-radius:var(--r-1);box-shadow:0 0 0 var(--bw) var(--border),var(--lift)}
.tv img{width:100%;aspect-ratio:16/9;border-radius:var(--s-1)}

/* sections */
.sec{padding-block:var(--s-9)}
.sec-tight{padding-block:var(--s-8)}
.sec-head{display:grid;gap:var(--s-3);margin-block-end:var(--s-7);max-width:44rem}
.sec-head p{color:var(--muted)}
.band{background:var(--page);border-block:var(--bw) solid var(--border)}
.more{display:inline-flex;align-items:center;min-height:var(--hit);font-family:var(--font-head);font-weight:600;font-size:var(--t-s);text-decoration:none;color:var(--tint-ink)}
.more:hover{text-decoration:underline}
.ticks{display:grid;gap:var(--s-2)}
.ticks li{position:relative;padding-inline-start:var(--s-5);color:var(--muted)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;width:var(--s-2);height:var(--s-2);border-radius:var(--r-pill);background:var(--grad)}

/* how it works: a real sequence */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);counter-reset:step}
.step{counter-increment:step;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-6)}
.step::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);border-radius:var(--r-pill);background:var(--tint);border:var(--bw) solid var(--tint-bd);color:var(--tint-ink);font-family:var(--font-head);font-weight:600;font-size:var(--t-l);margin-block-end:var(--s-4)}
.step h3{margin-block-end:var(--s-2)}
.step p{color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* TV platforms line */
.plat{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-7);align-items:center}
.plat p{color:var(--muted);margin-block-start:var(--s-3);max-width:var(--measure)}
@media (max-width:820px){.plat{grid-template-columns:1fr;gap:var(--s-6)}}

/* three plain facts in a row (no icon cards) */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.also li{display:grid;gap:var(--s-1);align-content:start;padding-block-start:var(--s-4);position:relative}
.also li::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:var(--s-7);height:3px;border-radius:var(--r-pill);background:var(--grad)}
.also p{color:var(--muted)}
.also + .more{margin-block-start:var(--s-4)}
@media (max-width:820px){.also{grid-template-columns:1fr;gap:var(--s-5)}}

/* kids: real TV screens (no designed card exists) */
.kids{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-5);align-items:center}
.kids .txt{display:grid;gap:var(--s-3)}
.kids .txt p{color:var(--muted)}
@media (max-width:900px){.kids{grid-template-columns:1fr 1fr}.kids .txt{grid-column:1/-1}}
@media (max-width:520px){.kids{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:var(--s-3);max-width:52rem}
.faq details{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--s-8);padding:var(--s-3) var(--s-5);cursor:pointer;font-family:var(--font-head);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:var(--s-3);height:var(--s-3);border-inline-end:2px solid var(--tint-ink);border-block-end:2px solid var(--tint-ink);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 var(--s-5) var(--s-5);color:var(--muted);max-width:46rem}

/* closing call */
.cta{display:grid;grid-template-columns:1fr auto;gap:var(--s-7);align-items:center;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-7)}
.cta p{color:var(--muted);margin-block-start:var(--s-2)}
@media (max-width:900px){.cta{grid-template-columns:1fr;padding:var(--s-6) var(--s-5);gap:var(--s-5)}}

/* footer */
.foot{background:var(--page);border-block-start:var(--bw) solid var(--border);padding-block:var(--s-7) var(--s-6);font-size:var(--t-s)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot h3{font-size:var(--t-base);margin-block-end:var(--s-2)}
.foot ul{display:grid;gap:var(--s-2);justify-items:start}
.foot a{display:inline-flex;align-items:center;min-height:var(--hit);min-width:var(--hit);color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}
.foot .logo img{height:var(--logo-h)}
.foot .about p{color:var(--muted);max-width:22rem;margin-block-start:var(--s-2)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);margin-block-start:var(--s-6);padding:var(--s-4) var(--s-1) 0;border-block-start:var(--bw) solid var(--border);color:var(--muted)}
.foot .base .lang{color:var(--text)}
@media (max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}

@media (max-width:640px){
  :root{--badge-h:40px}
  .sec{padding-block:var(--s-8)}
  .sec-tight{padding-block:var(--s-7)}
  .sec-head{margin-block-end:var(--s-6)}
  .lead{font-size:var(--t-base)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Direction C «قل للتلفزيون»: the hero is the app's own command field; each command leads to a room of the page.
   The page is cut by where you use the app (the remote, at home, in the shop, the evening, the kids), one calm panel each. */
.hero-c{padding-block:var(--s-8) var(--s-9)}
.hero-c .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:var(--s-8);align-items:center}
.hero-c h1{font-size:clamp(2.25rem,4.2vw,3.25rem)}
.hero-c .copy{display:grid;gap:var(--s-5);justify-items:start}
.hero-c .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);width:100%}
.hero-c .note{font-size:var(--t-s);color:var(--muted)}

/* the command field: same parts as the assistant page in the app (field, gradient mic key, command chips) */
.ask{display:grid;gap:var(--s-3);width:100%;max-width:32rem}
.ask-field{display:flex;align-items:center;gap:var(--s-3);min-height:var(--s-8);padding:var(--s-2);padding-inline-start:var(--s-5);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-pill);box-shadow:var(--raise)}
.ask-field .say{flex:1;font-family:var(--font-head);font-size:var(--t-l);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-field .mic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);border-radius:var(--r-pill);background:var(--grad);color:var(--on-accent)}
.ask-field .mic svg{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips a{display:inline-flex;align-items:center;min-height:var(--hit);padding-inline:var(--s-4);border-radius:var(--r-pill);background:var(--tint);border:var(--bw) solid var(--tint-bd);color:var(--tint-ink);text-decoration:none;font-size:var(--t-s)}
.chips a:hover{color:var(--text)}
.ask small{font-size:var(--t-s);color:var(--muted)}

.rooms{display:grid;gap:var(--s-6)}
.room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:var(--s-8);align-items:center;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-7)}
.room h2{font-size:clamp(1.5rem,2.5vw,2rem)}
.room .txt{display:grid;gap:var(--s-4);justify-items:start;max-width:30rem}
.room .txt > p{color:var(--muted)}
.room .said{display:inline-flex;align-items:center;min-height:var(--s-6);padding-inline:var(--s-4);border-radius:var(--r-pill);background:var(--tint);border:var(--bw) solid var(--tint-bd);color:var(--tint-ink);font-size:var(--t-s)}
.room .pics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.room .links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
.duo .room{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:var(--s-6);align-items:start}
.duo .room .txt{max-width:none}
.duo .room .pics{grid-template-columns:minmax(0,340px);justify-content:center}
.room.kidsroom .pics .tv{align-self:center}

@media (max-width:1100px){
  .hero-c .wrap{grid-template-columns:1fr;gap:var(--s-7)}
  .room{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-6) var(--s-5)}
  .duo{grid-template-columns:1fr}
  .duo .room{padding:var(--s-6) var(--s-5)}
}
@media (max-width:640px){
  .hero-c{padding-block:var(--s-7) var(--s-8)}
  .room .pics:not(.reel){grid-template-columns:1fr;max-width:340px;width:100%;justify-self:center}
  .room{padding:var(--s-5) var(--s-4)}
  .duo .room{padding:var(--s-5) var(--s-4)}
  .ask-field .say{font-size:var(--t-base)}
}

/* nafza.app: inner pages and the shell parts added after direction C was chosen. Tokens come from base.css.
   Logical CSS only; no letter-spacing; no text-transform. */
:root{--ok-ink:#7FE0AE;--ok-wash:rgba(52,199,123,.14);--ok-bd:rgba(52,199,123,.4);--gold-ink:#F1CF8A;--gold-wash:rgba(241,207,138,.12);--gold-bd:rgba(241,207,138,.4);--pic:340px;--pic-land:560px;--menu-line:2px}
html[lang="en"]{--t-base:1rem;--t-s:.9rem;--t-l:1.1875rem}
html[lang="en"] body{line-height:1.65}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{line-height:1.2}
.dim{color:var(--muted)}
.skip{position:absolute;inset-inline-start:var(--s-4);inset-block-start:calc(-1 * var(--s-9));z-index:30;padding:var(--s-3) var(--s-4);border-radius:var(--r-1);background:var(--surface-2);color:var(--text)}
.skip:focus{inset-block-start:var(--s-3)}

/* header: current page, and the phone menu (no script) */
.nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.mnav{display:none;position:relative}
.mnav summary{display:inline-flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);border:var(--bw) solid var(--border);border-radius:var(--r-pill);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span,.mnav summary span::before,.mnav summary span::after{display:block;width:var(--s-5);height:var(--menu-line);border-radius:var(--r-pill);background:var(--text)}
.mnav summary span{position:relative}
.mnav summary span::before,.mnav summary span::after{content:"";position:absolute;inset-inline-start:0}
.mnav summary span::before{inset-block-start:calc(-1 * var(--s-2))}
.mnav summary span::after{inset-block-start:var(--s-2)}
.mnav nav{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + var(--s-3));display:grid;min-width:15rem;padding:var(--s-2);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-2);box-shadow:var(--lift)}
.mnav nav a{display:flex;align-items:center;min-height:var(--hit);padding-inline:var(--s-4);border-radius:var(--r-1);color:var(--text);text-decoration:none}
.mnav nav a[aria-current="page"]{background:var(--surface-2)}
@media (max-width:1060px){.nav{display:none}.head .lang{margin-inline-start:auto}.head .btn{display:none}.mnav{display:block}}

/* top of an inner page */
.phead{padding-block:var(--s-7) var(--s-8)}
.phead .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-8);align-items:center}
.phead.solo .wrap{grid-template-columns:1fr}
.phead .copy{display:grid;gap:var(--s-4);justify-items:start}
.phead h1{font-size:clamp(2rem,4vw,3rem)}
.pair.n1{width:var(--pic)}
.pair.n2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);width:calc(2 * var(--pic) - var(--s-8))}
.pair.land{width:var(--pic-land)}
.doc-head{padding-block:var(--s-6) 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:var(--t-s);color:var(--muted)}
.crumbs li + li::before{content:"/";margin-inline-end:var(--s-2);color:var(--border)}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--hit);min-width:var(--hit)}
.crumbs li{display:inline-flex;align-items:center;min-height:var(--hit)}
.crumbs a:hover{color:var(--text)}
.count{font-family:var(--font-head);font-size:var(--t-s);color:var(--tint-ink)}
.mail{font-family:var(--font-head);font-size:var(--t-l);display:inline-flex;align-items:center;min-height:var(--hit)}
@media (max-width:1000px){.phead .wrap{grid-template-columns:1fr;gap:var(--s-6)}.pair.n1,.pair.n2,.pair.land{width:100%;max-width:var(--pic-land);justify-self:center}.pair.n1:not(.land){max-width:var(--pic)}}
@media (max-width:640px){.phead{padding-block:var(--s-5) var(--s-7)}}

/* chapters: a picture with its text beside it, alternating sides */
.chapters{display:grid;gap:var(--s-8);max-width:1000px}
.chap{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s-8);align-items:center}
.chap.wide{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.chap .txt{display:grid;gap:var(--s-4);max-width:31rem;justify-items:start}
.chap .txt > p{color:var(--muted);font-size:var(--t-l);line-height:1.8}
.chap:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.chap.wide:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,480px)}
.chap:nth-child(even) .pic{order:2}
.chap.nopic,.chap.nopic:nth-child(even){grid-template-columns:1fr}
.chap.nopic .txt,.chap.nopic:nth-child(even) .txt{justify-self:start;max-width:44rem}
.chap:nth-child(even) .txt{justify-self:end}
@media (max-width:900px){
  .chap,.chap:nth-child(even),.chap.wide,.chap.wide:nth-child(even){grid-template-columns:1fr;gap:var(--s-5)}
  .chap .pic,.chap:nth-child(even) .pic{order:2;max-width:420px;justify-self:center;width:100%}
  .chap.wide .pic{max-width:var(--pic-land)}
  .chap:nth-child(even) .txt{justify-self:start}
  .chap .txt > p{font-size:var(--t-base)}
}

/* home and library panels with real TV screens */
.room .pics:has(> :only-child){grid-template-columns:minmax(0,300px);justify-content:center}
.room .pics.screens:has(> :only-child){grid-template-columns:minmax(0,440px)}
.room .names{display:block;font-size:var(--t-s);margin-block-start:var(--s-2)}
.sec-head .more{justify-self:start}
.more{min-width:var(--hit)}

/* plain lists of named things */
.slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--s-5) var(--s-6)}
.slist li{display:grid;gap:var(--s-1);align-content:start;padding-block-start:var(--s-4);position:relative}
.slist li::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:var(--bw);background:var(--border)}
.slist p{color:var(--muted)}
.slist + .more{margin-block-start:var(--s-4)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.rel li{display:grid;gap:var(--s-1);align-content:start}
.rel a{display:inline-flex;align-items:center;min-height:var(--hit);min-width:var(--hit);font-family:var(--font-head);font-weight:600;font-size:var(--t-s);text-decoration:none}
.rel a:hover{text-decoration:underline}
.rel p{color:var(--muted)}
.note{display:grid;gap:var(--s-3);justify-items:start;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-6);max-width:52rem}
.note h2{font-size:var(--t-xl)}
.note p{color:var(--muted)}
.note-line{margin-block-start:var(--s-6);font-size:var(--t-s);max-width:52rem}
@media (max-width:820px){.rel{grid-template-columns:1fr}}

/* tags: free, points, business */
.tag{display:inline-flex;align-items:center;min-height:var(--s-6);padding-inline:var(--s-3);border-radius:var(--r-pill);font-size:var(--t-s);white-space:nowrap;border:var(--bw) solid}
.t-free{background:var(--ok-wash);border-color:var(--ok-bd);color:var(--ok-ink)}
.t-points{background:var(--tint);border-color:var(--tint-bd);color:var(--tint-ink)}
.t-paid{background:var(--gold-wash);border-color:var(--gold-bd);color:var(--gold-ink)}

/* features */
.fkey{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7);margin:0}
.fkey div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.fkey dd{margin:0;color:var(--muted)}
.fgroups{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.fgroup,.plan{display:grid;gap:var(--s-4);align-content:start;justify-items:start;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-6)}
.fgroup header,.plan header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%}
.fgroup h2,.plan h2{font-size:var(--t-xl)}
.fgroups .note-line{grid-column:1/-1;margin:0}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:start}
.plan > p{color:var(--muted)}
@media (max-width:820px){.fgroups,.plans{grid-template-columns:1fr}.fgroup,.plan{padding:var(--s-5) var(--s-4)}}

/* support and contact */
.sup{display:grid;gap:var(--s-7)}
.sgroup{display:grid;gap:var(--s-4)}
.sgroup h2{font-size:var(--t-xl)}
.faq details p a{display:inline-flex;align-items:center;min-height:var(--hit)}
.note .btn + .more{margin-inline-start:0}
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.ccards li{display:grid;gap:var(--s-2);align-content:start;justify-items:start;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-3);padding:var(--s-6)}
.ccards h2{font-size:var(--t-l)}
.ccards p{color:var(--muted)}
@media (max-width:820px){.ccards{grid-template-columns:1fr}}

/* legal text */
.doc{max-width:46rem;margin-inline:auto;padding-block:var(--s-5) var(--s-8);display:grid;gap:var(--s-4)}
.doc h1{font-size:clamp(2rem,4vw,2.75rem)}
.doc h2{font-size:var(--t-xl);margin-block-start:var(--s-5)}
.doc p,.doc li{color:var(--muted)}
.doc b{color:var(--text);font-weight:600}
.doc ul{display:grid;gap:var(--s-2);list-style:disc;padding-inline-start:var(--s-5)}
.doc a{overflow-wrap:anywhere}
.doc .small{font-size:var(--t-s)}

/* footer */
.foot h2{font-size:var(--t-base);margin-block-end:var(--s-2)}
.foot .tm{flex:1 1 20rem;font-size:var(--t-s)}

/* nafza.app: TV brands (owner 2026-11-10: «شكل الشركات يكون سليدر رايح جاي وشغل نظيف»).
   The slider: rows of equal wordmark tiles, Latin names as the brands write them, each row gliding against the one above.
   The supported TVs page: search box, sticky system index, one section per system, one small card per brand.
   Tokens come from base.css. Logical CSS only; no letter-spacing; no text-transform. */
:root{--tile-h:56px;--tile-min:8.75rem;--tile-gap:var(--s-3);--slide-step:2.8s;--fade:var(--s-8);--find-h:56px;--bar-h:52px;--ico:22px;--card-min:17rem;--line:2px}

/* ---------- the slider ---------- */
.bslide{display:grid;gap:var(--tile-gap);min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.brow{display:flex;width:max-content;animation:slide calc(var(--n) * var(--slide-step)) linear infinite}
.brow.rev{animation-direction:reverse}
.bgroup{display:flex;gap:var(--tile-gap);padding-inline-end:var(--tile-gap)}
.btile{display:flex;align-items:center;justify-content:center;height:var(--tile-h);min-width:var(--tile-min);padding-inline:var(--s-5);border-radius:var(--r-1);background:var(--surface);border:var(--bw) solid var(--border);color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:var(--t-base);line-height:1;white-space:nowrap;text-decoration:none;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btile:hover,.btile:focus-visible{color:var(--text);border-color:var(--tint-bd)}
.bslide:hover .brow,.bslide.hold .brow{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
/* keyboard focus, or reduced motion: a plain row that scrolls, one copy of the tiles */
.bslide.plain{overflow-x:auto}
.bslide.plain .brow{animation:none}
.bslide.plain [aria-hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bslide{overflow-x:auto}.bslide [aria-hidden]{display:none}}
@media (max-width:640px){:root{--tile-h:52px;--tile-min:7.5rem;--fade:var(--s-6)}}

/* the slider with its line above it (home, remote) */
.brands{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin-block-start:var(--s-6)}
.brands-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s-4);color:var(--muted);font-size:var(--t-s)}
.slide-sec{padding-block:var(--s-6)}

/* ---------- supported TVs: search ---------- */
.find{position:relative;display:flex;align-items:center;width:100%;max-width:32rem;margin-block-start:var(--s-2)}
html:not(.js) .find{visibility:hidden} /* the box needs the script; its room is kept so nothing moves when it appears */
.find-none[hidden]{display:none}
.find svg{position:absolute;inset-inline-start:var(--s-5);width:var(--ico);height:var(--ico);color:var(--muted);pointer-events:none}
.find input{width:100%;min-height:var(--find-h);margin:0;padding-block:0;padding-inline:calc(var(--s-5) + var(--ico) + var(--s-3)) var(--s-5);border-radius:var(--r-pill);border:var(--bw) solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);box-shadow:var(--raise);-webkit-appearance:none;appearance:none}
.find input::placeholder{color:var(--muted);opacity:1}
.find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.find input:focus-visible{outline:var(--line) solid var(--tint-ink);outline-offset:calc(-1 * var(--bw));border-radius:var(--r-pill)}
.find-status{min-height:1.8em;font-size:var(--t-s);color:var(--tint-ink)}
.find-none{padding-block:var(--s-7) var(--s-5);color:var(--muted)}
.find-none a{display:inline-flex;align-items:center;min-height:var(--hit)}

/* ---------- supported TVs: sticky index of the systems ---------- */
.sysbar{position:sticky;inset-block-start:var(--head-h);z-index:15;background:var(--scrim);border-block-end:var(--bw) solid var(--border)}
.js .sysbar{inset-block-start:calc(var(--head-h) - var(--head-tuck))}
.sysbar-row{display:flex;gap:var(--s-5);overflow-x:auto;scrollbar-width:none;padding-inline:max(var(--gutter),(100% - var(--wrap)) / 2)}
.sysbar-row::-webkit-scrollbar{display:none}
.sysbar a{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:var(--bar-h);min-width:var(--hit);color:var(--muted);font-family:var(--font-head);font-size:var(--t-s);text-decoration:none;white-space:nowrap;transition:color var(--dur) var(--ease)}
.sysbar a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:var(--line);border-radius:var(--r-pill);background:var(--grad);transform:scaleX(0);transition:transform var(--m-base) var(--ease)}
.sysbar a:hover,.sysbar a[aria-current]{color:var(--text)}
.sysbar a[aria-current]::after{transform:scaleX(1)}
html:has(.sysbar){scroll-padding-block-start:calc(var(--head-h) + var(--bar-h) + var(--s-4))}

/* ---------- supported TVs: one section per system ---------- */
.sysec{padding-block:var(--s-8)}
.sysec .sec-head{margin-block-end:var(--s-5)}
.sysec.off,.brand.off{display:none}
.sys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--s-6);margin:0 0 var(--s-5);padding:var(--s-5) var(--s-6);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-2)}
.sys:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.sys div{display:grid;gap:var(--s-1);align-content:start}
.sys dt{font-family:var(--font-head);font-weight:600;font-size:var(--t-s);color:var(--tint-ink)}
.sys dd{margin:0;color:var(--muted);font-size:var(--t-s)}

/* one small card per brand: wordmark, keyword heading, one or two factual lines */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min)),1fr));gap:var(--s-4)}
.brand{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-2);transition:border-color var(--m-base) var(--ease)}
.band .brand,.band .sys{background:var(--surface-3)}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.wm{font-family:var(--font-head);font-weight:600;font-size:var(--t-l);line-height:1.4;color:var(--text)}
.aka{font-size:var(--t-s);color:var(--muted);white-space:nowrap}
.brand h3{font-size:var(--t-s);line-height:1.6;color:var(--tint-ink)}
.brand p{font-size:var(--t-s);line-height:1.75;color:var(--muted)}
.brand .links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-block:auto calc(-1 * var(--s-3));font-size:var(--t-s);color:var(--muted)}
.brand:target,.brand.hit{border-color:var(--tint-bd)}
.brand.hit::after{content:"";position:absolute;inset:calc(-1 * var(--bw));border-radius:inherit;border:var(--line) solid var(--tint-ink);opacity:0;pointer-events:none;animation:hit 1.4s var(--ease)}
@keyframes hit{from{opacity:.9}to{opacity:0}}
.note-line{padding-block-end:var(--s-7)}

@media (max-width:1000px){.sys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sysec{padding-block:var(--s-7)}
  .sys{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) var(--s-4)}
  .sys:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
  .brand{padding:var(--s-4)}
  .bgrid{gap:var(--s-3)}
}
.phead.solo:has(.find){padding-block-end:var(--s-5)}

/* nafza.app: the site's motion system (owner 2026-11-10: «الموقع نفسه يكون حركات وانميشن مش ثابت»). Calm, fast, once.
   - Only transform and opacity move. Colour changes are short fades on hover or focus.
   - `.js` and `.motion` are put on <html> by js/site.js. Nothing is hidden without them: with no script the page is whole.
   - Under prefers-reduced-motion the script never adds `.motion`, and base.css switches every transition and animation off.
   Tokens: --m-fast (hover, press), --m-base (state change), --m-slow (reveal), --m-fade (cross-fade), --ease, --ease-io. */
:root{--m-fast:150ms;--m-base:280ms;--m-slow:620ms;--m-fade:900ms;--ease-io:cubic-bezier(.45,.05,.55,.95);
  --rise:18px;--side:30px;--head-tuck:10px;--dot:6px;--float:6px;--reel-pad:9%;--reel-bleed:var(--gutter);
  --glow-a:rgba(214,39,126,.42);--glow-b:rgba(107,78,255,.5);--from:left center;--sx:-1}
html[dir="rtl"]{--from:right center;--sx:1}

/* ---------- pages cross-fade into each other where the browser can ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--m-fast) ease both}
::view-transition-new(root){animation:vt-in var(--m-base) ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
.head{view-transition-name:head}

/* ---------- header: tightens once the page moves; a thin reading-progress line on its lower edge ---------- */
.head{transition:transform var(--m-base) var(--ease)}
.head .wrap{transition:transform var(--m-base) var(--ease)}
.head .logo img{transition:transform var(--m-base) var(--ease);transform-origin:var(--from)}
.scrolled .head{transform:translate3d(0,calc(-1 * var(--head-tuck)),0)}
.scrolled .head{background:var(--bg)}
.scrolled .head .wrap{transform:translate3d(0,calc(var(--head-tuck) / 2),0)}
.scrolled .head .logo img{transform:scale(.9)}
.prog{position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--bw));height:2px;background:var(--grad);transform:scaleX(0);transform-origin:var(--from);pointer-events:none}

/* ---------- links and buttons ---------- */
.nav a{position:relative}
.nav a::after,.more::after{content:"";position:absolute;inset-inline:var(--s-3);inset-block-end:var(--s-2);height:2px;border-radius:var(--r-pill);background:var(--grad);transform:scaleX(0);transform-origin:var(--from);transition:transform var(--m-base) var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after,.more:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{background:none}
.more{position:relative}
.more::after{inset-inline:0;background:currentColor}
.more:hover{text-decoration:none}
.btn,.lang,a.badge img,.mnav summary{transition:transform var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease)}
.btn:hover,a.badge:hover img{transform:translate3d(0,-2px,0)}
.btn:active,.lang:active,a.badge:active img,.mnav summary:active{transform:scale(.96)}
.lang:hover{border-color:var(--tint-bd)}
.mnav[open] nav{animation:drop var(--m-base) var(--ease)}
@keyframes drop{from{opacity:0;transform:translate3d(0,-8px,0)}}

/* ---------- pictures at the top of a page: a slow glow behind, a gentle float, a small lean to the pointer ---------- */
.hero-c,.phead{overflow:clip}
.stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:0}
.glow{position:absolute;inset:-18% -14%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 32% 34%,var(--glow-a),transparent),radial-gradient(closest-side at 68% 66%,var(--glow-b),transparent);animation:drift 18s var(--ease-io) infinite alternate}
@keyframes drift{from{transform:translate3d(-5%,-4%,0) rotate(0deg) scale(1)}to{transform:translate3d(5%,5%,0) rotate(28deg) scale(1.14)}}
.stage .pair{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(var(--sy,0) * -26px),0);transition:transform var(--m-base) var(--ease)}
.stage .pair > *{animation:float 7s var(--ease-io) infinite alternate}
.stage .pair > * + *{animation-direction:alternate-reverse}
@keyframes float{from{transform:translate3d(0,calc(-1 * var(--float)),0)}to{transform:translate3d(0,var(--float),0)}}

/* ---------- hero field: typed commands with a caret; the chip of the typed command lights up ---------- */
.say.typing::after{content:"";display:inline-block;width:2px;height:1.15em;margin-inline-start:3px;vertical-align:-.2em;border-radius:var(--r-pill);background:var(--tint-ink);animation:caret 1.2s ease-in-out infinite}
.say.busy::after{animation:none}
@keyframes caret{0%,40%{opacity:1}60%,100%{opacity:0}}
.ask-field .mic{position:relative}
.say.busy + .mic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--b);z-index:-1;animation:ring 1.6s ease-out infinite}
.ask-field{isolation:isolate}
@keyframes ring{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.chips a{position:relative;isolation:isolate;transition:color var(--m-base) var(--ease),transform var(--m-fast) var(--ease)}
.chips a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity var(--m-base) var(--ease)}
.chips a.on,.chips a:hover{color:var(--text)}
.chips a.on::before{opacity:.62}
.chips a:hover::before{opacity:.4}
.chips a:active{transform:scale(.96)}

/* ---------- scroll reveals: armed by the script only for what is still below the screen ---------- */
.motion .rv{opacity:0;transform:translate3d(0,var(--rise),0)}
.motion .rv.in{opacity:1;transform:none;transition:opacity var(--m-slow) var(--ease) var(--d,0ms),transform var(--m-slow) var(--ease) var(--d,0ms)}
@media (min-width:1101px){
  /* a panel: its text comes from its own side, its pictures from the other */
  .motion .room.rv{transform:none}
  .motion .room.rv > .txt{transform:translate3d(calc(var(--sx) * var(--side)),0,0)}
  .motion .room.rv > .pics{transform:translate3d(calc(var(--sx) * -1 * var(--side)),0,0)}
  .motion .duo .room.rv > *{transform:translate3d(0,var(--rise),0)}
  .motion .room.rv.in > *{transform:none;transition:transform var(--m-slow) var(--ease)}
}
@media (min-width:901px){
  .motion .chap.rv{transform:none}
  .motion .chap.rv > .pic{transform:translate3d(calc(var(--sx) * var(--side)),0,0)}
  .motion .chap.rv > .txt{transform:translate3d(calc(var(--sx) * -1 * var(--side)),0,0)}
  .motion .chap.rv:nth-child(even) > .pic{transform:translate3d(calc(var(--sx) * -1 * var(--side)),0,0)}
  .motion .chap.rv:nth-child(even) > .txt{transform:translate3d(calc(var(--sx) * var(--side)),0,0)}
  .motion .chap.rv.nopic > .txt{transform:translate3d(0,var(--rise),0)}
  .motion .chap.rv.in > *{transform:none;transition:transform var(--m-slow) var(--ease)}
}
@media print{.motion .rv,.motion .rv > *{opacity:1!important;transform:none!important}}

/* ---------- FAQ: the answer eases in when its question opens ---------- */
.faq summary{transition:color var(--m-fast) var(--ease)}
.faq summary:hover{color:var(--tint-ink)}
.faq details[open] > p{animation:answer var(--m-base) var(--ease)}
@keyframes answer{from{opacity:0;transform:translate3d(0,-8px,0)}}

/* ---------- rows of two cards: a swipe row with dots on phones (plain scroll snap; the script adds dots and a slow auto-advance) ---------- */
.dots{display:none}
@media (max-width:640px){
  .pair.reel,.pics.reel{display:flex;gap:var(--s-3);width:auto;max-width:none;justify-self:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:var(--float) var(--reel-pad) var(--s-6);margin-inline:calc(-1 * var(--reel-bleed))}
  .pair.reel::-webkit-scrollbar,.pics.reel::-webkit-scrollbar{display:none}
  .reel > *{flex:0 0 100%;scroll-snap-align:center}
  .reel .shot{box-shadow:none}
  .room .reel{--reel-bleed:var(--s-4)}
  .dots{display:flex;justify-content:center;align-items:center;gap:var(--s-2);height:var(--s-6);margin-block-start:calc(-1 * var(--s-6));position:relative;pointer-events:none}
  .room .dots{grid-column:1/-1}
  .dots i{width:var(--dot);height:var(--dot);border-radius:var(--r-pill);background:var(--text);opacity:.28;transition:opacity var(--m-base) var(--ease),transform var(--m-base) var(--ease)}
  .dots i.on{opacity:1;transform:scale(1.35)}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:none;scroll-snap-align:center}
}

/* ---------- the TV screens of one section share one TV and cross-fade (class set by the script) ---------- */
.pics.xfade,.room .pics.xfade{display:grid;grid-template-columns:minmax(0,440px);justify-content:center;overflow:visible;padding:0;margin-inline:0}
.pics.xfade > *{grid-area:1/1;opacity:0;transition:opacity var(--m-fade) ease}
.pics.xfade > .on{opacity:1}

/* a number that counts up keeps its width */
[data-count]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *::before,*::after{transition:none!important;animation:none!important}
}