/**
 * File: css/changelog-desktop.css
 *
 * Desktop Updates page (>= 992px). Companion to css/changelog-mobile.css: the
 * same palette, the same release manifest and the same filter state, laid out
 * as a three-column hero, a filter bar and a timeline of release rows.
 *
 * Every rule is inside @media (min-width: 992px) except the two that hide the
 * legacy markup and the one that keeps .cl-desktop out of the mobile layout,
 * so the two breakpoints cannot reach into each other.
 */

/* The legacy #changelog section and its paginator are superseded at every
   width now — mobile renders .cl-mobile, desktop renders .cl-desktop. The rule
   is unconditional rather than per-breakpoint so no viewport can fall between
   the two and show the old page. !important on the paginator is required, not
   defensive: js/changelog-pagination.js writes an inline style.display on it. */
body.changelog-page #changelog,
body.changelog-page .page-pagination,
body.changelog-page .page-pagination + hr.divider { display: none !important; }

.cl-desktop { display: none; }

@media (min-width: 992px) {
  .cl-desktop {
    display: block;
    /* The site header is shared chrome and it wraps to two rows below 1200px —
       and at a different width again in Arabic, whose nav is wider. So the top
       gap is measured from the header's own lowest link on mount rather than
       guessed per breakpoint; this value is only the fallback for no-JS. */
    padding: var(--cld-top, 150px) 0 110px;
    background: var(--cld-bg);
    color: var(--cld-ink);

    --cld-bg: #FCFBFD;
    --cld-ink: #0C0B2B;
    --cld-ink-2: #45445F;
    --cld-ink-3: #77768D;
    --cld-coral: #FF3B61;
    --cld-violet: #7357F6;
    --cld-blue: #4C6FE7;
    --cld-line: rgba(12, 11, 43, .08);
    --cld-line-2: rgba(12, 11, 43, .055);
    --cld-card-radius: 20px;
    /* Flipped to -1 under html.lang-ar; transform is physical, direction is not. */
    --cld-dir: 1;
  }

  .cl-desktop__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 32px;
  }

  /* Accent per row and per hero pill. Platform drives the colour and store
     releases — the two where nothing shipped to a device — take the cool blue,
     which is the same tone rule css/changelog-mobile.css uses. */
  .cld-ios     { --cld-accent: #FF3B61; --cld-accent-soft: rgba(255, 59, 97, .1); }
  .cld-android { --cld-accent: #7357F6; --cld-accent-soft: rgba(115, 87, 246, .1); }
  .cld-neutral { --cld-accent: #4C6FE7; --cld-accent-soft: rgba(76, 111, 231, .1); }

  /* --- hero -------------------------------------------------------------- */

  /* Three columns split by hairlines, as in the reference: the headline takes
     the room it needs, the latest release and the highlights are sized by
     their content so the dividers land tight against them. */
  .cld-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    column-gap: 46px;
  }

  .cld-hero__latest,
  .cld-hero__highlights {
    padding-inline-start: 46px;
    border-inline-start: 1px solid var(--cld-line);
  }

  .cld-hero__eyebrow {
    margin: 0 0 18px;
    color: var(--cld-coral);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
  }

  .cld-hero__title {
    max-width: 11ch;
    margin: 0;
    color: var(--cld-ink);
    font-size: clamp(40px, 3.9vw, 54px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .cld-hero__dot { color: var(--cld-coral); }

  .cld-hero__lede {
    max-width: 30ch;
    margin: 22px 0 0;
    color: var(--cld-ink-2);
    font-size: 15.5px;
    line-height: 1.55;
  }

  /* Latest column */
  .cld-hero__latest-label {
    display: block;
    margin-bottom: 16px;
    color: var(--cld-coral);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
  }

  .cld-hero__latest-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* Where the newest release has no version this collapses to nothing rather
     than inventing one; the date below still carries the identity. */
  .cld-hero__latest-version {
    color: var(--cld-ink);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .cld-hero__latest-version:empty { display: none; }

  .cld-hero__latest-platform {
    padding: 7px 15px 8px;
    border-radius: 999px;
    background: var(--cld-accent-soft);
    color: var(--cld-accent);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.1;
  }

  .cld-hero__latest-date {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    color: var(--cld-ink-2);
    font-size: 14.5px;
    line-height: 1.2;
  }

  .cld-hero__latest-date svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--cld-ink-3);
  }

  /* Highlights column */
  .cld-hero__highlights {
    display: grid;
    gap: 18px;
    margin: 0;
    padding-block: 0;
    list-style: none;
  }

  .cld-hl {
    display: flex;
    align-items: center;
    gap: 14px;
    /* The resting state is the finished one; the reveal class below is what
       hides it, and only the script adds that. With JS off or motion turned
       down all three rows are simply here. */
  }

  .cld-hl__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--cld-accent-soft);
    color: var(--cld-accent);
  }

  .cld-hl__icon svg { width: 21px; height: 21px; }

  .cld-hl__tag {
    display: block;
    color: var(--cld-ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
  }

  .cld-hl__text {
    display: block;
    margin-top: 6px;
    color: var(--cld-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* One-shot sequential reveal: NEW, then IMPROVED, then FIXED, 145ms apart.
     opacity and transform only, and the delay is a custom property so the
     stagger is data rather than three near-identical rules. */
  .cld-hero__highlights.cld-reveal .cld-hl {
    opacity: 0;
    transform: translateY(10px);
  }

  .cld-hero__highlights.cld-reveal .cld-hl.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 420ms cubic-bezier(.22, .61, .36, 1) var(--cld-seq, 0ms),
      transform 420ms cubic-bezier(.22, .61, .36, 1) var(--cld-seq, 0ms);
  }

  /* --- filter bar -------------------------------------------------------- */

  .cld-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 58px;
    padding: 13px 18px;
    border: 1px solid var(--cld-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 11, 43, .03), 0 12px 30px -20px rgba(12, 11, 43, .18);
  }

  /* The pill is one element sized and moved from JS-measured geometry rather
     than three equal columns: the desktop segments are content-width, so a
     Thai or Russian label makes them genuinely different widths. */
  .cld-seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    isolation: isolate;
  }

  .cld-seg__pill {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 0;
    width: var(--cld-pill-w, 0);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF4E70 0%, #FF3B61 55%, #F92C58 100%);
    box-shadow: 0 6px 16px rgba(255, 59, 97, .3);
    transform: translate3d(calc(var(--cld-pill-x, 0px) * var(--cld-dir)), 0, 0);
    opacity: 0;
    pointer-events: none;
  }

  /* Gated on is-ready, added once the pill has been measured, so it is painted
     in place instead of sliding in from the left on the first frame. */
  .cld-seg.is-ready .cld-seg__pill {
    opacity: 1;
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1),
                width 320ms cubic-bezier(.22, .61, .36, 1);
  }

  .cld-seg__btn {
    position: relative;
    z-index: 1;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--cld-ink-2);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 220ms cubic-bezier(.22, .61, .36, 1);
  }

  .cld-seg__btn[aria-selected="true"] { color: #fff; font-weight: 700; }

  .cld-seg__btn:focus-visible,
  .cld-year select:focus-visible,
  .cld-more:focus-visible {
    outline: 2px solid var(--cld-coral);
    outline-offset: 3px;
  }

  /* A real <select>: it filters, it is keyboard and screen-reader correct for
     free, and it needs no bespoke listbox. Only the chrome is restyled. */
  .cld-year { position: relative; display: flex; align-items: center; }

  .cld-year select {
    padding: 10px 40px 10px 18px;
    border: 1px solid var(--cld-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cld-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  html.lang-ar .cld-year select { padding: 10px 18px 10px 40px; }

  .cld-year__chevron {
    position: absolute;
    inset-inline-end: 16px;
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-right: 1.7px solid var(--cld-ink-3);
    border-bottom: 1.7px solid var(--cld-ink-3);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* --- the feed ---------------------------------------------------------- */

  .cld-feed {
    position: relative;
    margin-top: 34px;
    /* The rail carries the date, the version and the timeline; the card takes
       the rest. */
    display: grid;
    gap: 16px;
  }

  /* The timeline line itself. It is drawn on the feed rather than per row, so
     it is one unbroken hairline whatever the rows do, and it stops short at
     both ends instead of running into the filter bar and the button. */
  .cld-feed::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: var(--cld-line-x, 163px);
    width: 1px;
    background: var(--cld-line);
    pointer-events: none;
  }

  /* One delicate sweep down the line when the feed first comes into view.
     It runs once — scaleY on a gradient, no loop, nothing left animating. */
  .cld-feed::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: calc(var(--cld-line-x, 163px) - 1px);
    width: 3px;
    background: linear-gradient(180deg,
      rgba(255, 59, 97, 0) 0%, rgba(255, 59, 97, .55) 18%,
      rgba(168, 116, 247, .6) 52%, rgba(115, 87, 246, .4) 78%,
      rgba(115, 87, 246, 0) 100%);
    opacity: 0;
    transform-origin: top center;
    pointer-events: none;
  }

  .cld-feed.is-lit::after {
    animation: cld-line-sweep 1100ms cubic-bezier(.33, .72, .36, 1) 1 both;
  }

  @keyframes cld-line-sweep {
    0%   { opacity: 0;   transform: scaleY(0); }
    22%  { opacity: .95; }
    70%  { opacity: .75; transform: scaleY(1); }
    100% { opacity: 0;   transform: scaleY(1); }
  }

  .cld-row {
    display: grid;
    grid-template-columns: var(--cld-rail, 200px) minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }

  .cld-row[hidden] { display: none !important; }

  .cld-row__rail {
    position: relative;
    padding: 22px 40px 22px 0;
  }

  html.lang-ar .cld-row__rail { padding: 22px 0 22px 40px; }

  .cld-row__date {
    display: block;
    color: var(--cld-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
  }

  .cld-row__version {
    display: block;
    margin-top: 12px;
    color: var(--cld-accent);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .cld-row__pill {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 13px 6px;
    border-radius: 999px;
    background: var(--cld-accent-soft);
    color: var(--cld-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
  }

  /* The dot sits on the line, which is why its offset is the same custom
     property the line uses. */
  .cld-row__dot {
    position: absolute;
    top: 30px;
    inset-inline-start: calc(var(--cld-line-x, 163px) - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cld-accent);
    box-shadow: 0 0 0 4px var(--cld-bg);
    opacity: .28;
    transform: scale(.7);
  }

  /* The dots come up one after another down the line, a calm signal rather
     than a string of lights: they settle at .55 and only the open row's dot
     goes full strength. */
  .cld-feed.is-lit .cld-row__dot {
    animation: cld-dot-wake 620ms cubic-bezier(.22, .61, .36, 1) var(--cld-dot-seq, 0ms) 1 both;
  }

  @keyframes cld-dot-wake {
    0%   { opacity: .28; transform: scale(.7); }
    45%  { opacity: 1;   transform: scale(1.18); }
    100% { opacity: .55; transform: scale(1); }
  }

  .cld-row.is-open .cld-row__dot {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--cld-bg), 0 0 0 7px var(--cld-accent-soft);
    animation: none;
  }

  /* --- release card ------------------------------------------------------ */

  .cld-card {
    overflow: hidden;
    border: 1px solid var(--cld-line);
    border-radius: var(--cld-card-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 11, 43, .03), 0 14px 34px -22px rgba(12, 11, 43, .2);
    transition: box-shadow 240ms cubic-bezier(.22, .61, .36, 1),
                border-color 240ms cubic-bezier(.22, .61, .36, 1);
  }

  .cld-row.is-open .cld-card,
  .cld-card:hover {
    border-color: rgba(12, 11, 43, .13);
    box-shadow: 0 1px 2px rgba(12, 11, 43, .04), 0 18px 40px -20px rgba(12, 11, 43, .26);
  }

  /* A real button, so the whole head is clickable, keyboard-operable and
     focusable with no synthesised key handling. */
  .cld-card__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34%;
    align-items: stretch;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .cld-card__head:focus-visible {
    outline: 2px solid var(--cld-coral);
    outline-offset: -3px;
    border-radius: var(--cld-card-radius);
  }

  .cld-card__copy {
    display: block;
    padding: 24px 28px;
  }

  .cld-card__type {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--cld-accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .cld-card__type-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--cld-accent-soft);
  }

  .cld-card__type-badge svg { width: 12px; height: 12px; }

  .cld-card__title {
    display: block;
    margin: 13px 0 0;
    max-width: 26ch;
    color: var(--cld-ink);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.16;
    text-wrap: balance;
  }

  /* No character cap: the column is already a comfortable measure at this
     width, and a cap only left a wedge of empty card beside the text. */
  .cld-card__summary {
    display: block;
    margin: 10px 0 0;
    color: var(--cld-ink-2);
    font-size: 14.5px;
    line-height: 1.5;
  }

  /* The affordance: a quiet circular chevron that turns when the row opens. */
  .cld-card__chevron {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-end: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cld-line);
    border-radius: 50%;
    background: #fff;
    color: var(--cld-ink-2);
    box-shadow: 0 4px 12px rgba(12, 11, 43, .07);
    transform: translateY(-50%);
    transition: transform 280ms cubic-bezier(.22, .61, .36, 1),
                color 240ms ease, border-color 240ms ease;
  }

  .cld-card__chevron svg { width: 15px; height: 15px; }

  .cld-row.is-open .cld-card__chevron {
    transform: translateY(-50%) rotate(180deg);
    border-color: var(--cld-accent-soft);
    color: var(--cld-accent);
  }

  /* --- the colour panel --------------------------------------------------- */

  /* No image, no mockup, no asset: a tinted field, one or two blurred circles
     and a large translucent version or date. */
  .cld-card__panel {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    min-height: 150px;
    background: linear-gradient(150deg, #FBFAFC 0%, #F3F1F7 100%);
  }

  .cld-card__panel::before,
  .cld-card__panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  .cld-card__panel::before {
    top: -30%;
    inset-inline-end: -18%;
    width: 62%;
    padding-bottom: 62%;
  }

  .cld-card__panel::after {
    bottom: -34%;
    inset-inline-start: -14%;
    width: 46%;
    padding-bottom: 46%;
  }

  .cld-row.cld-ios .cld-card__panel {
    background: linear-gradient(150deg, #FFF3F6 0%, #FFE6ED 55%, #FFDCE6 100%);
  }

  .cld-row.cld-ios .cld-card__panel::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 58%, rgba(255, 255, 255, 0) 76%);
  }

  .cld-row.cld-ios .cld-card__panel::after {
    background: radial-gradient(circle, rgba(255, 59, 97, .26), rgba(255, 59, 97, .06) 58%, rgba(255, 59, 97, 0) 76%);
  }

  .cld-row.cld-android .cld-card__panel {
    background: linear-gradient(150deg, #6247E8 0%, #7357F6 48%, #8E70FF 100%);
  }

  .cld-row.cld-android .cld-card__panel::before {
    background: radial-gradient(circle, rgba(206, 193, 255, .55), rgba(206, 193, 255, .14) 58%, rgba(206, 193, 255, 0) 76%);
  }

  .cld-row.cld-android .cld-card__panel::after {
    background: radial-gradient(circle, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 58%, rgba(255, 255, 255, 0) 76%);
  }

  /* Store-metadata releases: milky, with hairline rings rather than a wash. */
  .cld-row.cld-neutral .cld-card__panel {
    background: linear-gradient(150deg, #FBFBFE 0%, #F2F3FB 100%);
  }

  .cld-row.cld-neutral .cld-card__panel::before {
    top: -26%;
    inset-inline-end: -14%;
    width: 56%;
    padding-bottom: 56%;
    border: 1px solid rgba(76, 111, 231, .16);
  }

  .cld-row.cld-neutral .cld-card__panel::after {
    bottom: -28%;
    inset-inline-start: -10%;
    width: 40%;
    padding-bottom: 40%;
    border: 1px solid rgba(76, 111, 231, .1);
  }

  .cld-card__bignum {
    position: absolute;
    inset-inline-end: 9%;
    bottom: 11%;
    max-width: 84%;
    color: rgba(12, 11, 43, .13);
    font-size: 30px;            /* fallback where container queries are absent */
    font-size: 19cqw;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .82;
    font-variant-numeric: tabular-nums;
    user-select: none;
  }

  .cld-row.cld-ios .cld-card__bignum     { color: rgba(255, 59, 97, .26); }
  .cld-row.cld-android .cld-card__bignum { color: rgba(255, 255, 255, .32); }
  .cld-row.cld-neutral .cld-card__bignum { color: rgba(76, 111, 231, .18); }

  /* --- the dropdown ------------------------------------------------------- */

  /* The same height mechanism the mobile show-more uses: grid-template-rows
     0fr -> 1fr with the clip supplying the overflow, so the content keeps its
     own sizes and nothing is scaled into place. Collapsed it is
     visibility:hidden, which takes the list out of the tab order; the
     visibility transition is delayed by the length of the collapse so the
     items stay on screen while the height runs out. */
  .cld-card__drop {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows 300ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear 300ms;
  }

  .cld-row.is-open .cld-card__drop {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
      grid-template-rows 300ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s;
  }

  .cld-card__drop-clip { min-height: 0; overflow: hidden; }

  .cld-card__drop-inner {
    padding: 4px 30px 28px;
    border-top: 1px solid var(--cld-line-2);
    margin-top: 24px;
  }

  .cld-card__drop-title {
    margin: 0 0 16px;
    padding-top: 22px;
    color: var(--cld-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
  }

  .cld-card__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cld-card__items > li {
    position: relative;
    padding-inline-start: 28px;
    color: var(--cld-ink-2);
    font-size: 14px;
    line-height: 1.45;
  }

  .cld-card__mark {
    position: absolute;
    top: .05em;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cld-accent-soft);
    color: var(--cld-accent);
  }

  .cld-card__mark svg { width: 10px; height: 10px; }

  /* --- load more ---------------------------------------------------------- */

  .cld-more-wrap { display: flex; justify-content: center; margin-top: 34px; }

  .cld-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 34px;
    border: 1px solid var(--cld-line);
    border-radius: 999px;
    background: #fff;
    color: var(--cld-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 2px rgba(12, 11, 43, .03), 0 12px 28px -20px rgba(12, 11, 43, .2);
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }

  .cld-more:hover {
    border-color: rgba(12, 11, 43, .16);
    box-shadow: 0 1px 2px rgba(12, 11, 43, .04), 0 16px 34px -18px rgba(12, 11, 43, .26);
  }

  .cld-more[hidden] { display: none !important; }

  .cld-more__chevron {
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
  }

  .cld-empty {
    margin: 40px 0 0;
    color: var(--cld-ink-3);
    font-size: 15px;
    text-align: center;
  }

  .cld-empty[hidden] { display: none !important; }

  /* --- narrower desktops --------------------------------------------------- */

  @media (max-width: 1199.98px) {
    .cld-hero { column-gap: 32px; }
    .cld-hero__latest,
    .cld-hero__highlights { padding-inline-start: 32px; }
    .cld-hero__title { font-size: clamp(34px, 3.6vw, 44px); }
    .cld-hero__latest-version { font-size: 32px; }
    .cld-hl__icon { width: 40px; height: 40px; border-radius: 12px; }
    .cld-row { grid-template-columns: var(--cld-rail, 168px) minmax(0, 1fr); }
    .cld-row__rail { padding-inline-end: 28px; }
    .cld-card__head { grid-template-columns: minmax(0, 1fr) 30%; }
    .cld-card__title { font-size: 22px; }
    .cld-card__items { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Arabic is the only RTL locale and the site switches direction in CSS — there
   is no dir attribute anywhere. Mirrors the pattern at css/our-models.css:571.
   --cld-dir flips the segmented pill's travel, because transform stays
   physical while direction does not. */
@media (min-width: 992px) {
  html.lang-ar body.changelog-page .cl-desktop {
    direction: rtl;
    text-align: right;
    --cld-dir: -1;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  /* The module already declines to add cld-reveal or is-lit under this
     preference, so all three highlight rows and every dot are simply present.
     This block is what catches the preference being switched on after load. */
  .cld-hero__highlights.cld-reveal .cld-hl,
  .cld-hero__highlights.cld-reveal .cld-hl.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* A flat, static line: the sweep is removed outright rather than parked
     part-way down it, and the dots hold one resting strength. */
  .cld-feed::after,
  .cld-feed.is-lit::after { display: none; }

  .cld-feed.is-lit .cld-row__dot,
  .cld-row__dot {
    opacity: .55;
    transform: scale(1);
    animation: none;
  }

  .cld-row.is-open .cld-row__dot { opacity: 1; transform: scale(1); }

  /* The dropdown still opens and closes; it arrives instead of sliding. */
  .cld-card__drop,
  .cld-row.is-open .cld-card__drop { transition: visibility 0s; }

  .cld-seg.is-ready .cld-seg__pill,
  .cld-seg__btn,
  .cld-card,
  .cld-card__chevron,
  .cld-more { transition: none; }
}