/* ============================================================
   Solution video gate — email capture before playback.
   Inherits the site's tokens (--gold, --ink, --panel …) from premium.html.
   ============================================================ */

.vg-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;margin-top:18px;padding:0 18px;
  background:transparent;border:1px solid rgba(245,242,233,.28);color:var(--ink,#f5f2e9);
  font:600 13px/1 var(--sans,system-ui);letter-spacing:.01em;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
html[dir="rtl"] .vg-trigger{font-family:var(--ar-sans,system-ui);font-size:14.5px}
.vg-trigger:hover{background:var(--ink,#f5f2e9);color:var(--black,#020304);border-color:var(--ink,#f5f2e9)}
.vg-trigger:active{transform:translateY(1px)}
.vg-trigger[data-state="unlocked"]{border-color:rgba(215,180,106,.55);color:var(--gold-soft,#ead9b6)}
.vg-trigger[data-state="unlocked"]:hover{background:var(--gold-soft,#ead9b6);color:var(--black,#020304)}
.vg-trigger__icon{flex:none;width:15px;height:15px;fill:currentColor}

/* ---------- Dialog shell ---------- */
.vg-dialog{
  width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  padding:0;border:1px solid var(--line,rgba(245,242,233,.14));
  background:var(--panel,#0c1016);color:var(--ink,#f5f2e9);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.vg-dialog::backdrop{background:rgba(2,3,4,.82);backdrop-filter:blur(6px)}
.vg-dialog[open]{animation:vg-in .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes vg-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vg-dialog[open]{animation:none}}

.vg-dialog__inner{padding:clamp(22px,4vw,38px);overflow-y:auto;max-height:calc(100dvh - 34px)}
.vg-dialog__close{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;
  width:40px;height:40px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--ink-70,rgba(245,242,233,.7));
  font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
}
.vg-dialog__close:hover{color:var(--ink,#f5f2e9);background:rgba(245,242,233,.08)}

.vg-eyebrow{
  margin:0 0 12px;color:var(--gold-soft,#ead9b6);font-family:var(--mono,ui-monospace);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
html[dir="rtl"] .vg-eyebrow{font-family:var(--ar-sans,system-ui);letter-spacing:0;font-size:12.5px}
.vg-title{
  margin:0;font-family:var(--serif,Georgia,serif);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.15;letter-spacing:-.015em;
}
html[dir="rtl"] .vg-title{font-family:var(--ar-serif,serif);font-weight:400;letter-spacing:0;line-height:1.45}
.vg-lead{margin:12px 0 0;color:var(--ink-70,rgba(245,242,233,.7));font-size:15px;line-height:1.7}

/* ---------- Form ---------- */
.vg-form{margin-top:26px;display:grid;gap:14px}
/* The hidden attribute must beat the display:grid above. */
.vg-form[hidden],.vg-lead[hidden],.vg-note[hidden]{display:none}
.vg-field{display:grid;gap:8px}
.vg-label{font:600 12px/1 var(--sans,system-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70,rgba(245,242,233,.7))}
html[dir="rtl"] .vg-label{font-family:var(--ar-sans,system-ui);letter-spacing:0;font-size:13px;text-transform:none}
.vg-input{
  width:100%;min-height:54px;padding:0 16px;
  background:rgba(2,3,4,.55);border:1px solid var(--line,rgba(245,242,233,.14));
  color:var(--ink,#f5f2e9);font:400 16px/1.5 var(--sans,system-ui);
  transition:border-color .2s ease,background .2s ease;
}
html[dir="rtl"] .vg-input{font-family:var(--ar-sans,system-ui)}
.vg-input::placeholder{color:rgba(245,242,233,.34)}
.vg-input:focus{outline:none;border-color:var(--gold,#d7b46a);background:rgba(2,3,4,.75)}
.vg-input[aria-invalid="true"]{border-color:#e0705f}

/* Honeypot: clip-hidden rather than display:none (which some bots skip) and
   rather than a left offset, which becomes scrollable overflow in RTL. */
.vg-hp{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.vg-consent{display:flex;gap:12px;align-items:flex-start;margin-top:2px}
.vg-consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--gold,#d7b46a)}
.vg-consent span{font-size:13.5px;line-height:1.65;color:var(--ink-70,rgba(245,242,233,.7))}
.vg-consent a{color:var(--gold-soft,#ead9b6);text-decoration:underline;text-underline-offset:3px}

.vg-submit{
  min-height:54px;margin-top:6px;padding:0 26px;border:0;cursor:pointer;
  background:var(--ink,#f5f2e9);color:#0a0b0c;
  font:600 14px/1 var(--sans,system-ui);letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s ease,opacity .2s ease;
}
html[dir="rtl"] .vg-submit{font-family:var(--ar-sans,system-ui);font-size:15px}
.vg-submit:hover:not(:disabled){background:var(--gold-soft,#ead9b6)}
.vg-submit:disabled{opacity:.55;cursor:progress}
.vg-spinner{
  width:15px;height:15px;border:2px solid rgba(10,11,12,.25);border-top-color:#0a0b0c;
  border-radius:50%;animation:vg-spin .7s linear infinite;
}
@keyframes vg-spin{to{transform:rotate(360deg)}}

.vg-error{
  margin:0;min-height:0;color:#f0a196;font-size:13.5px;line-height:1.6;
}
.vg-error:empty{display:none}
.vg-error--field{margin-top:-4px}

.vg-note{margin:16px 0 0;color:var(--ink-55,rgba(245,242,233,.55));font-size:12.5px;line-height:1.65}

/* ---------- Success + player ---------- */
.vg-success{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;
  padding:14px 16px;border:1px solid rgba(215,180,106,.4);background:rgba(215,180,106,.08)}
.vg-success__mark{flex:none;width:20px;height:20px;fill:var(--gold,#d7b46a)}
.vg-success p{margin:0;font-size:14.5px;line-height:1.65;color:var(--gold-soft,#ead9b6)}

.vg-player{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line,rgba(245,242,233,.14))}
.vg-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vg-pending{
  padding:26px;border:1px dashed var(--line,rgba(245,242,233,.14));
  color:var(--ink-70,rgba(245,242,233,.7));font-size:14.5px;line-height:1.7;text-align:center;
}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  .vg-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border:0}
  .vg-dialog__inner{max-height:100dvh;padding:64px 20px 32px}
  .vg-title{font-size:1.5rem}
  .vg-input{font-size:16px} /* keeps iOS Safari from zooming on focus */
}

/* ---------- Mount points ---------- */
.vg-mount{margin-top:auto}          /* pushes the CTA to the foot of a flex card */
.vg-mount--wide{margin-top:22px;max-width:340px}
html[dir="rtl"] .vg-mount--wide{margin-inline-start:0}

/* ---------- Multi-field layout ---------- */
.vg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vg-grid .vg-field:nth-child(4){grid-column:1/-1}
@media (max-width:560px){.vg-grid{grid-template-columns:1fr}.vg-grid .vg-field{grid-column:auto}}
html[dir="rtl"] .vg-input[type="tel"]{text-align:right}