/* ==========================================================================
   Stripe-style two-column checkout

   Scoped to .checkout-layout (added by snippets/embedded_checkout.liquid) so
   it keeps working if the section is recreated with a different id.

   Left  : order summary, rendered from the offer by snippets/checkout_summary
   Right : Kajabi's embedded checkout widget
   ========================================================================== */

.checkout-layout {
  --co-text: #303030;
  --co-muted: #6d6d6d;
  --co-faint: #757575;
  --co-rule: #ededed;
  --co-divider: #ededed;
  --co-field-border: #e2e2e2;
  --co-pill: #f3f3f3;
  --co-star: #f5b301;
  --co-accent: #3472d0;
  --co-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Ubuntu, sans-serif;

  /* Vertical padding of the section — the divider extends over it. */
  --co-pad-top: 48px;
  --co-pad-bottom: 48px;

  /* Space between each column's content and the divider. */
  --co-gutter: 76px;
  /* The theme's own `.col-*` side padding. Kajabi's summary is placed into
     the same grid column but is not a `.col-*`, so it has to reproduce this
     to line its rows up with the ones rendered in Liquid above it. */
  --co-col-pad: 15px;

  /* Space between the two columns once they stack on mobile. */
  --co-stack-gap: 40px;

  /* Overridden per section by the Liquid-generated <style> block. */
  --co-divider-x: 50%;
}

body#encore-theme {
  background: #fff;
  color: #303030;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Ubuntu, sans-serif;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.checkout-layout .sizer {
  padding: var(--co-pad-top) 0 var(--co-pad-bottom);
}

.checkout-layout .container {
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 32px;
  padding-left: 32px;
}

/* Both halves fill their grid column — the checkout widget in particular
   likes to sit at its own narrow intrinsic width. */
.checkout-layout .blocks-column,
.checkout-layout .checkout-column,
.checkout-layout .checkout-standalone-column {
  max-width: none;
}

.checkout-layout .kjb-embedded-checkout,
.checkout-layout .kjb-embedded-checkout > *,
.checkout-layout .kjb-embedded-checkout iframe {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

@media (min-width: 1024px) {
  /* Kajabi's checkout ships two copies of its price summary and toggles them
     with INLINE styles, based on its own container width:

       .embedded-checkout__summary            sibling of the form  (desktop)
       .embedded-checkout__summary--mobile    nested INSIDE the form

     Splitting the page in half makes its container narrow enough that it
     picks the mobile copy. Force the desktop copy, because only that one sits
     at a DOM level where it can be placed into the left column. !important
     beats their inline style. */
  .checkout-layout--split .embedded-checkout__summary {
    display: block !important;
  }

  .checkout-layout--split .embedded-checkout__summary--mobile {
    display: none !important;
  }

  /* Dissolve every wrapper between .row and the checkout's own form/summary,
     so those two become direct grid items of .row and can be placed by
     column. Nothing in Kajabi's DOM is moved or mutated — this is layout
     only, which is what keeps the coupon and total fully functional. */
  .checkout-layout--split .checkout-column,
  .checkout-layout--split .kjb-embedded-checkout,
  .checkout-layout--split .kjb-embedded-checkout > div,
  .checkout-layout--split .kjb-embedded-checkout > div > div,
  .checkout-layout--split .kjb-embedded-checkout > div > div > div,
  .checkout-layout--split .embedded-checkout,
  .checkout-layout--split .embedded-checkout__body {
    display: contents !important;
  }

  /* The third track is a spacer. The form spans all three, and without a
     flexible track to absorb its extra height, grid inflates rows 1 and 2 —
     which pushed a ~150px gap between the left column and the summary. */
  .checkout-layout--split .row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    min-height: calc(100vh - var(--co-pad-top) - var(--co-pad-bottom));
  }

  /* Left column: brand + price, then Kajabi's summary underneath it. */
  .checkout-layout--split .blocks-column {
    grid-column: 1;
    grid-row: 1;
    width: auto;
  }

  .checkout-layout--split .embedded-checkout__summary {
    grid-column: 1;
    grid-row: 2;
    padding-right: var(--co-gutter);
  }

  /* Right column: the form, spanning both rows. */
  .checkout-layout--split .embedded-checkout__form {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-left: var(--co-gutter);
  }

  .checkout-layout--split .embedded-checkout__footer {
    grid-column: 2;
    grid-row: 4;
    padding-left: var(--co-gutter);
  }

  /* Flipped: checkout on the left, summary column on the right. */
  .checkout-layout--split.checkout-layout--flipped .blocks-column,
  .checkout-layout--split.checkout-layout--flipped .embedded-checkout__summary {
    grid-column: 2;
    padding-right: 0;
    padding-left: var(--co-gutter);
  }

  .checkout-layout--split.checkout-layout--flipped .embedded-checkout__form,
  .checkout-layout--split.checkout-layout--flipped .embedded-checkout__footer {
    grid-column: 1;
    padding-right: var(--co-gutter);
    padding-left: 0;
  }

  /* Full-height hairline sitting exactly on the column boundary. */
  .checkout-layout--split .row::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--co-pad-top));
    bottom: calc(-1 * var(--co-pad-bottom));
    left: var(--co-divider-x);
    width: 1px;
    background: var(--co-divider);
  }

  .checkout-layout--split .blocks-column {
    padding-right: var(--co-gutter);
  }
}

/* --------------------------------------------------------------------------
   Order summary
   -------------------------------------------------------------------------- */

.checkout-summary {
  font-family: var(--co-font);
}

.checkout-summary p {
  margin: 0;
}

/* Brand mark + back arrow --------------------------------------------------- */

.checkout-summary__brand {
  display: flex;
  align-items: center;
  /* Tight to the back arrow, as in the reference. The arrow's own 8px hit
     padding is pulled back out by its negative margin, so this is the whole
     visible gap. */
  gap: 12px;
  margin-bottom: 36px;
}

/* The arrow reads as 16x16 but carries 8px of padding so the tap target
   clears 32px; the negative margin keeps the visual alignment unchanged. */
.checkout-summary__back {
  box-sizing: border-box;
  position: relative;
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  margin: -8px;
  padding: 8px;
  border-radius: 4px;
  text-decoration: none;
}

.checkout-summary__back::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 8px;
  width: 9px;
  height: 9px;
  border-bottom: 1.5px solid #8a8a8a;
  border-left: 1.5px solid #8a8a8a;
  transform: rotate(45deg);
}

.checkout-summary__back::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 9px;
  width: 14px;
  height: 1.5px;
  background: #8a8a8a;
}

.checkout-summary__back:hover::before,
.checkout-summary__back:focus-visible::before {
  border-color: var(--co-text);
}

.checkout-summary__back:hover::after,
.checkout-summary__back:focus-visible::after {
  background: var(--co-text);
}

.checkout-summary__back:focus-visible {
  outline: 2px solid var(--co-accent);
  outline-offset: 0;
}

/* Sized for a horizontal wordmark (the shipped one is ~12:1), where a
   height cap alone would run it the width of the column. Width binds; the
   height cap is the guard for a squarer logo set on the section instead. */
.checkout-summary__logo {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 36px;
}

/* Headline ----------------------------------------------------------------- */

.checkout-summary__eyebrow {
  margin: 0 0 6px !important;
  color: var(--co-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.checkout-summary__price {
  display: flex;
  /* Bottom-aligned rather than baseline-aligned: the interval wraps onto two
     lines ("per" / "week") and baseline alignment would hang the second one
     below the price. */
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 50px !important;
}

.checkout-summary__amount {
  color: var(--co-text);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.4px;
}

/* Billing interval beside the price. The narrow max-width is what breaks
   "per week" over two lines, as in Stripe's own summary. */
.checkout-summary__interval {
  max-width: 6ch;
  padding-bottom: 5px;
  color: var(--co-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

/* A payment plan's schedule ("10 weekly payments"), under the amount rather
   than beside it: it is a phrase, not a two-word interval, and the 6ch column
   above would break it over four lines. 100% basis puts it on its own row of
   the price flex, so the flex gap spaces it. */
.checkout-summary__plan {
  flex: 0 0 100%;
  color: var(--co-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

/* Empty until the enhancement script reads the interval off the checkout. */
.checkout-summary__interval:empty,
.checkout-summary__frequency:empty {
  display: none;
}

/* "including $5.90 in GST" — a mobile-only line, so it is off by default and
   the stacked layout below turns it on. Desktop keeps the checkout's own GST
   row instead, which is still on screen there. */
.checkout-summary__tax {
  display: none;
}

/* Rows --------------------------------------------------------------------- */

.checkout-summary__line,
.checkout-summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.checkout-summary__line {
  padding-bottom: 16px;
}

.checkout-summary__row {
  align-items: center;
  padding: 16px 0;
}

.checkout-summary__row--divided {
  border-top: 1px solid var(--co-rule);
}

.checkout-summary__item {
  color: var(--co-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.checkout-summary__row p {
  color: var(--co-text);
  font-size: 15px;
  line-height: 1.45;
}

.checkout-summary__muted {
  color: var(--co-faint);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.checkout-summary__total p {
  font-weight: 600;
}

.checkout-summary__note {
  margin-top: 4px !important;
  color: var(--co-faint);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Embedded checkout (right column)

   Kajabi renders this widget into the page as ordinary same-origin markup
   (only the card fields themselves are Stripe iframes), so its own classes
   can be targeted. Verified against the rendered checkout:

     .embedded-checkout                     widget root
       .embedded-checkout__body             the <form>
         .embedded-checkout__form           fields + submit button
           .embedded-checkout__section        > .embedded-checkout-price-display
           .embedded-checkout__fieldset       > .embedded-checkout__legend
         .embedded-checkout__summary        "Due now" totals — no inputs
         .embedded-checkout__footer
   -------------------------------------------------------------------------- */

.checkout-layout .kjb-embedded-checkout {
  color: var(--co-text);
  font-family: var(--co-font);
  font-size: 15px;
}

/* Skeleton shown until the widget mounts ---------------------------------- */

.checkout-loader {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 4px;
  /* Pure-CSS backstop: fades out on its own even if the script never runs. */
  animation: co-loader-timeout 1s ease 12s forwards;
}

.checkout-loader__bar {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f1f1 25%, #e7e7e7 37%, #f1f1f1 63%);
  background-size: 400% 100%;
  animation: co-loader-shimmer 1.4s ease infinite;
}

.checkout-loader__bar--label {
  width: 38%;
  height: 12px;
  margin-bottom: 10px;
}

.checkout-loader__bar--field {
  height: 44px;
  margin-bottom: 18px;
}

.checkout-loader__bar--button {
  height: 48px;
  margin-top: 10px;
}

@keyframes co-loader-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@keyframes co-loader-timeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-loader__bar {
    background: #f1f1f1;
    animation: none;
  }
}

/* Hide the price header at the top of the form (thumbnail + title + price).
   Kajabi's summary in the left column already lists the product. */
.checkout-layout .kjb-embedded-checkout .embedded-checkout-price-display {
  display: none !important;
}

.checkout-layout .kjb-embedded-checkout
  .embedded-checkout__section:has(.embedded-checkout-price-display) {
  display: none !important;
}

/* --- Kajabi's summary, restyled to sit inline with this column ----------

   It arrives with its own #f8f8f8 panel, padding and Inter type. All of that
   is stripped so it reads as part of the page rather than a widget dropped
   into it. Every element below is ordinary same-origin DOM.                */

.checkout-layout--split .embedded-checkout__summary {
  background: transparent !important;
  padding: 0 !important;
  color: var(--co-text);
  /* It carries a border-right from its original home in the checkout column,
     which read as a second grey line next to the divider. */
  border-right: 0 !important;
}

/* Kajabi's leading space above the coupon. Zeroed on these wrappers rather
   than on the coupon itself, so the spacing stays correct when the offer has
   no coupon field and the tax row comes first.

   The side padding is Kajabi's own 24px, which sat the promotion, tax and
   total rows 9px right of the subtotal and line item above them. Matching the
   column gutter instead lines all of them up on one edge. It is set here
   rather than zeroed on the summary, because the summary box already spans
   the full column — the inset is what the Liquid rows have too.            */
.checkout-layout--split .embedded-checkout__summary .embedded-checkout__section {
  padding-top: 0 !important;
  padding-right: var(--co-col-pad) !important;
  padding-left: var(--co-col-pad) !important;
}

.checkout-layout--split .embedded-checkout__summary .sage-spacer-top-sm {
  margin-top: 0 !important;
}

/* Kajabi sets font-family on individual nodes, so inheritance alone won't
   reach them — hence the descendant selector. */
.checkout-layout--split .embedded-checkout__summary,
.checkout-layout--split .embedded-checkout__summary * {
  font-family: var(--co-font) !important;
}

/* Its "Summary" heading and product row are already covered above by the
   offer title and line item, which render in Liquid. */
.checkout-layout--split .embedded-checkout__summary .embedded-checkout__legend,
.checkout-layout--split .embedded-checkout__summary .offer-summary {
  display: none !important;
}

/* Promotion code — collapsed pill, then the field ------------------------

   snippets/checkout_enhancements inserts the pill in front of Kajabi's coupon
   field and toggles the `hidden` attribute between the two, so only one of
   them is ever on screen. The attribute needs !important here because Kajabi
   sets `display` on the coupon container itself.

   No rule above the pill: the subtotal above it and the tax row below both
   carry their own border-top, so one here drew a second line the reference
   doesn't have.                                                            */

.checkout-layout .checkout-promo[hidden],
.checkout-layout .embedded-checkout-coupon__container[hidden] {
  display: none !important;
}

.checkout-layout .checkout-promo {
  padding: 16px 0;
}

.checkout-layout .checkout-promo__toggle {
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--co-pill);
  color: var(--co-text);
  font-family: var(--co-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.checkout-layout .checkout-promo__toggle:hover {
  background: #e9e9e9;
}

.checkout-layout .checkout-promo__toggle:focus-visible {
  outline: 2px solid var(--co-accent);
  outline-offset: 2px;
}

/* Coupon field + Apply button */
.checkout-layout--split .embedded-checkout-coupon__container {
  gap: 8px !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--co-rule);
}

.checkout-layout--split .embedded-checkout-coupon__input-wrapper input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--co-field-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.checkout-layout--split .embedded-checkout-coupon__button-wrapper button {
  min-height: 40px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--co-pill) !important;
  color: var(--co-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.checkout-layout--split .embedded-checkout-coupon__button-wrapper button:hover {
  background: #e9e9e9 !important;
}

/* Tax row */
.checkout-layout--split .checkout-common-sales-tax__container {
  padding: 16px 0 !important;
  border-top: 1px solid var(--co-rule);
  color: var(--co-text) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.checkout-layout--split .checkout-common-sales-tax__price {
  color: var(--co-faint) !important;
  font-size: 15px !important;
}

/* "Due now" total */
.checkout-layout--split .embedded-checkout__summary .t-sage-heading-4 {
  color: var(--co-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.checkout-layout--split .embedded-checkout__summary .sage-badge {
  background: var(--co-pill) !important;
  color: var(--co-faint) !important;
}

.checkout-layout--split .embedded-checkout__summary .sage-badge__value-text {
  font-size: 12px !important;
}

/* --- Submit area + footer ------------------------------------------------ */

/* The CTA arrives in its own #f8f8f8 panel, which read as a grey block
   floating under the form. The 24px side padding is kept deliberately: the
   fieldsets above inset their fields by the same amount, so dropping it left
   the button 24px wider than every field. */
.checkout-layout--split .embedded-checkout__cta {
  background: transparent !important;
  padding: 24px 24px 0 !important;
}

/* Taller, heavier submit button. The border radius is left alone — it is a
   section setting ("Button border radius") and this shouldn't override it. */
.checkout-layout .embedded-checkout__cta button {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Guarantee + small print under the button, both inserted by
   checkout_enhancements.

   The CTA is one of Kajabi's flex rows, so a plain block child would try to
   sit beside the button. Both of these claim a full line of their own.     */
.checkout-cta-trust,
.checkout-cta-note {
  flex: 0 0 100%;
  width: 100%;
}

.checkout-cta-trust {
  margin-top: 16px;
  font-family: var(--co-font);
  text-align: center;
}

.checkout-cta-trust__title {
  margin: 0 0 6px;
  color: var(--co-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.checkout-cta-trust__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--co-muted);
  font-size: 14px;
  line-height: 1.6;
}

.checkout-cta-trust__stars {
  color: var(--co-star);
  font-size: 16px;
  letter-spacing: 1px;
}

.checkout-cta-note {
  margin-top: 14px;
  color: var(--co-faint);
  font-family: var(--co-font);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.checkout-cta-note p {
  margin: 0 0 10px;
}

.checkout-cta-note p:last-child {
  margin-bottom: 0;
}

/* "Transactions are secure and encrypted" sat under a heavy rule with stray
   side padding, and hard against the left edge. The gutter padding stays so
   the band lines up with the form above it; the text centres inside it, so
   it sits under the middle of the button. */
.checkout-layout--split .embedded-checkout__footer {
  margin-top: 20px;
  border-top: 1px solid var(--co-rule) !important;
  padding: 14px 0 0 var(--co-gutter) !important;
}

.checkout-layout .embedded-checkout__footer,
.checkout-layout .embedded-checkout__footer * {
  color: var(--co-muted) !important;
  font-family: var(--co-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.checkout-layout .embedded-checkout__footer {
  text-align: center;
}

/* Kajabi lays the lock and its label out as a flex row that is left-aligned
   from its own stylesheet, so centring the text alone would not move it. */
.checkout-layout .embedded-checkout__footer > * {
  justify-content: center;
}

.checkout-layout--split.checkout-layout--flipped .embedded-checkout__footer {
  padding: 14px var(--co-gutter) 0 0 !important;
}

/* Terms of Service / Privacy Policy, turned into links by
   checkout_enhancements when the section has addresses for them. Underlined
   at every width: a consent line that only links on a phone would be worse
   than one that never did. */
.checkout-layout .checkout-terms-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-layout .checkout-terms-link:hover {
  color: var(--co-text);
}

/* --------------------------------------------------------------------------
   Mobile — stack to one column

   Everything below is a phone-only reshape towards the Stripe checkout the
   client uses as its reference: a compact brand mark in the corner, one
   centred price, the promotion code directly beneath it, and the form's two
   fieldsets as cards. The desktop layout above is deliberately untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .checkout-layout {
    --co-pad-top: 16px;
    --co-pad-bottom: 32px;

    /* Was 40px. The rows that used to fill it — line item and subtotal — are
       hidden below, so the old value left a band of empty white between the
       price and the first field. */
    --co-stack-gap: 16px;

    --co-card-border: #e4e4e4;
    --co-card-radius: 12px;
  }

  .checkout-layout .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .checkout-layout .blocks-column,
  .checkout-layout .checkout-column {
    width: 100%;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  /* Brand mark ------------------------------------------------------------

     Pulled back to a corner mark beside the back arrow rather than a banner
     across the top of the page. */

  .checkout-summary__brand {
    gap: 10px;
    margin-bottom: 22px;
  }

  .checkout-summary__logo {
    max-width: 148px;
    max-height: 26px;
  }

  /* Price block -----------------------------------------------------------

     Centred, and reduced to the three lines the reference has: what is being
     bought, the price, and the description underneath it. */

  .checkout-summary__eyebrow {
    margin-bottom: 4px !important;
    font-size: 14px;
    text-align: center;
  }

  .checkout-summary__price {
    justify-content: center;
    margin-bottom: 6px !important;
  }

  /* Full-width, so it centres on its own text-align rather than the flex's. */
  .checkout-summary__plan {
    text-align: center;
  }

  .checkout-summary__amount {
    font-size: 32px;
  }

  /* The line item repeats the title above it and the price beside it, so only
     its description and billing note survive — centred, as the third line of
     the header. */
  .checkout-summary__line {
    display: block;
    padding-bottom: 0;
    text-align: center;
  }

  .checkout-summary__line .checkout-summary__item {
    display: none;
  }

  /* Subtotal repeats the price above it. */
  .checkout-summary__row--divided {
    display: none;
  }

  /* The GST line, directly above the promotion code (the checkout's mobile
     summary is ordered up to just under this panel). It appears on exactly
     the condition that takes Kajabi's own GST row off the page — the headline
     showing the live, tax-inclusive total — so the two can never both be
     absent, or both be there. */
  .checkout-layout--live-total .checkout-summary__tax {
    display: block;
    margin-top: 2px;
    color: var(--co-faint);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
  }

  /* Until the checkout has priced an address there is no figure to name. */
  .checkout-layout--live-total .checkout-summary__tax:empty {
    display: none;
  }

  /* Form ------------------------------------------------------------------

     Kajabi renders the totals panel as a direct child of the form, between
     the fieldsets and the submit button. Ordering it first floats the
     promotion code up under the price, the way the reference does it, without
     moving a single node out of the checkout's own subtree — which is what
     keeps the coupon, tax and total logic working. */

  .checkout-layout .embedded-checkout__form {
    display: flex;
    flex-direction: column;
  }

  .checkout-layout .embedded-checkout__summary--mobile {
    order: -1;
  }

  /* The product line inside that panel duplicates the header above. */
  .checkout-layout .embedded-checkout__summary--mobile
    .embedded-checkout-price-summary > *:has(> .offer-summary) {
    display: none !important;
  }

  /* Subtotal, Taxes, the rule and "Due now" go only once the price at the top
     of the page is showing the checkout's live, tax-inclusive total —
     checkout_enhancements adds the class when that mirror actually lands. If
     it never does, these stay on screen rather than leaving an Australian
     buyer looking at a figure with no GST in it. */
  .checkout-layout--live-total .embedded-checkout__summary--mobile
    .embedded-checkout-price-summary > *:has(> .embedded-checkout-price-detail),
  .checkout-layout--live-total .embedded-checkout__summary--mobile
    .embedded-checkout-price-summary > .embedded-checkout-price-detail,
  .checkout-layout--live-total .embedded-checkout__summary--mobile
    .embedded-checkout-price-summary__divider {
    display: none !important;
  }

  /* Promotion code --------------------------------------------------------

     Now the first thing in the form, so Kajabi's leading space and the rule
     that separated it from the subtotal above both have to go. */

  .checkout-layout .embedded-checkout__summary--mobile .sage-spacer-top-sm {
    margin-top: 0 !important;
  }

  .checkout-layout--split .embedded-checkout__summary--mobile .checkout-promo {
    padding: 0 0 18px;
    text-align: center;
  }

  .checkout-layout--split .embedded-checkout__summary--mobile
    .embedded-checkout-coupon__container {
    padding: 0 0 18px !important;
    border-top: 0;
  }

  /* Fieldsets as cards ----------------------------------------------------

     Contact and Payment each get the box and soft shadow the reference puts
     around its payment method. Setting `border` also clears the hairline
     Kajabi draws under each fieldset — the line the client asked to drop once
     the boxes were in. */

  .checkout-layout .embedded-checkout__fieldset {
    margin: 0 0 16px;
    padding: 2px 16px 18px !important;
    border: 1px solid var(--co-card-border) !important;
    border-radius: var(--co-card-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  }

  /* A `legend` that is a fieldset's first static, unfloated child is the
     "rendered legend": the browser cuts it into the top border rather than
     laying it out in the box. That is fine on desktop, where the fieldset's
     only border is the hairline underneath it, but with a card around it the
     heading sat astride the frame. Floating the legend full-width takes it
     out of that role and puts it back in normal flow, and the clear keeps the
     fields below it rather than beside the float. */
  .checkout-layout .embedded-checkout__fieldset > .embedded-checkout__legend {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 14px !important;
  }

  .checkout-layout .embedded-checkout__fieldset > :not(legend) {
    clear: both;
  }

  /* Submit area -----------------------------------------------------------

     Kajabi's 24px side padding exists to line the button up with fields that
     are inset by the same amount. The cards above now carry that inset, so
     the button matches their outer edge instead. */

  .checkout-layout--split .embedded-checkout__cta {
    padding: 8px 0 0 !important;
  }

  /* Consent line — the label runs to two lines on a phone, and a box centred
     against both of them reads as floating. */
  .checkout-layout .service-agreement .sage-checkbox {
    align-items: flex-start;
  }

  /* The desktop rule insets this by the column gutter so it sits under the
     right-hand column. Stacked, there is no gutter to clear and the inset was
     all that stopped the line centring under the button. */
  .checkout-layout--split .embedded-checkout__footer,
  .checkout-layout--split.checkout-layout--flipped .embedded-checkout__footer {
    padding: 14px 0 0 !important;
  }
}