/* page.css – Post-it Method leadgen page */

/* Global page base */
html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffeba2;
  color: #000000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px; /* baseline paragraph size */
}

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

.pm-main {
  padding-bottom: 4rem;
}

/* Layout helpers */
.pm-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.pm-section {
  padding: 3rem 0;
  line-height: 1.6;
}

.pm-section p {
  margin: 0;
}

/* === BODY TEXT FONT SIZE (paragraphs + bullets + numbered lists) === */
.pm-section:not(.pm-hero) p,
.pm-section:not(.pm-hero) li,
.pm-hero-subtext p {
  font-size: 28px; /* same size as your main content text */
}

/* HERO */
.pm-hero {
  padding-top: 3rem;
}

.pm-hero-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.pm-hero-title {
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.pm-hero-subtitle {
  font-size: 2rem;
  margin: 0 0 1rem;
}

.pm-desktop-break {
  display: none;
}

/* Responsive "Post-it Method" block */
.pm-hero-method {
  margin-bottom: 1.5rem;
}

.pm-hero-method-img {
  margin: 0 auto;
  max-width: 350px;
}

.pm-hero-method-text {
  font-size: 1.4rem;
}

/* default: mobile shows text, hides image */
.pm-hero-method-img {
  display: none;
}
.pm-hero-method-text {
  display: block;
}

/* tablet+ shows image, hides text */
@media (min-width: 768px) {
  .pm-hero-method-img {
    display: block;
  }
  .pm-hero-method-text {
    display: none;
  }
}

.pm-hero-media {
  margin-bottom: 1.5rem;
  text-align: center;
}

.pm-hero-image-text {
  display: block;
  font-size: 5rem;   /* tweak size as needed */
  font-weight: 700;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 4rem;
}

.pm-hero-image-text-mobile {
    display: none;
}

/* Split section (hero form + video) */
.pm-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.pm-split-col {
  width: 100%;
}

.pm-video-wrapper {
  width: 100%;
  max-width: 560px; /* video cap on desktop */
}

.pm-video-wrapper iframe,
.pm-video-wrapper .wistia_embed {
  width: 100%;
  height: auto;
}

/* Placeholder box for video */
.pm-video-placeholder {
  width: 100%;
  padding-top: 56.25%;
  border: 2px dashed #000000;
  position: relative;
  font-size: 0.9rem;
}

.pm-video-placeholder::before {
  content: "Video placeholder";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

/* Hero subtext */
.pm-hero-subtext p {
  margin: 0 0 0.6rem;
}

/* Forms */
.pm-form-card {
  border: 5px solid #ff0000; /* bright red border */
  padding: 1.5rem;
  border-radius: 0; /* zero radius */
  background-color: rgba(255, 235, 162, 0.9);
}

/* Non-hero forms: half width, centered */
.pm-form-repeat .pm-form-card {
  max-width: 740px;
  margin: 0 auto;
}

.pm-form-intro {
  margin: 0 0 1rem;
  font-weight: 700;
}

.pm-form {
  display: flex;
  flex-direction: column;
}

.pm-form-field {
  display: flex;
  flex-direction: column;
}

/* Inputs: no labels, just placeholders */
.pm-form-field input[type="text"],
.pm-form-field input[type="email"] {
  border-radius: 0.35rem;
  border: 1px solid #000000;
  background-color: #ffeba2;
  color: #000000;
}

/* Placeholder color */
.pm-form-field input::placeholder {
  color: #777777;
}

/* Buttons – bright red with white text, radius matches inputs */
.pm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem; /* match input radius */
  border: 2px solid #ff0000;
  background-color: #ff0000;
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #ffffff;
}

/* === UNIFIED HEIGHT FOR ALL FORM INPUTS + CTA BUTTONS === */
.pm-form-field input[type="text"],
.pm-form-field input[type="email"],
.pm-button {
  box-sizing: border-box;
  height: 48px; /* adjust this number to make everything taller/shorter */
}

.pm-button--primary {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}

.pm-button:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

.pm-form-subtext {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

/* ============================
   GLOBAL FORM CONTROL – EDIT HERE
   (text sizes, padding, spacing)
   ============================ */

 /* Text sizes for everything inside forms */
.pm-form,
.pm-form-field input[type="text"],
.pm-form-field input[type="email"],
.pm-form-intro,
.pm-form-subtext {
  font-size: 16px;        /* <- master form font size */
}

/* Smaller size for the price/countdown line under the button */
.pm-form-subtext {
  font-size: 14px;        /* <- subtext font size */
}

/* Vertical spacing inside the form stack */
.pm-form {
  gap: 14px; /* <- space between fields/buttons */
  margin-top: 18px;
}

/* Spacing within each field group (label + input, or just input) */
.pm-form-field {
  gap: 6px;               /* <- space inside each field group */
}

/* Input padding */
.pm-form-field input[type="text"],
.pm-form-field input[type="email"] {
  padding: 20px 12px;     /* <- vertical, horizontal */
}

/* Button padding */
.pm-button {
  padding: 36px 26px;     /* <- vertical, horizontal */
}

/* Spacing around intro and subtext paragraphs */
.pm-form-intro {
  margin-bottom: 18px;    /* <- space under "Enter your deets..." */
}

.pm-form-subtext {
  margin-top: 12px;       /* <- space above "$297 marked down..." line */
}

/* ============================
   HERO FORM ONLY – FONT CONTROL
   ============================ */

/* This controls ALL text inside the hero form block */
.pm-form-card--hero .pm-form,
.pm-form-card--hero .pm-form-field input[type="text"],
.pm-form-card--hero .pm-form-field input[type="email"] {
  font-size: 18px;   /* <- change this to whatever you want for HERO ONLY */
}

.pm-form-card--hero .pm-form-intro {
  font-size: 28px;  
}

.pm-form-card--hero .pm-button {
    font-size: 26px;
}

.pm-form-card--hero .pm-form-subtext {
    font-size: 28px;
}

/* If you also want a smaller subtext in the hero only, you can add: */
/*
.pm-form-card--hero .pm-form-subtext {
  font-size: 15px;
}
*/


/* Old/new price formatting */
.pm-price-old {
  text-decoration: line-through;
  color: #ff0000; /* bright red */
  font-weight: 700;
}
.pm-price-new {
  color: #008000; /* green */
  font-weight: 700;
}

/* Countdown */
.pm-countdown {
  font-weight: 700;
  margin-left: 0.35rem;
}

/* Bullet lists */
.pm-bullet-list {
  padding-left: 3rem;
  margin: 0;
}

.pm-bullet-list li {
  margin-bottom: 0;
}

/* Numbered list */
.pm-numbered-list {
  padding-left: 3rem;
  margin: 0;
}

/* Copy blocks */
.pm-copy-block p {
  margin: 0; /* unified spacing rule will handle vertical space */
  padding: 0;
  border: none;
  background: none;
}

/* === UNIFIED BODY TEXT SPACING & LINE HEIGHT (non-form, non-heading) === */
/* Applies to all paragraphs and list items inside sections, 
   but excludes form intro/subtext paragraphs */
.pm-section p:not(.pm-form-intro):not(.pm-form-subtext),
.pm-section li {
  margin-bottom: 2.2rem; /* adjust this number to taste */
  line-height: 1.6;      /* ensures li & p behave identically */
}

/* Repeated form wrapper */
.pm-form-repeat {
  margin-top: 2rem;
}


/* Intro full-width section */
.pm-intro-full {
  max-width: 100%;
}

/* ============================
   HEADSHOT CIRCLE CROP
   ============================ */

.pm-intro-image-wrapper {
  width: 250px;        /* <- adjust circle size */
  height: 250px;       /* <- must match width for perfect circle */
  margin: 0 auto 2rem; /* centers image and adds bottom spacing */
  border-radius: 50%;  /* makes the wrapper circular */
  border: 3px solid #ff0000;
  overflow: hidden;    /* crops the image into the circle */
}

.pm-intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills circle while preserving shape */
  display: block;
}

/* GIFs – max 350–450px wide, left-aligned */
.pm-gif-img {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
}

.pm-gif-block {
  margin: 1.5rem 0;
}

/* === SECTION HEADING FONT SIZE (non-hero headings) === */
.pm-section-title {
  font-size: 2.6rem; /* single knob for all section headings */
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Accent color for "red pill" text in testimonials heading */
.pm-text-red-pill {
  color: #ff0000;   /* bright red; tweak if needed */
  font-weight: inherit;
}

/* WHO section vertical layout */
.pm-who-vertical {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pm-who-card {
  padding: 1rem 0;
}

.pm-who-img {
  display: block;        /* make image a block so margin auto works */
  margin: 0 auto 1rem;   /* centers it horizontally */
  max-width: 320px;
  width: 100%;
  height: auto;
}

.pm-who-card,
.pm-copy-block {
  margin-bottom: 2.5rem;
}

/* WHO section bullet block – width + internal padding */
.pm-who-card .pm-bullet-list {
  max-width: 720px;      /* <- make this smaller for a tighter column (e.g. 640px, 560px) */
  margin: 0 auto 0;      /* <- center the whole bullet block inside the WHO card/section */
  padding: 1rem 1.5rem;  /* <- top/bottom, left/right padding inside the list block */
}


/* Product / Post-it images */
.pm-product-img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}

.pm-postit-img {
    display: flex;
    justify-content: center;
}

.pm-postit-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Product block – full width */
.pm-product-block {
  max-width: 100%;
  margin-bottom: 2rem;
}

.pm-product-image {
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.pm-product-copy p {
  margin: 0 0 0.8rem;
}

/* Fascinations grid */
.pm-fascinations-grid {
  display: flex;
  flex-direction: column;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Left column ~ half width of main content */
.pm-fascination-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 50/50 */
  gap: 1rem;
  align-items: flex-start;
}

.pm-fascination-text p {
  margin: 0;
}

/* Heading line (e.g. "In video #2…") */
.pm-fascination-heading {
  font-weight: 700;
  
  color: #ff0000;         /* <— adjust heading color */
  margin: 0 0 0.5rem;
  line-height: 1.3;
}



/* Product closing text – full width */
.pm-product-closing p {
  margin: 0 0 0.8rem;
}

/* Testimonials */
.pm-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.pm-testimonial-card {
  padding: 1rem;
}

.pm-testimonial-text {
  margin: 0;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 960px) {
  .pm-split {
    grid-template-columns: 1fr;
  }

  .pm-fascination-row {
    grid-template-columns: 1fr;
  }

  .pm-testimonial-grid {
    grid-template-columns: 1fr;
  }
}
/* MOBILE: hero heading + subheading + section headings */
@media (max-width: 767px) {
  .pm-hero-title {
    font-size: 2rem;  /* <- MOBILE hero heading size */
  }

  .pm-hero-subtitle {
    font-size: 1.2rem;  /* <- MOBILE hero subtext size */
    margin-bottom: 1.5rem;
  }

  .pm-hero-image-text {
    display: none;
  }

  .pm-hero-image-text-mobile {
    display: block;
    font-size: 3.2rem;
    margin: 0px;
  }

  .pm-hero-media {
      margin-bottom: 0px;
  }

  .pm-section-title {
    font-size: 2rem;  /* keep section headings slightly smaller on mobile */
  }
  
  /* MOBILE: body text (paragraphs + bullets + numbered lists) */
  .pm-section:not(.pm-hero) p,
  .pm-section:not(.pm-hero) li,
  .pm-bullet-list li,
  .pm-numbered-list li,
  .pm-hero-subtext p {
    font-size: 22px;  /* <- MOBILE body text size */
  }
  
  .pm-postit-img img {
      max-width: 320px;
  }

  /* Input + button height on MOBILE */
  .pm-form-card .pm-button {
    height: 60px;            /* <- change this to control MOBILE field/button height */
  }

  /* Button text size on MOBILE */
  .pm-form-card .pm-button {
    font-size: 1.2rem;       /* <- change this for MOBILE button text size */
    padding: 0 1.5rem;      /* optional: horizontal padding, height controls vertical */
  }
  
  .pm-form-card--hero .pm-form-intro {
    font-size: 22px;  
  }

/*.pm-form-card--hero .pm-button {*/
/*    font-size: 26px;*/
/*  }*/

.pm-form-card--hero .pm-form-subtext {
    font-size: 22px;
  }
}

/* TABLET: hero heading + subheading */
@media (min-width: 768px) and (max-width: 1023px) {
  .pm-hero-title {
    font-size: 2.4rem;  /* <- TABLET hero heading size */
  }

  .pm-hero-subtitle {
    font-size: 1.6rem;  /* <- TABLET hero subtext size */
  }
  
  .pm-hero-image-text {
    font-size: 3.5rem;
    margin: 0px;
  }
  
  .pm-hero-media {
      margin-bottom: 0px;
  }
  
  .pm-section:not(.pm-hero) p,
  .pm-section:not(.pm-hero) li,
  .pm-bullet-list li,
  .pm-numbered-list li,
  .pm-hero-subtext p {
    font-size: 24px;  /* <- TABLET body text size */
  }
  
  .pm-fascination-image {
      max-width: 70%;
  }
  
  .pm-postit-img img {
      max-width: 600px;
  }
}


@media (min-width: 1024px) {
  .pm-desktop-break {
    display: block;
    width: 100%;
    height: 0;
  }
}

/* =======================================
   FOOTER
   ======================================= */

.pm-footer {
  background: #ffeba2;        /* matches site background */
  padding: 3rem 0;
  border-top: 4px solid #000; /* sharp, bold finish */
}

.pm-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.pm-footer-copy {
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: 600;
}

.pm-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}

.pm-footer-nav a {
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.pm-footer-nav a:hover {
  text-decoration: underline;
}

.pm-footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.pm-footer-social a {
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.pm-footer-social a:hover {
  text-decoration: underline;
}

/* Mobile improvements */
@media (max-width: 600px) {
  .pm-footer-nav {
    flex-direction: column;
    gap: 0.75rem;
  }

  .pm-footer-social {
    flex-direction: column;
    gap: 0.75rem;
  }
}