/* Hustle popups and top bar in the Court Dark look (they replaced OptinMonster, 2026-10-18). The campaigns use Hustle's
   vanilla theme (scripts/wp/hustle_setup.php), which keeps its layout and leaves colours and type to the site.
   Hustle's markup sits at the end of <body>, so these rules hang off .cd. */

.cd .hustle-ui { font-family: var(--cd-body); color: var(--cd-text); }
.cd .hustle-ui *, .cd .hustle-ui *::before, .cd .hustle-ui *::after { box-sizing: border-box; }

/* The card */
.cd .hustle-popup .hustle-popup-mask { background: rgba(14, 15, 17, 0.82) !important; }
.cd .hustle-popup .hustle-layout,
.cd .hustle-slidein .hustle-layout {
  background: var(--cd-raised) !important; border: var(--cd-line) solid var(--cd-border) !important; border-radius: var(--cd-radius) !important;
  color: var(--cd-text) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cd .hustle-popup .hustle-popup-content { max-width: 560px !important; }
.cd .hustle-popup .hustle-layout { padding: 32px !important; }
.cd .hustle-popup .hustle-layout-header { padding: 0 !important; margin: 0 0 16px !important; border: 0 !important; }
.cd .hustle-popup .hustle-layout-content,
.cd .hustle-popup .hustle-layout-footer,
.cd .hustle-popup .hustle-layout-form { padding: 0 !important; background: none !important; border: 0 !important; }

/* Type */
.cd .hustle-ui .hustle-title {
  font-family: var(--cd-display) !important; font-weight: 400 !important; font-size: 40px !important; line-height: 1 !important;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--cd-text) !important; margin: 0 0 10px !important;
}
.cd .hustle-ui .hustle-subtitle {
  font-family: var(--cd-body) !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.35 !important;
  color: var(--cd-accent) !important; margin: 0 !important;
}
.cd .hustle-ui .hustle-group-content, .cd .hustle-ui .hustle-group-content p,
.cd .hustle-ui .hustle-success-content, .cd .hustle-ui .hustle-success-content p {
  font-family: var(--cd-body) !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--cd-text) !important; margin: 0 0 16px !important;
}
.cd .hustle-ui .hustle-group-content p:last-child, .cd .hustle-ui .hustle-success-content p:last-child { margin-bottom: 0 !important; }

/* Screenshot in the blog popup: Hustle puts it beside the text; stack it on top */
.cd .hustle-popup .hustle-info .hustle-layout-content { display: block !important; }
.cd .hustle-popup .hustle-info .hustle-image { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important;
  flex: none !important; position: static !important; }
.cd .hustle-popup .hustle-info .hustle-content, .cd .hustle-popup .hustle-info .hustle-content-wrap { padding: 0 !important; }
.cd .hustle-popup .hustle-image { margin: 0 0 16px !important; background: none !important; }
.cd .hustle-popup .hustle-image img { display: block !important; position: static !important; transform: none !important; width: 100% !important;
  height: auto !important; max-height: none !important; object-fit: contain; border-radius: var(--cd-radius-s); border: var(--cd-line) solid var(--cd-border); }

/* Email field and buttons, as .cd-input and .cd-btn--primary */
.cd .hustle-ui .hustle-form { margin-top: 20px !important; }
.cd .hustle-ui .hustle-form-fields { display: flex !important; flex-wrap: wrap; gap: 10px; }
.cd .hustle-ui .hustle-field { flex: 1 1 220px; position: relative; margin: 0 !important; }
.cd .hustle-ui .hustle-input {
  width: 100% !important; min-height: 50px !important; background: var(--cd-ground) !important; border: var(--cd-line) solid var(--cd-border-strong) !important;
  border-radius: 999px !important; padding: 0 20px !important; color: var(--cd-text) !important; font: 16px/1.2 var(--cd-body) !important; box-shadow: none !important;
}
.cd .hustle-ui .hustle-input:focus { border-color: var(--cd-accent) !important; outline: none; }
.cd .hustle-ui .hustle-input-label { position: absolute; left: 20px; top: 0; bottom: 0; display: flex !important; align-items: center; gap: 8px;
  color: var(--cd-text) !important; opacity: 0.6; font: 16px/1.2 var(--cd-body) !important; pointer-events: none; }
.cd .hustle-ui .hustle-input-label span { font: inherit !important; }
.cd .hustle-ui .hustle-field-filled .hustle-input-label, .cd .hustle-ui .hustle-input:focus + .hustle-input-label { display: none !important; }
.cd .hustle-ui .hustle-input-label [class^="hustle-icon"], .cd .hustle-ui .hustle-input-label [class*=" hustle-icon"] { display: none !important; }
.cd .hustle-ui .hustle-button-submit, .cd .hustle-ui .hustle-button-cta {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px !important; padding: 12px 26px !important;
  background: var(--cd-accent) !important; color: var(--cd-on-accent) !important; border: 0 !important; border-radius: 999px !important;
  font: 700 16px/1.2 var(--cd-body) !important; text-decoration: none !important; cursor: pointer; flex: 0 0 auto; box-shadow: none !important;
}
.cd .hustle-ui .hustle-button-submit:hover, .cd .hustle-ui .hustle-button-cta:hover { background: var(--cd-accent-hover) !important; color: var(--cd-on-accent) !important; }
.cd .hustle-ui .hustle-cta-container { margin-top: 8px; }
.cd .hustle-popup .hustle-button-cta { width: 100%; }
.cd .hustle-ui .hustle-error-message { color: #FF8A8A !important; font-size: 14px; margin-top: 10px; background: none !important; border: 0 !important; padding: 0 !important; }

/* Close cross: a dark circle that shows on the card and over the mask */
.cd .hustle-ui .hustle-button-close {
  width: 36px !important; height: 36px !important; border-radius: 999px !important; background: var(--cd-chip) !important;
  border: var(--cd-line) solid var(--cd-border) !important; color: var(--cd-text) !important; display: flex !important; align-items: center; justify-content: center;
  position: absolute !important; top: 12px !important; right: 12px !important; z-index: 2;
}
.cd .hustle-ui .hustle-button-close:hover { border-color: var(--cd-accent) !important; color: var(--cd-accent) !important; }
.cd .hustle-ui .hustle-icon-close { color: inherit !important; }

/* Top bar: design option B, a lime band across the top (https://claude.ai/artifact/TqiVueXhhhKESw51HXZDbx).
   Title in Anton, line of copy, pale field, dark button; one row on wide screens, stacked on phones. */
.cd .hustle-slidein .hustle-slidein-content { max-width: none !important; width: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important;
  margin: 0 !important; transform: none !important; }
.cd .hustle-slidein .hustle-optin { max-width: none !important; width: 100% !important; }
.cd .hustle-slidein .hustle-layout {
  background: var(--cd-accent) !important; color: var(--cd-on-accent) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); padding: 8px 64px 8px 24px !important;
}
.cd .hustle-slidein .hustle-main-wrapper { display: block !important; position: static !important; padding: 0 !important; background: none !important; }
.cd .hustle-slidein .hustle-layout-body { display: flex !important; align-items: center; justify-content: center; gap: 12px 24px; flex-wrap: wrap;
  padding: 0 !important; background: none !important; }
.cd .hustle-slidein .hustle-content, .cd .hustle-slidein .hustle-content-wrap { display: flex !important; align-items: baseline; gap: 6px 16px;
  flex-wrap: wrap; padding: 0 !important; margin: 0 !important; background: none !important; }
.cd .hustle-slidein .hustle-group-title, .cd .hustle-slidein .hustle-group-content { margin: 0 !important; padding: 0 !important; }
.cd .hustle-slidein .hustle-layout-header { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.cd .hustle-slidein .hustle-title { font-size: 22px !important; margin: 0 !important; color: var(--cd-on-accent) !important; white-space: nowrap; }
.cd .hustle-slidein .hustle-subtitle { display: none !important; }
.cd .hustle-slidein .hustle-layout-content { flex: 0 1 auto; display: block !important; padding: 0 !important; background: none !important; border: 0 !important; }
.cd .hustle-slidein .hustle-group-content p { font-weight: 500; font-size: 15px !important; margin: 0 !important; color: var(--cd-on-accent) !important; }
.cd .hustle-slidein .hustle-layout-form { flex: 0 1 420px; padding: 0 !important; background: none !important; border: 0 !important; }
.cd .hustle-slidein .hustle-form { margin: 0 !important; }
.cd .hustle-slidein .hustle-form-fields { flex-wrap: nowrap; }
.cd .hustle-slidein .hustle-field { flex: 1 1 auto; min-width: 0; }
.cd .hustle-slidein .hustle-input { min-height: 38px !important; background: #F7FFD6 !important; border-color: var(--cd-on-accent) !important; color: var(--cd-on-accent) !important; }
.cd .hustle-slidein .hustle-input:focus { border-color: var(--cd-on-accent) !important; box-shadow: 0 0 0 2px var(--cd-on-accent) !important; }
.cd .hustle-slidein .hustle-input-label { color: var(--cd-on-accent) !important; }
.cd .hustle-slidein .hustle-button-submit { min-height: 38px !important; padding: 8px 20px !important; background: var(--cd-on-accent) !important; color: var(--cd-accent) !important; }
.cd .hustle-slidein .hustle-button-submit:hover { background: #23262B !important; color: var(--cd-accent-hover) !important; }
.cd .hustle-slidein .hustle-button-close { top: 50% !important; transform: translateY(-50%); right: 16px !important; background: transparent !important;
  border: 0 !important; color: var(--cd-on-accent) !important; }
.cd .hustle-slidein .hustle-button-close:hover { color: #23262B !important; }
.cd .hustle-slidein .hustle-success { background: var(--cd-accent) !important; color: var(--cd-on-accent) !important; border-radius: 0; padding: 14px 24px !important; }
.cd .hustle-slidein .hustle-success-content, .cd .hustle-slidein .hustle-success-content p { color: var(--cd-on-accent) !important; margin: 0 !important; }
.cd .hustle-slidein .hustle-icon-check { color: var(--cd-on-accent) !important; }

/* Drop Dispatch popup (the sign-up type of popup): design option 2, big type. Kicker above an Anton headline,
   centred, a lime rule along the top, the field and button on one row. The blog popup is the information type. */
.cd .hustle-popup .hustle-optin .hustle-layout { border-top: 6px solid var(--cd-accent) !important; padding: 44px 48px 40px !important; text-align: center; }
.cd .hustle-popup .hustle-optin .hustle-popup-content, .cd .hustle-popup:has(.hustle-optin) .hustle-popup-content { max-width: 600px !important; }
.cd .hustle-popup .hustle-optin .hustle-content, .cd .hustle-popup .hustle-optin .hustle-content-wrap { display: block !important; padding: 0 !important; }
.cd .hustle-popup .hustle-optin .hustle-group-title { display: flex !important; flex-direction: column-reverse; align-items: center; gap: 14px; margin: 0 0 16px !important; }
.cd .hustle-popup .hustle-optin .hustle-subtitle { font-size: 12px !important; line-height: 1.2 !important; letter-spacing: 2px; text-transform: uppercase; }
.cd .hustle-popup .hustle-optin .hustle-title { font-size: 76px !important; line-height: 0.95 !important; margin: 0 auto !important; max-width: 4.4em; text-align: center; text-transform: uppercase !important; }
.cd .hustle-popup .hustle-optin .hustle-group-content p { max-width: 440px; margin: 0 auto !important; }
.cd .hustle-popup .hustle-optin .hustle-form { margin-top: 22px !important; }
.cd .hustle-popup .hustle-optin .hustle-form-fields { flex-wrap: nowrap; }
.cd .hustle-popup .hustle-optin .hustle-input { min-height: 52px !important; }
.cd .hustle-popup .hustle-optin .hustle-button-submit { min-height: 52px !important; }

/* Success state */
.cd .hustle-ui .hustle-success { background: var(--cd-raised) !important; color: var(--cd-text) !important; border-radius: var(--cd-radius); padding: 32px !important; }
.cd .hustle-ui .hustle-icon-check { color: var(--cd-accent) !important; }

@media (max-width: 767px) {
  .cd .hustle-popup .hustle-layout { padding: 24px 20px !important; }
  .cd .hustle-ui .hustle-title { font-size: 32px !important; }
  .cd .hustle-popup .hustle-optin .hustle-layout { padding: 36px 22px 26px !important; }
  .cd .hustle-popup .hustle-optin .hustle-title { font-size: 58px !important; }
  .cd .hustle-popup .hustle-optin .hustle-form-fields { flex-wrap: wrap !important; }
  .cd .hustle-popup .hustle-optin .hustle-field, .cd .hustle-popup .hustle-optin .hustle-button-submit { flex: 1 1 100% !important; width: 100%; }
  .cd .hustle-slidein .hustle-layout { padding: 10px 52px 12px 16px !important; }
  .cd .hustle-slidein .hustle-main-wrapper, .cd .hustle-slidein .hustle-layout-body { justify-content: flex-start; gap: 8px 12px; }
  .cd .hustle-slidein .hustle-title { font-size: 19px !important; }
  .cd .hustle-slidein .hustle-layout-form { flex: 1 1 100%; }
  .cd .hustle-slidein .hustle-form-fields { flex-wrap: nowrap; }
  .cd .hustle-slidein .hustle-input { min-height: 44px !important; }
  .cd .hustle-slidein .hustle-button-submit { width: auto; min-height: 44px !important; }
  .cd .hustle-slidein .hustle-button-close { top: 22px !important; width: 44px !important; height: 44px !important; right: 6px !important; }
  .cd .hustle-ui .hustle-button-submit { width: 100%; }
}