:root { --charcoal:#202020; --ink:#f7f6f2; --muted:#cfcac2; --silver:#8b8984; --line:#4a4946; --paper:#ece9e1; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--ink); background:var(--charcoal); font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Arial,sans-serif; }
a { color:inherit; }
.service-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 15%, #34332f 0, var(--charcoal) 46%); }
.service-shell { width:min(100%,680px); padding:52px 34px; border:1px solid var(--line); text-align:center; }
.wordmark { margin:0; font:clamp(24px,7vw,48px)/.8 Georgia,serif; letter-spacing:.26em; text-indent:.26em; }
.film-rule { width:110px; height:1px; margin:27px auto 22px; background:var(--muted); }
.service-kicker,.eyebrow { margin:0; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.18em; }
h1 { margin:12px 0; font:clamp(34px,9vw,60px)/.98 Georgia,serif; letter-spacing:-.035em; }
.service-copy { max-width:460px; margin:0 auto; color:var(--muted); line-height:1.65; }
.service-meta { margin-top:30px; color:var(--silver); font-size:11px; letter-spacing:.1em; }
.demo-shell { max-width:720px; }
.primary-button,.secondary-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; border:1px solid var(--ink); background:var(--ink); color:var(--charcoal); padding:12px 18px; font:700 10px/1 Arial,sans-serif; letter-spacing:.14em; text-decoration:none; cursor:pointer; }
.primary-button { margin-top:26px; }
.primary-button:disabled { cursor:wait; opacity:.55; }
.secondary-button { background:transparent; color:var(--ink); }
.demo-status { min-height:18px; margin:18px 0 0; color:var(--muted); font-size:12px; }
.demo-result { margin-top:28px; padding:22px; border:1px solid var(--line); background:#242423; }
.demo-qr { width:min(100%,300px); margin:0 auto; padding:12px; background:var(--paper); }
.demo-qr svg { display:block; width:100%; height:auto; }
.demo-instruction { margin:18px 0 8px; color:var(--muted); font-size:12px; }
.demo-url { display:block; overflow-wrap:anywhere; color:var(--ink); font:14px/1.45 Georgia,serif; }
.demo-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.demo-steps { margin:24px 0 0; padding-left:20px; color:var(--muted); font-size:12px; line-height:1.8; text-align:left; }
.demo-footnote { margin:28px 0 0; color:var(--silver); font-size:9px; letter-spacing:.12em; }
.guest-shell { width:min(100%,760px); min-height:100vh; margin:0 auto; padding:28px 18px 44px; }
.guest-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:6px 0 27px; border-bottom:1px solid var(--line); }
.guest-header .wordmark { font-size:22px; }
.guest-header-copy { color:var(--muted); font-size:9px; letter-spacing:.16em; }
.guest-intro { padding:35px 0 24px; }
.guest-intro h1 { max-width:540px; }
.guest-description { margin:0; color:var(--muted); }
.time-remaining { display:flex; align-items:baseline; justify-content:space-between; max-width:340px; margin-top:26px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.time-remaining span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.16em; }
.time-remaining strong { font:26px/1 Georgia,serif; letter-spacing:.09em; }
.expiry-notice { max-width:600px; margin-top:18px; padding:15px 16px; border-left:2px solid var(--muted); background:#292927; color:var(--muted); font-size:12px; line-height:1.65; }
.expiry-notice p { margin:0; }
.expiry-notice p + p { margin-top:8px; color:var(--ink); }
.asset-grid { display:grid; gap:18px; }
.asset-card { display:grid; grid-template-columns:minmax(135px,34%) 1fr; gap:20px; padding:13px; border:1px solid var(--line); background:#242423; }
.frame { min-height:190px; display:grid; place-items:center; overflow:hidden; background:#32312e; border:7px solid var(--paper); box-shadow:inset 0 0 0 1px #9a9890; }
.frame img { width:100%; height:100%; max-height:300px; object-fit:contain; }
.monochrome { filter:grayscale(1); }
.asset-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.asset-content > span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.14em; }
h2 { margin:10px 0 5px; font:clamp(25px,6vw,38px)/1 Georgia,serif; }
.asset-content p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.download-button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; margin-top:19px; padding:10px 14px; border:1px solid var(--ink); color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.14em; text-decoration:none; transition:background .2s,color .2s; }
.download-button:hover,.download-button:focus-visible { color:var(--charcoal); background:var(--ink); outline:none; }
.expired-panel { max-width:570px; padding:60px 0; border-top:1px solid var(--line); }
footer { padding-top:32px; color:var(--silver); font-size:9px; letter-spacing:.12em; text-align:center; }
@media (max-width:520px) { .guest-shell { padding-inline:15px; }.guest-header { align-items:flex-start; flex-direction:column; gap:10px; }.asset-card { grid-template-columns:1fr; }.frame { min-height:250px; }.asset-content { padding:4px 6px 12px; }.expiry-notice { font-size:12px; } }