/* =========================================================
   HERO TYPOGRAPHY FIX (Matches Wireframe)
========================================================= */
.product-hero h1 {
  font-size: 36px !important;       /* Matches the smaller, refined wireframe size */
  max-width: 800px;                 /* Allows "Property Has" to fit on the first line */
  margin: 0 auto 16px !important;
}

.product-hero p {
  font-size: 16px !important;       /* Reduces the bulky default subtitle size */
  max-width: 530px !important;      /* Forces the line break exactly after "revenue," */
  font-weight: 400 !important;      /* Gives it that clean, lighter wireframe feel */
  line-height: 1.5 !important;
  margin: 0 auto 40px !important;
  font-style: normal !important;    /* Prevents unwanted italics from main.css */
}

/* ================= FEATURES ================= */

.stanzaclad-features {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.feature-block {
  text-align: center;
  margin-bottom: 60px;
}

.feature-block h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #0f172a;
}

.feature-block p {
  font-size: 15px;
  color: #475569;
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.feature-block img {
  width: 100%;
  max-width: 900px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  margin: 0 auto;
}

.feature-block span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #64748b;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

  .feature-block {
    margin-bottom: 50px;
  }

  .feature-block h3 {
    font-size: 18px;
  }

  .feature-block p {
    font-size: 14px;
    padding: 0 10px;
  }

  .feature-block img {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
  }

  /* HERO */
  .product-hero h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .product-hero p {
    font-size: 14px;
  }

  /* CTA */
  .product-cta .cta-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}


/* ================= VALUE SECTION COLOR FIX ================= */

.product-value h2 {
  color: #0f172a; /* strong heading */
}

/* Body text */
.product-value p {
  color: #475569; /* muted gray */
  font-weight: 400;
}

/* Highlight "StanzaClad" */
/* Gradient text for "StanzaClad" */
.product-value strong {
  background: linear-gradient(90deg, #ff6b6b 0%, #1b2a41 100%);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;

  font-weight: 600;
}

/* Emphasis line */
.product-value .hero-emphasis {
  font-style: italic !important;
  font-weight: 700 !important; /* Forces the bold, punchy look */
  color: #525252 !important;   /* Darkens the text so it stands out */
}

/* =========================================================
   FEATURE BLOCK ALIGNMENT FIX (Wireframe Match)
========================================================= */
.feature-block {
  text-align: left !important;    /* Forces all text to the left by default */
}

.feature-block h3 {
  font-size: 28px !important;     /* Slightly larger and bolder presence */
  color: #0f172a !important;
}

.feature-block p {
  max-width: 900px !important;    /* Matches the image width so the text spans cleanly */
  margin: 0 0 40px 0 !important;  /* Removes horizontal auto-margins to lock it to the left */
  font-size: 18px !important;     /* Larger, more readable text matching the wireframe */
  color: #334155 !important;
}

.feature-block img {
  display: block !important;      /* Required for auto-margins to work on an image */
  margin: 0 auto !important;      /* Safely centers the image independent of the text */
}

.feature-block span {
  display: block !important;
  text-align: center !important;  /* Locks the caption back to the center */
  font-weight: 700 !important;    /* Wireframe bold styling */
  font-style: italic !important;  /* Wireframe italic styling */
  color: #475569 !important;
  margin-top: 16px !important;
}

/* =========================================================
   DESIGNED BY SECTION - LOGO CROP & STYLING
========================================================= */
.designed-by {
  text-align: center;
  padding: 80px 20px;
}

/* The CSS Cropping Magic */
.stanzaclad-logo-cropped {
  width: 95px;               /* Limits the width to cut off the text on the right */
  height: 95px;              /* Keeps the frame perfectly square */
  object-fit: cover;         /* Tells the browser to fill the box without squishing the image */
  object-position: left;     /* Anchors the image to the far left edge (where the icon is) */
  
  margin: 0 auto 16px;       /* Perfectly centers the icon and adds space below */
  display: block;
  
  /* Replicates the soft, premium shadow from the wireframe */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.06)); 
}

.designed-by h3 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.designed-by p {
  font-size: 15px;
  color: #475569;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================================
   GAP REDUCTION FIX (Stanza AI -> Designed By)
========================================================= */

/* 1. Removes the 60px downward push from the final feature block */
.feature-block:last-child {
  margin-bottom: 0 !important; 
}

/* 2. Overrides the huge 80px top padding we set earlier, reducing it to a clean 30px */
.designed-by {
  padding-top: 30px !important; 
}

/* =========================================================
   STANZA AI IMAGE RESIZING (Single Scroll Fix)
========================================================= */

/* Targets specifically the 10th feature block (Stanza AI) */
.feature-block:nth-child(10) img {
  max-width: 550px !important;    /* Scales the image down significantly */
  height: auto !important;        /* Maintains perfect aspect ratio */
  box-shadow: none !important;    /* Optional: Remove the shadow if you want it flat like the wireframe */
}