<div class="og-calc">
/* === Outgrow Calculator: Squarespace-friendly CSS === */
/* 1) If you wrap your embed code with <div class="og-calc">...</div>, this styles it */
.og-calc {
  max-width: 980px;            /* set your preferred content width */
  margin-inline: auto;
  overflow: hidden;             /* hide any tiny iframe overflow */
}

/* 2) Style the iframe itself (works even without the .og-calc wrapper) */
.og-calc iframe,
.sqs-block-embed iframe[src*="outgrow.us"],
.sqs-block-code iframe[src*="outgrow.us"] {
  display: block;
  width: 1px;                   /* fixes some browsers’ min-content quirk */
  min-width: 100%;
  min-height: 80vh;             /* tall enough for most flows; adjust as needed */
  border: 0;
  border-radius: 16px;          /* rounded “card” look */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  background: #fff;
}

/* 3) On small screens, give it more height */
@media (max-width: 640px) {
  .og-calc iframe,
  .sqs-block-embed iframe[src*="outgrow.us"],
  .sqs-block-code iframe[src*="outgrow.us"] {
    min-height: 100vh;
    border-radius: 12px;
  }
}

/* 4) Remove extra spacing/padding Squarespace sometimes adds under/around embeds */
.sqs-block-embed .sqs-block-content,
.sqs-block-code .sqs-block-content {
  padding-bottom: 0 !important;
}

.sqs-block-embed,
.sqs-block-code {
  margin-bottom: 0;             /* tighten spacing below the block */
}

/* 5) Optional: full-bleed section look */
.section-background .og-calc {
  max-width: 1200px;
}
</div>