/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — FIRST-RUN INTRODUCTION
   Companion stylesheet to owlmark-onboarding.js.
   One calm layer. Never a second one on top of it.
   ═══════════════════════════════════════════════════════════════════ */

.omo-scrim{
  position:fixed;inset:0;z-index:18000;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:rgba(11,18,32,0);
  opacity:0;
  transition:background .26s ease, opacity .26s ease;
}
.omo-scrim.open{background:rgba(11,18,32,.62);opacity:1}

.omo-card{
  width:min(520px, 100%);
  max-height:min(88vh, 720px);overflow:auto;
  position:relative;
  padding:30px 30px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border:1px solid rgba(201,154,61,.34);
  box-shadow:0 30px 70px rgba(10,16,32,.42),0 2px 8px rgba(10,16,32,.2);
  transform:translateY(14px) scale(.985);
  transition:transform .26s cubic-bezier(.22,.8,.3,1);
}
.omo-scrim.open .omo-card{transform:none}

.omo-crest{
  width:46px;height:46px;object-fit:contain;
  display:block;margin:0 0 14px;
  filter:drop-shadow(0 3px 8px rgba(16,26,45,.22));
}
.omo-title{
  margin:0 0 10px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.72rem;line-height:1.15;font-weight:700;
  color:#101A2D;letter-spacing:.01em;
}
.omo-lead{
  margin:0 0 14px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.95rem;line-height:1.55;color:#3A4257;
}
.omo-points{
  margin:0 0 20px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px;
}
.omo-points li{
  position:relative;padding-inline-start:22px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.87rem;line-height:1.5;color:#4A5468;
}
.omo-points li::before{
  content:"";position:absolute;inset-inline-start:4px;top:.55em;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
}

.omo-dots{display:flex;gap:7px;margin:0 0 18px}
.omo-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(16,26,45,.18);
  transition:background .2s ease, width .2s ease;
}
.omo-dot.on{width:22px;border-radius:99px;background:linear-gradient(90deg,#D8B15C,#B8862F)}

.omo-actions{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.omo-btn{
  min-height:44px;padding:10px 18px;
  border-radius:12px;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.88rem;font-weight:700;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.omo-btn.gold{
  margin-inline-start:auto;
  border:1px solid #A87C2A;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
  color:#fff;
  box-shadow:0 6px 16px rgba(184,134,47,.32);
}
.omo-btn.gold:hover{background:linear-gradient(180deg,#E2BE72,#C4923A)}
.omo-btn.gold:active{transform:translateY(1px)}
.omo-btn.quiet{
  border:1px solid rgba(16,26,45,.14);
  background:rgba(16,26,45,.04);
  color:#3A4257;
}
.omo-btn.quiet:hover{background:rgba(16,26,45,.08)}
.omo-btn:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
.omo-btn[hidden]{display:none !important}

.omo-skip{
  display:block;margin:14px auto 0;
  min-height:36px;padding:6px 12px;
  border:0;border-radius:9px;background:transparent;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem;font-weight:600;color:#78808F;
  cursor:pointer;
}
.omo-skip:hover{color:#3A4257;background:rgba(16,26,45,.05)}
.omo-skip:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
.omo-skip[hidden]{display:none !important}

body.lang-ar .omo-title{font-family:'Cairo',system-ui,sans-serif;font-size:1.44rem}
body.lang-ar .omo-lead,
body.lang-ar .omo-points li,
body.lang-ar .omo-btn,
body.lang-ar .omo-skip{font-family:'Cairo',system-ui,sans-serif}

@media (max-width: 520px){
  .omo-scrim{padding:14px;align-items:flex-end}
  .omo-card{
    padding:24px 20px 18px;
    border-radius:22px 22px 16px 16px;
    max-height:92vh;
  }
  .omo-title{font-size:1.44rem}
  .omo-actions{gap:8px}
  .omo-btn{flex:1 1 auto;justify-content:center;text-align:center}
  .omo-btn.gold{margin-inline-start:0;flex:1 1 100%;order:-1}
}

@media (prefers-reduced-motion: reduce){
  .omo-scrim,.omo-card,.omo-dot,.omo-btn{transition:none !important}
  .omo-card{transform:none !important}
}

@media print{
  .omo-scrim{display:none !important}
}