/* =========================================================
   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);
/* Stage shadow: the one heavier shadow, for the block that hangs over the hero edge on the sales page. Heading colour at low strength, like the card shadows. */
--sm-stage-shadow:0 30px 60px -24px color-mix(in srgb, var(--sg-color-heading) 45%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--sg-color-heading) 22%, transparent);
  --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--steps-5 .sm-steps__steps { grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; }
.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; }
  .sm-steps--steps-5 .sm-steps__step:last-child:nth-child(odd) { grid-column:1 / -1; }
}
/* 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; }
}


@media (max-width: 374px) { .sm-cta .sm-cta__label { font-size:10px; letter-spacing:.1em; } }

/* =========================================================
   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; }
/* Centred hero (Alignment → Centre): the sales-page stack. */
.sm-hero.sm-hero--centre .sm-hero__inner { justify-content:center; }
.sm-hero.sm-hero--centre .sm-hero__copy { text-align:center; }
.sm-hero.sm-hero--centre .sm-hero__copy .sm-rule { margin-left:auto; margin-right:auto; }
.sm-hero.sm-hero--centre .sm-hero__intro { margin-left:auto; margin-right:auto; }
.sm-hero.sm-hero--centre .sm-hero__actions { justify-content:center; }
.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; }
}


/* one video only: a centred stage instead of a lonely tile (the grid returns as soon as a second video is added) */
.sm-vc .sm-vc__grid:has(> .sm-vc__card:only-child) { display:block; width:auto; max-width:860px; margin:42px auto 0; padding:4px 0 0; overflow:visible; }
@media (max-width: 767px) {
  .sm-vc .sm-vc__grid:has(> .sm-vc__card:only-child) { margin:22px auto 0; padding:4px 0 0; }
}

/* =========================================================
   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, 10 on
   phones. The logo is sized by the Logo block's own width setting, at every screen size —
   Kajabi's own behaviour, so there is no separate phone size. Height follows the artwork's
   aspect ratio, which is what actually sets the bar's height: at 68px wide the current mark
   gives about 106px on desktop and 102px 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; }
}
/* 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, six links, Log In and the button) needs about
   1,290px logged out, 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 1300px and the hamburger shows there too. (1 Oct: was 1200px,
   which left "Log In" and the button on two lines from 1200 to 1290px.) The icon's lines take
   the header's text colour here: the header's own colour setting only reaches below 768px, so
   from 768 up they were Kajabi's #222 on the black bar. */
@media (min-width: 768px) and (max-width: 1299px) {
  .header .hamburger.hidden--desktop { display: block !important; } /* core: display:none !important from 768 */
  .header .hamburger__slices .hamburger__slice { background-color: var(--sm-header-text, #ffffff); }
}
/* Nothing in the desktop bar breaks onto two lines. */
.header .user__login a, .header .header__content--desktop .header__block--cta .btn { white-space: nowrap; }

/* MOBILE MENU — a full-screen panel under the bar, below 1300px. 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: 1299px) {
  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;
  }
}

/* =========================================================
   BOOKING
   The calendar takes the place a sales video would: a stage
   that hangs over the bottom edge of the hero, a strip in the
   button colour along its top carrying the facts, and the
   calendar underneath. The pull-up is a sidebar setting (half
   of it on phones); the section above takes the same amount
   as extra bottom padding so its copy stays clear. The stage
   shadow is the one heavier shadow in the system, because the
   stage sits on a light section, not a card among cards.
   ========================================================= */
.sm-book { position:relative; z-index:3; }
.sm-book .sizer { position:relative; }
.sm-book .container { position:relative; z-index:1; display:flow-root; } /* flow-root keeps the stage's negative margin inside the container, so the stage hangs over the section above rather than dragging the whole section up */
.sm-book .sm-book__stage { position:relative; width:100%; max-width:var(--sm-book-w, 1050px); margin:calc(-1 * var(--sm-book-pull, 160px)) auto 0; border-radius:var(--sm-radius); overflow:hidden; background:var(--sm-card-light); box-shadow:var(--sm-stage-shadow); isolation:isolate; scroll-margin-top:24px; }
.sm-book .sm-book__bar { display:flex; justify-content:center; align-items:center; padding:15px 24px; background:var(--sg-btn-bg); color:var(--sg-btn-text); text-align:center; }
.sm-book .sm-book__bar-text { margin:0; color:inherit; font-size:var(--sm-fs-small); letter-spacing:.14em; }
.sm-book .sm-book__phrase { white-space:nowrap; }
.sm-book .sm-book__dot { display:inline-block; margin:0 .35em; }
.sm-book .sm-book__widget { position:relative; width:100%; height:var(--sm-book-h, 700px); min-width:0; }
.sm-book .sm-book__widget iframe { display:block; width:100%; height:100%; border:0; }
.sm-book .sm-book__embed { position:relative; width:100%; min-width:0; }
.sm-book .sm-book__embed iframe { display:block; width:100%; border:0; }
.sm-book .sm-book__empty { display:flex; align-items:center; justify-content:center; min-height:240px; padding:24px; text-align:center; color:var(--sg-color-secondary); }
.sm-book .sm-book__empty p { margin:0; color:inherit; }
.sm-book .sm-book__note { max-width:60ch; margin:24px auto 0; text-align:center; font-size:var(--sm-fs-small); color:var(--sg-color-secondary); }
.sm-book .sm-book__note p { margin:0; font-size:inherit; color:inherit; }
.sm-book .sm-book__note a { color:inherit; text-decoration:underline; text-underline-offset:.18em; text-decoration-color:var(--sg-color-primary); }
.sm-book .sm-book__note a:hover { color:var(--sg-color-heading); }
@media (max-width: 1099px) {
  .sm-book .sm-book__widget { height:calc(var(--sm-book-h, 700px) + 160px); } /* in a stage narrower than about 1000px Calendly stacks the event details above the calendar, so it needs the extra room to show a whole month and the time zone without an inner scroll */
}
@media (max-width: 767px) {
  .sm-book .sm-book__stage { margin-top:calc(-1 * var(--sm-book-pull, 160px) / 2); }
  .sm-book .sm-book__bar { padding:12px 16px; }
  .sm-book .sm-book__bar-text { font-size:var(--sg-fs-h6); line-height:1.9; }
  .sm-book .sm-book__phrase { display:block; } /* one fact per line on phones, no dots */
  .sm-book .sm-book__dot { display:none; }
  .sm-book .sm-book__note { margin-top:18px; }
}

/* =========================================================
   PROOF STRIP
   Receipts: a bold line and a small line, three or four
   across, centred; an optional eyebrow and heading above and
   the usual action row below. Stacks on phones.
   ========================================================= */
.sm-proof .sm-proof__head { max-width:760px; margin:0 auto 44px; text-align:center; }
.sm-proof .sm-proof__head .sm-rule { margin-left:auto; margin-right:auto; }
.sm-proof .sm-proof__eyebrow { margin:0 0 22px; }
.sm-proof .sm-proof__heading { margin:0 0 18px; text-wrap:balance; }
.sm-proof .sm-proof__intro { max-width:64ch; margin:0 auto; }
.sm-proof .sm-proof__intro p { margin:0 0 16px; }
.sm-proof .sm-proof__intro p:last-child { margin-bottom:0; }
.sm-proof .sm-proof__grid { display:grid; grid-template-columns:repeat(var(--sm-proof-cols, 3), minmax(0, 1fr)); gap:36px 40px; max-width:1180px; margin:0 auto; }
.sm-proof .sm-proof__item { min-width:0; text-align:center; }
.sm-proof .sm-proof__title { margin:0 0 10px; text-wrap:balance; }
.sm-proof .sm-proof__text { margin:0 auto; max-width:34ch; color:var(--sg-color-secondary); }
.sm-proof.background-dark .sm-proof__text { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-proof .sm-proof__actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin-top:44px; }
.sm-proof .sm-proof__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-proof .sm-proof__btn-arrow svg { display:block; }
.sm-proof .sm-proof__btn:hover .sm-proof__btn-arrow { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce) { .sm-proof .sm-proof__btn-arrow { transition:none !important; } }
@media (min-width: 768px) and (max-width: 1279px) { .sm-proof.sm-proof--cols-4 .sm-proof__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 1023px) { .sm-proof .sm-proof__grid { gap:32px 24px; } }
@media (max-width: 767px) {
  .sm-proof .sm-proof__head { margin-bottom:34px; }
  .sm-proof .sm-proof__grid { grid-template-columns:1fr; gap:28px; }
  .sm-proof .sm-proof__actions { margin-top:34px; }
}


/* =========================================================
   STICKY ELEMENTS — Kajabi's overflow rule
   Kajabi's theme stylesheet sets overflow-x: hidden on html and
   body to stop sideways scrolling. On the body that also makes a
   scroll box that never scrolls, and position: sticky can only
   stick inside the box that scrolls, so nothing on the site could
   stay in view. clip stops sideways scrolling the same way without
   making a scroll box. Browsers without clip keep Kajabi's rule.
   ========================================================= */
html, body { overflow-x: clip; }


/* =========================================================
   DOCUMENT  (section: Document)
   Long-form text — terms, a policy, an agreement — set the way
   the Design System's Document page sets it, built to be reused:
   duplicate the page, rename it, paste new text.
   Column: an optional key-terms summary (a short table from Key
   point blocks, opened with eyebrow, gold rule and heading), the
   head (eyebrow, heading, intro, the effective date and a Print
   or save as PDF link), then the text at a 65-70 character
   measure. Clause and point numbers typed into the headings
   become mono labels.
   Contents: built from the summary and the Heading 2s. On
   desktop a 280px column beside the text that stays in view,
   the reading column centred in the space beside it. Below
   1024px a 56px bar that stays at the top of the screen, shows
   the clause being read and opens the list over the page.
   Type: .sm-label eyebrows, numbers, contents label and table
   headers · h2 summary and head headings · clause h2 at the
   Style Guide h3 size · point h3 at the h4 size · body text ·
   small for the contents lines and table cells.
   Colour: the section's text colour; secondary grey for numbers,
   the date and resting contents lines; the Style Guide primary
   only for the gold rule, the active contents bar, link
   underlines and focus rings — one accent per band.
   Spacing: the system scale (8, 12, 16, 18, 22, 24, 42) plus
   64px before each clause.
   ========================================================= */

.sm-document {
  --sm-document-top: 24px;                     /* where the contents list parks on desktop */
  --sm-document-bar: 56px;                     /* the contents bar below 1024px */
  --sm-document-dash: color-mix(in srgb, var(--sg-color-secondary) 70%, transparent);
}
.sm-document .container { position: relative; z-index: 1; }
.sm-document .sm-document__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sm-document .sm-document__main { min-width: 0; width: 100%; max-width: 32em; }            /* 65-70 characters at the body size */
.sm-document:not(.sm-document--contents) .sm-document__main { margin: 0 auto; }            /* no contents list: centred in the container */

/* ---------- summary: the key terms as a short table ---------- */
.sm-document .sm-document__summary { margin: 0 0 42px; padding: 0 0 42px; border-bottom: 1px solid var(--sm-frame); }
.sm-document .sm-document__eyebrow { margin: 0 0 22px; }
.sm-document .sm-document__summary-heading { margin: 0 0 18px; }
.sm-document .sm-document__summary-table { width: 100%; margin: 0; border-collapse: collapse; }
.sm-document .sm-document__point th,
.sm-document .sm-document__point td { padding: 12px 0; border-top: 1px solid var(--sm-frame); text-align: left; vertical-align: baseline; }
.sm-document .sm-document__point:last-child th,
.sm-document .sm-document__point:last-child td { border-bottom: 1px solid var(--sm-frame); }
.sm-document .sm-document__point-label { width: 30%; padding-right: 24px; color: var(--sg-color-heading); }
.sm-document .sm-document__point-text { font-size: var(--sm-fs-small); line-height: 1.6; color: var(--sg-color-body); font-variant-numeric: tabular-nums; }
.sm-document .sm-document__summary a.sm-document__point-link { margin-left: 8px; font-family: var(--sm-font-mono); font-size: var(--sg-fs-h6); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--sg-color-secondary); text-decoration: none; background-image: linear-gradient(var(--sg-color-primary), var(--sg-color-primary)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: color var(--sm-dur) var(--sm-ease), background-size var(--sm-dur) var(--sm-ease); }
.sm-document .sm-document__summary a.sm-document__point-link:hover { color: var(--sg-color-heading); background-size: 100% 1px; }
.sm-document .sm-document__summary a.sm-document__point-link:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 3px; }
.sm-document .sm-document__summary-note { margin: 18px 0 0; color: var(--sg-color-secondary); }

/* ---------- head: eyebrow, heading, intro, the date and the print link ---------- */
.sm-document .sm-document__head { margin: 0 0 42px; }
.sm-document .sm-document__heading { margin: 0 0 18px; }
.sm-document .sm-document__intro { color: var(--sg-color-heading); }
.sm-document .sm-document__intro p { margin: 0 0 16px; }
.sm-document .sm-document__intro p:last-child { margin-bottom: 0; }
.sm-document .sm-document__meta-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 18px 0 0; }
.sm-document .sm-document__meta { margin: 0; color: var(--sg-color-secondary); }
.sm-document .sm-document__print { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--sg-color-heading); cursor: pointer; }
.sm-document .sm-document__print-icon { display: inline-flex; align-self: center; color: var(--sg-color-secondary); }
.sm-document .sm-document__print-icon svg { display: block; }
.sm-document.background-dark .sm-document__intro { color: var(--sm-on-dark); }
.sm-document.background-dark .sm-document__meta,
.sm-document.background-dark .sm-document__summary-note,
.sm-document.background-dark .sm-document__print-icon { color: color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-document.background-dark .sm-document__print,
.sm-document.background-dark .sm-document__point-label { color: var(--sm-on-dark); }
.sm-document.background-dark .sm-document__point-text { color: color-mix(in srgb, var(--sm-on-dark) 86%, transparent); }

/* ---------- body: the running text ---------- */
.sm-document .sm-document__body { color: var(--sg-color-body); }
.sm-document.background-dark .sm-document__body { color: color-mix(in srgb, var(--sm-on-dark) 86%, transparent); }
.sm-document .sm-document__body > :first-child { margin-top: 0 !important; }
.sm-document .sm-document__body > :last-child { margin-bottom: 0; }
.sm-document .sm-document__body p { margin: 0 0 22px; }
.sm-document .sm-document__body strong { color: var(--sg-color-heading); }
.sm-document.background-dark .sm-document__body strong { color: var(--sm-on-dark); }
.sm-document .sm-document__body a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--sg-color-primary); transition: color var(--sm-dur) var(--sm-ease); }
.sm-document .sm-document__body a:hover { color: var(--sg-color-heading); text-decoration-color: var(--sg-color-primary); }
.sm-document.background-dark .sm-document__body a:hover { color: var(--sm-on-dark); }
.sm-document .sm-document__body a:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 3px; }
.sm-document .sm-document__body hr { height: 1px; margin: 42px 0; border: 0; background: var(--sm-frame); }

/* clause heading — the Style Guide h3 size, its number as a mono label above it */
.sm-document .sm-document__body h2 { margin: 64px 0 18px; font-size: var(--sg-fs-h3); line-height: 1.2; scroll-margin-top: var(--sm-document-top); }
.sm-document .sm-document__body h2 .sm-document__num { display: block; margin: 0 0 12px; color: var(--sg-color-secondary); }
.sm-document .sm-document__body h2 .sm-document__h2-text { display: block; }
.sm-document.background-dark .sm-document__body .sm-document__num { color: color-mix(in srgb, var(--sm-on-dark) 64%, transparent); }

/* point heading — the h4 size, its number as a label beside it, the title hanging clear of it */
.sm-document .sm-document__body h3 { margin: 42px 0 12px; font-size: var(--sg-fs-h4); line-height: 1.2; letter-spacing: 0; scroll-margin-top: var(--sm-document-top); }
.sm-document .sm-document__body h2 + h3 { margin-top: 0; }
.sm-document .sm-document__body h3.sm-document__h3--numbered { display: flex; align-items: baseline; gap: 12px; }
.sm-document .sm-document__body h3 .sm-document__num--point { flex: 0 0 auto; min-width: 3.2em; color: var(--sg-color-secondary); }
.sm-document .sm-document__body h3 .sm-document__h3-text { min-width: 0; }
.sm-document .sm-document__body h4 { margin: 24px 0 12px; font-size: var(--sg-fs-h5); line-height: 1.2; letter-spacing: 0; }

/* lists — a short neutral dash for bullets, a mono number for steps, both on the text's first line */
.sm-document .sm-document__body ul,
.sm-document .sm-document__body ol { margin: 0 0 22px; padding: 0; list-style: none; }
.sm-document .sm-document__body li { position: relative; margin: 0 0 8px; padding: 0 0 0 24px; }
.sm-document .sm-document__body li:last-child { margin-bottom: 0; }
.sm-document .sm-document__body li > p { margin: 0; }
.sm-document .sm-document__body ul > li::before { content: ""; position: absolute; left: 0; top: calc(.89em - .5px); width: 12px; height: 1px; background: var(--sm-document-dash); }  /* the middle of the x-height */
.sm-document .sm-document__body ol { counter-reset: sm-document; }
.sm-document .sm-document__body ol > li { counter-increment: sm-document; padding-left: 36px; }
.sm-document .sm-document__body ol > li::before { content: counter(sm-document, decimal-leading-zero); display: inline-block; width: 36px; margin-left: -36px; font-family: var(--sm-font-mono); font-size: var(--sg-fs-h6); font-weight: 500; letter-spacing: .16em; color: var(--sg-color-secondary); }
.sm-document.background-dark .sm-document__body ol > li::before { color: color-mix(in srgb, var(--sm-on-dark) 64%, transparent); }
.sm-document .sm-document__body li ul,
.sm-document .sm-document__body li ol { margin: 8px 0 0; }

/* tables — the Design System's recipe: mono header row, hairlines only, small figures in tabular numerals, no striping */
.sm-document .sm-document__body table { width: 100%; margin: 0 0 22px; border-collapse: collapse; font-size: var(--sm-fs-small); line-height: 1.6; font-variant-numeric: tabular-nums; }
.sm-document .sm-document__body th { padding: 0 16px 12px 0; text-align: left; vertical-align: bottom; 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; color: var(--sg-color-heading); border-bottom: 1px solid var(--sm-frame); }
.sm-document .sm-document__body td { padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--sm-frame); }
.sm-document .sm-document__body th:last-child,
.sm-document .sm-document__body td:last-child { padding-right: 0; }
.sm-document .sm-document__body td:first-child { color: var(--sg-color-heading); }
.sm-document .sm-document__body td p { margin: 0; }
.sm-document .sm-document__body td,
.sm-document .sm-document__point-text { text-wrap: pretty; }                               /* no lone last word; the section's script is the belt */
.sm-document.background-dark .sm-document__body th,
.sm-document.background-dark .sm-document__body td:first-child { color: var(--sm-on-dark); }
.sm-document .sm-document__body blockquote { margin: 0 0 22px; padding: 0 0 0 22px; border-left: 1px solid var(--sg-color-primary); color: var(--sg-color-secondary); }

/* ---------- contents ---------- */
.sm-document .sm-document__aside { min-width: 0; }
.sm-document .sm-document__aside[hidden] { display: none; }
.sm-document .sm-document__contents { margin: 0; }
.sm-document .sm-document__contents-summary { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; cursor: pointer; color: var(--sg-color-heading); }
.sm-document .sm-document__contents-summary::-webkit-details-marker { display: none; }
.sm-document .sm-document__contents-summary::marker { content: ""; }
.sm-document .sm-document__contents-summary:focus { outline: none; }
.sm-document .sm-document__contents-summary:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 4px; }
.sm-document .sm-document__contents-label { flex: 0 0 auto; color: inherit; }
.sm-document .sm-document__contents-current { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-size: var(--sm-fs-small); line-height: 1.4; color: var(--sg-color-secondary); }
.sm-document .sm-document__current-num { margin-right: 12px; }                            /* the clause number in the bar: the same mono label as the list */
.sm-document .sm-document__contents-chevron { flex: 0 0 auto; display: inline-flex; margin-left: auto; color: var(--sg-color-heading); transition: transform var(--sm-dur) var(--sm-ease); }
.sm-document .sm-document__contents-chevron svg { display: block; }
.sm-document .sm-document__contents[open] .sm-document__contents-chevron { transform: rotate(180deg); }
.sm-document .sm-document__toc { margin: 0; padding: 0; list-style: none; }
.sm-document .sm-document__toc-item { margin: 0; padding: 0; break-inside: avoid; }
.sm-document .sm-document__toc-group { margin: 22px 0 0; padding: 0 0 8px; break-inside: avoid; break-after: avoid; }   /* a margin, so it drops away at the top of a column */
.sm-document .sm-document__toc-group:first-child { margin-top: 0; }
.sm-document .sm-document__toc-group .sm-label { color: var(--sg-color-heading); }
/* a.class beats Kajabi's ".section.background-light a", which would otherwise turn every line body black */
.sm-document .sm-document__toc a.sm-document__toc-link { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 8px 16px; border-left: 1px solid var(--sm-frame); font-size: var(--sm-fs-small); line-height: 1.4; color: var(--sg-color-secondary); text-decoration: none; transition: color var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease); }
.sm-document .sm-document__toc a.sm-document__toc-link:hover { color: var(--sg-color-heading); text-decoration: none; }
.sm-document .sm-document__toc a.sm-document__toc-link.is-active { color: var(--sg-color-heading); box-shadow: inset 2px 0 0 var(--sg-color-primary); }
.sm-document .sm-document__toc a.sm-document__toc-link:focus { outline: none; }
.sm-document .sm-document__toc a.sm-document__toc-link:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 3px; }
.sm-document .sm-document__toc-num { flex: 0 0 2.6em; color: var(--sg-color-secondary); }
.sm-document .sm-document__toc a.is-active .sm-document__toc-num { color: var(--sg-color-heading); }
.sm-document .sm-document__toc-text { min-width: 0; }
.sm-document.background-dark .sm-document__contents-summary,
.sm-document.background-dark .sm-document__contents-chevron,
.sm-document.background-dark .sm-document__toc-group .sm-label,
.sm-document.background-dark .sm-document__toc a.sm-document__toc-link:hover,
.sm-document.background-dark .sm-document__toc a.sm-document__toc-link.is-active,
.sm-document.background-dark .sm-document__toc a.is-active .sm-document__toc-num { color: var(--sm-on-dark); }
.sm-document.background-dark .sm-document__toc a.sm-document__toc-link,
.sm-document.background-dark .sm-document__toc-num,
.sm-document.background-dark .sm-document__contents-current { color: color-mix(in srgb, var(--sm-on-dark) 64%, transparent); }

/* below 1024px: a bar that stays at the top of the screen and opens the list over the page */
@media (max-width: 1023px) {
  .sm-document .sm-document__aside { position: sticky; top: 0; z-index: 5; margin: 0 0 42px; background: var(--sm-document-bg, var(--sm-page)); }
  .sm-document .sm-document__contents { border-top: 1px solid var(--sm-frame); border-bottom: 1px solid var(--sm-frame); }
  .sm-document .sm-document__contents-summary { box-sizing: border-box; min-height: var(--sm-document-bar); padding: 16px 0; }
  .sm-document .sm-document__contents-panel { position: absolute; left: 0; right: 0; top: 100%; box-sizing: border-box; max-height: calc(100vh - var(--sm-document-bar) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 24px; background: var(--sm-document-bg, var(--sm-page)); border-bottom: 1px solid var(--sm-frame); box-shadow: var(--sm-card-shadow-hover); }
  .sm-document .sm-document__toc a.sm-document__toc-link { padding: 12px 0 12px 16px; }     /* 44px tap targets */
  .sm-document .sm-document__summary,
  .sm-document .sm-document__body h2,
  .sm-document .sm-document__body h3 { scroll-margin-top: calc(var(--sm-document-bar) + 16px); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .sm-document .sm-document__toc { column-count: 2; column-gap: 42px; }
}
@media (max-width: 767px) {
  .sm-document .sm-document__grid { padding: 0 10px; }                                         /* the container's 10px plus these make the 20px phone edge */
  .sm-document .sm-document__point th,
  .sm-document .sm-document__point td { display: block; width: auto; padding: 0; border: 0; }
  .sm-document .sm-document__point th { padding: 12px 0 4px; border-top: 1px solid var(--sm-frame); }
  .sm-document .sm-document__point td { padding: 0 0 12px; }
  .sm-document .sm-document__point:last-child td { border-bottom: 1px solid var(--sm-frame); }
}

/* desktop: the list beside the text, parked at the top of the screen while the text scrolls */
@media (min-width: 1024px) {
  .sm-document--contents .sm-document__grid { grid-template-columns: 280px minmax(0, 1fr); column-gap: 42px; }
  .sm-document--contents .sm-document__main { justify-self: center; }
  .sm-document .sm-document__aside { position: sticky; top: var(--sm-document-top); }
  .sm-document .sm-document__contents-summary { pointer-events: none; cursor: default; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--sm-frame); }
  .sm-document .sm-document__contents-current,
  .sm-document .sm-document__contents-chevron { display: none; }
  .sm-document .sm-document__toc { max-height: calc(100vh - var(--sm-document-top) * 2 - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sm-frame) transparent; }
}

/* one thing moves at a time, and nothing moves for people who asked it not to */
@media (prefers-reduced-motion: reduce) {
  .sm-document .sm-document__contents-chevron,
  .sm-document .sm-document__toc a.sm-document__toc-link,
  .sm-document .sm-document__summary a.sm-document__point-link,
  .sm-document .sm-document__body a { transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.sm-document) { scroll-behavior: smooth; }
}

/* paper: the document alone — no header, contents, closing band or footer; the cover's
   title in black because browsers drop background colours when printing */
@media print {
  @page { margin: 16mm 14mm; }
  body:has(.sm-document) .header,
  body:has(.sm-document) .footer,
  body:has(.sm-document) .sm-cta,
  .sm-document .sm-document__aside,
  .sm-document .sm-document__print { display: none !important; }
  body:has(.sm-document) .sm-hero .sizer { min-height: 0 !important; padding: 0 0 8mm !important; }
  body:has(.sm-document) .sm-hero .section__overlay { display: none !important; }
  body:has(.sm-document) .sm-hero,
  body:has(.sm-document) .sm-hero * { color: #111 !important; background: transparent !important; box-shadow: none !important; }
  body:has(.sm-document) .sm-rule { height: 0 !important; border-top: 1px solid #F2C14E !important; }
  .sm-document .sizer { padding: 0 !important; }
  .sm-document .sm-document__grid { display: block; padding: 0; }
  .sm-document .sm-document__main { max-width: none; }
  .sm-document .sm-document__body a { text-decoration: none; }
  .sm-document .sm-document__body h2,
  .sm-document .sm-document__body h3 { break-after: avoid; }
  .sm-document .sm-document__body li,
  .sm-document .sm-document__body p,
  .sm-document tr { break-inside: avoid; }
}

/* =========================================================
   SALES VIDEO
   The Booking stage carrying the sales video instead of the
   calendar: it hangs over the bottom edge of the hero with the
   facts strip along its top, and the heading, intro and button
   sit under it, centred. A library video uses Kajabi's player;
   embed code sits in a 16 : 9 box; with neither, the poster (or
   a quiet placeholder) holds the space until the video exists.
   ========================================================= */
.sm-vsl .sm-vsl__media { position:relative; width:100%; min-width:0; background:var(--sm-surface-deep, #000); }
.sm-vsl .sm-vsl__embed { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.sm-vsl .sm-vsl__embed iframe, .sm-vsl .sm-vsl__embed object, .sm-vsl .sm-vsl__embed embed, .sm-vsl .sm-vsl__embed video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.sm-vsl .sm-vsl__player { position:relative; width:100%; }
.sm-vsl .sm-vsl__player .video { position:relative; }
.sm-vsl .sm-vsl__poster { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--sm-surface-deep, #000); color:var(--sm-on-dark, #fff); }
.sm-vsl .sm-vsl__still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sm-vsl .sm-vsl__poster--empty { background:var(--sm-card-dark); box-shadow:inset 0 0 0 1px var(--sm-frame-dark); }
.sm-vsl .sm-vsl__play { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:var(--sg-btn-bg); color:var(--sg-btn-text); box-shadow:0 12px 32px rgba(0,0,0,.35); }
.sm-vsl .sm-vsl__play svg { display:block; margin-left:3px; }
.sm-vsl .sm-vsl__placeholder { position:absolute; left:0; right:0; bottom:24px; z-index:1; margin:0; text-align:center; color:inherit; opacity:.72; font-size:var(--sm-fs-small); letter-spacing:.14em; }
.sm-vsl .sm-vsl__text { max-width:760px; margin:44px auto 0; text-align:center; }
.sm-vsl .sm-vsl__text .sm-rule { margin-left:auto; margin-right:auto; }
.sm-vsl .sm-vsl__eyebrow { margin:0 0 22px; }
.sm-vsl .sm-vsl__heading { margin:0 0 18px; text-wrap:balance; }
.sm-vsl .sm-vsl__intro { max-width:64ch; margin:0 auto; }
.sm-vsl .sm-vsl__intro p { margin:0 0 16px; }
.sm-vsl .sm-vsl__intro p:last-child { margin-bottom:0; }
.sm-vsl .sm-vsl__actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin-top:32px; }
.sm-vsl .sm-vsl__btn { display:inline-flex; align-items:center; gap:10px; }
.sm-vsl .sm-vsl__btn-arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-vsl .sm-vsl__btn-arrow svg { display:block; }
.sm-vsl .sm-vsl__btn:hover .sm-vsl__btn-arrow { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce) { .sm-vsl .sm-vsl__btn-arrow { transition:none !important; } }
@media (max-width: 767px) {
  .sm-vsl .sm-vsl__play { width:64px; height:64px; }
  .sm-vsl .sm-vsl__play svg { width:22px; height:22px; }
  .sm-vsl .sm-vsl__placeholder { bottom:14px; }
  .sm-vsl .sm-vsl__text { margin-top:32px; }
  .sm-vsl .sm-vsl__actions { margin-top:26px; }
}

/* =========================================================
   V2 SHARED — centred head, actions row, lead copy
   The sales-page elements (Narrative, Numbered timeline,
   Feature cards, Milestone line, Offer stack, Comparison,
   Availability, Qualifier, Sticky bar) share one head and one
   actions row so they line up down a page. Fonts and colours
   come from the Style Guide through the SM tokens above.
   ========================================================= */
.sm-head { max-width:760px; margin:0 auto 42px; text-align:center; }
.sm-head .sm-head__heading:last-child { margin-bottom:0; }
.sm-nar .sm-head:not(:has(.sm-head__intro)), .sm-av .sm-head:not(:has(.sm-head__intro)), .sm-ms .sm-head:not(:has(.sm-head__intro)) { margin-bottom:18px; }
.sm-head .sm-rule { margin-left:auto; margin-right:auto; }
.sm-head__eyebrow { margin:0 0 22px; }
.sm-head__heading { margin:0 0 18px; text-wrap:balance; }
.sm-head__intro { max-width:64ch; margin:0 auto; }
.sm-head__intro p { margin:0 0 16px; }
.sm-head__intro p:last-child { margin-bottom:0; }
.sm-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin-top:44px; }
/* left-aligned head: the homepage's content sections put the eyebrow, rule, heading and copy on the left edge */
.sm-left .sm-head { margin-left:0; text-align:left; max-width:900px; }
.sm-left .sm-head .sm-rule { margin-left:0; }
.sm-left .sm-head__intro { margin-left:0; }
.sm-left .sm-actions { justify-content:flex-start; }
.sm-left .sm-btn-stack { align-items:flex-start; }
.sm-left .sm-btn-stack .sm-btn-note { text-align:left; }
.sm-hair { border-top:1px solid var(--sm-frame); }
.background-dark .sm-hair { border-top-color:var(--sm-frame-dark); }
/* Steps: "Match the copy" crops the photograph to the copy's height so the steps sit close under both columns */
.sm-steps--img-match .sm-steps__media { align-self:stretch; }
.sm-steps--img-match .sm-steps__frame { position:relative; min-height:360px; }
.sm-steps--img-match .sm-steps__image { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width: 1023px) {
  .sm-steps--img-match .sm-steps__frame { aspect-ratio:4/3; min-height:0; }
}
.section.sm-left .sm-actions { justify-content:flex-start; }
/* Steps without a photograph: the copy takes the full width and the grey placeholder never shows */
.sm-steps--no-img .sm-steps__media { display:none; }
.sm-steps--no-img .sm-steps__content { flex:0 0 100%; max-width:100%; }
.sm-steps--no-img .sm-steps__heading { max-width:900px; }
.sm-steps--no-img .sm-steps__body { max-width:760px; }
/* the sales video's text block takes the same measure as a left head, so a two-line hook stays two lines */
.sm-vsl .sm-vsl__text { max-width:900px; }
/* the sales video's strip carries a sentence, so it wraps on phones instead of running off the edge */
@media (max-width: 767px) { .sm-vsl .sm-book__bar-text, .sm-vsl .sm-book__phrase { white-space:normal !important; display:inline; text-wrap:balance; line-height:1.6; } .sm-vsl .sm-book__bar { padding-left:16px; padding-right:16px; } }
/* the sales video's note under the button follows the dark-band token, and its proof line keeps one rule per screen */
.sm-vsl.background-dark .sm-btn-note { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-vsl .sm-vsl__text .sm-rule { display:none; }
/* Featured film: the head reads above the stage, like every other section head; the rule shows */
.sm-vsl--text-above .container { display:flex; flex-direction:column; }
.sm-vsl--text-above .sm-vsl__text { order:-1; margin:0 auto 48px; max-width:900px; }
.sm-vsl--text-above .sm-vsl__text .sm-rule { display:block; margin-left:auto; margin-right:auto; }

/* the strip keeps its dots when it wraps on phones, so three facts stay three facts */
@media (max-width: 767px) { .sm-vsl .sm-book__dot { display:inline !important; margin:0 .3em; } }
.sm-vsl--text-above .sm-vsl__stage { margin-top:0; }
@media (max-width: 767px) { .sm-vsl--text-above .sm-vsl__text { margin-bottom:32px; } }
/* Video cards: the owner's words under the caption */
.sm-vc .sm-vc__quote { margin:12px 0 0; font-size:17px; line-height:1.5; color:var(--sg-color-heading, #111); }
.sm-vc .sm-vc__quote-by { display:block; margin-top:6px; font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sg-color-secondary, #6a6967); }
.sm-vc.background-dark .sm-vc__quote { color:#fff; }
/* Video cards as white cards: the homepage's course card (white, 12px radius, hairline, soft shadow),
   the video on top, the label / result / owner's words inside on 24px padding */
.sm-vc--cards .sm-vc__card { display:flex; flex-direction:column; background:#fff; border-radius:var(--sm-radius, 12px); border:1px solid var(--sm-frame); box-shadow:0 4px 8px -2px rgba(17,17,17,.10), 0 2px 4px -2px rgba(17,17,17,.06); overflow:hidden; }
.sm-vc--cards .sm-vc__inner { border-radius:0; box-shadow:none; }
.sm-vc--cards .sm-vc__inner, .sm-vc--cards .sm-vc__media { border-radius:0 !important; }
/* inside a card the video block is not a tile of its own: no frame, and none of the tile's 3px hover lift
   (that lift was the "zoom" on the story cards; the card's gold frame is the only hover) */
.sm-vc--cards .sm-vc__inner { border:0; }
.sm-vc--cards .sm-vc__card:hover .sm-vc__inner { border-color:transparent; transform:none; box-shadow:none; }
@media (hover: hover) { .sm-vc--cards .sm-vc__card:hover .sm-vc__inner { transform:none; box-shadow:none; } }
.sm-vc--cards .sm-vc__caption { padding:24px 24px 0; margin:0 0 9px; }
.sm-vc--cards .sm-vc__note { padding:0 24px; margin:0 0 10px; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:24px; line-height:1.2; color:var(--sg-color-heading, #111); text-wrap:balance; }
.sm-vc--cards .sm-vc__quote { padding:0 24px 26px; margin:6px 0 0; font-size:15px; line-height:1.6; color:var(--sg-color-body, #222); }
.sm-vc--cards .sm-vc__quote-by { margin-top:10px; }
.sm-vc--cards.background-dark .sm-vc__card { background:var(--sm-card-dark, #111); border-color:var(--sm-frame-dark); }
.sm-vc--cards.background-dark .sm-vc__note { color:#fff; }
.sm-vc--cards.background-dark .sm-vc__quote { color:rgba(255,255,255,.72); }
/* Story card: the same card, the film on top, then the owner's headline (display face), their words,
   a hairline, and who they are with the dog's problem and outcome as one mono line. On dark surfaces
   it is the record band's card: near-black, hairline frame, white headline, words at 72%. */
.sm-vc--story .sm-vc__headline { padding:28px 28px 0; margin:0 0 12px; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:24px; line-height:1.2; letter-spacing:0; color:var(--sg-color-heading, #111); text-wrap:balance; }
.sm-vc--story .sm-vc__quote { padding:0 28px; margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--sg-color-body, #222); }
.sm-vc--story .sm-vc__who { margin-top:auto; padding:20px 28px 28px; border-top:1px solid var(--sm-frame); }
.sm-vc--story .sm-vc__quote-by { display:block; margin:0 0 6px; padding:0; font-family:var(--sg-font-body, Inter, sans-serif); font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0; text-transform:none; color:var(--sg-color-heading, #111); }
.sm-vc--story .sm-vc__caption { padding:0; margin:0; }
.sm-vc--story .sm-vc__who-line { display:block; }
.sm-vc--story.background-dark .sm-vc__headline { color:#fff; }
.sm-vc--story.background-dark .sm-vc__quote { color:rgba(255,255,255,.72); }
.sm-vc--story.background-dark .sm-vc__who { border-top-color:var(--sm-frame-dark); }
.sm-vc--story.background-dark .sm-vc__quote-by { color:#fff; }
.sm-vc--story.background-dark .sm-vc__caption { color:rgba(255,255,255,.6); }
/* Our play button: the poster the block was given, our yellow arrow on it, the player underneath.
   The first click hides this and starts the player (sm.js), so the player's own chrome never shows
   before it is playing. */
.sm-vc .sm-vc__facade { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:inherit; background:#000; overflow:hidden; cursor:pointer; -webkit-appearance:none; appearance:none; }
.sm-vc .sm-vc__facade-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sm-vc .sm-vc__facade::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.10); transition:background-color .28s cubic-bezier(.22,1,.36,1); }
.sm-vc .sm-vc__play { position:relative; z-index:1; display:block; width:64px; height:64px; color:var(--sg-color-primary, #F2C14E); filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.sm-vc .sm-vc__play svg { display:block; width:100%; height:100%; fill:currentColor; }
/* Hover, Scott's call: nothing moves. The card's frame turns gold while the video area is under the cursor (poster or, once handed off, the player)
   and the poster brightens; the arrow stays put. Pointer devices only, so a tap never leaves a stuck state. */
@media (hover: hover) {
  .sm-vc .sm-vc__card { transition:border-color .28s cubic-bezier(.22,1,.36,1); }
  .sm-vc .sm-vc__card:has(.sm-vc__media:hover) { border-color:var(--sg-color-primary, #F2C14E); }
  .sm-vc .sm-vc__facade:hover::after { background:rgba(0,0,0,0); }
}
.sm-vc .sm-vc__facade:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.sm-vc .sm-vc__facade.is-hidden { display:none; }
.sm-vc .sm-vc__facade.is-loading { cursor:progress; }
.sm-vc .sm-vc__facade.is-loading .sm-vc__play { opacity:0; transform:scale(.9); }
.sm-vc .sm-vc__play { transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
@media (max-width: 767px) { .sm-vc .sm-vc__play { width:56px; height:56px; } }

/* story cards sit 56px under the head, the record band's gap, so the two black "moment" sections breathe alike */
.sm-vc--story .sm-vc__grid { margin-top:56px; }
@media (max-width: 767px) { .sm-vc--story .sm-vc__grid { margin-top:32px; } }
@media (max-width: 767px) {
  .sm-vc--story .sm-vc__headline { padding:24px 24px 0; font-size:22px; }
  .sm-vc--story .sm-vc__quote { padding:0 24px; margin-bottom:20px; }
  .sm-vc--story .sm-vc__who { padding:18px 24px 24px; }
}
.sm-vsl .sm-vsl__eyebrow { margin-bottom:0; }
.sm-vsl.sm-vsl--text-above .sm-vsl__eyebrow { margin-bottom:22px; }
.sm-vsl.sm-vsl--text-above .sm-vsl__text .sm-rule { margin-top:0; margin-bottom:18px; }
.sm-vsl .sm-vsl__actions { margin-top:36px; }
/* headline breaks are set for desktop; under 768 the hero headline balances itself */
@media (max-width: 767px) { .sm-hero h1 br { display:none; } }
/* Proof strip: the Design System's tablet rule — three columns only while each keeps 220px, else stacked */
@media (max-width: 1023px) { .sm-proof .sm-proof__grid { grid-template-columns:1fr; gap:32px; } .sm-proof .sm-proof__item { max-width:560px; margin:0 auto; } }
/* Proof figures that are phrases, not numbers, balance onto two lines so the three columns align */
.sm-proof .sm-proof__title { max-width:10em; margin-left:auto; margin-right:auto; }
/* Proof, framed promises: one ruled row, numbered, figures at h2 weight; the columns share hairlines */
.sm-proof--framed .sm-proof__grid { counter-reset:sm-promise; border-top:1px solid var(--sm-frame, #e6e1d3); padding-top:48px; column-gap:0; }
.sm-proof--framed .sm-proof__item { counter-increment:sm-promise; padding:0 40px; }
.sm-proof--framed .sm-proof__item::before { content:"0" counter(sm-promise); display:block; font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sg-color-secondary, #6a6967); margin-bottom:18px; }
.sm-proof--framed .sm-proof__title { font-size:34px; line-height:1.15; letter-spacing:-.01em; max-width:9em; margin-bottom:14px; }
.sm-proof--framed .sm-proof__text { font-size:16px; line-height:1.6; }
@media (min-width: 1024px) {
  .sm-proof--framed .sm-proof__item + .sm-proof__item { border-left:1px solid var(--sm-frame, #e6e1d3); }
  .sm-proof--framed .sm-proof__item:first-child { padding-left:0; }
  .sm-proof--framed .sm-proof__item:last-child { padding-right:0; }
}
/* Stat figures: the number carries the column, the label sits under it in the mono voice; no counters */
.sm-proof--stats .sm-proof__item::before { display:none; }
.sm-proof--stats .sm-proof__title { font-size:46px; line-height:1.1; letter-spacing:-.02em; max-width:none; margin-bottom:14px; }
.sm-proof--stats .sm-proof__text { font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.6; color:var(--sg-color-secondary, #6a6967); max-width:22em; margin-left:auto; margin-right:auto; }
/* Stat cards: on the deep surface, dark cards with the number at display size in the accent colour,
   an Inter label and a sentence. The only place the accent is used at display size. */
.sm-proof--cards .sm-proof__head { margin-bottom:56px; }
.sm-proof--cards .sm-proof__grid { gap:24px; align-items:stretch; }
.sm-proof--cards .sm-proof__item { background:var(--sm-card-dark, #111); border:1px solid var(--sm-frame-dark, rgba(255,255,255,.12)); border-radius:var(--sm-radius, 2px); padding:40px 36px 36px; text-align:left; max-width:none; }
.sm-proof--cards .sm-proof__title { font-size:56px; line-height:1; letter-spacing:-.02em; color:var(--sg-color-primary, #f2c14e) !important; max-width:none; margin:0 0 20px; text-wrap:initial; white-space:nowrap; }
.sm-proof--cards .sm-proof__text { font-family:var(--sg-font-body, Inter, sans-serif); font-size:18px; line-height:1.4; font-weight:600; color:#fff !important; margin:0 0 10px; }
.sm-proof--cards .sm-proof__line { font-size:16px; line-height:1.6; color:rgba(255,255,255,.72); margin:0; }
@media (max-width: 1023px) {
  .sm-proof--framed .sm-proof__grid { padding-top:32px; gap:0; }
  .sm-proof--framed .sm-proof__item { padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid var(--sm-frame, #e6e1d3); }
  .sm-proof--framed .sm-proof__item:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
  .sm-proof--framed .sm-proof__title { font-size:28px; }
  .sm-proof--stats .sm-proof__title { font-size:36px; }
  .sm-proof--cards .sm-proof__grid { gap:16px; }
  .sm-proof--cards .sm-proof__item { padding:32px 28px 28px; margin:0; border-bottom:1px solid var(--sm-frame-dark, rgba(255,255,255,.12)); }
  .sm-proof--cards .sm-proof__title { font-size:48px; white-space:normal; }
  .sm-proof--cards .sm-proof__head { margin-bottom:36px; }
}
/* phones: the card's label steps down to the body size (the owner's name on a story card is the same 16px semibold) and the card takes the story card's 24px sides */
@media (max-width: 767px) {
  .sm-proof--cards .sm-proof__item { padding:28px 24px 24px; }
  .sm-proof--cards .sm-proof__text { font-size:16px; }
}
/* a photo card without a link is a plain card: no label, no hand cursor */
.sm-pc .sm-pc__card--static { pointer-events:none; cursor:default; }
/* A centred hero with a caption: the proof line sits under the button as one mono line, not in the corner */
.sm-hero--centre .sm-hero__caption { position:static; display:block; width:100%; max-width:none; margin:44px auto 0; text-align:center; opacity:.72; }
.sm-hero--centre .sm-hero__caption-line { display:inline; }
.sm-hero--centre .sm-hero__caption-line + .sm-hero__caption-line::before { content:" · "; white-space:pre; }
.sm-hero--centre .sm-hero__caption-rule { display:none; }
/* Five steps across need 1280; laptops show three and two */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sm-steps--steps-5 .sm-steps__steps { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* Sales page: the header keeps the mark and the button, loses the navigation (set by the page template) */
.sm-sales-page .header .header__container { justify-content:space-between !important; }
@media (max-width: 389px) {
  /* the long call-to-action holds on one line on small phones */
  html.sm-sales-page .section a.btn { font-size:12px !important; letter-spacing:.1em !important; padding-left:16px !important; padding-right:16px !important; }
}
.sm-sales-page .header .header__block--menu, .sm-sales-page .header .header__block--user, .sm-sales-page .header .header__block--dropdown, .sm-sales-page .header .header__block--social-icons, .sm-sales-page .header .hamburger { display:none !important; }
/* Header, right-hand cluster: the button takes the outer edge on desktop (block order in the
   header settings: logo, menu, user, cta). Kajabi's mobile drawer fixes its own order (user
   above cta), so on phones the button is put first and the quieter login link centred beneath. */
@media (max-width: 767px) {
  .header .header__content--mobile .header__block--cta { order:3; }
  .header .header__content--mobile .header__block--user { order:4; text-align:center; padding-top:16px; }
  .header .header__content--mobile .header__block--user .user { text-align:center; }
  .header .header__content--mobile .header__block--user .user__login a,
  .header .header__content--mobile .header__block--user .dropdown__item a { text-align:center !important; }
}
.sm-btn { display:inline-flex; align-items:center; gap:10px; }
.sm-btn__arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-btn__arrow svg { display:block; }
.sm-btn:hover .sm-btn__arrow { transform:translateX(4px); }
.sm-lead { font-size:1.125em; line-height:1.65; }
.sm-lead p { font-size:inherit; line-height:inherit; }
.sm-lead p { margin:0 0 1em; }
.sm-lead p:last-child { margin-bottom:0; }
/* one-line statements that close a section break at the phrase when they wrap ("The dog isn't the problem. /
   The half-finished job is.") instead of leaving a word hanging at the end of the first line */
.section.sm-nar .sm-nar__close, .section.sm-q .sm-q__close, .section.sm-cmp .sm-cmp__close, .section.sm-os .sm-os__total-text, .section.sm-vs .sm-vs__total, .section.sm-vs .sm-vs__foot { text-wrap:balance; }
/* table cells follow the paragraphs' rule: no lone word on the last line ("pulling, recall, / the door.") */
.section.sm-tbl .sm-tbl__table tbody td { text-wrap:pretty; }
.background-dark .sm-muted, .sm-muted { color:var(--sg-color-secondary); }
.background-dark .sm-muted { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
@media (prefers-reduced-motion: reduce) { .sm-btn__arrow { transition:none !important; } }
@media (max-width: 767px) {
  .sm-head { margin-bottom:32px; }
  .sm-nar .sm-head:not(:has(.sm-head__intro)), .sm-av .sm-head:not(:has(.sm-head__intro)), .sm-ms .sm-head:not(:has(.sm-head__intro)) { margin-bottom:16px; }
  .sm-actions { margin-top:34px; }
}

/* =========================================================
   NARRATIVE  (section: Narrative)
   ========================================================= */
.sm-nar .sm-nar__col { margin:0 auto; padding-left:0; padding-right:0; }
.sm-nar.sm-left .sm-nar__col { margin-left:0; }
.sm-nar .sm-nar__col--centre { text-align:center; }
.sm-nar .sm-nar__body { }
.sm-nar .sm-nar__quotes { margin:28px 0 28px 28px; }
.sm-nar .sm-nar__col--centre .sm-nar__quotes { margin-left:0; }
.sm-nar .sm-nar__quote { margin:0 0 8px; font-style:italic; font-size:1.125em; line-height:1.55; color:var(--sg-color-secondary); }
.sm-nar.background-dark .sm-nar__quote { color:color-mix(in srgb, var(--sm-on-dark) 78%, transparent); }
.sm-nar .sm-nar__quote:last-child { margin-bottom:0; }
.sm-nar .sm-nar__after { margin-top:28px; }
.sm-nar .sm-nar__close { margin:32px 0 0; }
.sm-nar .sm-nar__close strong { color:var(--sg-color-heading); }
.sm-nar.background-dark .sm-nar__close strong { color:var(--sm-on-dark); }
.sm-nar .sm-nar__portrait { margin:0 auto 32px; max-width:300px; }
.sm-nar .sm-nar__badge { display:block; margin:22px auto 0; height:auto; }
.sm-nar .sm-nar__close--signature { margin:28px 0 0; }
.sm-nar .sm-nar__promises { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:0; }
.sm-nar .sm-nar__promise { display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 18px; align-items:start; padding:18px 0 22px; border-top:1px solid var(--sm-frame); }
.sm-nar.background-dark .sm-nar__promise { border-top-color:var(--sm-frame-dark); }
.sm-nar .sm-nar__pnum { margin:6px 0 0; }
.sm-nar .sm-nar__ptitle { margin:0 0 6px; }
.sm-nar .sm-nar__ptext { margin:0; }
.sm-nar .sm-nar__img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); }
.sm-nar .sm-nar__caption { margin:14px 0 0; text-align:center; }
.sm-nar .sm-nar__col--portrait-right { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }
.sm-nar .sm-nar__col--portrait-right .sm-nar__portrait { order:2; margin:0; position:sticky; top:120px; }
.sm-nar .sm-nar__col--portrait-right .sm-nar__main { order:1; }
/* Full width with a photo on the right: a real two-column split, the copy at reading measure, the photo at half the container */
.sm-nar .sm-nar__col--full.sm-nar__col--portrait-right { grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:80px; }
.sm-nar .sm-nar__col--full.sm-nar__col--portrait-right .sm-nar__portrait { max-width:none; }
.sm-nar .sm-nar__col--full.sm-nar__col--portrait-right .sm-nar__portrait img { aspect-ratio:1/1; object-fit:cover; width:100%; }
.sm-nar .sm-nar__col--full .sm-nar__main { max-width:640px; }
@media (min-width: 1024px) and (max-width: 1279px) { .sm-nar .sm-nar__col--full.sm-nar__col--portrait-right { grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:56px; } }
@media (max-width: 1023px) { .sm-nar .sm-nar__col--full.sm-nar__col--portrait-right { grid-template-columns:1fr; gap:32px; } .sm-nar .sm-nar__col--full.sm-nar__col--portrait-right .sm-nar__portrait { order:3; max-width:none; } }
.sm-nar .sm-nar__actions { justify-content:center; }
@media (max-width: 767px) {
  .sm-nar .sm-nar__col--portrait-right { grid-template-columns:1fr; gap:28px; }
  .sm-nar .sm-nar__col--portrait-right .sm-nar__portrait { order:0; position:static; max-width:220px; }
  .sm-nar .sm-nar__promise { grid-template-columns:44px minmax(0,1fr); gap:0 14px; padding:16px 0 18px; }
  .sm-nar .sm-nar__quotes { margin-left:16px; }
}

/* =========================================================
   NUMBERED TIMELINE  (section: Numbered timeline)
   ========================================================= */
.sm-tl .sm-tl__figure { max-width:900px; margin:0 auto 48px; }
.sm-tl .sm-tl__img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--sm-radius); box-shadow:var(--sm-card-shadow); }
.sm-tl .sm-tl__list { list-style:none; margin:0 auto; padding:0; max-width:820px; position:relative; }
.sm-tl .sm-tl__list::before { content:""; position:absolute; left:23px; top:24px; bottom:24px; width:2px; background:var(--sm-frame); }
.sm-tl.background-dark .sm-tl__list::before { background:var(--sm-frame-dark); }
.sm-tl .sm-tl__step { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:0 28px; padding:0 0 44px; }
.sm-tl .sm-tl__step:last-child { padding-bottom:0; }
.sm-tl .sm-tl__badge { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:48px; height:40px; margin:0; font-weight:700; letter-spacing:.08em; box-shadow:var(--sm-card-shadow); }
.sm-tl .sm-tl__title { margin:4px 0 4px; }
.sm-tl .sm-tl__sub { margin:0 0 14px; font-style:italic; color:var(--sg-color-secondary); }
.sm-tl.background-dark .sm-tl__sub { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-tl .sm-tl__text { max-width:62ch; }
/* photo beside the steps: the head spans, the steps run down the left, the photo sits right and stays in view */
@media (min-width: 1024px) {
  .sm-tl--beside .container { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:80px; grid-template-areas:"head head" "list fig" "actions actions"; align-items:start; }
  .sm-tl--beside .sm-tl__head { grid-area:head; }
  .sm-tl--beside .sm-tl__list { grid-area:list; margin:0; max-width:none; }
  .sm-tl--beside .sm-tl__figure { grid-area:fig; margin:0; max-width:none; position:sticky; top:120px; }
  .sm-tl--beside .sm-tl__img { aspect-ratio:4/5; }
  .sm-tl--beside .sm-tl__actions { grid-area:actions; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .sm-tl--beside .container { grid-template-columns:minmax(0,1fr) minmax(0,380px); column-gap:56px; }
}
@media (max-width: 767px) {
  .sm-tl .sm-tl__figure { margin-bottom:34px; }
  .sm-tl .sm-tl__list::before { left:19px; }
  .sm-tl .sm-tl__step { grid-template-columns:40px minmax(0,1fr); gap:0 18px; padding-bottom:34px; }
  .sm-tl .sm-tl__badge { width:40px; height:34px; }
}

/* =========================================================
   FEATURE CARDS  (section: Feature cards)
   ========================================================= */
.sm-fc .sm-fc__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; max-width:1180px; margin:0 auto; }
.sm-fc .sm-fc__card { display:flex; flex-direction:column; gap:24px; padding:36px; border-radius:var(--sm-radius); background:var(--sm-card-light); border:1px solid var(--sm-frame); box-shadow:var(--sm-card-shadow); min-width:0; }
.sm-fc.background-dark .sm-fc__card { background:var(--sm-card-dark); border-color:var(--sm-frame-dark); box-shadow:none; }
.sm-fc .sm-fc__card--wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; }
.sm-fc .sm-fc__top { display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; }
.sm-fc .sm-fc__badge { display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; margin:0; font-weight:700; letter-spacing:.08em; }
.sm-fc .sm-fc__icon { width:30px; height:30px; color:var(--sg-btn-bg); }
.sm-fc .sm-fc__title { margin:0 0 6px; }
.sm-fc .sm-fc__strap { margin:0 0 20px; }
.sm-fc .sm-fc__list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sm-fc .sm-fc__line { display:flex; align-items:flex-start; gap:12px; }
.sm-fc .sm-fc__tick { flex:none; display:block; margin-top:3px; }
.sm-fc .sm-fc__tick svg { display:block; }
.sm-fc .sm-fc__media { min-width:0; }
.sm-fc .sm-fc__img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:calc(var(--sm-radius) * .75); }
.sm-fc .sm-fc__media--empty { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; border:1px dashed var(--sm-frame-hover); border-radius:calc(var(--sm-radius) * .75); text-align:center; padding:24px; }
.sm-fc.background-dark .sm-fc__media--empty { border-color:var(--sm-frame-hover-dark); }
.sm-fc .sm-fc__media--empty p { margin:0; }
@media (min-width: 1024px) {
  /* a lonely last card in the two-column layout stretches across the row and splits its list in two */
  .sm-fc .sm-fc__grid:has(.sm-fc__card--wide) .sm-fc__card:not(.sm-fc__card--wide):last-child:nth-child(even),
  .sm-fc .sm-fc__grid:not(:has(.sm-fc__card--wide)) .sm-fc__card:last-child:nth-child(odd) { grid-column:1 / -1; }
  .sm-fc .sm-fc__grid:has(.sm-fc__card--wide) .sm-fc__card:not(.sm-fc__card--wide):last-child:nth-child(even) .sm-fc__list,
  .sm-fc .sm-fc__grid:not(:has(.sm-fc__card--wide)) .sm-fc__card:last-child:nth-child(odd) .sm-fc__list { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px; }
}
@media (max-width: 1023px) {
  .sm-fc .sm-fc__grid { grid-template-columns:1fr; }
  .sm-fc .sm-fc__card { padding:28px; }
  .sm-fc .sm-fc__card--wide { grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 767px) {
  .sm-fc .sm-fc__grid { grid-template-columns:1fr; gap:18px; }
  .sm-fc .sm-fc__card { padding:24px; }
}

/* =========================================================
   MILESTONE LINE  (section: Milestone line)
   ========================================================= */
.sm-ms .sm-ms__body { max-width:760px; margin:0 auto; }
.sm-ms.sm-left .sm-ms__body { margin-left:0; }
.sm-ms .sm-ms__line { list-style:none; margin:48px auto; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(var(--sm-ms-n, 5), minmax(0,1fr)); position:relative; }
.sm-ms .sm-ms__line::before { content:""; position:absolute; left:calc(100% / var(--sm-ms-n, 5) / 2); right:calc(100% / var(--sm-ms-n, 5) / 2); top:11px; border-top:2px dotted var(--sm-frame-hover); }
.sm-ms.background-dark .sm-ms__line::before { border-color:var(--sm-frame-hover-dark); }
.sm-ms .sm-ms__item { position:relative; text-align:center; padding:0 8px; min-width:0; }
.sm-ms .sm-ms__dot { position:relative; z-index:1; display:block; width:24px; height:24px; margin:0 auto 14px; border-radius:50%; border:2px solid currentColor; background:var(--sm-page); }
.sm-ms.background-dark .sm-ms__dot { background:var(--sm-section-dark); }
.sm-ms .sm-ms__dot::after { content:""; position:absolute; inset:5px; border-radius:50%; }
.sm-ms .sm-ms__label { margin:0 0 6px; text-wrap:balance; }
.sm-ms .sm-ms__text { margin:0 auto; max-width:22ch; }
.sm-ms .sm-ms__after { margin-top:0; }
@media (max-width: 1023px) {
  .sm-ms .sm-ms__line { grid-template-columns:1fr; gap:22px; margin:34px auto; padding-left:8px; }
  .sm-ms .sm-ms__line::before { left:19px; right:auto; top:12px; bottom:12px; width:0; border-top:0; border-left:2px dotted var(--sm-frame-hover); }
  .sm-ms.background-dark .sm-ms__line::before { border-color:var(--sm-frame-hover-dark); }
  .sm-ms .sm-ms__item { display:grid; grid-template-columns:24px minmax(0,1fr); gap:2px 16px; text-align:left; padding:0; }
  .sm-ms .sm-ms__dot { margin:0; grid-row:1 / span 2; }
  .sm-ms .sm-ms__text { margin:0; max-width:none; }
}

/* =========================================================
   OFFER STACK  (section: Offer stack)
   ========================================================= */
.sm-os .sm-os__stack { max-width:820px; margin:0 auto; border-top:1px solid var(--sm-frame); }
.sm-os.sm-left .sm-os__stack { margin-left:0; }
.sm-os.background-dark .sm-os__stack { border-color:var(--sm-frame-dark); }
.sm-os .sm-os__row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:0 18px; align-items:start; padding:22px 0; border-bottom:1px solid var(--sm-frame); }
.sm-os.background-dark .sm-os__row { border-color:var(--sm-frame-dark); }
.sm-os .sm-os__tick { display:block; margin-top:4px; }
.sm-os .sm-os__tick svg { display:block; }
.sm-os .sm-os__name { margin:0 0 4px; }
.sm-os .sm-os__text { margin:0; max-width:56ch; }
.sm-os .sm-os__worth { margin:2px 0 0; white-space:nowrap; font-weight:700; font-size:1.0625em; letter-spacing:0; text-transform:none; }
.sm-os .sm-os__total { padding:28px 0 0 42px; text-align:left; }
.sm-os .sm-os__total-text { margin:0 0 8px; }
.sm-os .sm-os__price { margin:0; }
@media (max-width: 767px) {
  .sm-os .sm-os__row { grid-template-columns:20px minmax(0,1fr); gap:6px 14px; padding:18px 0; }
  .sm-os .sm-os__worth { grid-column:2; margin:0; }
  .sm-os .sm-os__total { padding-left:34px; }
}

/* =========================================================
   COMPARISON  (section: Comparison)
   ========================================================= */
.sm-cmp .sm-cmp__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; max-width:1000px; margin:0 auto; }
.sm-cmp .sm-cmp__col { padding:36px; border-radius:var(--sm-radius); background:var(--sm-card-light); border:1px solid var(--sm-frame); box-shadow:var(--sm-card-shadow); min-width:0; }
.sm-cmp.background-dark .sm-cmp__col { background:var(--sm-card-dark); border-color:var(--sm-frame-dark); box-shadow:none; }
.sm-cmp .sm-cmp__col--right { border-width:2px; }
.sm-cmp .sm-cmp__title { margin:0 0 20px; }
.sm-cmp .sm-cmp__list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sm-cmp .sm-cmp__line { display:flex; align-items:flex-start; gap:12px; font-size:1.0625em; line-height:1.55; }
.sm-cmp .sm-cmp__icon { flex:none; display:block; margin-top:3px; }
.sm-cmp .sm-cmp__icon svg { display:block; }
.sm-cmp .sm-cmp__close { max-width:760px; margin:40px auto 0; text-align:center; }
.sm-cmp .sm-cmp__close strong { color:var(--sg-color-heading); }
.sm-cmp.background-dark .sm-cmp__close strong { color:var(--sm-on-dark); }
.sm-cmp .sm-cmp__foot { max-width:760px; margin:14px auto 0; text-align:center; }
@media (max-width: 767px) {
  .sm-cmp .sm-cmp__grid { grid-template-columns:1fr; gap:18px; }
  .sm-cmp .sm-cmp__col { padding:24px; }
  .sm-cmp .sm-cmp__close { margin-top:30px; }
}

/* =========================================================
   AVAILABILITY  (section: Availability)
   ========================================================= */
.sm-av .sm-av__figure { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 28px; text-align:center; font-family:var(--sg-font-heading, inherit); font-weight:700; font-size:128px; line-height:.9; letter-spacing:-.03em; color:var(--sg-btn-bg); }
.sm-av .sm-av__figure-label { color:inherit; opacity:.8; }
.sm-av .sm-av__col { max-width:760px; margin:0 auto; text-align:center; }
.sm-av .sm-av__next { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 18px; margin:32px 0 0; padding:16px 26px; border:2px solid currentColor; border-radius:var(--sm-radius); }
.sm-av .sm-av__next-label { margin:0; }
.sm-av .sm-av__next-value { font-weight:700; font-size:1.25em; line-height:1.2; }
.sm-av .sm-av__actions { margin-top:44px; }
/* Month tiles: the homepage's white course card with the month in the mono voice and its status in the
   display face. The month to book is framed in the button colour with a tag on its top edge (a price
   list's "most popular" badge, in the video strip's colours); a full month recedes to an empty outline. */
.sm-av .sm-av__months { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; max-width:1100px; margin:56px auto 0; padding:0; }
.sm-av .sm-av__months--3 { grid-template-columns:repeat(3, minmax(0,1fr)); max-width:840px; }
.sm-av .sm-av__months--2 { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:560px; }
.sm-av .sm-av__months--1 { grid-template-columns:minmax(0,1fr); max-width:280px; }
.sm-av.sm-left .sm-av__months { margin-left:0; }
.sm-av .sm-av__month { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; margin:0; padding:30px 28px 26px; text-align:left; background:var(--sm-card-light, #fff); border:1px solid var(--sm-frame); border-radius:var(--sm-radius, 12px); box-shadow:0 4px 8px -2px rgba(17,17,17,.10), 0 2px 4px -2px rgba(17,17,17,.06); }
.sm-av .sm-av__month-name { margin:0; color:var(--sg-color-secondary); }
.sm-av .sm-av__month-status { font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:26px; line-height:1.15; letter-spacing:-.01em; color:var(--sg-color-heading); }
.sm-av .sm-av__month--full { background:transparent; box-shadow:none; }
.sm-av .sm-av__month--full .sm-av__month-status { color:var(--sg-color-secondary); }
.sm-av .sm-av__month--next { border-color:var(--sg-btn-bg, #f2c14e); box-shadow:inset 0 0 0 1px var(--sg-btn-bg, #f2c14e), 0 14px 28px -14px rgba(17,17,17,.28); }
.sm-av .sm-av__tag { position:absolute; top:0; left:28px; transform:translateY(-50%); padding:5px 10px 4px; background:var(--sg-btn-bg, #f2c14e); color:var(--sg-btn-text, #111); border-radius:2px; font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:12px; font-weight:500; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.sm-av.background-dark .sm-av__month { background:var(--sm-card-dark, #111); border-color:var(--sm-frame-dark); box-shadow:none; }
.sm-av.background-dark .sm-av__month-name { color:rgba(255,255,255,.6); }
.sm-av.background-dark .sm-av__month-status { color:#fff; }
.sm-av.background-dark .sm-av__month--full { background:transparent; }
.sm-av.background-dark .sm-av__month--full .sm-av__month-status { color:rgba(255,255,255,.5); }
.sm-av.background-dark .sm-av__month--next { border-color:var(--sg-btn-bg, #f2c14e); box-shadow:inset 0 0 0 1px var(--sg-btn-bg, #f2c14e); }
/* 1024–1279: four tiles are narrower than the status at 26px, so it steps down with the width and stays on one line.
   The lower bound sits just above the tablet rules' 1023px so a zoomed browser's fractional width can't fall between them. */
@media (min-width: 1023.02px) and (max-width: 1279px) {
  .sm-av .sm-av__month-status { font-size:clamp(21px, 2.05vw, 26px); }
  /* the smaller status sits higher in its line, so the bottom padding grows with it to keep the text optically centred */
  .sm-av .sm-av__month { padding-bottom:calc(26px + (26px - clamp(21px, 2.05vw, 26px)) * .42); }
}
@media (max-width: 1023px) {
  .sm-av .sm-av__months, .sm-av .sm-av__months--3 { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; max-width:640px; margin-top:56px; }
}
/* phones: a timetable, one month to a row, the month on the left and its status on the right */
@media (max-width: 767px) {
  .sm-av .sm-av__figure { font-size:88px; margin-bottom:22px; }
  .sm-av .sm-av__next { margin-top:26px; padding:14px 18px; }
  .sm-av .sm-av__months, .sm-av .sm-av__months--3, .sm-av .sm-av__months--2, .sm-av .sm-av__months--1 { grid-template-columns:minmax(0,1fr); gap:20px; max-width:none; margin-top:32px; }
  .sm-av .sm-av__month { flex-direction:row; align-items:baseline; justify-content:space-between; gap:16px; padding:22px 20px 21px; }
  .sm-av .sm-av__month-status { font-size:20px; text-align:right; }
  .sm-av .sm-av__tag { left:20px; }
  /* the heading keeps its two sentences, one to a line, scaled so the longer one fits the phone measure */
  .sm-av .sm-head .sm-head__heading br { display:inline; }
  .sm-av .sm-head .sm-head__heading { font-size:min(30px, 6.5vw); }
  .sm-av .sm-av__actions { margin-top:34px; }
}

/* =========================================================
   QUALIFIER  (section: Qualifier)
   ========================================================= */
.sm-q .sm-q__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px; margin:0; }
.sm-q .sm-q__card { padding:18px 0 0; border-top:1px solid var(--sm-frame); min-width:0; }
.sm-q.background-dark .sm-q__card { border-top-color:var(--sm-frame-dark); }
.sm-q .sm-q__title { margin:0 0 20px; }
.sm-q .sm-q__list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sm-q .sm-q__line { display:flex; align-items:flex-start; gap:14px; font-size:1.0625em; line-height:1.55; }
.sm-q .sm-q__icon { flex:none; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; margin-top:0; background:#111; color:#fff; }
.sm-q .sm-q__icon svg { display:block; width:14px; height:14px; color:inherit; }
.sm-q .sm-q__card--yes .sm-q__icon { background:var(--sg-btn-bg, #f2c14e); }
.sm-q .sm-q__card--yes .sm-q__icon svg { color:#111; }
.sm-q.background-dark .sm-q__card--no .sm-q__icon { background:rgba(255,255,255,.18); color:#fff; }
.sm-q .sm-q__line > span:last-child { padding-top:2px; }
/* Manual line breaks in a section heading compose the desktop measure; on phones the words wrap on their own */
@media (max-width: 767px) { .sm-head .sm-head__heading br { display:none; } }
.sm-q--list .sm-q__grid { grid-template-columns:1fr; }
.sm-q--list .sm-q__list { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; row-gap:18px; }
.sm-q--list .sm-q__card { border-top:0; padding-top:0; }
@media (max-width: 767px) { .sm-q--list .sm-q__list { grid-template-columns:1fr; row-gap:16px; } }
.sm-q .sm-q__close { max-width:760px; margin:40px 0 0; }
.sm-q.sm-centre .sm-q__close { margin-left:auto; margin-right:auto; text-align:center; }
.sm-q .sm-q__close strong { color:var(--sg-color-heading); }
.sm-q.background-dark .sm-q__close strong { color:var(--sm-on-dark); }
@media (max-width: 767px) {
  .sm-q .sm-q__grid { grid-template-columns:1fr; gap:28px; }
  .sm-q .sm-q__close { margin-top:30px; }
}

/* =========================================================
   TESTIMONIALS  (section: Testimonials)
   ========================================================= */
.sm-ts .sm-ts__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; max-width:1100px; margin:0 auto; }
.sm-ts .sm-ts__card { margin:0; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--sm-radius); background:var(--sm-card-light); border:1px solid var(--sm-frame); box-shadow:var(--sm-card-shadow); min-width:0; }
.sm-ts.background-dark .sm-ts__card { background:var(--sm-card-dark); border-color:var(--sm-frame-dark); box-shadow:none; }
.sm-ts .sm-ts__media { aspect-ratio:4/3; overflow:hidden; background:var(--sm-placeholder-dark); }
.sm-ts .sm-ts__img { display:block; width:100%; height:100%; object-fit:cover; }
.sm-ts .sm-ts__body { position:relative; padding:30px 32px 32px; }
.sm-ts .sm-ts__mark { position:absolute; top:14px; left:26px; font-family:var(--sg-font-heading), sans-serif; font-size:72px; line-height:1; opacity:.55; }
.sm-ts .sm-ts__quote { margin:26px 0 20px; padding:0; border:0; font-size:1.125em; line-height:1.6; }
.sm-ts .sm-ts__who { display:flex; flex-direction:column; gap:2px; }
.sm-ts .sm-ts__name { font-weight:600; color:var(--sg-color-heading); }
.sm-ts.background-dark .sm-ts__name { color:var(--sm-on-dark); }
.sm-ts .sm-ts__outcome { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--sm-frame); color:var(--sg-btn-bg); }
.sm-ts.background-dark .sm-ts__outcome { border-color:var(--sm-frame-dark); }
@media (max-width: 767px) {
  .sm-ts .sm-ts__grid { grid-template-columns:1fr; gap:18px; }
  .sm-ts .sm-ts__body { padding:24px; }
}

/* =========================================================
   FAQ — stacked layout (added to the FAQ section 28 Sep)
   `layout: stacked` on the FAQ element: the head centred
   above the list like every other sales-page section, the
   rows as outlined pills, the actions centred beneath.
   ========================================================= */
.sm-faq.sm-faq--stacked .sm-faq__grid { display:block; }
.sm-faq.sm-faq--stacked .sm-faq__grid > .sm-faq__intro, .sm-faq.sm-faq--stacked .sm-faq__grid > .sm-faq__body { flex:0 0 100%; width:100%; }
.sm-faq.sm-faq--stacked .sm-faq__grid > .sm-faq__intro { max-width:760px; margin:0 auto 42px; padding-top:0; padding-bottom:0; text-align:center; }
.sm-faq.sm-faq--stacked .sm-faq__intro .sm-rule { margin-left:auto; margin-right:auto; }
.sm-faq.sm-faq--stacked .sm-faq__text { margin-left:auto; margin-right:auto; }
.sm-faq.sm-faq--stacked .sm-faq__intro > :last-child, .sm-faq.sm-faq--stacked .sm-faq__text p:last-child { margin-bottom:0; }
.sm-faq.sm-faq--stacked .sm-faq__grid > .sm-faq__body { max-width:860px; margin:0 auto; padding-top:0; padding-bottom:0; }
.sm-faq.sm-faq--stacked .sm-faq__item:first-child { margin-top:0; }
.sm-faq.sm-faq--stacked .sm-faq__item { margin:0 0 12px; border:1px solid var(--sm-frame-hover); border-radius:var(--sm-radius); background:var(--sm-card-light); }
.sm-faq.sm-faq--stacked.background-dark .sm-faq__item { border-color:var(--sm-frame-hover-dark); background:var(--sm-card-dark); }
.sm-faq.sm-faq--stacked .sm-faq__question { padding:20px 24px; }
.sm-faq.sm-faq--stacked .sm-faq__panel { padding:0 24px; }
.sm-faq.sm-faq--stacked .sm-faq__answer { padding-bottom:22px; }
.sm-faq.sm-faq--stacked .sm-faq__actions { justify-content:center; }
/* both layouts: an answer keeps a readable measure (about 75 characters), not the full width of the split column */
.sm-faq .sm-faq__answer { max-width:42em; }

/* =========================================================
   LIVED SITUATIONS  (section: Lived situations)
   ========================================================= */
.sm-sit .sm-sit__grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 30px; }
.sm-sit .sm-sit__grid--cols-1 { grid-template-columns:1fr; max-width:760px; }
.sm-sit .sm-sit__item { min-width:0; padding:18px 0 28px; border-top:1px solid var(--sm-frame); }
.sm-sit.background-dark .sm-sit__item { border-top-color:var(--sm-frame-dark); }
.sm-sit .sm-sit__grid--cols-2 .sm-sit__item:last-child:nth-child(odd) { grid-column:1 / -1; }
.sm-sit .sm-sit__grid--cols-2 .sm-sit__item:last-child:nth-child(odd) .sm-sit__title, .sm-sit .sm-sit__grid--cols-2 .sm-sit__item:last-child:nth-child(odd) .sm-sit__text { max-width:760px; }
.sm-sit .sm-sit__num { margin:0 0 12px; }
.sm-sit .sm-sit__title { margin:0 0 10px; text-wrap:balance; }
.sm-sit .sm-sit__text { color:var(--sg-color-secondary); }
.sm-sit.background-dark .sm-sit__text { color:color-mix(in srgb, var(--sm-on-dark) 78%, transparent); }
.sm-sit .sm-sit__close { max-width:900px; margin:32px 0 0; font-family:var(--sg-font-heading); font-weight:700; font-size:1.5em; line-height:1.25; color:var(--sg-color-heading); text-wrap:balance; }
.sm-sit.background-dark .sm-sit__close { color:var(--sm-on-dark); }
.sm-sit.sm-centre .sm-sit__close { margin-left:auto; margin-right:auto; text-align:center; }
@media (max-width: 1023px) {
  .sm-sit .sm-sit__grid { grid-template-columns:1fr; }
  .sm-sit .sm-sit__item, .sm-sit .sm-sit__grid--cols-2 .sm-sit__item:last-child:nth-child(odd) { grid-column:auto; }
}
@media (max-width: 767px) {
  .sm-sit .sm-sit__item { padding:16px 0 22px; }
  .sm-sit .sm-sit__close { font-size:1.3em; margin-top:24px; }
}

/* =========================================================
   HOURS IN RESIDENCE  (section: Hours in residence)
   ========================================================= */
.sm-hrs .sm-hrs__row { max-width:760px; }
.sm-hrs.sm-centre .sm-hrs__row { margin:0 auto; text-align:center; }
.sm-hrs .sm-hrs__body p { margin:0 0 16px; }
.sm-hrs .sm-hrs__body p:last-child { margin-bottom:0; }
.sm-hrs .sm-hrs__seq { list-style:none; margin:42px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; }
.sm-hrs .sm-hrs__step { min-width:0; padding-top:18px; border-top:1px solid var(--sm-frame); }
.sm-hrs.background-dark .sm-hrs__step { border-top-color:var(--sm-frame-dark); }
.sm-hrs .sm-hrs__label { margin:0 0 14px; }
.sm-hrs .sm-hrs__figure { margin:0 0 6px; font-family:var(--sg-font-heading); font-weight:700; font-size:2.25em; line-height:1; color:var(--sg-color-heading); letter-spacing:-.01em; }
.sm-hrs.background-dark .sm-hrs__figure { color:var(--sm-on-dark); }
.sm-hrs .sm-hrs__unit { margin:0; color:var(--sg-color-secondary); }
.sm-hrs.background-dark .sm-hrs__unit { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-hrs .sm-hrs__statement { max-width:760px; margin:42px 0 0; }
.sm-hrs .sm-hrs__statement p { margin:0 0 16px; }
.sm-hrs .sm-hrs__statement p:last-child { margin-bottom:0; }
.sm-hrs .sm-hrs__close { max-width:900px; margin:36px 0 0; font-family:var(--sg-font-heading); font-weight:700; font-size:1.75em; line-height:1.2; color:var(--sg-color-heading); text-wrap:balance; }
.sm-hrs.background-dark .sm-hrs__close { color:var(--sm-on-dark); }
.sm-hrs.sm-centre .sm-hrs__statement, .sm-hrs.sm-centre .sm-hrs__close { margin-left:auto; margin-right:auto; text-align:center; }
@media (max-width: 1023px) {
  .sm-hrs .sm-hrs__seq { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .sm-hrs .sm-hrs__seq { grid-template-columns:1fr; gap:0; margin-top:32px; }
  .sm-hrs .sm-hrs__step { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:baseline; gap:0 16px; padding:16px 0; }
  .sm-hrs .sm-hrs__label { margin:0; }
  .sm-hrs .sm-hrs__figure { font-size:1.75em; }
  .sm-hrs .sm-hrs__unit { grid-column:2; }
  .sm-hrs .sm-hrs__close { font-size:1.4em; margin-top:28px; }
  .sm-hrs .sm-hrs__statement { margin-top:32px; }
}

/* =========================================================
   THREE-LAYER STACK  (section: Three-layer stack)
   ========================================================= */
.sm-lay .sm-lay__list { list-style:none; margin:0; padding:0; }
.sm-lay .sm-lay__layer { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 30px; padding:28px 0 36px; border-top:1px solid var(--sm-frame); }
.sm-lay.background-dark .sm-lay__layer { border-top-color:var(--sm-frame-dark); }
.sm-lay .sm-lay__num { margin:0 0 14px; }
.sm-lay .sm-lay__title { margin:0 0 10px; }
.sm-lay .sm-lay__layer--featured .sm-lay__title { font-size:1.9em; line-height:1.1; }
.sm-lay .sm-lay__figure { margin:0 0 10px; font-family:var(--sg-font-heading); font-weight:700; font-size:1.25em; line-height:1.2; color:var(--sg-btn-bg); }
.sm-lay .sm-lay__strap { margin:0; color:var(--sg-color-secondary); }
.sm-lay.background-dark .sm-lay__strap { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-lay .sm-lay__lines { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 30px; }
.sm-lay .sm-lay__layer--featured .sm-lay__lines { font-size:1.0625em; }
.sm-lay .sm-lay__line { position:relative; padding-left:22px; }
.sm-lay .sm-lay__line::before { content:""; position:absolute; left:0; top:.72em; width:10px; height:1px; background:var(--sg-btn-bg); }
.sm-lay .sm-lay__close { max-width:820px; margin:36px 0 0; font-weight:700; font-size:1.125em; line-height:1.5; color:var(--sg-color-heading); }
.sm-lay.background-dark .sm-lay__close { color:var(--sm-on-dark); }
.sm-lay .sm-lay__price { margin:18px 0 0; }
.sm-lay.sm-centre .sm-lay__close, .sm-lay.sm-centre .sm-lay__price { margin-left:auto; margin-right:auto; text-align:center; }
@media (max-width: 1279px) {
  .sm-lay .sm-lay__lines { grid-template-columns:1fr; gap:8px; }
}
@media (max-width: 1023px) {
  .sm-lay .sm-lay__layer { grid-template-columns:1fr; gap:18px; padding:22px 0 30px; }
}
@media (max-width: 767px) {
  .sm-lay .sm-lay__layer--featured .sm-lay__title { font-size:1.5em; }
}
/* Three cards: The Dog / The System / You — what goes home ready first, then what is in each */
.sm-lay .sm-lay__list--cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.sm-lay .sm-lay__list--cards .sm-lay__layer { display:flex; flex-direction:column; gap:22px; padding:32px 32px 36px; border:1px solid var(--sm-frame); border-radius:var(--sm-radius); background:var(--sm-card-light); min-width:0; }
.sm-lay.background-dark .sm-lay__list--cards .sm-lay__layer { background:var(--sm-card-dark); border-color:var(--sm-frame-dark); }
.sm-lay .sm-lay__list--cards .sm-lay__num { margin-bottom:16px; }
.sm-lay .sm-lay__list--cards .sm-lay__title { margin-bottom:8px; }
.sm-lay .sm-lay__list--cards .sm-lay__layer--featured .sm-lay__title { font-size:inherit; line-height:inherit; }
.sm-lay .sm-lay__list--cards .sm-lay__strap { color:var(--sg-color-heading); font-weight:600; }
.sm-lay.background-dark .sm-lay__list--cards .sm-lay__strap { color:var(--sm-on-dark); }
.sm-lay .sm-lay__list--cards .sm-lay__lines { grid-template-columns:1fr; gap:10px; padding-top:20px; border-top:1px solid var(--sm-frame); }
.sm-lay.background-dark .sm-lay__list--cards .sm-lay__lines { border-top-color:var(--sm-frame-dark); }
.sm-lay .sm-lay__list--cards .sm-lay__layer--featured .sm-lay__lines { font-size:inherit; }
@media (max-width: 1023px) {
  .sm-lay .sm-lay__list--cards { grid-template-columns:1fr; gap:18px; }
  .sm-lay .sm-lay__list--cards .sm-lay__layer { padding:26px 24px 30px; gap:16px; }
}

/* =========================================================
   RATIO  (section: Ratio)
   ========================================================= */
.sm-ratio .sm-ratio__row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:24px 40px; align-items:end; max-width:1100px; }
.sm-ratio.sm-centre .sm-ratio__row { margin:0 auto; text-align:center; }
.sm-ratio .sm-ratio__num { min-width:0; }
.sm-ratio .sm-ratio__figure { margin:0 0 12px; font-family:var(--sg-font-heading); font-weight:700; font-size:96px; line-height:.9; letter-spacing:-.03em; color:var(--sg-color-heading); font-variant-numeric:tabular-nums; }
.sm-ratio.background-dark .sm-ratio__figure { color:var(--sm-on-dark); }
.sm-ratio .sm-ratio__num:last-child .sm-ratio__figure { color:var(--sg-btn-bg); }
.sm-ratio .sm-ratio__unit { margin:0; max-width:26ch; color:var(--sg-color-secondary); }
.sm-ratio.background-dark .sm-ratio__unit { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-ratio .sm-ratio__vs { margin:0 0 6px; align-self:end; color:var(--sg-color-secondary); }
.sm-ratio .sm-ratio__bar { position:relative; height:8px; margin:36px 0 0; max-width:1100px; border-radius:4px; background:var(--sm-frame); overflow:hidden; }
.sm-ratio.background-dark .sm-ratio__bar { background:var(--sm-frame-dark); }
.sm-ratio .sm-ratio__bar-a { position:absolute; left:0; top:0; bottom:0; width:var(--sm-ratio-a, 1%); min-width:6px; background:var(--sg-btn-bg); }
.sm-ratio .sm-ratio__line { max-width:640px; margin:28px 0 0; }
.sm-ratio.sm-centre .sm-ratio__line { margin-left:auto; margin-right:auto; text-align:center; }
.sm-ratio .sm-ratio__close { max-width:900px; margin:32px 0 0; font-family:var(--sg-font-heading); font-weight:700; font-size:1.5em; line-height:1.25; color:var(--sg-color-heading); text-wrap:balance; }
.sm-ratio.background-dark .sm-ratio__close { color:var(--sm-on-dark); }
@media (max-width: 1023px) {
  .sm-ratio .sm-ratio__figure { font-size:72px; }
}
@media (max-width: 767px) {
  .sm-ratio .sm-ratio__row { grid-template-columns:1fr; gap:18px; }
  .sm-ratio .sm-ratio__figure { font-size:56px; }
  .sm-ratio .sm-ratio__vs { align-self:start; }
  .sm-ratio .sm-ratio__bar { margin-top:28px; }
  .sm-ratio .sm-ratio__line { margin-top:22px; }
}

/* =========================================================
   PROGRAMME TABLE  (section: Programme table)
   The Design System's table recipe: mono header row, hairlines
   only, tabular figures, no striping, no badge.
   ========================================================= */
.sm-tbl .sm-tbl__wrap { max-width:1100px; }
.sm-tbl.sm-centre .sm-tbl__wrap { margin:0 auto; }
/* a centred head over a table may run a touch wider than the reading measure, so a two-line heading stays two lines */
.sm-tbl.sm-centre .sm-tbl__head { max-width:800px; }
.sm-tbl .sm-tbl__table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; text-align:left; }
.sm-tbl .sm-tbl__table thead th { padding:0 24px 14px 0; vertical-align:bottom; border-bottom:1px solid var(--sm-frame); color:var(--sg-color-heading); white-space:nowrap; }
.sm-tbl.background-dark .sm-tbl__table thead th { border-bottom-color:var(--sm-frame-dark); color:var(--sm-on-dark); }
.sm-tbl .sm-tbl__table tbody th, .sm-tbl .sm-tbl__table tbody td { padding:22px 24px 22px 0; vertical-align:top; border-bottom:1px solid var(--sm-frame); font-weight:400; }
.sm-tbl.background-dark .sm-tbl__table tbody th, .sm-tbl.background-dark .sm-tbl__table tbody td { border-bottom-color:var(--sm-frame-dark); }
.sm-tbl .sm-tbl__table th:last-child, .sm-tbl .sm-tbl__table td:last-child { padding-right:0; }
.sm-tbl .sm-tbl__label { display:block; font-family:var(--sg-font-heading); font-weight:700; font-size:1.375em; line-height:1.15; color:var(--sg-color-heading); white-space:nowrap; }
.sm-tbl.background-dark .sm-tbl__label { color:var(--sm-on-dark); }
.sm-tbl .sm-tbl__sub { display:block; margin-top:6px; }
.sm-tbl .sm-tbl__th-price, .sm-tbl .sm-tbl__price { text-align:right; }
.sm-tbl .sm-tbl__price { font-family:var(--sg-font-heading); font-weight:700; font-size:1.75em; line-height:1.1; color:var(--sg-color-heading); white-space:nowrap; }
.sm-tbl.background-dark .sm-tbl__price { color:var(--sm-on-dark); }
.sm-tbl .sm-tbl__notes { max-width:760px; margin:24px 0 0; }
.sm-tbl .sm-tbl__notes p { margin:0 0 8px; }
.sm-tbl .sm-tbl__notes p:last-child { margin-bottom:0; }
.sm-tbl .sm-tbl__notes a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.sm-tbl .sm-tbl__priceline { margin:22px 0 0; }
.sm-tbl.sm-centre .sm-tbl__notes, .sm-tbl.sm-centre .sm-tbl__priceline { margin-left:auto; margin-right:auto; text-align:center; }
@media (max-width: 1023px) {
  .sm-tbl .sm-tbl__table thead th, .sm-tbl .sm-tbl__table tbody th, .sm-tbl .sm-tbl__table tbody td { padding-right:18px; }
  .sm-tbl .sm-tbl__price { font-size:1.5em; }
}
@media (max-width: 767px) {
  /* each row becomes a small card; the column names return as mono labels */
  .sm-tbl .sm-tbl__table, .sm-tbl .sm-tbl__table tbody, .sm-tbl .sm-tbl__table tr, .sm-tbl .sm-tbl__table th, .sm-tbl .sm-tbl__table td { display:block; }
  .sm-tbl .sm-tbl__table thead { display:none; }
  .sm-tbl .sm-tbl__table tr { padding:20px 0 22px; border-top:1px solid var(--sm-frame); }
  .sm-tbl.background-dark .sm-tbl__table tr { border-top-color:var(--sm-frame-dark); }
  .sm-tbl .sm-tbl__table tr:last-child { border-bottom:1px solid var(--sm-frame); }
  .sm-tbl.background-dark .sm-tbl__table tr:last-child { border-bottom-color:var(--sm-frame-dark); }
  .sm-tbl .sm-tbl__table tbody th, .sm-tbl .sm-tbl__table tbody td { padding:0; border:0; }
  .sm-tbl .sm-tbl__table tbody th { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; }
  .sm-tbl .sm-tbl__table tbody td { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; padding:8px 0; text-align:left; }
  .sm-tbl .sm-tbl__table tbody td::before { content:attr(data-th); font-family:var(--sm-font-mono); font-size:var(--sg-fs-h6); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sg-color-secondary); }
  .sm-tbl.background-dark .sm-tbl__table tbody td::before { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
  .sm-tbl .sm-tbl__price { font-size:1.375em; text-align:left; }
  .sm-tbl .sm-tbl__label { white-space:normal; }
  /* three columns (no hours): the stay and its fee share the first line, the "right for" line sits under them without a label */
  .sm-tbl .sm-tbl__table--3 tr { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label price" "focus focus"; align-items:baseline; column-gap:16px; }
  .sm-tbl .sm-tbl__table--3 tbody th { grid-area:label; display:block; margin-bottom:0; }
  .sm-tbl .sm-tbl__table--3 tbody td { grid-area:focus; display:block; padding:10px 0 0; }
  .sm-tbl .sm-tbl__table--3 tbody td::before { display:none; }
  .sm-tbl .sm-tbl__table--3 tbody td.sm-tbl__price { grid-area:price; padding:0; text-align:right; }
}

/* =========================================================
   STEP CARDS  (section: Step cards)
   The record band's card with a step in it: big accent number,
   title, italic question, copy, and a mono "your part" footer
   pinned to the bottom so the three footers line up.
   ========================================================= */
.sm-sc .sm-sc__head { margin-bottom:56px; }
.sm-sc .sm-sc__grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; align-items:stretch; }
.sm-sc .sm-sc__grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.sm-sc .sm-sc__card { display:flex; flex-direction:column; min-width:0; padding:40px 36px 32px; background:var(--sm-card-light, #fff); border:1px solid var(--sm-frame); border-radius:var(--sm-radius, 12px); }
.sm-sc.background-dark .sm-sc__card { background:var(--sm-card-dark, #111); border-color:var(--sm-frame-dark, rgba(255,255,255,.12)); }
.sm-sc .sm-sc__num { display:block; margin:0 0 22px; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:56px; line-height:1; letter-spacing:-.02em; color:var(--sg-color-primary, #f2c14e); font-variant-numeric:tabular-nums; }
.sm-sc .sm-sc__title { margin:0 0 6px; font-size:24px; line-height:1.2; color:var(--sg-color-heading, #111); }
.sm-sc.background-dark .sm-sc__title { color:#fff; }
.sm-sc .sm-sc__sub { margin:0 0 16px; font-style:italic; font-size:16px; line-height:1.5; color:var(--sg-color-secondary, #6a6967); }
.sm-sc.background-dark .sm-sc__sub { color:rgba(255,255,255,.6); }
.sm-sc .sm-sc__text { font-size:16px; line-height:1.6; color:var(--sg-color-body, #222); }
.sm-sc .sm-sc__text p { margin:0 0 10px; }
.sm-sc .sm-sc__text p:last-child { margin-bottom:0; }
.sm-sc.background-dark .sm-sc__text { color:rgba(255,255,255,.72); }
.sm-sc .sm-sc__text { margin-bottom:28px; }
.sm-sc .sm-sc__part { display:flex; flex-direction:column; gap:6px; margin:auto 0 0; padding:20px 0 0; border-top:1px solid var(--sm-frame); }
.sm-sc.background-dark .sm-sc__part { border-top-color:var(--sm-frame-dark, rgba(255,255,255,.12)); }
.sm-sc .sm-sc__part-label { color:var(--sg-color-secondary, #6a6967); }
.sm-sc.background-dark .sm-sc__part-label { color:rgba(255,255,255,.6); }
.sm-sc .sm-sc__part-value { color:var(--sg-color-heading, #111); }
.sm-sc.background-dark .sm-sc__part-value { color:#fff; }
/* 1024 to 1199: three cards in a row at their narrowest, so the sides come in to keep the text line from getting too short */
@media (min-width: 1024px) and (max-width: 1199px) { .sm-sc .sm-sc__card { padding-left:28px; padding-right:28px; } }
@media (max-width: 1023px) {
  .sm-sc .sm-sc__grid, .sm-sc .sm-sc__grid--4 { grid-template-columns:minmax(0,1fr); gap:16px; }
  .sm-sc .sm-sc__head { margin-bottom:36px; }
}
/* phones: the homepage's card row. One card and a bit in view, swiped sideways, snapping to the text edge;
   the row runs edge to edge (the section's phone gutter, --sm-gutter-l / -r, set at the top of the element) */
@media (max-width: 767px) {
  .sm-sc .sm-sc__grid, .sm-sc .sm-sc__grid--4 { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:82%; gap:12px; margin:0 calc(-1 * var(--sm-gutter-r, 20px)) 0 calc(-1 * var(--sm-gutter-l, 20px)); padding:4px var(--sm-gutter-r, 20px) 6px var(--sm-gutter-l, 20px); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:var(--sm-gutter-l, 20px); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .sm-sc .sm-sc__grid::-webkit-scrollbar { display:none; }
  .sm-sc .sm-sc__card { scroll-snap-align:start; padding:28px 24px 24px; }
  .sm-sc .sm-sc__num { font-size:48px; margin-bottom:18px; }
  .sm-sc .sm-sc__title { font-size:22px; }
  .sm-sc .sm-sc__text { margin-bottom:22px; }
  .sm-sc .sm-sc__part { padding-top:18px; }
}

/* =========================================================
   COMPARISON TABLE  (section: Comparison table)
   Row by row against the usual. The usual is dimmed with a thin
   cross; yours is bright with the accent tick, in a column framed
   in the accent and raised onto the card colour: the frame is
   built from the column's own cells, so it runs unbroken from the
   header to the last row.
   ========================================================= */
.sm-vs .sm-vs__head { margin-bottom:56px; }
.sm-vs .sm-vs__wrap { max-width:1100px; margin:0 auto; }
.sm-vs.sm-left .sm-vs__wrap { margin-left:0; }
.sm-vs .sm-vs__table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; text-align:left; }
.sm-vs .sm-vs__corner { width:220px; padding:0; border-bottom:1px solid var(--sm-frame); }
.sm-vs.background-dark .sm-vs__corner { border-bottom-color:var(--sm-frame-dark); }
.sm-vs .sm-vs__table tbody th, .sm-vs .sm-vs__table tbody td, .sm-vs .sm-vs__col { padding:20px 28px; vertical-align:middle; border-bottom:1px solid var(--sm-frame); }
/* the label sits on the first line of the row: the row aligns on the text's baseline (the cell's text, not its mark,
   gives the cell its baseline), so a row that wraps to two lines keeps the label level with the first */
.sm-vs .sm-vs__table tbody th, .sm-vs .sm-vs__table tbody td { vertical-align:baseline; }
.sm-vs .sm-vs__cell > span:last-child { align-self:baseline; }
.sm-vs.background-dark .sm-vs__table tbody th, .sm-vs.background-dark .sm-vs__table tbody td, .sm-vs.background-dark .sm-vs__col { border-bottom-color:var(--sm-frame-dark); }
.sm-vs .sm-vs__col { padding-top:26px; padding-bottom:20px; vertical-align:bottom; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:22px; line-height:1.2; letter-spacing:0; text-transform:none; }
.sm-vs .sm-vs__col--them { color:var(--sg-color-secondary); }
.sm-vs.background-dark .sm-vs__col--them { color:rgba(255,255,255,.5); }
.sm-vs .sm-vs__col--us { color:var(--sg-color-heading); }
.sm-vs.background-dark .sm-vs__col--us { color:var(--sg-color-primary, #f2c14e); }
.sm-vs .sm-vs__table tbody th.sm-vs__label { padding-left:0; font-weight:500; color:var(--sg-color-secondary); text-wrap:balance; }
.sm-vs.background-dark .sm-vs__table tbody th.sm-vs__label { color:rgba(255,255,255,.6); }
.sm-vs .sm-vs__them, .sm-vs .sm-vs__us { font-size:17px; line-height:1.5; }
.sm-vs .sm-vs__them { color:var(--sg-color-secondary); }
.sm-vs.background-dark .sm-vs__them { color:rgba(255,255,255,.5); }
.sm-vs .sm-vs__us { font-weight:600; color:var(--sg-color-heading); }
.sm-vs.background-dark .sm-vs__us { color:#fff; }
.sm-vs .sm-vs__cell { display:flex; align-items:flex-start; gap:12px; }
.sm-vs .sm-vs__mark { flex:none; display:block; margin-top:4px; }
.sm-vs .sm-vs__mark svg { display:block; width:16px; height:16px; }
.sm-vs .sm-vs__them .sm-vs__mark { opacity:.5; }
.sm-vs .sm-vs__us .sm-vs__mark { color:var(--sg-color-primary, #f2c14e); }
/* yours: one continuous frame in the accent, raised onto the card colour */
.sm-vs .sm-vs__col--us, .sm-vs .sm-vs__us { background:var(--sm-card-light, #fff); border-left:1px solid var(--sg-color-primary, #f2c14e); border-right:1px solid var(--sg-color-primary, #f2c14e); }
.sm-vs.background-dark .sm-vs__col--us, .sm-vs.background-dark .sm-vs__us { background:var(--sm-card-dark, #111); }
.sm-vs .sm-vs__col--us { border-top:1px solid var(--sg-color-primary, #f2c14e); border-radius:var(--sm-radius, 12px) var(--sm-radius, 12px) 0 0; }
.sm-vs .sm-vs__table tbody tr:last-child .sm-vs__us { border-bottom:1px solid var(--sg-color-primary, #f2c14e); border-radius:0 0 var(--sm-radius, 12px) var(--sm-radius, 12px); }
.sm-vs .sm-vs__table tbody tr:last-child th, .sm-vs .sm-vs__table tbody tr:last-child .sm-vs__them { border-bottom-color:transparent; }
/* the fee: the framed column's last row, the price set large on the label's baseline */
.sm-vs .sm-vs__table tbody td.sm-vs__fee { padding-top:26px; padding-bottom:28px; }
.sm-vs .sm-vs__fee-num { display:block; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:48px; line-height:1; letter-spacing:-.03em; color:var(--sg-color-heading); white-space:nowrap; }
.sm-vs.background-dark .sm-vs__fee-num { color:#fff; }
.sm-vs .sm-vs__fee-note { display:block; margin-top:12px; font-weight:500; color:var(--sg-color-secondary); }
.sm-vs.background-dark .sm-vs__fee-note { color:rgba(255,255,255,.62); }
.sm-vs .sm-vs__total { max-width:760px; margin:40px auto 0; text-align:center; font-family:var(--sg-font-body, Inter, sans-serif); font-size:20px; line-height:1.4; font-weight:600; color:var(--sg-color-heading); }
.sm-vs.background-dark .sm-vs__total { color:#fff; }
.sm-vs .sm-vs__foot { max-width:760px; margin:12px auto 0; text-align:center; color:var(--sg-color-secondary); }
.sm-vs.background-dark .sm-vs__foot { color:rgba(255,255,255,.6); }
/* no closing line: the small print takes its place under the table, at its distance (phones keep 12px: the last row's own padding makes up the rest) */
@media (min-width: 768px) { .sm-vs .sm-vs__wrap + .sm-vs__foot { margin-top:40px; } }
.sm-vs.sm-left .sm-vs__total, .sm-vs.sm-left .sm-vs__foot { margin-left:0; text-align:left; }
@media (max-width: 1279px) {
  .sm-vs .sm-vs__corner { width:200px; }
  .sm-vs .sm-vs__table tbody td, .sm-vs .sm-vs__col { padding-left:22px; padding-right:22px; }
}
@media (max-width: 1023px) {
  .sm-vs .sm-vs__corner { width:170px; }
  .sm-vs .sm-vs__table tbody td, .sm-vs .sm-vs__col { padding:16px 18px; }
  .sm-vs .sm-vs__table tbody th { padding-top:16px; padding-bottom:16px; }
  /* 20px, easing down just below 820 so a title as long as "The 30-Day Reset" (11.7 times the size) stays on one line at 768 */
  .sm-vs .sm-vs__col { font-size:min(20px, calc((50vw - 163px) / 11.9)); }
  .sm-vs .sm-vs__them, .sm-vs .sm-vs__us { font-size:16px; }
  .sm-vs .sm-vs__fee-num { font-size:40px; }
}
/* phones: the label runs across each row, the two sides sit under it; the frame gives way to the tick and the brighter type */
@media (max-width: 767px) {
  .sm-vs .sm-vs__head { margin-bottom:32px; }
  .sm-vs .sm-vs__table, .sm-vs .sm-vs__table thead, .sm-vs .sm-vs__table tbody { display:block; }
  .sm-vs .sm-vs__table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; border-bottom:1px solid var(--sm-frame); }
  .sm-vs.background-dark .sm-vs__table tr { border-bottom-color:var(--sm-frame-dark); }
  .sm-vs .sm-vs__table thead th, .sm-vs .sm-vs__table thead td, .sm-vs .sm-vs__table tbody th, .sm-vs .sm-vs__table tbody td { display:block; padding:0; border:0 !important; border-radius:0 !important; background:none !important; }
  .sm-vs .sm-vs__table thead td.sm-vs__corner { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .sm-vs .sm-vs__table thead tr { padding:0 0 14px; }
  .sm-vs .sm-vs__table tbody tr { padding:18px 0; }
  .sm-vs .sm-vs__table tbody tr:last-child { border-bottom:0; }
  .sm-vs .sm-vs__col { font-size:18px; }
  .sm-vs .sm-vs__table tbody th.sm-vs__label { grid-column:1 / -1; margin:0 0 10px; padding:0; }
  .sm-vs .sm-vs__them, .sm-vs .sm-vs__us { font-size:15px; line-height:1.45; }
  .sm-vs .sm-vs__cell { gap:8px; }
  .sm-vs .sm-vs__mark { margin-top:3px; }
  .sm-vs .sm-vs__mark svg { width:14px; height:14px; }
  .sm-vs .sm-vs__total { margin-top:28px; font-size:18px; }
  /* the fee row: its label across the top, then the fee in a framed box the full width of the row */
  .sm-vs .sm-vs__table tbody tr.sm-vs__fee-row .sm-vs__them { display:none; }
  .sm-vs .sm-vs__table tbody td.sm-vs__fee { grid-column:1 / -1; padding:22px 20px 20px !important; border:1px solid var(--sg-color-primary, #f2c14e) !important; border-radius:var(--sm-radius, 12px) !important; background:var(--sm-card-light, #fff) !important; }
  .sm-vs.background-dark .sm-vs__table tbody td.sm-vs__fee { background:var(--sm-card-dark, #111) !important; }
  .sm-vs .sm-vs__fee-num { font-size:40px; }
}

/* =========================================================
   PROMISE BOX  (section: Promise box)
   ========================================================= */
.sm-prom .sm-prom__box { max-width:900px; padding:36px 40px 32px; border:1px solid var(--sm-frame-hover); border-radius:var(--sm-radius); background:var(--sm-card-light); }
.sm-prom.sm-centre .sm-prom__box { margin:0 auto; }
.sm-prom.background-dark .sm-prom__box { background:var(--sm-card-dark); border-color:var(--sm-frame-hover-dark); }
.sm-prom .sm-prom__box { position:relative; }
.sm-prom .sm-prom__seal { position:absolute; top:28px; right:32px; width:120px; height:120px; color:var(--sg-color-heading); }
.sm-prom.background-dark .sm-prom__seal { color:#fff; }
.sm-prom .sm-prom__seal-bg { fill:var(--sm-seal-paper, transparent); }
.sm-prom .sm-prom__seal-centre { fill:var(--sm-seal-paper, #fff); }
.sm-prom .sm-prom__seal-ring { font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:8.5px; font-weight:600; letter-spacing:.18em; fill:currentColor; white-space:pre; }
.sm-prom .sm-prom__seal-centre { font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.sm-prom .sm-prom__seal ~ .sm-prom__label { padding-right:160px; }
@media (max-width: 767px) {
  .sm-prom .sm-prom__seal { position:static; display:block; width:96px; height:96px; margin:0 auto 20px; }
  .sm-prom .sm-prom__seal ~ .sm-prom__label { padding-right:0; }
}
/* Statement: head left (the heading is the promise), a mono line under it, the seal large on the right;
   on phones the seal comes first, centred, then the words */
@media (min-width: 1024px) {
  .sm-prom--statement .container { display:grid; grid-template-columns:minmax(0,1fr) 220px; grid-template-areas:"head seal" "sign seal" "role seal" "foot seal" "actions actions"; column-gap:96px; align-items:center; }
  .sm-prom--statement .sm-prom__head { grid-area:head; }
  .sm-prom--statement .sm-prom__sign { grid-area:sign; }
  .sm-prom--statement .sm-prom__sign-role { grid-area:role; }
  .sm-prom--statement .sm-prom__stmt-foot { grid-area:foot; }
  .sm-prom--statement .sm-prom__stmt-seal { grid-area:seal; }
  .sm-prom--statement .sm-prom__actions { grid-area:actions; }
  .sm-prom--statement.sm-centre .container { grid-template-columns:minmax(0,1fr); grid-template-areas:"seal" "head" "sign" "role" "foot" "actions"; justify-items:center; }
}
.sm-prom--statement .sm-prom__head { margin-bottom:0; }
.sm-prom--statement .sm-head__heading { max-width:none; }
.sm-prom--statement .sm-head__intro { max-width:640px; }
/* the signature gets a taller line and a little room beneath, so its descenders never run into the next line */
.sm-prom--statement .sm-prom__sign { margin:32px 0 0; line-height:1.2; padding-bottom:14px; }
.sm-prom--statement .sm-prom__sign-role { margin:2px 0 0; color:var(--sg-color-heading); }
.sm-prom--statement.background-dark .sm-prom__sign-role { color:var(--sm-on-dark); }
.sm-prom--statement .sm-prom__stmt-foot { margin:28px 0 0; color:var(--sg-color-secondary); }
.sm-prom--statement .sm-prom__sign + .sm-prom__stmt-foot { margin-top:18px; }
.sm-prom--statement .sm-prom__sign-role + .sm-prom__stmt-foot { margin-top:22px; }
.sm-prom--statement.background-dark .sm-prom__stmt-foot { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-prom--statement .sm-prom__stmt-seal .sm-prom__seal { position:static; display:block; width:220px; height:220px; margin:0 0 0 auto; }
.sm-prom--statement.sm-centre .sm-prom__stmt-seal .sm-prom__seal { margin:0 auto 40px; }
/* tablets and phones: the promise opens the section; the seal sits beside the signature and title, centred on them */
@media (max-width: 1023px) {
  .sm-prom--statement .container { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head head" "sign seal" "role seal" "foot foot" "actions actions"; column-gap:24px; }
  .sm-prom--statement .sm-prom__head { grid-area:head; margin-bottom:32px; }
  .sm-prom--statement .sm-prom__sign { grid-area:sign; margin-top:0; align-self:end; white-space:nowrap; }
  .sm-prom--statement .sm-prom__sign-role { grid-area:role; align-self:start; }
  .sm-prom--statement .sm-prom__stmt-foot { grid-area:foot; margin-top:22px; }
  .sm-prom--statement .sm-prom__stmt-seal { grid-area:seal; align-self:center; }
  .sm-prom--statement .sm-prom__actions { grid-area:actions; }
  .sm-prom--statement .sm-prom__stmt-seal .sm-prom__seal { width:120px; height:120px; margin:0; }
  .sm-prom--statement.sm-centre .container { grid-template-columns:minmax(0,1fr); grid-template-areas:"seal" "head" "sign" "role" "foot" "actions"; justify-items:center; }
  .sm-prom--statement.sm-centre .sm-prom__stmt-seal { margin-bottom:32px; }
}
@media (max-width: 767px) {
  .sm-prom--statement .container { column-gap:16px; }
  .sm-prom--statement .sm-prom__stmt-seal .sm-prom__seal { width:88px; height:88px; }
}
.sm-prom .sm-prom__label { margin:0 0 22px; color:var(--sg-btn-bg); }
.sm-prom .sm-prom__list { list-style:none; margin:0; padding:0; }
.sm-prom .sm-prom__item { display:grid; grid-template-columns:48px minmax(0,1fr); gap:0 16px; padding:18px 0; border-top:1px solid var(--sm-frame); }
.sm-prom.background-dark .sm-prom__item { border-top-color:var(--sm-frame-dark); }
.sm-prom .sm-prom__num { margin:5px 0 0; color:var(--sg-color-secondary); }
.sm-prom.background-dark .sm-prom__num { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }
.sm-prom .sm-prom__title { margin:0 0 4px; font-size:var(--sg-fs-h4); }
.sm-prom .sm-prom__text { margin:0; max-width:56ch; }
.sm-prom .sm-prom__foot { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--sm-frame); }
.sm-prom.background-dark .sm-prom__foot { border-top-color:var(--sm-frame-dark); }
/* Gold band: the box is framed in black on the accent colour, everything inside in ink; the eyebrow rule
   goes black too, since an accent rule on the accent would vanish */
.sm-prom.sm-accent .sm-head__heading, .sm-prom.sm-accent .sm-head__eyebrow, .sm-prom.sm-accent .sm-head__intro { color:#111; }
.sm-prom.sm-accent .sm-rule { background:#111; }
.sm-prom.sm-accent .sm-prom__box { background:transparent; border:1px solid rgba(17,17,17,.55); }
.sm-prom.sm-accent .sm-prom__label { color:#111; }
.sm-prom.sm-accent .sm-prom__seal { color:#111; }
.sm-prom.sm-accent .sm-prom__item { border-top-color:rgba(17,17,17,.22); }
.sm-prom.sm-accent .sm-prom__num { color:rgba(17,17,17,.6); }
.sm-prom.sm-accent .sm-prom__title { color:#111; }
.sm-prom.sm-accent .sm-prom__text { color:#222; }
.sm-prom.sm-accent .sm-prom__foot { color:rgba(17,17,17,.7); border-top-color:rgba(17,17,17,.22); }
/* the note under the button on the gold band: the grey of the light sections is 3.3:1 on gold, this is 6.3:1 */
.sm-prom.sm-accent .sm-btn-note { color:rgba(17,17,17,.75); }
@media (max-width: 767px) {
  .sm-prom .sm-prom__box { padding:24px 20px 22px; }
  .sm-prom .sm-prom__item { grid-template-columns:36px minmax(0,1fr); gap:0 12px; padding:16px 0; }
}

/* Feature cards: a full-width card without a photo keeps its list across the row in three columns */
.sm-fc .sm-fc__card--wide:not(:has(.sm-fc__media)) { grid-template-columns:1fr; }
@media (min-width: 1024px) {
  .sm-fc .sm-fc__card--wide:not(:has(.sm-fc__media)) .sm-fc__list { grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; }
}
/* Video cards: a caption written as “DATE — what you are watching” splits into the mono date line and a plain line under it */
.sm-vc .sm-vc__note { margin:8px 0 0; font-size:.9375em; line-height:1.5; color:var(--sg-color-secondary); }
.sm-vc.background-dark .sm-vc__note { color:color-mix(in srgb, var(--sm-on-dark) 72%, transparent); }

/* =========================================================
   COVERAGE MAP  (section: Coverage map)
   The head and the ways to get here on one side, a map of
   Great Britain on the other: base in the accent colour (it
   pulses three times when the map first comes into view),
   routes out to the cities, city names in the mono label face.
   The copy sits centred against the map's height. The map's
   colours come from the surface, and three label sets, each
   drawn for its size and clear of every route, keep the names
   at 11-13px whatever width the map is drawn at.
   ========================================================= */
.sm-cov { --cov-land:#F4EFE2; --cov-coast:#DDD5C2; --cov-route:var(--sg-color-primary, #f2c14e); --cov-dot:var(--sg-color-heading, #111); --cov-name:color-mix(in srgb, var(--sg-color-secondary, #6a6967) 80%, var(--sg-color-heading, #111)); --cov-ink:var(--sg-color-heading, #111); --cov-ring:#fff; }
.sm-cov.sm-cov--tint, .sm-cov.sm-cov--card { --cov-land:#F1E9D8; --cov-coast:#D8CEB8; }
.sm-cov.background-dark { --cov-land:rgba(255,255,255,.07); --cov-coast:rgba(255,255,255,.16); --cov-dot:#fff; --cov-name:rgba(255,255,255,.6); --cov-ink:#fff; --cov-ring:#000; }
/* the map column and the gap scale with the window (400px and 64px at 1024, 500px and 96px from 1280), so the copy column never drops below the heading's longest line */
.sm-cov .sm-cov__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(400px, 39vw, 500px)); grid-template-rows:1fr auto auto auto 1fr; grid-template-areas:". map" "head map" "ways map" "actions map" ". map"; column-gap:clamp(64px, 7.5vw, 96px); }
.sm-cov .sm-cov__grid--map-left { grid-template-columns:minmax(0,clamp(400px, 39vw, 500px)) minmax(0,1fr); grid-template-areas:"map ." "map head" "map ways" "map actions" "map ."; }
.sm-cov .sm-cov__head { grid-area:head; max-width:560px; margin:0 0 40px; }
.sm-cov .sm-cov__map { grid-area:map; align-self:center; margin:0; min-width:0; container-type:inline-size; }
.sm-cov .sm-cov__svg, .sm-cov .sm-cov__img { display:block; width:100%; height:auto; }
.sm-cov .sm-cov__svg { overflow:visible; }
.sm-cov .sm-cov__land { fill:var(--cov-land); stroke:var(--cov-coast); stroke-width:.8; stroke-linejoin:round; }
.sm-cov .sm-cov__routes path { fill:none; stroke:var(--cov-route); stroke-width:1.3; stroke-linecap:round; }
.sm-cov .sm-cov__dots circle { fill:var(--cov-dot); }
.sm-cov .sm-cov__names text, .sm-cov .sm-cov__pin-note { fill:var(--cov-name); font-family:var(--sm-font-mono, "Geist Mono", monospace); font-weight:500; }
.sm-cov .sm-cov__pin-label { fill:var(--cov-ink); font-family:var(--sm-font-mono, "Geist Mono", monospace); font-weight:600; }
.sm-cov .sm-cov__halo { fill:var(--cov-route); opacity:.22; }
.sm-cov .sm-cov__pulse { fill:none; stroke:var(--cov-route); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.sm-cov .sm-cov__pin { fill:var(--cov-route); stroke:var(--cov-ring); stroke-width:2.5; }
@media (prefers-reduced-motion: no-preference) {
  /* three pulses when the map first comes into view (sm.js adds .is-seen): 4.8 seconds in all, then still */
  .sm-cov .sm-cov__map.is-seen .sm-cov__pulse { animation:sm-cov-pulse 1.6s cubic-bezier(.2,.6,.3,1) 3; }
}
@keyframes sm-cov-pulse { 0% { transform:scale(.55); opacity:.7; } 70% { transform:scale(1.6); opacity:0; } 100% { transform:scale(1.6); opacity:0; } }
.sm-cov .sm-cov__ways { grid-area:ways; list-style:none; margin:0; padding:0; border-top:1px solid var(--sm-frame); max-width:560px; }
.sm-cov .sm-cov__way { padding:24px 0 26px; border-bottom:1px solid var(--sm-frame); }
.sm-cov.background-dark .sm-cov__ways, .sm-cov.background-dark .sm-cov__way { border-color:var(--sm-frame-dark, rgba(255,255,255,.12)); }
.sm-cov .sm-cov__way-top { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 12px; }
.sm-cov .sm-cov__way-title { margin:0; font-size:24px; line-height:1.2; color:var(--sg-color-heading, #111); }
.sm-cov.background-dark .sm-cov__way-title { color:#fff; }
.sm-cov .sm-cov__tag { color:var(--sg-color-secondary, #6a6967); white-space:nowrap; }
.sm-cov.background-dark .sm-cov__tag { color:rgba(255,255,255,.6); }
.sm-cov .sm-cov__way-text { font-size:16px; line-height:1.6; color:var(--sg-color-body, #222); }
.sm-cov .sm-cov__way-text p { margin:0 0 10px; }
.sm-cov .sm-cov__way-text p:last-child { margin-bottom:0; }
.sm-cov.background-dark .sm-cov__way-text { color:rgba(255,255,255,.72); }
.sm-cov .sm-cov__actions { grid-area:actions; margin-top:40px; }
/* tablets and phones: one column — head, map, then the ways at the copy's measure */
@media (max-width: 1023px) {
  .sm-cov .sm-cov__grid, .sm-cov .sm-cov__grid--map-left { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"head" "map" "ways" "actions"; }
  .sm-cov .sm-cov__head { margin-bottom:40px; }
  .sm-cov .sm-cov__map { width:100%; max-width:460px; margin:0 0 48px; }
}
@media (max-width: 767px) {
  .sm-cov .sm-cov__head { margin-bottom:32px; }
  /* the heading keeps its two short sentences, one to a line, and scales to fit the measure (30px from 380 up) */
  .sm-cov .sm-head .sm-head__heading br { display:inline; }
  .sm-cov .sm-head .sm-head__heading { font-size:min(30px, 7.9vw); }
  .sm-cov .sm-cov__map { max-width:none; margin-bottom:36px; }
  .sm-cov .sm-cov__way { padding:22px 0 24px; }
  .sm-cov .sm-cov__way-title { font-size:22px; }
}
/* Map labels: three sets, each drawn for its own size and placed clear of every route. Wide for maps 480px and
   up; narrow for 400-479 (1024-1230 beside the copy, and tablets); phone under 400. The container queries decide;
   a phone browser without them falls back on the phone set through the media query. */
.sm-cov .sm-cov__names--narrow, .sm-cov .sm-cov__pin-label--narrow, .sm-cov .sm-cov__pin-note--narrow,
.sm-cov .sm-cov__names--phone, .sm-cov .sm-cov__pin-label--phone, .sm-cov .sm-cov__pin-note--phone { display:none; }
@media (max-width: 767px) {
  .sm-cov .sm-cov__names--wide, .sm-cov .sm-cov__pin-label--wide, .sm-cov .sm-cov__pin-note--wide { display:none; }
  .sm-cov .sm-cov__names--phone, .sm-cov .sm-cov__pin-label--phone, .sm-cov .sm-cov__pin-note--phone { display:inline; }
  .sm-cov .sm-cov__routes path { stroke-width:2; }
}
@container (min-width: 480px) {
  .sm-cov .sm-cov__names--wide, .sm-cov .sm-cov__pin-label--wide, .sm-cov .sm-cov__pin-note--wide { display:inline; }
  .sm-cov .sm-cov__names--narrow, .sm-cov .sm-cov__pin-label--narrow, .sm-cov .sm-cov__pin-note--narrow,
  .sm-cov .sm-cov__names--phone, .sm-cov .sm-cov__pin-label--phone, .sm-cov .sm-cov__pin-note--phone { display:none; }
  .sm-cov .sm-cov__routes path { stroke-width:1.3; }
}
@container (min-width: 400px) and (max-width: 479.98px) {
  .sm-cov .sm-cov__names--narrow, .sm-cov .sm-cov__pin-label--narrow, .sm-cov .sm-cov__pin-note--narrow { display:inline; }
  .sm-cov .sm-cov__names--wide, .sm-cov .sm-cov__pin-label--wide, .sm-cov .sm-cov__pin-note--wide,
  .sm-cov .sm-cov__names--phone, .sm-cov .sm-cov__pin-label--phone, .sm-cov .sm-cov__pin-note--phone { display:none; }
  .sm-cov .sm-cov__routes path { stroke-width:1.8; }
}
@container (max-width: 399.98px) {
  .sm-cov .sm-cov__names--phone, .sm-cov .sm-cov__pin-label--phone, .sm-cov .sm-cov__pin-note--phone { display:inline; }
  .sm-cov .sm-cov__names--wide, .sm-cov .sm-cov__pin-label--wide, .sm-cov .sm-cov__pin-note--wide,
  .sm-cov .sm-cov__names--narrow, .sm-cov .sm-cov__pin-label--narrow, .sm-cov .sm-cov__pin-note--narrow { display:none; }
  .sm-cov .sm-cov__routes path { stroke-width:2; }
}

/* =========================================================
   HERO WITH PHOTO  (section: Hero with photo)
   The promise stacked large on the left, a portrait on the
   right with the guarantee seal turning on its edge, the proof
   as short numbers. Tablets and phones: the photo is the cover
   and the heading rises over its foot. --sm-hp-bg is the
   section's surface, so the photo fades into it.
   ========================================================= */
.sm-hp { overflow:hidden; }
.sm-hp .sizer { position:relative; }
.sm-hp .sizer::after { /* a fine film grain over the whole screen, photo included */ content:""; position:absolute; inset:0; z-index:3; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sm-hp .sm-hp__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:64px; align-items:center; max-width:1260px; margin:0 auto; }
.sm-hp .sm-hp__copy { min-width:0; }
.sm-hp .sm-hp__eyebrow { margin:0; color:var(--sm-on-dark, #fff); }
.sm-hp .sm-hp__rule { margin:20px 0 0; }
.sm-hp .sm-hp__heading { margin:30px 0 26px; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:clamp(44px, 5.6vw, 82px); line-height:.94; letter-spacing:-.04em; color:var(--sm-on-dark, #fff); text-wrap:initial; }
.sm-hp .sm-hp__gold { color:var(--sg-color-primary, #F2C14E); }
.sm-hp .sm-hp__intro { max-width:28em; font-size:20px; line-height:1.55; color:color-mix(in srgb, var(--sm-on-dark, #fff) 70%, transparent); }
.sm-hp .sm-hp__intro p { margin:0; }
.sm-hp .sm-hp__actions { display:flex; align-items:center; flex-wrap:wrap; gap:30px; margin-top:34px; }
.sm-hp .sm-hp__watch { display:inline-flex; align-items:center; gap:12px; padding-bottom:7px; border-bottom:1px solid var(--sg-color-primary, #F2C14E); color:var(--sm-on-dark, #fff); text-decoration:none; }
.sm-hp .sm-hp__watch-icon { width:0; height:0; border-left:8px solid var(--sg-color-primary, #F2C14E); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.sm-hp .sm-hp__note { margin:14px 0 0; color:color-mix(in srgb, var(--sm-on-dark, #fff) 60%, transparent); }
.sm-hp .sm-hp__proof { display:grid; grid-auto-flow:column; grid-auto-columns:max-content; margin-top:44px; border-top:1px solid color-mix(in srgb, var(--sm-on-dark, #fff) 14%, transparent); }
.sm-hp .sm-hp__stat { display:flex; flex-direction:column; padding:22px 34px 0 0; }
.sm-hp .sm-hp__stat + .sm-hp__stat { padding-left:34px; border-left:1px solid color-mix(in srgb, var(--sm-on-dark, #fff) 14%, transparent); }
.sm-hp .sm-hp__stat:last-child { padding-right:0; }
.sm-hp .sm-hp__num { font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:38px; line-height:1; letter-spacing:-.03em; color:var(--sm-on-dark, #fff); }
.sm-hp .sm-hp__stat-label { margin-top:12px; font-size:11px; line-height:1.45; color:color-mix(in srgb, var(--sm-on-dark, #fff) 68%, transparent); }
.sm-hp .sm-hp__photo { position:relative; margin:0; min-width:0; }
.sm-hp .sm-hp__frame { position:relative; z-index:1; aspect-ratio:4/5; overflow:hidden; border-radius:12px; background:#1A1A1A; }
.sm-hp .sm-hp__img { display:block; width:100%; height:100%; object-fit:cover; }
.sm-hp .sm-hp__frame::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 42%); pointer-events:none; }
.sm-hp .sm-hp__caption { position:absolute; right:24px; bottom:22px; z-index:2; margin:0; font-size:11px; color:rgba(255,255,255,.86); }
.sm-hp .sm-hp__big { position:absolute; z-index:0; right:-70px; top:-150px; font-family:var(--sg-font-heading, Menda, sans-serif); font-weight:700; font-size:600px; line-height:.78; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--sm-on-dark, #fff) 9%, transparent); pointer-events:none; user-select:none; }
.sm-hp .sm-hp__seal { position:absolute; z-index:2; left:-72px; bottom:84px; width:156px; height:156px; color:var(--sm-on-dark, #fff); }
.sm-hp .sm-hp__seal svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-hp .sm-hp__seal-bg { fill:var(--sm-hp-bg, #000); }
.sm-hp .sm-hp__seal-ring text { font-family:var(--sm-font-mono, "Geist Mono", monospace); font-size:8.6px; font-weight:600; letter-spacing:.19em; fill:currentColor; white-space:pre; }
.sm-hp .sm-hp__seal-centre circle { fill:var(--sg-color-primary, #F2C14E); }
.sm-hp .sm-hp__seal-centre text { font-family:var(--sg-font-heading, Menda, sans-serif); font-size:17px; font-weight:700; letter-spacing:-.02em; fill:var(--sg-color-heading, #111); }
@media (prefers-reduced-motion: no-preference) { .sm-hp .sm-hp__seal-ring { animation:sm-hp-spin 26s linear infinite; } }
@keyframes sm-hp-spin { to { transform:rotate(360deg); } }
/* 1024 to 1099: the copy column is at its narrowest, so the button and the film link sit a little closer to stay on one row */
@media (max-width: 1099px) { .sm-hp .sm-hp__actions { column-gap:24px; } }
/* tablets and phones: the photo is the cover, edge to edge, and the heading rises over its foot */
@media (max-width: 1023px) {
  .sm-hp .sm-hp__grid { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .sm-hp .sm-hp__photo { order:-1; margin:0 0 -180px; }
  .sm-hp .sm-hp__frame { aspect-ratio:auto; height:600px; border-radius:0; }
  .sm-hp .sm-hp__frame::after { background:linear-gradient(to top, var(--sm-hp-bg, #000) 4%, color-mix(in srgb, var(--sm-hp-bg, #000) 72%, transparent) 32%, transparent 62%); }
  .sm-hp .sm-hp__caption, .sm-hp .sm-hp__big { display:none; }
  .sm-hp .sm-hp__seal { left:auto; right:32px; bottom:auto; top:32px; width:132px; height:132px; }
  .sm-hp .sm-hp__copy { position:relative; z-index:2; padding:0 40px; }
}
@media (max-width: 767px) {
  .sm-hp .sm-hp__photo { margin-bottom:-148px; }
  .sm-hp .sm-hp__frame { height:470px; }
  .sm-hp .sm-hp__seal { right:16px; top:16px; width:104px; height:104px; }
  .sm-hp .sm-hp__copy { padding:0 var(--sm-gutter-r, 20px) 0 var(--sm-gutter-l, 20px); }
  /* 40px from 375 up; narrower phones (360, 320) scale it so the longest line ("Don’t give up", 8.2 times the type size) still fits between the gutters */
  .sm-hp .sm-hp__heading { margin:20px 0; font-size:min(40px, calc((100vw - var(--sm-gutter-l, 20px) - var(--sm-gutter-r, 20px)) / 8.3)); }
  .sm-hp .sm-hp__intro { font-size:17px; }
  .sm-hp .sm-hp__actions { flex-direction:column; align-items:stretch; gap:20px; margin-top:30px; }
  .sm-hp .sm-hp__btn { width:100%; justify-content:center; }
  .sm-hp .sm-hp__watch { align-self:center; }
  .sm-hp .sm-hp__note { text-align:center; }
  .sm-hp .sm-hp__proof { display:none; }
  .sm-hp .sm-hp__proof--phones { display:grid; grid-auto-columns:minmax(0,1fr); margin-top:40px; }
  .sm-hp .sm-hp__proof--phones .sm-hp__stat { padding:18px 10px 0 0; }
  .sm-hp .sm-hp__proof--phones .sm-hp__stat + .sm-hp__stat { padding-left:12px; }
  .sm-hp .sm-hp__proof--phones .sm-hp__num { font-size:26px; }
  .sm-hp .sm-hp__proof--phones .sm-hp__stat-label { font-size:9.5px; letter-spacing:.1em; }
}

/* =========================================================
   STICKY BAR  (section: Sticky bar)
   Fixed to the viewport, so it lives outside the section
   flow; the section itself has no height. Kajabi's overflow
   rule (see STICKY ELEMENTS above) doesn't affect fixed
   elements.
   The bar itself never moves: it fades in and out, and only
   its contents rise. On phones (iOS Safari especially) a
   fixed element that is being transformed while the page
   scrolls can come loose from the foot of the screen and sit
   part-way up it until the scroll stops, so the transform
   lives on the inner row. html.sm-sb-page (set once, as the
   page loads) pads the page so the footer's last line isn't
   covered; it never changes while the reader scrolls.
   ========================================================= */
.sm-sb-section { min-height:0; }
.sm-sb { position:fixed; left:0; right:0; bottom:0; z-index:90; color:var(--sm-on-dark); padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -12px 32px -12px rgba(0,0,0,.45); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--sm-ease), visibility 0s linear .3s; }
.sm-sb.sm-sb--on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s var(--sm-ease), visibility 0s linear 0s; }
.sm-sb__inner { display:flex; align-items:center; justify-content:center; gap:22px; max-width:1200px; margin:0 auto; padding:12px 24px; transform:translateY(14px); transition:transform .45s var(--sm-ease); }
.sm-sb.sm-sb--on .sm-sb__inner { transform:none; }
.sm-sb__text { margin:0; font-size:.9375em; letter-spacing:.02em; color:color-mix(in srgb, var(--sm-on-dark) 82%, transparent); }
.sm-sb__btn { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.sm-sb__arrow { display:block; transition:transform var(--sm-dur) var(--sm-ease); }
.sm-sb__arrow svg { display:block; }
.sm-sb__btn:hover .sm-sb__arrow { transform:translateX(4px); }
html.sm-sb-page body { padding-bottom:72px; }
@media (prefers-reduced-motion: reduce) { .sm-sb, .sm-sb__inner { transition:none; } .sm-sb__inner { transform:none; } .sm-sb__arrow { transition:none !important; } }
@media (max-width: 767px) {
  .sm-sb__inner { gap:12px; padding:10px 14px; }
  .sm-sb__text { display:none; }
  .sm-sb__btn { width:100%; justify-content:center; }
  html.sm-sb-page body { padding-bottom:64px; }
}

/* =========================================================
   PHONES — the homepage's reading size
   Under 768px the sales-page elements read at the homepage's
   body size, 16px on 1.6: the lead size (18px) and the
   qualifier's lines (17px) are for wider screens, where the
   measure is long. Last in the file so it wins at the same
   specificity. (The 20px text edge on phones is set on each
   section's container by the padding defaults at the top of
   every element.)
   ========================================================= */
@media (max-width: 767px) {
  .sm-lead { font-size:1em; line-height:1.6; }
  .sm-q .sm-q__line { font-size:1em; line-height:1.6; }
  /* two headings carry longer lines than the rest, so they step down to keep their shape in the 20px gutters:
     the record band's three beats stay three lines ("Five hundred dogs." fits the phone measure at every width),
     and the guarantee's sentence sets in five balanced lines instead of seven ragged ones */
  .sm-proof--cards .sm-proof__heading { font-size:min(30px, 7.1vw); }
  .sm-prom--statement .sm-head__heading { font-size:28px; }
}

/* =========================================================
   THE LIBRARY (4 Oct 2026, v3: the audit fixes Scott approved) — /library only.
   Native underneath: Kajabi products grid, sm_hero, sm_video_cards, sm_cta_banner.
   Scott keeps: the three background bands, the #071615 strip, the placeholder films.
   ========================================================= */
#section-1790700000001 .sizer { padding-top: 88px !important; padding-bottom: 80px !important; }
#section-1790700000001 .sm-hero__heading { font-size: clamp(40px, 6vw, 68px) !important; line-height: 1.05 !important; }
#section-1790700000001 .sm-hero__intro { margin-top: 16px !important; }
#section-1790700000001 .sm-hero__intro p { font-size: 18px !important; color: rgba(255,255,255,.75) !important; }
#section-1790700000002 .sizer { padding: 48px 0 44px !important; }
#section-1790700000002 .products__header { margin-bottom: 26px; }
#section-1790700000002 .products__title { margin: 0; font-family: var(--sm-font-mono, "Geist Mono", monospace); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #111; }
#section-1790700000002 .products__title::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 14px; background: #F2C14E; }
#section-1790700000002 .products__list { row-gap: 20px; }
#section-1790700000002 .product { position: relative; background: #fff; border: 1px solid #E7E3DA !important; border-radius: 6px !important; box-shadow: 0 10px 30px rgba(17,17,17,.06) !important; padding: 24px 26px 22px; }
#section-1790700000002 .product > a:first-child { position: absolute; top: 24px; right: 24px; display: block; }
#section-1790700000002 .product__image { width: 86px; height: 86px; border-radius: 4px; overflow: hidden; background: #111; position: relative; }
#section-1790700000002 .product__image img { width: 86px; height: 86px; object-fit: cover; object-position: 50% 20%; display: block; }
#section-1790700000002 .product__image img[src*="placeholder"] { display: none; }
#section-1790700000002 .product__image::after { content: ""; position: absolute; inset: 0; background: url("https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/sites/2148921347/images/078c30-781b-7512-878c-fa407207f82_smdt_logo.png") center / 40px auto no-repeat; opacity: .9; }
#section-1790700000002 .product__image:not(:has(img[src*="placeholder"]))::after { content: none; }
#section-1790700000002 .smlib-kick { font-family: var(--sm-font-mono, "Geist Mono", monospace); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8a6d1c; margin: 0 0 8px; padding-right: 104px; }
#section-1790700000002 .product__title { font-size: 26px !important; line-height: 1.15; margin: 0 0 8px !important; padding-right: 104px; color: #111; }
#section-1790700000002 .product__body { font-size: 14px !important; color: #6A6967; line-height: 1.55; }
#section-1790700000002 .product__body p { margin: 0 0 6px; padding-right: 104px; }
#section-1790700000002 .product__button { padding-top: 18px; margin-top: 0 !important; }
#section-1790700000002 .product__content, #section-1790700000002 .product__info { min-height: 0 !important; height: auto !important; }
#section-1790700000002 .product__button .btn, #section-1790700000002 .product__button a { display: inline-flex !important; align-items: center; gap: 9px; padding: 13px 22px !important; font-family: var(--sm-font-mono, "Geist Mono", monospace); font-size: 12px !important; font-weight: 600; letter-spacing: .14em !important; text-transform: uppercase; color: #111 !important; background: #F2C14E !important; border: 2px solid #F2C14E !important; border-radius: 2px !important; box-shadow: none !important; }
#section-1790700000002 .product__button a::after { content: "→"; font-family: Inter, sans-serif; font-size: 15px; line-height: 1; transform: translateY(-1px); }
#section-1790700000004 .sizer { padding: 56px 0 64px !important; }
#section-1790700000004 .sm-vc__eyebrow, #section-1790700000004 .sm-label { margin-bottom: 8px !important; }
#section-1790700000003 .sizer { padding: 72px 0 76px !important; }
#section-1790700000003 h2 { margin-bottom: 12px !important; }
#section-1790700000003 [class*="intro"] p, #section-1790700000003 p { font-size: 16px !important; color: rgba(255,255,255,.78) !important; max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 1600px) {
  #section-1790700000001 .sizer { padding-top: 112px !important; padding-bottom: 104px !important; }
  #section-1790700000003 .sizer { padding: 92px 0 96px !important; }
}
@media (max-width: 767px) {
  #section-1790700000001 .sizer { padding-top: 56px !important; padding-bottom: 52px !important; }
  #section-1790700000003 .sizer { padding: 56px 0 60px !important; }
  #section-1790700000004 .sizer { padding: 44px 0 52px !important; }
}
@media (max-width: 600px) {
  #section-1790700000002 .product { padding: 20px 18px 18px; }
  #section-1790700000002 .product > a:first-child { top: 20px; right: 18px; }
  #section-1790700000002 .product__image, #section-1790700000002 .product__image img { width: 64px; height: 64px; }
  #section-1790700000002 .smlib-kick, #section-1790700000002 .product__title, #section-1790700000002 .product__body p { padding-right: 80px; }
  #section-1790700000002 .product__title { font-size: 22px !important; }
}

/* ---- design system addendum (4 Oct, Scott: corners 6, labels mono) ---- */
#section-1790700000001 .sm-hero__heading { font-size: clamp(40px, 5vw, 68px) !important; }
#section-1790700000002 .product { transition: transform .18s ease, box-shadow .18s ease; }
#section-1790700000002 .product:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(17,17,17,.1) !important; }
#section-1790700000002 .product__button .btn, #section-1790700000002 .product__button a { padding: 16px 26px !important; font-size: 13px !important; }
#section-1790700000004 .sm-vc__card { border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(17,17,17,.06); transition: transform .18s ease, box-shadow .18s ease; }
#section-1790700000004 .sm-vc__card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(17,17,17,.1); }
@media (max-width: 767px) {
  #section-1790700000002 .product__button .btn, #section-1790700000002 .product__button a { min-height: 48px; width: 100%; justify-content: center; }
}


/* ==========================================================================
   THE LIBRARY - v4 pass (5 Oct 2026, Scott's go on the mock):
   hero presence up (black, centred, no imagery - his call), and the free-videos
   row stops being a sideways carousel on the library: it stacks on phones and
   sits 3-up from tablet. The homepage video strip keeps its carousel (scoped).
   ========================================================================== */
#section-1790700000001 .sizer { padding-top: 108px !important; padding-bottom: 96px !important; }
#section-1790700000001 .sm-hero__heading { font-size: clamp(44px, 5.6vw, 80px) !important; }
#section-1790700000001 .sm-hero__intro p { font-size: 19px !important; }
@media (min-width: 1600px) {
  #section-1790700000001 .sizer { padding-top: 124px !important; padding-bottom: 112px !important; }
}
#section-1790700000004 .sm-vc__grid {
  grid-auto-flow: row !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-columns: auto !important; width: 100% !important; margin: 42px 0 0 !important;
  padding: 4px 0 6px !important; overflow-x: visible !important; overflow-y: visible !important;
  scroll-snap-type: none !important; }
@media (max-width: 767px) {
  #section-1790700000001 .sizer { padding-top: 68px !important; padding-bottom: 56px !important; }
  #section-1790700000001 .sm-hero__heading { font-size: 44px !important; }
  #section-1790700000004 .sm-vc__grid { grid-template-columns: 1fr !important; margin-top: 22px !important; }
}