/* ==========================================================================
   TILGlobal — conversion components.

   A small, reusable set of blocks for every page whose job is to sell:
   hero with price proof, plan cards, feature grid, comparison table, FAQ.
   The rule throughout is that a visitor can answer "what do I get and what
   does it cost" without reading a paragraph.

   Palette is the house one from tilglobal-tokens.css. Teal is the accent
   (the "yes, included" colour); navy carries authority; royal drives action.
   Load LAST so these win over the older marketing sheets.
   ========================================================================== */

:root {
  /* Teal is unreadable on navy at its brand value; these are the on-dark pair. */
  --tg-teal-on-navy: #5EEAD4;
  --tg-teal-soft:    #F0FDFA;
  --tg-teal-line:    #99F6E4;

  /* Masked so a single glyph can take any colour from the token set. */
  --tg-tick:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --tg-dash:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  --tg-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 15 6-6 6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --tg-arrow:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------------------------------------------------------------- shell */

.sell-wrap {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

.sell-section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--tg-canvas);
}

.sell-section--surface { background: var(--tg-surface); }
.sell-section--sunk    { background: var(--tg-surface-sunk); }

.sell-head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.sell-head h2 {
  margin: 0 0 0.75rem;
  color: var(--tg-ink);
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sell-head p {
  margin: 0;
  color: var(--tg-body);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ------------------------------------------------------ text on dark panels

   Every navy surface in this sheet states its own text colours at a specificity
   that no site-wide default can outrank. Nothing here should ever be left to
   inherit, because the fallback is navy and the result is invisible text.
   -------------------------------------------------------------------------- */

body .sell-hero :is(h1, h2, h3, h4, h5, h6),
body .sell-final :is(h1, h2, h3, h4, h5, h6),
body .sell-split :is(h1, h2, h3, h4, h5, h6) {
  color: var(--tg-on-navy);
}

/* Anything without a colour of its own inherits a readable on-navy tone rather
   than falling back to the navy body colour. */
body .sell-hero,
body .sell-final { color: var(--tg-on-navy-soft); }

/* ---------------------------------------------------------------- hero */

.sell-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--tg-grad-hero);
  color: var(--tg-on-navy);
  text-align: center;
  overflow: hidden;
}

.sell-hero::after {
  /* A single soft teal glow so the navy does not read as flat. */
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 60%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(20, 184, 166, 0.18), transparent 70%);
  pointer-events: none;
}

.sell-hero > * { position: relative; z-index: 1; }

.sell-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: var(--tg-radius-pill);
  background: rgba(20, 184, 166, 0.12);
  color: var(--tg-teal-on-navy);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sell-hero__title {
  margin: 1.5rem auto 0;
  max-width: 20ch;
  color: var(--tg-on-navy);
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.sell-hero__title em {
  display: block;
  color: var(--tg-teal-on-navy);
  font-style: normal;
}

.sell-hero__lede {
  margin: 1.5rem auto 0;
  max-width: 52rem;
  color: var(--tg-on-navy-soft);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
}

.sell-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 2.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.sell-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--tg-on-navy-soft);
  font-size: 0.94rem;
  font-weight: 600;
}

.sell-hero__trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--tg-teal-on-navy);
}

.sell-hero__fine {
  margin: 1.25rem auto 0;
  max-width: 54rem;
  color: var(--tg-on-navy-faint);
  font-size: 0.86rem;
  line-height: 1.6;
}

.sell-hero__fine strong { color: var(--tg-on-navy-muted); }

/* ---- price proof strip + split card ---- */

.sell-pricestrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}

.sell-pricestrip__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tg-teal-on-navy);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sell-pricestrip__label svg { width: 16px; height: 16px; flex: none; }

.sell-savepill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-teal);
  color: #04302C;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sell-savepill svg { width: 14px; height: 14px; }

.sell-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.9rem;
  border: 1px solid var(--tg-on-navy-line);
  border-radius: var(--tg-radius-lg);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  text-align: center;
}

.sell-split--three {
  grid-template-columns: repeat(3, 1fr);
  box-shadow: inset 0 3px 0 var(--tg-teal);
}

.sell-split__pane {
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.sell-split__pane + .sell-split__pane {
  border-left: 1px solid var(--tg-on-navy-line);
}

.sell-split__pane--lead {
  position: relative;
  background: rgba(20, 184, 166, 0.09);
  box-shadow: inset 0 3px 0 var(--tg-teal);
}

.sell-split__eyebrow {
  color: var(--tg-teal-on-navy);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sell-split__pane:not(.sell-split__pane--lead) .sell-split__eyebrow {
  color: var(--tg-on-navy-muted);
}

.sell-split__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0 0.6rem;
  color: var(--tg-on-navy);
  font-size: 1.05rem;
  font-weight: 600;
}

.sell-split__price s {
  color: var(--tg-on-navy-faint);
  font-size: 1.4rem;
  font-weight: 700;
}

.sell-split__price b {
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sell-split__note {
  margin: 0;
  color: var(--tg-on-navy-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sell-split__note strong { color: var(--tg-on-navy); }

/* ---------------------------------------------------------------- plans */

.sell-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

/* There is only one plan now, so it is centred at a readable width rather than stretched full-bleed. */
.sell-plans--single {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

.sell-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-surface);
  box-shadow: var(--tg-shadow-sm);
}

.sell-plan--featured {
  border-color: var(--tg-teal);
  box-shadow: var(--tg-shadow-lg);
}

.sell-plan__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.4rem 1rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-teal);
  color: #04302C;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sell-plan__name {
  color: var(--tg-ink);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sell-plan__intro {
  margin: 0.6rem 0 0;
  color: var(--tg-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Reserve the same intro height in both cards so the prices below them sit on
   one line, which is what makes a two-card comparison readable at a glance. */
@media (min-width: 861px) {
  .sell-plan__intro { min-height: 4.1em; }
}

.sell-plan__price {
  margin: 1.1rem 0 0;
  color: var(--tg-ink);
  font-size: clamp(2.4rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.sell-plan__price span {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sell-plan__was {
  margin: 0.4rem 0 0;
  color: var(--tg-muted);
  font-size: 0.9rem;
}

.sell-trial {
  margin-top: 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tg-teal-line);
  border-radius: var(--tg-radius);
  background: var(--tg-teal-soft);
}

.sell-trial b {
  display: block;
  color: var(--tg-ink);
  font-size: 0.94rem;
  font-weight: 800;
}

.sell-trial span {
  display: block;
  margin-top: 0.2rem;
  color: var(--tg-teal-text);
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.5;
}

.sell-checks {
  margin: 1.35rem 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

/* Deliberately NOT a grid or flex container: the text of an item mixes plain
   words with <s>, <strong> and badge spans, and any container layout would
   promote each of those to its own box and break the sentence onto new lines. */
.sell-checks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--tg-body);
  font-size: 0.94rem;
  line-height: 1.55;
}

.sell-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  background: var(--tg-teal-text);
  -webkit-mask: var(--tg-tick) center / contain no-repeat;
  mask: var(--tg-tick) center / contain no-repeat;
}

.sell-checks li.is-off {
  color: var(--tg-faint);
}

.sell-checks li.is-off::before {
  background: var(--tg-line-strong);
  -webkit-mask: var(--tg-dash) center / contain no-repeat;
  mask: var(--tg-dash) center / contain no-repeat;
}

.sell-checks strong { color: var(--tg-ink); font-weight: 700; }
.sell-checks s      { color: var(--tg-faint); }
.sell-checks .win   { color: var(--tg-teal-text); font-weight: 800; }

.sell-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--tg-radius-sm);
  background: var(--tg-teal-soft);
  color: var(--tg-teal-text);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---- buttons ---- */

.sell-btn {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 0.95rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--tg-radius);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.sell-btn:hover { transform: translateY(-1px); text-decoration: none; }

.sell-btn--primary {
  background: var(--tg-teal);
  color: #04302C;
  box-shadow: 0 10px 24px rgba(20, 184, 166, 0.3);
}

.sell-btn--primary:hover { background: var(--tg-teal-dark); color: #04302C; }

.sell-btn--navy {
  background: var(--tg-navy);
  color: #FFFFFF;
  box-shadow: var(--tg-shadow-navy);
}

.sell-btn--navy:hover { background: var(--tg-navy-700); color: #FFFFFF; }

.sell-btn--ghost {
  border-color: var(--tg-line-strong);
  background: var(--tg-surface);
  color: var(--tg-ink);
}

.sell-btn--ghost:hover { border-color: var(--tg-navy); color: var(--tg-ink); }

.sell-plan__fine {
  margin: 0.75rem 0 0;
  color: var(--tg-faint);
  font-size: 0.78rem;
  text-align: center;
}

/* The member rate shown beneath a list price on a pathway card. */
.tg-tier-member {
  margin: -0.35rem 0 0.75rem;
  color: var(--tg-teal-text);
  font-size: 0.92rem;
  font-weight: 650;
}

.tg-tier-member strong { font-weight: 800; }

/* ---------------------------------------------------------------- callout */

.sell-callout {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--tg-teal-line);
  border-radius: var(--tg-radius);
  background: var(--tg-teal-soft);
}

.sell-callout b {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--tg-ink);
  font-size: 0.95rem;
  font-weight: 800;
}

.sell-callout ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--tg-body);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ------------------------------------------------- checkout membership upsell

   Sits inside the existing .certificate-option checkbox row, so it only styles
   what is inside the label and leaves the checkbox behaviour untouched.
   -------------------------------------------------------------------------- */

.sell-upsell {
  border-color: var(--tg-teal-line) !important;
  background: var(--tg-teal-soft) !important;
}

.sell-upsell__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sell-upsell__head strong {
  color: var(--tg-ink);
  font-size: 1rem;
  font-weight: 800;
}

.sell-upsell__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-teal);
  color: #04302C;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sell-upsell__prices {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tg-teal-line);
  border-radius: var(--tg-radius);
  background: var(--tg-surface);
}

.sell-upsell__cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sell-upsell__cell em {
  color: var(--tg-muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sell-upsell__cell s {
  color: var(--tg-faint);
  font-size: 1.25rem;
  font-weight: 700;
}

.sell-upsell__cell b {
  color: var(--tg-teal-text);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sell-upsell__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--tg-teal-text);
  -webkit-mask: var(--tg-arrow) center / contain no-repeat;
  mask: var(--tg-arrow) center / contain no-repeat;
}

.sell-upsell__fine {
  display: block;
  color: var(--tg-body);
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1.55;
}

/* ------------------------------------------------- inline membership offer

   The standalone version of the upsell, for pages that show a single
   programme fee and want to put the member rate next to it.
   -------------------------------------------------------------------------- */

.sell-offer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--tg-teal-line);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-teal-soft);
}

.sell-offer__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.sell-offer__head strong {
  color: var(--tg-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.sell-offer__copy p {
  margin: 0;
  color: var(--tg-body);
  font-size: 0.92rem;
  line-height: 1.6;
}

.sell-offer__prices {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--tg-teal-line);
  border-radius: var(--tg-radius);
  background: var(--tg-surface);
}

.sell-offer__cta {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .sell-offer {
    grid-template-columns: 1fr;
  }

  .sell-offer__prices { justify-content: center; }
  .sell-offer__cta    { width: 100%; }
}

/* ---------------------------------------------------------------- features */

.sell-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.sell-feature {
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-surface);
}

.sell-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: var(--tg-radius);
  background: var(--tg-teal-soft);
  color: var(--tg-teal-text);
}

.sell-feature__icon svg { width: 22px; height: 22px; }

.sell-feature h3 {
  margin: 0 0 0.5rem;
  color: var(--tg-ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.sell-feature p {
  margin: 0;
  color: var(--tg-body);
  font-size: 0.93rem;
  line-height: 1.6;
}

.sell-feature .win { color: var(--tg-teal-text); font-weight: 800; }
.sell-feature s    { color: var(--tg-faint); }

/* ---------------------------------------------------------------- compare */

.sell-compare {
  overflow-x: auto;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-surface);
  box-shadow: var(--tg-shadow-sm);
}

.sell-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.sell-compare thead th {
  padding: 0.9rem 1.1rem;
  background: var(--tg-navy);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.sell-compare thead th:first-child { text-align: left; }
.sell-compare thead th.is-hero     { background: var(--tg-teal-text); }

.sell-compare tbody td {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--tg-line);
  color: var(--tg-body);
  font-size: 0.92rem;
  text-align: center;
  vertical-align: middle;
}

.sell-compare tbody td:first-child {
  color: var(--tg-ink);
  font-weight: 650;
  text-align: left;
}

.sell-compare tbody tr:nth-child(even) td { background: var(--tg-surface-sunk); }

.sell-compare td.is-hero {
  color: var(--tg-teal-text);
  font-weight: 800;
}

.sell-compare .yes,
.sell-compare .no {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.sell-compare .yes {
  background: var(--tg-teal-text);
  -webkit-mask: var(--tg-tick) center / contain no-repeat;
  mask: var(--tg-tick) center / contain no-repeat;
}

.sell-compare .no {
  background: var(--tg-line-strong);
  -webkit-mask: var(--tg-dash) center / contain no-repeat;
  mask: var(--tg-dash) center / contain no-repeat;
}

/* ---------------------------------------------------------------- faq */

.sell-faq {
  max-width: 52rem;
  margin-inline: auto;
}

.sell-faq details {
  border-bottom: 1px solid var(--tg-line);
}

.sell-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  color: var(--tg-ink);
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.sell-faq summary::-webkit-details-marker { display: none; }

.sell-faq summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--tg-muted);
  -webkit-mask: var(--tg-chevron) center / contain no-repeat;
  mask: var(--tg-chevron) center / contain no-repeat;
  transition: transform 0.18s ease;
}

.sell-faq details[open] summary::after { transform: rotate(180deg); }
.sell-faq details[open] summary        { color: var(--tg-royal-text); }

.sell-faq__body {
  padding: 0 0 1.35rem;
  color: var(--tg-body);
  font-size: 0.95rem;
  line-height: 1.7;
}

.sell-faq__body strong { color: var(--tg-ink); }
.sell-faq__body s      { color: var(--tg-faint); }
.sell-faq__body .win   { color: var(--tg-teal-text); font-weight: 800; }

/* ---------------------------------------------------------------- closing cta */

.sell-final {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--tg-grad-hero);
  color: var(--tg-on-navy);
  text-align: center;
}

.sell-final h2 {
  margin: 0 0 0.75rem;
  color: var(--tg-on-navy);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sell-final p {
  margin: 0 auto 1.75rem;
  max-width: 44rem;
  color: var(--tg-on-navy-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.sell-final .sell-btn {
  width: auto;
  display: inline-block;
  min-width: 16rem;
}

.sell-final__fine {
  margin: 1rem 0 0;
  color: var(--tg-on-navy-faint);
  font-size: 0.84rem;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .sell-split--three { grid-template-columns: 1fr; }

  .sell-split--three .sell-split__pane + .sell-split__pane {
    border-left: 0;
    border-top: 1px solid var(--tg-on-navy-line);
  }
}

@media (max-width: 720px) {
  .sell-wrap { width: min(1120px, 100% - 2rem); }

  .sell-split { grid-template-columns: 1fr; }

  .sell-split__pane + .sell-split__pane {
    border-left: 0;
    border-top: 1px solid var(--tg-on-navy-line);
  }

  .sell-pricestrip { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sell-btn,
  .sell-faq summary::after { transition: none; }
  .sell-btn:hover { transform: none; }
}

/* ── Terms disclaimer ──────────────────────────────────────────────────────
   Pre-contract disclosure, so it has to stay legible rather than decorative.
   Colours are set explicitly: this component appears inside both light
   sections and navy bands, and must not inherit either. */
.tg-disclaimer {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 14px;
  color: #3F3A25;
}

.tg-disclaimer .tg-disclaimer__title,
body .tg-disclaimer .tg-disclaimer__title {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78350F;
}

.tg-disclaimer__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.tg-disclaimer__list li,
body .tg-disclaimer .tg-disclaimer__list li {
  color: #3F3A25;
}

.tg-disclaimer__list strong,
body .tg-disclaimer .tg-disclaimer__list strong {
  color: #78350F;
  font-weight: 800;
}

/* ── Membership benefits ───────────────────────────────────────────────────
   Rendered by the MembershipBenefits view component from one shared catalogue,
   so the same markup lands on light sections, navy bands and the dashboard.
   Every colour is stated explicitly rather than inherited: these blocks sit on
   both white and navy, and must never resolve to navy-on-navy. */

.tg-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Full feature cards, used on the membership page. */
.tg-benefits--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.tg-benefits--grid .tg-benefit {
  background: #FFFFFF;
  border: 1px solid var(--tg-line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.tg-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  background: var(--tg-teal-soft);
  border: 1px solid var(--tg-teal-line);
  color: var(--tg-teal-text);
}

.tg-benefit__icon svg { width: 21px; height: 21px; }

.tg-benefits--grid .tg-benefit__title,
body .tg-benefits--grid .tg-benefit__title {
  margin: 0 0 0.4rem;
  font-size: 1.03rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--tg-ink);
}

.tg-benefits--grid .tg-benefit__detail,
body .tg-benefits--grid .tg-benefit__detail {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--tg-muted);
}

/* Checklist rows, used inside plan cards and compact pitches. */
.tg-benefits--checks,
.tg-benefits--compact {
  display: grid;
  gap: 0.6rem;
}

.tg-benefit-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 650;
  color: var(--tg-ink);
}

.tg-benefit-row__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 0.12rem;
  border-radius: 999px;
  background: var(--tg-teal-soft);
  color: var(--tg-teal-text);
  flex: 0 0 auto;
}

.tg-benefit-row__mark svg { width: 12px; height: 12px; }

.tg-benefit-row__text { min-width: 0; }

/* Coming soon: readable, but visibly not a claim about today. */
.tg-benefit__soon {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.08em;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.tg-benefit-row.is-soon .tg-benefit-row__mark {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
}

.tg-benefits--grid .tg-benefit.is-soon .tg-benefit__icon {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #B45309;
}

/* ── On navy ───────────────────────────────────────────────────────────────
   Heroes, CTA bands and the footer. Light text, brighter teal, and a soon
   badge that reads against dark rather than washing out. */

.tg-benefits--on-navy .tg-benefit-row,
body .tg-benefits--on-navy .tg-benefit-row,
.tg-benefits--on-navy .tg-benefit-row__text,
body .tg-benefits--on-navy .tg-benefit-row__text {
  color: rgba(255, 255, 255, 0.92);
}

.tg-benefits--on-navy .tg-benefit-row__mark {
  background: rgba(94, 234, 212, 0.16);
  color: var(--tg-teal-on-navy);
}

.tg-benefits--on-navy .tg-benefit-row.is-soon .tg-benefit-row__mark {
  background: rgba(253, 230, 138, 0.18);
  border-color: rgba(253, 230, 138, 0.45);
  color: #FCD34D;
}

.tg-benefits--on-navy .tg-benefit__soon,
body .tg-benefits--on-navy .tg-benefit__soon {
  background: rgba(253, 230, 138, 0.16);
  border-color: rgba(253, 230, 138, 0.5);
  color: #FCD34D;
}

.tg-benefits--on-navy .tg-benefit,
body .tg-benefits--on-navy .tg-benefit {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.tg-benefits--on-navy .tg-benefit__title,
body .tg-benefits--on-navy .tg-benefit__title {
  color: #FFFFFF;
}

.tg-benefits--on-navy .tg-benefit__detail,
body .tg-benefits--on-navy .tg-benefit__detail {
  color: rgba(255, 255, 255, 0.82);
}

.tg-benefits--on-navy .tg-benefit__icon {
  background: rgba(94, 234, 212, 0.14);
  border-color: rgba(94, 234, 212, 0.32);
  color: var(--tg-teal-on-navy);
}

@media (max-width: 640px) {
  .tg-benefits--grid { grid-template-columns: 1fr; }
}

/* Sub-label inside a plan card, introducing the shared benefits list. */
.sell-plan__sub,
body .sell-plan__sub {
  margin: 1.15rem 0 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tg-line);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-faint);
}

/* A second heading inside a section that already has one. */
.sell-head--tight {
  margin-top: 2.75rem;
}

/* Labels introducing the shared benefits list inside the checkout upsell and
   the course-page offer. Both sit on pale cards, so colour is stated outright. */
.sell-upsell__perks,
.sell-offer__perks {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--tg-line-strong);
}

.sell-upsell__perks-label,
.sell-offer__perks-label,
body .sell-upsell__perks-label,
body .sell-offer__perks-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-faint);
}

.sell-offer__perks-label {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--tg-line-strong);
}

/* Inside compact banners the rows are smaller and tighter than on sales pages. */
.tg-plus-banner .tg-benefits--compact,
.lobs-prog .tg-benefits--compact {
  margin-top: 0.75rem;
  gap: 0.4rem;
}

.tg-plus-banner .tg-benefit-row,
.lobs-prog .tg-benefit-row {
  font-size: 0.86rem;
  font-weight: 600;
}

/* ── Contrast guard for benefit lists on coloured bands ────────────────────
   The "on navy" variant also lands on the bright blue/teal promo banners,
   where white at 92% measured 4.08:1 and the amber badge only 2.58:1. Rather
   than tune per banner, the list carries its own dark scrim, so the effective
   background is known no matter how light the band behind it is. */
.tg-benefits--on-navy {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.tg-benefits--on-navy.tg-benefits--grid {
  background: transparent;
  padding: 0;
}

.tg-benefits--on-navy .tg-benefit-row,
body .tg-benefits--on-navy .tg-benefit-row,
.tg-benefits--on-navy .tg-benefit-row__text,
body .tg-benefits--on-navy .tg-benefit-row__text {
  color: #FFFFFF;
}

.tg-benefits--on-navy .tg-benefit__soon,
body .tg-benefits--on-navy .tg-benefit__soon {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(253, 230, 138, 0.55);
  color: #FDE68A;
}

.tg-benefits--on-navy .tg-benefit-row__mark {
  background: rgba(94, 234, 212, 0.22);
  color: #99F6E4;
}

.tg-benefits--on-navy .tg-benefit-row.is-soon .tg-benefit-row__mark {
  background: rgba(253, 230, 138, 0.22);
  border-color: rgba(253, 230, 138, 0.55);
  color: #FDE68A;
}

/* Link through to a live member feature from the benefits grid. Only rendered inside the member
   area, so it always sits on the light card surface. */
.tg-benefit__link {
    display: inline-block;
    margin-top: 0.65rem;
    color: var(--tg-blue-text, #1d4ed8);
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
}

.tg-benefit__link:hover {
    text-decoration: underline;
}

.tg-benefits--on-navy .tg-benefit__link {
    color: #BFDBFE;
}