@charset "utf-8";
/* CSS Document */

  :root{
    /* tweak colors here */
    --navy:#0b2641;
    --orange:#D3430D;
    --gold:#265BF7;
    --bubble-radius:18px;
  }

  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin:32px; color:#121212;}

  .timeline{
    display:flex;
    gap:28px;            /* space between milestones */
    align-items:flex-start;
    flex-wrap:wrap;      /* stack on small screens */
  }
  .milestone{
    flex:1 1 260px;      /* grow/shrink; min width */
    max-width:100%;
  }

  /* The colored “bubble” */
  .label{
    position:relative;
    padding:16px 20px;
    border-radius:var(--bubble-radius);
    color:#fff;
    text-align:center;
    font-weight:800;
    line-height:1.25;
    box-shadow:0 1px 0 rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.08);
  }
  /* The downward triangle */
  .label::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;
    
    width:0; height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:12px solid currentColor; /* default, overridden by background via mask below */
  }
  /* Make the triangle match the background color exactly */
  .label.navy{ background:var(--navy); color:#fff; }
  .label.navy::after{ border-top-color:var(--navy); }

  .label.orange{ background:var(--orange); color:#fff; }
  .label.orange::after{ border-top-color:var(--orange); }

  .label.gold{ background:var(--gold); color:#fff; font-weight:900; padding-bottom:36px;} /* black text for contrast like your mock */
  .label.gold::after{ border-top-color:var(--gold); }

  /* Content below each bubble */
  .body{
    margin-top:22px;     /* space to clear triangle */
    font-size:0.95rem;
    line-height:1.45;
    text-align: center;
    font-weight: bold;
  }

  /* Optional: keep the three bubbles visually similar in height on wide screens */
  @media (min-width:900px){
    .label{ min-height:56px; display:flex; align-items:center; justify-content:center; }
  }