/* ===== SLIDE 11: FOUR TIERS — Two-column redesign ===== */

  /* position stays absolute from .slide base class — do NOT add position:relative */
  #slide-22 {
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: #07070e !important;
  }

  /* Two-column row — fills slide height */
  #slide-22 .s11-layout {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  /* LEFT COLUMN (55%) — header + 4 tier cards T4 top → T1 bottom */
  #slide-22 .s11-left-col {
    width: 55%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0.6rem 0.45rem 1.1rem;
    gap: 0.28rem;
    z-index: 10;
  }

  #slide-22 .s11-header {
    flex-shrink: 0;
    padding: 0.80rem 0 0.55rem 0;
  }

  #slide-22 .s11-section-label {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.20em;
    color: rgba(139,92,246,0.65);
    text-transform: uppercase;
    margin-bottom: 0.07rem;
  }

  #slide-22 .s11-main-title {
    font-family: var(--font-head);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
  }

  #slide-22 .s11-card {
    flex: 1;
    min-height: 0;
    background: rgba(10, 12, 22, 0.58);
    border-left: 3px solid transparent;
    border-top: 1px solid rgba(255,255,255,0.055);
    border-right: 1px solid rgba(255,255,255,0.055);
    border-bottom: 1px solid rgba(255,255,255,0.055);
    border-radius: 0 4px 4px 0;
    padding: 0.40rem 0.75rem 0.40rem 0.82rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  #slide-22 .s11-card.t1 { border-left-color: #3b82f6; box-shadow: 0 2px 20px rgba(59,130,246,0.10); }
  #slide-22 .s11-card.t2 { border-left-color: #059669; box-shadow: 0 2px 20px rgba(5,150,105,0.10); }
  #slide-22 .s11-card.t3 { border-left-color: #f59e0b; box-shadow: 0 2px 20px rgba(245,158,11,0.10); }
  #slide-22 .s11-card.t4 { border-left-color: #8b5cf6; box-shadow: 0 2px 20px rgba(139,92,246,0.10); }

  #slide-22 .s11-tier-label {
    font-family: var(--font-mono);
    font-size: 0.51rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.09rem;
    display: flex;
    align-items: center;
    gap: 0.46rem;
    flex-wrap: wrap;
  }
  #slide-22 .s11-card.t1 .s11-tier-label { color: rgba(59,130,246,0.72); }
  #slide-22 .s11-card.t2 .s11-tier-label { color: rgba(5,150,105,0.72); }
  #slide-22 .s11-card.t3 .s11-tier-label { color: rgba(245,158,11,0.72); }
  #slide-22 .s11-card.t4 .s11-tier-label { color: rgba(139,92,246,0.72); }

  #slide-22 .s11-badge {
    display: inline-block;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.46);
    color: #3b82f6;
    font-size: 0.42rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 0.04rem 0.25rem;
    border-radius: 2px;
    white-space: nowrap;
  }

  #slide-22 .s11-tier-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.13rem;
    line-height: 1.18;
  }

  #slide-22 .s11-numbers {
    display: flex;
    align-items: center;
    gap: 0.60rem;
    margin-bottom: 0.13rem;
    flex-wrap: wrap;
  }

  #slide-22 .s11-tam {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
  }

  #slide-22 .s11-cagr {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 700;
    padding: 0.06rem 0.34rem;
    border-radius: 3px;
    white-space: nowrap;
  }
  #slide-22 .s11-card.t1 .s11-cagr { background: rgba(59,130,246,0.14); color: #3b82f6; }
  #slide-22 .s11-card.t2 .s11-cagr { background: rgba(5,150,105,0.14);  color: #059669; }
  #slide-22 .s11-card.t3 .s11-cagr { background: rgba(245,158,11,0.14); color: #f59e0b; }
  #slide-22 .s11-card.t4 .s11-cagr { background: rgba(139,92,246,0.14); color: #8b5cf6; }

  #slide-22 .s11-desc {
    font-size: 0.69rem;
    color: var(--text-muted);
    line-height: 1.42;
    margin-bottom: 0.10rem;
  }

  #slide-22 .s11-cite {
    font-size: 0.49rem;
    color: rgba(255,255,255,0.22);
    font-family: var(--font-mono);
    line-height: 1.30;
  }

  /* RIGHT COLUMN (45%) — mirrors left column flex structure */
  #slide-22 .s11-right-col {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 0.45rem 0;
    gap: 0.28rem;
    overflow: hidden;
    min-width: 0;
  }

  /* Star field pseudo-element — upper 60% of right column only */
  #slide-22 .s11-right-col::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    z-index: 1;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.85) 0.7px, transparent 0.7px),
      radial-gradient(circle, rgba(255,255,255,0.55) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(255,255,255,0.70) 0.7px, transparent 0.7px),
      radial-gradient(circle, rgba(255,255,255,0.40) 0.5px, transparent 0.5px),
      radial-gradient(circle, rgba(255,255,255,0.78) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(255,255,255,0.34) 0.5px, transparent 0.5px),
      radial-gradient(circle, rgba(255,255,255,0.64) 0.7px, transparent 0.7px),
      radial-gradient(circle, rgba(255,255,255,0.50) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(255,255,255,0.71) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(200,215,255,0.44) 0.5px, transparent 0.5px),
      radial-gradient(circle, rgba(255,255,255,0.82) 0.8px, transparent 0.8px),
      radial-gradient(circle, rgba(255,255,255,0.38) 0.5px, transparent 0.5px),
      radial-gradient(circle, rgba(255,255,255,0.60) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(255,255,255,0.46) 0.7px, transparent 0.7px),
      radial-gradient(circle, rgba(200,220,255,0.62) 0.7px, transparent 0.7px),
      radial-gradient(circle, rgba(255,255,255,0.43) 0.5px, transparent 0.5px),
      radial-gradient(circle, rgba(255,255,255,0.67) 0.6px, transparent 0.6px),
      radial-gradient(circle, rgba(255,255,255,0.31) 0.5px, transparent 0.5px);
    background-size:
      88px 60px,  114px 78px, 142px 95px, 128px 82px,
      98px 66px,  168px 110px, 136px 88px, 192px 124px,
      108px 72px, 158px 102px, 120px 78px, 182px 118px,
      148px 96px, 212px 138px, 174px 112px, 96px 64px,
      156px 100px, 222px 144px;
    background-position:
      12px 8px,   38px 28px,  74px 54px,  108px 18px,
      158px 42px, 24px 88px,  188px 66px, 64px 104px,
      228px 32px, 144px 72px, 268px 18px, 204px 92px,
      308px 48px, 252px 124px, 84px 134px, 332px 78px,
      176px 14px, 290px 58px;
  }

  /* Invisible spacer — same height as .s11-header so image rows align with tier cards */
  #slide-22 .s11-right-spacer {
    flex-shrink: 0;
    padding: 0.80rem 0 0.55rem 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Tier image rows — flex:1 each, mirrors the four .s11-card items */
  #slide-22 .s11-img-row {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1.0rem;
    position: relative;
    z-index: 5;
  }

  /* Tier images: 160x100, rounded, tier-colored border */
  #slide-22 .s11-tier-img {
    width: 160px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    border: 2px solid;
    flex-shrink: 0;
  }
  #slide-22 .s11-img-row.t4 .s11-tier-img { border-color: #8b5cf6; }
  #slide-22 .s11-img-row.t3 .s11-tier-img { border-color: #f59e0b; }
  #slide-22 .s11-img-row.t2 .s11-tier-img { border-color: #059669; }
  #slide-22 .s11-img-row.t1 .s11-tier-img { border-color: #3b82f6; }

  /* Earth sphere — positioned absolute within right column, bottom-right corner */
  #slide-22 .s11-earth-wrap {
    position: absolute;
    bottom: 40px;
    right: 30px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 8;
    box-shadow: 0 0 8px 2px rgba(120,180,255,0.3);
  }

  /* Radial vignette overlay — blends Earth's edge into #07070e bg seamlessly */
  #slide-22 .s11-earth-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 58%, #07070e 84%);
    pointer-events: none;
    z-index: 2;
  }

  #slide-22 .s11-earth-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }