/* =========================================================
CHECKOUT THEME — sm-checkout.css
What the checkout page adds on top of sm.css: Kajabi's
embedded checkout card restyled through the Style Guide,
the block-level elements (Eyebrow on a Text block, Steps,
Ruled list, Credential), the header text link. Loads after
sm.css, so every --sg-* and --sm-* token is defined before
it is used. Nothing here holds a colour, a radius or a size
of its own — change them in Settings → Style Guide.
========================================================= */

/* =========================================================
CHECKOUT SECTION — layout
Kajabi's own two columns (blocks · checkout). The checkout
column stays in view while the copy scrolls on desktop; the
snippet handles the phone order.
========================================================= */
.sm-checkout .blocks-column,
.sm-checkout .checkout-column { min-width: 0; }

@media (min-width: 1024px) {
  .sm-checkout .checkout-column { position: sticky; top: 24px; }
}

/* Block rhythm: the designed gaps between the elements in the copy column. A block's own
Margin boxes add to these. */
.sm-checkout .blocks-column .block-type--sm_steps,
.sm-checkout .blocks-column .block-type--sm_list,
.sm-checkout .blocks-column .block-type--sm_credential { margin-top: 24px; }

.sm-checkout .blocks-column .block-type--text + .block-type--text { margin-top: 8px; }

/* Text block — eyebrow + rule opener, then the rich text. The h1 that follows the rule sits
tight to it, like the hero. */
.sm-checkout .sm-text__eyebrow { margin: 0; }

.sm-checkout .sm-text__eyebrow + .sm-rule { margin: 18px 0 22px; }

.sm-checkout .sm-text h1 { margin-top: 0; text-wrap: balance; }

.sm-checkout .sm-text > :last-child,
.sm-checkout .sm-text .element > :last-child { margin-bottom: 0; }

/* Body copy on the dark surface reads at 86%, the site's intro strength; fine print at 62%. */
.section.background-dark.sm-checkout .sm-text p { color: color-mix(in srgb, var(--sm-on-dark) 86%, transparent); }

.section.background-dark.sm-checkout .sm-text.sm-fine p { color: color-mix(in srgb, var(--sm-on-dark) 62%, transparent); }

.sm-checkout .sm-text.sm-fine p { max-width: 60ch; }

.sm-checkout .sm-text.sm-fine a,
.sm-checkout .sm-text.sm-small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
STEPS (block) — the section recipe, minus the row above it
========================================================= */
.sm-checkout .sm-steps--block .sm-steps__steps { margin-top: 0; }

/* the section adds 10px either side of its rows on phones (its own container); a block already sits
on the grid's edge, so it does not */
.sm-checkout .sm-steps--block .sm-steps__steps,
.sm-checkout .sm-steps--block .sm-steps__cred { margin-left: 0 !important; margin-right: 0 !important; }

.sm-checkout .sm-steps--block .sm-steps__text { font-size: var(--sm-fs-small); }

.section.background-dark.sm-checkout .sm-steps--block .sm-steps__text { color: color-mix(in srgb, var(--sm-on-dark) 78%, transparent); }

@media (max-width: 600px) {
  .sm-checkout .sm-steps--block .sm-steps__steps { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
RULED LIST (block)
h3 heading, then short lines each on its own hairline, in
one or two columns. Hairline from Style Guide → Shape.
========================================================= */
.sm-checkout .sm-list__heading { margin: 0 0 16px; }

.sm-checkout .sm-list__items { list-style: none; margin: 0; padding: 0; column-gap: 32px; }

.sm-checkout .sm-list--2 .sm-list__items { columns: 2; }

.sm-checkout .sm-list__item { break-inside: avoid; margin: 0; padding: 9px 0; border-top: 1px solid var(--sm-frame); }

.section.background-dark.sm-checkout .sm-list__item { color: color-mix(in srgb, var(--sm-on-dark) 90%, transparent); }

/* an item that wraps splits evenly, so no word is left on a line of its own (beats sm.css's
   "text-wrap: pretty" on every li) */
.sm-checkout .sm-list .sm-list__item { text-wrap: balance; }

@media (max-width: 600px) {
  .sm-checkout .sm-list--2 .sm-list__items { columns: 1; }
}

/* SUM (Ruled list → Layout: Sum) — each line "Label | Amount": the label on the left, the
   amount on the right in tabular figures, every row on the hairline; the last row is the
   total, in the heading face at the card's "Due now" size. */
.sm-checkout .sm-sum__rows { margin: 0; border-bottom: 1px solid var(--sm-frame); }

.sm-checkout .sm-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0; padding: 10px 0; border-top: 1px solid var(--sm-frame); }

.sm-checkout .sm-sum__row dt { margin: 0; font-weight: 400; }

.sm-checkout .sm-sum__row dd { margin: 0; font-size: var(--sm-fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sm-checkout .sm-sum__row--total { padding: 14px 0; }

/* the body face's bold: the Style Guide loads Inter at 400 and 700, and on this page a 600 falls to a
   thin face Kajabi's checkout declares */
.sm-checkout .sm-sum__row--total dt { font-weight: 700; }

.sm-checkout .sm-sum__row--total dd { font-family: var(--sg-font-heading), sans-serif; font-weight: var(--sg-fw-heading, 700); font-size: 22px; line-height: 1; }

.section.background-dark.sm-checkout .sm-sum__row dt,
.section.background-dark.sm-checkout .sm-sum__row dd { color: color-mix(in srgb, var(--sm-on-dark) 90%, transparent); }

.section.background-dark.sm-checkout .sm-sum__row--total dt,
.section.background-dark.sm-checkout .sm-sum__row--total dd { color: var(--sm-on-dark); }

/* A Text block straight after a Sum is its footnote ("Prefer to pay by bank transfer?"): it sits under the
   closing rule, without the block gap. Kajabi writes a <style> before every block, hence "+ style +". */
.sm-checkout .blocks-column .block-type--sm_list:has(.sm-sum) + style + .block-type--text { padding-top: 0; }

/* =========================================================
CREDENTIAL (block) — the section strip on its own
========================================================= */
.sm-checkout .sm-steps--cred-block .sm-steps__cred { margin-top: 0; padding: 22px 0; border-top: 1px solid var(--sm-frame); border-bottom: 1px solid var(--sm-frame); }

.sm-checkout .sm-steps--cred-block .sm-steps__cred-inner { gap: 22px; width: 100%; }

.sm-checkout .sm-steps--cred-block .sm-steps__cred-rule { min-height: 44px; }

.section.background-dark.sm-checkout .sm-steps--cred-block .sm-steps__cred-text { color: color-mix(in srgb, var(--sm-on-dark) 85%, transparent); }

@media (max-width: 600px) {
  .sm-checkout .sm-steps--cred-block .sm-steps__cred-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sm-checkout .sm-steps--cred-block .sm-steps__cred-rule { display: none; }
  .sm-checkout .sm-steps--cred-block .sm-steps__logo { width: 96px !important; }
}

/* =========================================================
CHECKOUT CARD — Kajabi's embedded checkout, restyled
Kajabi renders the form (Sage components) and Stripe draws
the card fields. This restates the visible parts through
the Style Guide: the light card surface, the heading and
label faces, the input recipe, the summary and the button.
The email field is a web component; it takes its recipe
through the custom properties it publishes (--pds-input-*).
========================================================= */
:root {
  /* the input recipe — one place; the same corner as the buttons */
  --sm-input-height: 46px;
  --sm-input-radius: var(--sg-btn-radius);
  --sm-input-border: var(--sm-frame-light);
  --sm-input-border-focus: var(--sg-color-heading);
  --sm-input-ring: color-mix(in srgb, var(--sg-color-primary) 45%, transparent);
}

.sm-checkout .kjb-embedded-checkout .embedded-checkout {
  color: var(--sg-color-body);
  background: var(--sg-card-light) !important;
  border: 1px solid var(--sm-frame-light) !important;
  border-radius: var(--sg-radius) !important;
  box-shadow: var(--sm-stage-shadow) !important;
  overflow: hidden;
  font-family: var(--sg-font-body), sans-serif;
}

/* the card's own sections: hairlines between them, the mock's 22 × 28 padding. The hairline is a
bottom border, never a top one: a fieldset draws its legend into its own top border, so a top
border would run straight through the "Contact" and "Payment" labels. */
.sm-checkout .embedded-checkout__section,
.sm-checkout .embedded-checkout__fieldset,
.sm-checkout .embedded-checkout__cta { border: 0; margin: 0; padding: 22px 28px; }

.sm-checkout .embedded-checkout__form > .embedded-checkout__section:first-child,
.sm-checkout .embedded-checkout__fieldset { border-bottom: 1px solid var(--sm-frame-light); }

.sm-checkout .embedded-checkout__section .embedded-checkout__section { border: 0; padding: 0; }

.sm-checkout .embedded-checkout__summary { border-top: 1px solid var(--sm-frame-light); }

/* the offer's name on the summary line wraps evenly ("Residential Training / Balance (3 weeks)"); the
   property inherits into Kajabi's pds-text component */
.sm-checkout .embedded-checkout .offer-summary { text-wrap: balance; }

/* offer title and price: heading face; the price line's currency as a mono label */
.sm-checkout .embedded-checkout h4,
.sm-checkout .embedded-checkout .t-sage-heading-4,
.sm-checkout .embedded-checkout .t-sage-heading-5 {
  font-family: var(--sg-font-heading), sans-serif;
  font-weight: var(--sg-fw-heading, 700);
  color: var(--sg-color-heading);
  letter-spacing: -.01em;
}

.sm-checkout .embedded-checkout #offer-title { font-size: 20px; line-height: 1.2; text-wrap: balance; }

/* section labels (Contact, Additional information, Payment, Summary): the mono label recipe */
.sm-checkout .embedded-checkout__legend,
.sm-checkout .embedded-checkout h6 {
  font-family: var(--sm-font-mono) !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sg-color-secondary);
  margin: 0 0 14px;
}

/* inputs — Sage fields and the email web component share one recipe */
.sm-checkout .embedded-checkout .sage-input__field,
.sm-checkout .embedded-checkout .sage-select__field,
.sm-checkout .embedded-checkout textarea.sage-form-field {
  min-height: var(--sm-input-height);
  height: var(--sm-input-height);
  padding: 0 14px;
  border: 1px solid var(--sm-input-border) !important;
  border-radius: var(--sm-input-radius) !important;
  background: #fff;
  font-family: var(--sg-font-body), sans-serif;
  font-size: var(--sm-fs-small);
  color: var(--sg-color-body);
  box-shadow: none;
  transition: border-color var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease);
}

.sm-checkout .embedded-checkout .sage-input__field:focus,
.sm-checkout .embedded-checkout .sage-select__field:focus {
  border-color: var(--sm-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--sm-input-ring) !important;
  outline: none;
}

.sm-checkout .embedded-checkout .sage-input__field::placeholder { color: var(--sg-color-secondary); opacity: 1; }

.sm-checkout .embedded-checkout pds-input {
  --pds-input-field-min-height: var(--sm-input-height);
  --pds-input-border-width: 1px;
  --pds-input-border-color: var(--sm-input-border);
  --pds-input-border-color-hover: var(--sm-input-border-focus);
  --pds-input-border-radius: var(--sm-input-radius);
  --pds-input-background: #fff;
  --pds-input-text-color: var(--sg-color-body);
  --pds-input-padding-x: 14px;
  --pds-input-padding-y: 0px;
  --pds-input-font: 400 var(--sm-fs-small) / 1.4 var(--sg-font-body), sans-serif;
  --pine-color-focus-ring: var(--sm-input-ring);
}

/* field labels: Sage floats a label over the field; the site's forms use placeholders, so the
label becomes the accessible name only */
.sm-checkout .embedded-checkout .sage-input__label,
.sm-checkout .embedded-checkout .custom-fields__label { font-family: var(--sg-font-body), sans-serif; font-size: var(--sm-fs-small); color: var(--sg-color-body); }

/* checkboxes: the heading colour, the button corner */
.sm-checkout .embedded-checkout .sage-checkbox__input { accent-color: var(--sg-color-heading); }

.sm-checkout .embedded-checkout .sage-checkbox__label { font-family: var(--sg-font-body), sans-serif; font-size: 14px; color: var(--sg-color-body); text-wrap: balance; } /* "…and Privacy Policy" wraps evenly: no word alone on the last line */

/* summary rows: body small; "Due now" in the heading face */
.sm-checkout .embedded-checkout .embedded-checkout-price-detail { font-family: var(--sg-font-body), sans-serif; font-size: var(--sm-fs-small); color: var(--sg-color-body); }

.sm-checkout .embedded-checkout .embedded-checkout-price-summary__divider { border-color: var(--sm-frame-light); }

.sm-checkout .embedded-checkout .embedded-checkout-price-detail .t-sage-heading-4 { font-size: 22px; line-height: 1; }

/* the terms text and the secure line: fine print */
.sm-checkout .embedded-checkout .service-agreement-text,
.sm-checkout .embedded-checkout .service-agreement-text p,
.sm-checkout .embedded-checkout .service-agreement-text li,
.sm-checkout .embedded-checkout .secure-checkout,
.sm-checkout .embedded-checkout__test-mode-alert { font-family: var(--sg-font-body), sans-serif; font-size: var(--sm-fs-fine); line-height: 1.6; color: var(--sg-color-secondary); }

.sm-checkout .embedded-checkout .service-agreement-text a { color: inherit; }

.sm-checkout .embedded-checkout__footer { padding: 0 28px 22px; text-align: center; }

/* THE BUTTON — Style Guide button: colour, corner, the mono recipe and the arrow, exactly as
every .btn on the site. Kajabi's React button cannot carry the arrow markup, so the arrow is
a masked shape after the text and slides on hover like the others. */
.sm-checkout .embedded-checkout .sage-btn.sage-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 28px;
  background: var(--sg-btn-bg) !important;
  color: var(--sg-btn-text) !important;
  border: 1px solid var(--sg-btn-bg) !important;
  border-radius: var(--sg-btn-radius) !important;
  font-family: var(--sm-font-mono) !important;
  font-size: var(--sg-btn-fs-large) !important;
  font-weight: 600 !important;
  line-height: .9 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  box-shadow: none;
  transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease);
}

.sm-checkout .embedded-checkout .sage-btn.sage-btn--primary .sage-btn__truncate-text { display: inline-flex; align-items: center; gap: 10px; overflow: visible; }

.sm-checkout .embedded-checkout .sage-btn.sage-btn--primary .sage-btn__truncate-text::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19'/%3E%3Cpath d='M14 7L19 12L14 17'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19'/%3E%3Cpath d='M14 7L19 12L14 17'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--sm-dur) var(--sm-ease);
}

@media (hover: hover) {
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary:hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 100px color-mix(in srgb, currentColor 10%, transparent);
  }
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary:hover .sage-btn__truncate-text::after { transform: translateX(4px); }
}

.sm-checkout .embedded-checkout .sage-btn.sage-btn--primary:focus-visible { outline: 2px solid var(--sg-color-primary); outline-offset: 3px; }

@media (max-width: 767px) {
  .sm-checkout .embedded-checkout__section,
  .sm-checkout .embedded-checkout__fieldset { padding-left: 20px; padding-right: 20px; }
  .sm-checkout .embedded-checkout__footer { padding-left: 20px; padding-right: 20px; }
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary { font-size: max(10px, calc(var(--sg-btn-fs-large) - 1px)) !important; padding: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary,
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary .sage-btn__truncate-text::after { transition: none; }
  .sm-checkout .embedded-checkout .sage-btn.sage-btn--primary:hover { transform: none; }
}

/* =========================================================
HEADER — the text-link button style
Call to action block → Button style → Link: the label recipe
with the site's growing gold rule, no box. For a quiet action
in the bar (a "Questions?" line on a checkout) where a solid
button would compete with the page's own button.
========================================================= */
.header .btn.btn--link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--sm-header-text, inherit) !important; /* the header's Text colour, which the section writes as a variable on the bar */
  padding: 5px 0 !important;
  min-height: 0;
  font-size: var(--sg-fs-h6) !important;
  letter-spacing: .16em !important;
  position: relative;
}

.header .btn.btn--link::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);
}

@media (hover: hover) {
  .header .btn.btn--link:hover { transform: none; box-shadow: none; }
  .header .btn.btn--link:hover::after,
  .header .btn.btn--link:focus-visible::after { transform: scaleX(1); }
}

/* Phones: the "keep blocks in the bar" header setting shows the blocks inline and drops the
hamburger; the bar lays them out logo left, the rest right. */
.header--inline .header__content--desktop .header__block.header__block--show { display: block; }

.header--inline .header__content--desktop .header__block--cta { margin-left: auto; margin-right: 0; }

.header--inline .header__content--desktop .header__block--logo { margin-left: 0; }

@media (max-width: 767px) {
  .header--inline .btn.btn--link { font-size: max(10px, calc(var(--sg-fs-h6) - 1px)) !important; }
}

/* phones under 390px: the label's tracking halves, so "Questions? scott@…" stays on one line */
@media (max-width: 389px) {
  .header--inline .btn.btn--link { letter-spacing: .08em !important; }
}

/* =========================================================
CHECKOUT CARD — offer header, labels, summary
========================================================= */
/* Offer header: thumbnail left, title and price to its right — one row, like the mock. The
section frame gives up its box (display: contents) so the image and the price join the grid. */
.sm-checkout .embedded-checkout-price-display--image { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; }

.sm-checkout .embedded-checkout-price-display--image .embedded-checkout-price-display__title-wrapper { grid-column: 2; grid-row: 1; align-self: end; }

.sm-checkout .embedded-checkout-price-display--image .embedded-checkout-price-display__section { display: contents; }

.sm-checkout .embedded-checkout-price-display--image .embedded-checkout-price-display__image-container { grid-column: 1; grid-row: 1 / 3; }

.sm-checkout .embedded-checkout-price-display--image .embedded-checkout-price-display__offer { grid-column: 2; grid-row: 2; align-self: start; }

/* the image is 16:9 in every look, the shape Kajabi asks for (1280 × 720), so it is never cropped */
.sm-checkout .embedded-checkout-price-display__image { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 6px; }

.sm-checkout .embedded-checkout-price-display__title-wrapper h4 { margin: 0; }

/* "Offer image: Banner" (a section setting): the offer's own image runs edge to edge across the
top of the card, whole, at its 16:9 shape, with the title and the price beneath it. The
container's negative margins undo the section padding (22 × 28, 22 × 20 on phones) and the
card's overflow clips the corners. */
.sm-checkout--img-banner .embedded-checkout-price-display--image { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }

.sm-checkout--img-banner .embedded-checkout-price-display--image .embedded-checkout-price-display__image-container { grid-column: 1; grid-row: 1; margin: -22px -28px 12px; }

.sm-checkout--img-banner .embedded-checkout-price-display--image .embedded-checkout-price-display__title-wrapper { grid-column: 1; grid-row: 2; align-self: auto; }

.sm-checkout--img-banner .embedded-checkout-price-display--image .embedded-checkout-price-display__offer { grid-column: 1; grid-row: 3; }

.sm-checkout--img-banner .embedded-checkout-price-display__image { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }

@media (max-width: 767px) {
  .sm-checkout--img-banner .embedded-checkout-price-display--image .embedded-checkout-price-display__image-container { margin-left: -20px; margin-right: -20px; }
}

/* Banner shows the image once: the summary line drops its thumbnail, so the offer's name has the
   line to itself ("Residential Training / Balance (3 weeks)", not a word a line beside a 100px
   picture on a phone). Kajabi sets the thumbnail in a fixed 6.25rem box, so the box is what goes. */
.sm-checkout--img-banner .embedded-checkout .offer-summary > div:has(> .order-bump__thumbnail) { display: none; }

/* "Offer image: Hidden": no image in the header and none on the summary line */
.sm-checkout--img-hidden .embedded-checkout-price-display--image { grid-template-columns: minmax(0, 1fr); }

.sm-checkout--img-hidden .embedded-checkout-price-display--image .embedded-checkout-price-display__image-container,
.sm-checkout--img-hidden .embedded-checkout .offer-summary > div:has(> .order-bump__thumbnail) { display: none; }

.sm-checkout--img-hidden .embedded-checkout-price-display--image .embedded-checkout-price-display__title-wrapper { grid-column: 1; grid-row: 1; }

.sm-checkout--img-hidden .embedded-checkout-price-display--image .embedded-checkout-price-display__offer { grid-column: 1; grid-row: 2; }

/* price: the heading face; the currency badge as a mono label after it */
.sm-checkout .embedded-checkout-price-display__offer > .sage-frame { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; }

.sm-checkout .embedded-checkout-price-display__offer-price {
  order: 1;
  font-family: var(--sg-font-heading), sans-serif;
  font-weight: var(--sg-fw-heading, 700);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--sg-color-heading);
}

.sm-checkout .embedded-checkout .sage-badge,
.sm-checkout .embedded-checkout .sage-badge .sage-badge__value {
  order: 2;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  font-family: var(--sm-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sg-color-secondary) !important;
}

/* field labels: the same recipe Kajabi's email component uses (14px, medium), in the heading colour */
.sm-checkout .embedded-checkout .sage-input__label,
.sm-checkout .embedded-checkout .custom-fields__label,
.sm-checkout .embedded-checkout .custom-fields__label label { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--sg-color-heading); margin-bottom: 4px; }

.sm-checkout .embedded-checkout pds-input { --pine-color-text-strong: var(--sg-color-heading); }

/* summary on the card surface, the terms box on the input recipe */
.sm-checkout .embedded-checkout__summary { background: var(--sg-card-light); }

.sm-checkout .embedded-checkout .service-agreement-text.form-control { border: 1px solid var(--sm-input-border); border-radius: var(--sm-input-radius); box-shadow: none; }

.sm-checkout .embedded-checkout .offer-summary .t-sage-body { color: var(--sg-color-body); }

/* the pay area and the summary sit on the card surface (Kajabi tints them); totals never wrap */
.sm-checkout .embedded-checkout__cta,
.sm-checkout .embedded-checkout__summary--mobile { background: var(--sg-card-light); }

.sm-checkout .embedded-checkout .embedded-checkout-price-detail .t-sage-heading-4 { white-space: nowrap; }

/* the summary line's thumbnail is Kajabi's own (16:9 in its bordered box) and shows only with
   "Offer image: Thumbnail"; Banner and Hidden drop it (above) */

@media (max-width: 767px) {
  .sm-checkout .embedded-checkout .embedded-checkout-price-detail .t-sage-heading-4 { font-size: 19px; }
}

/* =========================================================
BOOKING PAGE — what the assessment-call checkout adds
(Book an Assessment, offer PRdUSM9U). A list in a Text block
takes the site's gold tick; the Credential block's Portrait
look puts a round photo beside the line; Kajabi's Accordion
block is redrawn on the site's FAQ recipe: a hairline, the
question in the body face, a gold plus that turns to a minus.
========================================================= */

/* a heading inside a Text block opens a new group in the copy column */
.sm-checkout .sm-text h3 { margin: 40px 0 0; }
.sm-checkout .sm-text h1 + p { margin-top: 0; }

/* Text block lists: the site's tick in the Style Guide's primary colour, one line per point */
.sm-checkout .sm-text ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.sm-checkout .sm-text ul li { position: relative; margin: 0; padding-left: 32px; text-wrap: pretty; }
.sm-checkout .sm-text ul li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px;
  background: var(--sg-color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5L9.5 17L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5L9.5 17L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section.background-dark.sm-checkout .sm-text ul li { color: color-mix(in srgb, var(--sm-on-dark) 92%, transparent); }

/* Credential → Look: Portrait — a round photo, no vertical rule, the line beside it */
.sm-checkout .sm-steps--portrait .sm-steps__logo { width: 64px !important; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.sm-checkout .sm-steps--portrait .sm-steps__cred-rule { display: none; }
.sm-checkout .sm-steps--portrait .sm-steps__cred-inner { gap: 18px; align-items: center; flex-wrap: nowrap; }
.sm-checkout .sm-steps--portrait .sm-steps__cred-text { flex: 1 1 0; min-width: 0; }
.sm-checkout .sm-steps--portrait .sm-steps__cred-text strong { color: var(--sg-color-heading); }
.section.background-dark.sm-checkout .sm-steps--portrait .sm-steps__cred-text strong { color: var(--sm-on-dark); }
/* the body face's bold at 700: this page declares a thin face for 600 (see SUM above) */
.sm-checkout .sm-steps--portrait .sm-steps__cred-text strong { font-weight: 700; }
@media (max-width: 767px) {
  .sm-checkout .sm-steps--cred-block.sm-steps--portrait .sm-steps__cred-inner { flex-direction: row; align-items: center; gap: 16px; }
  .sm-checkout .sm-steps--cred-block.sm-steps--portrait .sm-steps__logo { width: 56px !important; height: 56px; flex-basis: 56px; }
}

/* the ruled list after the portrait strip: its own group, one column */
.sm-checkout .blocks-column .block-type--sm_credential + style + .block-type--sm_list { margin-top: 40px; }
/* one column: the list is read, not skimmed, so its lines take the body size */
.sm-checkout .sm-list--1 .sm-list__item { font-size: 16px; padding: 12px 0; }

/* the questions run as one list: no gaps between their blocks at any width */
.sm-checkout .blocks-column .block-type--accordion { margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
/* Accordion: the FAQ recipe. Kajabi's block draws its icon from an icon font and pads the
answer from an ID rule, so the three overrides that fight it carry !important. */
.sm-checkout .blocks-column .block-type--text + style + .block-type--accordion { margin-top: 18px; }
.sm-checkout .block-type--accordion .accordion { background: none; border-top: 1px solid var(--sm-frame); }
.sm-checkout .block-type--accordion .accordion-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; cursor: pointer; }
.sm-checkout .block-type--accordion .accordion-title h5 { margin: 0; font-family: var(--sg-font-body); font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--sg-color-heading); }
.section.background-dark.sm-checkout .block-type--accordion .accordion-title h5 { color: var(--sm-on-dark); }
.sm-checkout .block-type--accordion .accordion-title::after,
.sm-checkout .block-type--accordion .accordion-title.collapsed::after {
  content: "" !important; margin-left: 0 !important; flex: 0 0 14px; width: 14px; height: 14px;
  background:
    linear-gradient(var(--sg-color-primary), var(--sg-color-primary)) center / 14px 2px no-repeat,
    linear-gradient(var(--sg-color-primary), var(--sg-color-primary)) center / 2px 14px no-repeat;
  transition: transform var(--sm-dur) var(--sm-ease);
}
.sm-checkout .block-type--accordion .accordion-title:not(.collapsed)::after {
  background: linear-gradient(var(--sg-color-primary), var(--sg-color-primary)) center / 14px 2px no-repeat;
}
.sm-checkout .block-type--accordion .accordion-body { padding: 0 34px 20px 0 !important; font-size: var(--sm-fs-small); }
.sm-checkout .block-type--accordion .accordion-body p { margin: 0; }
.sm-checkout .block-type--accordion .accordion-body p + p { margin-top: 10px; }
.section.background-dark.sm-checkout .block-type--accordion .accordion-body p { color: color-mix(in srgb, var(--sm-on-dark) 82%, transparent); }
/* the questions' heading opens its group at the same distance as the list above */
.sm-checkout .blocks-column .block-type--sm_list + style + .block-type--text .sm-text h3:first-child { margin-top: 48px; }
/* the last question closes the list with a hairline of its own */
.sm-checkout .blocks-column .block-type--accordion:not(:has(~ .block-type--accordion)) .accordion { border-bottom: 1px solid var(--sm-frame); }
/* the NePoPo strip after the questions stands clear of them */
.sm-checkout .blocks-column .block-type--accordion + style + .block-type--sm_credential { margin-top: 40px; }

/* the offer's name on the card: Kajabi hyphenates it ("As- / sessment"); a name is never split. The name
carries a non-breaking space ("Book an"), so a narrow card breaks it "Book an / Assessment". */
.sm-checkout .embedded-checkout-price-display__title-wrapper h4 { -webkit-hyphens: manual; hyphens: manual; }

/* 1 Oct: Kajabi's own radio labels and button label name Inter directly. With Geist as the body font they now
   follow the page: radio labels in the body font, the button label in the button's own font (Geist Mono). */
.sm-checkout .sage-radio__label { font-family: var(--sg-font-body), sans-serif; }
/* 1 Oct: a chosen radio button was Kajabi's purple while the tick boxes are gold. Now gold too, with the same white dot. */
.sm-checkout .sage-radio__input:checked { background-color: var(--sg-color-primary); }
.sm-checkout .sage-btn__truncate-text { font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* and the order summary (product, price, currency badge, subtotal) and the links in the fine print */
.sm-checkout .offer-summary pds-text, .sm-checkout .sage-badge__value-text, .sm-checkout .embedded-checkout-price-detail__label, .sm-checkout .embedded-checkout-price-detail__value, .sm-checkout li > a { font-family: var(--sg-font-body), sans-serif; }

/* Phones and tablets (2 Oct): 16px text in every box, so iPhones don't zoom in when one is tapped.
   Desktop keeps the 14px recipe above. The email box is Kajabi's pds-input, sized through its own variable. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .sm-checkout .embedded-checkout .sage-input__field,
  .sm-checkout .embedded-checkout .sage-select__field,
  .sm-checkout .embedded-checkout textarea,
  .sm-checkout .embedded-checkout select,
  .sm-checkout .embedded-checkout input:not([type="radio"]):not([type="checkbox"]) { font-size: 16px; }
  .sm-checkout .embedded-checkout pds-input { --pds-input-font: 400 16px / 1.4 var(--sg-font-body), sans-serif; }
}


/* The dark spinner (4 Oct): while Kajabi creates the account after "Book my assessment", its button spinner was
   pale orange on our gold and read as a stuck button. Make every loader stroke on the gold button near-black. */
.sage-btn--primary .sage-loader svg circle,
.sage-btn--primary .sage-loader svg path,
.sage-btn--primary .sage-loader [class*="spinner"],
.sage-btn--is-loading .sage-loader svg circle,
.sage-btn--is-loading .sage-loader svg path {
  stroke: #111 !important;
}