/* ===========================================================
   Ghostbuster exit-intent popup
   Values taken from the Claude Design export, artboard 1a
   (design-refs/exit-popup-design.html). Colours and fonts come
   from the tokens already defined in styles.css.
   =========================================================== */

.gb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 31, 58, 0.55);
  overflow-y: auto;
}
.gb-overlay[hidden] { display: none; }

.gb-panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: 36px 36px 32px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(11, 31, 58, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .gb-overlay { animation: gb-fade 180ms ease-out; }
  .gb-panel { animation: gb-rise 220ms ease-out; }
}
@keyframes gb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Close ---------- */
.gb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--slate);
  font-size: 18px;
  line-height: 1;
}
.gb-close:hover { color: var(--ink); background: var(--card); }
.gb-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Layout ---------- */
.gb-grid {
  display: grid;
  grid-template-columns: 204px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

/* ---------- Ghostbuster mockup ---------- */
.gb-mock {
  position: relative;
  width: 204px;
  height: 268px;
  justify-self: center;
}
.gb-mock-page {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 144px;
  height: 212px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.gb-mock-page--back  { background: var(--card); transform: translate(-50%, -50%) rotate(-9deg) translateX(-8px); }
.gb-mock-page--mid   { transform: translate(-50%, -50%) rotate(5deg) translateX(7px); }
.gb-mock-page--front { transform: translate(-50%, -50%) rotate(-1.5deg); }

.gb-mock-lines { padding: 20px 16px; display: grid; gap: 9px; }
.gb-mock-lines span { height: 3px; border-radius: 2px; background: var(--rule); display: block; }
.gb-mock-lines span:first-child { height: 5px; width: 44%; background: #A9A399; }
.gb-mock-lines span:nth-child(4) { width: 68%; }
.gb-mock-lines span:nth-child(6) { width: 50%; }

.gb-mock-cover {
  height: 100%;
  padding: 15px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.gb-mock-eyebrow {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.gb-mock-ghost { width: 26px; height: 29px; margin-top: 2px; flex: 0 0 auto; color: var(--blue); }
.gb-mock-title {
  margin-top: auto;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gb-mock-rule { width: 26px; height: 2px; background: var(--blue); flex: 0 0 auto; }
.gb-mock-sub { font-size: 8.5px; line-height: 1.4; color: var(--slate); padding-bottom: 2px; }

/* ---------- Copy ---------- */
.gb-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.gb-sub {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A463F;
}

/* ---------- Form ---------- */
.gb-form { margin-top: 20px; display: grid; gap: 14px; }
.gb-field { display: grid; gap: 6px; }
.gb-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.gb-input {
  height: 46px;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  width: 100%;
}
.gb-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.gb-input[aria-invalid="true"] { border-color: #B3261E; }

.gb-error {
  font-size: 13px;
  line-height: 1.45;
  color: #B3261E;
}
.gb-error:empty { display: none; }

.gb-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.gb-decline {
  justify-self: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--blue);
  text-decoration: underline;
  padding: 4px 2px;
}
.gb-decline:hover { color: var(--orange-dark); }
.gb-decline:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.gb-fine {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--slate);
}

/* ---------- Success ---------- */
.gb-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 18px 0 6px;
}
.gb-success .gb-ghost-lg { width: 44px; height: 48px; color: var(--blue); }
.gb-success .gb-headline { font-size: 28px; }
.gb-success .gb-sub { margin-top: 0; max-width: 42ch; }
.gb-success .gb-submit { width: auto; min-width: 260px; }

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  .gb-overlay { padding: 12px; align-items: flex-start; }
  .gb-panel { padding: 26px 20px 22px; margin-top: 12px; }
  .gb-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Scale the whole mockup so its inner type stays in proportion,
     then pull the empty space back in with negative margins. */
  .gb-mock { transform: scale(0.62); margin: -51px auto; }
  .gb-headline { font-size: 24px; }
  .gb-sub { font-size: 14px; margin-top: 8px; }
  .gb-form { margin-top: 14px; gap: 10px; }
  .gb-input { height: 44px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .gb-submit { height: 48px; }
  .gb-decline { min-height: 44px; display: flex; align-items: center; }
  .gb-success .gb-headline { font-size: 22px; }
  .gb-success .gb-submit { min-width: 0; width: 100%; }
}

@media (max-width: 380px) {
  .gb-mock { transform: scale(0.52); margin: -64px auto; }
}