/* =========================================================
   BUTTON TYPOGRAPHY
========================================================= */

.btn,
.form-btn {
  font-family: var(--sm-font-mono) !important;
  font-weight: 600 !important;
  line-height: 0.9 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
}

.btn svg,
.form-btn svg {
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  width: 18px;
  height: 18px;
}
/* Kajabi's theme stylesheet gives every .btn an 8px top margin and zeroes it in
   the desktop header. Our elements were spaced with that margin present, so we
   state it ourselves rather than inherit it — the spacing then survives a theme
   stylesheet that has a different idea. */
.section[class*="sm-"] .btn { margin: 8px 0 0; }

/* the arrow keeps in step with the button size: 14 on small, 16 on medium, 18 on large */
.btn--medium svg { width: 16px; height: 16px; }
.btn--small svg { width: 14px; height: 14px; }

/* BUTTON ARROW — the "Show arrow" toggle on any button (native or custom) */
.btn .btn__arrow {
  display: block;
  transition: transform var(--sm-dur) var(--sm-ease);
}
.btn .btn__arrow svg {
  display: block;
}
@media (hover:hover) {
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn .btn__arrow { transition: none !important; }
}

/* BUTTON HOVER — Kajabi's stylesheet brightens every button by 20% on hover, which turns a
   yellow pale (1.2:1 against a cream page) and does nothing to a black one. Instead: a 10% wash
   of the button's own text colour over its background — an inset shadow, so it works on solid
   and outline buttons whatever colour a section gives them and beats nothing it should not —
   a 1px lift, and the arrow's 4px slide above. */
.btn, .form-btn {
  transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), background-color var(--sm-dur) var(--sm-ease), color var(--sm-dur) var(--sm-ease), border-color var(--sm-dur) var(--sm-ease);
}
@media (hover:hover) {
  .btn:hover, .form-btn:hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 10%, transparent);
  }
}
.btn:focus-visible, .form-btn:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .form-btn { transition: none; }
  .btn:hover, .form-btn:hover { transform: none; }
}


/* =========================================================
   SMALL BUTTON
   Utility / secondary / compact CTAs
========================================================= */

.btn--small {
  font-size: var(--sg-btn-fs-small) !important;
  padding: 9px 16px !important;
  letter-spacing: .16em !important;
}


/* =========================================================
   MEDIUM BUTTON
   Standard site CTA
========================================================= */

.btn--medium {
  font-size: var(--sg-btn-fs-medium) !important;
  padding: 12px 20px !important;
  letter-spacing: .14em !important;
  min-height: 44px; /* the touch minimum, arrow or not */
}


/* =========================================================
   LARGE BUTTON
   Hero / major conversion CTA
========================================================= */

.btn--large {
  font-size: var(--sg-btn-fs-large) !important;
  padding: 15px 28px !important;
  letter-spacing: .13em !important;
  min-height: 52px;
}


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

@media (max-width: 767px) {

  /* Phones: one step down from the Style Guide size, never below 10px */
  .btn--small {
    font-size: max(10px, calc(var(--sg-btn-fs-small) - 1px)) !important;
    padding: 9px 15px !important;
  }

  .btn--medium {
    font-size: max(10px, calc(var(--sg-btn-fs-medium) - 1px)) !important;
    padding: 12px 18px !important;
  }

  .btn--large {
    font-size: max(10px, calc(var(--sg-btn-fs-large) - 1px)) !important;
    padding: 12px 24px !important;
  }

}

/* Outline buttons on dark sections read in white (Kajabi paints them in the button colour) */
.section.background-dark .btn--outline {
  color:var(--sm-on-dark) !important;
}

/* =========================================================
   SM TOKENS
   Every value here now comes from Settings → Style Guide,
   through the --sg-* bridge in global_custom_css. Nothing in
   this stylesheet holds a brand colour, a radius or a duration
   of its own. --sm-ease is the one exception: a curve, not a
   decision, and the same on every element.
========================================================= */

:root{
  --sm-page:var(--sg-bg);                      /* Style Guide → Page background */
  --sm-card-light:var(--sg-card-light);        /* Style Guide → Surfaces → Light card */
  --sm-card-dark:var(--sg-surface-dark);       /* Style Guide → Surfaces → Dark card */
  --sm-section-dark:var(--sg-surface-deep);    /* Style Guide → Surfaces → Dark section */
  --sm-on-dark:#ffffff;                        /* text and lines on a dark surface or a photograph: the one fixed colour */
  --sm-placeholder-light:var(--sg-placeholder-light);
  --sm-placeholder-dark:var(--sg-placeholder-dark);
  --sm-radius:var(--sg-radius);                /* Style Guide → Shape */
  /* Card hairline (Style Guide → Shape → Card hairline): a neutral line, never the accent.
     Dark grey on a light card, light grey on a dark one; the slider scales both, 0 removes them.
     Light sections carry the Style Guide card shadow at rest; dark sections turn it off. */
  --sm-frame-light:color-mix(in srgb, var(--sg-color-heading) calc(var(--sg-frame-strength) * 0.18), transparent);
  --sm-frame-dark:color-mix(in srgb, var(--sm-on-dark) calc(var(--sg-frame-strength) * 0.32), transparent);
  --sm-frame:var(--sm-frame-light);
  /* Hover: the same hairline, a step stronger. Never the accent colour. */
  --sm-frame-hover-light:color-mix(in srgb, var(--sg-color-heading) calc(var(--sg-frame-strength) * 0.28), transparent);
  --sm-frame-hover-dark:color-mix(in srgb, var(--sm-on-dark) calc(var(--sg-frame-strength) * 0.48), transparent);
  --sm-frame-hover:var(--sm-frame-hover-light);
  --sm-card-shadow:var(--sg-shadow, none);
  --sm-card-shadow-hover:var(--sg-shadow-hover, none);
  --sm-ease:cubic-bezier(.22,1,.36,1);
  --sm-dur:var(--sg-dur);                      /* Style Guide → Motion */
  --sm-dur-img:var(--sg-dur-img);
}
/* Dark sections: light hairline, no shadow. Photo, video and hero tiles are dark imagery whatever
   the section, so they always take the light hairline. */
.background-dark { --sm-frame:var(--sm-frame-dark); --sm-frame-hover:var(--sm-frame-hover-dark); --sm-card-shadow:none; --sm-card-shadow-hover:none; }
.sm-pc .sm-pc__inner, .sm-vc .sm-vc__inner, .sm-hero .sm-hero__card-inner { --sm-frame:var(--sm-frame-dark); --sm-frame-hover:var(--sm-frame-hover-dark); }



/* =========================================================
   SM TYPE SYSTEM
   Every size on the site is a Style Guide slot (h1–h6, body),
   read here through the --sg-fs-* bridge in global_custom_css.
   The Style Guide has no slot for three roles, so they are
   derived from it once, below. Nothing else on the site sets a
   font-family, font-size, line-height or letter-spacing.

   Roles:  h1 hero · h2 section heading · h3 card title
           h4 item / small-card title · h5 footer heading
           h6 eyebrow · body paragraphs · .sm-quote pull quote
           .sm-label mono label · .sm-small small text
           .sm-fine fine print · .sm-signature handwritten line
           .btn · .sm-rule the gold rule
========================================================= */

:root{
  --sm-font-mono: var(--sg-font-label), monospace;         /* Style Guide → Label font: eyebrows, labels, buttons, nav */
  --sm-font-script: var(--sg-font-signature), cursive;    /* Style Guide → Signature font */
  --sm-fs-small: max(14px, calc(var(--sg-fs-body) - 3px)); /* small text: 15px at body 18, 14px at body 16 */
  --sm-fs-fine:  max(11px, calc(var(--sg-fs-body) * .7));  /* fine print: 12.6px at body 18 */
}

/* The heading and body families come from the Style Guide tokens. Kajabi's own
   stylesheet sets the same roles from the list pickers only, so every selector
   it touches is restated here through the token: that way Hosted family and
   Any Google font reach forms, coaching receipts and the .h1-.h6 classes, not
   just the tags. h6 is the eyebrow and has its own recipe below. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6,
.block-coaching-session-details__receipt { font-family: var(--sg-font-heading), sans-serif; }
/* h1 and h2 take their size from the bridge as well, so the fluid tablet step in
   global_custom_css reaches the tags — Kajabi's stylesheet sets both slots as fixed
   pixels from 768px. */
h1, .h1 { font-size: var(--sg-fs-h1); }
h2, .h2 { font-size: var(--sg-fs-h2); }
body, .button-as-link, .filter__field, .form-group label, .form-control,
.social-share-modal__menu button { font-family: var(--sg-font-body), sans-serif; }

/* Big headings get one global tracking; every h1/h2 on the site, no exceptions */
h1, h2 { letter-spacing: -.02em; }

/* Bold inside text is 600 — the weight the site's sub-labels use */
strong, b { font-weight: 600; }

/* Eyebrow — the site's h6. Size is the Style Guide h6 slot; the recipe
   (mono, 500, tracked, uppercase) is the one deliberate redesign of a
   native tag. font-family is !important because Kajabi's stylesheet also
   sets h6 from the heading picker, and this is the one tag the theme redesigns. */
h6 {
  font-family: var(--sm-font-mono) !important;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

/* Mono label — the eyebrow recipe on any element (dates, categories,
   captions, card links, quotes). Same size as the eyebrow: h6 slot. */
.sm-label {
  font-family: var(--sm-font-mono);
  font-size: var(--sg-fs-h6);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

/* Line endings. Paragraphs avoid a lone word on their last line (the browser
   re-breaks the last few lines); headings and short centred intros balance
   their lines. sm.js adds the belt to these braces: it joins the last two
   words of every paragraph and heading with a non-breaking space. */
.section[class*="sm-"] p, .section[class*="sm-"] li, .sm-small, .sm-faq__answer { text-wrap: pretty; }
h1, h2, h3, .sm-quote,
.sm-cta__intro, .sm-cc__intro, .sm-vc__intro, .sm-ev__intro, .sm-pc__intro, .sm-faq__text { text-wrap: balance; }

/* Eyebrows are paragraphs in the label recipe (an h6 before the page's h1 made a
   nonsense outline): heading colour on light surfaces, the on-dark colour on dark ones.
   A section's own Eyebrow colour picker (an ID rule) still wins. */
.section[class*="sm-"] .sm-label[class*="__eyebrow"] { color: var(--sg-color-heading); }
.section.background-dark[class*="sm-"] .sm-label[class*="__eyebrow"] { color: var(--sm-on-dark); }

/* Small text and fine print — size only; everything else is body */
.sm-small { font-size: var(--sm-fs-small); }
.sm-fine  { font-size: var(--sm-fs-fine); }

/* Pull quote — a spoken line set large, the same on every element
   (profile row, testimonials, quotes on course and event pages).
   Body family at the Style Guide h3 slot, medium weight, heading
   colour; white on dark sections like every heading. */
.sm-quote {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--sg-color-heading);
  margin: 0;
}
.background-dark .sm-quote { color:var(--sm-on-dark); }

/* Signature — a name typed in the handwritten face, the same on every
   element. The Style Guide h1 slot (48 / 36); heading colour; white on dark. */
.sm-signature {
  font-family: var(--sm-font-script);
  font-size: var(--sg-fs-h1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sg-color-heading);
  margin: 0;
}
.background-dark .sm-signature { color:var(--sm-on-dark); }

/* Rule — the short gold line under an eyebrow, a quote or a name.
   One recipe site-wide; width from Style Guide → Shape, colour from
   Style Guide → Primary. */
.sm-rule {
  display: block;
  width: var(--sg-rule-width);
  height: 1px;
  margin: 18px 0;
  border: 0;
  background: var(--sg-color-primary);
}

/* Secondary link action — the quiet partner to a button. The same recipe the card
   links already use (mono label, gold rule, arrow) promoted to a section-level
   action, with one difference: the rule grows from nothing on hover rather than
   sitting there. The arrow deliberately does not move — the slide stays the solid
   button's signature, and two things animating at once reads as fussy. */
.sm-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:inherit; text-decoration:none; }
.sm-link:hover, .sm-link:focus { color:inherit; text-decoration:none; }
.sm-link__text { position:relative; padding-bottom:5px; }
.sm-link__text::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--sg-color-primary); transform:scaleX(0); transform-origin:left center; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-link:hover .sm-link__text::after, .sm-link:focus-visible .sm-link__text::after { transform:scaleX(1); }
.sm-link__arrow { display:inline-flex; align-items:center; color:var(--sg-color-primary); }
.sm-link__arrow svg { display:block; width:16px; height:16px; }
.sm-link:focus-visible { outline:2px solid var(--sg-color-primary); outline-offset:4px; }
@media (prefers-reduced-motion: reduce) {
  .sm-link__text::after { transition:none; transform:scaleX(1); }
}

/* Note under the button — terms or reassurance ("No card required",
   "Starts 12 October"). The stack exists only when a note is typed: the button
   over the note, centred on each other, the note free to be wider than the
   button, and both in flow — so nothing overlaps and the row is as tall as it
   really is. The stack shrink-wraps, so it sits wherever the element already
   puts the button. Quiet by design: the button is already the loud thing. */
.sm-btn-stack { display:inline-flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; }
/* A full-width button needs the stack to be full width too, or it would shrink
   to the note. Where :has() is unsupported the button sizes to the note instead. */
.sm-btn-stack:has(.btn--full) { display:flex; }
.sm-btn-stack .sm-btn-note { margin:0; max-width:100%; text-align:center; white-space:nowrap; color:var(--sg-color-secondary); }
.background-dark .sm-btn-stack .sm-btn-note { color:color-mix(in srgb, var(--sm-page) 70%, transparent); }
@media (max-width:767px) { .sm-btn-stack .sm-btn-note { white-space:normal; } }

/* Action rows: the primary button and the text link share one centre line. Kajabi's .btn carries an
   8px top margin and the text link keeps 5px under its text for the underline; both pulled the pair
   apart. Balance the underline room with the same room above and drop the button's stray margin. */
.section[class*="sm-"] [class*="__actions"] .btn, .section[class*="sm-"] .sm-btn-stack .btn { margin-top:0; }
.section[class*="sm-"] [class*="__actions"] { padding-top:8px; } /* keeps the spacing the button's margin used to give */
.sm-link__text { padding-top:5px; }
/* A row with a note aligns on the text baseline instead of the middle, so the link sits level with
   the button's label rather than with the middle of the button-plus-note stack. The row still wraps
   when the two do not fit side by side. */
.section[class*="sm-"] [class*="__actions"]:has(> .sm-btn-stack > .sm-btn-note) { align-items:baseline; }


/* =========================================================
   SM LAYOUT
   One text edge per breakpoint, the same as the header and
   Kajabi's own grid: 40px inside the container on desktop and
   tablet, 20px on phones (container 10 + column 10). Kajabi
   insets the columns of a stacked row (row-for-desktop-and-
   wide-tablet-only) by 10px on tablets; ours sit on the edge.
   Elements with their own containers add their 10px on phones
   only, in their own blocks.
========================================================= */

@media (min-width:768px) and (max-width:1022px) {
  .section[class*="sm-"] .row-for-desktop-and-wide-tablet-only > [class*="col-"] { padding-left:0; padding-right:0; }
}


/* =========================================================
   COURSE CARDS  (section: Course Cards)
   Type: h6 eyebrow · h2 · body intro · .sm-label category and
   photo caption · h3 title · .sm-small text. Text colour: theme
   light/dark scheme. Only layout, spacing and surfaces live here.
========================================================= */

.sm-cc .sm-cc__head { text-align:center; max-width:760px; margin:0 auto; }
.sm-cc .sm-cc__eyebrow { margin:0 0 22px; }
.sm-cc .sm-cc__eyebrow-rule { display:block; width:var(--sg-rule-width); height:1px; margin:18px auto 18px; background:var(--sg-color-primary); }
.sm-cc .sm-cc__heading { margin:0 0 18px; }
.sm-cc .sm-cc__intro { margin:0; }

.sm-cc .sm-cc__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:100%; padding-top:4px; margin:42px 0 0; overflow:visible; }
.sm-cc--cols-2 .sm-cc__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sm-cc--cols-4 .sm-cc__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

.sm-cc .sm-cc__card { position:relative; display:block; min-width:0; text-decoration:none !important; color:inherit; }
.sm-cc .sm-cc__card:hover, .sm-cc .sm-cc__card:focus { text-decoration:none !important; }

.sm-cc .sm-cc__inner { height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--sm-frame); border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); isolation:isolate; transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), border-color var(--sm-dur) var(--sm-ease); }
.sm-cc--card-light .sm-cc__inner, .sm-cc--card-light .sm-cc__body { background:var(--sm-card-light); }
.sm-cc--card-dark  .sm-cc__inner, .sm-cc--card-dark  .sm-cc__body { background:var(--sm-card-dark); }

.sm-cc .sm-cc__media { position:relative; overflow:hidden; }
.sm-cc .sm-cc__image { display:block; width:100%; max-width:100%; aspect-ratio:1.7/1; object-fit:cover; object-position:center; transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-cc .sm-cc__image--empty { background:var(--sm-placeholder-light); }
.sm-cc .sm-cc__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb, var(--sg-surface-deep) 52%, transparent) 0%,color-mix(in srgb, var(--sg-surface-deep) 34%, transparent) 26%,color-mix(in srgb, var(--sg-surface-deep) 10%, transparent) 48%,transparent 66%); }
/* sits on a photograph, so it is the one label with a fixed colour */
.sm-cc .sm-cc__overlay { position:absolute; top:22px; left:22px; margin:0; color:var(--sm-on-dark) !important; }
.sm-cc .sm-cc__rule { display:block; width:42px; height:1px; margin-top:13px; background:var(--sg-color-primary); }

.sm-cc .sm-cc__body { flex:1; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:24px 24px 26px; text-align:left; }
.sm-cc .sm-cc__copy { flex:1; min-width:0; }
.sm-cc .sm-cc__cat { margin:0 0 9px; }
.sm-cc .sm-cc__title { width:100%; margin:0 0 9px; }
.sm-cc .sm-cc__text { width:100%; margin:0; }

.sm-cc .sm-cc__more { margin:auto 0 0; display:inline-flex; align-items:center; gap:10px; padding-top:18px; padding-bottom:6px; border-bottom:1px solid color-mix(in srgb,var(--sg-color-primary) 62%,transparent); align-self:flex-start; }
.sm-cc .sm-cc__arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease), color var(--sm-dur) var(--sm-ease); }
.sm-cc .sm-cc__arrow svg { display:block; width:16px; height:16px; }

.sm-cc .sm-cc__cta { margin-top:46px; text-align:center; }
.sm-cc .sm-cc__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-cc .sm-cc__btn-arrow svg { display:block; }

@media (hover:hover) {
  .sm-cc .sm-cc__card:hover .sm-cc__inner, .sm-cc .sm-cc__card:focus-visible .sm-cc__inner { transform:translate3d(0,-3px,0); border-color:var(--sm-frame-hover); box-shadow:var(--sm-card-shadow-hover); }
  .sm-cc .sm-cc__card:hover .sm-cc__image { transform:scale(1.03) translateZ(0); transition-duration:var(--sm-dur-img); }
  .sm-cc .sm-cc__card:hover .sm-cc__more { border-bottom-color:var(--sg-color-primary); }
  .sm-cc .sm-cc__card:hover .sm-cc__arrow { transform:translateX(4px); }
  .sm-cc .sm-cc__btn:hover .sm-cc__btn-arrow { transform:translateX(4px); }
}
.sm-cc .sm-cc__card:focus-visible { outline:2px solid var(--sg-color-primary); outline-offset:4px; }

/* below the grid's breakpoint: the cards scroll sideways in one row, edge to edge, snapping to the text edge (40 on tablets, 20 on phones) —
   two and a bit in view on tablets, one and a bit on phones; 4px of headroom for the hover lift */
@media (max-width:1022px) {
  .sm-cc .sm-cc__grid, .sm-cc--cols-2 .sm-cc__grid, .sm-cc--cols-4 .sm-cc__grid { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc(50% - 32px); gap:16px; width:auto; margin:42px -40px 0; padding:4px 40px 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:40px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-cc .sm-cc__grid::-webkit-scrollbar { display:none; }
  .sm-cc .sm-cc__card { scroll-snap-align:start; }
}
/* phones: Kajabi's columns are inset 10px, so the head and button follow the same text edge */
@media (max-width:767px) {
  .sm-cc .sm-cc__head, .sm-cc .sm-cc__cta { padding-left:10px; padding-right:10px; }
  .sm-cc .sm-cc__grid, .sm-cc--cols-2 .sm-cc__grid, .sm-cc--cols-4 .sm-cc__grid { grid-auto-columns:82%; gap:12px; margin:22px -10px 0; padding:4px 20px 6px; scroll-padding-left:20px; }
  .sm-cc .sm-cc__image { aspect-ratio:1.55/1; }
  .sm-cc .sm-cc__body { padding:20px 20px 24px; gap:14px; }
    .sm-cc .sm-cc__cta { margin-top:30px; }
  .sm-cc .sm-cc__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-cc .sm-cc__inner, .sm-cc .sm-cc__image, .sm-cc .sm-cc__more, .sm-cc .sm-cc__arrow, .sm-cc .sm-cc__btn-arrow { transition:none !important; }
  .sm-cc .sm-cc__card:hover .sm-cc__inner { transform:none; }
  .sm-cc .sm-cc__card:hover .sm-cc__image { transform:translateZ(0); }
}


/* =========================================================
   EVENT CARDS  (section: Event Cards)
   Type: h6 eyebrow · h2 · body intro · .sm-label date, location
   and "View event" · h3 title · body type · .sm-small text.
========================================================= */

.sm-ev .sm-ev__head { max-width:900px; margin:0 auto 44px; text-align:center; }
.sm-ev .sm-ev__eyebrow { margin:0 0 22px; }
.sm-ev .sm-ev__eyebrow-rule { display:block; width:var(--sg-rule-width); height:1px; margin:18px auto 18px; background:var(--sg-color-primary); }
.sm-ev .sm-ev__heading { margin:0 0 18px; }
.sm-ev .sm-ev__intro { max-width:760px; margin:0 auto; }

.sm-ev .sm-ev__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:100%; padding-top:4px; overflow:visible; }
.sm-ev--cols-2 .sm-ev__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sm-ev--cols-4 .sm-ev__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

.sm-ev .sm-ev__card { position:relative; display:block; min-width:0; text-decoration:none !important; color:inherit; }
.sm-ev .sm-ev__card:hover, .sm-ev .sm-ev__card:focus { text-decoration:none !important; }

.sm-ev .sm-ev__inner { height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--sm-frame); border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); isolation:isolate; transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), border-color var(--sm-dur) var(--sm-ease); }
.sm-ev--card-dark  .sm-ev__inner, .sm-ev--card-dark  .sm-ev__body { background:var(--sg-surface-dark); }
.sm-ev--card-light .sm-ev__inner, .sm-ev--card-light .sm-ev__body { background:var(--sg-card-light); }

.sm-ev .sm-ev__media { position:relative; overflow:hidden; background:var(--sm-section-dark); }
.sm-ev .sm-ev__image { display:block; width:100%; max-width:100%; aspect-ratio:1.7/1; object-fit:cover; object-position:center; transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-ev .sm-ev__image--empty { background:var(--sm-placeholder-dark); }
.sm-ev .sm-ev__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 45%,color-mix(in srgb, var(--sg-surface-deep) 10%, transparent) 68%,color-mix(in srgb, var(--sg-surface-deep) 34%, transparent) 100%); }

.sm-ev .sm-ev__body { flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:24px 24px 26px; text-align:left; }
.sm-ev .sm-ev__date { margin:0 0 14px; }

/* Date badge on the photo (Date position → On the photo). Day over month on a
   panel of the deep surface at 78%, so the photograph still reads through it.
   Sizes come from the Style Guide: the day takes the h4 size, the month is the
   label role and only its colour is set here. */
.sm-ev .sm-ev__chip { position:absolute; top:14px; left:14px; z-index:2; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 13px 10px; border-radius:var(--sm-radius);
  background:color-mix(in srgb, var(--sm-section-dark) 78%, transparent); }
.sm-ev .sm-ev__chip-day { font-family:var(--sm-font-mono); font-weight:600; font-size:var(--sg-fs-h4); line-height:1; color:var(--sm-page); }
.sm-ev .sm-ev__chip-mon { color:color-mix(in srgb, var(--sm-page) 78%, transparent); }
.sm-ev .sm-ev__title { width:100%; margin:0; }
.sm-ev .sm-ev__type { margin:5px 0 18px; opacity:.8; }
.sm-ev .sm-ev__loc { display:flex; align-items:center; gap:9px; margin:0 0 16px; opacity:.86; }
.sm-ev .sm-ev__pin { width:14px; height:14px; flex:0 0 14px; fill:none; stroke:var(--sg-color-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sm-ev .sm-ev__text { width:100%; margin:0 0 24px; opacity:.74; }

.sm-ev .sm-ev__cta { margin:auto 0 0; display:inline-flex; align-items:center; gap:10px; padding-top:19px; padding-bottom:6px; border-bottom:1px solid color-mix(in srgb,var(--sg-color-primary) 62%,transparent); transition:border-color var(--sm-dur) var(--sm-ease); }
.sm-ev .sm-ev__arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-ev .sm-ev__arrow svg { display:block; width:16px; height:16px; }

.sm-ev .sm-ev__foot { margin-top:46px; text-align:center; }
.sm-ev .sm-ev__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-ev .sm-ev__btn-arrow svg { display:block; }

@media (hover:hover) {
  .sm-ev .sm-ev__card:hover .sm-ev__inner, .sm-ev .sm-ev__card:focus-visible .sm-ev__inner { transform:translate3d(0,-3px,0); border-color:var(--sm-frame-hover); box-shadow:var(--sm-card-shadow-hover); }
  .sm-ev .sm-ev__card:hover .sm-ev__image { transform:scale(1.03) translateZ(0); transition-duration:var(--sm-dur-img); }
  .sm-ev .sm-ev__card:hover .sm-ev__cta { border-bottom-color:var(--sg-color-primary); }
  .sm-ev .sm-ev__card:hover .sm-ev__arrow { transform:translateX(4px); }
  .sm-ev .sm-ev__btn:hover .sm-ev__btn-arrow { transform:translateX(4px); }
}
.sm-ev .sm-ev__card:focus-visible { outline:2px solid var(--sg-color-primary); outline-offset:4px; }

/* below the grid's breakpoint: the cards scroll sideways in one row, edge to edge, snapping to the text edge (40 on tablets, 20 on phones) —
   two and a bit in view on tablets, one and a bit on phones; 4px of headroom for the hover lift */
@media (max-width:1022px) {
  .sm-ev .sm-ev__grid, .sm-ev--cols-2 .sm-ev__grid, .sm-ev--cols-4 .sm-ev__grid { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc(50% - 32px); gap:16px; width:auto; margin:0 -40px; padding:4px 40px 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:40px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-ev .sm-ev__grid::-webkit-scrollbar { display:none; }
  .sm-ev .sm-ev__card { scroll-snap-align:start; }
}
/* phones: Kajabi's columns are inset 10px, so the head and button follow the same text edge */
@media (max-width:767px) {
  .sm-ev .sm-ev__head, .sm-ev .sm-ev__foot { padding-left:10px; padding-right:10px; }
  .sm-ev .sm-ev__head { margin-bottom:28px; }
  .sm-ev .sm-ev__intro { margin-top:0; }
  .sm-ev .sm-ev__grid, .sm-ev--cols-2 .sm-ev__grid, .sm-ev--cols-4 .sm-ev__grid { grid-auto-columns:82%; gap:12px; margin:0 -10px; padding:4px 20px 6px; scroll-padding-left:20px; }
  .sm-ev .sm-ev__image { aspect-ratio:1.55/1; }
  .sm-ev .sm-ev__body { padding:20px 20px 24px; }
  .sm-ev .sm-ev__foot { margin-top:32px; }
  .sm-ev .sm-ev__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-ev .sm-ev__inner, .sm-ev .sm-ev__image, .sm-ev .sm-ev__arrow, .sm-ev .sm-ev__btn-arrow { transition:none !important; }
  .sm-ev .sm-ev__card:hover .sm-ev__inner { transform:none; }
  .sm-ev .sm-ev__card:hover .sm-ev__image { transform:translateZ(0); }
}


/* =========================================================
   FEATURE SPLIT  (section: Feature Split)
   Layout: Kajabi's own 12-column grid (.row / .col-N). "Content
   width" is a sidebar setting; the image takes the remaining
   columns. Full-bleed photo: the whole section's backdrop, with a
   fade anchored to the content column's edge (solid section colour
   over the text side, then the fade, then the photo) — so it never
   crosses the text at any screen width. Fade length is a setting.
   Image focus is a percentage pair from the sidebar (scoped
   object-position in the section). Optional second row: pull quote
   + name under the photo, bio + signature + caption under the
   content, on the same column split — so the divider lands under
   the photo's edge. Type: h6 eyebrow · h2 · body · .sm-quote ·
   .sm-signature · .sm-label feature labels, photo captions, name
   and caption · .sm-small feature text and bio. Text colour: theme light/dark
   scheme. Eyebrow + .sm-rule follow the site standard.
========================================================= */

/* the theme's container geometry, used for the bleed maths (defaults from styles.css;
   each bleed section overrides the first two from its own Section padding) */
:root{ --sm-container:1340px; --sm-container-pad:40px; --sm-gutter:15px; }

.sm-fs .sm-fs__media { position:relative; min-width:0; }
.sm-fs--img-right .sm-fs__media { order:2; }
.sm-fs .sm-fs__frame { position:relative; height:100%; min-height:440px; overflow:hidden; border-radius:var(--sm-radius); background:var(--sm-placeholder-dark); }
.sm-fs .sm-fs__image { display:block; width:100%; height:100%; max-width:100%; object-fit:cover; object-position:center; }
.sm-fs .sm-fs__image--empty { background:var(--sm-placeholder-light); }
.sm-fs .sm-fs__scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb, var(--sg-surface-deep) 34%, transparent) 0%,transparent 24%,transparent 62%,color-mix(in srgb, var(--sg-surface-deep) 42%, transparent) 100%); }

/* overlay captions sit on the photo, so white is the one fixed colour */
.sm-fs .sm-fs__tag { position:absolute; margin:0; color:var(--sm-on-dark) !important; }
.sm-fs .sm-fs__tag--tr { top:26px; right:26px; text-align:right; }
.sm-fs .sm-fs__tag--bl { bottom:26px; left:26px; text-align:left; }
.sm-fs .sm-fs__tag-rule { display:block; width:38px; height:1px; margin-top:12px; background:var(--sg-color-primary); }
.sm-fs .sm-fs__tag--tr .sm-fs__tag-rule { margin-left:auto; }
/* captions mirror when the photo is on the right */
.sm-fs--img-right .sm-fs__tag--tr { right:auto; left:26px; text-align:left; }
.sm-fs--img-right .sm-fs__tag--tr .sm-fs__tag-rule { margin-left:0; }
.sm-fs--img-right .sm-fs__tag--bl { left:auto; right:26px; text-align:right; }
.sm-fs--img-right .sm-fs__tag--bl .sm-fs__tag-rule { margin-left:auto; }

/* full-bleed: the photo is the whole section's backdrop (so a landscape shot crops like a hero image);
   the fade is a mask anchored to the content column's edge — solid section colour up to the column,
   then --sm-fs-fade of gradient, then the photo. --sm-fs-split is the column edge on the theme's grid. */
.sm-fs--bleed .sizer { position:relative; }
.sm-fs--bleed .sm-fs__bg { position:absolute; inset:0; overflow:hidden; pointer-events:none;
  --sm-fs-split: calc(50% - min(var(--sm-container) / 2, 50%) + var(--sm-container-pad) - var(--sm-gutter) + (min(var(--sm-container), 100%) - 2 * var(--sm-container-pad) + 2 * var(--sm-gutter)) * var(--sm-fs-content-cols, 6) / 12);
  --sm-fs-fade: 320px; }
.sm-fs--bleed .sm-fs__bg-img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sm-fs--bleed .sm-fs__fade { position:absolute; inset:0; }
.sm-fs--bleed .container { position:relative; }
.sm-fs--bleed .sm-fs__frame { min-height:0; border-radius:0; overflow:visible; background:transparent; }
.sm-fs--bleed .sm-fs__image, .sm-fs--bleed .sm-fs__scrim { display:none; }

.sm-fs .sm-fs__content { align-self:center; min-width:0; }
.sm-fs .sm-fs__eyebrow { margin:0 0 22px; }
.sm-fs .sm-fs__heading { margin:0 0 18px; }
.sm-fs .sm-fs__body { margin:0 0 6px; }
.sm-fs .sm-fs__body p { margin:0 0 16px; }
.sm-fs .sm-fs__body p:last-child { margin-bottom:0; }

/* icon features: two by two inside the split's copy column at every width (four cells in a
   430–585px column crushed every label to two lines), centred in their cells, hairline dividers.
   Icons are the theme's own line drawings in the primary colour (sm_icon), or an uploaded image. */
.sm-fs .sm-fs__features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0; margin:36px 0 40px; }
.sm-fs .sm-fs__feature { padding:4px 14px 8px; text-align:center; border-left:1px solid var(--sm-frame); }
.sm-fs .sm-fs__feature:nth-child(2n+1) { border-left:none; }
.sm-fs .sm-fs__icon { display:block; width:56px; height:56px; margin:0 auto 18px; object-fit:contain; object-position:center; color:var(--sg-color-primary); }
.sm-fs .sm-fs__content .sm-fs__label { margin:0 0 10px; color:var(--sg-color-heading); }
.sm-fs.background-dark .sm-fs__label { color:inherit; }
.sm-fs .sm-fs__ftext { margin:0; }

.sm-fs .sm-fs__actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px 34px; }
.sm-fs .sm-fs__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-fs .sm-fs__btn-arrow svg { display:block; }
.sm-fs .sm-fs__content .sm-fs__quote { margin:0; max-width:220px; color:var(--sg-color-secondary); }
.sm-fs.background-dark .sm-fs__quote { color:color-mix(in srgb, var(--sm-page) 70%, transparent); }
.sm-fs .sm-fs__quote-rule { display:block; width:44px; height:1px; margin-top:12px; background:var(--sg-color-primary); }

/* second row: quote + name under the photo, bio + signature + caption under the content.
   Its own band below the section padding; colour from the sidebar (defaults to the section colour). */
.sm-fs .sm-fs__row2 { position:relative; padding:56px 0 64px; }
.sm-fs .sm-fs__row2-grid { align-items:stretch; }
.sm-fs .sm-fs__r2-quote, .sm-fs .sm-fs__r2-bio { min-width:0; }
.sm-fs .sm-fs__r2-quote .sm-rule { margin:30px 0 18px; }
.sm-fs .sm-fs__r2-name { margin:0; }
.sm-fs .sm-fs__r2-text p { margin:0 0 16px; }
.sm-fs .sm-fs__r2-text p:last-child { margin-bottom:0; }
.sm-fs .sm-fs__r2-foot { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px 32px; margin-top:28px; }
.sm-fs .sm-fs__r2-sig { flex:0 1 auto; min-width:0; padding-bottom:6px; }
/* caption: the photo-caption recipe on the light band — text colour like a heading (Style Guide heading
   colour, white on a dark section; Caption colour in the sidebar overrides), short gold rule under it,
   a left-aligned block at the right edge */
.sm-fs .sm-fs__r2-caption { margin:0; margin-left:auto; text-align:left; color:var(--sg-color-heading); }
section.background-dark .sm-fs__r2-caption { color:var(--sm-on-dark); }

@media (hover:hover) {
  .sm-fs .sm-fs__btn:hover .sm-fs__btn-arrow { transform:translateX(4px); }
}

/* desktop and wide tablet (the grid's own breakpoint): breathing room on the side facing the image.
   Selectors carry the grid class too, so they outrank Kajabi's own column-padding rule. */
@media (min-width:1023px) {
  .sm-fs.sm-fs--img-left  .sm-fs__grid .sm-fs__content { padding-left:45px; }
  .sm-fs.sm-fs--img-right .sm-fs__grid .sm-fs__content { padding-right:45px; }
  /* row 2: the divider sits on the column facing the photo, one gutter beyond the photo's edge */
  .sm-fs.sm-fs--img-left  .sm-fs__row2-grid .sm-fs__r2-bio   { padding-left:45px; border-left:1px solid var(--sm-frame); }
  .sm-fs.sm-fs--img-left  .sm-fs__row2-grid .sm-fs__r2-quote { padding-right:45px; }
  .sm-fs.sm-fs--img-right .sm-fs__row2-grid .sm-fs__r2-quote { order:2; padding-left:45px; border-left:1px solid var(--sm-frame); }
  .sm-fs.sm-fs--img-right .sm-fs__row2-grid .sm-fs__r2-bio   { padding-right:45px; }
}

/* below the grid's breakpoint the columns stack: framed photo above the content, bleed becomes a framed photo */
@media (max-width:1022px) {
  .sm-fs--img-right .sm-fs__media { order:0; }
  .sm-fs .sm-fs__frame { height:auto; min-height:0; aspect-ratio:1.5/1; }
  .sm-fs--bleed .sm-fs__bg { display:none; }
  .sm-fs--bleed .sm-fs__frame { border-radius:var(--sm-radius); overflow:hidden; background:var(--sm-placeholder-dark); }
  .sm-fs--bleed .sm-fs__image, .sm-fs--bleed .sm-fs__scrim { display:block; }
  /* row 2 stacks: quote, then the bio under a hairline */
  .sm-fs .sm-fs__row2 { padding:40px 0 36px; }
  .sm-fs .sm-fs__r2-bio { border-top:1px solid var(--sm-frame); padding-top:26px; }
  .sm-fs .sm-fs__r2-quote .sm-rule { margin:22px 0 14px; }
}
@media (max-width:767px) {
  .sm-fs .sm-fs__features { grid-template-columns:1fr; gap:0; }
  .sm-fs .sm-fs__feature, .sm-fs .sm-fs__feature:nth-child(2n+1) { padding:22px 0 0; margin-top:22px; border-left:none; border-top:1px solid var(--sm-frame); }
  .sm-fs .sm-fs__feature:first-child { margin-top:0; padding-top:0; border-top:none; }
  .sm-fs .sm-fs__icon { margin-bottom:14px; }
  .sm-fs .sm-fs__actions { gap:20px; }
  .sm-fs .sm-fs__btn { width:100%; justify-content:center; }
  .sm-fs .sm-fs__r2-foot { margin-top:22px; gap:18px 24px; }
  /* label-only features (no text line) stay two-up on phones */
  .sm-fs.sm-fs--labels-only .sm-fs__features { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 0; }
  .sm-fs.sm-fs--labels-only .sm-fs__feature, .sm-fs.sm-fs--labels-only .sm-fs__feature:first-child { padding:4px 10px 6px; margin-top:0; border-top:none; border-left:1px solid var(--sm-frame); }
  .sm-fs.sm-fs--labels-only .sm-fs__feature:nth-child(2n+1) { border-left:none; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-fs .sm-fs__btn-arrow { transition:none !important; }
}

/* feature list (Layout → Feature style: List): icon beside a bold title and a line of text, no dividers.
   Same grid and margins as the tiles; the title is the small bold recipe (cream on dark, heading colour
   on light) and the text line the secondary small recipe (78% cream on dark, body colour on light). */
.sm-fs--feat-list .sm-fs__features { gap:26px 34px; }
.sm-fs--feat-list .sm-fs__feature, .sm-fs--feat-list .sm-fs__feature:first-child { display:flex; align-items:flex-start; gap:16px; padding:0; margin:0; text-align:left; border:0; }
.sm-fs--feat-list .sm-fs__icon { flex:0 0 auto; margin:0; }
.sm-fs--feat-list .sm-fs__fbody { flex:1 1 auto; min-width:0; }
.sm-fs .sm-fs__ftitle { margin:1px 0 5px; color:var(--sg-color-heading); }
.sm-fs.background-dark .sm-fs__ftitle { color:var(--sm-page); }
.sm-fs.background-dark .sm-fs__ftext { color:color-mix(in srgb, var(--sm-page) 78%, transparent); }
@media (max-width:1022px) {
  .sm-fs--feat-list .sm-fs__features { gap:26px 34px; }
}
@media (max-width:767px) {
  .sm-fs--feat-list .sm-fs__features { grid-template-columns:1fr; gap:26px 0; }
  .sm-fs--feat-list .sm-fs__feature, .sm-fs--feat-list .sm-fs__feature:nth-child(2n+1), .sm-fs--feat-list .sm-fs__feature:first-child { padding:0; margin:0; border:0; }
  .sm-fs--feat-list .sm-fs__icon { margin:0; }
}


/* =========================================================
   FAQ  (section: FAQ)
   Layout: Kajabi's own 12-column grid — the intro column beside
   the accordion; "Intro width" is a sidebar setting. The accordion
   is the site's existing .sm-faq markup, driven by the script in
   Settings → Custom JS (one open at a time, smooth height).
   Type: h6 eyebrow · h2 · body intro · .sm-small questions (bold)
   and answers. Colour: the section's text colour (cream on dark,
   heading/body on light); the Style Guide primary for the rule,
   the plus/minus strokes, the dividers and the focus ring.
========================================================= */

.sm-faq .sm-faq__intro { min-width:0; }
.sm-faq .sm-faq__body { min-width:0; }
.sm-faq .sm-faq__eyebrow { margin:0 0 22px; }
.sm-faq .sm-faq__heading { margin:0 0 18px; }
.sm-faq .sm-faq__text { margin:0 0 26px; }
.sm-faq .sm-faq__text p { margin:0 0 16px; }
.sm-faq .sm-faq__text p:last-child { margin-bottom:0; }
.sm-faq .sm-faq__actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.sm-faq .sm-faq__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-faq .sm-faq__btn-arrow svg { display:block; }

/* the accordion — the original recipe, colours from tokens so it works on light and dark sections */
.sm-faq__list { width:100%; }
.sm-faq__item { width:100%; border-bottom:1px solid var(--sm-frame); }
.sm-faq__question { appearance:none; -webkit-appearance:none; width:100%; margin:0; padding:20px 2px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:0; border-radius:0; background:transparent; color:var(--sg-color-heading); font:inherit; text-align:left; cursor:pointer; transition:color .2s ease; }
.background-dark .sm-faq__question { color:var(--sm-page); }
.background-dark .sm-faq__question:hover { color:var(--sm-on-dark); }
.sm-faq__question:focus { outline:none; }
.sm-faq__question:focus-visible { outline:1px solid var(--sg-color-primary); outline-offset:4px; }

/* plus becomes minus */
.sm-faq__icon { position:relative; display:block; flex:0 0 18px; width:18px; height:18px; }
.sm-faq__icon::before { content:""; position:absolute; left:1px; top:8px; width:16px; height:1px; background:var(--sg-color-primary); }
.sm-faq__icon::after { content:""; position:absolute; left:8px; top:1px; width:1px; height:16px; background:var(--sg-color-primary); transition:opacity .22s ease, transform .22s ease; }
.sm-faq__item.is-open .sm-faq__icon::after { opacity:0; transform:rotate(90deg); }

/* collapsible panel */
.sm-faq__panel { height:0; overflow:hidden; transition:height .32s var(--sm-ease); }
.sm-faq__answer { padding:0 48px 22px 2px; opacity:0; transform:translateY(-6px); transition:opacity .22s ease .04s, transform .22s ease .04s; color:var(--sg-color-body); }
.background-dark .sm-faq__answer { color:color-mix(in srgb, var(--sm-page) 78%, transparent); }
.sm-faq__item.is-open .sm-faq__answer { opacity:1; transform:translateY(0); }
.sm-faq__answer p { margin:0 0 12px; }
.sm-faq__answer p:last-child { margin-bottom:0; }

@media (hover:hover) {
  .sm-faq .sm-faq__btn:hover .sm-faq__btn-arrow { transform:translateX(4px); }
}
@media (max-width:767px) {
  .sm-faq__question { padding:18px 0; }
  .sm-faq__answer { padding:0 32px 20px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-faq__panel, .sm-faq__answer, .sm-faq__icon::after, .sm-faq .sm-faq__btn-arrow { transition:none !important; }
}


/* =========================================================
   STEPS  (section: Steps)
   Content beside a landscape photo (top-aligned, rounded), a
   row of numbered steps under both — each under its own gold
   rule — then a full-width gold rule and a credential strip:
   logo · vertical rule · line of text. Kajabi's 12-column grid
   for the top row and the strip; the steps are a grid on the
   same gutters, so every rule lines up with the column edges.
   Type: h6 eyebrow · h2 · body · .sm-label step numbers (gold)
   · h4 step titles · body step text and credential line.
   Colour: the section's text colour; Style Guide primary for
   every rule. Only layout, spacing and surfaces live here.
========================================================= */

.sm-steps .sm-steps__content, .sm-steps .sm-steps__media { min-width:0; }
.sm-steps--img-left .sm-steps__media { order:0; }
.sm-steps--img-left .sm-steps__content { order:1; }
.sm-steps .sm-steps__eyebrow { margin:0 0 22px; }
.sm-steps .sm-steps__heading { margin:0 0 18px; }
.sm-steps .sm-steps__body p { margin:0 0 16px; }
.sm-steps .sm-steps__body p:last-child { margin-bottom:0; }
.sm-steps .sm-steps__actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:30px; }
.sm-steps .sm-steps__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-steps .sm-steps__btn-arrow svg { display:block; }
/* photo: on desktop the frame stretches to the text column's height (never shorter than the photo itself)
   and the photo covers it, cropped around the focus point; stacked, it shows at its own proportions */
.sm-steps .sm-steps__media { display:flex; }
.sm-steps .sm-steps__frame { flex:1 1 auto; width:100%; min-width:0; min-height:0; overflow:hidden; border-radius:var(--sm-radius); background:var(--sm-placeholder-light); }
.sm-steps .sm-steps__image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sm-steps .sm-steps__image--empty { aspect-ratio:16/9; height:auto; }

/* numbered steps: a gold rule over each column, gutters match the grid.
   Margins are 15px less than the visual gap: the columns above carry the grid's own 15px padding. */
.sm-steps .sm-steps__steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin:37px 0 0; }
.sm-steps--steps-2 .sm-steps__steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sm-steps--steps-3 .sm-steps__steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sm-steps .sm-steps__step { min-width:0; padding-top:18px; border-top:1px solid var(--sm-frame); }
.sm-steps .sm-steps__num { margin:0 0 12px; color:var(--sg-color-heading); }
section.background-dark .sm-steps__num { color:var(--sm-on-dark); }
.sm-steps .sm-steps__title { margin:0 0 12px; }
.sm-steps .sm-steps__text { margin:0; }

/* credential strip under a full-width gold rule, on the same column edges */
.sm-steps .sm-steps__cred { margin-top:34px; padding-top:32px; border-top:1px solid var(--sm-frame); }
.sm-steps .sm-steps__cred-inner { display:flex; align-items:center; gap:28px; width:calc((100% + 30px) * var(--sm-steps-cred-cols, 8) / 12 - 30px); max-width:100%; }
.sm-steps .sm-steps__logo { display:block; flex:0 0 auto; width:130px; height:auto; }
.sm-steps .sm-steps__cred-rule { display:block; flex:0 0 auto; align-self:stretch; width:1px; min-height:56px; background:var(--sm-frame); }
.sm-steps .sm-steps__cred-text { flex:1 1 auto; min-width:0; }
.sm-steps .sm-steps__cred-text p { margin:0 0 8px; }
.sm-steps .sm-steps__cred-text p:last-child { margin-bottom:0; }

@media (hover:hover) {
  .sm-steps .sm-steps__btn:hover .sm-steps__btn-arrow { transform:translateX(4px); }
}
/* desktop and wide tablet: breathing room on the side facing the photo (as Feature Split) */
@media (min-width:1023px) {
  .sm-steps--img-right .sm-steps__content { padding-right:45px; }
  .sm-steps--img-left  .sm-steps__content { padding-left:45px; }
}
/* below the grid's breakpoint the columns stack: photo above the content, steps two-up, strip full width */
@media (max-width:1022px) {
  .sm-steps .sm-steps__media { order:0; margin-bottom:32px; }
  .sm-steps .sm-steps__frame { flex:none; height:auto; }
  .sm-steps .sm-steps__image { height:auto; aspect-ratio:auto 16/9; }
  .sm-steps .sm-steps__cred-inner { width:100%; }
  .sm-steps .sm-steps__content { order:1; }
  .sm-steps .sm-steps__steps, .sm-steps--steps-3 .sm-steps__steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin:29px 0 0; }
}
/* phones: Kajabi's columns are inset 10px — the steps and strip follow the same text edge */
@media (max-width:767px) {
  .sm-steps .sm-steps__steps, .sm-steps--steps-2 .sm-steps__steps, .sm-steps--steps-3 .sm-steps__steps { grid-template-columns:1fr; gap:26px; margin:25px 10px 0; }
  .sm-steps .sm-steps__cred { margin-left:10px; margin-right:10px; }
  .sm-steps .sm-steps__cred { margin-top:30px; padding-top:26px; }
  .sm-steps .sm-steps__cred-inner { flex-wrap:wrap; gap:18px 24px; }
  .sm-steps .sm-steps__cred-rule { display:none; }
  .sm-steps .sm-steps__cred-text { flex-basis:100%; }
  .sm-steps .sm-steps__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-steps .sm-steps__btn-arrow { transition:none !important; }
}


/* =========================================================
   CTA BANNER  (section: CTA Banner)
   A full-bleed photo (covering the section, cropped around a
   focus point, optional tint) behind a centred or left-aligned
   stack — eyebrow, heading, intro, button — and a proof row of
   icons with mono labels, gold hairlines between them.
   Type: h6 eyebrow · h2 · body intro · .sm-label icon labels.
   Colour: the section's text colour (light on a dark Background
   colour); Style Guide primary for the rule and hairlines.
   Only layout, spacing and surfaces live here.
========================================================= */

/* The photo and overlay cover the whole section box — including the 40px spacer the footer stylesheet
   adds after the last section on a page (main > div > div:last-child > .section::after) — so the footer's
   rounded corners sit over the photo when it pulls up, not over the page colour. */
.sm-cta { position:relative; }
.sm-cta .sizer { position:static; }
.sm-cta .sm-cta__bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sm-cta .sm-cta__bg-img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sm-cta .sm-cta__tint { position:absolute; inset:0; }
.sm-cta .container { position:relative; }

.sm-cta .sm-cta__copy { min-width:0; }
.sm-cta--centre .sm-cta__grid { justify-content:center; }
.sm-cta--centre .sm-cta__copy { text-align:center; }
.sm-cta--centre .sm-cta__copy .sm-rule { margin-left:auto; margin-right:auto; }
.sm-cta .sm-cta__eyebrow { margin:0 0 22px; }
.sm-cta .sm-cta__heading { margin:0 0 18px; }
.sm-cta .sm-cta__intro { margin:0 0 26px; }
.sm-cta .sm-cta__intro p { margin:0 0 16px; }
.sm-cta .sm-cta__intro p:last-child { margin-bottom:0; }
.sm-cta .sm-cta__actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.sm-cta--centre .sm-cta__actions { justify-content:center; }
.sm-cta .sm-cta__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-cta .sm-cta__btn-arrow svg { display:block; }

/* proof row: icons with labels, hairlines between, centred under the copy */
.sm-cta .sm-cta__proof { display:flex; align-items:center; justify-content:center; width:100%; max-width:620px; margin:42px auto 0; }
.sm-cta--left .sm-cta__proof { margin-left:0; justify-content:flex-start; }
.sm-cta .sm-cta__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.sm-cta .sm-cta__icon { display:block; width:var(--sm-cta-icon, 46px); height:var(--sm-cta-icon, 46px); object-fit:contain; object-position:center; margin:0 auto 12px;  color:var(--sg-color-primary); }
.sm-cta .sm-cta__label { margin:0; }
.sm-cta .sm-cta__divider { flex:0 0 1px; width:1px; height:58px; margin:0 24px; background:var(--sm-frame-dark); }

@media (hover:hover) {
  .sm-cta .sm-cta__btn:hover .sm-cta__btn-arrow { transform:translateX(4px); }
}
/* phones: Kajabi's columns are inset 10px — the proof row follows the same text edge */
@media (max-width:767px) {
  .sm-cta .sm-cta__proof { margin-top:34px; margin-left:10px; margin-right:10px; width:auto; }
  .sm-cta--centre .sm-cta__proof { margin-left:auto; margin-right:auto; max-width:calc(100% - 20px); }
  .sm-cta .sm-cta__icon { width:calc(var(--sm-cta-icon, 46px) * .87); height:calc(var(--sm-cta-icon, 46px) * .87); margin-bottom:10px; }
  .sm-cta .sm-cta__divider { height:50px; margin:0 10px; }
  .sm-cta .sm-cta__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-cta .sm-cta__btn-arrow { transition:none !important; }
}


/* =========================================================
   PHOTO CARDS  (section: Photo Cards)
   Eyebrow, heading and intro (left or centred) with an optional
   corner caption top-right — mono lines over a short gold rule —
   then a grid of photo cards: the photo under a gradient to the
   dark section colour, an icon, title, strapline and a "Learn more" link;
   the whole card is the link and lifts on hover. Optional button
   under the grid.
   Type: h6 eyebrow · h2 · body intro · .sm-label caption and
   card link · h4 card title · .sm-small strapline (bold).
   Colour: the section's text colour for the head. The cards sit
   on a photograph, so their colours are fixed whatever the
   section colour — cream title and link, Style Guide primary for
   the strapline, caption, rules and frame.
   Only layout, spacing and surfaces live here.
========================================================= */

.sm-pc .sm-pc__top { position:relative; }
.sm-pc .sm-pc__head { min-width:0; }
.sm-pc--left.sm-pc--caption .sm-pc__head { padding-right:200px; }
.sm-pc--centre .sm-pc__head { max-width:760px; margin:0 auto; text-align:center; }
.sm-pc--centre .sm-pc__head .sm-rule { margin-left:auto; margin-right:auto; }
.sm-pc .sm-pc__eyebrow { margin:0 0 22px; }
.sm-pc .sm-pc__heading { margin:0 0 18px; }
.sm-pc .sm-pc__intro p { margin:0 0 16px; }
.sm-pc .sm-pc__intro p:last-child { margin-bottom:0; }

/* corner caption: one line per phrase over a short gold rule, top-right of the head, 27px below the eyebrow's top.
   Text colour like a heading: Style Guide heading colour, white on a dark section. */
.sm-pc .sm-pc__caption { position:absolute; top:27px; right:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; color:var(--sg-color-heading); text-align:left; pointer-events:none; }
section.background-dark .sm-pc__caption { color:var(--sm-on-dark); }
.sm-pc .sm-pc__caption-rule { display:block; width:44px; height:1px; margin-top:14px; background:var(--sg-color-primary); }

/* grid: 4px of invisible headroom for the hover lift, so the cards sit 46px under the intro */
.sm-pc .sm-pc__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:100%; padding-top:4px; margin:42px 0 0; overflow:visible; }
.sm-pc--cols-2 .sm-pc__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sm-pc--cols-4 .sm-pc__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* card: a stable link box; the inner moves on hover. Three classes deep so it outranks Kajabi's link colour on dark sections.
   The copy sits in flow at the bottom of the inner, so a card keeps 1.7 : 1 but grows if its copy needs more (narrow desktops) */
.sm-pc .sm-pc__grid .sm-pc__card { position:relative; display:block; min-width:0; aspect-ratio:4/3; overflow:visible; border:0; color:var(--sm-page); text-decoration:none; }
.sm-pc .sm-pc__grid .sm-pc__card:hover, .sm-pc .sm-pc__grid .sm-pc__card:focus { color:var(--sm-page); text-decoration:none; }
.sm-pc .sm-pc__inner { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:100%; overflow:hidden; border:1px solid var(--sm-frame); border-radius:var(--sm-radius); background:var(--sm-section-dark); isolation:isolate; transform:translateZ(0); box-shadow:var(--sm-card-shadow); transition:transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), border-color var(--sm-dur) var(--sm-ease); }
.sm-pc .sm-pc__image { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.94) contrast(1.03) brightness(.97); transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-pc .sm-pc__image--empty { background:var(--sm-placeholder-dark); filter:none; }
/* the photo fades to the dark section colour from a third of the way down, so the copy always sits on a dark ground */
.sm-pc .sm-pc__overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--sm-section-dark) 10%, transparent) 39%, color-mix(in srgb, var(--sm-section-dark) 38%, transparent) 52%, color-mix(in srgb, var(--sm-section-dark) 70%, transparent) 64%, color-mix(in srgb, var(--sm-section-dark) 91%, transparent) 76%, color-mix(in srgb, var(--sm-section-dark) 98%, transparent) 87%, var(--sm-section-dark) 94%, var(--sm-section-dark) 100%); }
/* a faint dark-card wash across the photo */
.sm-pc .sm-pc__inner::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--sm-card-dark) 5%, transparent) 0%, transparent 54%, color-mix(in srgb, var(--sm-card-dark) 4%, transparent) 100%); }

.sm-pc .sm-pc__content { position:relative; z-index:3; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:18px 20px; }
.sm-pc .sm-pc__icon { display:block; flex:0 0 auto; width:var(--sm-pc-icon, 36px); height:var(--sm-pc-icon, 36px); object-fit:contain; object-position:center; margin:0 0 9px; }
.sm-pc .sm-pc__grid .sm-pc__title { width:100%; margin:0 0 4px; color:var(--sm-page); }
.sm-pc .sm-pc__grid .sm-pc__strap { width:100%; margin:0 0 10px; color:color-mix(in srgb, var(--sm-page) 82%, transparent); }
.sm-pc .sm-pc__link { display:inline-flex; align-items:center; gap:8px; padding-bottom:5px; border-bottom:1px solid color-mix(in srgb, var(--sg-color-primary) 62%, transparent); transition:border-color var(--sm-dur) var(--sm-ease); color:var(--sm-page); }
.sm-pc .sm-pc__arrow { display:inline-flex; align-items:center; color:var(--sg-color-primary); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-pc .sm-pc__arrow svg { display:block; width:16px; height:16px; }

.sm-pc .sm-pc__cta { margin-top:42px; }
.sm-pc--centre .sm-pc__cta { text-align:center; }
.sm-pc .sm-pc__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-pc .sm-pc__btn-arrow svg { display:block; }

@media (hover:hover) {
  .sm-pc .sm-pc__card:hover .sm-pc__inner, .sm-pc .sm-pc__card:focus-visible .sm-pc__inner { transform:translate3d(0,-3px,0); box-shadow:var(--sm-card-shadow-hover); }
  .sm-pc .sm-pc__card:hover .sm-pc__inner, .sm-pc .sm-pc__card:focus-visible .sm-pc__inner { border-color:var(--sm-frame-hover); }
  .sm-pc .sm-pc__card:hover .sm-pc__image { transform:scale(1.03) translateZ(0); transition-duration:var(--sm-dur-img); }
  .sm-pc .sm-pc__card:hover .sm-pc__link { border-bottom-color:var(--sg-color-primary); }
  .sm-pc .sm-pc__card:hover .sm-pc__arrow { transform:translateX(4px); }
  .sm-pc .sm-pc__btn:hover .sm-pc__btn-arrow { transform:translateX(4px); }
}
.sm-pc .sm-pc__grid .sm-pc__card:focus-visible { outline:2px solid var(--sg-color-primary); outline-offset:4px; }

/* below the grid's breakpoint: the caption goes; the cards scroll sideways in one row, edge to edge, snapping to the text edge (40 on tablets, 20 on phones) —
   two and a bit in view on tablets, one and a bit on phones; 4px of headroom for the hover lift */
@media (max-width:1022px) {
  .sm-pc--left.sm-pc--caption .sm-pc__head { padding-right:0; }
  .sm-pc .sm-pc__caption { display:none; }
  .sm-pc .sm-pc__grid, .sm-pc--cols-2 .sm-pc__grid, .sm-pc--cols-4 .sm-pc__grid { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc(50% - 32px); gap:16px; width:auto; margin:42px -40px 0; padding:4px 40px 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:40px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-pc .sm-pc__grid::-webkit-scrollbar { display:none; }
  .sm-pc .sm-pc__grid .sm-pc__card { scroll-snap-align:start; }
}
/* phones: Kajabi's columns are inset 10px, so the head and button follow the same text edge */
@media (max-width:767px) {
  .sm-pc .sm-pc__head, .sm-pc--left.sm-pc--caption .sm-pc__head, .sm-pc .sm-pc__cta { padding-left:10px; padding-right:10px; }
  .sm-pc .sm-pc__grid, .sm-pc--cols-2 .sm-pc__grid, .sm-pc--cols-4 .sm-pc__grid { grid-auto-columns:82%; gap:12px; margin:22px -10px 0; padding:4px 20px 6px; scroll-padding-left:20px; }
  .sm-pc .sm-pc__grid .sm-pc__card { aspect-ratio:4/3; }
  .sm-pc .sm-pc__icon { width:calc(var(--sm-pc-icon, 36px) * .94); height:calc(var(--sm-pc-icon, 36px) * .94); margin-bottom:8px; }
  .sm-pc .sm-pc__grid .sm-pc__strap { margin-bottom:9px; }
  .sm-pc .sm-pc__cta { margin-top:30px; }
  .sm-pc .sm-pc__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-pc .sm-pc__inner, .sm-pc .sm-pc__image, .sm-pc .sm-pc__arrow, .sm-pc .sm-pc__btn-arrow { transition:none !important; }
  .sm-pc .sm-pc__card:hover .sm-pc__inner { transform:none; }
  .sm-pc .sm-pc__card:hover .sm-pc__image { transform:translateZ(0); }
}


/* =========================================================
   HERO  (section: Hero)
   A full-bleed photo (cropped around a focus point) under the
   site's cinematic grading — shaded on the copy side, fading
   to the dark section colour behind the cards — with the copy on the
   left: eyebrow, gold rule, heading, intro, button. A side
   caption mid-right (mono lines over a short gold rule) and a
   row of route cards along the bottom: photo under a gradient,
   icon, title, strapline, a line of text and a link; the whole
   card is the link and lifts on hover. Phones scroll the cards
   sideways.
   Type: h6 eyebrow · h1 · body intro · .sm-label caption and
   card links · h4 card titles · .sm-small strapline (bold) and
   card text.
   Colour: the section's text colour for the copy. The cards sit
   on a photograph, so their colours are fixed whatever the
   section colour — cream title, text and link, Style Guide
   primary for the strapline, caption, rules and frame.
   Only layout, spacing and surfaces live here.
========================================================= */

/* photo and grading behind everything; the container carries the content above them */
.sm-hero .sizer { position:relative; }
/* Height and full-height behaviour are Kajabi’s: the sizer is a plain block, and the theme’s own
   sizer--full rules apply under Make section full height, exactly as on a stock section. */
/* Kajabi’s background video mounts into this element and crop-fills it; the box is the hero’s
   background layer, under the shade and fade. */
.sm-hero .sm-hero__bg .backgroundVideo { position:absolute; inset:0; width:100%; height:100%; }

.sm-hero .sm-hero__bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sm-hero .sm-hero__bg-img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* left → right: the copy side goes dark; strength from the sidebar (opacity 0–1) */
.sm-hero .sm-hero__shade { position:absolute; inset:0; opacity:var(--sm-hero-shade, 1); background:linear-gradient(90deg, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 92%, transparent) 0%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 86%, transparent) 26%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 72%, transparent) 45%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 50%, transparent) 60%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 24%, transparent) 78%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 8%, transparent) 100%); }
/* top → bottom: the photo fades into the dark section colour behind the cards */
.sm-hero .sm-hero__fade { position:absolute; inset:0; opacity:var(--sm-hero-fade, 1); background:linear-gradient(180deg, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 4%, transparent) 0%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 8%, transparent) 42%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 26%, transparent) 56%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 50%, transparent) 68%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 78%, transparent) 84%, color-mix(in srgb, var(--sm-hero-tint, var(--sm-section-dark)) 96%, transparent) 100%); }
.sm-hero .container { position:relative; }
/* A flex row, so Kajabi’s own alignment classes (align-items-*, justify-content-*) act on it
   exactly as they act on a stock section’s row. */
.sm-hero .sm-hero__inner { position:relative; display:flex; flex-wrap:wrap; }

/* copy: a plain block the width of N grid columns, on the grid's own gutters (no column padding) */
.sm-hero .sm-hero__copy { width:calc((100% + 30px) * var(--sm-hero-cols, 7) / 12 - 30px); max-width:100%; min-width:0; }
.sm-hero .sm-hero__eyebrow { margin:0 0 22px; }
.sm-hero .sm-hero__phrase { white-space:nowrap; }
.sm-hero .sm-hero__heading { margin:0 0 18px; text-wrap:balance; }
.sm-hero .sm-hero__intro p { margin:0 0 16px; }
.sm-hero .sm-hero__intro p:last-child { margin-bottom:0; }
/* the intro keeps a reading measure whatever the copy width: the heading may run to ten columns, the paragraph stops at about 64 zero-widths (~720px at 18px) */
.sm-hero .sm-hero__intro { max-width:64ch; }
.sm-hero .justify-content-center .sm-hero__intro { margin-left:auto; margin-right:auto; }
.sm-hero .sm-hero__actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:30px; }
.sm-hero .sm-hero__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-hero .sm-hero__btn-arrow svg { display:block; }

/* side caption: one line per phrase over a short gold rule, mid-right of the content, on the right-hand content edge */
.sm-hero .sm-hero__caption { position:absolute; top:47%; right:0; z-index:2; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; color:var(--sg-color-primary); text-align:left; pointer-events:none; }
.sm-hero .sm-hero__caption-rule { display:block; width:44px; height:1px; margin-top:14px; background:var(--sg-color-primary); }

/* route cards: 4px of invisible headroom for the hover lift, so the cards sit 40px under the button */
.sm-hero .sm-hero__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; padding-top:4px; margin:36px 0 0; overflow:visible; }

/* Route cards can hang below the hero onto the section beneath. `top` moves them
   visually without changing the hero's height, so nothing else on the page shifts;
   the hero is lifted a layer so the next section cannot paint over them. Phones
   halve it, because the section below has less top padding to lend. */
.sm-hero { z-index:2; }
.sm-hero .sm-hero__cards { position:relative; top:var(--sm-hero-overlap, 0px); }
@media (max-width:767px) { .sm-hero .sm-hero__cards { top:calc(var(--sm-hero-overlap, 0px) / 2); } }
/* card: a stable link box; the inner moves on hover. Three classes deep so it outranks the link colour rule on dark sections.
   The copy sits in flow at the bottom of the inner, so a card keeps 1.7 : 1 but grows if its copy needs more (narrow desktops) */
.sm-hero .sm-hero__cards .sm-hero__card { position:relative; display:block; min-width:0; aspect-ratio:1.7/1; overflow:visible; border:0; color:var(--sm-page); text-decoration:none; }
.sm-hero .sm-hero__cards .sm-hero__card:hover, .sm-hero .sm-hero__cards .sm-hero__card:focus { color:var(--sm-page); text-decoration:none; }
.sm-hero .sm-hero__card-inner { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:100%; overflow:hidden; border-radius:var(--sm-radius); background:var(--sm-card-dark); isolation:isolate; transform:translateZ(0); box-shadow:var(--sm-card-shadow); transition:transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease); }
/* gold frame */
.sm-hero .sm-hero__card-inner::before { content:""; position:absolute; inset:0; z-index:10; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--sm-frame); pointer-events:none; transition:box-shadow var(--sm-dur) var(--sm-ease); }
/* a faint dark-card wash across the photo */
.sm-hero .sm-hero__card-inner::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--sm-card-dark) 4%, transparent) 0%, transparent 55%, color-mix(in srgb, var(--sm-card-dark) 3%, transparent) 100%); }
.sm-hero .sm-hero__card-img { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.96) contrast(1.02) brightness(.98); transform:translateZ(0); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-hero .sm-hero__card-img--empty { background:var(--sm-placeholder-dark); filter:none; }
/* the photo fades to the dark section colour from a third of the way down, so the copy always sits on a dark ground */
.sm-hero .sm-hero__card-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 0%, transparent 32%, color-mix(in srgb, var(--sm-section-dark) 10%, transparent) 42%, color-mix(in srgb, var(--sm-section-dark) 35%, transparent) 54%, color-mix(in srgb, var(--sm-section-dark) 68%, transparent) 64%, color-mix(in srgb, var(--sm-section-dark) 90%, transparent) 74%, color-mix(in srgb, var(--sm-section-dark) 98%, transparent) 84%, var(--sm-section-dark) 92%, var(--sm-section-dark) 100%); }

.sm-hero .sm-hero__card-content { position:relative; z-index:3; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:18px 20px; }
.sm-hero .sm-hero__card-icon { display:block; flex:0 0 auto; width:var(--sm-hero-icon, 36px); height:var(--sm-hero-icon, 36px); object-fit:contain; object-position:center; margin:0 0 9px; }
.sm-hero .sm-hero__cards .sm-hero__card-title { width:100%; margin:0 0 4px; color:var(--sm-page); }
.sm-hero .sm-hero__cards .sm-hero__card-strap { width:100%; margin:0 0 7px; color:color-mix(in srgb, var(--sm-page) 82%, transparent); }
.sm-hero .sm-hero__cards .sm-hero__card-text { width:100%; max-width:92%; margin:0 0 13px; color:color-mix(in srgb, var(--sm-page) 90%, transparent); }
.sm-hero .sm-hero__card-link { display:inline-flex; align-items:center; gap:8px; padding-bottom:5px; border-bottom:1px solid color-mix(in srgb, var(--sg-color-primary) 62%, transparent); transition:border-color var(--sm-dur) var(--sm-ease); color:var(--sm-page); }
.sm-hero .sm-hero__card-arrow { display:inline-flex; align-items:center; color:var(--sg-color-primary); transition:transform var(--sm-dur) var(--sm-ease); }
.sm-hero .sm-hero__card-arrow svg { display:block; width:16px; height:16px; }

@media (hover:hover) {
  .sm-hero .sm-hero__card:hover .sm-hero__card-inner, .sm-hero .sm-hero__card:focus-visible .sm-hero__card-inner { transform:translate3d(0,-3px,0); box-shadow:var(--sm-card-shadow-hover); }
  .sm-hero .sm-hero__card:hover .sm-hero__card-inner::before, .sm-hero .sm-hero__card:focus-visible .sm-hero__card-inner::before { box-shadow:inset 0 0 0 1px var(--sm-frame-hover); }
  .sm-hero .sm-hero__card:hover .sm-hero__card-img { transform:scale(1.03) translateZ(0); transition-duration:var(--sm-dur-img); }
  .sm-hero .sm-hero__card:hover .sm-hero__card-link { border-bottom-color:var(--sg-color-primary); }
  .sm-hero .sm-hero__card:hover .sm-hero__card-arrow { transform:translateX(4px); }
  .sm-hero .sm-hero__btn:hover .sm-hero__btn-arrow { transform:translateX(4px); }
}
.sm-hero .sm-hero__cards .sm-hero__card:focus-visible { outline:2px solid var(--sg-color-primary); outline-offset:4px; }

/* Plain cards — the three routes as compact panels instead of photo tiles, for
   when the section below already uses photo cards and two identical rows would
   read as the same thing twice. No image and no scrim: a solid deep surface that
   still lets a little of the hero photo through, with the same frame and hover. */
.sm-hero--cards-plain .sm-hero__cards .sm-hero__card { aspect-ratio:auto; }
.sm-hero--cards-plain .sm-hero__card-inner { min-height:0; background:color-mix(in srgb, var(--sg-surface-deep) 92%, transparent); }
.sm-hero--cards-plain .sm-hero__card-inner::after { display:none; }
.sm-hero--cards-plain .sm-hero__card-content { padding:22px 22px 20px; }
.sm-hero--cards-plain .sm-hero__cards .sm-hero__card-text { max-width:100%; }
@media (max-width:1022px) {
  .sm-hero--cards-plain .sm-hero__cards .sm-hero__card { min-height:0; }
}

/* below the grid's breakpoint: copy full width, caption goes;
   the cards scroll sideways in one row, edge to edge, snapping to the text edge (40 on tablets, 20 on phones) —
   two and a bit in view on tablets, one and a bit on phones, content-driven height; 4px of headroom for the hover lift */
@media (max-width:1022px) {
  .sm-hero .sm-hero__copy { width:auto; flex:1 1 100%; }
  .sm-hero .sm-hero__caption { display:none; }
  .sm-hero .sm-hero__cards { display:flex; gap:16px; width:auto; margin:36px -40px 0; padding:4px 40px 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:40px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-hero .sm-hero__cards::-webkit-scrollbar { display:none; }
  .sm-hero .sm-hero__cards .sm-hero__card { flex:0 0 calc(50% - 32px); aspect-ratio:auto; min-height:270px; scroll-snap-align:start; }
  .sm-hero .sm-hero__card-content { padding:22px; }
}
/* phones: the copy on the same 10px inset as Kajabi's columns */
@media (max-width:767px) {
  .sm-hero .sm-hero__copy { margin-left:10px; margin-right:10px; }
  .sm-hero .sm-hero__cards { gap:12px; margin:26px -10px 0; padding:4px 20px 6px; scroll-padding-left:20px; }
  .sm-hero .sm-hero__cards .sm-hero__card { flex-basis:82%; max-width:340px; }
  .sm-hero .sm-hero__card-content { padding:20px; }
  .sm-hero .sm-hero__card-icon { width:calc(var(--sm-hero-icon, 36px) * .94); height:calc(var(--sm-hero-icon, 36px) * .94); }
  .sm-hero .sm-hero__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-hero .sm-hero__card-inner, .sm-hero .sm-hero__card-inner::before, .sm-hero .sm-hero__card-img, .sm-hero .sm-hero__card-arrow, .sm-hero .sm-hero__btn-arrow { transition:none !important; }
  .sm-hero .sm-hero__card:hover .sm-hero__card-inner { transform:none; }
  .sm-hero .sm-hero__card:hover .sm-hero__card-img { transform:translateZ(0); }
}


/* =========================================================
   VIDEO CARDS  (section: Video Cards)
   Eyebrow, heading and intro (centred or left), then a grid of
   video tiles — one block per tile: a media-library video in
   Kajabi's own player (the native Video block's picker, poster
   and switches) or embed code (YouTube, Vimeo…) as the native
   Video Embed block takes it, 16 : 9 under the card corner and gold frame,
   lifting on hover, with an optional mono caption underneath.
   Two or three per row on desktop; tablets and phones scroll
   the tiles sideways like the other cards. Optional button.
   Type: h6 eyebrow · h2 · body intro · .sm-label caption.
   Only layout, spacing and surfaces live here.
========================================================= */

.sm-vc .sm-vc__head { min-width:0; }
.sm-vc--centre .sm-vc__head { max-width:760px; margin:0 auto; text-align:center; }
.sm-vc--centre .sm-vc__head .sm-rule { margin-left:auto; margin-right:auto; }
.sm-vc .sm-vc__eyebrow { margin:0 0 22px; }
.sm-vc .sm-vc__heading { margin:0 0 18px; }
.sm-vc .sm-vc__intro p { margin:0 0 16px; }
.sm-vc .sm-vc__intro p:last-child { margin-bottom:0; }

/* grid: 4px of invisible headroom for the hover lift, so the tiles sit 46px under the intro; photo-card gap */
.sm-vc .sm-vc__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:100%; padding-top:4px; margin:42px 0 0; overflow:visible; }
.sm-vc--cols-3 .sm-vc__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* tile: the inner moves on hover; the player keeps the card corner and the gold frame sits over it */
.sm-vc .sm-vc__card { min-width:0; }
.sm-vc .sm-vc__inner { position:relative; overflow:hidden; border:1px solid var(--sm-frame); border-radius:var(--sm-radius); background:var(--sm-section-dark); isolation:isolate; transform:translateZ(0); box-shadow:var(--sm-card-shadow); transition:transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease); }
.sm-vc .sm-vc__media { position:relative; width:100%; }
.sm-vc .sm-vc__media .video { position:relative; }
/* embed code (YouTube, Vimeo…): a 16 : 9 box the iframe fills — as the native Video Embed block */
.sm-vc .sm-vc__embed { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.sm-vc .sm-vc__embed iframe, .sm-vc .sm-vc__embed object, .sm-vc .sm-vc__embed embed, .sm-vc .sm-vc__embed video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.sm-vc .sm-vc__poster { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; }
.sm-vc .sm-vc__poster--empty { background:var(--sm-placeholder-dark); }
.sm-vc .sm-vc__caption { margin:12px 0 0; color:var(--sg-color-heading); }
section.background-dark .sm-vc__caption { color:var(--sm-on-dark); }

.sm-vc .sm-vc__cta { margin-top:42px; }
.sm-vc--centre .sm-vc__cta { text-align:center; }
.sm-vc .sm-vc__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-vc .sm-vc__btn-arrow svg { display:block; }

@media (hover:hover) {
  .sm-vc .sm-vc__card:hover .sm-vc__inner { transform:translate3d(0,-3px,0); box-shadow:var(--sm-card-shadow-hover); }
  .sm-vc .sm-vc__card:hover .sm-vc__inner { border-color:var(--sm-frame-hover); }
  .sm-vc .sm-vc__btn:hover .sm-vc__btn-arrow { transform:translateX(4px); }
}

/* below the grid's breakpoint: the tiles scroll sideways in one row, edge to edge, snapping to the text edge (40 on tablets, 20 on phones) —
   two and a bit in view on tablets, one and a bit on phones; 4px of headroom for the hover lift */
@media (max-width:1022px) {
  .sm-vc .sm-vc__grid, .sm-vc--cols-3 .sm-vc__grid { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc(50% - 32px); gap:16px; width:auto; margin:42px -40px 0; padding:4px 40px 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:40px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-vc .sm-vc__grid::-webkit-scrollbar { display:none; }
  .sm-vc .sm-vc__card { scroll-snap-align:start; }
}
/* phones: Kajabi's columns are inset 10px, so the head and button follow the same text edge */
@media (max-width:767px) {
  .sm-vc .sm-vc__head, .sm-vc .sm-vc__cta { padding-left:10px; padding-right:10px; }
  .sm-vc .sm-vc__grid, .sm-vc--cols-3 .sm-vc__grid { grid-auto-columns:82%; gap:12px; margin:22px -10px 0; padding:4px 20px 6px; scroll-padding-left:20px; }
  .sm-vc .sm-vc__cta { margin-top:30px; }
  .sm-vc .sm-vc__btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .sm-vc .sm-vc__inner, .sm-vc .sm-vc__inner::before, .sm-vc .sm-vc__btn-arrow { transition:none !important; }
  .sm-vc .sm-vc__card:hover .sm-vc__inner { transform:none; }
}


/* =========================================================
   HEADER TYPE
   The nav, Log In, the account menu and the mobile menu in
   the mono label recipe: family, weight, tracking and case.
   Size, colour, layout and behaviour are all left to the
   header section’s own settings — this block sets type only.
   ========================================================= */

.header .link-list__link,
.header .user__login a,
.header .dropdown__trigger,
.header .dropdown__item a,
.header .header__content--mobile a:not(.btn) {
  font-family: var(--sm-font-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* HEADER BAR — a bar, not a block: 12px above and below the logo instead of 20, and the
   logo block set to 120px, so the header is about 104px on desktop (was 149) and 87 on
   phones. The bar takes the header's surface colour, so it no longer sits as a
   slightly-different black on the hero. */
.header .header__content--desktop { padding: 12px 0; }
@media (max-width: 767px) {
  .header .header__content--desktop { padding: 10px 0; }
  .header .logo__image { width: 100px !important; } /* the logo block's own width rule is an ID selector */
}
/* Nav hover — the text-link recipe: a primary-colour rule grows in from the left. */
.header .link-list__link { white-space: nowrap; }
.header__content--desktop .link-list__link { position: relative; }
.header__content--desktop .link-list__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--sg-color-primary); transform: scaleX(0); transform-origin: left center; transition: transform var(--sm-dur) var(--sm-ease); }
.header__content--desktop .link-list__link:hover::after,
.header__content--desktop .link-list__link:focus-visible::after { transform: scaleX(1); }
/* Tap targets: the hamburger is a 30×24 icon — 10px of padding makes it 50×44 without moving it. */
.header .hamburger { padding: 10px; margin: -10px -10px -10px auto; box-sizing: content-box; }

/* HEADER BREAKPOINT — the desktop row (logo, five links, the button and the account icon)
   needs about 1,180px, and Kajabi hands over to the hamburger at 767px, so tablets and small
   laptops got a wrapping nav and a four-line button. The theme's scripts.js moves the blocks
   into the mobile panel below 1200px and the hamburger shows there too. */
@media (min-width: 768px) and (max-width: 1199px) {
  .header .hamburger.hidden--desktop { display: block !important; } /* core: display:none !important from 768 */
}

/* MOBILE MENU — a full-screen panel under the bar, below 1200px. scripts.js toggles
   html.sm-menu-open from the hamburger and writes the bar's height to --sm-hdr-h; Kajabi's
   own hamburger animation still draws the X. The nav in the heading face at 26–32px, the
   account links as mono labels under a hairline, the button full width at the foot. Colours
   come from the header's surface and text settings, not from the account block's desktop
   dropdown (an ID rule inside the block, hence the !important). */
@media (max-width: 1199px) {
  html.sm-menu-open { overflow: hidden; }
  .header .header__content--mobile {
    display: flex !important; flex-direction: column; box-sizing: border-box;
    /* the header carries a transform, so it is this fixed panel's containing block: height is
       set from the viewport rather than with bottom:0 */
    position: fixed; left: 0; right: 0; top: var(--sm-hdr-h, 88px); z-index: 998;
    height: calc(100vh - var(--sm-hdr-h, 88px)); height: calc(100dvh - var(--sm-hdr-h, 88px)); max-height: none !important; /* core caps the panel at its content height */
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--sm-hdr-bg, var(--sg-surface-deep));
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--sm-dur) var(--sm-ease), transform var(--sm-dur) var(--sm-ease), visibility 0s linear var(--sm-dur);
  }
  html.sm-menu-open .header .header__content--mobile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .header .header__content--mobile .header__block { padding-left: 0 !important; padding-right: 0 !important; }
  .header .header__content--mobile .header__block--menu { order: 1; }
  .header .header__content--mobile .header__block--user { order: 2; margin-top: auto; padding-top: 16px !important; border-top: 1px solid var(--sm-frame-dark); }
  .header .header__content--mobile .header__block--cta { order: 3; padding: 20px 0 0 !important; }
  .header .header__content--mobile .header__spacer { display: none; }
  .header .header__content--mobile .link-list { display: flex; flex-direction: column; }
  .header .header__content--mobile a.link-list__link { /* outranks the mono nav recipe above */
    font-family: var(--sg-font-heading), sans-serif; font-weight: var(--sg-fw-heading, 700);
    font-size: clamp(26px, 7vw, 32px); line-height: 1.15; letter-spacing: -.01em; text-transform: none;
    padding: 10px 0 !important; white-space: normal;
  }
  .header .header__content--mobile .header__block--user,
  .header .header__content--mobile .dropdown__menu,
  .header .header__content--mobile .dropdown__item a { color: var(--sm-header-text, #ffffff) !important; }
  .header .header__content--mobile .dropdown__menu { background: transparent !important; box-shadow: none; }
  .header .header__content--mobile .dropdown__item a { padding: 12px 0 !important; }
  .header .header__content--mobile .btn { width: 100%; justify-content: center; margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .header .header__content--mobile { transition: none; transform: none; }
}

/* FORMS — Kajabi's inputs on the Style Guide: the button radius, a hairline from the heading
   colour (24%), the heading colour on focus; the checkbox in the primary colour; the Login
   page's link and divider off the accent colour (gold on white was 1.7:1). */
.form-control { border: 1px solid color-mix(in srgb, var(--sg-color-heading) 24%, transparent); border-radius: var(--sg-btn-radius); box-shadow: none; }
.form-control:focus { border-color: var(--sg-color-heading); box-shadow: none; outline: 0; }
input[type="checkbox"].boolean { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--sg-color-primary); }
.auth__link a { color: var(--sg-color-heading); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sg-color-primary) 62%, transparent); }
.auth__link a:hover, .auth__link a:focus-visible { color: var(--sg-color-heading); border-bottom-color: var(--sg-color-primary); }
.auth__content .divider { color: var(--sg-color-secondary); }
.auth__title { font-size: var(--sg-fs-h2); } /* a sign-in page is not a hero */

/* =========================================================
   NATIVE SECTIONS ON A STYLE GUIDE SURFACE
   Kajabi's own sections do not turn their text light when the
   background is dark — the Style Guide heading and body colours
   print straight onto it — so a dark surface chosen from the
   Background dropdown would otherwise be unreadable. Our nine
   elements carry their own rules for this and are excluded by
   the sm- test, so nothing here can reach them.
========================================================= */
.section.background-dark:not([class*="sm-"]) { color: var(--sg-bg); }
.section.background-dark:not([class*="sm-"]) p,
.section.background-dark:not([class*="sm-"]) li,
.section.background-dark:not([class*="sm-"]) blockquote { color: var(--sg-bg); }
.section.background-dark:not([class*="sm-"]) h1,
.section.background-dark:not([class*="sm-"]) h2,
.section.background-dark:not([class*="sm-"]) h3,
.section.background-dark:not([class*="sm-"]) h4,
.section.background-dark:not([class*="sm-"]) h5,
.section.background-dark:not([class*="sm-"]) h6 { color:var(--sm-on-dark); }
.section.background-dark:not([class*="sm-"]) a:not(.btn) { color: var(--sg-color-primary); }


/* ---------------------------------------------------------------------------
   Phones: one button size, full width.
   Measured at 390px before this rule: five of the nine elements already ran to
   90% of the screen while FAQ sat at 54% and Feature Split at 72%, and heights
   ranged from 35px to 46px because each element picks its own Kajabi size class.
   FAQ's 35px was under the 44px minimum tap target. This makes the primary
   button in every element the same width and height. The secondary link is not
   a .btn, so it stays inline text and the hierarchy survives.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sm-hero__actions .btn,
  .sm-pc__cta .btn,
  .sm-steps__actions .btn,
  .sm-cc__cta .btn,
  .sm-ev__foot .btn,
  .sm-vc__cta .btn,
  .sm-faq__actions .btn,
  .sm-cta__actions .btn,
  .sm-fs__actions .btn {
    width: 100%; min-height: 48px; align-items: center; justify-content: center;
  }
  /* The stack wraps the button whenever a note is set, so it has to be full
     width too, or the button inside it shrinks to the width of the note. */
  .sm-hero__actions .sm-btn-stack,
  .sm-pc__cta .sm-btn-stack,
  .sm-steps__actions .sm-btn-stack,
  .sm-cc__cta .sm-btn-stack,
  .sm-ev__foot .sm-btn-stack,
  .sm-vc__cta .sm-btn-stack,
  .sm-faq__actions .sm-btn-stack,
  .sm-cta__actions .sm-btn-stack,
  .sm-fs__actions .sm-btn-stack {
    display: flex; width: 100%;
  }
  /* The rows already wrap, so the link drops under the button on its own line.
     Centred, because the button above it is the full width and the note between
     them is centred: left-aligning the link alone left it hanging off the edge. */
  .sm-hero__actions, .sm-pc__cta, .sm-steps__actions, .sm-cc__cta, .sm-ev__foot, .sm-vc__cta, .sm-faq__actions, .sm-cta__actions, .sm-fs__actions {
    gap: 16px; justify-content: center; text-align: center;
  }
}