@font-face {
  font-family: 'Belleza';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Belleza-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ElMessiri-500-arabic.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: 'El Messiri';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ElMessiri-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ElMessiri-500-arabic.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: 'El Messiri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ElMessiri-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ElMessiri-500-arabic.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: 'El Messiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ElMessiri-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-400-arabic.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-500-arabic.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-600-arabic.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Manrope-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Manrope-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Manrope-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Manrope-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================================================================
   Yasmina Café WiFi vouchers: design styles, v2 "Apply" theme (16 Oct 2026 build).
   Built on the Yasmina Academy application site (apply.yasminacafe.com) design language:
   espresso hero with depth gradient and a hairline diamond texture, Belleza headings (Optima where installed), Manrope body,
   El Messiri + IBM Plex Sans Arabic for Arabic, bean + diamond motifs, pill buttons (v4: replaced by asymmetric R 0 R 0 corners, see HANDOVER), 22/28 px rounded white cards with soft warm
   shadows, caramel accents, eased lift-on-hover and staggered entrance motion, a fixed header that turns solid on scroll.
   Richard's rules: all text 7:1+ (tests/contrast.py + tests/audit-contrast.py); only near-white text on dark; application areas
   pure #FFFFFF; no dome or arch shapes (the Academy's arch-bearing tile pattern is NOT used; own diamond texture instead).
   ========================================================================================================= */
:root{
  --espresso:#382318; --espresso-2:#2a1a12; --espresso-3:#24150E; --espresso-4:#3d2619;
  --caramel:#AE6F29;        /* brand caramel: rules, beans, diamonds, borders (graphics only) */
  --caramel-text:#6E410F;   /* caramel deepened for text on white, 8.7:1 (the Academy's #7A4A17 is only 7.45:1, too tight on tints) */
  --caramel-btn:#7A4A17;    /* gold button, white text 7.45:1 */
  --cream:#F5E4D1; --paper:#FBF6EF; --white:#FFFFFF;
  --gold-light:#F3D9B5;     /* gold: focus ring + pill borders on dark only, never text */
  --on-dark:#FFFFFF; --on-dark-2:#FBF3EA;   /* the only text colours allowed on dark */
  --ink:#382318;            /* body text on white, 14.8:1 */
  --muted:#5a4334;          /* secondary + Arabic ink on white, 9.2:1 */
  --line:#e7d6c2;           /* quiet card edges */
  --line-strong:#9A7B5C;    /* control borders (fields, outline buttons), 3.9:1 */
  --red:#8A181A; --red-bg:#fbeeee; --green:#3D6A3B; --green-text:#2F5A2E; --mint:#D4E9E2;
  --ff-head:Optima,"Optima nova","Belleza","Candara",serif;
  --ff-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-ar-head:"El Messiri","IBM Plex Sans Arabic",serif;
  --ff-ar:"IBM Plex Sans Arabic","Manrope",system-ui,sans-serif;
  --r:20px;            /* v4: ONE knob for the big boxes. Richard's range is 10-30 pt; change this and everything follows */
  --r-sm:12px;         /* small tiles, pills, compact buttons (table-grid tiles, nav pills, rows) */
  --r-xs:8px;          /* tiny badges and swatches */
  --radius:var(--r);   /* asymmetric corners everywhere: top-left + bottom-right curved, top-right + bottom-left SHARP (R 0 R 0) */
 --ease:cubic-bezier(.22,.8,.24,1);
  --shadow:0 1px 2px rgba(56,35,24,.06),0 12px 40px -12px rgba(56,35,24,.22);
  --shadow-sm:0 1px 2px rgba(56,35,24,.06),0 8px 22px -12px rgba(56,35,24,.28);
  --bean-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate%28-30 12 12%29'%3E%3Cpath d='M11.3 2.05A7 10 0 0 0 11.3 21.95C8.6 18.6 14.2 15.4 11.3 12C8.4 8.6 14 5.4 11.3 2.05Z'/%3E%3Cpath d='M12.7 2.05A7 10 0 0 1 12.7 21.95C10 18.6 15.6 15.4 12.7 12C9.8 8.6 15.4 5.4 12.7 2.05Z'/%3E%3C/g%3E%3C/svg%3E");
  /* tier colours: brand-derived, graphics only (never text), each 3:1+ on white */
  --t-drink:#2E8470; --t-ws1:#BD8123; --t-ws2:#C4552D; --t-ws5:#8A181A; --t-ws8:#382318;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#FFFFFF;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#FFFFFF;color:var(--ink);font:400 17px/1.6 var(--ff-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--caramel-text);text-underline-offset:3px;font-weight:700}
:focus-visible{outline:3px solid var(--caramel);outline-offset:3px}   /* v4: no forced radius; the ring follows each element's own R 0 R 0 corners */
.top :focus-visible,.hero :focus-visible,.foot :focus-visible,.overlay>:focus-visible{outline-color:var(--gold-light)}
.wrap{width:min(1160px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--caramel-btn);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{inset-inline-start:1rem}

/* Bilingual: English first, Arabic beneath, right-aligned (the Academy's Arabic pairing: El Messiri headlines, IBM Plex Sans Arabic body) */
.en{display:block}
.ar{display:block;font-family:var(--ff-ar);text-align:right;line-height:1.85;letter-spacing:0;text-transform:none;font-weight:400}
h1,h2,h3{font-family:var(--ff-head);font-weight:700;line-height:1.15;margin:0;letter-spacing:.005em}
h1 .ar,h2 .ar,h3 .ar{font-family:var(--ff-ar-head);font-weight:600;line-height:1.5}

/* ---------- header (fixed, turns solid espresso on scroll) ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem clamp(.8rem,4vw,2.5rem);color:var(--on-dark);
  transition:background .35s var(--ease),box-shadow .35s,padding .35s var(--ease)}
.top.scrolled{background:linear-gradient(180deg,rgba(56,35,24,.97),rgba(36,21,14,.97));backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px -12px rgba(0,0,0,.45);padding-block:.45rem}
.brandmark{display:flex;align-items:center;text-decoration:none}
.brandmark img{height:46px;width:auto}
.topnav{display:flex;gap:.5rem;align-items:center}
form.inline{display:inline;margin:0}
.navlink{font:600 .88rem/1.2 var(--ff-body);color:var(--on-dark);background:transparent;border:1.5px solid rgba(255,255,255,.75);border-radius:var(--r-sm) 0 var(--r-sm) 0;padding:.35rem .95rem;min-height:46px;text-decoration:none;cursor:pointer;
  display:inline-flex;flex-direction:column;justify-content:center;transition:background .25s,color .25s,border-color .25s}
.navlink .en,.navlink .ar{text-align:center;line-height:1.35}.navlink .ar{font-size:.9rem;font-weight:500}
.navlink:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}

/* ---------- hero: espresso with depth gradient, diamond texture, optional photo (sign-in) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;color:var(--on-dark);padding:clamp(5.4rem,9vw,6.6rem) 0 clamp(5rem,9vw,6.2rem);
  background:radial-gradient(120% 90% at 85% 10%,#382318 0%,#2a1a12 55%,#24150E 100%)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 40%;transform:scale(1.06)}
.hero.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(42,26,18,.97) 0%,rgba(42,26,18,.9) 48%,rgba(42,26,18,.55) 100%),linear-gradient(0deg,rgba(42,26,18,1) 0%,rgba(42,26,18,.85) 22%,rgba(42,26,18,0) 45%)}
.hero-pattern{position:absolute;inset:0;z-index:-1;background:url("img/pattern-diamond.svg") 0 0/200px auto repeat;opacity:.07;pointer-events:none}
.hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:0}
.hero.flat{padding-bottom:1.6rem}
.seats{align-self:flex-start}
.hero h1{font-size:clamp(2rem,6.4vw,3.6rem);color:var(--on-dark);max-width:44rem;width:100%}
.hero h1 .ar{font-size:.62em;margin-top:.15rem;color:var(--on-dark)}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--on-dark-2);margin:1rem 0 0;max-width:36rem}
.lead .ar{color:var(--on-dark-2);font-size:1rem}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin:0 0 .9rem;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--on-dark-2)}
.eyebrow .ar{display:inline;font-family:var(--ff-ar);font-size:.95rem;letter-spacing:0;font-weight:600;color:var(--on-dark-2)}
.bean{display:inline-block;width:1em;height:1em;flex:none;background:var(--on-dark-2);-webkit-mask:var(--bean-mask) center/contain no-repeat;mask:var(--bean-mask) center/contain no-repeat;vertical-align:-.12em}
.eyebrow .bean{width:16px;height:16px}
.seats{display:flex;align-items:flex-start;gap:.7rem;font-weight:600;font-size:.84rem;line-height:1.4;background:rgba(0,0,0,.35);border:1px solid rgba(243,217,181,.7);color:var(--on-dark);border-radius:var(--r-sm) 0 var(--r-sm) 0;padding:.5rem 1rem;margin:0 0 1.2rem;max-width:34rem}
.seats b{letter-spacing:.14em;font-size:.74rem;padding-top:.15rem;font-weight:800}
.seats .ar{color:var(--on-dark);font-size:.9rem;line-height:1.6}
.dot{width:9px;height:9px;margin-top:.4rem;flex:none;border-radius:50%;background:var(--on-dark-2);box-shadow:0 0 0 0 rgba(251,243,234,.7);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,243,234,.55)}70%{box-shadow:0 0 0 10px rgba(251,243,234,0)}100%{box-shadow:0 0 0 0 rgba(251,243,234,0)}}
.h-in{animation:hin .9s var(--ease) both;animation-delay:calc(var(--d,0)*110ms + 120ms)}
.d0{--d:0}.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}
@keyframes hin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* hero stats (stats screen): number + caramel bar + label, like the Academy hero */
nav.seg{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
nav.seg a{flex:1 1 130px;max-width:220px;text-decoration:none;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.75);border-radius:var(--r-sm) 0 var(--r-sm) 0;min-height:50px;padding:.3rem .8rem;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;font-size:.92rem;line-height:1.3;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
nav.seg a .en,nav.seg a .ar{text-align:center;line-height:1.4}nav.seg a .ar{font-size:.92rem}
nav.seg a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
nav.seg a.on{background:#FFFFFF;border-color:#FFFFFF;color:var(--espresso)}
.stats-hero{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.8rem}
.stat{padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.35rem;background:rgba(0,0,0,.28);border:1px solid rgba(251,243,234,.45);border-radius:var(--r) 0 var(--r) 0;min-width:0}   /* v4: KPI cards (were rule-divided columns) */
.stat strong{font-family:var(--ff-head);font-weight:700;font-size:clamp(2.3rem,5vw,3.2rem);line-height:1;color:var(--on-dark)}
.stat strong::after{content:"";display:block;width:22px;height:3px;background:var(--caramel);margin-top:.5rem;border-radius:0}
.stat .kl{margin:0;font-size:.92rem;color:var(--on-dark-2);line-height:1.35}
.stat .kl .ar{color:var(--on-dark-2);font-size:.95rem;line-height:1.6}
.stat .ks{margin:0;font-size:.85rem;color:var(--on-dark-2)}
.hero-note{margin:1rem 0 0;font-size:.9rem;color:var(--on-dark-2)}
@media (min-width:900px){.stats-hero{grid-template-columns:repeat(4,1fr);gap:16px}.stat{padding:1.4rem 1.2rem}}

/* ---------- application area: pure white ---------- */
.sec{position:relative;background:#FFFFFF;padding:0 0 clamp(2.5rem,6vw,4.5rem);flex:1}
.panel{position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r) 0 var(--r) 0;padding:clamp(1.2rem,4vw,2.2rem);box-shadow:var(--shadow);margin-top:calc(-1 * clamp(2.8rem,6vw,3.6rem));animation:stage .55s var(--ease) both .15s}
.panel.narrow{max-width:520px;margin-inline:auto}
@keyframes stage{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel.plain{margin-top:0}
.small{font-size:.9rem;margin:0;color:var(--muted)}
.grp{margin-top:1.5rem;display:flex;flex-direction:column}
.grp .en{display:flex;align-items:center;gap:.55rem}
.grp .en::before,.card h2 .en::before{content:"";width:18px;height:18px;flex:none;background:var(--caramel);-webkit-mask:var(--bean-mask) center/contain no-repeat;mask:var(--bean-mask) center/contain no-repeat;transition:transform .6s var(--ease)}
.grp:hover .en::before,.card:hover h2 .en::before{transform:rotate(25deg)}
h2{font-size:1.5rem}
h2 .ar{font-size:.8em}

/* forms: white fields, Academy radius and caramel focus ring */
.form{display:flex;flex-direction:column;gap:.9rem}
.form label{font-weight:700;color:var(--ink);font-size:.98rem}
.form label .ar{font-weight:600}
.field{font:inherit;font-size:1.15rem;min-height:56px;padding:.85rem 1rem;width:100%;background:#FFFFFF;color:var(--ink);border:1.5px solid var(--line-strong);border-radius:var(--r) 0 var(--r) 0;transition:border-color .2s,box-shadow .2s}
.field:hover{border-color:var(--caramel)}
.field:focus{outline:none;border-color:var(--caramel);box-shadow:0 0 0 4px rgba(174,111,41,.22)}
.field[aria-invalid]{border-color:var(--red)}
.error{margin:0}
.error:not(:empty){background:var(--red-bg);border:1.5px solid var(--red);color:var(--red);border-radius:var(--r) 0 var(--r) 0;padding:.8rem 1rem;font-weight:700;animation:shake .45s var(--ease)}
.error .ar{color:var(--red)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* buttons: Academy pills, espresso gradient, lift on hover */
.cta,.ghost,.btn{font:700 1.02rem/1.3 var(--ff-body);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:var(--r) 0 var(--r) 0;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s}
.cta{color:#fff;border:0;min-height:58px;padding:.7rem 1.6rem;background:linear-gradient(180deg,#452c1e,#2a1a12);box-shadow:0 6px 18px -8px rgba(56,35,24,.6)}
.cta .ar{color:#fff;text-align:center;font-weight:600;line-height:1.6}.cta .en{text-align:center}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(56,35,24,.6)}
.cta:active{transform:scale(.98)}
.cta.loading{cursor:progress;opacity:1}
.cta.loading .en::before{content:"";display:inline-block;width:1em;height:1em;margin-inline-end:.5em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:yaspin .8s linear infinite}
@keyframes yaspin{to{transform:rotate(360deg)}}
.gold{background:linear-gradient(180deg,#7C4B18 0%,#714414 50%,#5E3810 100%)}
.ghost,.btn{color:var(--ink);background:#FFFFFF;border:1.5px solid var(--line-strong);min-height:52px;padding:.5rem 1.4rem;font-size:1rem}
.btn{display:inline-flex}
.ghost .ar,.btn .ar{text-align:center;line-height:1.6;font-weight:600}.ghost .en,.btn .en{text-align:center}
.ghost:hover,.btn:hover{border-color:var(--caramel);background:#FFFFFF;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ghost.danger{color:var(--red);border-color:var(--red)}.ghost.danger .ar{color:var(--red)}
.msg{margin:1rem 0 0;padding:.9rem 1.2rem;border:1.5px solid var(--red);border-radius:var(--r) 0 var(--r) 0;background:var(--red-bg);color:var(--red);font-weight:700;animation:shake .45s var(--ease)}
.msg .ar{color:var(--red)}
.linkrow{margin-top:1.2rem;text-align:center}

/* ---------- counter: tier tiles (Academy card + growing caramel top rule, bean mark) ---------- */
.tiers{display:grid;gap:12px}
.drinkrow{grid-template-columns:1fr}
.wsgrid{grid-template-columns:1fr 1fr}
.tier{--tc:var(--caramel);position:relative;font:inherit;color:var(--ink);background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r) 0 var(--r) 0;box-shadow:var(--shadow-sm);
  min-height:118px;padding:1.35rem 1rem 1rem;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:.45rem;text-align:left;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tier::before{content:"";position:absolute;inset-inline-start:var(--r);top:0;height:5px;width:calc((100% - var(--r) - 16px)*.35);background:var(--tc);border-radius:999px;transition:width .5s var(--ease)}
.tier::after{content:"";position:absolute;top:.8rem;inset-inline-end:.9rem;width:22px;height:22px;background:var(--tc);-webkit-mask:var(--bean-mask) center/contain no-repeat;mask:var(--bean-mask) center/contain no-repeat;transition:transform .5s var(--ease)}
.tier:hover,.tier:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e2c39b}
.tier:hover::before,.tier:focus-visible::before,.tier:active::before{width:calc(100% - var(--r) - 16px)}
.tier:hover::after{transform:rotate(-14deg) scale(1.12)}
.tier:active{transform:scale(.985)}
.tier:disabled{cursor:progress}
.tier .len .en{font-family:var(--ff-head);font-weight:700;font-size:1.75rem;white-space:nowrap;line-height:1.1;color:var(--ink)}
.tier .len .ar{font-family:var(--ff-ar-head);font-weight:600;font-size:1.25rem;color:var(--ink);line-height:1.5}
.tier .nm{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:.4rem}
.tier .nm .en{font-size:.78rem;font-weight:800;color:var(--caramel-text);letter-spacing:.16em;text-transform:uppercase}
.tier .nm .ar{font-size:1rem;color:var(--muted);line-height:1.6;font-weight:500}
.drinkrow .tier{min-height:132px;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 3rem 1.1rem 1.4rem}
.drinkrow .tier .len .en{font-size:2.3rem}
.drinkrow .tier .nm{border-top:0;padding-top:0;align-items:flex-end;text-align:right}
.drinkrow .tier .nm .en{font-size:.85rem}
.drinkrow .tier .nm .ar{text-align:right;font-size:1.15rem}
.t-drink{--tc:var(--t-drink)}.t-ws1{--tc:var(--t-ws1)}.t-ws2{--tc:var(--t-ws2)}.t-ws5{--tc:var(--t-ws5)}.t-ws8{--tc:var(--t-ws8)}
@media (max-width:520px){.drinkrow .tier{flex-direction:column;align-items:stretch;justify-content:center;gap:.45rem;padding:1.35rem 1rem 1rem}.drinkrow .tier .nm{border-top:1px solid var(--line);padding-top:.4rem;align-items:stretch}.drinkrow .tier .nm .ar{font-size:1rem}.drinkrow .tier .nm .en{font-size:.78rem}}
@media (min-width:640px){.wsgrid{grid-template-columns:repeat(4,1fr)}}
.recent-list{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.recent-item{width:100%;font:inherit;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--line);border-radius:var(--r-sm) 0 var(--r-sm) 0;min-height:52px;padding:.5rem 1rem;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;cursor:pointer;text-align:left;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.recent-item:hover{border-color:var(--caramel);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.rl{display:flex;flex-direction:column;min-width:0;line-height:1.3}.rt{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82rem}.rn{font-size:.98rem;font-weight:600}
.rc{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.empty{color:var(--muted);padding:.4rem .2rem}

/* ---------- voucher sheet: espresso overlay, pure white Academy "thanks" panel, drawn tick ---------- */
.overlay{position:fixed;inset:0;z-index:60;overflow-y:auto;isolation:isolate;display:flex;justify-content:center;align-items:flex-start;color:var(--on-dark);
  background:radial-gradient(110% 120% at 50% 0%,#3d2619 0%,#2a1a12 55%,#24150E 100%);padding:max(10px,env(safe-area-inset-top)) 14px 24px}
.overlay::before{content:"";position:fixed;inset:0;z-index:-1;background:url("img/pattern-diamond.svg") 0 0/200px auto repeat;opacity:.07;pointer-events:none}
.sheetwrap{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ov-logo{height:40px;width:auto}
.sheet{width:100%;display:flex;flex-direction:column;gap:.55rem;align-items:stretch;margin:0;animation:stage .5s var(--ease) both}
.overlay .panel{padding:1.2rem 1.1rem 1.3rem}
.ov-top{display:flex;align-items:center;justify-content:center;gap:.9rem}
.tick{width:48px;flex:none}.tick svg{display:block;width:100%;fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .9s var(--ease) .25s forwards}
.tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--ease) .95s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ov-tier{margin:0;text-align:center}
.ov-tier .en{font-family:var(--ff-head);font-weight:700;font-size:1.6rem;line-height:1.2;color:var(--ink)}
.ov-tier .ar{font-family:var(--ff-ar-head);font-weight:600;text-align:center;font-size:1.25rem;color:var(--ink);line-height:1.5}
.ov-label{margin:.3rem 0 0;text-align:center;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel-text);font-weight:800}
.ov-label .ar{letter-spacing:0;font-size:1rem;text-align:center;color:var(--caramel-text);font-weight:600;line-height:1.6}
.code{margin:0;text-align:center;font-family:var(--ff-body);font-weight:700;font-size:clamp(1.8rem,9.6vw,3.4rem);line-height:1.1;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  background:#FFFFFF;border:2px solid var(--caramel);box-shadow:var(--shadow-sm);border-radius:var(--r) 0 var(--r) 0;padding:.8rem .4rem;color:var(--ink);word-break:keep-all}
.qrbox{background:#FFFFFF;border:2px solid var(--espresso);box-shadow:var(--shadow-sm);border-radius:var(--r) 0 var(--r) 0;padding:12px;align-self:center;width:min(58vw,236px);aspect-ratio:1/1;display:flex}
.qr{width:100%;height:100%}.qr svg{width:100%;height:100%;display:block}
.how{margin:0;text-align:center;font-size:.98rem;line-height:1.45;color:var(--ink)}
.how .ar{text-align:center;line-height:1.7;color:var(--muted)}
.ov-actions{display:grid;gap:.6rem;margin-top:.4rem}
.overlay .msg{margin-top:.2rem}

/* ---------- manager: cards, charts, tables ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:860px){.grid{grid-template-columns:1fr 1fr}.tiercard{grid-column:1 / 2}}
.card{position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r) 0 var(--r) 0;box-shadow:var(--shadow-sm);padding:1.5rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;min-width:0;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card::after{content:"";position:absolute;inset-inline-start:var(--r);top:0;height:4px;width:calc((100% - var(--r) - 16px)*.3);background:var(--caramel);border-radius:999px;transition:width .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e2c39b}.card:hover::after{width:calc(100% - var(--r) - 16px)}
.sec.stats-sec{padding-top:clamp(1.6rem,4vw,2.6rem)}
.stack{display:flex;flex-direction:column;gap:16px}
.chartbox{width:100%}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--ff-body)}
.chart .ax{fill:#5a4334;font-size:11px}
.chart .val{fill:#382318;font-size:10.5px;font-weight:700}
.chart .grid{stroke:#e7d6c2;stroke-width:1;stroke-dasharray:2 3}
.chart .ring{stroke:#F5E4D1}
.chart .big{fill:#382318;font-size:36px;font-family:var(--ff-head);font-weight:700}
.chart .sub{fill:#5a4334;font-size:12px}
.chart .cell{fill:#F5E4D1}
.chart .lv1{fill:#C28526}.chart .lv2{fill:#B35F25}.chart .lv3{fill:#A32E2B}.chart .lv4{fill:#6E1214}
.chart rect.c-drink,.sw.c-drink{fill:var(--t-drink);background:var(--t-drink)}
.chart rect.c-ws1,.sw.c-ws1{fill:var(--t-ws1);background:var(--t-ws1)}
.chart rect.c-ws2,.sw.c-ws2{fill:var(--t-ws2);background:var(--t-ws2)}
.chart rect.c-ws5,.sw.c-ws5{fill:var(--t-ws5);background:var(--t-ws5)}
.chart rect.c-ws8,.sw.c-ws8{fill:var(--t-ws8);background:var(--t-ws8)}
.chart .seg.c-drink{stroke:var(--t-drink)}.chart .seg.c-ws1{stroke:var(--t-ws1)}.chart .seg.c-ws2{stroke:var(--t-ws2)}.chart .seg.c-ws5{stroke:var(--t-ws5)}.chart .seg.c-ws8{stroke:var(--t-ws8)}
.sw{display:inline-block;width:14px;height:14px;border-radius:var(--r-xs) 0 var(--r-xs) 0;flex:none}
.donutrow{display:flex;flex-direction:column;gap:14px;align-items:center}
.dn{max-width:230px}
.legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}
.legend li{display:grid;grid-template-columns:14px 1fr auto 3.2em;gap:10px;align-items:center;font-size:.95rem;line-height:1.3}
.legend .lt{display:flex;flex-direction:column}.legend .lt .ar{font-size:.88rem;line-height:1.6;color:var(--muted)}
.legend b{font-variant-numeric:tabular-nums}.legend .pc{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.heatkey{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.heatkey i{display:inline-block;width:18px;height:14px;border-radius:var(--r-xs) 0 var(--r-xs) 0}
.heatkey .k0{background:#F5E4D1}.heatkey .k1{background:#C28526}.heatkey .k2{background:#B35F25}.heatkey .k3{background:#A32E2B}.heatkey .k4{background:#6E1214}
.bigline{display:flex;flex-direction:column;gap:2px}
.bt{font-family:var(--ff-head);font-weight:700;font-size:1.7rem;line-height:1.2;color:var(--ink)}
.bn2{color:var(--caramel-text);font-weight:800}
.slots{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.slots li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:6px}
.rk{color:#fff;background:linear-gradient(180deg,#452c1e,#2a1a12);border-radius:var(--r-xs) 0 var(--r-xs) 0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;color:var(--caramel-text);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px;border-bottom:2px solid var(--caramel)}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.st-ok{color:var(--green-text);font-weight:700}.st-x{color:var(--red);font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- footer (espresso, white mark) ---------- */
.foot{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:var(--on-dark-2);padding:2.6rem 1rem calc(2rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,#2a1a12 0%,#24150E 100%)}
.foot img{width:64px;height:auto;margin:0 auto .8rem}
.foot p{margin:.2rem 0;font-size:.92rem;color:var(--on-dark-2)}
.foot .fb{font-family:var(--ff-head);font-weight:700;font-size:1.15rem;color:var(--on-dark)}
.foot .fb span,.foot .fs span{font-family:var(--ff-ar-head);font-weight:600}
.foot .fs span{font-family:var(--ff-ar);font-weight:500}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;background:url("img/pattern-diamond.svg") 0 0/200px auto repeat;opacity:.06}

@media (orientation:landscape) and (max-height:520px){
  .wsgrid{grid-template-columns:repeat(4,1fr)}
  .tier{min-height:100px;padding:1.2rem .8rem .8rem}.drinkrow .tier{min-height:100px;padding:1.2rem 3rem .8rem 1.2rem}
  .hero{padding:4.6rem 0 3.4rem}.hero h1{font-size:1.6rem}.hero h1 .ar{font-size:.7em;margin-top:0}.lead{display:none}.eyebrow{margin-bottom:.4rem}
  .seats{margin-bottom:.7rem;padding:.3rem .8rem}.panel{margin-top:-2.2rem}
  .top{padding-block:.35rem}.brandmark img{height:38px}.navlink{min-height:44px;padding-block:.2rem}
  .overlay .sheetwrap{max-width:820px}.code{font-size:2.5rem}.ov-logo{display:none}
  .overlay .sheet{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
  .overlay .ov-top,.overlay .ov-label,.overlay .code,.overlay .how,.overlay .ov-actions,.overlay .msg{grid-column:1}
  .overlay .qrbox{grid-column:2;grid-row:1 / span 5;align-self:start;justify-self:center;width:min(48vh,230px)}
  .overlay .panel{padding:.9rem 1.1rem 1rem}
}
@media (max-width:600px){body{font-size:16px}.brandmark img{height:40px}.navlink{padding-inline:.7rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tick circle,.tick path{stroke-dashoffset:0}
}

/* =========================================================================================================
   v3 (17 Oct 2026): where it was issued (table / Bar / Green sofa), charging sockets, location + power stats.
   Same rules: all text 7:1+, pure white application areas, selection never shown by colour alone (fill + ring + bold).
   ========================================================================================================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plug{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--caramel-text)}
.plug.sm{width:14px;height:14px;vertical-align:-2px;display:inline-block}
.hint{margin:.2rem 0 .8rem}
.where{scroll-margin-top:84px}
.where.needs{animation:shake .45s var(--ease)}
.where.needs .tablegrid{outline:3px solid var(--red);outline-offset:6px;border-radius:var(--r-sm) 0 var(--r-sm) 0}
.legend-plug .lg .ar{text-align:left}
.tablegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.loc{position:relative;font:inherit;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--line-strong);border-radius:var(--r-sm) 0 var(--r-sm) 0;min-height:60px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s}
.loc .n{font-weight:800;font-size:1.65rem;line-height:1;font-variant-numeric:tabular-nums}
.loc .plug{position:absolute;top:5px;inset-inline-end:5px;width:15px;height:15px}
.loc:hover{border-color:var(--caramel);box-shadow:var(--shadow-sm)}
.loc:active{transform:scale(.97)}
.loc[aria-pressed=true]{background:linear-gradient(180deg,#452c1e,#2a1a12);color:#FFFFFF;border-color:#2a1a12;box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px var(--caramel)}
.loc[aria-pressed=true] .plug,.loc[aria-pressed=true] .ar,.loc[aria-pressed=true] .en{color:#FFFFFF}
.loc[aria-pressed=true]::after{content:"";position:absolute;bottom:5px;inset-inline-end:6px;width:14px;height:14px;background:#FFFFFF;-webkit-mask:var(--tick-mask) center/contain no-repeat;mask:var(--tick-mask) center/contain no-repeat}
:root{--tick-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.locrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.loc.big{border-radius:var(--r) 0 var(--r) 0;min-height:74px;padding:.5rem .9rem;justify-content:flex-start}
.loc.big .nm{display:flex;flex-direction:column;text-align:left}
.loc.big .nm .en{font-family:var(--ff-head);font-weight:700;font-size:1.35rem;line-height:1.15}
.loc.big .nm .ar{font-family:var(--ff-ar-head);font-weight:600;font-size:1.1rem;line-height:1.5;color:var(--muted);text-align:left}
.loc.big .plug{top:7px;width:18px;height:18px}
.loc.big[aria-pressed=true] .nm .ar,.loc.big[aria-pressed=true] .nm .en{color:#FFFFFF}
.legend-plug{display:flex;align-items:center;gap:.4rem;margin:.7rem 0 0}.legend-plug .en,.legend-plug .ar{display:inline}.legend-plug .ar{margin-inline-start:.5rem}
.placeholder-note{margin:.5rem 0 0;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm) 0 var(--r-sm) 0;padding:.5rem .8rem}
.placeholder-note .ar{line-height:1.7}
.powerpick{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem}
.powerpick h3.sub{font-size:1.15rem;display:flex;flex-direction:column}.powerpick h3 .ar{font-size:.9em}
.powerbtns{display:grid;grid-template-columns:1fr;gap:8px;margin-top:.6rem}
@media (min-width:520px){.powerbtns{grid-template-columns:1fr 1fr}}
.pwr{font:inherit;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--line-strong);border-radius:var(--r) 0 var(--r) 0;min-height:66px;padding:.5rem 1rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:.1rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.pwr:hover{border-color:var(--caramel);box-shadow:var(--shadow-sm)}.pwr:active{transform:scale(.98)}
.pwr .nm{display:flex;flex-direction:column}.pwr .nm .en{font-weight:800;font-size:1.02rem;line-height:1.3}.pwr .nm .ar{font-size:.95rem;line-height:1.6;color:var(--muted);font-weight:500}
.pwr .sub2{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:.2rem;padding-top:.2rem}.pwr .sub2 .en{font-size:.84rem;font-weight:700;color:var(--caramel-text)}.pwr .sub2 .ar{font-size:.84rem;line-height:1.6;color:var(--muted)}
.pwr[aria-pressed=true]{background:linear-gradient(180deg,#452c1e,#2a1a12);color:#FFFFFF;border-color:#2a1a12;box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px var(--caramel)}
.pwr[aria-pressed=true] .nm .en,.pwr[aria-pressed=true] .nm .ar,.pwr[aria-pressed=true] .sub2 .en,.pwr[aria-pressed=true] .sub2 .ar{color:#FFFFFF}
.pwr[aria-pressed=true] .sub2{border-top-color:rgba(255,255,255,.5)}
.picksum{margin:.2rem 0 .9rem;border:1.5px dashed var(--line-strong);border-radius:var(--r) 0 var(--r) 0;padding:.6rem 1rem;color:var(--ink);font-weight:700;line-height:1.35}
.picksum[data-set="1"]{border:2px solid var(--caramel)}
.picksum .ar{font-weight:600;color:var(--muted);font-size:.95rem;line-height:1.7}
.notice{margin:1rem 0 0;padding:.9rem 1.2rem;border:1.5px solid var(--green);border-radius:var(--r) 0 var(--r) 0;background:#FFFFFF;color:var(--green-text);font-weight:700}
.notice .ar{color:var(--green-text)}
.recent .rn .plug{margin-inline-start:2px}.recent .rn .pw{margin-inline-start:3px;font-size:.82rem;font-weight:700;color:var(--caramel-text)}
.recent .rt{font-weight:600}

/* voucher sheet: where + power status */
.ov-meta{display:flex;flex-direction:column;gap:.45rem;align-items:center;text-align:center}
.ov-where{margin:0}
.ov-where .en{font-family:var(--ff-head);font-weight:700;font-size:1.45rem;line-height:1.2;color:var(--ink);text-align:center}
.ov-where .ar{font-family:var(--ff-ar-head);font-weight:600;font-size:1.15rem;color:var(--ink);text-align:center;line-height:1.5}
.ov-power{margin:0;width:100%;border:2px solid var(--green);border-radius:var(--r) 0 var(--r) 0;background:#FFFFFF;padding:.45rem .8rem;font-weight:700;font-size:.98rem;line-height:1.35;color:var(--green-text)}
.ov-power .ar{text-align:center;color:var(--green-text);font-weight:600;font-size:.95rem;line-height:1.7}.ov-power .en{text-align:center}
.ov-power[data-state=none],.ov-power[data-state=off]{border:1.5px solid var(--line-strong);color:var(--ink)}
.ov-power[data-state=none] .ar,.ov-power[data-state=off] .ar{color:var(--muted)}
.ov-power[data-state=warn]{border-color:var(--red);color:var(--red)}.ov-power[data-state=warn] .ar{color:var(--red)}

/* stats: location + power charts */
.chart rect.c-tbl,.sw.c-tbl{fill:#6B4A36;background:#6B4A36}
.chart rect.c-wall,.sw.c-wall{fill:#C4552D;background:#C4552D}
.chart rect.c-bar,.sw.c-bar{fill:#BD8123;background:#BD8123}
.chart rect.c-sofa,.sw.c-sofa{fill:#2F7A52;background:#2F7A52}
.chart rect.c-unk,.sw.c-unk{fill:#8A6D5A;background:#8A6D5A}
.chart .seg.c-tbl{stroke:#6B4A36}.chart .seg.c-bar{stroke:#BD8123}.chart .seg.c-sofa{stroke:#2F7A52}.chart .seg.c-unk{stroke:#8A6D5A}.chart .seg.c-wall{stroke:#C4552D}
.hbars .ax{font-size:11px}.hbars .val{font-size:11px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.95rem;line-height:1.4}
.facts li{border-top:1px solid var(--line);padding-top:.35rem}.facts li:first-child{border-top:0;padding-top:0}
.facts b{font-variant-numeric:tabular-nums}
.matrix{font-size:.86rem;min-width:300px}
.matrix th,.matrix td{padding:6px 5px}
.matrix thead th{white-space:nowrap}
.matrix thead th.num{text-align:right}
.matrix tbody th,.matrix tfoot th{text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink);font-weight:700;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.matrix .num{text-align:right;font-variant-numeric:tabular-nums}
.matrix td{border-bottom:1px solid var(--line);color:var(--ink);font-weight:600}
.matrix td.m1{background:#F5E4D1}.matrix td.m2{background:#EEDAB9}.matrix td.m3{background:#E8CC9F}.matrix td.m4{background:#E2BE86;font-weight:800}
.matrix td.tot{font-weight:800}
.matrix tfoot th,.matrix tfoot td{border-top:2px solid var(--caramel);border-bottom:0;font-weight:800;color:var(--ink)}
.matrix td:not(.m1):not(.m2):not(.m3):not(.m4):not(.tot){color:var(--muted);font-weight:500}
.demo-flag{display:flex;flex-direction:column;gap:.15rem;margin:.9rem 0 0;border:1.5px dashed rgba(243,217,181,.85);border-radius:var(--r) 0 var(--r) 0;padding:.6rem 1rem;color:var(--on-dark-2);font-size:.9rem;line-height:1.4;max-width:46rem}
.demo-flag b{letter-spacing:.16em;font-size:.78rem;color:var(--on-dark)}

/* manager: power settings */
.field.sm{min-height:46px;font-size:1rem;padding:.35rem .7rem;border-radius:var(--r-sm) 0 var(--r-sm) 0}
.ar-in{margin-top:6px;text-align:right}
.wallgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.wl{display:flex;flex-direction:column;gap:.3rem;font-weight:700}.wl small{font-weight:400;color:var(--muted)}
.confirm{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1rem}
.confirm input,.chk input{width:24px;height:24px;accent-color:#382318;flex:none}
.card.placeholder{border:2px dashed var(--caramel)}
.ph-tag{margin:0;font-weight:700}
.ph-tag b{background:#6E410F;color:#FFFFFF;padding:.1rem .7rem;border-radius:var(--r-xs) 0 var(--r-xs) 0;letter-spacing:.14em;font-size:.75rem;margin-inline-end:.4rem}
.card.mockcard{box-shadow:inset 6px 0 0 var(--caramel),var(--shadow-sm);padding-inline-start:calc(1.2rem + 5px)}   /* inset rule follows the curved corners (a thick border would taper) */
.card.mockcard:hover{box-shadow:inset 6px 0 0 var(--caramel),var(--shadow)}
.card.mockcard p{margin:0}
.pptable{min-width:0}
.pptable td,.pptable th{vertical-align:top}
.pptable .fixed{font-weight:700}
.pptable small,.log small{color:var(--muted)}
.chk label{display:flex;align-items:center;gap:.5rem;font-weight:700}
.log{font-size:.85rem}
.log .req{font-size:.74rem;word-break:break-all;color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
@media (max-width:720px){
  .pptable thead{display:none}
  .pptable tr{display:block;border-top:2px solid var(--caramel);padding:.5rem 0}
  .pptable td,.pptable th{display:block;border:0;padding:.3rem 0}
  .pptable td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--caramel-text)}
}
@media (min-width:560px){.tablegrid{grid-template-columns:repeat(6,1fr)}}
@media (min-width:900px){.tablegrid{grid-template-columns:repeat(12,1fr)}.loc.big{min-height:84px}}
@media (orientation:landscape) and (max-height:520px){
  .tablegrid{grid-template-columns:repeat(8,1fr)}.loc{min-height:56px}
  .overlay .ov-meta{grid-column:1;order:3;gap:.25rem}.overlay .qrbox{grid-row:1 / span 7}
  .overlay .ov-top{order:1}.overlay .code{order:2}.overlay .how{order:4}.overlay .ov-actions{order:5}.overlay .msg{order:6}.overlay .ov-label{display:none}
  .ov-where .en,.ov-where .ar{display:inline;font-size:1.15rem}.ov-where .ar{font-size:1rem;margin-inline-start:.5rem}
  .ov-power{font-size:.85rem;padding:.3rem .7rem}.ov-power .ar{font-size:.85rem;line-height:1.5}.ov-mock{font-size:.74rem}.ov-mock .ar{line-height:1.4}
  .overlay .ov-top .tick{width:40px}.overlay .ov-tier .en{font-size:1.35rem}.overlay .ov-tier .ar{font-size:1.05rem}
}
.legend-plug{align-items:flex-start}.legend-plug .plug{margin-top:.3rem}.legend-plug .lg .en,.legend-plug .lg .ar{display:block;margin:0}
.ov-mock{margin:0;text-align:center}
#vh,#powerpick{scroll-margin-top:84px}
@media (max-width:600px){.counter-mode .hero .lead{display:none}.counter-mode .hero{padding-bottom:4.2rem}}
@media (max-width:420px){.brandmark img{height:34px}.topnav{gap:.35rem}.navlink{padding:.3rem .65rem;font-size:.8rem;min-height:44px}.navlink .en{white-space:nowrap}.navlink .ar{font-size:.82rem}}
@media (max-width:480px){
  .matrix{font-size:.8rem;min-width:0}.matrix th,.matrix td{padding:6px 3px}.matrix thead th .sw{display:none}.matrix tbody th,.matrix tfoot th{font-size:.8rem}
  table.latest{font-size:.82rem}table.latest td,table.latest th{padding:7px 4px}
}

/* v3 contrast fixes found by the pixel audit */
td>.sw,th>.sw{margin-right:6px;vertical-align:-2px}
.legend-plug{margin-bottom:1rem}
@media (max-width:420px){.navlink{padding:.3rem .8rem}}
@media (max-width:480px){
  table.latest{font-size:.8rem}table.latest th{font-size:.64rem;letter-spacing:.04em;padding:6px 3px}table.latest td{padding:7px 3px}
  table.latest .sw{display:none}
}