/* Product updates — the /learn/product-updates feed and the /product-updates/{slug}
   detail pages. Loaded only by those pages, on top of style.min.188.css,
   site-fixes.css and dark-site.css. Colours come from the dark theme's custom
   properties where one exists, so a later light variant only has to restate those.

   Cards are a filled navy panel with no visible border, per the brand rules:
   the panel edge is the separation, not a rule. */

:root{
  --pu-card:#1f3460;
  --pu-card-hover:#264077;
  --pu-page:#08142e;
  --pu-text:#f2f4fa;
  --pu-muted:#a5aebf;
  --pu-accent:#50bcbd;
  --pu-accent-strong:#159c9d;
  --pu-accent-soft:#dcf2f2;
  --pu-negative:#e73458;
}

/* ---------------------------------------------------------------- tab row */

/* The four-tab row used the full container width with space-between, which puts
   two tabs at opposite ends of a 1440px page. Group them at the start instead. */
.Tabs--learn{justify-content:flex-start;overflow-x:auto}
.Tabs--learn .Tab{min-width:0;padding:0 28px 0 0;text-align:left;font-size:1.7rem}
.Tabs--learn .Tab:first-child{padding-left:0}
@media(max-width:47.9375em){
  .Tabs--learn{margin-top:32px;padding-bottom:16px}
  .Tabs--learn .Tab{font-size:1.6rem;padding-right:24px}
}

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

/* The hub's page header is sized for the three-line sentence /learn uses as its
   h1. This page keeps "Product updates" as its h1 — it is the page's name, and
   it matches the tab and the breadcrumb — so the supporting line carries the
   rest of the space. */
.PageLead{max-width:720px;margin:20px auto 0;font-size:1.8rem;line-height:1.7;color:#d2d6df}
@media(max-width:47.9375em){.PageLead{font-size:1.6rem;padding:0 20px}}

/* ------------------------------------------------------------- breadcrumb */

.Breadcrumb{margin:32px 0 0;font-size:1.4rem;color:var(--pu-muted)}
/* The breadcrumb, the filter and the feed are one section, so they share a
   .Container instead of stacking three of them — each boundary costs 40px of
   padding, which left the breadcrumb floating in a band of its own once the
   intro line moved up into the hero. */
.UpdatesSection .Breadcrumb{margin:0 0 24px}
.Breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* The base stylesheet gives every list marker position:absolute;left:-20px, so a
   separator that only changes `content` lands outside the page. Put it back in
   flow. */
.Breadcrumb-list li:before{display:none}
.Breadcrumb-list li+li:before{content:"›";display:inline;position:static;left:auto;
  margin-right:8px;color:var(--pu-muted);font-weight:600}
.Breadcrumb a{color:var(--pu-muted);text-decoration:none}
.Breadcrumb a:hover,.Breadcrumb a:focus{color:var(--pu-accent);text-decoration:underline}
.Breadcrumb [aria-current="page"]{color:var(--pu-text)}

/* ------------------------------------------------------------------ chips */

.Chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.Chips li:before{display:none}
.Chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;
  font-size:1.3rem;font-weight:600;line-height:1.5;white-space:nowrap}
.Chip--area{background:#142447;color:#d2d6df}
.Chip--new{background:var(--pu-accent);color:#08142e}
.Chip--improved{background:#b9e4e5;color:#08142e}
.Chip--fixed,.Chip--deprecated{background:var(--pu-negative);color:#fff}

/* Filter chips are buttons, so they need their own resting and pressed state. */
.Chip--filter{background:transparent;color:#d2d6df;border:1px solid #4c5d80;cursor:pointer;
  font-family:inherit;transition:background-color .15s,color .15s,border-color .15s}
.Chip--filter:hover{border-color:var(--pu-accent);color:var(--pu-accent)}
.Chip--filter[aria-pressed="true"]{background:var(--pu-accent);border-color:var(--pu-accent);color:#08142e}

/* --------------------------------------------------------- coming soon */

/* The roadmap strip, above and apart from the feed. Calmer than a published
   card on purpose: flat navy, no illustration, no hover lift, and nothing that
   invites a click. Nothing here has shipped, so nothing here behaves like a
   link. */
.ComingSoon{margin:0 0 48px}
.ComingSoon-title{margin:0 0 6px;font-size:2.4rem;color:var(--pu-text)}
.ComingSoon-intro{margin:0 0 20px;font-size:1.5rem;line-height:1.6;color:var(--pu-muted)}
/* Three cards plus a sliver of the fourth. A scroller that ends flush on the
   third card looks like a complete row, and nobody scrolls a row they think
   they have already read; the overlay scrollbars most people have are not a
   cue on their own. */
.ComingSoon-list{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 70px) / 3.25);
  gap:20px;margin:0;padding:4px 4px 20px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#405275 transparent}
/* A thin, rounded, low-contrast bar on a transparent track, rather than the
   platform default that reads as a browser control sitting on the page. Both
   syntaxes are set because neither covers every engine: scrollbar-width and
   scrollbar-color for Firefox, ::-webkit-scrollbar for Chromium and Safari. */
.ComingSoon-list::-webkit-scrollbar{height:6px}
/* Chromium still draws stepper arrows at both ends unless they are turned off,
   which is the most dated part of the default bar. */
.ComingSoon-list::-webkit-scrollbar-button{display:none;width:0;height:0}
.ComingSoon-list::-webkit-scrollbar-track{background:transparent}
.ComingSoon-list::-webkit-scrollbar-thumb{background:#405275;border-radius:999px}
.ComingSoon-list::-webkit-scrollbar-thumb:hover{background:var(--pu-accent)}
.ComingSoon-list>li:before{display:none}
/* A scroll container is only keyboard-reachable if it can take focus. */
.ComingSoon-list:focus-visible{outline:2px solid #79e0df;outline-offset:2px}
.ComingSoon-card{display:flex;flex-direction:column;gap:10px;margin:0;padding:22px 24px;
  border-radius:16px;background:var(--pu-card);scroll-snap-align:start}
/* Three chips have to fit a card a third of the container wide, so they run a
   size down from the ones on a published card. */
.ComingSoon-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ComingSoon-meta .Chip{padding:3px 10px;font-size:1.2rem}
.ComingSoon-heading{margin:0;font-size:1.8rem;font-weight:700;line-height:1.35;color:var(--pu-text)}
.ComingSoon-teaser{margin:0;font-size:1.5rem;line-height:1.6;color:#d2d6df}
.ComingSoon-notify{margin-top:auto;padding-top:6px;align-self:flex-start;font-size:1.4rem;
  font-weight:600;color:var(--pu-accent)}
.ComingSoon-notify:hover,.ComingSoon-notify:focus{text-decoration:underline}

/* The "Coming soon" chip. The brief offered a #DCF2F2 pill with #159C9D text or
   a #50BCBD outline on navy; the pill measures 2.87:1, so it fails AA outright
   and this is the other one, at 5.39:1 on the card. Coral is never used here:
   an unreleased feature is not a negative context. */
.Chip--soon{background:transparent;border:1px solid var(--pu-accent);color:var(--pu-accent)}

@media(max-width:63.9375em){
  .ComingSoon-list{grid-auto-columns:minmax(0,88%)}
}
@media(max-width:47.9375em){
  .ComingSoon-list{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;
    scroll-snap-type:none}
}

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

.UpdatesFeed-title{margin:0 0 20px;font-size:2.4rem;color:var(--pu-text)}


/* One full-width column by default: with the Subscribe panel switched off
   there is nothing to put beside the feed, and a 2fr column with empty space
   to the right of it is just a narrower feed.
   `display:contents` lets the cards be grid items of this grid while keeping
   the list markup around them. */
.UpdatesLayout{display:grid;grid-template-columns:minmax(0,1fr);column-gap:20px;row-gap:24px}
/* With the panel on, the two share one grid rather than sitting in two
   separate columns. The panel goes in the same row as the first card, so the
   row height governs both and their top and bottom edges match whatever either
   one happens to contain. */
.UpdatesLayout--withPanel{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.Updates{display:contents;margin:0;padding:0;list-style:none}
/* Each card is alone in its row, so the row takes the card's height — except
   row one, which is as tall as the taller of the card and the panel. Both are
   made to fill it, so the two always end on the same line.
   The margin matters: the base stylesheet puts margin-bottom:5px on every li,
   a grid row sizes to the item's margin box, and stretch stretches that margin
   box — which left the card's border box 5px short of the row. Row spacing is
   row-gap's job here, so drop the margin. */
.Updates>li{grid-column:1;display:grid;margin:0}
.Updates-empty{grid-column:1}
/* An author `display` on the item beats the user-agent [hidden] rule, so giving
   the card a display value stopped the filter from hiding anything. Restate it. */
.Updates>li[hidden],.Updates-empty[hidden]{display:none}
.UpdatesLayout--withPanel .Subscribe{grid-column:2;grid-row:1}
.Updates>li:before{display:none}
.Update{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--pu-card);border-radius:16px;
  overflow:hidden;transition:transform .2s,background-color .2s}
.Update:hover{background:var(--pu-card-hover);transform:translateY(-3px)}
/* The card tile. Type only, drawn rather than cropped: the heroes are product
   screenshots, and a screenshot squeezed into a 300px thumbnail loses the UI
   text that made it worth showing. The tile is always dark navy, in both
   themes, so a column of cards reads as one surface.
   Left-aligned and vertically centred: the left edge gives a long title
   somewhere to run, and centring the block keeps it clear of the Featured
   badge in the top-left corner. */
.UpdateCardTile{position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:10px;padding:24px;
  width:100%;aspect-ratio:4/3;
  background:linear-gradient(135deg,#1F3460 0%,#142447 100%);text-align:left}
/* Three rules that have to be read together.
   `min-height` makes the tile fill the card: without it, a card whose text runs
   longer than 4:3 left the tile short and a strip of card background showed
   below it, so the wave stopped before the bottom edge.
   `width:100%` pins the width to the grid column. `aspect-ratio` resolves in
   whichever direction is left free, so once min-height made the height the
   driver it started deriving the width from it instead, and a 265px-tall tile
   came out 353px wide and overflowed its 300px column.
   `aspect-ratio` is therefore only ever a floor on the height now. */
/* Only on the feed card, where the tile is one column of a two-column grid
   and has to match the height the text column sets. A coming-soon card is a
   flex column and its tile keeps its own 4:3 block. */
.Update > .UpdateCardTile{min-height:100%}

/* Decorative, and low enough not to compete with the type. */
.UpdateCardTile-wave{position:absolute;inset:0;width:100%;height:100%;
  fill:#50BCBD;opacity:.10;pointer-events:none}
/* No clamp and no ellipsis: the tile shows the whole title. A truncated
   changelog title tells a reader less than no title would, so the length is
   capped in the content instead, at 42 characters, and `site:assets` refuses
   to build when a locale goes over. Three lines is the budget that buys. */
.UpdateCardTile-title{position:relative;margin:0;font-family:Quicksand,'Trebuchet MS',sans-serif;
  font-size:2.2rem;font-weight:700;line-height:1.3;color:#F2F4FA}
.UpdateCardTile-caption{position:relative;margin:0;font-size:1.3rem;line-height:1.4;color:#A5AEBF}
.Update-body{padding:28px 32px;display:flex;flex-direction:column;gap:12px}
.Update-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.Update-date{font-size:1.4rem;font-weight:700;color:var(--pu-accent);letter-spacing:.01em}
.Update-title{margin:0;font-size:2.2rem;line-height:1.3;color:var(--pu-text)}
.Update-title a{color:inherit;text-decoration:none}
/* The whole card is the target; the title link carries the accessible name. */
.Update-title a:after{content:"";position:absolute;inset:0}
.Update{position:relative}
.Update-title a:focus-visible{outline:none}
.Update:has(.Update-title a:focus-visible){outline:2px solid #79e0df;outline-offset:4px}
.Update-summary{margin:0;font-size:1.6rem;line-height:1.7;color:#d2d6df}
.Update-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;
  font-size:1.5rem;font-weight:600;color:var(--pu-accent)}
.Update-featured{position:absolute;top:16px;left:16px;z-index:1;padding:4px 12px;border-radius:999px;
  background:#08142e;color:var(--pu-accent);font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.Updates-empty{padding:32px;border-radius:16px;background:var(--pu-card);color:#d2d6df;font-size:1.6rem}

@media(max-width:63.9375em){
  .Update{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .UpdateCardTile{aspect-ratio:16/9}
  .UpdateCardTile-title{font-size:1.8rem}
  .Update-body{padding:24px}
  .Update-title{font-size:2rem}
}

/* ------------------------------------------------------------- subscribe */

.Subscribe{position:sticky;top:120px;padding:28px;border-radius:16px;background:var(--pu-card)}
.Subscribe-title{margin:0 0 10px;font-size:2rem;color:var(--pu-text)}
.Subscribe-body{margin:0 0 20px;font-size:1.5rem;line-height:1.6;color:#d2d6df}
.Subscribe-field{display:flex;flex-direction:column;gap:10px}
.Subscribe input[type="email"]{width:100%;padding:12px 16px;border-radius:8px;border:1px solid #4c5d80;
  background:#08142e;color:var(--pu-text);font:inherit;font-size:1.5rem}
.Subscribe input[type="email"]::placeholder{color:#7985a0;opacity:1}
.Subscribe .Button{width:100%;justify-content:center}
.Subscribe-notice{margin:12px 0 0;font-size:1.3rem;line-height:1.5;color:var(--pu-muted)}
/* One column below 1024px: the panel drops to the end of the feed, where it has
   no card to line up with and no reason to stay stuck to the viewport. */
@media(max-width:63.9375em){
  .UpdatesLayout--withPanel{grid-template-columns:minmax(0,1fr)}
  .UpdatesLayout--withPanel .Subscribe{grid-column:1;grid-row:auto;position:static;margin-top:8px}
}

/* --------------------------------------------------- detail page elements */

/* A changelog entry reads as a document, not as an essay: the date, the tags,
   the title and the TL;DR all share one left edge. The blog's centred intro
   would break that column. */
.Block--update .Intro{text-align:left}
.Block--update h1{text-align:left}

/* .Container--xs carries no gutter of its own: on the blog pages .Intro, .Text
   and .Title each add their own 20px. Anything else inside it sits flush against
   the screen edge on mobile, and 20px out of line with the h1 on desktop. Move
   the gutter to the container once, and take it off the parts that had it, so
   every element on the page shares one left edge. */
.Block--update .Container--xs{box-sizing:border-box;padding-left:20px;padding-right:20px}
.Block--update .Container--xs :is(.Intro,.Text,.Title){padding-left:0;padding-right:0}
.Block--update .Container--xs :is(.KeyFacts,.UpdateFaq,.UpdateCtaBlock){box-sizing:border-box}

.UpdateHeader{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.UpdateHeader .Update-date{font-size:1.6rem}
/* The revision line sits under the tags, quieter than them: a reader checking
   whether a release note is current should be able to find the answer without
   it competing with the date that heads the article. */
.Update-revision{margin:8px 0 0;font-size:1.3rem;line-height:1.5;color:#98a3bb}
.UpdateHero{margin:0 0 40px;border-radius:16px;overflow:hidden;background:#142447}
.UpdateHero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.UpdateHero figcaption{padding:12px 20px;font-size:1.3rem;color:var(--pu-muted)}
.UpdateSection-figure{margin:24px 0 0;border-radius:12px;overflow:hidden;background:#142447}
.UpdateSection-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Teal filled-circle check, per the brand's bullet rule. Sized to the article's
   own body copy so a bullet list does not read louder than the paragraph above it. */
.CheckList{margin:24px 0 0;padding:0;list-style:none}
.CheckList li{position:relative;padding-left:36px;margin-bottom:14px;font-size:1.5rem;line-height:1.8;color:var(--pu-text)}
.CheckList li:before{content:"";position:absolute;left:0;top:.45em;width:20px;height:20px;border-radius:50%;
  background:var(--pu-accent)}
.CheckList li:after{content:"";position:absolute;left:6px;top:calc(.45em + 6px);width:8px;height:4px;
  border-left:2px solid #08142e;border-bottom:2px solid #08142e;transform:rotate(-45deg)}
/* Benefit first, feature second: the lead clause carries the benefit, so it gets
   the weight and the body text colour. */
.CheckList li strong{color:var(--pu-text)}

/* ------------------------------------------------------- the key facts box */

/* Sits directly under the hero: the six things an admin scans for before
   deciding whether to read on. Facts only — anything that needs a sentence of
   argument belongs in "Why we built it this way". */
.KeyFacts{margin:32px 0 0;padding:28px 32px;border-radius:16px;background:var(--pu-card)}
.KeyFacts-title{margin:0 0 16px;font-size:1.8rem;color:var(--pu-text)}
.KeyFacts-list{margin:0}
.KeyFacts-row{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:10px 0;
  border-top:1px solid #33456e}
.KeyFacts-row:first-child{border-top:0;padding-top:0}
.KeyFacts-row dt{margin:0;font-size:1.4rem;font-weight:700;color:var(--pu-accent)}
.KeyFacts-row dd{margin:0;font-size:1.5rem;line-height:1.6;color:var(--pu-text)}
@media(max-width:47.9375em){
  .KeyFacts{padding:24px}
  .KeyFacts-row{grid-template-columns:1fr;gap:2px}
}

/* --------------------------------------------------------------- the FAQ */

/* Rendered open rather than in an accordion: the answers are the part an AI
   assistant quotes, and collapsed content is one more thing that can go wrong
   between the crawler and the copy. Kept in step with the FAQPage JSON-LD in
   the catalog.

   Named UpdateFaq, not Faq: the site already owns .Faq-question/.Faq-answer for
   its accordion, and dark-site.css paints both of them globally rather than
   inside .Block--faq. Reusing those names put an accordion's panel colours
   behind this block — and .Block--faq .Faq-answer{max-height:0} would have
   collapsed it outright had it ever moved inside that block. */
/* The house FAQ pattern, matching the comparison pages: a navy pill per
   question with a teal + that turns into a – when it opens. Native
   <details>/<summary>, so it needs no JavaScript, is keyboard operable for
   free, and keeps every answer in the served HTML — which is what matters here,
   because the answers are the part search engines and AI assistants quote, and
   they are mirrored in the FAQPage JSON-LD. */
.UpdateFaq{margin:24px 0 0;display:flex;flex-direction:column;gap:12px}
.UpdateFaq-entry{padding:16px 20px;border-radius:12px;background:var(--pu-card)}
.UpdateFaq summary{display:block;cursor:pointer;list-style:none}
.UpdateFaq summary::-webkit-details-marker{display:none}
.UpdateFaq summary::before{content:"+ ";color:var(--pu-accent);font-weight:700}
.UpdateFaq details[open] summary::before,.UpdateFaq-entry[open] summary::before{content:"– "}
.UpdateFaq summary:focus-visible{outline:2px solid #79e0df;outline-offset:4px;border-radius:4px}
/* The question stays an h3 inside the summary, which the spec allows and which
   keeps it in the document outline. Three of them are verbatim People Also Ask
   rows, so they are worth more as headings than as plain labels. */
.UpdateFaq-question{display:inline;margin:0;font-size:1.7rem;font-weight:700;line-height:1.4;color:var(--pu-text)}
.UpdateFaq-answer{margin:12px 0 0;font-size:1.5rem;line-height:1.8;color:#d2d6df}
.UpdateFaq-answer a{color:var(--pu-accent)}

/* ------------------------------------------------------------ CTA block */

.UpdateCtaBlock{margin:40px 0 0;padding:32px;border-radius:16px;background:var(--pu-card)}
.UpdateCtaBlock .Title{margin:0 0 10px;font-size:2.2rem}
.UpdateCtaBlock-body{margin:0;font-size:1.6rem;line-height:1.7;color:#d2d6df}
.UpdateCtaBlock .UpdateCta{margin-top:24px}
@media(max-width:47.9375em){.UpdateCtaBlock{padding:24px}}

/* ------------------------------------------------- unresolved draft copy */

/* A claim nobody has verified must not be able to pass for approved copy on a
   review build, so the marker is rendered rather than hidden. Coral is the
   brand's negative-context colour and an unresolved claim is exactly that.
   Every one of these has to be resolved or removed before launch. None is on
   the page today: the style stays because the content template still tells
   authors to write markers, and the next draft will need it. */
.Draft-flag{display:inline-block;padding:1px 8px;border-radius:6px;
  background:rgba(231,52,88,.16);color:#ff8da1;font-size:1.2rem;font-weight:600;
  white-space:normal}

/* ----------------------------------------------------------- the timeline */

.Timeline{margin:24px 0 0;padding:0 0 0 28px;list-style:none;border-left:2px solid #4c5d80}
.Timeline li{position:relative;padding:0 0 28px 12px}
.Timeline li:last-child{padding-bottom:0}
.Timeline li:before{content:"";position:absolute;left:-37px;top:.35em;width:16px;height:16px;border-radius:50%;
  background:var(--pu-accent);box-shadow:0 0 0 4px var(--pu-page)}
.Timeline-when{display:block;font-size:1.5rem;font-weight:700;color:var(--pu-accent);margin-bottom:4px}
.Timeline-what{margin:0;font-size:1.5rem;line-height:1.8;color:var(--pu-text)}

/* ------------------------------------------------------------- admin note */

.NoteBox{margin:32px 0 0;padding:28px 32px;border-radius:16px;background:var(--pu-card)}
.NoteBox h3{margin:0 0 12px;font-size:2rem;color:var(--pu-text)}
.NoteBox p{margin:0 0 12px;font-size:1.5rem;line-height:1.8;color:#d2d6df}
.NoteBox p:last-child{margin-bottom:0}
.NoteBox a{color:var(--pu-accent)}

/* One button now, so no secondary style. It still wraps: the row kept its flex
   rules because a second action is a plausible future edit, and wrapping is
   what stops one appearing off the side of a phone. */
.UpdateCta{display:flex;flex-wrap:wrap;gap:16px;margin:40px 0 0}

/* --------------------------------------------------- previous / next pair */

.UpdateNav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0 0;padding:0;list-style:none}
.UpdateNav>li{display:grid;margin:0}
.UpdateNav>li:before{display:none}
.UpdateNav a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 24px;border-radius:12px;
  background:var(--pu-card);color:var(--pu-text);text-decoration:none;transition:background-color .2s}
.UpdateNav a:hover{background:var(--pu-card-hover)}
.UpdateNav-direction{font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pu-accent)}
.UpdateNav-title{font-size:1.6rem;line-height:1.5}
.UpdateNav--next{text-align:right}
@media(max-width:47.9375em){.UpdateNav{grid-template-columns:1fr}.UpdateNav--next{text-align:left}}

/* A page that has no newer or older neighbour keeps the surviving card in its
   own column rather than letting it stretch across both. */
.UpdateNav--next{grid-column:2}
.UpdateNav--previous{grid-column:1}
@media(max-width:47.9375em){.UpdateNav--next,.UpdateNav--previous{grid-column:auto}}

/* ------------------------------------------------------- more updates row */

.MoreUpdates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0;padding:0;list-style:none}
/* The li is a grid item and stretches to the row, but the card inside it is a
   plain block that stops at its own content — so a short summary left its card
   ending above the others. Make the li a grid too, and drop the base
   stylesheet's margin-bottom:5px, which the row would otherwise reserve outside
   the card. Same pattern as .Updates>li. */
.MoreUpdates>li{display:grid;margin:0}
.MoreUpdates>li:before{display:none}
/* Slack in a stretched card goes to the text row, not the image: with both
   rows auto the extra height was split between them and the three images came
   out different heights. */
.MoreUpdates .Update{grid-template-columns:1fr;grid-template-rows:auto 1fr}
/* Stacked cards size their own media instead of stretching it to whatever the
   tallest card in the row happens to be. */
.MoreUpdates .UpdateCardTile{aspect-ratio:16/9}
.MoreUpdates .Update-title{font-size:1.8rem}
.MoreUpdates .Update-summary{font-size:1.5rem}
@media(max-width:63.9375em){.MoreUpdates{grid-template-columns:1fr}}

/* ------------------------------------------------- learn tab alignment */

/* See the comment above: a floor on the header keeps the tab row at one
   height on both pages, in every language. */
body:has(.Tabs--learn) .Block--page-header .Block--header{min-height:184px;justify-content:center}
@media(max-width:63.9375em){
  body:has(.Tabs--learn) .Block--page-header .Block--header{min-height:168px}
}