/* ss-compare.module — ported from the Kajabi `.ss-comparison-section` block.

   THIS SECTION IS NOT FULL-BLEED, and that is the live page's design. Unlike
   every other section here, `.ss-comparison-section` caps itself at 1200px and
   centres, so the table reads as a card sitting ON the band rather than as a
   band of its own. The .ss-band wrapper supplies the ground behind it.

   The blanket font-family rules at the top are the live page's: it restated
   the two families across nine element types with !important because the
   Kajabi theme was styling <em>, <strong> and <a> underneath it. They are kept
   rather than trimmed — there is no upside to finding out which of the nine
   was load-bearing.

   The three richtext wrappers (`-intro-copy`, `-description`, and the cells)
   carry their own type for the usual reason: a richtext field emits its own
   <p>, which would otherwise take the page defaults.

   One breakpoint, 767, and it does NOT stack. See the note at the foot. */


.ss-comparison-section,
.ss-comparison-section *,
.ss-comparison-section p,
.ss-comparison-section span,
.ss-comparison-section div,
.ss-comparison-section a,
.ss-comparison-section strong,
.ss-comparison-section em,
.ss-comparison-section button {
  font-family: var(--ss-sans, 'Montserrat', Arial, sans-serif) !important;
}

.ss-comparison-section h1,
.ss-comparison-section h2,
.ss-comparison-section h3,
.ss-comparison-section h4,
.ss-comparison-section h5,
.ss-comparison-section h6 {
  font-family: var(--ss-serif, 'Libre Baskerville', Georgia, serif) !important;
}

.ss-comparison-section {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 70px 20px !important;
  box-sizing: border-box !important;
}


/* ═══ INTRO ═══════════════════════════════════════════════════════ */

.ss-comparison-intro {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto 45px !important;
}

.ss-comparison-eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--ss-teal, #009490) !important;
  margin-bottom: 14px !important;
}

/* Deep teal rather than the navy the other section headings use — measured,
   and it is what the source declares here too. */
.ss-comparison-intro h2 {
  font-family: var(--ss-serif, 'Libre Baskerville', Georgia, serif) !important;
  font-size: 38px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--ss-teal-deep, #005470) !important;
  margin: 0 0 18px !important;
}

.ss-comparison-intro-copy,
.ss-comparison-intro-copy p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  color: var(--ss-body-1, #36545A) !important;
  margin: 0 !important;
}


/* ═══ THE TABLE ═══════════════════════════════════════════════════ */

/* overflow: hidden is what clips the header row's colour into the card's
   rounded corners. At 767 it is replaced by overflow-x: auto — see below. */
.ss-comparison-table {
  width: 100% !important;
  border: 1px solid var(--ss-rule, #D6D1C4) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(0, 84, 112, .08) !important;
}

/* min-width 900 is the reason the table scrolls instead of squashing: below
   that the row keeps its width and the CARD scrolls. */
.ss-comparison-row {
  display: grid !important;
  grid-template-columns: 190px 1fr 1fr !important;
  width: 100% !important;
  min-width: 900px !important;
}

.ss-comparison-row:not(:last-child) {
  border-bottom: 1px solid var(--ss-rule, #D6D1C4) !important;
}

.ss-comparison-header {
  border-bottom: 2px solid var(--ss-rule, #D6D1C4) !important;
}

.ss-comparison-header > div {
  padding: 30px 28px !important;
  box-sizing: border-box !important;
}

.ss-header-label {
  background: var(--ss-sand, #EBE7DF) !important;
}

/* Deep teal on the green: 5.29:1. */
.ss-header-semester {
  background: var(--ss-green, #A2D45E) !important;
  border-bottom: 4px solid var(--ss-teal-deep, #005470) !important;
}

/* WHITE ON #009490 IS 3.72:1, which is below the 4.5:1 that 14-23px type
   needs. It is the live page's and it ships unchanged, because this is a
   like-for-like migration and changing it here would make the two pages
   differ. It is worth fixing — #005470 in place of the teal takes the same
   white type to 8.39:1, which is the swap brand/bes-tokens.css already
   documents for the BTS panel — but that is a visible design decision with
   Judy, not something to slip into a port. Flagged in the handover. */
.ss-header-premium {
  background: var(--ss-teal, #009490) !important;
  border-bottom: 4px solid var(--ss-teal-deep, #005470) !important;
}

.ss-header-title {
  font-family: var(--ss-serif, 'Libre Baskerville', Georgia, serif) !important;
  font-size: 23px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}

.ss-header-semester .ss-header-title { color: var(--ss-teal-deep, #005470) !important; }
.ss-header-premium  .ss-header-title { color: #fff !important; }

.ss-header-description,
.ss-header-description p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.ss-header-semester .ss-header-description,
.ss-header-semester .ss-header-description p { color: var(--ss-teal-deep, #005470) !important; }
.ss-header-premium  .ss-header-description,
.ss-header-premium  .ss-header-description p { color: #fff !important; }


/* ═══ ROWS ════════════════════════════════════════════════════════ */

.ss-comparison-label {
  background: var(--ss-sand, #EBE7DF) !important;
  padding: 24px 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
}

.ss-comparison-label strong {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: var(--ss-teal-deep, #005470) !important;
}

.ss-comparison-cell {
  padding: 24px 28px !important;
  box-sizing: border-box !important;
}

/* The two columns are tinted differently all the way down, so a reader who has
   scrolled past the header still knows which side they are reading. */
.ss-comparison-semester { background: var(--ss-mint, #EAF5DB) !important; }
.ss-comparison-premium  { background: #fff !important; }

.ss-comparison-cell,
.ss-comparison-cell p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  color: var(--ss-body-1, #36545A) !important;
  margin: 0 !important;
}
.ss-comparison-cell p + p { margin-top: 10px !important; }

.ss-comparison-cell strong {
  font-weight: 800 !important;
  color: var(--ss-teal-deep, #005470) !important;
}

.ss-comparison-cell em {
  font-style: italic !important;
}


/* ═══ CLOSING ROW ═════════════════════════════════════════════════ */

.ss-comparison-cta {
  border-top: 1px solid var(--ss-rule, #D6D1C4) !important;
}

/* THE TWO BUTTONS SHARE A TOP AND A BOTTOM EDGE, AND THE HEADINGS ABOVE THEM
   DO NOT GET A VOTE. The grid row already makes both cells the same height;
   what pushed the buttons apart was that each sat immediately after its own
   heading, and column A's heading wraps to a different number of lines than
   column B's. A flex column with the button on `margin-top: auto` anchors it to
   the bottom of the cell instead, so the two land on the same line whatever the
   headings do. The heading's `margin: 0 0 18px` still holds as a MINIMUM gap.
   Nothing about the buttons themselves changes — this is alignment only. */
.ss-comparison-cta > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 30px 28px !important;
  box-sizing: border-box !important;
}

.ss-comparison-cta .ss-cta-button {
  margin-top: auto !important;
}

/* AND THE SAME TOP EDGE, WHICH THE BOTTOM ANCHOR ALONE DOES NOT BUY. Below
   about 960px "LEARN MORE ABOUT PREMIUM COACHING" wraps to two lines while
   "BOOK A CALL WITH SAM" stays on one, so the two buttons end up 54px and 72px
   tall — bottoms level, tops 18px apart. Nothing inside one column can see the
   other column's button, so no amount of flex in the cell can fix that.

   Subgrid can: the closing row declares two rows of its own, each cell spans
   both and adopts their heights, and the button row is therefore as tall as the
   TALLER of the two buttons at every width. Both buttons then share a top and a
   bottom edge whatever the labels do.

   `justify-self: start` keeps each button its own content width — a grid item
   stretches by default, and without it both would run the full column. Nothing
   else about the button changes: same padding, radius, type, colour and
   destination. Guarded by @supports so a browser without subgrid keeps the
   bottom-anchored flex layout above rather than losing the cell to a grid it
   cannot size. */
@supports (grid-template-rows: subgrid) {
  .ss-comparison-cta {
    grid-template-rows: auto auto !important;
  }

  .ss-comparison-cta > div {
    display: grid !important;
    grid-template-rows: subgrid !important;
    grid-row: span 2 !important;
  }

  .ss-comparison-cta .ss-cta-heading {
    align-self: start !important;
  }

  .ss-comparison-cta .ss-cta-button {
    margin-top: 0 !important;
    align-self: stretch !important;
    justify-self: start !important;
  }
}

.ss-cta-label    { background: var(--ss-sand, #EBE7DF) !important; }
.ss-cta-semester { background: var(--ss-mint, #EAF5DB) !important; }
.ss-cta-premium  { background: var(--ss-ice,  #D9EDF2) !important; }

.ss-cta-heading {
  font-family: var(--ss-serif, 'Libre Baskerville', Georgia, serif) !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: var(--ss-teal-deep, #005470) !important;
  margin: 0 0 18px !important;
}


/* ═══ THE TWO BUTTONS ═════════════════════════════════════════════ */

.ss-cta-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 16px 30px !important;
  border-radius: 14px !important;
  font-family: var(--ss-sans, 'Montserrat', Arial, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  box-shadow: 0 8px 20px rgba(0, 84, 112, .12) !important;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease !important;
}

/* Deep teal on green, 5.29:1. Never white on the green — 1.73:1. */
.ss-semester-button {
  background: var(--ss-green, #A2D45E) !important;
  color: var(--ss-teal-deep, #005470) !important;
  border: 2px solid var(--ss-green, #A2D45E) !important;
}

.ss-semester-button:hover {
  background: var(--ss-teal, #009490) !important;
  color: #FFFFFF !important;
  border-color: var(--ss-teal, #009490) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(0, 84, 112, .18) !important;
}

/* White on #009490 is 3.72:1 here too — the same finding as the column header
   above, and flagged with it. The hover state takes it to #005470 and 8.39:1,
   which is the value the resting state would want. */
.ss-premium-button {
  background: var(--ss-teal, #009490) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--ss-teal, #009490) !important;
}

.ss-premium-button:hover {
  background: var(--ss-teal-deep, #005470) !important;
  color: #FFFFFF !important;
  border-color: var(--ss-teal-deep, #005470) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(0, 84, 112, .18) !important;
}


/* ═══ MOBILE ══════════════════════════════════════════════════════
   THE TABLE DOES NOT STACK. It stays three columns and the CARD scrolls
   sideways: the rows keep a 750px minimum and .ss-comparison-table swaps
   its overflow clip for overflow-x: auto. That is deliberate on the live
   page and is preserved — a comparison whose two sides stop being visible
   together has stopped comparing anything.

   The cost is that the page's one horizontal scroll lives here, inside a
   bordered card that looks scrollable. It is checked at 390 as part of the
   verification pass, both that it scrolls and that it does not drag the
   document's own scroll width with it. */

@media (max-width: 767px) {

  .ss-comparison-section { padding: 50px 15px !important; }

  .ss-comparison-intro { margin-bottom: 30px !important; }
  .ss-comparison-intro h2 { font-size: 30px !important; }
  .ss-comparison-intro-copy,
  .ss-comparison-intro-copy p { font-size: 15px !important; }

  .ss-comparison-table {
    border-radius: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .ss-comparison-row {
    display: grid !important;
    grid-template-columns: 150px 300px 300px !important;
    min-width: 750px !important;
  }

  .ss-comparison-header { display: grid !important; }
  .ss-header-label { display: block !important; }
  .ss-comparison-header > div { padding: 25px 22px !important; }

  .ss-comparison-label { padding: 20px 16px !important; }
  .ss-comparison-cell  { padding: 20px !important; }

  .ss-comparison-cell,
  .ss-comparison-cell p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .ss-comparison-label strong { font-size: 11px !important; }

  .ss-header-title { font-size: 20px !important; }
  .ss-header-description,
  .ss-header-description p { font-size: 13px !important; }

  .ss-comparison-cta > div { padding: 25px 20px !important; }
  .ss-cta-label { display: block !important; }
  .ss-cta-heading { font-size: 17px !important; }

  .ss-cta-button {
    min-height: 54px !important;
    width: auto !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    text-align: center !important;
  }
}