/* ------------------------------------------------------------------
   The Creative Podcast: layout polish
   Alignment and rhythm fixes that sit on top of podover-pages.css.
   Kept in its own file so any one of them can be reverted cleanly.
   ------------------------------------------------------------------ */

/* ---------- episode cards: equal height, actions on one baseline ----------
   Elementor nests container > container > e-con-inner before reaching the
   card, and a flex column does not stretch its children on the main axis,
   so each level needs flex:1 for the card to fill the tallest sibling. */
.tcp-cards > .e-con-inner{align-items:stretch}
.tcp-cards > .e-con-inner > .e-con{display:flex;flex-direction:column}
.tcp-cards > .e-con-inner > .e-con > .e-con{flex:1 1 auto;display:flex;flex-direction:column}
.tcp-cards > .e-con-inner > .e-con > .e-con > .e-con-inner{flex:1 1 auto;display:flex;flex-direction:column}

.tcp-pod-ecard{flex:1 1 auto}
.tcp-pod-ecard > .e-con-inner{display:flex;flex-direction:column;height:100%}
.tcp-pod-ecard-body{flex:1 1 auto}
.tcp-pod-ecard-body > .e-con-inner{
  display:flex;flex-direction:column;height:100%;gap:12px;
}

/* meta and title sit tight, the button is pushed to the foot */
.tcp-pod-ecard-meta,
.tcp-pod-ecard .tcp-pod-h4{margin:0}

/* two lines for every title, so the buttons line up across the row */
.tcp-pod-ecard .tcp-pod-h4 .elementor-heading-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.32;
  min-height:2.64em;
}
.tcp-pod-ecard .tcp-btn{margin-top:auto}
.tcp-pod-ecard .tcp-btn .elementor-button{width:100%;justify-content:center}

/* thumbnails keep one ratio whatever YouTube returns */
.tcp-pod-ecard-media img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
}

@media (max-width:760px){
  .tcp-pod-ecard .tcp-pod-h4 .elementor-heading-title{
    -webkit-line-clamp:3;min-height:0;
  }
}

/* ---------- Talent Beyond Somalia: profile grid ----------
   Cards come from the Beyond Somalia category. Unfilled slots are drawn as
   obvious placeholders so an unfinished series never reads as a real person. */
.tcp-ser-gridwrap{width:100%}
.tcp-ser-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin-top:34px;align-items:stretch;
}
.tcp-ser-card{
  display:flex;flex-direction:column;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);overflow:hidden;
  box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-ser-card:not(.is-empty):hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}
.tcp-ser-media{display:block;background:var(--tcp-bg-alt);aspect-ratio:4/5;overflow:hidden}
.tcp-ser-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--tcp-ease);
}
.tcp-ser-card:not(.is-empty):hover .tcp-ser-media img{transform:scale(1.04)}
.tcp-ser-body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;flex:1 1 auto}
.tcp-ser-meta-line{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tcp-red);
}
.tcp-ser-name{
  margin:0;font-family:var(--tcp-display);font-weight:700;
  font-size:20px;line-height:1.22;color:var(--tcp-ink);
}
.tcp-ser-name a{color:inherit;text-decoration:none}
.tcp-ser-name a:hover{color:var(--tcp-red)}
.tcp-ser-ex{margin:0;font-size:14px;line-height:1.6;color:var(--tcp-muted)}
.tcp-ser-link{
  margin-top:auto;padding-top:6px;align-self:flex-start;
  font-family:var(--tcp-display);font-weight:600;font-size:14px;
  color:var(--tcp-red);text-decoration:none;
}
.tcp-ser-link::after{content:" \2192";transition:margin-left .2s var(--tcp-ease)}
.tcp-ser-link:hover{color:var(--tcp-red-h)}
.tcp-ser-link:hover::after{margin-left:4px}

/* placeholder slot: dashed, muted, unmistakably unfinished */
.tcp-ser-card.is-empty{
  border-style:dashed;border-color:#D8D8D8;box-shadow:none;background:var(--tcp-bg-alt);
}
.tcp-ser-media.is-empty{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#F2F2F2 0 10px,#EDEDED 10px 20px);
}
.tcp-ser-soon{
  font-family:var(--tcp-display);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:#8A8A8A;
  border:1px solid #D2D2D2;background:#fff;
  padding:7px 14px;border-radius:var(--tcp-pill);
}
.tcp-ser-card.is-empty .tcp-ser-meta-line{color:#8A8A8A}
.tcp-ser-card.is-empty .tcp-ser-name{color:#8A8A8A}

@media (max-width:1040px){.tcp-ser-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tcp-ser-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .tcp-ser-card:hover{transform:none}
  .tcp-ser-card:hover .tcp-ser-media img{transform:none}
}
/* ---------- Digital Products listing ----------
   The old card let one square image eat half the page and left the text
   column stranded. Media is capped and the row is balanced instead. */
.tcp-shop-wrap{width:100%}
.tcp-shop-list{display:flex;flex-direction:column;gap:28px}
.tcp-shop-card{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(24px,3.5vw,48px);align-items:center;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--tcp-shadow);
  transition:box-shadow .25s var(--tcp-ease);
}
.tcp-shop-card:hover{box-shadow:var(--tcp-shadow-lift)}

.tcp-shop-media img{width:100%;height:100%;object-fit:cover;display:block}

.tcp-shop-eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tcp-red);
}
.tcp-shop-title{
  margin:0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(24px,2.6vw,32px);line-height:1.12;color:var(--tcp-ink);
}
.tcp-shop-title a{color:inherit;text-decoration:none}
.tcp-shop-title a:hover{color:var(--tcp-red)}
.tcp-shop-desc{margin:0;font-size:15px;line-height:1.65;color:var(--tcp-muted);max-width:56ch}
.tcp-shop-facts{
  list-style:none;margin:2px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.tcp-shop-facts li{
  font-size:12px;color:var(--tcp-muted);
  background:var(--tcp-bg-alt);border:1px solid var(--tcp-line);
  padding:6px 12px;border-radius:var(--tcp-pill);
}
.tcp-shop-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:8px;
  padding-top:16px;border-top:1px solid var(--tcp-line);
}
.tcp-shop-price .woocommerce-Price-amount,
.tcp-shop-price{
  font-family:var(--tcp-display);font-weight:700;font-size:28px;
  line-height:1;color:var(--tcp-ink);
}
.tcp-shop-price del{opacity:.45;font-size:18px;margin-right:6px}
.tcp-shop-price ins{text-decoration:none}
.tcp-shop-actions{display:flex;gap:10px;flex-wrap:wrap}
.tcp-shop-btn,.tcp-shop-btn2{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--tcp-pill);
  font-family:var(--tcp-display);font-weight:600;font-size:14px;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease);
}
.tcp-shop-btn{background:var(--tcp-ink);color:#fff}
.tcp-shop-btn:hover{background:#000;color:#fff;transform:translateY(-2px)}
.tcp-shop-btn2{background:var(--tcp-red);color:#fff}
.tcp-shop-btn2:hover{background:var(--tcp-red-h);color:#fff;transform:translateY(-2px)}
.tcp-shop-btn2.added{display:none}
.tcp-shop-actions .added_to_cart{
  display:inline-flex;align-items:center;padding:13px 24px;
  border-radius:var(--tcp-pill);font-family:var(--tcp-display);
  font-weight:600;font-size:14px;text-decoration:none;
  background:transparent;color:var(--tcp-ink);border:1px solid var(--tcp-ink);
}
@media (max-width:820px){
  .tcp-shop-card{grid-template-columns:1fr}
  
  .tcp-shop-foot{flex-direction:column;align-items:flex-start}
  .tcp-shop-actions{width:100%}
  .tcp-shop-btn,.tcp-shop-btn2{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .tcp-shop-btn:hover,.tcp-shop-btn2:hover{transform:none}
}
/* ---------- platform strip ----------
   Fully rounded pills, no outline. Depth comes from an off red fill rather
   than a stroke: a darker tint of the band for the live platform, a lighter
   one for the platforms that are not open yet. */
.tcp-plat-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tcp-plat-badge{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px 14px 18px;
  border-radius:999px;
  border:0!important;outline:0;
  background:rgba(10,10,10,.16);
  color:#fff;text-decoration:none;
  font-family:var(--tcp-display);font-weight:600;font-size:16px;line-height:1;
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease);
}
.tcp-plat-badge:hover{background:rgba(10,10,10,.28);color:#fff;transform:translateY(-2px)}
.tcp-plat-badge:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* platforms without a real URL yet sit lighter, still no stroke */
.tcp-plat-badge.is-soon,
.tcp-plat-badge[aria-disabled="true"],
.tcp-plat-badge:not([href]){
  background:rgba(255,255,255,.14);cursor:default;
}
.tcp-plat-badge:not([href]):hover{background:rgba(255,255,255,.14);transform:none}

.tcp-plat-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.tcp-plat-mark svg{width:26px;height:26px;color:#fff;display:block}
.tcp-plat-txt{display:inline-flex;align-items:center}
.tcp-plat-txt strong{font-weight:600;font-size:16px;letter-spacing:-.01em}
/* the eyebrow labels are gone from the markup; hide any that come back */
.tcp-plat-txt em{display:none}

/* the phone and mic photo replaces the line drawing */
.tcp-plat-art{display:flex;align-items:center;justify-content:center}
.tcp-plat-photo{
  width:100%;max-width:420px;height:auto;display:block;
  filter:drop-shadow(0 26px 50px rgba(10,10,10,.34));
}
@media (max-width:860px){
  .tcp-plat-photo{max-width:280px;margin:8px auto 0}
  .tcp-plat-badge{padding:12px 20px 12px 14px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .tcp-plat-badge:hover{transform:none}
}
/* ---------- overrides that must beat podover-pages.css ----------
   Same specificity loses to whichever sheet loads last, so these are
   raised deliberately rather than relying on load order. */

/* fully rounded platform pills */
.tcp-pod-platforms .tcp-plat-badges .tcp-plat-badge{
  border-radius:999px!important;
  border:0!important;
}

/* ---------- host pill ----------
   podover-pages.css styles BOTH the Elementor widget wrapper and the heading
   inside it as a pill, each with its own ::after dot. That renders a full width
   capsule wrapped around a second capsule, with two red dots. Only the inner
   one should be a pill. The stroke is dropped for a soft fill. */
.tcp-pod-host-txt .tcp-host-pill,
.elementor-widget.tcp-host-pill{
  display:block!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  gap:0!important;
}
.tcp-pod-host-txt .tcp-host-pill::after,
.elementor-widget.tcp-host-pill::after{content:none!important;display:none!important}

.tcp-host-pill .elementor-heading-title{
  display:inline-flex!important;align-items:center;gap:9px;
  padding:9px 18px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--tcp-red-tint)!important;
  color:var(--tcp-ink)!important;
  font-size:.78rem!important;font-weight:600!important;
  letter-spacing:.08em;text-transform:uppercase;
  margin:0!important;
}
.tcp-host-pill .elementor-heading-title::after{
  content:""!important;display:block!important;
  width:8px;height:8px;border-radius:50%;background:var(--tcp-red);
}
/* ---------- episode card spacing ----------
   Elementor puts vertical padding on BOTH the body container and its
   .e-con-inner, so every card carried 44px top and 48px bottom. Its widgets
   also keep their own margin-bottom, which stacked on top of the flex gap.
   Strip the double padding and the margins, and let one gap own the rhythm. */
.tcp-pod-ecard-body > .e-con-inner{
  padding-top:0!important;padding-bottom:0!important;
  gap:10px;
}
.tcp-pod-ecard-body .elementor-widget,
.tcp-pod-ecard-body > .e-con-inner > *{margin-bottom:0!important;margin-top:0!important}
.tcp-pod-ecard-body{padding:18px 20px 20px!important}

/* the meta line is one row of small text, it does not need 38px */
.tcp-pod-ecard-meta .elementor-heading-title,
.tcp-pod-ecard-meta p{margin:0!important;line-height:1.3}

/* keep the button on a common baseline without opening a canyon above it */
.tcp-pod-ecard .tcp-btn{margin-top:auto!important;padding-top:4px}
/* ---------- Talent Beyond Somalia teaser on the home page ----------
   These cards reuse .tcp-pod-ecard, so the 16/9 episode ratio was squeezing a
   4/5 portrait and slicing the caption baked into the artwork mid sentence.
   Scope the episode ratio to the episode row and crop these to the face, high
   enough that the baked in text is excluded rather than half shown. */
.tcp-pod-latest .tcp-pod-ecard-media img{aspect-ratio:16/9}

.tcp-pod-beyond .tcp-pod-ecard-media img{
  aspect-ratio:5/4;
  object-fit:cover;
  object-position:50% 12%;
}

/* two large cards do not need to span the full grid */
.tcp-pod-beyond .tcp-cards > .e-con-inner{
  max-width:960px;margin-inline:auto;gap:24px;
}

/* a name is one line, so do not reserve two */
.tcp-pod-beyond .tcp-pod-h4 .elementor-heading-title{
  -webkit-line-clamp:2;min-height:0;
}

/* the section already has a primary action at its foot, so the card CTAs
   step down to a link and stop reading as two heavy red bars */
.tcp-pod-beyond .tcp-pod-ecard .tcp-btn .elementor-button{
  background:transparent!important;
  color:var(--tcp-red)!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  font-size:15px!important;
  min-height:0!important;
  justify-content:flex-start!important;
  width:auto!important;
}
.tcp-pod-beyond .tcp-pod-ecard .tcp-btn .elementor-button:hover{
  background:transparent!important;color:var(--tcp-red-h)!important;
}
.tcp-pod-beyond .tcp-pod-ecard .tcp-btn .elementor-button-text::after{
  content:" \2192";
}
.tcp-pod-beyond .tcp-pod-ecard .tcp-btn{align-self:flex-start;margin-top:auto!important;padding-top:6px}
/* ---------- challenge registration ---------- */
.tcp-ch{margin:40px 0 8px}
.tcp-ch-card{
  max-width:640px;margin:0 auto;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);padding:clamp(24px,4vw,40px);
  box-shadow:var(--tcp-shadow);
}

/* step rail */
.tcp-ch-rail{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-start;justify-content:center;gap:0;
}
.tcp-ch-step{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1 1 0;position:relative;text-align:center;
}
.tcp-ch-step+.tcp-ch-step::before{
  content:"";position:absolute;top:19px;left:-50%;width:100%;
  height:2px;background:var(--tcp-line);
}
.tcp-ch-step.is-done+.tcp-ch-step::before,
.tcp-ch-step.is-now::before{background:var(--tcp-red)}
.tcp-ch-dot{
  position:relative;z-index:1;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tcp-bg);border:2px solid var(--tcp-line);
  font-family:var(--tcp-display);font-weight:700;font-size:14px;color:var(--tcp-muted);
}
.tcp-ch-step.is-now .tcp-ch-dot{border-color:var(--tcp-red);color:var(--tcp-red);background:var(--tcp-red-tint)}
.tcp-ch-step.is-done .tcp-ch-dot{border-color:var(--tcp-red);background:var(--tcp-red);color:#fff}
.tcp-ch-label{font-size:13px;color:var(--tcp-muted);line-height:1.3}
.tcp-ch-step.is-now .tcp-ch-label{color:var(--tcp-ink);font-weight:600}
.tcp-ch-count{
  margin:14px 0 0;text-align:center;font-size:13px;font-weight:600;
  color:var(--tcp-red);letter-spacing:.04em;
}

.tcp-ch-h{
  margin:22px 0 0;text-align:center;font-family:var(--tcp-display);
  font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.15;color:var(--tcp-ink);
}
.tcp-ch-lede{
  margin:10px auto 0;text-align:center;max-width:46ch;
  font-size:15px;line-height:1.6;color:var(--tcp-muted);
}

/* form */
.tcp-ch-form{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.tcp-ch-field{display:flex;flex-direction:column;gap:7px}
.tcp-ch-field label{font-size:14px;font-weight:600;color:var(--tcp-ink)}
.tcp-ch-field label span{color:var(--tcp-red)}
.tcp-ch-field label em{font-style:normal;font-weight:400;color:var(--tcp-muted)}
.tcp-ch-field input,
.tcp-ch-field select,
.tcp-ch-field textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--tcp-line);border-radius:var(--tcp-input,12px);
  background:var(--tcp-bg);color:var(--tcp-ink);
  font-family:var(--tcp-body);font-size:15px;line-height:1.4;
  transition:border-color .2s var(--tcp-ease),box-shadow .2s var(--tcp-ease);
}
.tcp-ch-field textarea{resize:vertical;min-height:120px}
.tcp-ch-field input:focus,
.tcp-ch-field select:focus,
.tcp-ch-field textarea:focus{
  outline:none;border-color:var(--tcp-red);
  box-shadow:0 0 0 3px var(--tcp-red-tint);
}
.tcp-ch-err{font-size:13px;color:var(--tcp-red);font-weight:500}

.tcp-ch-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:16px 30px;border:0;border-radius:var(--tcp-pill);
  background:var(--tcp-red)!important;color:#fff!important;
  font-family:var(--tcp-display);font-weight:600;font-size:16px;
  cursor:pointer;text-decoration:none;
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease);
}
.tcp-ch-btn:hover{background:var(--tcp-red-h)!important;color:#fff!important;transform:translateY(-2px)}
.tcp-ch-btn:focus-visible{outline:2px solid var(--tcp-ink);outline-offset:3px}
.tcp-ch-fine{margin:0;text-align:center;font-size:12.5px;color:var(--tcp-muted)}

/* honeypot: present for bots, gone for people and screen readers */
.tcp-ch-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:560px){
  .tcp-ch-label{font-size:11.5px}
  .tcp-ch-dot{width:32px;height:32px;font-size:13px}
  .tcp-ch-step+.tcp-ch-step::before{top:16px}
}
@media (prefers-reduced-motion:reduce){.tcp-ch-btn:hover{transform:none}}
/* Astra fixes selects at 40px, which crops the option text */
.tcp-ch-field select{height:auto!important;min-height:52px;line-height:1.4}
.tcp-ch-field input{height:auto!important;min-height:52px}

/* ---------- challenge winners podium ---------- */
.tcp-win{
  position:relative;isolation:isolate;overflow:hidden;
  margin:44px 0 8px;padding:clamp(32px,4vw,52px) clamp(20px,3vw,40px);
  background:var(--tcp-bg-alt);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);cursor:pointer;
}
.tcp-win:focus-visible{outline:2px solid var(--tcp-red);outline-offset:3px}
.tcp-win-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.tcp-win-in{position:relative;z-index:1}

.tcp-win-eyebrow{
  margin:0;text-align:center;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tcp-red);
}
.tcp-win-h{
  margin:10px 0 0;text-align:center;font-family:var(--tcp-display);
  font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.1;color:var(--tcp-ink);
}
.tcp-win-lede,.tcp-win-foot{
  margin:14px auto 0;text-align:center;max-width:62ch;
  font-size:15px;line-height:1.7;color:var(--tcp-muted);
}
.tcp-win-foot{margin-top:clamp(28px,3vw,40px)}
.tcp-win-hint{
  margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--tcp-muted);opacity:.75;
}

/* podium: second, first, third. First sits higher. */
.tcp-win-podium{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,24px);align-items:end;
  margin-top:clamp(28px,3.5vw,44px);
}
.tcp-win-card{
  display:flex;flex-direction:column;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);overflow:hidden;
  box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-win-card:hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}
.tcp-win-p1{border-color:var(--tcp-red);box-shadow:0 18px 40px -20px rgba(224,2,2,.42)}

.tcp-win-media{
  position:relative;aspect-ratio:1/1;
  background:var(--tcp-soft);
  display:flex;align-items:center;justify-content:center;
}
.tcp-win-p1 .tcp-win-media{aspect-ratio:4/5}
.tcp-win-media img{width:100%;height:100%;object-fit:cover;display:block}
.tcp-win-medal{
  position:absolute;top:12px;left:12px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--tcp-display);font-weight:700;font-size:15px;
  background:var(--tcp-ink);color:#fff;
}
.tcp-win-p1 .tcp-win-medal{background:var(--tcp-red)}
.tcp-win-ph{
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#A8A8A8;
}
.tcp-win-ph svg{width:46px;height:46px}
.tcp-win-ph em{
  font-style:normal;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;
}

.tcp-win-body{padding:18px 18px 22px;text-align:center}
.tcp-win-place{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tcp-red);
}
.tcp-win-name{
  margin:6px 0 0;font-family:var(--tcp-display);font-weight:700;
  font-size:19px;line-height:1.2;color:var(--tcp-ink);
}
.tcp-win-p1 .tcp-win-name{font-size:23px}
.tcp-win-proj{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--tcp-muted)}
.tcp-win-card.is-empty{border-style:dashed;background:var(--tcp-bg-alt);box-shadow:none}
.tcp-win-card.is-empty .tcp-win-name{color:#8A8A8A}

@media (max-width:720px){
  .tcp-win-podium{grid-template-columns:1fr;align-items:stretch}
  .tcp-win-p1{order:-1}
  .tcp-win-media,.tcp-win-p1 .tcp-win-media{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .tcp-win-card:hover{transform:none}
  .tcp-win-hint{display:none}
}
/* ---------- winner photo placeholders ----------
   Drawn rather than uploaded: a brand tile with a ghosted numeral, so the
   slot reads as a picture without pretending to be a person. Swap in a real
   photo by setting photo_id on that place in the tcp_winners meta. */
.tcp-win-ph{
  position:absolute;inset:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;color:#fff;gap:0;
}
.tcp-win-ph[data-place="1"]{background:linear-gradient(160deg,#E00202 0%,#8B0101 100%)}
.tcp-win-ph[data-place="2"]{background:linear-gradient(160deg,#2E2E2E 0%,#0A0A0A 100%)}
.tcp-win-ph[data-place="3"]{background:linear-gradient(160deg,#7A7A7A 0%,#3D3D3D 100%)}
.tcp-win-big{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(150px,20vw,230px);line-height:1;
  color:rgba(255,255,255,.18);pointer-events:none;user-select:none;
}
.tcp-win-ph em{
  position:relative;z-index:1;margin-top:auto;margin-bottom:22px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-style:normal;font-family:var(--tcp-display);font-weight:600;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
}
.tcp-win-ph em span{
  font-family:var(--tcp-body);font-weight:400;font-size:11px;
  letter-spacing:.05em;text-transform:none;color:rgba(255,255,255,.72);
}
.tcp-win-card.is-empty{border-style:solid;background:var(--tcp-bg)}
.tcp-win-card.is-empty .tcp-win-media{background:transparent}
/* ---------- free product ---------- */
.tcp-shop-price.is-free,
.tcp-pdp-amount.is-free{
  font-family:var(--tcp-display);font-weight:700;color:var(--tcp-red);
  letter-spacing:-.01em;
}
.tcp-shop-price.is-free{font-size:30px;line-height:1}
.tcp-pdp-amount.is-free{font-size:44px;line-height:1}

/* the toolkit card had a lot of air between the chips and the actions */
.tcp-shop-card{align-items:center}

.tcp-shop-desc{margin-bottom:2px}
.tcp-shop-foot{margin-top:4px;padding-top:18px}

.tcp-shop-media img{object-position:center}

@media (min-width:821px){
  .tcp-shop-card{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
}
/* ---------- winners: container removed ----------
   The block sits on the page ground now. It stays position:relative and keeps
   its padding because the confetti canvas is absolutely positioned to it, and
   it is still the click target. */
.tcp-win{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
/* ==================================================================
   Blog grid (Podover style)
   Portrait card, date chip top left, author and comments over a
   gradient, title across the foot. The reference is orange; the house
   palette is black, red and white, so the chip and accents are red.
   ================================================================== */
.tcp-bg{padding:clamp(48px,6vw,86px) 0;background:var(--tcp-bg)}
.tcp-bg-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

.tcp-bg-eyebrow{
  margin:0;text-align:center;
  font-family:var(--tcp-display);font-weight:600;font-size:15px;
  color:var(--tcp-red);letter-spacing:.01em;
}
.tcp-bg-h{
  margin:14px auto 0;text-align:center;max-width:18ch;
  font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(32px,4.6vw,56px);line-height:1.12;
  letter-spacing:-.025em;color:var(--tcp-ink);
}

.tcp-bg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(32px,4vw,54px);
}

.tcp-bg-card{position:relative;border-radius:6px;overflow:hidden}
.tcp-bg-media{
  position:relative;display:block;
  aspect-ratio:3/4;overflow:hidden;
  background:var(--tcp-ink);text-decoration:none;
}
.tcp-bg-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--tcp-ease);
}
.tcp-bg-card:hover .tcp-bg-media img{transform:scale(1.05)}

/* readability scrim behind the meta and title */
.tcp-bg-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 38%,rgba(10,10,10,.62) 62%,rgba(10,10,10,.92) 100%);
}

/* date chip */
.tcp-bg-date{
  position:absolute;top:22px;left:22px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:72px;padding:12px 10px;
  background:var(--tcp-red);color:#fff;
  font-family:var(--tcp-display);line-height:1;
}
.tcp-bg-date strong{font-weight:700;font-size:23px}
.tcp-bg-date em{
  font-style:normal;font-weight:600;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;margin-top:5px;
}

/* meta and title */
.tcp-bg-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 26px 28px;
}
.tcp-bg-meta{
  margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;
  gap:18px;font-size:14px;color:#fff;
}
.tcp-bg-meta span{display:inline-flex;align-items:center;gap:8px}
.tcp-bg-meta svg{width:19px;height:19px;color:var(--tcp-red);flex:0 0 auto}
.tcp-bg-title{
  margin:0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(20px,1.9vw,26px);line-height:1.22;color:#fff;
  letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tcp-bg-media:hover .tcp-bg-title{color:#fff}

/* placeholder card */
.tcp-bg-ph{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#3A3A3A 0%,#0A0A0A 100%);
}
.tcp-bg-card.is-empty .tcp-bg-date{background:#6E6E6E}
.tcp-bg-card.is-empty .tcp-bg-title{color:rgba(255,255,255,.72)}

@media (max-width:900px){.tcp-bg-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .tcp-bg-grid{grid-template-columns:1fr}
  .tcp-bg-wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .tcp-bg-card:hover .tcp-bg-media img{transform:none}
}
/* ---------- blog grid refinements ----------
   The role strings run long, so the meta row wrapped to two lines and pushed
   into the artwork. It stays on one line now and the role truncates. The
   scrim is also deepened, because the poster art carries its own baked in
   name and title and the two were competing. */
.tcp-bg-meta{
  flex-wrap:nowrap;gap:14px;font-size:12.5px;
  margin-bottom:10px;min-width:0;
}
.tcp-bg-meta span{min-width:0}
.tcp-bg-meta span:first-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tcp-bg-meta span:last-child{flex:0 0 auto}
.tcp-bg-meta svg{width:16px;height:16px}

/* deeper, taller scrim so overlay type always wins against busy artwork */
.tcp-bg-media::after{
  background:linear-gradient(180deg,
    rgba(10,10,10,0) 30%,
    rgba(10,10,10,.55) 52%,
    rgba(10,10,10,.88) 76%,
    rgba(10,10,10,.97) 100%);
}
.tcp-bg-body{padding:0 22px 24px}
.tcp-bg-title{font-size:clamp(18px,1.7vw,23px)}

/* a little more height so the picture reads before the type starts */
.tcp-bg-media{aspect-ratio:3/4.15}
/* ==================================================================
   Digital Products grid
   Was one wide row that stretched edge to edge with a single product
   in it. Now a centred grid of compact cards: one product sits in the
   middle at a sane width, and a second or third lands beside it
   without any layout change.
   ================================================================== */
.tcp-shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  justify-content:center;
  gap:clamp(20px,2.4vw,30px);
  max-width:1120px;margin-inline:auto;
}

/* reset the old wide row card */
.tcp-shop-grid .tcp-shop-card{
  display:flex;flex-direction:column;
  grid-template-columns:none;
  align-items:stretch;text-align:left;
  padding:0;overflow:hidden;
  background:var(--tcp-bg);
  border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);
  box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-shop-grid .tcp-shop-card:hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}














@media (max-width:620px){
  .tcp-shop-grid{grid-template-columns:minmax(0,340px)}
}
/* ==================================================================
   Shop header and card, after the reference layout
   Breadcrumb, heading with a count pill, intro, result line and sort,
   then cards with the title above the image. Reference uses a warm
   gradient; the house palette is black, red and white, so the accents
   are the brand red.
   ================================================================== */
.tcp-shop{max-width:1160px;margin-inline:auto;padding:clamp(28px,4vw,48px) 24px 0}

.tcp-shop-head{margin-bottom:clamp(26px,3vw,38px)}
.tcp-shop-crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:13px;color:var(--tcp-muted);margin-bottom:16px;
}
.tcp-shop-crumbs a{color:var(--tcp-muted);text-decoration:none}
.tcp-shop-crumbs a:hover{color:var(--tcp-red)}
.tcp-shop-crumbs strong{color:var(--tcp-ink);font-weight:500}

.tcp-shop-headline{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tcp-shop-h1{
  margin:0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(34px,4.4vw,52px);line-height:1.05;
  letter-spacing:-.03em;color:var(--tcp-ink);
}
.tcp-shop-count{
  display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:var(--tcp-pill);
  background:var(--tcp-red-tint);color:var(--tcp-red);
  font-family:var(--tcp-display);font-weight:600;font-size:13.5px;
}
.tcp-shop-intro{
  margin:14px 0 0;font-size:16px;line-height:1.6;
  color:var(--tcp-muted);max-width:62ch;
}

.tcp-shop-bar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px);
}
.tcp-shop-result{margin:0;font-size:14.5px;color:var(--tcp-muted)}
.tcp-shop-sort{display:flex;flex-direction:column;gap:7px;min-width:220px}
.tcp-shop-sort label{
  font-family:var(--tcp-display);font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tcp-muted);
}
.tcp-shop-sort select{
  height:auto!important;min-height:52px;
  padding:14px 16px;border:1px solid var(--tcp-line);border-radius:12px;
  background:var(--tcp-bg);color:var(--tcp-ink);
  font-family:var(--tcp-body);font-size:15px;line-height:1.4;cursor:pointer;
}
.tcp-shop-sort select:focus{outline:none;border-color:var(--tcp-red);box-shadow:0 0 0 3px var(--tcp-red-tint)}

/* ---------- card ---------- */
.tcp-shop-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,360px));
  justify-content:center;gap:clamp(20px,2.4vw,30px);
  padding-bottom:clamp(40px,5vw,72px);
}
.tcp-shop-grid .tcp-shop-card{
  display:flex;flex-direction:column;grid-template-columns:none;
  align-items:stretch;text-align:left;padding:0;overflow:hidden;
  background:var(--tcp-bg);border:1px solid var(--tcp-line);
  border-radius:var(--tcp-card);box-shadow:var(--tcp-shadow);
  transition:transform .25s var(--tcp-ease),box-shadow .25s var(--tcp-ease);
}
.tcp-shop-grid .tcp-shop-card:hover{transform:translateY(-4px);box-shadow:var(--tcp-shadow-lift)}

/* title sits above the image */
.tcp-shop-top{padding:26px 24px 18px;text-align:center}
.tcp-shop-top .tcp-shop-title{
  margin:0;font-family:var(--tcp-display);font-weight:700;
  font-size:23px;line-height:1.18;letter-spacing:-.015em;
}
.tcp-shop-top .tcp-shop-title a{color:var(--tcp-ink);text-decoration:none}
.tcp-shop-top .tcp-shop-title a:hover{color:var(--tcp-red)}
.tcp-shop-by{
  margin:7px 0 0;font-size:13.5px;font-style:italic;color:var(--tcp-muted);
}














@media (max-width:620px){
  .tcp-shop{padding-inline:16px}
  .tcp-shop-grid{grid-template-columns:minmax(0,360px)}
  .tcp-shop-bar{flex-direction:column;align-items:stretch}
  .tcp-shop-sort{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .tcp-shop-grid .tcp-shop-card:hover{transform:none}
}
/* ---------- shop grid: left aligned ----------
   Centring one card left a huge void either side and made a single product
   look like a mistake. The grid starts at the left gutter and fills
   rightwards, so one product reads as the first of a set rather than as a
   lone object floating in the middle. */
.tcp-shop-grid{justify-content:start!important}
.tcp-shop-grid.is-single{grid-template-columns:repeat(auto-fit,minmax(280px,380px))}

/* the duplicate title and breadcrumb are gone, so the block starts on the
   intro line and needs its own breathing room */
.tcp-shop-head{margin-bottom:clamp(22px,2.6vw,32px)}
.tcp-shop-intro{margin-top:0;font-size:16.5px;max-width:58ch}
.tcp-shop-result{
  margin:0;font-size:14px;color:var(--tcp-muted);
}
.tcp-shop-result strong{
  font-family:var(--tcp-display);font-weight:700;
  color:var(--tcp-ink);font-size:16px;
}
.tcp-shop-empty{color:var(--tcp-muted);font-size:15px;margin:0}
/* ==================================================================
   Shop card, tightened
   The card mixed alignments: eyebrow centred, title left, description
   centred, button full bleed. One alignment reads as designed; three
   reads as unfinished. Everything is left aligned now, and the image
   no longer dominates the card.
   ================================================================== */
.tcp-shop-grid .tcp-shop-body,
.tcp-shop-grid .tcp-shop-eyebrow,
.tcp-shop-grid .tcp-shop-desc,
.tcp-shop-grid .tcp-shop-title,



/* the artwork was running the full card height; cap it so the words
   get their share of the card */








/* the action reads as an action, not a slab */


/* ---------- shop card: action centred, chips gone ---------- */



/* ==================================================================
   Shop card rhythm
   The artwork is square but was being cropped to 4:3, which cut the
   tool pills off the bottom of the poster. It keeps its own ratio now.
   The 48px hole between image and copy is gone, replaced by one even
   rhythm down the card.
   ================================================================== */








/* the divider sat too far from what it divides */





/* ==================================================================
   Shop card: single source of truth
   Nine overlapping rules had accumulated on .tcp-shop-media and
   .tcp-shop-body across successive edits, each partly cancelling the
   last, which is why the spacing kept moving. They are all removed.
   This block is the only place the card's internals are set.
   ================================================================== */
.tcp-shop-grid .tcp-shop-card{
  display:flex;flex-direction:column;
  padding:0;overflow:hidden;text-align:left;
}

/* artwork: square source, square frame, no crop */
.tcp-shop-grid .tcp-shop-media{
  display:block;width:auto;
  margin:16px 16px 0;
  aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;
  background:var(--tcp-bg-alt);
}
.tcp-shop-grid .tcp-shop-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* copy: one gap value owns the vertical rhythm, no per element margins */
.tcp-shop-grid .tcp-shop-body{
  display:flex;flex-direction:column;
  gap:10px;
  padding:16px 18px 18px;
  flex:1 1 auto;min-width:0;
}
.tcp-shop-grid .tcp-shop-body > *{margin:0}
.tcp-shop-grid .tcp-shop-eyebrow{font-size:10.5px;letter-spacing:.11em}
.tcp-shop-grid .tcp-shop-title{font-size:20px;line-height:1.2}
.tcp-shop-grid .tcp-shop-desc{font-size:13.5px;line-height:1.55}

/* action: centred, divider close to what it divides */
.tcp-shop-grid .tcp-shop-foot{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--tcp-line);
}
.tcp-shop-grid .tcp-shop-price{font-size:19px;line-height:1.1;text-align:center}
.tcp-shop-grid .tcp-shop-price s{opacity:.55}
.tcp-shop-grid .tcp-shop-price s .woocommerce-Price-amount{font-size:.8em}
.tcp-shop-grid .tcp-shop-btn{padding:12px 30px;font-size:14px}
/* ==================================================================
   Reach strip, after the Podover reference
   Dark studio ground, an icon above each figure, hairline dividers,
   and a white card that overlaps the foot of the section. The
   reference is orange; the house palette is black, red and white.
   ================================================================== */
.tcp-pod-stats{padding:0!important;background:var(--tcp-ink)!important}
.tcp-reach{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,7vw,92px) 0 0}
.tcp-reach-bg{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.86),rgba(10,10,10,.94)),
             url('https://thecreativespodcast.com/wp-content/uploads/tcp-brand/hero-studio.jpg') center/cover no-repeat;
}
.tcp-reach-in{
  max-width:var(--tcp-measure,1200px);margin:0 auto;
  padding:0 var(--tcp-gutter,32px) clamp(64px,8vw,120px);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.tcp-reach-stat{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:0 14px;position:relative;
}
.tcp-reach-stat+.tcp-reach-stat::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;
  width:1px;background:rgba(255,255,255,.16);
}

/* icon sits on a soft red blob, as the reference does with orange */
.tcp-reach-ico{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;margin-bottom:8px;color:#fff;
}
.tcp-reach-ico::before{
  content:'';position:absolute;inset:6px 10px 10px 6px;
  background:var(--tcp-red);
  border-radius:60% 40% 55% 45% / 55% 55% 45% 45%;
  opacity:.92;
}
.tcp-reach-ico svg{position:relative;width:38px;height:38px}

.tcp-reach-num{
  font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:#fff;
  letter-spacing:-.02em;
}
.tcp-reach-num em{font-style:normal;color:var(--tcp-red);margin-left:2px}
.tcp-reach-lab{
  font-family:var(--tcp-display);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);
}

/* the overlapping card */
.tcp-reach-card{
  position:relative;z-index:2;
  max-width:var(--tcp-measure,1200px);
  margin:0 auto;translate:0 50%;
  width:calc(100% - (var(--tcp-gutter,32px) * 2));
  background:var(--tcp-bg);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding:clamp(26px,3.2vw,40px) clamp(24px,3vw,44px);
  box-shadow:0 26px 60px -28px rgba(10,10,10,.45);
}
.tcp-reach-eyebrow{
  margin:0;font-family:var(--tcp-display);font-weight:600;font-size:15px;
  color:var(--tcp-red);
}
.tcp-reach-h{
  margin:8px 0 0;font-family:var(--tcp-display);font-weight:700;
  font-size:clamp(22px,2.6vw,30px);line-height:1.15;color:var(--tcp-ink);
  letter-spacing:-.02em;
}
.tcp-reach-actions{display:flex;gap:12px;flex-wrap:wrap}
.tcp-reach-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:var(--tcp-pill);
  background:var(--tcp-red);color:#fff;text-decoration:none;
  font-family:var(--tcp-display);font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .2s var(--tcp-ease),transform .2s var(--tcp-ease);
}
.tcp-reach-btn:hover{background:var(--tcp-red-h);color:#fff;transform:translateY(-2px)}
.tcp-reach-btn.is-dark{background:var(--tcp-ink)}
.tcp-reach-btn.is-dark:hover{background:#000;color:#fff}

/* the card hangs below the section, so the next block needs room */
.tcp-pod-stats{margin-bottom:clamp(70px,9vw,120px)}

@media (max-width:860px){
  .tcp-reach-in{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .tcp-reach-stat:nth-child(3)::before{display:none}
  .tcp-reach-card{translate:0 32px;flex-direction:column;align-items:flex-start}
  .tcp-pod-stats{margin-bottom:64px}
}
@media (max-width:520px){
  .tcp-reach-in{grid-template-columns:1fr}
  .tcp-reach-stat+.tcp-reach-stat::before{display:none}
  .tcp-reach-actions{width:100%}
  .tcp-reach-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.tcp-reach-btn:hover{transform:none}}

/* ---------- the card must escape the section ----------
   .tcp-reach carried overflow:hidden to keep the background in, but the
   card deliberately hangs half outside the section and was being clipped
   to a sliver. The background is inset:0 so it never needed clipping. */
.tcp-reach{overflow:visible}
.tcp-reach-bg{overflow:hidden}
.tcp-pod-stats{overflow:visible!important}
.tcp-pod-stats .elementor-widget-html,
.tcp-pod-stats .e-con-inner{overflow:visible}
/* ---------- host: portrait bleeds to the top right corner ----------
   Two things to know about this card. The flex row lives on Elementor's
   .e-con-inner, not on .tcp-pod-host-in, so alignment has to be set there.
   And the image column is an Elementor container whose flex is driven by
   --flex-grow/--flex-shrink at a specificity my single class cannot beat,
   so the basis needs !important. Without a definite basis the column takes
   the photo's natural width, overflows the row and wraps below the copy.

   The card pads 56px on three sides. Pull the image column out of the top
   and right padding and stretch it, so the photo meets three edges. The
   card clips with overflow:hidden and a 30px radius, so the corners round
   themselves and the image needs no radius of its own. */
.tcp-pod-host-in > .e-con-inner{
  align-items:stretch!important;
  flex-wrap:nowrap!important;
  min-height:600px;
}
.tcp-pod-host-txt{align-self:center!important;flex:1 1 auto!important;min-width:0;padding-bottom:0}
.tcp-pod-host-img{
  flex:0 0 48%!important;width:48%!important;max-width:48%!important;
  align-self:stretch!important;align-items:stretch;
  margin:-56px -56px 0 0!important;
  aspect-ratio:auto;
}
.tcp-pod-host-img::before{display:none!important}
.tcp-pod-host-img > .elementor-widget,
.tcp-pod-host-img .elementor-widget-container,
.tcp-pod-host-img figure,
.tcp-pod-host-img a{display:block;height:100%;width:100%;margin:0!important;line-height:0;font-size:0}
.tcp-pod-host-img img{
  width:100%!important;height:100%!important;max-height:none;
  object-fit:cover;object-position:50% 42%;display:block;vertical-align:bottom;
  border-radius:0!important;
  filter:none!important;box-shadow:none!important;margin:0;
}

/* stacked: bleed the photo to the card's side and bottom edges instead.
   The row wraps here, and a wrapped flex line stretches under the default
   align-content, which opened a dead band between the copy and the photo.
   An explicit column removes the line boxes and the problem with them. */
@media (max-width:900px){
  .tcp-pod-host-in > .e-con-inner{
    flex-direction:column!important;flex-wrap:nowrap!important;
    align-items:stretch!important;align-content:flex-start;min-height:0;
  }
  .tcp-pod-host-txt{align-self:auto!important;flex:0 0 auto!important;padding-bottom:26px}
  .tcp-pod-host-img{
    flex:0 0 auto!important;width:auto!important;max-width:none!important;
    margin:0 -26px!important;align-self:auto!important;
  }
  .tcp-pod-host-img img{aspect-ratio:4/5;height:auto!important}
}
/* ---------- tcp-reach-shelf-v1 ----------
   The subscribe card hangs 84px below the black band, and the band carried
   a 118px bottom margin to clear it. A margin shows the body background, so
   that strip rendered white between the black band and the grey host
   section. Drop the margin, let the card overhang into the grey section
   itself, and give the black band a stacking context so the card stays on
   top of the section that follows it in the DOM. */
.tcp-pod-stats{margin-bottom:0!important;position:relative;z-index:2}
.tcp-pod-host{position:relative;z-index:1;padding-top:112px!important}
@media (max-width:900px){
  .tcp-pod-host{padding-top:96px!important}
}
@media (max-width:600px){
  .tcp-pod-host{padding-top:84px!important}
}
/* ---------- tcp-rhythm-v1 ----------
   The front page had grown seven different section paddings: 116/126 on the
   hero, 83 on the two content sections, 92 on the stats band, 112/83 on the
   host, 64 on the platforms strip, 44 on sponsors and 56 on the ad. Nothing
   lined up, which is what reads as uneven breathing down the page. Three
   tokens replace all of it: a standard step for content sections, a larger
   one for the hero, a smaller one for the two thin bands. They are fluid, so
   the rhythm tightens on a laptop and opens up on a wide screen without a
   stack of breakpoints. */
:root{
  --tcp-sec-y:clamp(64px,6.4vw,100px);
  --tcp-sec-y-lg:clamp(96px,9vw,148px);
  --tcp-sec-y-sm:clamp(40px,3.6vw,56px);
}
.tcp-pod-hero-in{padding-top:var(--tcp-sec-y-lg)!important;padding-bottom:var(--tcp-sec-y-lg)!important}
.tcp-pod-latest,
.tcp-pod-beyond{padding-top:var(--tcp-sec-y)!important;padding-bottom:var(--tcp-sec-y)!important}
.tcp-plat-in{padding-top:var(--tcp-sec-y)!important;padding-bottom:var(--tcp-sec-y)!important}
.tcp-pod-sponsors,
.tcp-pod-ad{padding-top:var(--tcp-sec-y-sm)!important;padding-bottom:var(--tcp-sec-y-sm)!important}
.tcp-reach{padding-top:var(--tcp-sec-y)!important}

/* the host section keeps a larger top step because the subscribe card hangs
   84px into it and must clear the card, but it now scales with the system */
.tcp-pod-host{
  padding-top:calc(var(--tcp-sec-y) + 28px)!important;
  padding-bottom:var(--tcp-sec-y)!important;
}

/* the stats band carried 110px of padding under the numbers on top of the
   84px the card hangs down, which left roughly 190px of dead black */
.tcp-reach-in{padding-bottom:44px!important}

/* ---------- tcp-beyond-cards-v2 ----------
   The media widget still carried the 16/9 episode ratio while the image
   inside it had been re-ratioed to 5/4, so every card clipped its artwork
   105px short of the bottom and cut through the designed frame. Match the
   box to the image, then give the body a hierarchy that suits a card this
   wide: the name was sitting at 16px inside a 446px card. */
.tcp-pod-beyond .tcp-pod-ecard-media{aspect-ratio:5/4;overflow:hidden}
.tcp-pod-beyond .tcp-pod-ecard-media a{display:block;height:100%;width:100%}
.tcp-pod-beyond .tcp-pod-ecard-media img{height:100%;aspect-ratio:auto}

/* two profiles stretched across the full row read as a gap, not a grid.
   Cap the card and centre the line, so a third and fourth still fill it. */
.tcp-pod-beyond .tcp-cards > .e-con-inner{justify-content:center;gap:28px}
.tcp-pod-beyond .tcp-cards > .e-con-inner > .e-con{
  max-width:402px!important;flex:1 1 320px!important;width:auto!important;padding-inline:0!important;
}

.tcp-pod-beyond .tcp-pod-ecard-body{padding:22px 24px 24px!important}
.tcp-pod-beyond .tcp-pod-ecard-body > .e-con-inner{gap:7px}
.tcp-pod-beyond .tcp-pod-ecard-meta p{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tcp-muted);
}
.tcp-pod-beyond .tcp-pod-h4 .elementor-heading-title{
  font-size:1.28rem;line-height:1.24;letter-spacing:-.012em;
}
.tcp-pod-beyond .tcp-pod-ecard .tcp-btn{padding-top:12px!important}

/* the card lifts as one object, and the artwork breathes with it */
.tcp-pod-beyond .tcp-pod-ecard{
  border-color:#EAEAEA;box-shadow:0 1px 2px rgba(10,10,10,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.tcp-pod-beyond .tcp-pod-ecard:hover{
  transform:translateY(-6px);border-color:#DEDEDE;
  box-shadow:0 26px 52px -24px rgba(10,10,10,.26);
}
@media (prefers-reduced-motion:reduce){
  .tcp-pod-beyond .tcp-pod-ecard:hover{transform:none}
}
@media (max-width:640px){
  .tcp-pod-beyond .tcp-cards > .e-con-inner > .e-con{max-width:none!important;flex:1 1 100%!important}
}