/* =====================================================================
   TEMPORARY — build notice. Delete this file before launch.
   Every selector is prefixed .vb- so it cannot touch the site's styles,
   and nothing here is referenced by any other stylesheet.
   Deliberately NOT the brand palette: this is site signage, amber and
   red, so nobody mistakes it for part of the finished design.
   ===================================================================== */

.vb-scrim{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 12, 10, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: vb-fade .32s cubic-bezier(.16, 1, .3, 1) both;
}
.vb-scrim[hidden]{ display: none; }

.vb-card{
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border-radius: 18px;
  background: #FFFDF8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: vb-rise .42s cubic-bezier(.16, 1, .3, 1) both;
  font-family: "Inter Tight", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #1A1714;
}
[dir="rtl"] .vb-card{
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* The site sets a display serif on bare h2 elements, and a rule on the
   element beats a family merely inherited from .vb-card — which put the
   notice headline in Instrument Serif. :where() carries no specificity,
   so this reads as .vb-card alone and still wins. */
.vb-card :where(h2, p, a, span, button){ font-family: inherit; }

/* hazard tape across the top — red and yellow, the one place it belongs */
.vb-tape{
  height: 12px;
  background: repeating-linear-gradient(
    -45deg,
    #F7B500 0 14px,
    #1A1714 14px 18px,
    #D8241F 18px 32px,
    #1A1714 32px 36px
  );
}

.vb-x{
  position: absolute;
  top: 22px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 23, 20, .06);
  color: #1A1714;
  cursor: pointer;
  transition: background-color .25s ease;
}
.vb-x svg{ width: 15px; height: 15px; }
.vb-x:hover{ background: rgba(26, 23, 20, .13); }

.vb-body{ padding: 26px clamp(22px, 5vw, 34px) clamp(24px, 5vw, 30px); }

.vb-badge{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #FFF1CC;
  border: 1px solid #F0CE72;
  color: #B36B00;
}
.vb-hat{ width: 28px; height: 28px; }

.vb-label{
  margin: 0 0 10px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #D8241F;
}
[dir="rtl"] .vb-label{ letter-spacing: 0; }

.vb-title{
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 4.4vw, 1.72rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
}
[dir="rtl"] .vb-title{ letter-spacing: 0; line-height: 1.45; font-weight: 500; }

.vb-text{
  margin: 0 0 22px;
  font-size: .93rem;
  line-height: 1.64;
  color: #5A534C;
}
[dir="rtl"] .vb-text{ line-height: 1.9; }

.vb-by{
  padding: 16px 18px;
  border-radius: 12px;
  background: #FCF6E8;
  border: 1px solid #EFDFB8;
}
.vb-by-label{
  margin: 0 0 4px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #9A7B3A;
}
[dir="rtl"] .vb-by-label{ letter-spacing: 0; }
.vb-brand{
  margin: 0;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.vb-firm{
  margin: 3px 0 0;
  font-size: .84rem;
  color: #5A534C;
}
.vb-mail{
  display: inline-block;
  margin-top: 9px;
  font-size: .86rem;
  font-weight: 500;
  color: #D8241F;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 36, 31, .35);
  padding-bottom: 1px;
}
.vb-mail:hover{ border-bottom-color: #D8241F; }

.vb-ok{
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: #1A1714;
  color: #FFFDF8;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.vb-ok:hover{ background: #332D27; transform: translateY(-1px); }

.vb-x:focus-visible,
.vb-ok:focus-visible,
.vb-mail:focus-visible{ outline: 2px solid #D8241F; outline-offset: 3px; }

@keyframes vb-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes vb-rise{
  from{ opacity: 0; transform: translateY(16px) scale(.97); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .vb-scrim, .vb-card{ animation: none; }
  .vb-ok:hover{ transform: none; }
}