:root {
  --yellow: #ffc900;
  --black: #090a0b;
  --charcoal: #111315;
  --white: #ffffff;
  --grey: #f5f5f3;
  --text-grey: #55595d;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--black);
  background: var(--white);
  font-family: "Inter", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}


/* HEADER */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.nav-wrap {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--white);
}

.brand-mark {
  width: 46px;
  height: 50px;
}

.brand-divider {
  width: 1px;
  height: 43px;
  background: var(--yellow);
}

.brand-name {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.brand-name strong {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.7px;
}

.brand-name span {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.nav-links a:not(.nav-cta) {
  transition: color .2s;
}

.nav-links a:not(.nav-cta):hover {
  color: var(--yellow);
}

.nav-cta {
  padding: 13px 22px;
  border-radius: 8px;
  color: var(--black);
  background: var(--yellow);
  font-weight: 800;
  transition: background .2s, transform .2s;
}

.nav-cta:hover {
  background: #ffda35;
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  color: white;
  background: transparent;
  border: 0;
  font-size: 28px;
  cursor: pointer;
}


/* HERO */

.hero {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: white;

  background:
    linear-gradient(
      90deg,
      rgba(5,6,7,.97) 0%,
      rgba(5,6,7,.91) 47%,
      rgba(5,6,7,.48) 100%
    ),
    url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=2000&q=85")
    center 55% / cover no-repeat,
    #111315;
}

.hero-inner {
  padding-top: 58px;
  padding-bottom: 58px;
}

.hero-content {
  max-width: 800px;
}

.eyebrow {
  display: inline-block;
  padding: 9px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--yellow);
  border-radius: 6px;
  color: var(--yellow);
  background: rgba(255,201,0,.08);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.hero h1 {
  max-width: 800px;
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(35px, 4.2vw, 53px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1.8px;
}

.hero h1 span {
  color: var(--yellow);
}

.hero-content > p {
  max-width: 650px;
  color: #d0d1d2;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.hero-line {
  width: 90px;
  height: 5px;
  border-radius: 10px;
  background: var(--yellow);
}


/* MAIN GUIDE SECTION */

.guide-section {
  padding: 70px 0 85px;
  background: var(--grey);
}

.guide-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}

.guide-information {
  padding-right: 40px;
  border-right: 1px solid #dedede;
}

.benefit {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 27px;
}

.benefit-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 22px;
  font-weight: 800;
}

.benefit h2 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.benefit p {
  margin: 0;
  color: #45484a;
  font-size: 15px;
  line-height: 1.6;
}

.guide-note {
  margin: 34px 0 28px;
  padding: 3px 0 3px 18px;
  border-left: 4px solid var(--yellow);
  color: #333638;
  font-size: 15px;
  line-height: 1.7;
}

.download-prompt {
  display: flex;
  align-items: center;
  gap: 20px;
}

.download-prompt h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.download-arrow {
  color: var(--yellow-deep, #e6b300);
  font-size: 48px;
  font-weight: 800;
}


/* GUIDE BOOK MOCKUP */

.download-column {
  min-width: 0;
}

.guide-mockup {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 25px;
  perspective: 1000px;
}

.book {
  width: 210px;
  height: 285px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border: 1px solid #dedede;
  box-shadow: 0 15px 25px rgba(0,0,0,.20);
  position: relative;
}

.book-one {
  z-index: 1;
  transform: rotate(-10deg) translateX(20px);
}

.book-two {
  z-index: 2;
  transform: rotate(-5deg) translateX(-10px) translateY(15px);
}

.book-top {
  flex: 1;
  padding: 25px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--black);
}

.book-top span {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.book-top strong {
  color: #e45117;
  font-family: "Poppins", sans-serif;
  font-size: 23px;
  line-height: 1.1;
}

.book-top small {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.4;
}

.book-art {
  height: 105px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #e9571c;
  color: white;
}

.stairs {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.book-person {
  display: none;
}

.book-brand {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 3px;
}


/* DOWNLOAD FORM */

.form-area {
  max-width: 510px;
  margin: 0 auto;
}

.form-area h2 {
  margin: 0 0 7px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.form-intro {
  margin: 0 auto 22px;
  max-width: 390px;
  color: var(--text-grey);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #c9c9c9;
  border-radius: 9px;
  background: white;
}

.email-icon {
  color: #777;
  font-size: 20px;
}

.input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--black);
  background: transparent;
  font-size: 14px;
}

.input-wrap input::placeholder {
  color: #999;
}

.download-button {
  width: 100%;
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--yellow);
  color: var(--black);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.download-button:hover {
  background: #ffda35;
  transform: translateY(-2px);
}

.download-button span {
  font-size: 24px;
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 17px;
  color: #55595d;
  text-align: center;
}

.privacy-note span {
  font-size: 21px;
}

.privacy-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.form-message {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}


/* FOOTER */

.site-footer {
  padding: 30px 0;
  background: var(--black);
  color: #c7c8c9;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-inner p {
  margin: 0;
  font-size: 12px;
}


/* RESPONSIVE */

@media (max-width: 850px) {
  .guide-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .guide-information {
    padding-right: 0;
    border-right: 0;
  }

  .download-column {
    max-width: 570px;
    width: 100%;
    margin: 0 auto;
  }

  .guide-mockup {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .container {
    width: calc(100% - 36px);
  }

  .nav-wrap {
    min-height: 72px;
  }

  .brand-mark {
    width: 38px;
    height: 43px;
  }

  .brand-divider {
    height: 36px;
  }

  .brand-name strong {
    font-size: 18px;
  }

  .brand-name span {
    font-size: 11px;
    letter-spacing: 4px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 20px 24px 25px;
    background: var(--black);
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-cta {
    text-align: center;
  }

  .hero {
    min-height: auto;
    background-position: 60% center;
  }

  .hero-inner {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .hero h1 {
    font-size: clamp(32px, 9vw, 43px);
    letter-spacing: -1.3px;
  }

  .hero-content > p {
    font-size: 15px;
  }

  .guide-section {
    padding: 50px 0 60px;
  }

  .benefit {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }

  .benefit-icon {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  .benefit h2 {
    font-size: 17px;
  }

  .benefit p {
    font-size: 14px;
  }

  .guide-note {
    font-size: 14px;
  }

  .download-prompt h2 {
    font-size: 18px;
  }

  .download-arrow {
    font-size: 38px;
  }

  .guide-mockup {
    min-height: 250px;
    transform: scale(.88);
    margin: -10px 0 5px;
  }

  .book {
    width: 175px;
    height: 245px;
  }

  .book-top strong {
    font-size: 20px;
  }

  .form-area h2 {
    font-size: 23px;
  }

  .download-button {
    font-size: 16px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

.download-column {
  min-width: 0;
}

.form-area {
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
  text-align: center;
}

/* Recreate the heading and supporting copy from the original form design */
.form-area::before {
  content: "Get Your Free Copy";
  display: block;
  margin: 0 auto 7px;
  color: var(--black, #090a0b);
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.form-area::after {
  content: "Get instant access to the case study when you enter your email above. We respect your privacy. No spam.";
  display: block;
  max-width: 430px;
  margin: 13px auto 0;
  color: #55595d;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* Strip Brevo's default white panel, fixed widths and excess spacing */
.form-area .sib-form,
.form-area .sib-form-container,
.form-area #sib-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.form-area #sib-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Remove the empty Brevo label row and its default block padding */
.form-area #sib-form > div {
  padding: 0 !important;
  margin: 0 !important;
}

.form-area .sib-input,
.form-area .form__entry,
.form-area .form__label-row,
.form-area .entry__field {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.form-area .entry__label,
.form-area .entry__specification {
  display: none !important;
}

/* Email field */
.form-area #EMAIL,
.form-area .entry__field input,
.form-area input[type="email"],
.form-area input[type="text"]:not(.input--hidden) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid #c9c9c9 !important;
  border-radius: 9px !important;
  outline: none !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #090a0b !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

.form-area #EMAIL::placeholder,
.form-area .entry__field input::placeholder {
  color: #999 !important;
  opacity: 1 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
}

.form-area #EMAIL:focus {
  border-color: #b89a00 !important;
  box-shadow: 0 0 0 3px rgba(255, 201, 0, .15) !important;
}

/* Brevo submit button — match the original yellow CTA */
.form-area .sib-form-block {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}

.form-area .sib-form-block__button {
  width: 100% !important;
  min-height: 57px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 10px 0 0 !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--yellow, #ffc900) !important;
  color: var(--black, #090a0b) !important;
  box-shadow: none !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}

.form-area .sib-form-block__button:hover {
  background: #ffda35 !important;
  color: #090a0b !important;
  transform: translateY(-2px);
}

.form-area .sib-form-block__button .main-text-btn {
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
  text-align: center !important;
}

.form-area .sib-form-block__button .main-text-btn::after {
  content: "  →";
  font-size: 22px;
  line-height: 1;
  vertical-align: -1px;
}

.form-area .sib-form-block__button .sub-text-btn,
.form-area .sib-form-block__button .progress-indicator__icon {
  display: none !important;
}

/* Remove the extra paragraph from Brevo; the privacy line is recreated above */
.form-area .lower-p {
  display: none !important;
}

/* Keep Brevo validation and success messages visible and tidy */
.form-area .sib-form-message-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.form-area .entry__error {
  display: block !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: #b42318 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Brevo honeypot remains functional but out of sight */
.form-area .input--hidden {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 850px) {
  .form-area {
    max-width: 570px;
  }
}

@media (max-width: 600px) {
  .form-area::before {
    font-size: 23px;
  }

  .form-area::after {
    max-width: 100%;
    font-size: 11px;
  }

  .form-area .sib-form-block__button {
    font-size: 15px !important;
  }
}


/* ==========================================================
   MOBILE HORIZONTAL OVERFLOW FIX — VISIONARY GAZETTE GUIDE
   Append this to the VERY END of subscribe.css.
   ========================================================== */

/* Prevent any child from making the document wider than the phone */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

/* Grid children must be allowed to shrink below their content width */
.container,
.guide-layout,
.guide-information,
.download-column,
.form-area {
  min-width: 0;
  max-width: 100%;
}

/* Let the download prompt wrap instead of pushing the page wider */
.download-prompt {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.download-prompt h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.download-arrow {
  flex: 0 0 auto;
}

/* Keep the book mockup inside the viewport on narrow devices */
.guide-mockup {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.guide-mockup img,
.guide-mockup .book {
  max-width: 100%;
}

/* Brevo injects its own sizing rules. Constrain every wrapper to
   the actual width of the form column on mobile. */
.form-area .sib-form,
.form-area .sib-form-container,
.form-area #sib-container,
.form-area #sib-form {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  overflow: visible;
}

.form-area #sib-form > div,
.form-area .sib-input,
.form-area .form__entry,
.form-area .form__label-row,
.form-area .entry__field,
.form-area .sib-form-block {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}