.branding-buildup-section {
    container-type: inline-size;
    container-name: branding-buildup;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: clamp(340px, 38vw, 480px);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    position: relative;
}

.branding-buildup-section .branding-buildup-timeline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: left;
}

.branding-buildup-section .branding-buildup-timeline,
.branding-buildup-section .branding-buildup-timeline *,
.branding-buildup-section .branding-buildup-timeline *::before,
.branding-buildup-section .branding-buildup-timeline *::after {
    box-sizing: border-box;
}

.branding-buildup-section .branding-buildup-timeline .scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(7px, 2.55cqi, 13px);
}


      .branding-buildup-timeline {
        --orange: #ff7e0c;
        --brand-50: #fef6ee;
        --brand-100: #fff4da;
        --brand-200: #ffe6b5;
        --brand-700: #cd4b17;
        --gray-100: #f2f4f7;
        --gray-200: #eaecf0;
        --gray-300: #d0d5dd;
        --gray-400: #98a2b3;
        --gray-500: #667085;
        --gray-600: #475467;
        --gray-700: #344054;
        --gray-900: #101828;

        /* yourvcard profile defaults (from profile.html) */
        --vc-name: #0a0a0a;
        --vc-title: #999999;
      }

      *,
      *::before,
      .branding-buildup-timeline *::after{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      

      /* ── Dot-grid background ── */
      .branding-buildup-timeline .bg{
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 75% 70% at 52% 48%,
          #fff4ed 0%,
          #fff 68%
        );
        z-index: 0;
      }
      /* Unterkante: weiches Auslaufen in reines Weiß (keine harte Gradient-Kante) */
      .branding-buildup-timeline .bg::before{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          transparent 58%,
          rgba(255, 255, 255, 0.55) 82%,
          #fff 100%
        );
        pointer-events: none;
      }
      .branding-buildup-timeline .bg::after{
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle,
          rgba(208, 213, 221, 0.55) 1px,
          transparent 1px
        );
        background-size: 38px 38px;
      }

      /* ── Network canvas ── */
      .branding-buildup-timeline .branding-buildup-net-canvas{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        animation: bbt-canvasFadeIn 2s ease 0.4s forwards;
      }
      @keyframes bbt-canvasFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* ── Glow ── */
      .branding-buildup-timeline .glow{
        position: absolute;
        width: 22em;
        height: 22em;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 126, 12, 0.09) 0%,
          transparent 70%
        );
        left: 57%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        animation: bbt-glowPulse 3.5s ease-in-out 0.8s infinite;
      }
      @keyframes bbt-glowPulse {
        0%,
        100% {
          opacity: 0.5;
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.18);
        }
      }

      /* ════════════════════════════════════ HEADLINE BADGE ════════════════════════════════════ */
      .branding-buildup-timeline .headline{
        position: absolute;
        bottom: 9.5%;
        left: 45%;
        transform: translateX(-50%);
        z-index: 30;
        opacity: 0;
        animation: bbt-fadeDown 0.7s ease 0.2s forwards;
        white-space: nowrap;
      }
      .branding-buildup-timeline .badge{
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        background: var(--brand-50);
        border: 1px solid var(--brand-200);
        border-radius: 100px;
        padding: 0.3em 1.1em;
        font-size: 0.68em;
        font-weight: 600;
        color: var(--brand-700);
      }
      .branding-buildup-timeline .badge-dot{
        width: 0.46em;
        height: 0.46em;
        border-radius: 50%;
        background: var(--orange);
        animation: bbt-dotPulse 2s ease-in-out 1s infinite;
      }
      @keyframes bbt-dotPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.4;
          transform: scale(0.7);
        }
      }

      /* ════════════════════════════════════ STEP INDICATORS ════════════════════════════════════ */
      .branding-buildup-timeline .steps-panel{
        position: absolute;
        left: 27%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        display: flex;
        flex-direction: column;
        width: 12em;
        font-size: 1.25em;
      }
      .branding-buildup-timeline .step-row{
        display: flex;
        align-items: flex-start;
        gap: 0.7em;
        opacity: 0;
        position: relative;
      }
      .branding-buildup-timeline .step-connector{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
      }
      .branding-buildup-timeline .step-num{
        width: 2em;
        height: 2em;
        border-radius: 50%;
        border: 2px solid var(--gray-300);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.62em;
        font-weight: 700;
        color: var(--gray-400);
        flex-shrink: 0;
      }
      .branding-buildup-timeline .step-line{
        width: 2px;
        height: 2.5em;
        background: var(--gray-200);
        flex-shrink: 0;
      }
      .branding-buildup-timeline .step-row:last-child .step-line{
        display: none;
      }
      .branding-buildup-timeline .step-text{
        padding-top: 0.15em;
      }
      .branding-buildup-timeline .step-label{
        font-size: 0.64em;
        font-weight: 700;
        color: var(--gray-600);
        white-space: nowrap;
      }
      .branding-buildup-timeline .step-desc{
        font-size: 0.5em;
        color: var(--gray-400);
        margin-top: 0.12em;
        line-height: 1.35;
      }

      .branding-buildup-timeline .step-state-inactive{
        display: flex;
        align-items: flex-start;
        gap: 0.7em;
      }
      .branding-buildup-timeline .step-state-active{
        display: flex;
        align-items: flex-start;
        gap: 0.7em;
        position: absolute;
        inset: 0;
        opacity: 0;
      }
      .branding-buildup-timeline .step-state-done{
        display: flex;
        align-items: flex-start;
        gap: 0.7em;
        position: absolute;
        inset: 0;
        opacity: 0;
      }
      .branding-buildup-timeline .step-state-active .step-num{
        background: var(--orange);
        border-color: var(--orange);
        color: white;
        box-shadow: 0 0 0 3px rgba(255, 126, 12, 0.22);
      }
      .branding-buildup-timeline .step-state-active .step-label{
        color: var(--orange);
        font-weight: 700;
      }
      .branding-buildup-timeline .step-state-active .step-line{
        background: var(--brand-200);
      }
      .branding-buildup-timeline .step-state-done .step-num{
        background: var(--brand-50);
        border-color: var(--brand-200);
        color: var(--orange);
      }
      .branding-buildup-timeline .step-state-done .step-label{
        color: var(--gray-400);
      }
      .branding-buildup-timeline .step-state-done .step-line{
        background: var(--brand-200);
      }

      /* Timeline — längere Pausen zwischen den Schritten (~1,2s mehr Hold)
       Step 1 Logo:        1.5s appear · 2.0s active · 3.8s done
       Step 2 Primärfarbe: 4.2s appear · 4.8s active · 6.2s done
       Step 3 Profil:      7.4s appear · 8.0s active · 9.4s done
       Step 4 Schriftart: 10.6s appear · 11.2s active (stays) */
      .branding-buildup-timeline .step-row.s1{
        animation: bbt-slideInLeft 0.5s ease 1.5s forwards;
      }
      .branding-buildup-timeline .step-row.s1 .step-state-active{
        animation:
          bbt-fadeIn 0.3s ease 2s forwards,
          bbt-fadeOut 0.3s ease 3.8s forwards;
      }
      .branding-buildup-timeline .step-row.s1 .step-state-done{
        animation: bbt-fadeIn 0.3s ease 3.8s forwards;
      }
      .branding-buildup-timeline .step-row.s2{
        animation: bbt-slideInLeft 0.5s ease 4.2s forwards;
      }
      .branding-buildup-timeline .step-row.s2 .step-state-active{
        animation:
          bbt-fadeIn 0.3s ease 4.8s forwards,
          bbt-fadeOut 0.3s ease 6.2s forwards;
      }
      .branding-buildup-timeline .step-row.s2 .step-state-done{
        animation: bbt-fadeIn 0.3s ease 6.2s forwards;
      }
      .branding-buildup-timeline .step-row.s3{
        animation: bbt-slideInLeft 0.5s ease 7.4s forwards;
      }
      .branding-buildup-timeline .step-row.s3 .step-state-active{
        animation:
          bbt-fadeIn 0.3s ease 8s forwards,
          bbt-fadeOut 0.3s ease 9.4s forwards;
      }
      .branding-buildup-timeline .step-row.s3 .step-state-done{
        animation: bbt-fadeIn 0.3s ease 9.4s forwards;
      }
      .branding-buildup-timeline .step-row.s4{
        animation: bbt-slideInLeft 0.5s ease 10.6s forwards;
      }
      .branding-buildup-timeline .step-row.s4 .step-state-active{
        animation: bbt-fadeIn 0.3s ease 11.2s forwards;
      }

      /* ════════════════════════════════════ PHONE ════════════════════════════════════ */
      .branding-buildup-timeline .phone-wrapper{
        position: absolute;
        left: 57%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        opacity: 0;
        animation: bbt-popInPhone 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s
          forwards;
      }
      @keyframes bbt-popInPhone {
        from {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.65);
        }
        to {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }
      .branding-buildup-timeline .phone{
        position: relative;
        width: 13.5em;
        background: #111;
        border-radius: 2.7em;
        padding: 0.48em;
        box-shadow:
          0 0 0 0.09em #222,
          inset 0 0 0 0.06em rgba(255, 255, 255, 0.07),
          0 10px 50px rgba(0, 0, 0, 0.5),
          0 30px 30px rgba(0, 0, 0, 0.28);
      }
      .branding-buildup-timeline .phone::before{
        content: "";
        position: absolute;
        top: 0.6em;
        left: 50%;
        transform: translateX(-50%);
        width: 31%;
        height: 0.88em;
        background: #111;
        border-radius: 0 0 0.65em 0.65em;
        z-index: 30;
      }
      .branding-buildup-timeline .phone::after{
        content: "";
        position: absolute;
        bottom: 0.72em;
        left: 50%;
        transform: translateX(-50%);
        width: 27%;
        height: 0.22em;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 100px;
        z-index: 30;
      }
      .branding-buildup-timeline .phone-screen{
        border-radius: 2.22em;
        overflow: hidden;
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 19.5;
      }

      /* ════════════════════════════════════
     VCARD — mirrors profile.html structure
  ════════════════════════════════════ */

      /* Background gradient — neutral gray → orange */
      .branding-buildup-timeline .vc-bg-neutral{
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(151deg, #c6c6c6 0%, #adadad 100%);
      }
      .branding-buildup-timeline .vc-bg-brand{
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(151deg, #ff7e0c -2%, #f24b2d 101%);
        clip-path: inset(0 100% 0 0);
        animation: bbt-colorWipe 1.3s cubic-bezier(0.65, 0, 0.35, 1) 4.8s forwards;
      }
      @keyframes bbt-colorWipe {
        from {
          clip-path: inset(0 100% 0 0);
        }
        to {
          clip-path: inset(0 0% 0 0);
        }
      }

      /* White card */
      .branding-buildup-timeline .vc-card{
        position: absolute;
        top: 9%;
        left: 0.55em;
        right: 0.55em;
        bottom: 0.45em;
        z-index: 5;
        background: white;
        border-radius: 1.55em 1.55em 1.35em 1.35em;
        display: flex;
        flex-direction: column;
        padding: 1em 0.95em 0.85em;
        overflow: hidden;
      }

      /* Top row: avatar + logo */
      .branding-buildup-timeline .vc-top{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-shrink: 0;
        margin-bottom: 0.55em;
      }

      /* Avatar with ring */
      .branding-buildup-timeline .vc-avatar{
        position: relative;
        width: 3.5em;
        height: 3.5em;
        flex-shrink: 0;
      }
      .vc-ring-gray,
      .branding-buildup-timeline .vc-ring-grad{
        position: absolute;
        inset: -0.15em;
        border-radius: 50%;
      }
      .branding-buildup-timeline .vc-ring-gray{
        background: #b8bcc4;
        animation: bbt-fadeOut 0.6s ease 4.9s forwards;
      }
      .branding-buildup-timeline .vc-ring-grad{
        background: linear-gradient(
          135deg,
          #ff6b8b 0%,
          #ff7e0c 65%,
          #ffa336 100%
        );
        opacity: 0;
        animation: bbt-fadeIn 0.6s ease 4.9s forwards;
      }
      .branding-buildup-timeline .vc-avatar-inner{
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 0.1em solid white;
        overflow: hidden;
        background: var(--gray-300);
      }
      /* Photo appears with Step 3 (profile info) */
      .branding-buildup-timeline .vc-avatar-photo{
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(
          circle at 50% 32%,
          #ffb877 0%,
          #ff8a3c 55%,
          #e0691c 100%
        );
        opacity: 0;
        animation: bbt-fadeIn 0.6s ease 8s forwards;
      }
      .branding-buildup-timeline .vc-avatar-photo::before{
        content: "";
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 40%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
      }
      .branding-buildup-timeline .vc-avatar-photo::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 8%;
        right: 8%;
        height: 50%;
        border-radius: 50% 50% 0 0;
        background: rgba(255, 255, 255, 0.42);
      }

      /* Logo (inverted, Step 1) */
      .branding-buildup-timeline .vc-logo{
        width: 2.05em;
        height: 2.05em;
        flex-shrink: 0;
        margin-top: 0.25em;
        opacity: 0;
        transform: translateX(1.8em);
        animation: bbt-logoSlideIn 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) 2.2s
          forwards;
      }
      @keyframes bbt-logoSlideIn {
        from {
          opacity: 0;
          transform: translateX(1.8em);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      .branding-buildup-timeline .vc-logo svg{
        width: 100%;
        height: 100%;
      }

      /* Skeleton overlay (neutral) — fades out at Step 3 (5.4s) */
      @keyframes bbt-skelShimmer {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.45;
        }
      }
      .branding-buildup-timeline .skel{
        border-radius: 100px;
        background: var(--gray-200);
        animation: bbt-skelShimmer 1.6s ease-in-out infinite;
      }
      .branding-buildup-timeline .vc-skeleton{
        position: absolute;
        top: 5.7em;
        left: 0.95em;
        right: 0.95em;
        display: flex;
        flex-direction: column;
        gap: 0.32em;
        animation: bbt-fadeOut 0.4s ease 7.6s forwards;
        pointer-events: none;
      }
      .branding-buildup-timeline .sk-n{
        height: 0.8em;
        width: 66%;
        margin-bottom: 0.15em;
      }
      .branding-buildup-timeline .sk-s{
        height: 0.42em;
        width: 82%;
      }
      .branding-buildup-timeline .sk-s2{
        height: 0.42em;
        width: 64%;
      }
      .branding-buildup-timeline .sk-u{
        height: 0.42em;
        width: 46%;
        margin-top: 0.1em;
      }
      .branding-buildup-timeline .sk-div{
        height: 1px;
        width: 100%;
        background: var(--gray-200);
        margin: 0.45em 0 0.25em;
      }
      .branding-buildup-timeline .sk-c{
        height: 0.34em;
      }

      /* Name */
      .branding-buildup-timeline .vc-name-wrap{
        position: relative;
        height: 1.25em;
        flex-shrink: 0;
      }
      .branding-buildup-timeline .vc-name-thin{
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 1.02em;
        font-weight: 300;
        color: var(--gray-300);
        font-family: system-ui;
        opacity: 0;
        animation:
          bbt-fadeIn 0.4s ease 8s forwards,
          bbt-fadeOut 0.5s ease 11.4s forwards;
      }
      .branding-buildup-timeline .vc-name-bold{
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 1.02em;
        font-weight: 800;
        color: var(--vc-name);
        letter-spacing: -0.03em;
        opacity: 0;
        animation: bbt-fontMorphIn 0.65s cubic-bezier(0.34, 1.15, 0.64, 1) 11.4s
          forwards;
      }
      @keyframes bbt-fontMorphIn {
        0% {
          opacity: 0;
          transform: scale(0.96) translateY(3px);
          letter-spacing: 0.04em;
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
          letter-spacing: -0.03em;
        }
      }

      /* Quill text: subtitle + url (Step 3) */
      .branding-buildup-timeline .vc-subtitle{
        font-size: 0.5em;
        color: var(--vc-title);
        line-height: 1.4;
        font-weight: 600;
        margin-top: 0.45em;
        flex-shrink: 0;
        opacity: 0;
        animation: bbt-fadeIn 0.5s ease 8.3s forwards;
      }
      .branding-buildup-timeline .vc-url{
        font-size: 0.52em;
        color: var(--orange);
        font-weight: 700;
        margin-top: 0.3em;
        flex-shrink: 0;
        opacity: 0;
        animation: bbt-fadeIn 0.5s ease 8.5s forwards;
      }

      /* Divider (hr) */
      .branding-buildup-timeline .vc-divider{
        width: 100%;
        height: 1px;
        background: var(--gray-300);
        border: 0;
        margin: 0.7em 0 0.5em;
        flex-shrink: 0;
        opacity: 0;
        animation: bbt-fadeIn 0.4s ease 8.65s forwards;
      }

      /* Lower section: distributes contacts + social evenly down to buttons */
      .branding-buildup-timeline .vc-lower{
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0.45em 0 0.2em;
      }
      .branding-buildup-timeline .vc-citem{
        opacity: 0;
      }
      .branding-buildup-timeline .vc-citem.i1{
        animation: bbt-fadeIn 0.5s ease 8.8s forwards;
      }
      .branding-buildup-timeline .vc-citem.i2{
        animation: bbt-fadeIn 0.5s ease 8.95s forwards;
      }

      .branding-buildup-timeline .vc-contact-label{
        font-size: 0.36em;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--vc-title);
        text-transform: uppercase;
        margin-bottom: 0.3em;
      }
      .branding-buildup-timeline .vc-contact-row{
        display: flex;
        align-items: center;
        gap: 0.55em;
      }
      .branding-buildup-timeline .vc-cicon{
        width: 0.8em;
        height: 0.8em;
        fill: var(--orange);
        flex-shrink: 0;
      }
      .branding-buildup-timeline .vc-contact-text{
        font-size: 0.65em;
        color: #0a0a0a;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      /* Social — LinkedIn pill */
      .branding-buildup-timeline .vc-socials{
        display: flex;
        gap: 0.5em;
        opacity: 0;
        animation: bbt-fadeIn 0.5s ease 9.1s forwards;
      }
      .branding-buildup-timeline .social-linkedin{
        width: 2.5em;
        height: 2.5em;
        border-radius: 50%;
        border: 1.5px solid var(--orange);
        background: color-mix(in srgb, var(--orange) 5%, white);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .branding-buildup-timeline .social-linkedin svg{
        width: 1.05em;
        height: 1.05em;
        fill: var(--orange);
      }

      /* CTA buttons (Step 3) */
      .branding-buildup-timeline .vc-buttons{
        display: flex;
        flex-direction: column;
        gap: 0.4em;
        padding-top: 0.5em;
        flex-shrink: 0;
        opacity: 0;
        animation: bbt-fadeIn 0.6s ease 9.25s forwards;
      }
      .branding-buildup-timeline .vc-btn{
        border-radius: 100px;
        background: var(--orange);
        color: white;
        font-size: 0.44em;
        font-weight: 600;
        padding: 0.75em 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        box-shadow: 0 3px 12px rgba(255, 126, 12, 0.32);
      }
      .branding-buildup-timeline .vc-btn svg{
        width: 0.9em;
        height: 0.9em;
        fill: white;
        flex-shrink: 0;
      }

      /* ════════════════════════════════════ CALLOUTS ════════════════════════════════════ */
      .branding-buildup-timeline .callout{
        position: absolute;
        display: flex;
        align-items: center;
        gap: 0.5em;
        z-index: 30;
        opacity: 0;
        white-space: nowrap;
        left: 65%;
      }
      .branding-buildup-timeline .callout-dot{
        width: 0.42em;
        height: 0.42em;
        border-radius: 50%;
        background: var(--orange);
        flex-shrink: 0;
      }
      .branding-buildup-timeline .callout-line{
        width: 2.2em;
        height: 1.5px;
        background: var(--orange);
        flex-shrink: 0;
      }
      .branding-buildup-timeline .callout-text{
        font-size: 0.58em;
        font-weight: 600;
        color: var(--brand-700);
      }
      .branding-buildup-timeline .c-logo{
        top: 30%;
        animation: bbt-calloutIn 0.45s ease 2.4s forwards;
      }
      .branding-buildup-timeline .c-color{
        top: 25%;
        animation: bbt-calloutIn 0.45s ease 5.2s forwards;
      }
      .branding-buildup-timeline .c-font{
        top: 37.5%;
        animation: bbt-calloutIn 0.45s ease 11.6s forwards;
      }
      .branding-buildup-timeline .c-profile{
        top: 50%;
        animation: bbt-calloutIn 0.45s ease 8.4s forwards;
      }
      @keyframes bbt-calloutIn {
        from {
          opacity: 0;
          transform: translateX(12px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      /* ════════════════════════════════════ TAGLINE ════════════════════════════════════ */
      .branding-buildup-timeline .tagline{
        position: absolute;
        top: 9.5%;
        left: 43%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 30;
        opacity: 0;
        animation: bbt-fadeUp 0.9s ease 14.1s forwards;
        white-space: nowrap;
      }
      .branding-buildup-timeline .tag-main{
        font-size: 1.5em;
        font-weight: 700;
        color: var(--orange);
        letter-spacing: -0.025em;
      }
      .branding-buildup-timeline .tag-main span{
        color: var(--gray-900);
      }
      .branding-buildup-timeline .tag-sub{
        font-size: 1.1em;
        color: var(--gray-500);
        margin-top: 0.18em;
      }

      /* ════════════════════════════════════ SHARED ════════════════════════════════════ */
      @keyframes bbt-fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes bbt-fadeOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      @keyframes bbt-fadeUp {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(9px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
      @keyframes bbt-fadeDown {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(-9px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
      @keyframes bbt-slideInLeft {
        from {
          opacity: 0;
          transform: translateX(-18px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

/* ── Pillar embed: phone + callouts (no steps, no badge/tagline) ── */
.branding-buildup-section .branding-buildup-timeline .steps-panel,
.branding-buildup-section .branding-buildup-timeline .headline,
.branding-buildup-section .branding-buildup-timeline .tagline {
    display: none;
}

.branding-buildup-section .branding-buildup-timeline .phone-wrapper {
    left: 40%;
}

.branding-buildup-section .branding-buildup-timeline .phone {
    width: 13.5em;
}

.branding-buildup-section .branding-buildup-timeline .glow {
    left: 40%;
    width: 22em;
    height: 22em;
}

.branding-buildup-section .branding-buildup-timeline .callout {
    left: 58%;
}

.branding-buildup-section .branding-buildup-timeline .callout-line {
    width: 1.6em;
}

.branding-buildup-section .branding-buildup-timeline .callout-text {
    font-size: 0.62em;
}

@container branding-buildup (max-width: 420px) {
    .branding-buildup-section .branding-buildup-timeline .scene {
        font-size: clamp(6px, 2.25cqi, 10px);
    }

    .branding-buildup-section .branding-buildup-timeline .phone-wrapper {
        left: 42%;
    }

    .branding-buildup-section .branding-buildup-timeline .phone {
        width: 12em;
    }

    .branding-buildup-section .branding-buildup-timeline .callout {
        left: 55%;
    }

    .branding-buildup-section .branding-buildup-timeline .callout-text {
        font-size: 0.55em;
    }
}