/*
 * TTN App Partner Display — scoped styles.
 * Everything lives under .ttn-app-partner so theme styles are never affected.
 * Design tokens ported 1:1 from the TTN partner detail mockup
 * (plugin/ttn-app-partner/ttn-app-partner.css).
 */

.ttn-ap-hero__logo  {
	width: 230px !important;
}

.ttn-ap-discount-card__logo {
	width:150px !important;
}

.ttn-ap-feature__media img {
	height : 400px !important;
}

.ttn-app-partner {
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0d0d0d;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.ttn-app-partner *,
.ttn-app-partner *::before,
.ttn-app-partner *::after {
  box-sizing: border-box;
}

.ttn-app-partner img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ttn-app-partner a {
  color: inherit;
  text-decoration: none;
}

/* Theme a:hover rules underline links inside the plugin — keep them clean. */
.ttn-app-partner a:hover,
.ttn-app-partner a:focus {
  text-decoration: none;
}

.ttn-app-partner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ttn-app-partner p,
.ttn-app-partner h2,
.ttn-app-partner h3,
.ttn-app-partner h4 {
  margin: 0;
  padding: 0;
}

/* ---------- Typography ---------- */
.ttn-ap-hero__title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: #010101;
  text-align: left;
}

.ttn-ap-h3 {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: #010101;
}

.ttn-ap-h4 {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: #010101;
}

.ttn-ap-text,
.ttn-ap-prose {
  font-weight: 500;
  line-height: 1.4;
  color: #0d0d0d;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ttn-ap-prose p {
  margin: 0 0 1em;
}

.ttn-ap-prose p:last-child {
  margin-bottom: 0;
}

.ttn-ap-prose ul,
.ttn-ap-prose ol {
  list-style: disc;
  margin: 0 0 1em 1.5em;
}

.ttn-ap-prose ol {
  list-style: decimal;
}

.ttn-ap-prose h1,
.ttn-ap-prose h2,
.ttn-ap-prose h3,
.ttn-ap-prose h4,
.ttn-ap-prose h5,
.ttn-ap-prose h6 {
  margin: 0 0 0.5em;
  font-weight: 500;
  line-height: 1.1;
  color: #010101;
}

.ttn-ap-prose a {
  color: #004ba2;
  text-decoration: underline;
}

.ttn-ap-lead {
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  color: #0d0d0d;
}

.ttn-ap-lead p {
  margin: 0;
}

.ttn-ap-text-sm {
  font-size: clamp(0.9375rem, 0.2vw + 0.875rem, 1.125rem);
  font-weight: 500;
  color: #323232;
}

.ttn-ap-step-num {
  font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: #004ba2;
}

/* ---------- Buttons ---------- */
.ttn-ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: 14px;
  font-size: clamp(0.875rem, 0.15vw + 0.8rem, 1rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.ttn-ap-btn:hover,
.ttn-ap-btn:focus-visible {
  opacity: 0.9;
}

.ttn-ap-btn:focus-visible {
  outline: 2px solid #004ba2;
  outline-offset: 2px;
}

.ttn-ap-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem;
  border-radius: 11px;
  flex-shrink: 0;
}

.ttn-ap-btn__icon img {
  width: 12px;
  height: 12px;
}

.ttn-ap-btn--primary {
  background: #004ba2;
  color: #fff;
}

.ttn-ap-btn--primary .ttn-ap-btn__icon {
  background: #fff;
}

.ttn-ap-btn--secondary {
  background: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08);
}

.ttn-ap-btn--secondary .ttn-ap-btn__icon {
  background: #004ba2;
}

/* White button used on the dark CTA banner. */
.ttn-ap-btn--light {
  background: #fff;
  color: #0d0d0d;
}

.ttn-ap-btn--light .ttn-ap-btn__icon {
  background: #00457c;
}

/* Theme guards: keep text color/decoration stable under theme/Elementor
   a:hover rules, which outrank the plain class selectors above. */
.ttn-app-partner a.ttn-ap-btn:hover,
.ttn-app-partner a.ttn-ap-btn:focus-visible {
  text-decoration: none;
}

.ttn-app-partner a.ttn-ap-btn--primary,
.ttn-app-partner a.ttn-ap-btn--primary:hover,
.ttn-app-partner a.ttn-ap-btn--primary:focus-visible {
  color: #fff;
}

.ttn-app-partner a.ttn-ap-btn--secondary,
.ttn-app-partner a.ttn-ap-btn--secondary:hover,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible,
.ttn-app-partner a.ttn-ap-btn--light,
.ttn-app-partner a.ttn-ap-btn--light:hover,
.ttn-app-partner a.ttn-ap-btn--light:focus-visible {
  color: #0d0d0d;
}

/* Full-bleed hero/CTA/tinted bands reach the viewport edges; 100vw includes
   the scrollbar width, which otherwise adds a stray horizontal scrollbar.
   `clip` (over `hidden`) avoids creating a new scroll context, so sticky
   positioning and page scrolling are unaffected. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* wpautop safety net: when the shortcode is wrapped in a <p> (Text Editor
   widget / classic editor), browsers split it into empty paragraphs around
   the plugin markup — hide them so they don't add white space. */
p:empty + .ttn-app-partner,
.ttn-app-partner + p:empty {
  display: none;
}

/* ---------- Shared ---------- */
.ttn-ap-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ttn-ap-group {
  display: flex;
  flex-direction: column;
}

.ttn-ap-partner {
  display: flex;
  flex-direction: column;
}

.ttn-ap-body {
  width: min(100% - 2rem, 1530px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* Mockup rhythm: every top-level section is a .section with vertical
   padding — two adjacent sections give 2× the padding as whitespace. */
.ttn-ap-body > * {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.ttn-ap-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
  max-width: 900px;
  margin-inline: auto;
}

.ttn-ap-notice {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 12px;
  background: #f7f8fa;
  font-weight: 500;
}

/* Back link to the parent partner on the single-partner detail view. */
.ttn-ap-parent-link {
  display: none;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #004ba2;
}

.ttn-ap-parent-link::before {
  content: "←";
}

.ttn-ap-parent-link:hover,
.ttn-ap-parent-link:focus-visible {
  text-decoration: underline;
}

/* ---------- Hero ---------- */
.ttn-ap-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  min-height: clamp(420px, 42vw, 801px);
  overflow: hidden;
  background: #e9f3ff;
}

/* Full-bleed: break the hero out of the shortcode container to the viewport
   edges. No-op when the plugin already renders at full width. Child-partner
   heroes inside the bordered group cards stay contained. */
.ttn-ap-partner--single .ttn-ap-hero,
.ttn-ap-partner--parent .ttn-ap-hero {
  margin-inline: calc(50% - 50vw);
}

.ttn-ap-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ttn-ap-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ttn-ap-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(13, 13, 13, 0.08) 100%
  );
}

/* White info card over the banner (Figma) */
.ttn-ap-hero__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: stretch;
  width: min(100%, 1840px);
  padding: clamp(1.25rem, 2.2vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(13, 13, 13, 0.08);
}

.ttn-ap-hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.875rem, 1.2vw, 1.25rem);
  min-width: 0;
}

.ttn-ap-hero__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 2vw, 2rem);
  min-width: 0;
}

.ttn-ap-hero__aside-top {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.5vw, 1.5rem);
}

.ttn-ap-hero__block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ttn-ap-hero__label {
  margin: 0;
  font-size: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: #010101;
}

.ttn-ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ttn-ap-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  border-radius: 48px;
  background: #f7f8fa;
  font-size: clamp(0.875rem, 0.15vw + 0.8rem, 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: #202a50;
}

.ttn-ap-hero__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: clamp(0.875rem, 0.15vw + 0.8rem, 1rem);
  font-weight: 400;
  line-height: 1.2;
  color: #010101;
}

.ttn-ap-hero__svc-sep {
  color: #010101;
}

.ttn-ap-hero__webs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ttn-ap-hero__web {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: clamp(0.8125rem, 0.15vw + 0.75rem, 0.875rem);
  font-weight: 400;
  line-height: 1.2;
  color: #010101;
  text-decoration: none;
}

.ttn-ap-hero__web:hover {
  color: #004ba2;
}

.ttn-ap-hero__web .ttn-ap-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ttn-ap-hero__logo {
  width: clamp(160px, 24vw, 280px);
  height: auto;
}

.ttn-ap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  border-radius: 48px;
  background: #fff;
  font-size: clamp(0.875rem, 0.15vw + 0.8rem, 1rem);
  font-weight: 500;
  color: #202a50;
}

.ttn-ap-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.ttn-ap-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.125rem);
  font-weight: 500;
  color: #0d0d0d;
}

.ttn-ap-rating {
  padding: 0.375rem 0.75rem;
  border-left: 1px solid #000;
  font-weight: 700;
}

.ttn-ap-rating span {
  color: #ffa600;
}

.ttn-ap-hero__title {
  margin: 0;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: #010101;
  text-align: left;
}

.ttn-ap-hero__rule {
  width: 100%;
  height: 1px;
  border-radius: 8px;
  background: rgba(44, 44, 44, 0.1);
}

.ttn-ap-hero__lead {
  margin: 0;
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: #0d0d0d;
}

.ttn-ap-hero__desc {
  font-size: clamp(0.9375rem, 0.25vw + 0.85rem, 1.125rem);
  font-weight: 500;
  line-height: 1.2;
  color: #010101;
}

.ttn-ap-hero__desc p {
  margin: 0 0 0.5em;
}

.ttn-ap-hero__desc p:last-child {
  margin-bottom: 0;
}

.ttn-ap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Compact hero variant for child partners inside the group. */
.ttn-ap-partner--child .ttn-ap-hero {
  min-height: 0;
  padding: clamp(1.75rem, 4vw, 3rem) 1rem;
  align-items: stretch;
}

.ttn-ap-partner--child .ttn-ap-hero__panel {
  box-shadow: none;
  border: 1px solid rgba(13, 13, 13, 0.08);
}

.ttn-ap-partner--child .ttn-ap-hero__title {
  font-size: clamp(1.5rem, 2.4vw + 0.9rem, 2.5rem);
}

/* ---------- About / description ---------- */
.ttn-ap-about .ttn-ap-prose {
  max-width: 85ch;
  margin-inline: auto;
}

/* ---------- Discount ---------- */
.ttn-ap-discount__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.ttn-ap-discount__grid--single {
  grid-template-columns: 1fr;
}

.ttn-ap-discount__info {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

.ttn-ap-discount-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 24px;
  overflow: hidden;
  background: #e9f3ff;
  min-width: 0;
}

.ttn-ap-discount-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ttn-ap-discount-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.ttn-ap-discount-card > *:not(.ttn-ap-discount-card__bg) {
  position: relative;
  z-index: 1;
}

.ttn-ap-discount-card__logo {
  width: clamp(180px, 40%, 311px);
  height: auto;
}

.ttn-ap-discount-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ttn-ap-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px dashed #004ba2;
  border-radius: 16px;
}

.ttn-ap-promo__text {
  min-width: 0;
}

.ttn-ap-promo__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #010101;
  margin-bottom: 0.875rem;
}

.ttn-ap-promo__code {
  font-size: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
  font-weight: 500;
  color: #004ba2;
  line-height: 1.1;
  overflow-wrap: anywhere;
}


.ttn-ap-promo__copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 1px #004ba2;
  border-radius: 11px;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
}

.ttn-ap-promo__copy:focus-visible {
  outline: 2px solid #004ba2;
  outline-offset: 2px;
}

/* Blue icon on white by default; on hover the button fills blue and the
   white icon takes over. Theme button rules must not repaint either state. */
.ttn-app-partner button.ttn-ap-promo__copy {
  background: #fff;
}

.ttn-app-partner button.ttn-ap-promo__copy:hover,
.ttn-app-partner button.ttn-ap-promo__copy:focus-visible {
  background: #004ba2;
}

.ttn-ap-promo__copy .ttn-ap-promo__copy-icon--hover {
  display: none;
}

.ttn-ap-promo__copy:hover .ttn-ap-promo__copy-icon,
.ttn-ap-promo__copy:focus-visible .ttn-ap-promo__copy-icon {
  display: none;
}

.ttn-ap-promo__copy:hover .ttn-ap-promo__copy-icon--hover,
.ttn-ap-promo__copy:focus-visible .ttn-ap-promo__copy-icon--hover {
  display: block;
}

.ttn-ap-promo__copied {
  display: none;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ttn-ap-promo__copy.is-copied .ttn-ap-promo__copied {
  display: inline;
}

/* ---------- Join gate (non-member promo-code gate) ---------- */
.ttn-ap-join {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  text-align: center;
}

.ttn-ap-join__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  font-weight: 600;
  color: #0d0d0d;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 20px;
}

.ttn-ap-join-card {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(13, 13, 13, 0.12);
  text-align: center;
  margin-top: 20px;
  margin-bottom:20px;
}

.ttn-ap-join-card__head {
  position: relative;
  padding: 2rem 1.5rem;
  background: #004ba2;
  overflow: hidden;
}

.ttn-ap-join-card__name {
  font-size: clamp(1.125rem, 1vw + 0.875rem, 1.5rem);
  font-weight: 500;
  color: #fff !important;
}

.ttn-ap-join-card__ribbon {
  position: absolute;
  top: 30px;
  right: -36px;
  transform: rotate(45deg);
  padding: 0.3rem 2.75rem;
  background: #c0392b;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ttn-ap-join-card__body {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.ttn-ap-join-card__logo {
  height: 64px;
  width: auto;
  margin: 0 auto;
}

.ttn-ap-join-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.ttn-ap-join-card__amount {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-weight: 700;
  color: #0d0d0d;
}

.ttn-ap-join-card__period {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #d9534f;
}

.ttn-ap-join-card__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

.ttn-ap-join-card__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0d0d0d;
}

.ttn-ap-join-card__btn {
  display: inline-block;
  padding: 0.75rem 2.5rem;
  background: #004ba2;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 0.2s ease;
}

.ttn-app-partner a.ttn-ap-join-card__btn,
.ttn-app-partner a.ttn-ap-join-card__btn:hover,
.ttn-app-partner a.ttn-ap-join-card__btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

.ttn-app-partner a.ttn-ap-join-card__btn:hover,
.ttn-app-partner a.ttn-ap-join-card__btn:focus-visible {
  background: #003d85;
}

.ttn-ap-join__login {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: #0d0d0d;
}

.ttn-ap-join__login a {
  color: #d9534f;
  font-weight: 600;
}

/* ---------- Membership card band ---------- */
/* Full-bleed tint: box-shadow spreads the bg to the viewport edges while
   clip-path lets the horizontal overflow show (content stays constrained). */
.ttn-ap-membership {
  display: grid;
  grid-template-columns: minmax(260px, 445px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  background: #e9f3ff;
  box-shadow: 0 0 0 100vmax #e9f3ff;
  clip-path: inset(0 -100vmax);
}

.ttn-ap-member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: clamp(220px, 30vw, 279px);
  padding: clamp(1rem, 1.5vw, 1.3rem);
  border-radius: 16px;
  background: #f7f8fa;
  overflow: hidden;
}

.ttn-ap-member-card__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}

.ttn-ap-member-card__pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ttn-ap-member-card__top,
.ttn-ap-member-card__rows {
  position: relative;
  z-index: 1;
}

.ttn-ap-member-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ttn-ap-member-card__title {
  font-size: clamp(1.25rem, 1vw + 0.75rem, 1.625rem);
  font-weight: 500;
  color: #0d0d0d;
}

.ttn-ap-member-card__logo {
  width: clamp(120px, 40%, 183px);
  height: auto;
}

.ttn-ap-member-card__rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: clamp(0.8125rem, 0.2vw + 0.75rem, 0.975rem);
  font-weight: 500;
}

.ttn-ap-member-card__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.ttn-ap-member-card__row-label {
  color: #0d0d0d;
}

.ttn-ap-member-card__row-value {
  color: #323232;
  text-align: right;
}

.ttn-ap-membership__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

/* ---------- Link rows ---------- */
.ttn-ap-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Checklist / services ---------- */
.ttn-ap-checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ttn-ap-services .ttn-ap-h3 {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ttn-ap-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: clamp(0.9375rem, 0.2vw + 0.875rem, 1.125rem);
  font-weight: 500;
  line-height: 1.2;
  color: #010101;
}

.ttn-ap-checklist__item .ttn-ap-icon {
  margin-top: 0.1rem;
}

/* ---------- Benefit steps ---------- */
.ttn-ap-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ttn-ap-step-card {
  display: flex;
  flex-direction: column;
  
  gap: 1rem;
  min-height: clamp(240px, 25vw, 299px);
  padding: 1rem;
  background: #e9f3ff;
  border-radius: 24px;
  min-width: 0;
}

.ttn-ap-step-card__img {
  width: 50px;
  /* aspect-ratio: 16 / 9; */
  object-fit: cover;
  border-radius: 14px;
}

.ttn-ap-step-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ttn-ap-steps__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

/* ---------- Feature rows (content sections) ---------- */
.ttn-ap-features {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
}

.ttn-ap-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  border-radius: 24px;
}

/* Sections with a custom background_color render as full-bleed tint bands. */
.ttn-ap-feature[style] {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--ttn-ap-tint, transparent);
  clip-path: inset(0 -100vmax);
}

.ttn-ap-feature--media-left .ttn-ap-feature__media {
  order: -1;
}

.ttn-ap-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

.ttn-ap-feature__content > img {
  width: clamp(140px, 20vw, 182px);
  height: auto;
}

.ttn-ap-feature__media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 755 / 559;
  min-width: 0;
}

.ttn-ap-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ttn-ap-feature--duo {
  grid-template-columns: 1fr 1fr;
}

.ttn-ap-feature--duo .ttn-ap-feature__media {
  order: 0;
}

/* ---------- Gallery ---------- */
.ttn-ap-gallery__rows {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ttn-ap-gallery__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ttn-ap-gallery__row--mixed {
  grid-template-columns: 1.35fr 1fr 1fr;
}

.ttn-ap-gallery__item {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.ttn-ap-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Bottom CTA banner ---------- */
.ttn-ap-cta {
  margin-inline: calc(50% - 50vw);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 8vw, 7.5rem) 1rem clamp(8rem, 20vw, 20rem);
  overflow: hidden;
  min-height: clamp(420px, 50vw, 600px);
}

.ttn-ap-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ttn-ap-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ttn-ap-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 47, 64, 0) 46%, #29537c 100%);
}

.ttn-ap-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: min(100%, 849px);
  text-align: center;
}

.ttn-ap-cta__title {
  font-size: clamp(2rem, 3vw + 1rem, 4rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

.ttn-ap-cta__body {
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

/* ---------- Children group ---------- */
.ttn-ap-children {
  width: min(100% - 2rem, 1530px);
  margin-inline: auto;
  border-top: 1px solid rgba(13, 13, 13, 0.12);
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.ttn-ap-children__title {
  font-size: clamp(1.25rem, 1.5vw + 0.9rem, 2rem);
  font-weight: 500;
  color: #010101;
  text-align: center;
}

.ttn-ap-children .ttn-ap-partner {
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.ttn-ap-children .ttn-ap-partner .ttn-ap-body {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ttn-ap-children .ttn-ap-body > * {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
  .ttn-ap-discount__grid,
  .ttn-ap-membership,
  .ttn-ap-feature,
  .ttn-ap-feature--duo {
    grid-template-columns: 1fr;
  }

  .ttn-ap-membership {
    justify-items: center;
  }

  .ttn-ap-membership__content {
    width: 100%;
  }

  .ttn-ap-feature--media-left .ttn-ap-feature__media {
    order: -1;
  }

  .ttn-ap-steps__grid {
    grid-template-columns: 1fr;
  }

  .ttn-ap-gallery__row,
  .ttn-ap-gallery__row--mixed {
    grid-template-columns: 1fr 1fr;
  }

  .ttn-ap-hero__panel {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 640px) {
  .ttn-ap-gallery__row,
  .ttn-ap-gallery__row--mixed {
    grid-template-columns: 1fr;
  }

  .ttn-ap-hero__actions,
  .ttn-ap-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .ttn-ap-hero__actions .ttn-ap-btn,
  .ttn-ap-links .ttn-ap-btn {
    width: 100%;
    justify-content: space-between;
  }

  .ttn-ap-btn {
    white-space: normal;
  }

  .ttn-ap-rating {
    border-left: none;
    padding-left: 0;
  }

  .ttn-ap-member-card,
  .ttn-ap-discount-card {
    width: 100%;
  }

  .ttn-ap-promo {
    flex-direction: column;
    align-items: stretch;
  }

  .ttn-ap-promo__copy {
    justify-content: center;
  }
}

/* ====================================================================== */
/* SITE STYLE ALIGNMENT — The Trucker's Network (thetruckersnetwork.net)   */
/* Matches the site's Elementor globals: Inter Tight, kit colours,         */
/* fs-* clamp sizes, the site's icon-button and spacing rhythm.            */
/* UI only — no markup or behaviour depends on anything below.             */
/* ====================================================================== */

.ttn-app-partner {
  --ttn-blue: #004ba2;        /* Accent / Blue Color */
  --ttn-blue-dark: #01428d;
  --ttn-red: #b5121b;         /* Red Color (links) */
  --ttn-black: #010101;       /* Primary */
  --ttn-text: #0d0d0d;        /* Text */
  --ttn-grey-bg: #f2f2f2;     /* BG Color */
  --ttn-tint: #e9f3ff;        /* light blue band */
  --ttn-line: rgba(13, 13, 13, 0.1);
  --ttn-radius: 16px;         /* cards */
  --ttn-radius-btn: 14px;     /* buttons */
  --ttn-section: clamp(40px, 5.55vw, 80px);   /* each side of a section */
  --ttn-head-gap: 20px;                        /* heading -> content */
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ttn-text);
}

/* ---------- Width: 1440px content grid, 20px gutters, full-width on smaller screens ---------- */
.ttn-app-partner .ttn-ap-partner--single > .ttn-ap-body,
.ttn-app-partner .ttn-ap-partner--parent > .ttn-ap-body {
  width: min(calc(100vw - 40px), 1440px);
  max-width: none;
  margin-left: calc(50% - min(calc(50vw - 20px), 720px));
  margin-right: 0;
}

.ttn-app-partner .ttn-ap-body > * {
  padding-block: var(--ttn-section);
}

/* ---------- Typography (site fs-* clamp classes) ---------- */
.ttn-app-partner .ttn-ap-hero__title,
.ttn-app-partner .ttn-ap-cta__title {
  font-size: clamp(40px, 1.5rem + 2vw, 64px);           /* fs-64 */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
}
.ttn-app-partner .ttn-ap-hero__title {
  color: var(--ttn-black);
  font-size: clamp(28px, 1.35rem + 1.4vw, 42px);
}

.ttn-app-partner .ttn-ap-h3,
.ttn-app-partner .ttn-ap-join__title {
  font-size: clamp(32px, 1.25rem + 1.7vw, 48px);        /* fs-48 */
  font-weight: 500;
  line-height: 1.1;
  color: var(--ttn-black);
}

.ttn-app-partner .ttn-ap-h4,
.ttn-app-partner .ttn-ap-member-card__title,
.ttn-app-partner .ttn-ap-children__title,
.ttn-app-partner .ttn-ap-prose h1,
.ttn-app-partner .ttn-ap-prose h2,
.ttn-app-partner .ttn-ap-prose h3,
.ttn-app-partner .ttn-ap-prose h4,
.ttn-app-partner .ttn-ap-prose h5,
.ttn-app-partner .ttn-ap-prose h6 {
  font-weight: 500;
  line-height: 1.2;
  color: var(--ttn-black);
}
.ttn-app-partner .ttn-ap-prose h1, .ttn-app-partner .ttn-ap-prose h2, .ttn-app-partner .ttn-ap-prose h3,
.ttn-app-partner .ttn-ap-prose h4, .ttn-app-partner .ttn-ap-prose h5, .ttn-app-partner .ttn-ap-prose h6 {
  margin: 0 0 12px !important;
}

.ttn-app-partner .ttn-ap-text,
.ttn-app-partner .ttn-ap-lead,
.ttn-app-partner .ttn-ap-cta__body {
  font-size: clamp(18px, 0.95rem + 0.3vw, 20px);        /* fs-20 */
  font-weight: 500;
  line-height: 1.5;
}
/* .ttn-ap-prose: no font size of its own — it uses the site's text size */
.ttn-app-partner .ttn-ap-prose {
  font-weight: 500;
  line-height: 1.5;
}
.ttn-app-partner .ttn-ap-text,
.ttn-app-partner .ttn-ap-prose,
.ttn-app-partner .ttn-ap-lead { color: var(--ttn-text); }

/* Partner descriptions come from the app's rich text: its own font sizes are kept (no font size set here). */
.ttn-app-partner .ttn-ap-prose :is(p, div, span, li, a, strong, b, em, font)[style] {
  font-family: inherit !important;
}
/* Another plugin (UsersWP) sets every ul/li on the site to 13px; lists here just follow the text around them.
   Not !important, so sizes set in the rich text (inline) still win. */
.ttn-app-partner .ttn-ap-prose :is(ul, ol, li, dl, dt, dd) { font-size: inherit; }
.ttn-app-partner .ttn-ap-prose p { margin: 0 0 1em; }
.ttn-app-partner .ttn-ap-prose p:last-child { margin-bottom: 0; }
/* Plain-text descriptions (no HTML tags): keep the line breaks typed in the app. */
.ttn-app-partner .ttn-ap-prose:not(:has(*)) { white-space: pre-line; }
.ttn-app-partner .ttn-ap-prose a {
  color: var(--ttn-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ttn-app-partner .ttn-ap-text-sm,
.ttn-app-partner .ttn-ap-meta,
.ttn-app-partner .ttn-ap-checklist__item {
  font-size: clamp(16px, 0.85rem + 0.25vw, 18px);       /* fs-18 */
  font-weight: 500;
  line-height: 1.5;
}
.ttn-app-partner .ttn-ap-text-sm { color: var(--ttn-text); opacity: 0.8; }

.ttn-app-partner .ttn-ap-step-num {
  font-size: clamp(22px, 1.05rem + 1.15vw, 32px);       /* fs-32 */
  color: var(--ttn-blue);
}

/* ---------- Section heads ---------- */
.ttn-app-partner .ttn-ap-section__head {
  gap: var(--ttn-head-gap);
  margin-bottom: clamp(32px, 3vw, 48px);
  max-width: 960px;
}
.ttn-app-partner .ttn-ap-services .ttn-ap-h3 { margin-bottom: clamp(32px, 3vw, 48px); }

/* ---------- Buttons: same as the site's icon buttons ---------- */
.ttn-app-partner .ttn-ap-btn,
.ttn-app-partner a.ttn-ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;               /* + 4px icon margin = the site's 20px text-to-icon space */
  min-height: 50px;
  padding: 0 0 0 16px;
  border: 1px solid transparent;
  border-radius: var(--ttn-radius-btn);
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.ttn-app-partner .ttn-ap-btn:hover,
.ttn-app-partner .ttn-ap-btn:focus-visible { opacity: 1; }
.ttn-app-partner .ttn-ap-btn:focus-visible { outline: 2px solid var(--ttn-blue); outline-offset: 3px; }

.ttn-app-partner .ttn-ap-btn__icon {
  width: 40px;
  height: 40px;
  margin: 4px;
  padding: 0;
  border-radius: 11px;
  transition: background-color 0.3s;
}
.ttn-app-partner .ttn-ap-btn__icon img {
  width: 12px;
  height: 12px;
  transition: filter 0.3s;
}

/* Primary — blue; hover: outline blue, icon turns blue with a white arrow */
.ttn-app-partner a.ttn-ap-btn--primary { background: var(--ttn-blue); border-color: var(--ttn-blue); color: #fff; }
.ttn-app-partner a.ttn-ap-btn--primary .ttn-ap-btn__icon { background: #fff; }
.ttn-app-partner a.ttn-ap-btn--primary:hover,
.ttn-app-partner a.ttn-ap-btn--primary:focus-visible { background: transparent; border-color: var(--ttn-blue); color: var(--ttn-blue); }
.ttn-app-partner a.ttn-ap-btn--primary:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--primary:focus-visible .ttn-ap-btn__icon { background: var(--ttn-blue); }
.ttn-app-partner a.ttn-ap-btn--primary:hover .ttn-ap-btn__icon img,
.ttn-app-partner a.ttn-ap-btn--primary:focus-visible .ttn-ap-btn__icon img { filter: brightness(0) invert(1); }

/* Secondary — white with dark outline; hover: transparent, icon turns white with a dark arrow */
.ttn-app-partner a.ttn-ap-btn--secondary { background: #fff; border-color: var(--ttn-text); color: var(--ttn-text); box-shadow: none; }
.ttn-app-partner a.ttn-ap-btn--secondary .ttn-ap-btn__icon { background: var(--ttn-blue); }
.ttn-app-partner a.ttn-ap-btn--secondary:hover,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible { background: transparent; border-color: var(--ttn-text); color: var(--ttn-text); }
.ttn-app-partner a.ttn-ap-btn--secondary:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible .ttn-ap-btn__icon { background: #fff; box-shadow: inset 0 0 0 1px var(--ttn-line); }
.ttn-app-partner a.ttn-ap-btn--secondary:hover .ttn-ap-btn__icon img,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible .ttn-ap-btn__icon img { filter: brightness(0); }

/* Light — white on the dark CTA banner; hover: white outline */
.ttn-app-partner a.ttn-ap-btn--light { background: #fff; border-color: #fff; color: var(--ttn-text); }
.ttn-app-partner a.ttn-ap-btn--light .ttn-ap-btn__icon { background: var(--ttn-blue); }
.ttn-app-partner a.ttn-ap-btn--light:hover,
.ttn-app-partner a.ttn-ap-btn--light:focus-visible { background: transparent; border-color: #fff; color: #fff; }
.ttn-app-partner a.ttn-ap-btn--light:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--light:focus-visible .ttn-ap-btn__icon { background: #fff; }
.ttn-app-partner a.ttn-ap-btn--light:hover .ttn-ap-btn__icon img,
.ttn-app-partner a.ttn-ap-btn--light:focus-visible .ttn-ap-btn__icon img { filter: brightness(0); }

/* Arrow glyph: the site's Font Awesome 5 "arrow-right" (solid), 11x12px, coloured per state like the site buttons */
.ttn-app-partner .ttn-ap-btn__icon { --ttn-glyph: #0d0d0d; }
.ttn-app-partner .ttn-ap-btn__icon img { display: none; }
.ttn-app-partner .ttn-ap-btn__icon::after {
  content: "";
  width: 11px;
  height: 12px;
  background-color: var(--ttn-glyph);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%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 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.3s;
}
/* primary: white box + dark arrow -> hover: blue box + white arrow */
.ttn-app-partner a.ttn-ap-btn--primary:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--primary:focus-visible .ttn-ap-btn__icon { --ttn-glyph: #fff; }
/* secondary / light: blue box + white arrow -> hover: white box + dark arrow */
.ttn-app-partner a.ttn-ap-btn--secondary .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--light .ttn-ap-btn__icon { --ttn-glyph: #fff; }
.ttn-app-partner a.ttn-ap-btn--secondary:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--light:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--light:focus-visible .ttn-ap-btn__icon { --ttn-glyph: #0d0d0d; }
/* site buttons have no extra ring on the white icon box */
.ttn-app-partner a.ttn-ap-btn--secondary:hover .ttn-ap-btn__icon,
.ttn-app-partner a.ttn-ap-btn--secondary:focus-visible .ttn-ap-btn__icon { box-shadow: none; }

/* Join card button — same shape as the site buttons (it has no icon) */
.ttn-app-partner a.ttn-ap-join-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 32px;
  border: 1px solid var(--ttn-blue);
  border-radius: var(--ttn-radius-btn);
  background: var(--ttn-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s, color 0.3s;
}
.ttn-app-partner a.ttn-ap-join-card__btn:hover,
.ttn-app-partner a.ttn-ap-join-card__btn:focus-visible { background: transparent; color: var(--ttn-blue); }

/* Links */
.ttn-app-partner .ttn-ap-join__login a { color: var(--ttn-red); font-weight: 600; }
.ttn-app-partner .ttn-ap-join__login a:hover { text-decoration: underline; }
.ttn-app-partner .ttn-ap-parent-link { color: var(--ttn-blue); font-size: 16px; font-weight: 600; }

/* ---------- Hero ---------- */
/* Banner image renders at full width in normal flow; the white info card
   overlaps its bottom edge and continues onto the page background. */
.ttn-app-partner .ttn-ap-hero {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible; /* let the card's bottom box-shadow render uncut */
  background: transparent;
  --ttn-hero-banner-h: clamp(300px, 40vw, 560px);
}
/* No banner: a tint placeholder of identical height keeps the info card in
   exactly the same position instead of jumping to the top. */
.ttn-app-partner .ttn-ap-hero:not(.ttn-ap-hero--has-banner)::before {
  content: "";
  display: block;
  height: var(--ttn-hero-banner-h);
  background: var(--ttn-tint);
}
.ttn-app-partner .ttn-ap-hero__bg {
  position: relative;
  inset: auto;
  height: var(--ttn-hero-banner-h);
}
.ttn-app-partner .ttn-ap-hero__bg img { object-position: center center; }
.ttn-app-partner .ttn-ap-hero__overlay { display: none; }
.ttn-app-partner .ttn-ap-hero__panel {
  width: min(calc(100% - 40px), 1440px);
  margin: clamp(-120px, -8vw, -48px) auto 0;
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 12px 40px rgba(13, 13, 13, 0.1);
  gap: clamp(24px, 4vw, 80px);
  padding: clamp(20px, 2.2vw, 40px);
  border-radius: 16px;
}
.ttn-app-partner .ttn-ap-meta { color: var(--ttn-text); gap: 8px; }
.ttn-app-partner .ttn-ap-rating {
  border-left: 1px solid rgba(13, 13, 13, 0.25);
  padding: 0 0 0 12px;
  font-weight: 700;
}
.ttn-app-partner .ttn-ap-rating span { color: #ffa600; }
.ttn-app-partner .ttn-ap-hero__actions { gap: 8px; }
.ttn-app-partner .ttn-ap-hero__lead { color: var(--ttn-text); }
.ttn-app-partner .ttn-ap-hero__web { color: var(--ttn-blue); text-decoration: underline; }
.ttn-app-partner .ttn-ap-hero__web:hover { color: var(--ttn-blue-dark); }
.ttn-app-partner .ttn-ap-chip {
  background: #f7f8fa;
  color: #202a50;
  font-size: 16px;
  font-weight: 600;
}
/* "View Details" removed from single/parent banners (Navigate opens maps and is kept) */
.ttn-app-partner .ttn-ap-partner--single .ttn-ap-hero__actions > a.ttn-ap-btn:not([target="_blank"]),
.ttn-app-partner .ttn-ap-partner--parent .ttn-ap-hero__actions > a.ttn-ap-btn:not([target="_blank"]) {
  display: none !important;
}

/* ---------- Discount + promo card ---------- */
.ttn-app-partner .ttn-ap-discount__grid { gap: clamp(32px, 4vw, 64px); align-items: center; }
.ttn-app-partner .ttn-ap-discount__info { gap: 24px; }
.ttn-app-partner .ttn-ap-discount-card {
  gap: 20px;
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--ttn-radius);
  background: var(--ttn-tint);
}
.ttn-app-partner .ttn-ap-discount-card__logo { width: clamp(160px, 40%, 280px); }
.ttn-app-partner .ttn-ap-discount-card__body { gap: 8px; }
.ttn-app-partner .ttn-ap-promo {
  gap: 16px;
  padding: 16px;
  border: 1px dashed var(--ttn-blue);
  border-radius: var(--ttn-radius-btn);
  background: #fff;
}
.ttn-app-partner .ttn-ap-promo__label { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ttn-text); margin-bottom: 8px; }
.ttn-app-partner .ttn-ap-promo__code {
  font-size: clamp(20px, 1rem + 0.55vw, 24px);          /* fs-24 */
  font-weight: 600;
  line-height: 1.2;
  color: var(--ttn-blue);
}
.ttn-app-partner button.ttn-ap-promo__copy {
  min-width: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 10px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--ttn-blue);
  transition: background-color 0.3s;
}

/* ---------- Membership band + card ---------- */
.ttn-app-partner .ttn-ap-membership {
  gap: clamp(32px, 5vw, 80px);
  background: var(--ttn-tint);
  box-shadow: 0 0 0 100vmax var(--ttn-tint);
}
.ttn-app-partner .ttn-ap-membership__content { gap: var(--ttn-head-gap); }
.ttn-app-partner .ttn-ap-membership__content .ttn-ap-btn,
.ttn-app-partner .ttn-ap-membership__content .ttn-ap-links { margin-top: 12px; }
.ttn-app-partner .ttn-ap-member-card {
  border-radius: var(--ttn-radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--ttn-line), 0 12px 32px -18px rgba(1, 1, 1, 0.25);
  padding: clamp(20px, 1.8vw, 28px);
}
.ttn-app-partner .ttn-ap-member-card__rows { font-size: clamp(14px, 0.8rem + 0.15vw, 16px); gap: 12px; }
.ttn-app-partner .ttn-ap-member-card__row-value { color: var(--ttn-text); opacity: 0.8; }

/* ---------- Feature rows ---------- */
.ttn-app-partner .ttn-ap-features { gap: clamp(60px, 7vw, 120px); }
.ttn-app-partner .ttn-ap-feature { gap: clamp(32px, 5vw, 96px); border-radius: var(--ttn-radius); }
.ttn-app-partner .ttn-ap-feature[style] { padding-block: var(--ttn-section); }
.ttn-app-partner .ttn-ap-feature__content { gap: var(--ttn-head-gap); }
.ttn-app-partner .ttn-ap-feature__content .ttn-ap-btn,
.ttn-app-partner .ttn-ap-feature__content .ttn-ap-links { margin-top: 12px; }
.ttn-app-partner .ttn-ap-feature__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  background: none;
}
/* Show the whole image (no cropping) and never stretch it past its real size, so it stays sharp. */
.ttn-app-partner .ttn-ap-feature__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: scale-down;
  border-radius: var(--ttn-radius);
}

/* ---------- Benefit steps ---------- */
.ttn-app-partner .ttn-ap-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ttn-app-partner .ttn-ap-step-card {
  gap: 16px;
  min-height: 0;
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--ttn-radius);
  background: var(--ttn-tint);
}
.ttn-app-partner .ttn-ap-step-card__img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; }
.ttn-app-partner .ttn-ap-step-card__body { gap: 12px; }
/* Desktop: as many columns as cards (2, 3 or 4) so no card sits alone on a row */
@media (min-width: 1025px) {
  .ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Gallery ---------- */
.ttn-app-partner .ttn-ap-gallery__rows,
.ttn-app-partner .ttn-ap-gallery__row { gap: 20px; }
.ttn-app-partner .ttn-ap-gallery__row { align-items: start; }
.ttn-app-partner .ttn-ap-gallery__item { border-radius: var(--ttn-radius); aspect-ratio: auto; background: none; }
.ttn-app-partner .ttn-ap-gallery__item img { height: auto; object-fit: contain; }

/* ---------- Join gate card ---------- */
.ttn-app-partner .ttn-ap-join-card { border-radius: var(--ttn-radius); box-shadow: 0 0 0 1px var(--ttn-line), 0 16px 40px -20px rgba(1, 1, 1, 0.3); }
.ttn-app-partner .ttn-ap-join-card__head { background: var(--ttn-blue); }
.ttn-app-partner .ttn-ap-join-card__ribbon { background: var(--ttn-red); }
.ttn-app-partner .ttn-ap-join-card__period { color: var(--ttn-red); }
.ttn-app-partner .ttn-ap-join-card__list li { font-size: 16px; }

/* ---------- Bottom CTA banner ---------- */
.ttn-app-partner .ttn-ap-cta__overlay { background: linear-gradient(to top, rgba(0, 75, 162, 0) 40%, rgba(0, 75, 162, 0.85) 100%); }
.ttn-app-partner .ttn-ap-cta__content { gap: var(--ttn-head-gap); }

/* ---------- Children group ---------- */
.ttn-app-partner .ttn-ap-children { width: min(calc(100vw - 40px), 1440px); }
.ttn-app-partner .ttn-ap-children .ttn-ap-partner { border-radius: var(--ttn-radius); border-color: var(--ttn-line); }

/* ---------- Tablet (site breakpoint 1024px) ---------- */
@media (max-width: 1024px) {
  .ttn-app-partner .ttn-ap-discount__grid,
  .ttn-app-partner .ttn-ap-membership,
  .ttn-app-partner .ttn-ap-feature,
  .ttn-app-partner .ttn-ap-feature--duo { grid-template-columns: minmax(0, 1fr); }
  .ttn-app-partner .ttn-ap-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttn-app-partner .ttn-ap-membership { justify-items: stretch; }
  .ttn-app-partner .ttn-ap-member-card { width: 100%; max-width: 445px; justify-self: center; }
  /* One column: keep a steady text → image rhythm so two images (or two text blocks) never stack together */
  .ttn-app-partner .ttn-ap-feature__content { order: 0; }
  .ttn-app-partner .ttn-ap-feature--media-left .ttn-ap-feature__media,
  .ttn-app-partner .ttn-ap-feature__media { order: 1; }
  .ttn-app-partner .ttn-ap-hero {
    --ttn-hero-banner-h: clamp(240px, 44vw, 420px);
  }
  .ttn-app-partner .ttn-ap-hero__panel {
    grid-template-columns: 1fr;
    gap: 28px;
    width: calc(100% - 32px);
    margin-top: -56px;
  }
  .ttn-app-partner .ttn-ap-hero__aside {
    gap: 24px;
  }
}

/* ---------- Mobile (site breakpoint 767px) ---------- */
@media (max-width: 767px) {
  .ttn-app-partner .ttn-ap-steps__grid { grid-template-columns: minmax(0, 1fr); }
  .ttn-app-partner .ttn-ap-hero {
    --ttn-hero-banner-h: clamp(200px, 55vw, 320px);
  }
  .ttn-app-partner .ttn-ap-hero__panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px;
    border-radius: 16px;
    width: calc(100% - 24px);
    margin-top: -32px;
  }
  .ttn-app-partner .ttn-ap-hero__actions,
  .ttn-app-partner .ttn-ap-links { flex-direction: column; align-items: stretch; width: 100%; }
  .ttn-app-partner .ttn-ap-hero__actions .ttn-ap-btn,
  .ttn-app-partner .ttn-ap-links .ttn-ap-btn { width: 100%; white-space: normal; }
  .ttn-app-partner .ttn-ap-rating { border-left: 0; padding-left: 0; }
  .ttn-app-partner .ttn-ap-hero__webs { flex-direction: column; gap: 12px; }
  .ttn-app-partner .ttn-ap-promo { flex-direction: column; align-items: stretch; }
  .ttn-app-partner button.ttn-ap-promo__copy { width: 100%; }
  .ttn-app-partner .ttn-ap-member-card { max-width: none; }
}

/* ================================================================== */
/* Partner listing — [ttn-app-partners]                                */
/* One block, matched to the site's discount cards (.promo-card on    */
/* /discounts/): Inter Tight, kit blue/red, site radii. UI only.      */
/* ================================================================== */

.ttn-app-partner--list {
	--ttn-l-blue: #004ba2;
	--ttn-l-blue-hover: #01428d;
	--ttn-l-red: #b5121b;
	--ttn-l-text: #0d0d0d;
	--ttn-l-muted: #64748b;
	--ttn-l-border: #e2e8f0;
	--ttn-l-soft: #f8fafc;
	--ttn-l-badge: #eff6ff;
	--ttn-l-success: #16a34a;
	--ttn-l-gap: 20px;
	font-family: "Inter Tight", sans-serif;
	line-height: 1.5;
	width: 100%;
	min-width: 0;
}

/* Elementor shortcode widget: let the listing use the full row */
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .ttn-app-partner--list),
.elementor-widget:has(> .elementor-shortcode > .ttn-app-partner--list),
.elementor-widget:has(> .elementor-widget-container > .ttn-app-partner--list) {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

/* ---------- Filters (scroll sideways on small screens) ---------- */
.ttn-app-partner--list .ttn-ap-filters {
	margin: 0 0 24px;
	padding-bottom: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.ttn-app-partner--list .ttn-ap-filters__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	width: max-content;
	min-width: 100%;
}
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 9px 18px;
	border: 1px solid var(--ttn-l-border);
	border-radius: 8px;
	background: #fff;
	color: var(--ttn-l-text);
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter:hover,
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter:focus {
	background: #fff;
	border-color: var(--ttn-l-blue);
	color: var(--ttn-l-blue);
}
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter:focus-visible {
	outline: 2px solid var(--ttn-l-blue);
	outline-offset: 2px;
}
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter.is-active,
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter.is-active:hover,
.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter.is-active:focus {
	background: var(--ttn-l-blue);
	border-color: var(--ttn-l-blue);
	color: #fff;
}

/* ---------- Grid: never more than 4 cards per row ----------
   Each card is at least 270px wide (or the full row on a phone) and the
   column count follows the space: 4 → 3 → 2 → 1. The shortcode's
   columns="1|2|3" setting lowers the maximum. */
.ttn-app-partner--list .ttn-ap-cards {
	--ttn-l-cols: 4;
	--ttn-l-min: 270px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--ttn-l-min), calc((100% - (var(--ttn-l-cols) - 1) * var(--ttn-l-gap)) / var(--ttn-l-cols)))), 1fr));
	gap: var(--ttn-l-gap);
	margin: 0;
}
.ttn-app-partner--list .ttn-ap-cards--cols-3 { --ttn-l-cols: 3; }
.ttn-app-partner--list .ttn-ap-cards--cols-2 { --ttn-l-cols: 2; }
.ttn-app-partner--list .ttn-ap-cards--cols-1 { --ttn-l-cols: 1; }
.ttn-app-partner--list .ttn-ap-cards .ttn-ap-card[hidden] {
	display: none;
}

/* ---------- Card — same as .promo-card ---------- */
.ttn-app-partner--list .ttn-ap-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 280px;
	box-sizing: border-box;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ttn-l-border);
	border-radius: 12px;
	box-shadow: none;
	color: var(--ttn-l-text);
	font-family: "Inter Tight", sans-serif;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ttn-app-partner--list .ttn-ap-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.ttn-app-partner--list .ttn-ap-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

/* Logo: one 180×72 area (2.5:1), image scaled to fit, left-aligned, no frame. */
.ttn-app-partner--list .ttn-ap-card__logo {
	display: block;
	flex: 0 0 auto;
	width: 180px;
	max-width: none;
	height: 72px;
	box-sizing: border-box;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	object-position: left center;
	transform-origin: 0 0;
}
.ttn-app-partner--list .ttn-ap-card__logo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	border-radius: 8px;
	background: var(--ttn-l-badge);
	color: var(--ttn-l-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

/* Logos uploaded with a lot of empty space around them: zoom to the logo
   itself and clip the empty space, so it fills the 2.5:1 area like the rest.
   Values measured from each image file. A logo re-uploaded already trimmed
   doesn't need a line here (a changed file name simply stops matching). */
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547096"] {
	transform: translate(-1.74%, -28.4%) scale(1.568);
	clip-path: inset(18.11% 35.11% 18.11% 1.11%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547743"] {
	transform: translate(-4.19%, -17.66%) scale(1.353);
	clip-path: inset(13.05% 22.99% 13.04% 3.10%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547218"] {
	transform: translate(-2.23%, -79.7%) scale(2.599);
	clip-path: inset(30.67% 60.67% 30.86% 0.86%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547240"] {
	transform: translate(-3.67%, -64.73%) scale(2.473);
	clip-path: inset(26.17% 58.08% 33.39% 1.48%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547358"] {
	transform: translate(-0.63%, -19.71%) scale(1.426);
	clip-path: inset(13.82% 29.43% 16.05% 0.44%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547409"] {
	transform: translate(-4.74%, -42.15%) scale(1.642);
	clip-path: inset(25.67% 36.21% 13.43% 2.89%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547656"] {
	transform: translate(-1.26%, -15.95%) scale(1.329);
	clip-path: inset(12.00% 23.81% 12.75% 0.95%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1793115458_ygoX4sjN"] {
	transform: translate(0%, -63.28%) scale(2.5);
	clip-path: inset(25.31% 60.00% 34.69% 0.00%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547052"] {
	transform: translate(-1.37%, -28.34%) scale(1.541);
	clip-path: inset(18.39% 34.22% 16.72% 0.89%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547498"] {
	transform: translate(-0.41%, -38.78%) scale(1.741);
	clip-path: inset(22.27% 42.33% 20.29% 0.24%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547462"] {
	transform: translate(-25.29%, -64.37%) scale(2.299);
	clip-path: inset(28.00% 45.50% 28.50% 11.00%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547278"] {
	transform: translate(-0.39%, -75.74%) scale(2.52);
	clip-path: inset(30.06% 60.16% 30.26% 0.15%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547175"] {
	transform: translate(-0.2%, -75%) scale(2.53);
	clip-path: inset(29.64% 60.40% 30.83% 0.08%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547156"] {
	transform: translate(-9.76%, -25.88%) scale(1.506);
	clip-path: inset(17.18% 27.12% 16.41% 6.48%);
}
.ttn-app-partner--list img.ttn-ap-card__logo[src*="1791547481"] {
	transform: translate(0%, -74.02%) scale(2.505);
	clip-path: inset(29.55% 60.08% 30.53% 0.00%);
}

/* "Exclusive" — same as .expiry */
.ttn-app-partner--list .ttn-ap-card__tag {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ttn-l-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: normal;
	text-transform: none;
}

/* Partner name — same as .category-badge */
.ttn-app-partner--list .ttn-ap-card__name {
	display: inline-block;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--ttn-l-badge);
	color: var(--ttn-l-blue);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: normal;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Offer — same as .discount-title */
.ttn-app-partner--list .ttn-ap-card .ttn-ap-card__offer {
	margin: 8px 0 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ttn-l-text);
	font-family: "Inter Tight", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

/* Description — same as .card-desc */
.ttn-app-partner--list .ttn-ap-card__desc {
	margin: 0 0 20px;
	overflow-wrap: anywhere;
}
.ttn-app-partner--list .ttn-ap-card__desc p {
	margin: 0;
	color: var(--ttn-l-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

/* Learn More & View Offer — same as .learn-more-btn, pinned to the bottom */
.ttn-app-partner--list .ttn-ap-card__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: auto 0 12px;
	padding: 8px 16px;
	background: transparent;
	color: var(--ttn-l-red);
	border: 1px solid var(--ttn-l-blue);
	border-radius: 8px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
}
.ttn-app-partner--list .ttn-ap-card__cta:hover,
.ttn-app-partner--list .ttn-ap-card__cta:focus-visible {
	background: var(--ttn-l-blue);
	border-color: var(--ttn-l-blue);
	color: #fff !important;
	text-decoration: none;
}
.ttn-app-partner--list .ttn-ap-card__cta:focus-visible {
	outline: 2px solid var(--ttn-l-blue);
	outline-offset: 2px;
}
.ttn-app-partner--list .ttn-ap-card__cta:last-child {
	margin-bottom: 0;
}

/* ---------- Promo row — same as .code-box ---------- */
.ttn-app-partner--list .ttn-ap-card__promo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	min-height: 49px;
	box-sizing: border-box;
	margin: 0;
	padding: 6.4px 8px 6.4px 13.6px;
	background: var(--ttn-l-soft);
	border: 1px dashed var(--ttn-l-blue);
	border-radius: 8px;
}
/* Code text */
.ttn-app-partner--list .ttn-ap-card__code {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ttn-l-blue);
	font-family: monospace;
	font-size: 15.2px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	overflow-wrap: anywhere;
}
/* Text links in the row (log in / join / website / phone): never broken mid-word */
.ttn-app-partner--list a.ttn-ap-card__code--link {
	flex: 0 0 auto;
	white-space: nowrap;
	overflow-wrap: normal;
	font-family: "Inter Tight", sans-serif;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--ttn-l-blue);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ttn-app-partner--list a.ttn-ap-card__code--link:hover {
	color: var(--ttn-l-red);
	text-decoration: underline;
}
/* Note badge (CALL / VISIT SITE.COM / MEMBERS ONLY / CARD) */
.ttn-app-partner--list .ttn-ap-card__promo-note {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--ttn-l-badge);
	color: var(--ttn-l-blue);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: anywhere;
}
/* Rows with a link + note: when both don't fit on one line the note drops
   below the link instead of squeezing it. */
.ttn-app-partner--list .ttn-ap-card__promo:has(> .ttn-ap-card__promo-note) {
	flex-wrap: wrap;
}
/* Website rows: show the address in normal case so it stays readable */
.ttn-app-partner--list .ttn-ap-card__promo:has(> a[target="_blank"]) .ttn-ap-card__promo-note {
	text-transform: none;
}

/* Copy — same as .copy-btn */
.ttn-app-partner--list .ttn-ap-card__copy,
.ttn-app-partner--list .ttn-ap-card__copy:active,
.ttn-app-partner--list .ttn-ap-card__copy:focus {
	flex: 0 0 auto;
	padding: 6.4px 13.6px;
	border: 1px solid var(--ttn-l-blue);
	border-radius: 14px;
	background: var(--ttn-l-blue);
	color: #fff;
	font-family: "Inter Tight", sans-serif;
	font-size: 12.8px;
	font-weight: 600;
	line-height: 19.2px;
	box-shadow: none;
	transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}
.ttn-app-partner--list .ttn-ap-card__copy:hover {
	background: var(--ttn-l-blue-hover);
	border-color: var(--ttn-l-blue-hover);
	color: #fff;
}
.ttn-app-partner--list .ttn-ap-card__copy:focus-visible {
	outline: 2px solid var(--ttn-l-blue);
	outline-offset: 2px;
}
.ttn-app-partner--list .ttn-ap-card__copy.is-copied,
.ttn-app-partner--list .ttn-ap-card__copy.is-copied:hover {
	background: var(--ttn-l-success);
	border-color: var(--ttn-l-success);
}

/* ---------- Group card (parent + children, spans the whole row) ---------- */
.ttn-app-partner--list .ttn-ap-card--group {
	grid-column: 1 / -1;
	padding: 0;
}
.ttn-app-partner--list .ttn-ap-card--group:hover {
	transform: none;
}
.ttn-app-partner--list .ttn-ap-card__members {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--ttn-l-gap);
	padding: 20px;
}
.ttn-app-partner--list .ttn-ap-card__member {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---------- Empty state ---------- */
.ttn-app-partner--list .ttn-ap-list__empty {
	margin: 24px 0 0;
	color: var(--ttn-l-muted);
	font-size: 16px;
	text-align: center;
}
.ttn-app-partner--list .ttn-ap-list__empty[hidden] {
	display: none;
}

/* ---------- Mobile (site breakpoint 767px) ---------- */
@media screen and (max-width: 767px) {
	.ttn-app-partner--list .ttn-ap-filters {
		margin-bottom: 20px;
	}
	.ttn-app-partner--list .ttn-ap-filters .ttn-ap-filter {
		min-height: 36px;
		padding: 8px 14px;
		font-size: 13px;
	}
	.ttn-app-partner--list .ttn-ap-card {
		min-height: 0;
	}
	.ttn-app-partner--list .ttn-ap-card__logo {
		width: 160px;
		height: 64px;
	}
	.ttn-app-partner--list a.ttn-ap-card__code--link {
		font-size: 14px !important;
	}
}
@media screen and (max-width: 360px) {
	.ttn-app-partner--list .ttn-ap-card,
	.ttn-app-partner--list .ttn-ap-card__members {
		padding: 16px;
	}
	.ttn-app-partner--list .ttn-ap-card--group {
		padding: 0;
	}
}

/* ====================================================================== */
/* PAGE LAYOUT — matched to the Figma page design ([ttn-app-partner])      */
/* Every rule targets one section type, so a page that lacks a section     */
/* is unaffected. UI only.                                                 */
/* ====================================================================== */

.ttn-app-partner {
  --ttn-gutter: clamp(20px, calc(20vw - 140px), 240px);  /* 20px phones -> ~148px at 1440 -> 240px at 1920 */
  --ttn-section: clamp(40px, 4.86vw, 70px);              /* top + bottom space of every section: 70px desktop -> ~50px tablet -> 40px phone */
  --ttn-band: var(--ttn-section);                        /* tinted bands use the same 70px top/bottom */
  --ttn-head-gap: clamp(12px, 1.25vw, 24px);             /* heading -> lead */
  --ttn-head-space: clamp(28px, 3.34vw, 64px);           /* section head -> content */
  --ttn-col-gap: clamp(32px, 4.17vw, 80px);              /* two-column gap */
  --ttn-stack: clamp(16px, 1.67vw, 32px);                /* gap inside a text column */
  --ttn-radius-lg: 24px;
  --ttn-radius-media: 20px;
}

/* ---------- Content width: max 1440px, generous side space like the design ---------- */
.ttn-app-partner .ttn-ap-partner--single > .ttn-ap-body,
.ttn-app-partner .ttn-ap-partner--parent > .ttn-ap-body {
  width: min(1440px, calc(100vw - 2 * var(--ttn-gutter)));
  margin-left: calc(50% - min(720px, 50vw - var(--ttn-gutter)));
}
.ttn-app-partner .ttn-ap-children { width: min(1440px, calc(100vw - 2 * var(--ttn-gutter))); }

/* ---------- Section rhythm ---------- */
.ttn-app-partner .ttn-ap-body > * { padding-block: var(--ttn-section); }
.ttn-app-partner .ttn-ap-body > :first-child { padding-top: var(--ttn-band); }
.ttn-app-partner .ttn-ap-body > :last-child { padding-bottom: var(--ttn-band); }

.ttn-app-partner .ttn-ap-section__head {
  gap: var(--ttn-head-gap);
  margin-bottom: var(--ttn-head-space);
  max-width: 900px;
}
.ttn-app-partner .ttn-ap-lead {
  max-width: 780px;
  font-size: clamp(16px, 0.85rem + 0.25vw, 18px);        /* fs-18 */
  line-height: 1.5;
}

/* ---------- Text sizes from the design ---------- */
.ttn-app-partner .ttn-ap-text {
  font-size: 16px;
  line-height: 1.5;
}
.ttn-app-partner .ttn-ap-prose { line-height: 1.5; }
.ttn-app-partner .ttn-ap-h4,
.ttn-app-partner .ttn-ap-prose h1,
.ttn-app-partner .ttn-ap-prose h2,
.ttn-app-partner .ttn-ap-prose h3,
.ttn-app-partner .ttn-ap-prose h4,
.ttn-app-partner .ttn-ap-prose h5,
.ttn-app-partner .ttn-ap-prose h6 {
  line-height: 1.25;
}
.ttn-app-partner .ttn-ap-prose :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 8px !important; }
.ttn-app-partner .ttn-ap-prose * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 24px !important; }
.ttn-app-partner .ttn-ap-prose p { margin: 0 0 12px; }
.ttn-app-partner .ttn-ap-prose p:last-child { margin-bottom: 0; }

/* Lists: tick marks instead of bullets (design) */
.ttn-app-partner .ttn-ap-prose ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ttn-app-partner .ttn-ap-prose ul:last-child { margin-bottom: 0; }
.ttn-app-partner .ttn-ap-prose ul > li {
  position: relative;
  margin: 0;
  padding-left: 24px;
}
.ttn-app-partner .ttn-ap-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ttn-app-partner .ttn-ap-prose ol { margin: 0 0 12px 1.25em; padding: 0; }
.ttn-app-partner .ttn-ap-prose a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ttn-app-partner .ttn-ap-prose a:hover { color: var(--ttn-blue); }

/* ---------- Hero: panel over banner ---------- */
.ttn-app-partner .ttn-ap-hero__title { line-height: 1.1; text-align: left; }
.ttn-app-partner .ttn-ap-hero__desc { line-height: 1.2; }

/* ---------- Discount: centred head, text left + promo card right ---------- */
.ttn-app-partner .ttn-ap-discount__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ttn-col-gap);
  align-items: center;   /* text and promo card vertically centred */
}
.ttn-app-partner .ttn-ap-discount__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }
.ttn-app-partner .ttn-ap-discount__info { gap: var(--ttn-stack); }
.ttn-app-partner .ttn-ap-discount-card {
  gap: 16px;
  padding: clamp(16px, 1.25vw, 24px);
  border-radius: var(--ttn-radius-lg);
  background: #f7f9ff;
  box-shadow: 0 0 0 1px rgba(0, 75, 162, 0.06);
}
.ttn-app-partner .ttn-ap-discount-card__bg img { opacity: 0.6; }
/* discount card logo: shown at its uploaded size (only scaled down to fit) */
.ttn-app-partner .ttn-ap-discount-card__body { gap: 6px; }
.ttn-app-partner .ttn-ap-discount-card .ttn-ap-text-sm { font-size: 14px; opacity: 0.8; }
.ttn-app-partner .ttn-ap-promo { padding: 12px 12px 12px 16px; border-radius: 16px; }
.ttn-app-partner .ttn-ap-promo__label { font-size: 12px; margin-bottom: 6px; text-transform: uppercase; }
.ttn-app-partner .ttn-ap-promo__code { font-size: clamp(18px, 0.9rem + 0.4vw, 22px); font-weight: 600; }

/* ---------- Membership: full-width tinted band ---------- */
.ttn-app-partner .ttn-ap-body > .ttn-ap-membership {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ttn-col-gap);
  align-items: center;
  padding-block: var(--ttn-band);
  margin-block: 0;
  background: var(--ttn-tint);
  box-shadow: 0 0 0 100vmax var(--ttn-tint);
  clip-path: inset(0 -100vmax);
}
.ttn-app-partner .ttn-ap-body > .ttn-ap-membership:first-child { margin-top: 0; }
.ttn-app-partner .ttn-ap-member-card { width: 100%; max-width: 445px; justify-self: start; }
.ttn-app-partner .ttn-ap-membership__content { gap: var(--ttn-stack); }
.ttn-app-partner .ttn-ap-membership__content .ttn-ap-btn,
.ttn-app-partner .ttn-ap-membership__content .ttn-ap-links { margin-top: 0; }

/* ---------- Benefit steps: tinted cards, number on top, text at the bottom ---------- */
.ttn-app-partner .ttn-ap-steps__grid { gap: clamp(16px, 1.25vw, 24px); }
.ttn-app-partner .ttn-ap-step-card {
  justify-content: space-between;
  gap: 30px;
  padding: clamp(20px, 1.25vw, 24px);
  border-radius: var(--ttn-radius-lg);
  background: var(--ttn-tint);
}
.ttn-app-partner .ttn-ap-step-num { margin: 0; line-height: 1; }
.ttn-app-partner .ttn-ap-step-card__body { gap: 8px; margin-top: auto; }
.ttn-app-partner .ttn-ap-step-card .ttn-ap-h4 { font-size: clamp(18px, 0.95rem + 0.3vw, 20px) !important; }
.ttn-app-partner .ttn-ap-step-card .ttn-ap-text { font-size: 15px; opacity: 0.85; }
.ttn-app-partner .ttn-ap-steps__cta { margin-top: var(--ttn-head-space); }

/* ---------- Content sections (feature rows) ---------- */
.ttn-app-partner .ttn-ap-features { gap: clamp(40px, 4.4vw, 84px); }
.ttn-app-partner .ttn-ap-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ttn-col-gap);
  align-items: center;
}
.ttn-app-partner .ttn-ap-feature__content { gap: var(--ttn-stack); }
.ttn-app-partner .ttn-ap-feature__content .ttn-ap-btn,
.ttn-app-partner .ttn-ap-feature__content .ttn-ap-links { margin-top: 0; }
.ttn-app-partner .ttn-ap-feature__content > img { width: clamp(120px, 12vw, 182px); }
.ttn-app-partner .ttn-ap-feature__media { width: 100%; border-radius: var(--ttn-radius-media); }
/* Full image, full column width, never cropped */
.ttn-app-partner .ttn-ap-feature__media img {
  width: 100%;
  height: auto;
  border-radius: var(--ttn-radius-media);
}

/* Tinted content section = full-width band, title centred above the two columns */
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--ttn-col-gap);
  row-gap: var(--ttn-stack);
  align-items: start;
  padding-block: var(--ttn-band);
  margin-block: clamp(0px, 2.5vw, 48px);
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--ttn-ap-tint, var(--ttn-tint));
  clip-path: inset(0 -100vmax);
}
.ttn-app-partner .ttn-ap-features > .ttn-ap-feature[style]:first-child { margin-top: 0; }
.ttn-app-partner .ttn-ap-features > .ttn-ap-feature[style]:last-child { margin-bottom: 0; }
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content { display: contents; }
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > * { grid-column: 1; justify-self: start; }
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > .ttn-ap-h3 {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  max-width: 900px;
  margin-bottom: calc(var(--ttn-head-space) - var(--ttn-stack));
  text-align: center;
}
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media { grid-column: 2; grid-row: 2 / -1; }
.ttn-app-partner .ttn-ap-feature--media-left[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > * { grid-column: 2; }
.ttn-app-partner .ttn-ap-feature--media-left[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > .ttn-ap-h3 { grid-column: 1 / -1; }
.ttn-app-partner .ttn-ap-feature--media-left[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media { grid-column: 1; }
/* no image: text spans the band */
.ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo):not(:has(> .ttn-ap-feature__media)) > .ttn-ap-feature__content > * { grid-column: 1 / -1; }

/* Two images side by side */
.ttn-app-partner .ttn-ap-feature--duo { align-items: start; }

/* ---------- Gallery: 3 across, then a wide image + two (design) ---------- */
.ttn-app-partner .ttn-ap-gallery__rows,
.ttn-app-partner .ttn-ap-gallery__row { gap: clamp(12px, 1.25vw, 24px); }
.ttn-app-partner .ttn-ap-gallery__row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.ttn-app-partner .ttn-ap-gallery__row--mixed { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.ttn-app-partner .ttn-ap-gallery__row--mixed:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
/* a single image keeps the normal gallery size (one third), centred — it doesn't stretch full width */
.ttn-app-partner .ttn-ap-gallery__row:has(> :only-child) { grid-template-columns: minmax(0, calc((100% - 2 * clamp(12px, 1.25vw, 24px)) / 3)); justify-content: center; }
.ttn-app-partner .ttn-ap-gallery__row:not(.ttn-ap-gallery__row--mixed):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ttn-app-partner .ttn-ap-gallery__item {
  height: clamp(180px, 17.2vw, 330px);
  aspect-ratio: auto;
  border-radius: var(--ttn-radius-media);
  overflow: hidden;
  background: none;
}
.ttn-app-partner .ttn-ap-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* whole image visible, never cropped */
  object-position: center;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .ttn-app-partner .ttn-ap-discount__grid,
  .ttn-app-partner .ttn-ap-body > .ttn-ap-membership,
  .ttn-app-partner .ttn-ap-feature,
  .ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) { grid-template-columns: minmax(0, 1fr); }
  .ttn-app-partner .ttn-ap-feature--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttn-app-partner .ttn-ap-member-card { justify-self: start; }
  .ttn-app-partner .ttn-ap-feature:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media { max-width: 760px; }

  /* tinted band stacks: title, text, button, then image */
  .ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) { grid-template-rows: none; }
  .ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > *,
  .ttn-app-partner .ttn-ap-feature--media-left[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > * { grid-column: 1; }
  .ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__content > .ttn-ap-h3 { grid-column: 1; }
  .ttn-app-partner .ttn-ap-feature[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media,
  .ttn-app-partner .ttn-ap-feature--media-left[style]:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media { grid-column: 1; grid-row: auto; order: 5; }

  .ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ttn-app-partner .ttn-ap-feature--duo { grid-template-columns: minmax(0, 1fr); }
  .ttn-app-partner .ttn-ap-steps__grid,
  .ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
  .ttn-app-partner .ttn-ap-step-card { min-height: 0; gap: 32px; }
  .ttn-app-partner .ttn-ap-member-card { max-width: none; }

  /* gallery: first image full width, the rest two per row */
  .ttn-app-partner .ttn-ap-gallery__row,
  .ttn-app-partner .ttn-ap-gallery__row--mixed,
  .ttn-app-partner .ttn-ap-gallery__row--mixed:has(> :nth-child(2):last-child),
  .ttn-app-partner .ttn-ap-gallery__row:not(.ttn-ap-gallery__row--mixed):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttn-app-partner .ttn-ap-gallery__item { height: clamp(120px, 34vw, 200px); }
  .ttn-app-partner .ttn-ap-gallery__row > :first-child:not(:nth-last-child(2)) { grid-column: 1 / -1; height: clamp(180px, 52vw, 300px); }
  .ttn-app-partner .ttn-ap-gallery__row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Benefit steps: 3 per row, an incomplete last row is centred ---------- */
.ttn-app-partner .ttn-ap-steps__grid,
.ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(2):last-child),
.ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(3):last-child),
.ttn-app-partner .ttn-ap-steps__grid:has(> :nth-child(4):last-child) {
  --ttn-steps-gap: clamp(16px, 1.25vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--ttn-steps-gap);
}
.ttn-app-partner .ttn-ap-steps__grid > .ttn-ap-step-card {
  flex: 0 0 calc((100% - 2 * var(--ttn-steps-gap)) / 3);
  max-width: calc((100% - 2 * var(--ttn-steps-gap)) / 3);
  min-width: 0;
}
@media (max-width: 767px) {
  .ttn-app-partner .ttn-ap-steps__grid > .ttn-ap-step-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ---------- Resource partners — [ttn-app-resource-partners] ---------- */
.ttn-app-partner--resources .ttn-ap-res__intro {
  margin: 0 auto 32px;
  max-width: 60ch;
  text-align: center;
}

.ttn-app-partner--resources .ttn-ap-res__grid {
  display: grid;
  gap: clamp(28px, 3.5vw, 56px) clamp(20px, 2.5vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ttn-app-partner--resources .ttn-ap-res__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.ttn-app-partner--resources .ttn-ap-res__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ttn-app-partner--resources .ttn-ap-res__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ttn-app-partner--resources .ttn-ap-res {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ttn-app-partner--resources .ttn-ap-res__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(120px, 14vw, 200px);
  margin-bottom: 20px;
}
.ttn-app-partner--resources .ttn-ap-res__logo img {
  max-width: min(260px, 100%);
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ttn-app-partner--resources .ttn-ap-res__logo-img--placeholder {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ttn-app-partner--resources .ttn-ap-res__desc {
  margin: 0 0 24px;
  max-width: 46ch;
}

/* keep every card's CTA bottom-aligned when descriptions differ in length */
.ttn-app-partner--resources .ttn-ap-res .ttn-ap-btn {
  margin-top: auto;
}

.ttn-app-partner--resources .ttn-ap-res__empty {
  text-align: center;
}

@media (max-width: 767px) {
  .ttn-app-partner--resources .ttn-ap-res__grid,
  .ttn-app-partner--resources .ttn-ap-res__grid--cols-3,
  .ttn-app-partner--resources .ttn-ap-res__grid--cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ====================================================================== */
/* PARTNER PAGE — TABLET & MOBILE (1024px and below)                      */
/* Every section stacks into one centred column; media and cards keep a   */
/* comfortable width instead of stretching edge to edge.                  */
/* ====================================================================== */
@media (max-width: 1024px) {
  .ttn-app-partner { --ttn-gutter: clamp(20px, 4.5vw, 40px); }

  /* centred text everywhere in the page body */
  .ttn-app-partner .ttn-ap-body > *,
  .ttn-app-partner .ttn-ap-section__head,
  .ttn-app-partner .ttn-ap-discount__info,
  .ttn-app-partner .ttn-ap-membership__content,
  .ttn-app-partner .ttn-ap-feature__content { text-align: center; }
  .ttn-app-partner .ttn-ap-discount__info,
  .ttn-app-partner .ttn-ap-membership__content,
  .ttn-app-partner .ttn-ap-feature__content { align-items: center; }
  .ttn-app-partner .ttn-ap-feature,
  .ttn-app-partner .ttn-ap-membership { justify-items: center; }
  .ttn-app-partner .ttn-ap-feature__content > *,
  .ttn-app-partner .ttn-ap-membership__content > * { max-width: 680px; margin-inline: auto; }
  .ttn-app-partner .ttn-ap-btn { margin-inline: auto; }

  /* lists stay readable: the list block is centred, its items left-aligned */
  .ttn-app-partner .ttn-ap-body .ttn-ap-prose ul,
  .ttn-app-partner .ttn-ap-body .ttn-ap-prose ol {
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }

  /* discount: info on top, card centred below */
  .ttn-app-partner .ttn-ap-discount__grid { justify-items: center; }
  .ttn-app-partner .ttn-ap-discount__info { width: 100%; max-width: 680px; }
  .ttn-app-partner .ttn-ap-discount-card { width: 100%; max-width: 560px; text-align: center; }
  .ttn-app-partner .ttn-ap-discount-card__body { align-items: center; }
  .ttn-app-partner .ttn-ap-discount-card__logo { margin-inline: auto; object-position: center; }
  .ttn-app-partner .ttn-ap-promo { text-align: left; }

  /* membership: card above the text, both centred */
  .ttn-app-partner .ttn-ap-member-card { justify-self: center; width: 100%; max-width: 445px; text-align: left; }

  /* features: text then image, image kept to a sensible width */
  .ttn-app-partner .ttn-ap-feature:not(.ttn-ap-feature--duo) > .ttn-ap-feature__media,
  .ttn-app-partner .ttn-ap-feature__media {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    justify-self: center;
  }
  .ttn-app-partner .ttn-ap-feature__media img { width: 100%; height: auto; margin-inline: auto; }

  /* gallery + steps: centred grids */
  .ttn-app-partner .ttn-ap-gallery__rows,
  .ttn-app-partner .ttn-ap-steps__grid { justify-content: center; }
  .ttn-app-partner .ttn-ap-step-card { text-align: center; align-items: center; }
}

/* Tablet only (768–1024): two images side by side still fit */
@media (min-width: 768px) and (max-width: 1024px) {
  .ttn-app-partner .ttn-ap-feature--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttn-app-partner .ttn-ap-feature--duo > .ttn-ap-feature__media { max-width: none; }
}

/* Phones */
@media (max-width: 767px) {
  .ttn-app-partner .ttn-ap-feature__media { max-width: 100%; }
  .ttn-app-partner .ttn-ap-discount-card { max-width: 100%; }
  .ttn-app-partner .ttn-ap-btn { max-width: 100%; }
}


/* ====================================================================== */
/* PARTNER PAGE IMAGES — uploaded images are shown at their own size.     */
/* No stretching, cropping, zooming or fixed boxes: they only scale down  */
/* to fit the screen. The only thing added is rounded corners.            */
/* (Plugin icons, card backgrounds and the membership card are not        */
/* uploaded images and keep their own styles.)                            */
/* ====================================================================== */

.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__content > img,
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-gallery__item img,
.ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-step-card__img {
  display: block;
  flex: 0 0 auto !important;
  align-self: flex-start;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  object-position: 50% 50% !important;
  transform: none !important;
  clip-path: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__media img,
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-gallery__item img { border-radius: var(--ttn-radius-media, 20px); }
.ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-hero__logo,
.ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-discount-card__logo,
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__content > img,
.ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-step-card__img { border-radius: 8px; }

/* the boxes around them no longer force a size or crop */
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-gallery__item,
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__media {
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: none !important;
}
.ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-hero__logo { align-self: center; }
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-gallery__item { display: flex; justify-content: center; align-items: flex-start; }
.ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-gallery__row > :first-child:not(:nth-last-child(2)) { height: auto !important; }
@media (max-width: 1024px) {
  .ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-hero__logo,
  .ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-discount-card__logo,
  .ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__content > img,
  .ttn-app-partner:not(.ttn-app-partner--list) .ttn-ap-feature__media img,
  .ttn-app-partner:not(.ttn-app-partner--list) img.ttn-ap-step-card__img { margin-inline: auto; align-self: center; }
}