/* Cairo, Arabic letters only (unicode-range), under its own name so English keeps Readex Pro */
@font-face {font-family: 'Cairo Arabic'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/cairo/v31/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS8p4_RHH1.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}@font-face {font-family: 'Cairo Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/cairo/v31/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS8p4_RHH1.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}@font-face {font-family: 'Cairo Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/cairo/v31/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS8p4_RHH1.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}@font-face {font-family: 'Cairo Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cairo/v31/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS8p4_RHH1.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
:root{
  --bg:#050505; --panel:#0e0e0f; --line:#242426; --fg:#f4f0e6; --muted:#aaa499;
  --yellow:#ffd43b; --lavender:#a98bff; --magenta:#ff2bd6; --green:#3dff5a; --orange:#ffa347;
  --mint:#8bf0c9; --cream:#eee6c3; --red:#ff4b57; --pink:#ff96ae;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Cairo Arabic","Montserrat","Readex Pro","Segoe UI",Tahoma,sans-serif;  /* Arabic in Cairo, paragraphs and small text in Montserrat (Ahmed, 18 Oct) */  /* Arabic in Cairo, like the archive (18 Oct); Latin stays Readex Pro */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);padding-inline:clamp(16px,4vw,56px);padding-block:0 80px}
a{color:var(--yellow)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* marquee */
header{display:flex;flex-direction:column;align-items:center;gap:24px;padding-block:22px 6px;text-align:center}
.ring{--c:var(--yellow);position:relative;display:inline-flex;align-items:center;justify-content:center;
  border:4px solid var(--c);border-radius:999px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 25%,transparent)}
.ring::after{content:"";position:absolute;inset:-4px -22px -4px 14px;border:4px solid var(--c);border-radius:999px;pointer-events:none;opacity:.9}
.marquee{padding:12px 34px 11px 50px;max-width:100%;text-align:center}
/* neon sign in the archive's colours: frame + title glide yellow > pink > blue > green > purple (slow, no flashing: always on);
   "AD" runs half a cycle behind. Warm-up, the tired-tube flicker and the tap stutter respect "reduce motion". */
@property --neon{syntax:"<color>";inherits:true;initial-value:#ffd43b}
@keyframes neon-hue{0%{--neon:#ffd43b}33.3%{--neon:#ff2bd6}66.6%{--neon:#3dff5a}100%{--neon:#ffd43b}}
/* switching sign, 3 colours: each holds ~3.5 s at full strength, then the tube flickers (off, catch, off) into the next colour */
@keyframes neon-switch{0%{--neon:#ffd43b}29%{--neon:#1c1c1c}30%{--neon:#ff2bd6}31%{--neon:#1c1c1c}32%{--neon:#ff2bd6}62%{--neon:#1c1c1c}63%{--neon:#3dff5a}64%{--neon:#1c1c1c}65%{--neon:#3dff5a}95%{--neon:#1c1c1c}96%{--neon:#ffd43b}97%{--neon:#1c1c1c}98%,100%{--neon:#ffd43b}}
.neonwrap{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;max-width:100%}
#neon .marquee.ring{padding:12px 40px;border:2px solid var(--neon);animation:neon-hue 12s steps(1,end) infinite;
  box-shadow:0 0 6px color-mix(in srgb,var(--neon) 90%,transparent),0 0 18px color-mix(in srgb,var(--neon) 55%,transparent),0 0 42px color-mix(in srgb,var(--neon) 25%,transparent),inset 0 0 6px color-mix(in srgb,var(--neon) 60%,transparent),inset 0 0 18px color-mix(in srgb,var(--neon) 25%,transparent)}
.marquee.ring::after{display:none}
#neon .marquee h1{color:var(--neon);text-shadow:none;--old-shadow:0 0 4px color-mix(in srgb,var(--neon) 90%,transparent),0 0 14px color-mix(in srgb,var(--neon) 55%,transparent),0 0 30px color-mix(in srgb,var(--neon) 30%,transparent)}
#neon .flick{display:inline-block;color:var(--neon)}
.ntitle .flick{display:inline}
@keyframes neon-on{0%{opacity:.08}6%{opacity:1}9%{opacity:.25}13%{opacity:1}17%{opacity:.4}22%,100%{opacity:1}}
@keyframes neon-flick{0%,90%,100%{opacity:1}91%{opacity:.3}92%{opacity:1}93.5%{opacity:.2}95%{opacity:1}}
@media (prefers-reduced-motion:no-preference){.neonwrap{animation:neon-on 1.6s linear both}.neonwrap.buzz{animation:neon-on .9s linear both}
  #neon .marquee.ring{animation:neon-switch 12s 1.6s steps(1,end) infinite}#neon .flick{animation:neon-flick 24s 3s linear infinite}}
.marquee h1{text-shadow:0 0 4px rgba(255,212,59,.9),0 0 14px rgba(255,212,59,.55),0 0 30px rgba(255,212,59,.3)}
.marquee h1{margin:0;font:900 clamp(26px,4.6vw,52px)/.95 var(--display);text-transform:uppercase;color:var(--yellow);letter-spacing:-.005em;text-shadow:0 0 22px rgba(255,212,59,.35)}
.est{font:600 14px var(--mono);color:var(--yellow);letter-spacing:.08em}
.lede{max-width:60ch;color:var(--muted);margin:6px 0 0;font-size:15px}.flede{margin:0 auto 12px;font-size:13px;line-height:1.6}
.count{font:500 13px var(--mono);color:var(--muted)}
.count b{font:900 22px var(--display);color:var(--fg);letter-spacing:.02em}

/* occasion rings */
.bar .sortl{display:flex;align-items:center;gap:8px;margin-left:auto;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.bar .sortl select{width:auto;text-transform:none;letter-spacing:0}
.searchrow{position:sticky;top:0;z-index:30;background:var(--bg);padding:12px 0 10px;box-shadow:0 1px 0 var(--line);display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;margin:24px 0 14px}
@media (max-width:640px){.searchrow{grid-template-columns:1fr auto;gap:6px 8px;padding:6px 0}.searchrow .search{grid-column:1/-1}.searchrow .search{font-size:0;gap:0}.searchrow .search input{font-size:15px}.sbtns{grid-column:1/-1;justify-content:flex-end}.searchrow .surprise{padding-inline:10px}}
.searchrow .search{grid-column:auto!important;position:relative}
.suggest{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:20;background:var(--panel);border:1px solid var(--yellow);border-radius:10px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.6);text-transform:none;letter-spacing:0}
.suggest button{display:flex;width:100%;align-items:baseline;gap:10px;background:transparent;border:0;border-radius:7px;padding:8px 10px;cursor:pointer;text-align:left;font:400 14px var(--body);color:var(--fg)}
.suggest button:hover,.suggest button.on{background:#1b1b1d}.suggest button.zero{opacity:.35;cursor:default}
.suggest small{font:500 10.5px var(--mono);color:var(--muted);margin-left:auto;white-space:nowrap}
.suggest em{font:600 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;min-width:62px}
.surprise{align-self:end;padding:10px 18px;border-color:var(--magenta);color:var(--magenta);white-space:nowrap}.surprise:hover{background:var(--magenta);color:#050505}
.another{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.75);border:1px solid var(--magenta);color:var(--magenta);border-radius:999px;padding:6px 12px;cursor:pointer;font:500 12px var(--mono)}
.searchrow label{display:flex;flex-direction:column;gap:6px;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.panels{border-top:1px solid #1f1f1f}
.panel{border-bottom:1px solid #1f1f1f}
.panel>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:14px 4px;user-select:none}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::after{content:"+";margin-left:auto;font:600 18px var(--mono);color:var(--yellow);line-height:1}
.panel[open]>summary::after{content:"–"}
.panel>summary:hover .pt{color:var(--yellow)}
.pt{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--cream);white-space:nowrap}
.ps{font:500 12px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ps.on{color:var(--yellow)}
.panel>:not(summary){margin-bottom:18px}
#brief>summary .pt{color:var(--magenta)}
.label{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:26px 0 12px}
.occ{display:flex;flex-wrap:wrap;gap:14px 22px}
.occ button{--c:var(--cream);background:transparent;cursor:pointer;padding:8px 18px;display:inline-flex;align-items:baseline;justify-content:center;border:1.5px solid var(--c);border-radius:999px;
  color:var(--c);font:700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;position:relative;transition:box-shadow .2s,background .2s}
.occ button::after{display:none}  /* one outline only */
.occ button small{font:500 11px var(--mono);margin-left:8px;opacity:.75}
.occ button:hover{box-shadow:0 0 16px color-mix(in srgb,var(--c) 50%,transparent)}
.occ button.on{background:var(--c);color:#050505;box-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,transparent)}
.occ button.zero{opacity:.3;pointer-events:none;cursor:default}.occ button.zero.on{opacity:1;pointer-events:auto}

/* filters */
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:8px}
.filters label{display:flex;flex-direction:column;gap:5px;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);min-width:0}
select,input[type=search]{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font:14px var(--body);width:100%}
.search{grid-column:1/-1;position:relative}
/* film count sits inside the search box, only once something is searched or filtered */
.incount{position:absolute;right:12px;bottom:0;height:38px;display:flex;align-items:center;font:500 11.5px var(--mono);color:var(--muted);pointer-events:none;letter-spacing:0;text-transform:none}.incount b{color:var(--yellow);margin-right:4px}
.search:has(.incount:not([hidden])) input{padding-right:96px}
.dirs{display:flex;flex-wrap:wrap;gap:8px}
.dirq{width:100%;max-width:360px;margin:0 0 12px}
.abroadbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0 0 14px;padding:16px 20px;border:2px solid var(--cyan,#5ee7ff);border-radius:999px;background:transparent;color:var(--cyan,#5ee7ff);cursor:pointer;text-align:center;box-shadow:0 0 18px rgba(94,231,255,.35)}.abroadbtn b{font-size:18px;letter-spacing:.06em;text-transform:uppercase}.abroadbtn small{color:var(--ink,#eee);opacity:.8}.abroadbtn.on{background:var(--cyan,#5ee7ff);color:#050505}.abroadbtn.on small{color:#050505}
[hidden]{display:none!important}
.moredirs{flex-basis:100%;margin-top:8px}.moredirs>summary{cursor:pointer;font:600 13px var(--body);color:var(--muted);padding:6px 0;list-style:none}.moredirs>summary::before{content:"▾ "}.moredirs:not([open])>summary::before{content:"▸ "}.moredirs .dirs{margin-top:6px}
.zhint{font:500 13px var(--body);color:var(--muted);margin:0 0 10px}.zbtn{border-color:var(--orange);color:var(--orange)}.zbtn:hover{background:var(--orange);color:#050505}.bdg.zb{color:var(--orange);border-color:var(--orange)}.zc{color:var(--orange)}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:#1b1b1d;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font:500 13px var(--body);color:var(--fg);display:flex;gap:12px;align-items:center;box-shadow:0 8px 30px #000a}.toast button{background:none;border:0;color:var(--yellow);font:600 13px var(--body);cursor:pointer}
/* no empty divider rows: the Brief finder wrapper hides when its only panel is hidden */
.panels:has(> details[hidden]:only-child){display:none}
@media (max-width:640px){
  .searchrow{display:flex!important;flex-wrap:wrap;align-items:center}.searchrow .search{flex:1 0 100%}.searchrow .search input{width:100%}.sbtns{margin-left:auto}.active{flex:1 1 auto}.scount{margin-left:auto}
  header{gap:20px;padding-block:14px 0}.lede{font-size:13px;margin-top:2px}.est{font-size:12px}
  #checkline{display:none}.bar{margin:8px 0 10px;padding-top:8px}.fcats{margin:8px 0 2px}}
/* filters: category buttons row; the chosen category's panel opens below it */
/* filters (phone and desktop alike): one Filters button opens a sheet; categories are rows, a row opens its options; chosen values are framed */
@media (max-width:640px){.slab{display:none}.searchrow .surprise{padding-inline:12px}}
.sbtns{display:flex;gap:8px;align-items:center}
#brief{scroll-margin-top:130px}.bar{border-top:0;padding-top:0;margin-top:14px}
/* Reference finder strip with Surprise me beside it, same height */
/* Surprise me on the left of the sort bar, same height as the Sort menu; Sort stays on the right */
.bar .surprise{order:-1;align-self:center;height:40px;padding:0 16px;border:1px solid var(--magenta);border-radius:10px;font:600 13.5px var(--body)}
@media (max-width:640px){.bar .surprise{height:40px}}
.panels:has(>#brief){border-top:0;margin:12px 0 0}
#brief{border:1.5px solid var(--magenta);border-radius:14px;box-shadow:0 0 14px rgba(255,43,214,.18);padding:0 16px}
#brief>summary{position:relative;padding:11px 26px 11px 0;flex-wrap:nowrap;gap:14px;align-items:baseline;white-space:nowrap;overflow:hidden}#brief>summary .ps{overflow:hidden;text-overflow:ellipsis;min-width:0}#brief>summary::after{position:absolute;right:0;top:50%;transform:translateY(-50%)}#brief>summary .pt::before{content:"✦ "}#brief>summary::after{color:var(--magenta)}
/* filter tiles: equal widths in an even grid (6 across on desktop, 3 x 2 on phones); small label on top, chosen value under it */
.fcats.frow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:14px 0 6px;overflow:visible}
.fcats.frow button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:8px 30px 8px 12px;position:relative;text-align:left;white-space:nowrap}
.fcats.frow button small{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fcats.frow button b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font:600 13.5px var(--body);color:var(--fg)}.fcats.frow button b:empty::before{content:"Any";color:var(--muted);font-weight:500}
.fcats.frow button::after,.fcats.frow button.set::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);width:auto;height:auto;background:none;margin:0;color:var(--muted);font-size:11px}
.fcats.frow button:hover{border-color:var(--yellow)}.fcats.frow button.set{border:1.5px solid var(--yellow);box-shadow:0 0 6px rgba(255,212,59,.25)}.fcats.frow button.set b{color:var(--yellow)}.fcats.frow button.set::after{color:var(--yellow)}
@media (max-width:640px){.fcats.frow{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 4px}.fcats.frow button{padding:7px 22px 7px 10px}.fcats.frow button b{font-size:12.5px}.fcats.frow button::after{right:8px}}
/* chosen filters under the search: small yellow tags with a tiny x, plus Clear all */
.active{gap:6px!important}.active button{font:500 11px var(--mono)!important;color:var(--yellow)!important;background:rgba(255,212,59,.08)!important;border:1px solid rgba(255,212,59,.35)!important;border-radius:6px!important;padding:2px 7px!important;box-shadow:none!important}
.active button:hover{border-color:var(--red)!important;color:var(--red)!important}.active .aclr{color:var(--muted)!important;background:none!important;border:0!important;text-decoration:underline}
.bar #reset{display:none!important}
@media all{
  .active button{border:1.5px solid var(--yellow);color:var(--yellow);background:transparent}
  .fsheet{display:none}
  body.fs{overflow:hidden}
  body.fs .fdim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:60}
  body.fs .fsheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:0 16px}
  .fshead{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:2;background:var(--panel);padding:14px 0 10px;border-bottom:1px solid var(--line)}
  .fshead .fst{font:600 16px var(--body);margin-right:auto}.fshead button{font:500 13px var(--body);color:var(--muted);background:none;border:0;padding:4px 2px;cursor:pointer}.fshead .fx{font-size:18px;color:var(--fg)}
  .fback{display:none}.fsheet.drill .fback{display:inline;color:var(--fg)!important;margin-right:auto}.fsheet.drill .fst{display:none}
  .fsheet .fcats{display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:0;margin:0;padding:0}.fsheet.drill .fcats{display:none}
  .fsheet .fcats button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 2px;font:500 14px var(--body);text-align:left;white-space:normal}
  .fsheet .fcats button b{display:inline-block;margin-left:auto;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px var(--body);color:var(--muted)}.fsheet .fcats button b:empty::before{content:"Any"}
  .fsheet .fcats button.set b{color:var(--yellow);font-weight:600;border:1.5px solid var(--yellow);border-radius:999px;padding:3px 10px;box-shadow:0 0 6px rgba(255,212,59,.35)}
  .fsheet .fcats button::after,.fsheet .fcats button.set::after{content:"›";display:inline;width:auto;height:auto;background:none;margin:0;color:var(--muted);font-size:18px}
  .fsheet .fpanels>.panel[open]{border-bottom:0}.fsheet .fpanels{padding-bottom:18px}
  .fgo{display:block;position:sticky;bottom:env(safe-area-inset-bottom);width:100%;margin:14px 0 0;padding:13px;border:0;border-radius:999px;background:var(--yellow);color:#050505;font:600 15px var(--body);cursor:pointer;box-shadow:0 -12px 16px var(--panel)}
  .fsheet::after{content:"";display:block;height:calc(14px + env(safe-area-inset-bottom))}}
@media (min-width:641px){body.fs .fsheet{max-height:84vh;left:50%;right:auto;width:min(560px,92vw);transform:translateX(-50%);bottom:auto;top:8vh;border:1px solid var(--line);border-radius:18px}}
.fcats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.fcats button{font:600 13px var(--body);color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.fcats button:hover{border-color:var(--yellow)}.fcats button.on{border-color:var(--yellow);color:var(--yellow)}
.fcats button.set::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--yellow);margin-left:7px;vertical-align:middle}
.fpanels{border-top:0}.fpanels>.panel{border-bottom:0}.fpanels>.panel>summary{display:none}.fpanels>.panel[open]{padding:12px 0 6px;border-bottom:1px solid var(--line)}
@media (max-width:640px){.fcats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}}
/* cinematic sign: soft fog behind the tube (grain removed at Ahmed's request) */
#neon .marquee.ring{isolation:isolate}
#neon .marquee.ring::before{content:"";position:absolute;inset:-28px -48px;z-index:-1;border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--neon) 22%,transparent),color-mix(in srgb,var(--neon) 8%,transparent) 55%,transparent);filter:blur(10px)}
/* cards: placeholder while a cover loads; Arabic titles right-to-left */
.cover .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(110deg,#141416 30%,#1d1d21 50%,#141416 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;font:700 15px var(--display);color:#5a5650;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:10px}
@keyframes shimmer{to{background-position:-200% 0}}
.card .t,.card .ar,.sim .st{unicode-bidi:plaintext;text-align:start}

/* title: the current solid neon letters + a brighter line INSIDE each letter's edge (stroke clipped to the letter, so the
   letters keep their weight) + a softer, tighter glow. SVG so the stroke can sit inside the letters. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#neon .marquee h1{line-height:0}
.ntitle{display:block;height:clamp(64px,18vw,104px);width:auto;max-width:100%;overflow:visible;
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--neon) 75%,transparent)) drop-shadow(0 0 7px color-mix(in srgb,var(--neon) 30%,transparent))}
.ntitle text{font:900 100px var(--display);text-transform:uppercase;letter-spacing:-.5px}
.nt-fill{fill:var(--neon)}.ntitle{opacity:0;transition:opacity .35s;animation:ntshow .35s 2.5s forwards}.ntitle.fit{opacity:1}@keyframes ntshow{to{opacity:1}}
.nt-line{fill:none;stroke:color-mix(in srgb,var(--neon) 80%,#fff);stroke-width:5}  /* same hue as the letters: a touch lighter at the top, pure colour at the bottom */
.g-top{stop-color:color-mix(in srgb,var(--neon) 90%,#fff)}.g-bot{stop-color:var(--neon)}  /* class display rules must never override hidden */
.dprof{position:relative;margin:22px 0 0;padding:18px;border:1.5px solid var(--lavender);border-radius:14px}
.dtop{display:flex;gap:14px;align-items:center}.dph{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--lavender)}
.dph.none{display:grid;place-items:center;font:700 30px var(--display);color:var(--lavender)}.dname{flex:1;min-width:0}.dname h2{margin:0;font:700 clamp(24px,4vw,36px)/1 var(--display);color:var(--lavender)}.dname .note{margin:6px 0 0}
.dtabs{display:flex;gap:8px;margin:14px 0 2px}.dtabs button{font:600 13.5px var(--body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:12px;padding:9px 16px;cursor:pointer}.dtabs button.on{color:var(--yellow);border:1.5px solid var(--yellow)}
/* profile: photo + name on top (close at the corner), then the Commercials / Interviews tabs, an even stats grid, bio, brands, actions last */
.dx{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:15px;cursor:pointer}.dx:hover{border-color:var(--lavender)}
.dname{padding-right:40px}.dname .note{line-height:1.5}
.dprof .dtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}.dprof .dtabs button{width:100%}
.dact{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}#dfix{border-color:var(--lavender);color:var(--lavender)}#dfix:hover{background:var(--lavender);color:#050505}#dshare{border-color:var(--mint);color:var(--mint)}#dshare:hover{background:var(--mint);color:#050505}.subf .dfnote{color:var(--lavender)}.dact .btn{font-size:12.5px;padding:7px 14px}
.dstats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px;margin:16px 0 4px}
@media (max-width:640px){.dstats{grid-template-columns:repeat(3,minmax(0,1fr))}.dph{width:60px;height:60px}}.dstats span{display:flex;flex-direction:column;font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dstats b{font:700 22px var(--display);color:var(--fg);letter-spacing:0;white-space:nowrap}.dbio{max-width:85ch;line-height:1.55;margin:12px 0}.dbrands{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.dbrands .label{margin:0 6px 0 0}
.dirinfo{margin-top:12px;padding:12px 14px;border:1px solid var(--lavender);border-radius:12px}.dirinfo p{margin:6px 0 0;max-width:80ch}
.dir.off{opacity:.32;cursor:default;pointer-events:none}.dir{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;font:400 13px var(--body)}
.dir small{font:500 11px var(--mono);color:var(--muted);margin-left:6px}
/* Agencies & production houses: outlined pills, the chosen one framed yellow */
.co{background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;font:400 13px var(--body)}.co small{font:500 11px var(--mono);color:var(--muted);margin-left:6px}
.co:hover{border-color:var(--yellow)}.co.on{border:1.5px solid var(--yellow);color:var(--yellow);box-shadow:0 0 6px rgba(255,212,59,.25)}.co.on small{color:var(--yellow)}.co.off{opacity:.32;cursor:default;pointer-events:none}
.ctabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px;margin:0 0 12px}.ctabs button{width:100%}
.cprof{border-color:var(--c,var(--mint))}.cprof .dph{border-color:var(--c,var(--mint))}.cprof .dph.none{color:var(--c,var(--mint))}.cprof .dname h2{color:var(--c,var(--mint))}#cshare{border-color:var(--mint);color:var(--mint)}#cshare:hover{background:var(--mint);color:#050505}
.dir.pin{border-color:color-mix(in srgb,var(--lavender) 60%,transparent)}
.fav{color:var(--muted);margin-right:6px;cursor:pointer}.fav:hover,.fav.on{color:var(--yellow)}.dir.on .fav{color:#050505}
.dir.empty{color:var(--muted);border-style:dashed}
.dir.on{background:var(--lavender);border-color:var(--lavender);color:#050505}
.dir.on small{color:#050505}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:28px 0 16px;padding-top:18px;border-top:1px solid var(--line);font:13px var(--mono);color:var(--muted)}
.btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font:500 13px var(--mono)}
.btn:hover{border-color:var(--yellow);color:var(--yellow)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.card{--c:var(--cream);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  cursor:pointer;text-align:left;padding:0;transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 24px color-mix(in srgb,var(--c) 35%,transparent);transform:translateY(-2px)}
.cover{position:relative;aspect-ratio:16/9;max-width:100%;background:#000}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover img.hov{position:absolute;inset:0}
.card.pv .cover::after{content:"▶ preview";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:600 10px var(--mono);color:#050505;background:var(--yellow);padding:2px 8px;border-radius:999px}
.yr{position:absolute;left:10px;bottom:6px;font:900 34px/1 var(--display);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.rt{position:absolute;right:8px;bottom:8px;font:500 11px var(--mono);background:rgba(0,0,0,.75);padding:2px 6px;border-radius:4px}
.status{position:absolute;left:8px;top:8px;font:500 10.5px var(--mono);background:rgba(0,0,0,.78);padding:3px 8px;border-radius:999px;letter-spacing:.03em}
.status.ok{color:var(--green)} .status.bad{color:var(--red)} .status.wait,.status.unk{color:var(--muted)}
.aw{position:absolute;right:8px;top:8px;font:700 10.5px var(--mono);background:#050505;color:var(--yellow);border:1.5px solid var(--yellow);padding:2px 8px;border-radius:999px;box-shadow:0 0 10px color-mix(in srgb,var(--yellow) 45%,transparent)}
.res~.aw{top:34px}
.bdg{position:absolute;top:8px;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10.5px var(--mono);padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.8)}
.bdg.tl{left:8px;color:var(--c);border:1.5px solid var(--c)}
.bdg.tr{right:8px;left:auto;max-width:40%;color:var(--lavender);border:1.5px solid color-mix(in srgb,var(--lavender) 70%,transparent)}
.bdg.tr~.aw{top:34px}
.sbtns{display:flex;gap:8px;align-items:center}.fbtn{border-color:var(--yellow);color:var(--yellow);font-weight:700}.fbtn b{font-weight:700}
.rights{max-width:80ch;margin:0 auto 10px;line-height:1.6}
.foot{margin:56px 0 24px;padding-top:24px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font:12px var(--mono)}.fbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:14px}
.subc{margin:10px 0 4px;font-size:13px}
.verified{font:700 12px var(--mono);color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:2px 8px;vertical-align:middle}
.pfilms{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px}
.pf{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:13px}.pf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.craft{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}.craft b{color:var(--yellow);font-family:var(--mono)}.craft small{flex-basis:100%;color:var(--muted);font:11px var(--mono)}
.camplink{font:600 11px var(--mono);color:var(--pink);border:1.5px solid var(--pink);border-radius:999px;padding:2px 9px;cursor:pointer;align-self:flex-start;white-space:nowrap}.camplink:hover{background:var(--pink);color:#050505}
.knowwho{background:none;border:0;padding:0;color:var(--yellow);font:inherit;text-decoration:underline;cursor:pointer}
#subdlg{width:min(640px,calc(100vw - 32px))}.subf{position:relative;padding:22px;display:flex;flex-direction:column;gap:10px}.subf h3{margin:0 70px 0 0;font:700 22px var(--display)}
.subf label{display:flex;flex-direction:column;gap:5px;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.subf label.chk{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font:13px var(--body);color:var(--fg)}
.subf input:not([type=checkbox]),.subf textarea{background:#000;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:14px var(--body);text-transform:none;letter-spacing:0}
.subf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crows{display:flex;flex-direction:column;gap:6px}.crow{display:grid;grid-template-columns:170px 1fr;gap:6px}@media (max-width:520px){.subf .two,.crow{grid-template-columns:1fr}}
.rev{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.rev p{margin:4px 0}.rev.pending{border-color:var(--yellow)}.rev.rejected{opacity:.55}
.boardbtn{padding:4px 10px;margin-right:10px;font-size:12px;color:var(--yellow);border-color:var(--yellow)}
.addwrap{position:relative;display:inline-block;margin:2px 0 12px 8px}.addb{font-size:13px}
.bmenu{position:absolute;left:0;top:100%;margin-top:4px;z-index:5;min-width:250px;background:var(--panel);border:1px solid var(--yellow);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.bmenu>button{display:flex;gap:8px;background:transparent;border:0;color:var(--fg);text-align:left;padding:7px 8px;border-radius:6px;cursor:pointer;font:14px var(--body)}.bmenu>button:hover{background:#1b1b1d}.bmenu small{margin-left:auto;color:var(--muted);font:12px var(--mono)}
.bnew{display:flex;gap:6px;margin-top:4px;border-top:1px solid var(--line);padding-top:6px}.bnew input{flex:1;min-width:0;background:#000;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:13px var(--body)}
.bbtabs{display:flex;flex-wrap:wrap;gap:6px;width:100%}.btab{font:600 12px var(--mono);background:transparent;color:var(--fg);border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}.btab.on{background:var(--yellow);color:#050505;border-color:var(--yellow)}
.bbact{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}#bbrenf{display:flex;gap:6px}#bbrenf[hidden]{display:none}#bbrenf input{background:#000;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.boardbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 0;padding:12px 14px;border:1.5px solid var(--yellow);border-radius:10px}
@media print{body{background:#fff!important;color:#000!important}header,.searchrow,.panels,.bar,.boardbar,.more,.ydiv,.like,.status,.heart{display:none!important}
  .grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px!important}.card{break-inside:avoid;background:#fff!important;color:#000!important;border:1px solid #ccc!important}
  .card .meta *{color:#000!important}.card::after{content:"youtu.be/" attr(data-yt);display:block;padding:0 15px 10px;font:11px monospace;color:#555}.bdg,.bt,.rt{background:#fff!important;color:#000!important;border-color:#999!important}}
.bl{position:absolute;left:8px;bottom:8px;right:56px;display:flex;gap:5px;overflow:hidden}
.bt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10.5px var(--mono);padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.78);border:1.5px solid var(--c);color:var(--c)}
.bt.ind{--c:var(--orange)}.bt.tone{--c:var(--magenta)}.bt.star{--c:var(--yellow)}.bt.set{--c:var(--mint)}.bt.prod{--c:var(--cream)}
.card .status{top:auto;bottom:8px}
.like{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;font:600 12px var(--mono);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.like:hover{border-color:var(--red);color:var(--red)}.like.on{color:var(--red);border-color:var(--red)}.like.ro{cursor:default}.like.ro:hover{border-color:var(--line);color:var(--muted)}.like.big{font-size:14px;padding:5px 14px;margin:2px 0 12px}
.views{font:500 12px var(--mono);color:var(--muted);margin-top:4px;display:block}
.ind button{font-size:clamp(15px,2.1vw,20px)}
.pills{display:flex;flex-wrap:wrap;gap:8px;max-height:132px;overflow:auto;padding:2px}
.pills.open{max-height:none}
.pill{--c:var(--cream);font:600 12.5px var(--body,inherit);background:transparent;color:var(--c);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:999px;padding:5px 12px;cursor:pointer}
.pill small{font:500 10.5px var(--mono);opacity:.7;margin-left:6px}
.pill.on{background:var(--c);color:#050505}
.pill:hover{box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent)}
.hint{font:500 10.5px var(--mono);color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px;cursor:pointer;text-decoration:underline}
.active{display:flex;flex-wrap:wrap;gap:8px;margin:0;grid-column:1/2}
.scount{grid-column:2/3;justify-self:end;align-self:center;font:500 12px var(--mono);color:var(--muted)}.scount b{color:var(--fg)}
.active:empty{display:none}
.active button{font:500 12px var(--mono);background:#151515;color:var(--cream);border:1px solid #333;border-radius:999px;padding:5px 10px;cursor:pointer}
.active button{border:1.5px solid var(--yellow);color:var(--yellow);background:transparent}.active button:hover{border-color:var(--red);color:var(--red)}
.bar #reset{display:none}
.ydiv{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:14px 0 -6px;border-bottom:1.5px solid #222;padding-bottom:6px}
.ydiv b{font:900 34px/1 var(--display);color:var(--yellow)}
.ydiv small{font:500 11px var(--mono);color:var(--muted)}
.brief{margin:6px 0 28px}
.bwrap{border:3px solid var(--magenta);border-radius:22px;padding:18px;box-shadow:0 0 22px color-mix(in srgb,var(--magenta) 30%,transparent)}
.bwrap textarea{width:100%;box-sizing:border-box;background:#0d0d0d;color:var(--cream);border:1.5px solid #333;border-radius:12px;padding:12px 14px;font:15px/1.5 inherit;resize:vertical}
.brow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.bgo{border-color:var(--magenta)!important;color:var(--magenta)!important}
.bstatus{font:500 12px var(--mono);color:var(--muted)}
.hint-plain{font:500 10.5px var(--mono);color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px}
.bq{margin:16px 0 0}
.bq p{margin:0 0 8px;font-weight:600}
.bq .opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bq input{background:#0d0d0d;color:var(--cream);border:1.5px solid #333;border-radius:999px;padding:6px 12px;font:13px inherit;min-width:180px}
.bsum{margin:14px 0 0;color:var(--cream);font-size:14px;line-height:1.5}
.bboard{margin-top:18px}
.bboard .grid{margin-top:12px}
.why{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--cream)}
.why b{font:600 10.5px var(--mono);text-transform:uppercase;color:var(--magenta);margin-right:6px}
.camps{margin:18px 0 6px;display:grid;gap:8px;max-width:980px}
.camp{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;text-align:left;background:transparent;color:var(--fg,#eee);border:1.5px solid #2a2a2a;border-radius:14px;padding:10px 16px;cursor:pointer;font:inherit}
.camp:hover,.camp.on{border-color:var(--magenta);box-shadow:0 0 14px color-mix(in srgb,var(--magenta) 35%,transparent)}
.camp b{font:900 26px/1 var(--display);color:var(--magenta)}
.camp span{min-width:0;overflow-wrap:anywhere}
.camp small{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.camp em{display:block;font:500 11px var(--mono);font-style:normal;color:var(--muted)}
@media (max-width:560px){.camp{grid-template-columns:32px 1fr}.camp small{grid-column:2}}
.res{position:absolute;right:8px;top:8px;font:600 10.5px var(--mono);background:var(--yellow);color:#050505;padding:3px 8px;border-radius:999px}
.meta{padding:13px 15px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}
.eyebrow{font:500 12px var(--mono);color:var(--muted);letter-spacing:.02em}
.t{font:600 16px/1.3 var(--body);margin:0;overflow-wrap:anywhere}
.ar{direction:rtl;text-align:right;color:var(--muted);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{--c:var(--muted);font:500 10.5px var(--mono);border:1.5px solid var(--c);color:var(--c);border-radius:999px;padding:1px 8px}
.chip.plain{--c:#55524c}
.cred{font:12px var(--mono);color:var(--muted)}
.scenes{line-height:1.6}.scenes a{font:600 12px var(--mono);color:var(--yellow);text-decoration:none;margin-right:4px}.scenes a:hover{text-decoration:underline}
.cred.unknown{color:#6d6960}
.more{display:flex;justify-content:center;padding-block:32px}
.empty-state{padding:60px 0;text-align:center;color:var(--muted)}

/* projector */
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:0;width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:rgba(0,0,0,.85)}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:#000}
.player img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75}
.play{--c:var(--yellow);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#050505;color:var(--c);border:3px solid var(--c);border-radius:999px;padding:14px 30px;font:900 26px/1 var(--display);text-transform:uppercase;text-decoration:none;box-shadow:0 0 24px color-mix(in srgb,var(--c) 55%,transparent);white-space:nowrap}
.play:hover{background:var(--c);color:#050505}
.player iframe{width:100%;height:100%;border:0;display:block}
.player iframe.emb{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s}.player iframe.emb.on{opacity:1;pointer-events:auto}
.player.playing .play{display:none}
.play{cursor:pointer}
.ext{position:absolute;right:96px;top:10px;z-index:3;font:600 11px var(--mono);color:var(--fg);background:rgba(0,0,0,.75);border:1px solid var(--line);border-radius:999px;padding:4px 10px;text-decoration:none}.ext:hover{border-color:var(--yellow);color:var(--yellow)}
.close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.75);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;font:500 12px var(--mono)}
.more-like{padding:0 26px 26px}
.simgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.sim{background:transparent;border:1.5px solid #222;border-radius:12px;padding:0 0 10px;text-align:left;cursor:pointer;color:inherit;font:inherit;overflow:hidden;display:flex;flex-direction:column;gap:4px}
.sim:hover{border-color:var(--yellow)}
.sim .cover{aspect-ratio:16/9;position:relative;background:#111}
.sim .cover img{width:100%;height:100%;object-fit:cover;display:block}
.sim .eyebrow,.sim .st,.sim small{padding:0 10px}
.sim .st{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim small{font:500 10.5px var(--mono);color:var(--muted)}
.dbody{padding:22px 26px 26px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
@media (max-width:720px){.dbody{grid-template-columns:1fr}.marquee.ring{padding:10px 24px}}
.dbody h3{font:900 clamp(26px,3.2vw,32px)/1.02 var(--display);text-transform:uppercase;margin:6px 0 10px;overflow-wrap:anywhere;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* credits right under the title; names in white, only the invitations ("Know who?", "Are you…?", "Add credits") in yellow */
.credblock{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.credblock .jump{color:var(--fg);border-bottom-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.credblock .src a{color:var(--fg)}.credblock .subc{border-color:var(--yellow);color:var(--yellow)}.credblock .subc:hover{background:var(--yellow);color:#050505}
/* film panel: details in labelled groups instead of one long list */
.pgroup{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.pgroup>.label{margin:0 0 8px;display:block}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:14px}
dt{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:3px}
dd{margin:0;min-width:0;overflow-wrap:anywhere}
.jump{color:var(--yellow);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--yellow) 60%,transparent)}.jump:hover{border-bottom-style:solid}
.src a{display:block;font:13px var(--mono);overflow-wrap:anywhere}
.note{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.flabel{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 -6px}
@media (max-width:640px){.flabel{margin:10px 0 -4px}}
/* v124: filter tiles 3 x 3 (Agency, Production house, Surprise me as the 9th tile) */
.fcats.frow{grid-template-columns:repeat(9,minmax(0,1fr))}
@media (max-width:1100px){.fcats.frow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fcats.frow button small{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fcats.frow .tsurp{border-color:var(--magenta)}.fcats.frow .tsurp b{color:var(--magenta)}.fcats.frow .tsurp::after{content:none}.fcats.frow .tsurp{padding-right:10px}.fcats.frow .tsurp b{white-space:nowrap}
.fcats.frow .tsurp:hover{background:var(--magenta)}.fcats.frow .tsurp:hover b,.fcats.frow .tsurp:hover small{color:#050505}
.fcats.frow button small{white-space:normal;line-height:1.2;overflow:visible}.fcats.frow button{white-space:normal}@media (max-width:640px){.fcats.frow button small{letter-spacing:.04em}}

/* ---------------------------------------------------------------- website additions (not in the claude.ai page) */
header{position:relative}
.topbtns{position:absolute;top:14px;right:0;z-index:5;display:flex;gap:6px}.topbtns .acct{position:static}
.acct{position:absolute;top:14px;right:0;z-index:5;font:600 12px var(--mono);color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;cursor:pointer;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct:hover{border-color:var(--yellow);color:var(--yellow)}
@media (max-width:640px){header{padding-top:40px}.topbtns{top:8px}.acct{top:8px;font-size:11px;padding:5px 10px}}
#brief{cursor:default}
.grid.loading{opacity:.45;transition:opacity .2s}
.player .ph{position:absolute;inset:0;display:grid;place-items:center;font:700 22px var(--display);color:#5a5650;text-transform:uppercase}
.sim .cover .ph{font-size:12px}
.lock{margin:10px 0 4px;font-size:13px;color:var(--muted)}.lock a{color:var(--yellow)}
.gbtn{display:flex;justify-content:center;width:100%;padding:11px 16px;font:600 14px var(--body);border-color:var(--fg)}
.devs{display:flex;flex-direction:column;gap:8px}.dev{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.dev span{display:flex;flex-direction:column;flex:1;min-width:0}.dev small{color:var(--muted);font:500 11px var(--mono)}
#msgdlg{width:min(520px,calc(100vw - 32px))}
.subf .close{position:absolute;top:14px;right:14px}
.btn.addb{margin:2px 8px 12px 0}.addwrap{margin:2px 0 0}
.empty-state.msg{padding:28px 0}
a.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
.toast a{color:var(--yellow)}
/* board PDF: subscriber's name across every page (Pro); only on paper */
.wm{display:none}
@media print{
  .wm{display:block;position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden}
  .wm span{display:block;transform:rotate(-28deg);white-space:nowrap;font:600 13px monospace;color:rgba(0,0,0,.09);margin:52px -30%}
  .wm b{position:fixed;left:0;right:0;bottom:0;text-align:center;font:500 9px monospace;color:#444}
  .acct,.flabel,.fcats,.fsheet,.fdim,.foot,.zhint,.dprof,.empty-state,.toast,dialog{display:none!important}
  body[data-board]::before{content:attr(data-board);display:block;font:900 30px "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;margin:0 0 14px}
  .card .cover img.hov{display:none}
}
.wa{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:1.5px solid #25d366;border-radius:14px;padding:12px 14px;margin:12px 0 0}
.wa b{color:#25d366}.wa .btn{border-color:#25d366;color:#25d366}.wa .btn:hover{background:#25d366;color:#050505}

/* Arabic: right to left. The neon sign keeps its own font; Arabic text uses Readex Pro (it has Arabic letters) */
.acct.lang{font-family:var(--body)}
html[dir=rtl]{--display:"Cairo Arabic","Readex Pro","Segoe UI",Tahoma,sans-serif}
html[dir=rtl] .ntitle text{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif}
html[dir=rtl] .topbtns{right:auto;left:0}
html[dir=rtl] .label,html[dir=rtl] .pt,html[dir=rtl] .fcats.frow button small,html[dir=rtl] dt,html[dir=rtl] .flabel{letter-spacing:0}
html[dir=rtl] .incount{right:auto;left:12px}html[dir=rtl] .search:has(.incount:not([hidden])) input{padding-right:10px;padding-left:96px}
html[dir=rtl] .fcats.frow button{text-align:right;align-items:flex-start;padding:8px 12px 8px 30px}
html[dir=rtl] .fcats.frow button::after,html[dir=rtl] .fcats.frow button.set::after{right:auto;left:11px}
html[dir=rtl] .fcats.frow button b:empty::before,html[dir=rtl] .fsheet .fcats button b:empty::before{content:"الكل"}
html[dir=rtl] .fsheet .fcats button{text-align:right}html[dir=rtl] .fsheet .fcats button b{margin-left:0;margin-right:auto}
html[dir=rtl] .fsheet .fcats button::after{content:"‹"}
html[dir=rtl] .suggest button{text-align:right}html[dir=rtl] .suggest small{margin-left:0;margin-right:auto}
html[dir=rtl] .bdg.tl{left:auto;right:8px}html[dir=rtl] .bdg.tr{right:auto;left:8px}html[dir=rtl] .aw{right:auto;left:8px}
html[dir=rtl] .rt{right:auto;left:8px}html[dir=rtl] .bl{left:56px;right:8px}html[dir=rtl] .card .status{left:auto;right:8px}
html[dir=rtl] .yr{left:auto;right:10px}html[dir=rtl] .card,html[dir=rtl] .sim{text-align:right}
html[dir=rtl] .close{right:auto;left:10px}html[dir=rtl] .ext{right:auto;left:96px}html[dir=rtl] .another{left:auto;right:10px}
html[dir=rtl] .subf h3{margin:0 0 0 70px}html[dir=rtl] .subf .close{right:auto;left:14px}
html[dir=rtl] .dx{right:auto;left:12px}html[dir=rtl] .dname{padding-right:0;padding-left:40px}
html[dir=rtl] .panel>summary::after{margin-left:0;margin-right:auto}
html[dir=rtl] .bmenu{left:auto;right:0}html[dir=rtl] .bmenu>button{text-align:right}html[dir=rtl] .bmenu small{margin-left:0;margin-right:auto}
html[dir=rtl] .occ button small,html[dir=rtl] .pill small,html[dir=rtl] .dir small,html[dir=rtl] .co small{margin-left:0;margin-right:6px}
html[dir=rtl] .fav{margin-right:0;margin-left:6px}
html[dir=rtl] .bar .sortl{margin-left:0;margin-right:auto}
html[dir=rtl] .moredirs>summary::before{content:"◂ "}html[dir=rtl] .moredirs[open]>summary::before{content:"▾ "}
.wl{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:14px auto;max-width:640px;text-align:start}.wl .brow{margin-top:8px}
.wl select,.subf select,.cty select{background:#000;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:14px var(--body)}
.wl input{background:#000;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:14px var(--body)}
.cty{display:flex;flex-direction:column;gap:4px;font:600 10.5px var(--mono);text-transform:uppercase;color:var(--muted)}
html[dir=rtl]{--mono:"Cairo Arabic","Readex Pro","Segoe UI",Tahoma,sans-serif}
html[dir=rtl] .dup-ar{display:none}
/* Reference finder results: thumbs up / down under each film */
.bres{display:flex;flex-direction:column}.vote{display:flex;gap:6px;margin:6px 2px 0}
.vote button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;font-size:14px;filter:grayscale(1);opacity:.7}
.vote button.on{border-color:var(--magenta);filter:none;opacity:1}
#brief .bwrap{border:0;box-shadow:none;padding:4px 0 14px}#brief[open]{padding-bottom:4px}
/* the one small Pro hint (searches used, trial days left, see all) */
.hintbar{margin:0 0 14px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--yellow) 45%,transparent);border-radius:10px;font:500 13px var(--body);color:var(--cream)}
.hintbar a,.hintbar .knowwho{color:var(--yellow)}.upsell a{color:var(--yellow)}
.lboards{display:flex;flex-direction:column;gap:10px}.lboard{border:1px solid var(--line);border-radius:12px;padding:10px}
.lcov{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:6px;filter:grayscale(.6) brightness(.7)}.lcov img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}

/* the trial model: visitors see covers + the intro; after the trial: covers + Surprise me only */
body.nosearch:not(.vis) .searchrow,body.nosearch:not(.vis) .flabel,body.nosearch:not(.vis) #frow>button:not(#surprise),body.nosearch .panels,body.nosearch .bar .sortl{display:none}
/* guests see the search bar and the filter tiles; any use of them opens the sign-up popup (see intro.js) */
body.nosearch:not(.vis) #frow{grid-template-columns:minmax(0,220px)}
.tcard{margin:6px 16px 14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel)}
/* landing intro (Ahmed, 18 Oct, option C): centred, no frame, numbers, rotating pink word, six benefits */
.pubintro{margin:10px auto 26px;padding:0 16px;max-width:1040px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.pubintro .eyebrow{margin:0 0 -8px;font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.pubintro .mbr{display:none}  /* one line on desktop, two on phones (Ahmed) */
@media (max-width:760px){.pubintro .mbr{display:inline}}
.pubintro h2{margin:0;font:900 clamp(32px,5.4vw,56px)/1 var(--display);text-transform:uppercase;color:var(--fg)}
.pubintro .flip{display:inline-block;position:relative;vertical-align:bottom;height:1em;overflow:hidden;color:var(--magenta);text-shadow:0 0 16px rgba(255,43,214,.45);transition:width .55s cubic-bezier(.6,0,.2,1)}
.pubintro .flip span{display:block;height:1em;line-height:1;white-space:nowrap;transition:transform .55s cubic-bezier(.6,0,.2,1),opacity .55s}
.pubintro .flip span.out{transform:translateY(-100%);opacity:0}.pubintro .flip span.in{transform:translateY(100%);opacity:0}
.pubintro .flip span:not(:first-child){position:absolute;top:0;left:0;width:max-content}
.pubintro .nums{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:680px;align-items:end}
.pubintro .num{padding:4px 18px;border:0;border-inline-start:1px solid var(--line);background:none;color:inherit;font:inherit;cursor:pointer;border-radius:0}
.pubintro .num:hover b,.pubintro .num:focus-visible b{color:var(--magenta);text-shadow:0 0 22px rgba(255,43,214,.4)}
.pubintro .num:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}.pubintro .num:first-child{border:0}
.pubintro .num b{display:block;font:900 clamp(26px,6vw,62px)/1 var(--display);color:var(--yellow);text-shadow:0 0 22px rgba(255,212,59,.3)}
.pubintro .num span{font:500 12px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.pubintro p{margin:0}.pubintro .lead{color:#cfc8ba;max-width:60ch;font-size:16px}
/* benefits as boxes side by side (Ahmed, 18 Oct): 3 across on desktop, 2 on tablets, 1 on phones */
.pubintro .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 0;padding:0;list-style:none;width:100%}
.pubintro .feats li{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:start;min-width:0;padding:18px 18px 20px;border:1.5px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 70%,transparent);transition:border-color .2s}
.pubintro .feats li.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,border-color .35s,box-shadow .35s}
.pubintro .feats li.rv.seen{opacity:1;transform:none}
/* desktop: a slow neon edge on hover, like the sign; phones show no motion */
/* hover (desktop): the title lights up neon green, the box edge only warms (Ahmed, 18 Oct) */
.pubintro .feats b{transition:color .3s,text-shadow .3s}
@media (hover:hover){.pubintro .feats li:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
  .pubintro .feats li:hover b{color:var(--green);text-shadow:0 0 14px color-mix(in srgb,var(--green) 55%,transparent)}}
.pubintro .feats svg{width:40px;height:40px;padding:8px;border:1.5px solid color-mix(in srgb,var(--yellow) 60%,transparent);border-radius:12px;stroke:var(--yellow);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.pubintro .feats b{display:block;font:900 clamp(22px,2.4vw,28px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--fg);margin-bottom:8px}  /* condensed titles, no icons (Ahmed, 18 Oct) */.pubintro .feats span{font-size:13.5px;line-height:1.55;color:var(--muted)}
/* first search inside the intro: type, tap, sign up, and the same search runs after the trial starts */
.pubintro .firstq{display:flex;gap:10px;width:100%;max-width:620px;margin:2px 0 4px}
.pubintro .firstq input{flex:1;min-width:0;background:var(--panel);color:var(--fg);border:1.5px solid var(--magenta);border-radius:999px;padding:12px 18px;font:500 15px var(--body);box-shadow:0 0 14px rgba(255,43,214,.18)}
.pubintro .firstq input:focus{outline:none;box-shadow:0 0 20px rgba(255,43,214,.38)}
.pubintro .firstq .btn{white-space:nowrap}
.pubintro .usecase{font:500 14px var(--body);color:var(--yellow);min-height:1.6em}.pubintro .usecase span{transition:opacity .4s}
.pubintro .brow{justify-content:center;margin:0}.pubintro .note{margin:0}
@media (max-width:900px){.pubintro .feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pubintro .feats{grid-template-columns:1fr}}
@media (max-width:760px){.pubintro .num{padding:4px 8px}.pubintro .num span{font-size:10px;letter-spacing:.03em}}
@media (prefers-reduced-motion:reduce){.pubintro .flip span,.pubintro .flip,.pubintro .usecase span{transition:none}}
.price b{color:var(--yellow);font:600 14px var(--mono)}
.tcard{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;border-color:var(--magenta)}
.tcard[hidden]{display:none}
.tcard p{margin:0 0 8px}.tcard .brow{margin:0;align-items:center}
.tcard .tx{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);font:600 15px var(--body);cursor:pointer}
.tsur{border-color:var(--magenta);color:var(--magenta)}
@media (max-width:640px){.tcard{grid-template-columns:1fr}}
#surprise.glow{box-shadow:0 0 0 2px var(--magenta),0 0 22px rgba(255,43,214,.65);animation:sglow 1.6s ease-in-out infinite alternate}
@keyframes sglow{from{box-shadow:0 0 0 2px var(--magenta),0 0 8px rgba(255,43,214,.3)}to{box-shadow:0 0 0 2px var(--magenta),0 0 24px rgba(255,43,214,.75)}}
@media (prefers-reduced-motion:reduce){#surprise.glow{animation:none}}
#frow i.nexts{display:block;font:500 10px var(--mono);font-style:normal;color:var(--muted);letter-spacing:0;text-transform:none;margin-top:2px}
.undochip{border-color:var(--yellow)!important;color:var(--yellow)!important}
.pcount,.enjoy{grid-column:1/-1}
.pcount{margin:0 0 8px;font:500 12px var(--mono);color:var(--yellow)}
.enjoy{margin:0 0 12px;padding:10px 12px;border:1px solid var(--magenta);border-radius:10px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.enjoy span{font:500 12.5px var(--mono);color:var(--muted)}
.lockfilm{position:relative;margin:0 0 10px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#111}
.lockfilm img{width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.55)}
.lockfilm .lockic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px}
.aboutf{display:grid;gap:10px}.aboutf label{display:grid;gap:4px;font:500 12px var(--mono);color:var(--muted)}
.starters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}.starters[hidden]{display:none}.starters .label{margin:0 6px 0 0}
.meter{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle}.meter i{width:18px;height:6px;border-radius:3px;background:var(--muted);opacity:.85}.meter i.u{opacity:.25}
#hint small{color:var(--muted);font-size:11px}
/* the soft landing: placeholder covers only (nothing about the films themselves reaches the page) */
.soft{position:relative;margin:18px 0 8px}
.soft .grid{filter:blur(7px);opacity:.55;pointer-events:none;user-select:none}
.card.ghost{min-height:0;cursor:default}
.card.ghost .cover{aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,hsl(var(--h) 45% 22%),hsl(calc(var(--h) + 60) 40% 12%))}
.card.ghost b,.card.ghost i{display:block;height:10px;margin:10px 0 0;border-radius:5px;background:#2a2a2c;width:70%}.card.ghost i{width:45%}
.softmsg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:16px}
.softmsg p{margin:0;max-width:52ch}.softmsg span{color:var(--yellow)}
.decide{margin:10px 0;padding:10px 12px;border:1px solid var(--yellow);border-radius:10px}
.quote{margin:10px 0;padding:0 0 0 12px;border-left:2px solid var(--magenta);font-style:italic;color:var(--fg)}.quote cite{display:block;font:500 12px var(--mono);color:var(--muted);font-style:normal;margin-top:4px}
.exitq{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* living sign icon beside ARCHIVE: the sign's colour and glow, one line weight (5.6 in a 140 box, kept through --k) */
.sicon{position:absolute;overflow:visible;pointer-events:none;--c:var(--neon);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--neon) 75%,transparent)) drop-shadow(0 0 7px color-mix(in srgb,var(--neon) 30%,transparent))}
.sicon .ln{fill:none;stroke:var(--c);stroke-width:calc(5.6 / var(--k, 1));stroke-linecap:round;stroke-linejoin:round}.sicon .fl{fill:var(--c)}

/* pre-launch landing: the intro + waitlist only (body.prelaunch, from /api/config prelaunch.on) */
body.prelaunch #frow,body.prelaunch .flabel,body.prelaunch .searchrow,body.prelaunch .bar,body.prelaunch #out,body.prelaunch #tcard,
body.prelaunch .boardbar,body.prelaunch .fbtns,body.prelaunch .foot #wl,body.prelaunch .pubintro .trialrow,body.prelaunch #hint{display:none!important}
.pubintro .prerow{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:640px}
.pubintro .opens{margin:6px 0 0;font:900 clamp(26px,3.6vw,38px)/1 var(--display);text-transform:uppercase;color:var(--yellow);text-shadow:0 0 18px rgba(255,212,59,.35)}
.pubintro .prewl{width:100%;margin:4px 0;text-align:center;border-color:color-mix(in srgb,var(--magenta) 55%,var(--line))}
.pubintro .prewl b{display:none}
/* phones (Ahmed, 18 Oct): the sign starts below the language and Sign in buttons; the first search stacks; a lighter waitlist box */
@media (max-width:560px){
  header{padding-top:58px}
  .pubintro .firstq{flex-direction:column}
  .pubintro .firstq .btn{justify-content:center}
  .pubintro .prewl{border:0;padding:0;background:none}
  .pubintro .prewl .brow{flex-direction:column;align-items:stretch}
  .pubintro .usecase{font-size:13px}
}

/* submit / correction / report / idea links are for signed-in members only (Ahmed, 18 Oct): not on the guest page or the waitlist */
body.vis .memberlinks,body.prelaunch .memberlinks,body.vis #fsub,body.prelaunch #fsub{display:none!important}

/* landing wall: dimmed, desaturated frames drifting behind the sign; a dark pool keeps the text sharp */
#pwall{position:absolute;left:0;right:0;top:0;height:640px;overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
#pwall::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 55% 60% at 50% 28%,rgba(5,5,5,.15),rgba(5,5,5,.9) 70%),repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
#pwall .pw-row{position:absolute;left:0;display:flex;gap:8px;width:max-content;opacity:.65;filter:saturate(.7) brightness(.6);animation:pwdrift 110s linear infinite}
#pwall .pw-row:nth-child(1){top:0}#pwall .pw-row:nth-child(2){top:150px;animation-direction:reverse;animation-duration:140s}
#pwall .pw-row:nth-child(3){top:300px;animation-duration:125s}#pwall .pw-row:nth-child(4){top:450px;animation-direction:reverse;animation-duration:150s}
#pwall img{width:260px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;display:block}
@keyframes pwdrift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#pwall .pw-row{animation:none}}
@media (max-width:560px){#pwall{height:520px}#pwall img{width:180px}#pwall .pw-row:nth-child(2){top:120px}#pwall .pw-row:nth-child(3){top:240px}#pwall .pw-row:nth-child(4){top:360px}}
/* landing: no price, no plans (reviewers reach the prices from the footer); a smaller first-search button */
body.prelaunch .pubintro .prerow>p.note:last-child{display:none}
.pubintro .firstq .btn{padding:7px 14px;font-size:12.5px;align-self:center}
@media (max-width:560px){.pubintro .firstq .btn{align-self:center;padding:7px 18px}}

/* landing: nothing that looks like search (Ahmed, 18 Oct): no first-search field, no search ideas, numbers are plain text */
body.prelaunch .pubintro .firstq,body.prelaunch .pubintro .usecase{display:none!important}
body.prelaunch .pubintro .num{cursor:default;pointer-events:none}

/* waitlist page: the corner button reads "Invited user, sign in" (Ahmed, 18 Oct) */

/* signed-in page (Ahmed + review, 18 Oct): one pink frame on the search, a calm grey trial line without a frame, a tighter top */
.hintbar{border:0;padding:4px 2px;margin:0 0 10px;font:500 12.5px var(--body);color:var(--muted)}
.hintbar a,.hintbar .knowwho{color:var(--muted);text-decoration:underline;text-underline-offset:3px}.hintbar a:hover{color:var(--yellow)}
#q{border:1.5px solid var(--magenta);border-radius:10px;box-shadow:0 0 14px rgba(255,43,214,.18)}#q:focus{outline:none;box-shadow:0 0 18px rgba(255,43,214,.38)}
header{padding-bottom:0;gap:14px}.searchrow{margin-top:6px}

/* phones: more room beside ARCHIVE so the icon can be bigger (Ahmed, 18 Oct): wider frame padding, a slightly larger sign */
@media (max-width:560px){#neon .marquee.ring{padding:16px 32px}#neon .ntitle{height:clamp(64px,25vw,112px)}}  /* phones: a smaller logo with breathing room inside the frame (Ahmed, 18 Oct) */

/* landing rhythm (Ahmed, 18 Oct): clear gaps between the sign, the headline, the numbers, the paragraph and the boxes; a paragraph with a lead-in */
body.vis .est,body.prelaunch .est{display:none}
header{padding-bottom:6px}
.pubintro{gap:34px;margin-top:22px}
.pubintro .nums{margin:4px 0 2px}
.pubintro .lead{font-size:15.5px;line-height:1.8;color:#b8b1a2;max-width:34ch;letter-spacing:.005em;text-wrap:pretty}
.pubintro .lead b{display:block;margin-bottom:10px;font:900 clamp(20px,5.4vw,26px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--fg)}
.pubintro .prerow{gap:14px;margin-top:6px}
.pubintro .feats{gap:18px;margin-top:6px}
.pubintro .feats li{padding:20px 20px 22px}
@media (min-width:761px){.pubintro .lead{max-width:56ch}.pubintro .lead b{display:inline;margin:0;font:inherit;text-transform:none;letter-spacing:inherit;color:var(--fg);font-weight:600;font-family:var(--body)}}

/* the First 300 message is the reason to join now: its own neon headline above the form (Ahmed, 18 Oct) */
.pubintro .f300{margin:2px 0 6px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.pubintro .f300 b{font:900 clamp(26px,7vw,38px)/1.02 var(--display);text-transform:uppercase;color:var(--green);text-shadow:0 0 6px color-mix(in srgb,var(--green) 80%,transparent),0 0 20px color-mix(in srgb,var(--green) 45%,transparent);text-wrap:balance}
.pubintro .f300 span{font-size:14px;line-height:1.6;color:#b8b1a2;max-width:36ch}
/* the lead-in: smaller, on one line */
.pubintro .lead b{font-size:clamp(14px,4.3vw,21px);white-space:nowrap}
@media (min-width:761px){.pubintro .lead b{font-size:inherit;white-space:normal}}

/* one message leads (Ahmed, 18 Oct): "Opening 27 November" is a small label above the First 300 headline */
.pubintro .opens{margin:10px 0 0;font:600 12.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);text-shadow:none}
.pubintro .f300{margin-top:0}

/* numbers across nearly the full width, larger (Ahmed, 18 Oct) */
.pubintro .nums{max-width:min(100%,980px);width:100%}
.pubintro .num{flex:1;padding:6px 6px}
.pubintro .num b{font-size:clamp(36px,12vw,82px)}
.pubintro .num span{font-size:clamp(10px,2.6vw,13px)}

/* English only: no language button (Ahmed, 18 Oct) */
[data-lang-switch]{display:none!important}

/* guest page (Ahmed, 18 Oct): no search field (it only opened a sign-up); the trial button is the one action, worded as the first search; once under the paragraph and once at the end */
.pubintro .firstq{display:none!important}
.btn.twoline{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 26px;line-height:1.25;text-align:center}
.btn.twoline span{font:600 15px var(--mono);letter-spacing:.02em}
.btn.twoline small{font:500 12px var(--mono);color:color-mix(in srgb,var(--magenta) 80%,var(--fg));letter-spacing:.04em}
.pubintro .topcta{justify-content:center;margin:-8px 0 0}
body.prelaunch .pubintro .topcta{display:none!important}

/* guest sign-up popup */
.gdetails{margin:4px 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.gdetails li{position:relative;padding-left:22px;font-size:14px;color:var(--fg)}
.gdetails li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px color-mix(in srgb,var(--green) 70%,transparent)}
.gplans{display:flex;justify-content:center}
.gwhy{font:600 15px var(--body)!important;color:var(--yellow)!important}
dialog::backdrop{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* after the first popup: a slim line under the filters instead of the popup again */
#gatebar{margin:4px 0 14px;font:500 13px var(--body);color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#gatebar[hidden]{display:none}
#gatebar a,#gatebar button{color:var(--yellow);background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* popup wording (Ahmed, 18 Oct) and the guest buttons: Start free trial in white, See plans in pink */
.gmatch{margin:0 0 6px;font:600 14px var(--body);color:var(--fg)}
.glead{margin:0 0 10px;font:600 15px var(--body);color:var(--yellow)}
.gpro{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.gpro .label{margin:0}.gpro .btn{justify-content:center;text-align:center}
.gsub{white-space:normal;line-height:1.3}
.btn.bwhite{background:transparent;color:#f4f1e8;border:1.5px solid #f4f1e8;font-weight:600}
.btn.bwhite:hover{box-shadow:0 0 18px rgba(255,255,255,.25)}

/* touch screens: the same green title as the desktop hover, driven by scrolling (intro.js) */
@media (hover:none){.pubintro .feats li.lit{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
  .pubintro .feats li.lit b{color:var(--green);text-shadow:0 0 14px color-mix(in srgb,var(--green) 55%,transparent)}}

/* two options side by side in the guest popup: the free trial and Pro, the same rows in both (Ahmed, 18 Oct) */
#msgdlg.gwide,dialog.gwide{width:min(820px,calc(100vw - 24px))}
.gcmp{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"trial pro" "signup signup";gap:14px;margin-top:6px}
.gc-trial{grid-area:trial}.gc-pro{grid-area:pro}.gsignup{grid-area:signup;border:1.5px solid #f4f1e8;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.gsignup h4{margin:0;font:900 clamp(22px,3vw,28px)/1 var(--display);text-transform:uppercase;color:#f4f1e8}
.gsignup .gbtn{width:100%;justify-content:center}.gsignup form.brow{display:flex;gap:8px;margin:0}.gsignup form.brow input{flex:1;min-width:0}
.gc-trial .btn.bwhite{justify-content:center;margin-top:auto}
.gc{border:1.5px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.gc h4{margin:0;font:900 clamp(24px,3vw,30px)/1 var(--display);text-transform:uppercase}
.gc-trial{border-color:#f4f1e8}.gc-trial h4{color:#f4f1e8}
.gc-pro{border-color:var(--magenta);box-shadow:0 0 18px rgba(255,43,214,.16)}.gc-pro h4{color:var(--magenta)}
.gprice{margin:0 0 4px;font:500 12.5px var(--mono);color:var(--muted);min-height:2.6em}
.grows{margin:0 0 6px;padding:0;list-style:none;display:flex;flex-direction:column}
.grows li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.grows li span{color:var(--muted)}.grows li b{font-weight:600;text-align:right}
.gc-pro .grows li b{color:var(--fg)}
.gc .gbtn{width:100%;justify-content:center}.gc form.brow{display:flex;gap:8px;margin:0}.gc form.brow input{flex:1;min-width:0}
.gc-pro .gsub{justify-content:center;margin-top:auto}.gc-pro .gplans{text-align:center;font:500 13px var(--body);color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.gtable{display:none}
@media (max-width:640px){.gcmp{grid-template-columns:1fr;grid-template-areas:"table" "signup" "pro"}.gtable{grid-area:table}.gc-trial{display:none}.grows{display:none}.gprice{min-height:0}
  /* phones: one table with the two options side by side, then the two sign-up blocks */
  .gtable{display:table;width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:13px}
  .gtable th{padding:8px 6px;font:900 17px var(--display);text-transform:uppercase;text-align:left;border-bottom:1.5px solid #f4f1e8;color:#f4f1e8}
  .gtable th.pro{color:var(--magenta);border-color:var(--magenta)}
  .gtable td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:baseline}
  .gtable td:first-child{color:var(--muted);width:38%}.gtable td:nth-child(2){font-weight:600}.gtable td.pro{font-weight:600;color:var(--fg)}}
@media (max-width:640px){.gsignup form.brow{flex-direction:column}.gsignup form.brow .btn{justify-content:center}}

/* guest popup, round 3 (Ahmed, 19 Oct): the match count on top in yellow; no sign-up block under the cards (the buttons lead on); phones keep both buttons */
.gmatch{margin:2px 0 10px;font:900 clamp(22px,4.4vw,30px)/1.1 var(--display);text-transform:uppercase;color:var(--yellow);text-shadow:0 0 14px rgba(255,212,59,.35)}
.gcmp{grid-template-areas:"trial pro"}
.gsignup{display:none}
.gback{background:none;border:0;padding:0;margin:0 0 8px;color:var(--muted);font:500 13px var(--mono);cursor:pointer;text-align:left}.gback:hover{color:var(--yellow)}
@media (max-width:640px){.gcmp{grid-template-areas:"table" "trial" "pro"}.gc-trial{display:flex}.gc-trial .btn,.gc-pro .btn{justify-content:center}}

/* both buttons on the same line: each card ends in the same foot (button + a small line under it) */
.gfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.gfoot .btn{justify-content:center;width:100%;box-sizing:border-box;min-height:46px;margin:0}
.gnote,.gfoot .gplans{text-align:center;font:500 13px var(--body);min-height:1.4em}
.gnote{color:var(--muted)}
.gc-trial .btn.bwhite{margin-top:0}.gc-pro .gsub{margin-top:0}
/* guest popup type (Ahmed, 19 Oct): result count small in Montserrat, heading big and condensed */
.gwide .gmatch{font:600 13px/1.4 "Montserrat",var(--body);text-transform:none;text-shadow:none;margin:2px 0 10px}
.gwide h3{font:900 clamp(34px,6vw,52px)/1 var(--display);text-transform:uppercase;margin:0 0 4px}
/* phones (Ahmed, 19 Oct): two separate boxes, one on top of the other, each with its own rows; no combined table */
@media (max-width:640px){.gcmp{grid-template-areas:"trial" "pro"}.gtable{display:none}.gc .grows{display:flex}.gc .gprice{min-height:0}}
/* guest popup: three real matches before the wall (Ahmed, 19 Oct) */
.gsamp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.gsamp figure{margin:0;min-width:0}
.gsamp img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#111}
.gsamp figcaption{display:flex;flex-direction:column;gap:2px;margin-top:5px;font:500 12px/1.3 "Montserrat",var(--body);min-width:0}
.gsamp figcaption b{font-weight:600;color:var(--fg)}
.gsamp figcaption span{color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:640px){.gsamp{gap:6px}.gsamp figcaption{font-size:11px}}
/* proof line under the numbers (Ahmed, 19 Oct): the newest ad in the archive */
.latest{margin:-4px 0 0;text-align:center;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.latest::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green,#39ff88);margin-right:8px;vertical-align:1px}
.latest a{color:inherit;text-decoration:none}.latest a[href]{text-decoration:underline;text-underline-offset:3px}.latest a[href]:hover{color:var(--yellow)}
/* guest popup, filter tile: how many values, and the three biggest (Ahmed, 19 Oct) */
.gtop{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.gtop span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0;font:500 12px/1.3 "Montserrat",var(--body)}
.gtop b{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gtop small{color:var(--muted);font-size:12px}
.gtop .more{justify-content:center;color:var(--yellow);border-style:dashed}
@media (max-width:640px){.gtop{grid-template-columns:repeat(2,1fr)}}
.ydiv b.rec{font-size:20px;letter-spacing:.06em;text-transform:uppercase}
/* Black Friday banner above the sign (Ahmed, 19 Oct): live wave, price and clock; links to /first300 */
.bfban{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;justify-content:center;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:10px clamp(16px,4vw,56px);background:var(--magenta);color:#0a0a0a;text-decoration:none;text-align:center;font:600 13px/1.35 "Montserrat",var(--body)}
.bfban[hidden]{display:none}
.bfban b{font:900 20px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.bfban u{font:700 12px var(--mono);text-decoration:none;border:1.5px solid #0a0a0a;border-radius:999px;padding:5px 12px}
.bfban:hover u{background:#0a0a0a;color:var(--magenta)}
/* First 300 card: the lock-in is the exciting part (Ahmed, 19 Oct), so it gets its own bright line */
.lockline{display:inline-block;align-self:flex-start;margin:2px 0;padding:6px 12px;border-radius:999px;background:var(--yellow);color:#0a0a0a;font:700 13px/1.3 "Montserrat",var(--body)}
/* waitlist: consent line; no prices before the offer, so the plans link hides on the waitlist page (Ahmed, 19 Oct) */
.wlfine{margin:6px 0 0;font:500 12px/1.4 "Montserrat",var(--body);color:var(--muted)}
body.prelaunch .foot a[href="/account.html#plans"]{display:none}
/* waitlist box (Ahmed, 19 Oct): a title and one line of promise, email and country side by side, one full-width button, the consent line below with room */
.pubintro .prewl{padding:22px 22px 18px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.pubintro .prewl b{display:block;font:900 clamp(24px,5vw,32px)/1 var(--display);text-transform:uppercase;color:var(--fg)}
.wlsub{margin:0 0 8px;font:500 14px/1.5 "Montserrat",var(--body);color:#cfc8ba}
.pubintro .prewl form.brow{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin:0}
.pubintro .prewl form.brow input,.pubintro .prewl form.brow select{width:100%;min-width:0;padding:13px 14px;font:500 15px "Montserrat",var(--body);border-radius:10px}
.pubintro .prewl form.brow button{grid-column:1/-1;justify-content:center;min-height:50px;font-size:15px;margin-top:2px}
.pubintro .prewl .bstatus{min-height:1.2em;font:500 13px "Montserrat",var(--body);color:var(--green)}
.pubintro .prewl .wlfine{margin:8px 0 0;font:500 12px/1.5 "Montserrat",var(--body);color:var(--muted);text-align:center}
@media (max-width:640px){.pubintro .prewl{padding:0}.pubintro .prewl form.brow{grid-template-columns:1fr}}
/* UX pass (Ahmed, 19 Oct): compact banner on phones, one emphasised button while the offer runs, larger tap targets */
@media (max-width:640px){.bfban{padding:8px 14px;gap:2px 10px}.bfban b{font-size:15px}.bfban u{display:none}.bfban span{font-size:12px}}
body.offer-on .trialrow a.btn.bgo{background:transparent;border-color:var(--line);color:var(--fg)!important;box-shadow:none}
.back{padding-block:10px}