/* COMPLLY READY ALL YEAR — Our apps section (owner chose Option B, 18 Oct 2026): the company's year,
   projects coming and going over it, Ready running underneath every month. */
.ryb { padding: clamp(40px, 5vw, 70px) 0 clamp(54px, 6vw, 86px); }
      .ry-tag { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 12px;
        letter-spacing: .12em; text-transform: uppercase; color: var(--p-ready); background: rgba(167,139,250,.12);
        border: 1px solid rgba(167,139,250,.35); padding: 5px 12px; border-radius: 999px; }
      .ry-head { text-align: center; margin: 0 auto 26px; }
      .ry-head h3 { color: var(--white); font-size: clamp(26px, 3vw, 40px); margin: 0; letter-spacing: -.03em; }
      .ry-head p { color: var(--slate-400); margin: 10px 0 0; }
      .ry-head p b { color: var(--slate-200); font-weight: 600; }
      .ry-year { background: rgba(255,255,255,.025); border: 1px solid rgba(148,163,184,.16); border-radius: 22px; padding: 22px 24px 18px; }
      .ry-months { display: grid; grid-template-columns: 150px repeat(12, minmax(0,1fr)); gap: 6px; font-size: 12px; color: var(--slate-400); text-align: center; }
      .ry-months span:first-child { text-align: left; }
      .ry-row { display: grid; grid-template-columns: 150px repeat(12, minmax(0,1fr)); gap: 6px; align-items: center; margin-top: 10px; }
      .ry-row__lbl { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--slate-200); }
      .ry-row__lbl span { display: block; font-weight: 500; font-size: 11.5px; color: var(--slate-400); font-family: var(--font-body, inherit); }
      .ry-bar { height: 34px; border-radius: 10px; display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--white); overflow: hidden; white-space: nowrap; }
      .ry-bar--ready { background: linear-gradient(90deg, rgba(167,139,250,.55), rgba(167,139,250,.32)); border: 1px solid rgba(167,139,250,.6); }
      .ry-bar--proj { background: linear-gradient(90deg, rgba(59,130,246,.5), rgba(34,211,238,.32)); border: 1px solid rgba(59,130,246,.55); }
      .ry-bar--proj b { font-weight: 700; margin-right: 6px; }
      .ry-events { display: grid; grid-template-columns: 150px repeat(12, minmax(0,1fr)); gap: 6px; margin-top: 8px; }
      .ry-ev { font-size: 11.5px; line-height: 1.3; color: #ddd6fe; text-align: center; }
      .ry-ev i { display: block; width: 10px; height: 10px; margin: 0 auto 4px; border-radius: 50%; background: var(--p-ready); box-shadow: 0 0 0 4px rgba(167,139,250,.2); }
      .ry-yearfoot { margin-top: 16px; font-size: 13.5px; color: var(--slate-300); text-align: center; }
      .ry-yearfoot b { color: var(--white); }
      @media (max-width: 900px) {
        .ry-year { overflow-x: auto; }
        .ry-months, .ry-row, .ry-events { min-width: 760px; }
      }
      /* Phones: the whole year fits the screen, no sideways scroll. Month initials across the top, each
         row's name above its bar, bar text wraps instead of being cut off, and the milestones become a
         dated list under the year (owner, 23 Oct 2026: "a tidier phone layout"). The empty first
         column stays in the grid at zero width so the inline grid-column values still line up. */
      @media (max-width: 640px) {
        .ry-year { overflow-x: visible; padding: 16px 12px 14px; border-radius: 18px; }
        .ry-months, .ry-row, .ry-events { min-width: 0; grid-template-columns: 0 repeat(12, minmax(0,1fr)); column-gap: 3px; }
        .ry-months span { font-size: 0; }
        .ry-months span::after { content: attr(data-s); font-size: 11px; }
        .ry-row { row-gap: 5px; margin-top: 12px; }
        .ry-row__lbl { grid-column: 1 / -1; font-size: 13px; }
        .ry-row__lbl span { display: inline; margin-left: 6px; font-size: 12px; }
        .ry-bar { height: auto; min-height: 30px; padding: 6px 8px; font-size: 11.5px; line-height: 1.3; white-space: normal; border-radius: 8px; }
        .ry-events { display: block; margin-top: 14px; }
        .ry-events > span:first-child { display: none; }
        .ry-ev { display: flex; align-items: baseline; gap: 8px; text-align: left; font-size: 13px; margin-top: 8px; }
        .ry-ev::before { content: attr(data-m); flex: 0 0 30px; font-weight: 700; color: var(--slate-300); font-size: 12px; }
        .ry-ev i { flex: 0 0 8px; width: 8px; height: 8px; margin: 0; align-self: center; box-shadow: 0 0 0 3px rgba(167,139,250,.2); }
      }