/* ---------------------------------------------------------------
   Local-only styles for the offline rebuild of go.soshallwe.co/grow-vsl
   Nothing here exists on the live page — it only replaces things the
   GoHighLevel runtime used to do (booking widget, FAQ animation).
   --------------------------------------------------------------- */

/* ---- Page background matched to ../success-fbvsl and ../call-booking-page-b ----
   Those two use #000000 for html/body and for their first (hero) section, with
   #141414 from the second section down. This page was #141414 throughout.

   Both declarations below are needed. Its sections cover 100% of the document
   height, so changing html/body alone is invisible — the hero section paints
   over it. The section rule is the part you actually see; the html/body rule
   only shows during overscroll and in the browser's own surrounding chrome.

   The FAQ section and footer were already #141414 and match the other two, so
   they are deliberately left alone. Live has this page at #141414 throughout —
   this is an intentional deviation for consistency across the three. */
html,
body { background-color: var(--black); }
.hl_page-preview--content .section-20uqKZz6bZ { background-color: var(--black); }

/* ---- Video: the WRAPPER owns the 16:9 box, the player just fills it ----
   Pinning aspect-ratio on <wistia-player> itself is not enough. Its shadow root
   sets `:host { display: flex; width: 100% }` with **no height**, so while the
   player is initialising its box is driven by whatever it has rendered inside —
   which is how the frame came out taller than the settled player for ~1s.

   So the aspect ratio now lives on the wrapper div, and the player is absolutely
   positioned to fill it. Nothing the player does to its own box can affect page
   layout any more, and `overflow: hidden` clips any oversized intermediate state
   instead of letting it push the page around. */
.c-video [id$="-hl-custom-code"] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.c-video [id$="-hl-custom-code"] > wistia-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Sticky CTA: keep the label centred ------------------------
   "GET MY FREE GROWTH AUDIT" is set `white-space: nowrap`, and the
   button's generous horizontal padding leaves less room than the text
   needs — 264px of text in a 200px content box at 360px wide. Once a
   nowrap line overflows, `text-align: center` has nothing left to
   distribute, so the text starts at the content box's left edge and
   spills out the right: it rendered 33px off-centre on a 360px phone
   and 7px off-centre above 641px.

   Fix is to make the label fit rather than to nudge it: trim the
   padding, and below ~365px let the font scale down just enough that
   the line still fits. Above 365px the font stays at its original 16px.
   ---------------------------------------------------------------- */
@media screen and (min-width: 641px) {
  #ssw-sticky-cta .ssw-btn { padding-left: 36px; padding-right: 36px; }
}

@media screen and (max-width: 640px) {
  #ssw-sticky-cta { padding-left: 16px; padding-right: 16px; }
  #ssw-sticky-cta .ssw-btn {
    padding-left: 20px;
    padding-right: 20px;
    font-size: clamp(13px, 4.4vw, 16px);
  }
}

/* ---- Shared top-bar logo ---------------------------------------
   This page is the placement reference for all three (home / success /
   disqualified): logo left-aligned at x=70 (15px inside the 1170
   container) with its top 10px from the section edge on desktop, and
   centred flush to the top below 480px. Only the size changes here —
   home's own dimensions +20%:
       desktop  180px -> 216px
       mobile   150px -> 180px
   Both the .mobile-only and .desktop-only logo rows are covered, since
   the mobile row is the one shown between 481 and 767px. */
@media screen and (min-width: 481px) {
  .hl_page-preview--content .image-Ijt5EPqo6K .image-container img,
  .hl_page-preview--content .image-dJem1bPmSS .image-container img { width: 216px; }
}
@media screen and (max-width: 480px) {
  .hl_page-preview--content .image-Ijt5EPqo6K .image-container img,
  .hl_page-preview--content .image-dJem1bPmSS .image-container img { width: 180px; }
}

/* ---- Mobile: halve the gap between "For SaaS, E-Commerce and Professional
   Services" and the Mega FAQ section -------------------------------------
   The gap is the sum of six paddings/margins across the section seam
   (110px at phone widths). Each is halved so the reduction stays
   proportional. Every selector below is scoped to this page's own ids. */
@media screen and (max-width: 767px) {
  .hl_page-preview--content .col-t0TyGdoaGH        { padding-bottom: 5px; }   /* was 10 */
  .hl_page-preview--content .row-peNKPFiDOO        { padding-bottom: 7.5px; } /* was 15 */
  .hl_page-preview--content .section-20uqKZz6bZ    { padding-bottom: 20px; }  /* was 40 */
  .hl_page-preview--content .section-NS2mudWVll    { padding-top: 10px; }     /* was 20 */
  .hl_page-preview--content .row-r1-o8SwBGt        { margin-top: 10px;        /* was 20 */
                                                     padding-top: 7.5px; }    /* was 15 */
  .hl_page-preview--content .col-M1sQg2jGIY > .inner { padding-top: 5px; }    /* was 10 */
}

/* below 480px the section's own bottom padding is 20px, not 40px */
@media screen and (max-width: 480px) {
  .hl_page-preview--content .section-20uqKZz6bZ { padding-bottom: 10px; }
}

/* ---- CTA copy: always "GET MY FREE GROWTH AUDIT", one line, centred ----
   Live ships three CTAs with two different labels: the top bar reads "GET MY
   FREE GROWTH AUDIT" while the mobile-only button under the video and a button
   in a `display:none` section both read "Get my Growth Audit". The copy is
   unified in index.html (all three now carry the Free); these rules guarantee
   the other half of the requirement -- that it stays on ONE centred line.

   `white-space: nowrap` alone would overflow the column on a very narrow phone,
   so the font shrinks, but ONLY once the line genuinely stops fitting. The
   button is inline-block with 30px of horizontal padding and the label needs
   234px at 16px, inside a column of (viewport - 20px), so the largest font that
   still fits one line is 16(vw - 80)/234 ~= 6.84vw - 5.47px. Above ~314px wide
   that exceeds 16px and the clamp holds it at 16 -- i.e. nothing changes on any
   real handset; below it the text scales down instead of wrapping. */
.hl_page-preview--content .cbutton-qYgRzHo-NR .main-heading-button,
.hl_page-preview--content .cbutton-nsY1N6Glmx .main-heading-button,
.hl_page-preview--content .cbutton-4mfQmGrkVJ .main-heading-button {
  white-space: nowrap;
  text-align: center;
}
.hl_page-preview--content .cbutton-nsY1N6Glmx .main-heading-button {
  font-size: clamp(11px, calc(6.84vw - 5.47px), 16px);
}

/* ==================================================================
   iClosed instant-paint facade
   ------------------------------------------------------------------
   A static look-alike of the loaded iClosed booking form, painted on the
   first frame so the 620px slot is never an empty box. The real widget is
   held at opacity 0 underneath and crossfaded in once its iframe has
   loaded and settled (see local.js). Same pattern as the Fortress Roofing
   hero form.

   Every number below was MEASURED off the real form rendered as a
   top-level document at app.iclosed.io/e/soshallwe/ssw-assessment-call-b
   (getBoundingClientRect + getComputedStyle) at container widths 1150px
   and 370px -- not eyeballed from a screenshot. The breakpoints mirror
   iClosed's own Tailwind container queries:

       < 520px    card full width, no border/radius, no top offset
       520-899px  card max-width 480, centred, border + radius, 56px offset
       >= 900px   card w-fit (811px), two columns  <- the reference images

   TWO THINGS THAT LOOK WRONG BUT ARE FAITHFUL:
   1. The calendar sits at opacity .3 (iClosed dims it until the form is
      filled) while the tooltip above it is at full opacity. That is why
      the dates read grey even though they compute to #fff.
   2. The day-of-week header uses 7 equal columns while the date grid uses
      44px cells with 8px gaps, so the labels are up to ~3px out of true
      with the numbers under them. iClosed does that; we copy it.

   The facade is `pointer-events: none`, so a click during its brief life
   goes straight through to the real iframe underneath.

   Only <div> and <span> are used. <p>, <ol>, <li>, <i>, <u>, <b> and
   <strong> all have rules in page.css that would bleed in here, and the
   facade sits inside #preview-container where they apply. The reset plus
   !important on contested properties is deliberate, not cargo-culted.
   ================================================================== */

/* Private family name on purpose. iClosed renders in Inter, but these
   pages must NOT load a family literally called "Inter": ../call-booking-page-b
   has two spans that specify `font-family: Inter` and are *meant* to fall
   back to serif (live does the same, verified by screenshot). Loading real
   "Inter" would silently restyle them. This is a 102-glyph subset
   (ASCII + U+2019), 16KB, weight axis 100-900 retained. */
@font-face {
  font-family: 'ic-facade-inter';
  src: url('inter-facade.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* never paint a fallback, matching this page's policy */
}

/* The wrapper is the query container for everything below (its width == the
   iframe's width) and the positioning context for the facade.

   Deliberately NO height here. widget.js rewrites the .iclosed-widget div's
   own inline height to fit its content the moment it measures it -- on a
   370px-wide phone it goes 620px -> 991px so the whole card shows without an
   internal scroll. Pinning 620px on the wrapper trapped that inside a short
   box: the widget overflowed, the document grew ~195px, and the facade clipped
   a card the real form was showing in full. Letting the wrapper size to the
   widget keeps the page flow byte-identical to before this facade existed,
   and the facade (inset: 0) tracks whichever height the widget settles on. */
.ic-embed {
  position: relative;
  width: 100%;
  container: icembed / inline-size;
}

/* Hold the real widget invisible until iClosed has actually finished rendering.
   `!important` is deliberate: widget.js owns this iframe and may write inline
   styles to it at any point after it is inserted.

   The swap is INSTANT and happens in two frames, with NO opacity transition on
   either layer. Cross-fading them was the bug: for 250ms both were partly
   transparent at once and you saw a double exposure of the facade over
   iClosed's own loading skeleton.

     frame 1  .ic-ready   -> iframe opacity 1, still completely hidden behind
                             the fully-opaque facade. Nothing visible changes.
     frame 2  .ic-loaded  -> facade display:none. The form underneath is
                             already painted, so there is no blank frame.

   Because the facade is a pixel copy of the settled form, an instant cut is
   what reads as seamless; a fade is what reads as a glitch. */
/* BEFORE the swap the FACADE sizes the box; after it, iClosed does.
   The widget div is authored `height: 620px`, but the settled embed is only as
   tall as the card -- 569px at desktop, 991px on a phone. Left alone, the box
   shrank ~51px at the swap and everything below it jumped up. So while the
   facade is up it sits in normal flow and its card dictates the height, which
   IS the settled height at every breakpoint, with no hardcoded numbers; the
   real widget is absolutely positioned over it. Once .ic-ready lands these stop
   matching and the widget returns to flow with the height iClosed gave it. */
.ic-embed:not(.ic-ready) .ic-facade {
  position: relative !important;
  inset: auto !important;
}
.ic-embed:not(.ic-ready) .iclosed-widget {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
}

.ic-embed .iclosed-widget iframe { opacity: 0 !important; }
.ic-embed.ic-ready .iclosed-widget iframe { opacity: 1 !important; }
.ic-embed.ic-loaded .ic-facade { display: none !important; }

.ic-facade {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  overflow: hidden;                /* clip exactly as the iframe does */
  /* NO background of its own, on purpose. The standalone iClosed page paints a
     full-bleed #141414 root behind its card, but the *embedded* form does not
     show it -- once widget.js sizes the iframe to the card, the card is all
     there is and the host page's own background surrounds it. Painting #141414
     here drew a grey slab the loaded form never has, and it read as a box
     appearing and then vanishing at the swap. Facade = the card, nothing else. */
  background: none !important;
  font-family: 'ic-facade-inter', sans-serif !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  pointer-events: none;            /* clicks fall through to the real form */
}

/* Defensive reset -- page.css reaches in here.
   `:where()` is load-bearing: it contributes ZERO specificity, so this reset
   scores (0,1,0) instead of (0,1,1). Written as `.ic-facade div` it would
   OUTRANK every single-class rule below and, being !important too, would win
   every conflict -- the card came out 1150px wide with no padding. */
.ic-facade :where(div, span) {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 solid #424242 !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1 !important;
  position: static !important;
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  color: inherit !important;
  font: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
  transform: none !important;
}

/* ---- card ------------------------------------------------------- */
.icf-card { background: #212121 !important; overflow: hidden; }

/* ---- step tabs -------------------------------------------------- */
.icf-tabs {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 16px !important;
  border-bottom: 1px solid #424242 !important;
}
.icf-tab { display: flex !important; align-items: center; }
.icf-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: #424242 !important;
  flex-shrink: 0 !important;
}
.icf-tab--on .icf-dot { background: #f8d37e !important; }
.icf-tab-l {
  padding-left: 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #fff !important;
  white-space: nowrap !important;
}
.icf-tab:not(.icf-tab--on) .icf-tab-l { opacity: .5 !important; }

/* ---- body / columns --------------------------------------------- */
.icf-body { padding: 20px !important; }

/* ---- left column: copy ------------------------------------------ */
.icf-b { display: inline !important; font-weight: 700 !important; }
.icf-title {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.icf-lede,
.icf-note,
.icf-list {
  font-size: 14px !important;
  line-height: 17.5px !important;
  color: rgba(255, 255, 255, .733) !important;
}
.icf-lede { margin-top: 12px !important; }
.icf-list { margin: 17.5px 0 !important; }
.icf-note { margin-top: 17.5px !important; }

/* Hand-built list marker: page.css styles ol/li, and a real marker's
   position is not directly controllable. 24px marker column with the
   number right-aligned 7px clear of the text reproduces the browser
   default the real form gets. */
.icf-li { display: grid !important; grid-template-columns: 24px 1fr; }
.icf-li-n { text-align: right !important; padding-right: 7px !important; }

/* ---- left column: fields ---------------------------------------- */
/* The real form's phone field carries `.blinking-border`, a 1s infinite
   animation, which is why one reference screenshot showed a bright ring and
   the other showed none -- they caught opposite halves of the same pulse.
   iClosed's keyframes read `border-color: var(--blinking-border-color, #fff)`,
   and for this account that variable is set to a *gradient* -- invalid for
   border-color, so the declaration is invalid at computed-value time and falls
   back to the initial value, currentColor, which is #fff here. Hence white ->
   transparent -> white rather than the yellow it looks like at a glance. */
@keyframes icf-blink-border {
  0%   { border-color: #fff; }
  50%  { border-color: rgba(0, 0, 0, 0); }
  100% { border-color: #fff; }
}
.icf-phone {
  position: relative !important;
  margin-top: 16px !important;
  height: 40px !important;
  background: #303030 !important;
  border: 2px solid #fff !important;
  border-radius: 8px !important;
  animation: icf-blink-border 1s ease 0s infinite normal none running !important;
}
.icf-flag {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 39px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #303030 !important;
  border-right: 1px solid #424242 !important;
  border-radius: 8px 0 0 8px !important;
}
/* United States. Inline SVG rather than gradients because the canton's star
   field cannot be confined to one corner with background layers -- a tiled
   radial-gradient would repeat across the whole flag. 13 stripes, canton over
   the top 7, and a staggered 5/4 dot grid standing in for the 50 stars, which
   at 20x14 is what the real sprite resolves to anyway. Data URI, so no request.

   NOTE: the real widget picks the country from the VISITOR's IP. This is
   hardcoded to the US to match the intended audience, so it will differ for a
   moment at the swap for anyone browsing from elsewhere. */
.icf-flag-img {
  width: 20px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2014'%3E%3Crect%20width='20'%20height='14'%20fill='%23fff'/%3E%3Cg%20fill='%23b22234'%3E%3Crect%20y='0.0'%20width='20'%20height='1.077'/%3E%3Crect%20y='2.154'%20width='20'%20height='1.077'/%3E%3Crect%20y='4.308'%20width='20'%20height='1.077'/%3E%3Crect%20y='6.462'%20width='20'%20height='1.077'/%3E%3Crect%20y='8.615'%20width='20'%20height='1.077'/%3E%3Crect%20y='10.769'%20width='20'%20height='1.077'/%3E%3Crect%20y='12.923'%20width='20'%20height='1.077'/%3E%3C/g%3E%3Crect%20width='8.0'%20height='7.538'%20fill='%233c3b6e'/%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='0.8'%20cy='0.754'%20r='0.34'/%3E%3Ccircle%20cx='2.4'%20cy='0.754'%20r='0.34'/%3E%3Ccircle%20cx='4.0'%20cy='0.754'%20r='0.34'/%3E%3Ccircle%20cx='5.6'%20cy='0.754'%20r='0.34'/%3E%3Ccircle%20cx='7.2'%20cy='0.754'%20r='0.34'/%3E%3Ccircle%20cx='1.0'%20cy='2.262'%20r='0.34'/%3E%3Ccircle%20cx='3.0'%20cy='2.262'%20r='0.34'/%3E%3Ccircle%20cx='5.0'%20cy='2.262'%20r='0.34'/%3E%3Ccircle%20cx='7.0'%20cy='2.262'%20r='0.34'/%3E%3Ccircle%20cx='0.8'%20cy='3.769'%20r='0.34'/%3E%3Ccircle%20cx='2.4'%20cy='3.769'%20r='0.34'/%3E%3Ccircle%20cx='4.0'%20cy='3.769'%20r='0.34'/%3E%3Ccircle%20cx='5.6'%20cy='3.769'%20r='0.34'/%3E%3Ccircle%20cx='7.2'%20cy='3.769'%20r='0.34'/%3E%3Ccircle%20cx='1.0'%20cy='5.277'%20r='0.34'/%3E%3Ccircle%20cx='3.0'%20cy='5.277'%20r='0.34'/%3E%3Ccircle%20cx='5.0'%20cy='5.277'%20r='0.34'/%3E%3Ccircle%20cx='7.0'%20cy='5.277'%20r='0.34'/%3E%3Ccircle%20cx='0.8'%20cy='6.785'%20r='0.34'/%3E%3Ccircle%20cx='2.4'%20cy='6.785'%20r='0.34'/%3E%3Ccircle%20cx='4.0'%20cy='6.785'%20r='0.34'/%3E%3Ccircle%20cx='5.6'%20cy='6.785'%20r='0.34'/%3E%3Ccircle%20cx='7.2'%20cy='6.785'%20r='0.34'/%3E%3C/g%3E%3C/svg%3E") center / 20px 14px no-repeat !important;
}
.icf-caret {
  width: 0 !important;
  height: 0 !important;
  flex-shrink: 0 !important;
  border-left: 3px solid transparent !important;
  border-right: 3px solid transparent !important;
  border-top: 4px solid #909090 !important;
}
.icf-code {
  position: absolute !important;
  left: 46px !important;
  top: 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #fff !important;
}
.icf-names { display: flex !important; gap: 16px; margin-top: 16px !important; }
.icf-inp {
  flex: 1 1 0 !important;
  height: 40px !important;
  padding: 10px 16px !important;
  background: #303030 !important;
  border: 1px solid #424242 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 17.5px !important;
  color: #909090 !important;          /* the real placeholder colour */
  white-space: nowrap !important;
  overflow: hidden;
}
.icf-consent {
  margin-top: 16px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: #fff !important;
}
.icf-u {
  display: inline !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
.icf-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #f8d37e 0%, #fac754 100%) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: #111928 !important;
}
/* ">" drawn with borders so no <svg> is needed inside the button */
.icf-chev {
  width: 7px !important;
  height: 7px !important;
  flex-shrink: 0 !important;
  border-top: 1.6px solid currentColor !important;
  border-right: 1.6px solid currentColor !important;
  transform: rotate(45deg) !important;
}

/* ---- right column: calendar ------------------------------------- */
/* Stacked, the calendar sits 40px under the Continue button; at >=900 it is
   a sibling column and the gap is removed. */
.icf-col-r { margin-top: 40px !important; }
.icf-cal-wrap { position: relative !important; }
.icf-cal { opacity: .3 !important; padding-bottom: 20px !important; }
.icf-cal-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 32px !important;
}
.icf-month {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.icf-nav { display: flex !important; gap: 8px; }
.icf-nav-b {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #212121 !important;
  border: 1px solid #424242 !important;
  border-radius: 4px !important;
  opacity: .5 !important;
}
.icf-nav-b .icf-chev { border-color: #fff !important; }
.icf-nav-b--prev .icf-chev { transform: rotate(-135deg) !important; }
.icf-dow {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 18px !important;
}
.icf-dow span {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: rgba(255, 255, 255, .733) !important;
}
/* The gap drives the cell width, matching the real form exactly:
   (330 - 6*6)/7 = 42 below 900px, (356 - 6*8)/7 = 44 at 900px and up. */
.icf-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 9px !important;
}
.icf-day {
  height: 44px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #fff !important;
}
.icf-day--today::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #fff;
  flex-shrink: 0 !important;
}
.icf-tip {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin-top: 10px !important;       /* measured offset from dead centre */
  width: 270px !important;
  padding: 12px !important;
  background: #303030 !important;
  border: 1px solid #424242 !important;
  border-radius: 4px !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06));
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
  color: #fff !important;
}

/* ---- footer ----------------------------------------------------- */
.icf-foot {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 0 !important;
  border-top: 1px solid #424242 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.ic-facade .icf-foot svg {
  width: 64px;
  height: 12px;
  margin: 0 0 0 6px;
  max-width: none;
  max-height: none;
  color: #c0c0c0;
}

/* ==================================================================
   520px and up -- card gains its border, radius and 56px top offset
   ================================================================== */
@container icembed (min-width: 520px) {
  /* No top offset. The standalone page has `pt-14` (56px) above the card; the
     settled embed does not -- the card sits flush at the top of the iframe.
     Keeping the 56px pushed the facade's card down, so the card jumped up by
     that much at the swap. */
  .icf-card {
    max-width: 480px !important;
    margin: 0 auto !important;
    border: 1px solid #424242 !important;
    border-radius: 8px !important;
  }
}

/* ==================================================================
   900px and up -- the two-column desktop card (the reference images)
   ================================================================== */
@container icembed (min-width: 900px) {
  .icf-card { width: 811px !important; max-width: none !important; }

  .icf-tabs { padding: 10px 16px !important; }

  .icf-body { display: flex !important; padding: 24px 0 !important; }
  /* 405 + 404 = 809 = the card's inner width. Each column's content box
     lands on 356px, matching the measured form. */
  .icf-col-l {
    width: 405px !important;
    padding: 0 24px !important;
    border-right: 1px solid #424242 !important;
    flex-shrink: 0 !important;
  }
  .icf-col-r { width: 404px !important; padding: 0 24px !important;
               margin-top: 0 !important; flex-shrink: 0 !important; }
  .icf-cal { padding-bottom: 24px !important; }
  .icf-tip { margin-top: 0 !important; }   /* dead centre at this width */

  .icf-title { font-size: 20px !important; }
  .icf-btn { height: 40px !important; }

  .icf-dow { padding-top: 13px !important; }
  .icf-grid { gap: 8px; }
}