/* bepharmacy.ma: the --bp-* tokens of docs/design/foundations.md; layout from docs/design/boards/vitrine.html. */
:root{
--bp-surface:#FAFAF7;--bp-surface-raised:#fff;--bp-surface-sunken:#F1F0EB;--bp-text:#1C1B19;--bp-text-muted:#5C5A55;
--bp-border:#D9D6CE;--bp-border-strong:#8A867D;--bp-primary:#1F4E5F;--bp-on-primary:#fff;
--bp-success:#1E6B45;--bp-success-surface:#E6F3EC;
--bp-font-latin:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--bp-space-3:12px;--bp-space-4:16px;--bp-space-5:24px;--bp-space-6:32px;--bp-space-7:48px;--bp-space-8:64px;
--bp-radius-md:8px;--bp-radius-lg:12px;--bp-shadow-1:0 1px 2px rgb(28 27 25/.08);--bp-shadow-2:0 8px 24px rgb(28 27 25/.16);
--max:1120px}
*{box-sizing:border-box}
body{margin:0;background:var(--bp-surface);color:var(--bp-text);font:16px/1.45 var(--bp-font-latin)}
a{color:var(--bp-primary)}
:focus-visible{outline:2px solid var(--bp-primary);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:10;background:#fff;padding:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--bp-space-4)}
header.top{position:sticky;top:0;z-index:5;background:rgb(250 250 247/.95);border-bottom:1px solid var(--bp-border)}
header .wrap{display:flex;align-items:center;gap:var(--bp-space-5);min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bp-text);font-size:20px;letter-spacing:-.02em}
.brand b,.fbrand b{color:var(--bp-primary);font-weight:600}
nav.main{display:flex;gap:var(--bp-space-5);flex:1}
nav.main a{color:var(--bp-text);text-decoration:none;padding:10px 0;font-size:15px}
nav.main a[aria-current=page]{color:var(--bp-primary);font-weight:600;box-shadow:inset 0 -2px var(--bp-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:var(--bp-radius-md);font:600 15px var(--bp-font-latin);text-decoration:none;border:1.5px solid var(--bp-primary);transition:background .12s}
.btn.p{background:var(--bp-primary);color:var(--bp-on-primary)}.btn.p:hover{background:#173b49}
.btn.s{background:transparent;color:var(--bp-primary)}.btn.s:hover{background:#e7eef0}
.btn.inv{background:#fff;color:var(--bp-primary);border-color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
h1{font-size:clamp(34px,5.2vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0 0 var(--bp-space-4);font-weight:600}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--bp-space-3);font-weight:600}
h3,.h3{font-size:18px;line-height:1.3;letter-spacing:0;margin:0 0 6px;font-weight:600}
.lead{font-size:19px;color:var(--bp-text-muted);max-width:56ch}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bp-primary);margin:0 0 10px}
.note{font-size:14px;color:var(--bp-text-muted)}
.hero{padding:var(--bp-space-8) 0 var(--bp-space-7);background:linear-gradient(180deg,#eef3f4 0,var(--bp-surface) 100%)}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--bp-space-7);align-items:center}
.cta{display:flex;gap:var(--bp-space-3);flex-wrap:wrap;margin:var(--bp-space-5) 0 var(--bp-space-3)}
.phones{display:flex;justify-content:center}
.phone{width:240px;background:var(--bp-surface-raised);border:8px solid #1c1b19;border-radius:32px;padding:14px 12px;box-shadow:var(--bp-shadow-2);font-size:13px}
.phone .bar{height:6px;width:60px;background:#d9d6ce;border-radius:9px;margin:0 auto 12px}
.scanbox{height:150px;border-radius:var(--bp-radius-md);background:#1c1b19;position:relative;margin-bottom:10px}
.scanbox::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;background:#8fd0e0}
.pcard{border:1px solid var(--bp-border);border-radius:var(--bp-radius-md);padding:10px;margin-bottom:8px}
.mocknote{margin:4px 0 0;text-align:center;font-size:11px;color:var(--bp-text-muted)}
.amt{font-variant-numeric:tabular-nums;font-weight:600}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.chip.ok{background:var(--bp-success-surface);color:var(--bp-success)}
.logos{list-style:none;display:flex;gap:var(--bp-space-6);flex-wrap:wrap;color:var(--bp-text-muted);font-weight:600;justify-content:center;padding:var(--bp-space-5) 0;margin:0}
.band{padding:var(--bp-space-7) 0}.band.alt{background:var(--bp-surface-sunken)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bp-space-5);margin-top:var(--bp-space-6)}
.card{background:var(--bp-surface-raised);border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);padding:var(--bp-space-5);box-shadow:var(--bp-shadow-1)}
.card p{color:var(--bp-text-muted)}
.ico{width:44px;height:44px;border-radius:var(--bp-radius-md);background:#e7eef0;color:var(--bp-primary);display:grid;place-items:center;font-size:22px;margin-bottom:var(--bp-space-3)}
.panel{background:var(--bp-surface-raised);border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);padding:var(--bp-space-5);box-shadow:var(--bp-shadow-2)}
ul.tick{list-style:none;padding:0;margin:var(--bp-space-4) 0}
.panel ul.tick{margin:0}
ul.tick li{padding:6px 0 6px 28px;position:relative}
ul.tick li::before{content:"✓";position:absolute;left:0;color:var(--bp-success);font-weight:700}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bp-space-5);margin:var(--bp-space-5) 0 0}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bp-primary);color:#fff;font-weight:600;margin-bottom:10px}
.ctaband{background:var(--bp-primary);color:#fff;padding:var(--bp-space-7) 0;text-align:center}
.ctaband p{color:#d6e3e7;max-width:52ch;margin:0 auto;font-size:18px}
.ctaband .cta{justify-content:center}
.contact{display:flex;gap:var(--bp-space-3);flex-wrap:wrap;margin-top:var(--bp-space-4)}
.doc{max-width:760px;padding:var(--bp-space-7) var(--bp-space-4)}
.doc h2{margin-top:var(--bp-space-6);font-size:22px}
.doc p{color:var(--bp-text-muted)}
footer{background:#16171a;color:#c9c8c2;padding:var(--bp-space-7) 0 var(--bp-space-5)}
footer a{color:#e9e8e2;text-decoration:none;display:block;padding:5px 0}footer a:hover{text-decoration:underline}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--bp-space-6)}
footer h2{color:#fff;margin:0 0 8px;font-size:14px;letter-spacing:0}
.fbrand{color:#fff;font-size:20px;margin:0 0 8px}.fbrand b{color:#9fd0df}
footer small{display:block;margin-top:var(--bp-space-6);border-top:1px solid #34353a;padding-top:var(--bp-space-4)}
@media (max-width:860px){.two{grid-template-columns:1fr}.grid3,.steps{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr 1fr}nav.main{order:3;flex-basis:100%;overflow-x:auto;gap:var(--bp-space-4)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.soon{font-size:14px;font-weight:600;color:var(--bp-primary);border:1.5px solid var(--bp-border-strong);border-radius:var(--bp-radius-md);padding:10px 14px}