.media-card { isolation: isolate; }
.media-card__copy { padding-right: 58px; }
.media-card__copy::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .72) 1.2px, transparent 1.8px) 0 0 / 7px 7px, rgba(44, 37, 45, .38);
  backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), background .3s linear;
}
.media-card__copy::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 31px;
  bottom: 30px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 5px 5px #fff, 10px 10px #fff, 15px 15px #fff, 10px 20px #fff, 5px 25px #fff;
  transition: transform .3s var(--ease);
}
.media-card:hover .media-card__copy::after,
.media-card:focus-visible .media-card__copy::after { transform: translateX(4px) rotate(-8deg); background-color: rgba(83, 70, 88, .5); }
.media-card:hover .media-card__copy::before,
.media-card:focus-visible .media-card__copy::before { transform: translateX(4px) rotate(-8deg); }

.learn-reader {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 48px));
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 40px 40px 40px 0;
  color: var(--ink);
  background: #f6f3fb;
  box-shadow: 0 34px 100px rgba(28, 13, 38, .34);
}
.learn-reader[open] { display: grid; }
.learn-reader::backdrop { background: rgba(45, 50, 55, .72); backdrop-filter: blur(14px); }
.learn-reader__close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  min-width: 78px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(50, 16, 95, .16);
  border-radius: 24px;
  background: rgba(248, 245, 239, .82);
  backdrop-filter: blur(18px);
  cursor: pointer;
}
.learn-reader__media { min-height: 640px; overflow: hidden; background: #21182a; }
.learn-reader__media img,
.learn-reader__media video { width: 100%; height: 100%; object-fit: cover; }
.learn-reader__body { padding: 78px clamp(34px, 5vw, 72px) 54px; overflow: auto; }
.learn-reader__eyebrow { color: var(--violet); font: 400 11px/1.2 Simplon, monospace; letter-spacing: .07em; text-transform: uppercase; }
.learn-reader__body h2 { max-width: 12ch; margin-top: 18px; font-size: clamp(50px, 5.2vw, 78px); font-weight: 300; line-height: .92; letter-spacing: -.06em; }
.learn-reader__dek { max-width: 48ch; margin-top: 26px; color: var(--ink-soft); font-size: 19px; line-height: 1.46; }
.learn-reader__copy { max-width: 58ch; margin-top: 34px; }
.learn-reader__copy p { margin-top: 18px; color: #403548; font-size: 16px; line-height: 1.64; }
.learn-reader__action { width: fit-content; min-height: 50px; margin-top: 36px; display: inline-grid; place-items: center; padding: 0 22px; border-radius: 28px; color: #fff; background: var(--royal); }
body:has(.learn-reader[open]) { overflow: hidden; }

@media (max-width: 760px) {
  .learn-reader { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); grid-template-columns: 1fr; border-radius: 32px 32px 32px 0; }
  .learn-reader[open] { display: block; }
  .learn-reader__media { height: 42dvh; min-height: 280px; }
  .learn-reader__body { padding: 38px 24px 44px; }
  .learn-reader__body h2 { font-size: clamp(46px, 14vw, 66px); }
  .learn-reader__close { position: fixed; top: 24px; right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-card__copy::before,
  .media-card__copy::after { transition: none; }
}

/* Match Cleo Learn: the filter belongs above the library, never over the cards. */
@media (max-width: 760px) {
  .learn-library { padding-top: 96px; }
  .media-tabs { padding: 17px; }
  .tab-list,
  body.learn-filter-active .tab-list {
    position: sticky;
    z-index: 6;
    top: 88px;
    bottom: auto;
    left: auto;
    margin: 0 auto 18px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: 0 12px 24px rgba(49, 39, 52, .12);
  }
  .media-grid { gap: 16px; }
}

/* Cleo Learn parity: a visible editorial masthead, compact filter, and quiet card motion. */
.learn-main { padding-top: 0; }
.learn-hero {
  min-height: min(760px, 88svh);
  padding: 172px 32px 32px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 7vw, 120px);
  align-items: end;
  color: #252326;
  background: #f3eefa;
}
.learn-hero div { padding: 0 0 clamp(36px, 8vw, 112px); }
.learn-hero p {
  margin-bottom: 24px;
  font: 400 11px/1.2 Simplon, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.learn-hero h1 {
  font-size: clamp(96px, 13.2vw, 190px);
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.075em;
}
.learn-hero img {
  width: 100%;
  height: min(570px, 65svh);
  object-fit: cover;
  border-radius: 28px 28px 28px 0;
}
.learn-library { padding-top: 112px; background: #f3eefa; }
.media-tabs { box-shadow: none; }
.media-card__copy::after {
  border-color: rgba(255,255,255,.55);
  background: rgba(25,25,25,.28);
  backdrop-filter: none;
}
.media-card__copy::before {
  width: 18px;
  height: 18px;
  right: 15px;
  bottom: 13px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M4%2012H20M14%206L20%2012L14%2018%27%20stroke%3D%27%23fff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  box-shadow: none;
}
.media-card:hover .media-card__copy::after,
.media-card:focus-visible .media-card__copy::after,
.media-card:hover .media-card__copy::before,
.media-card:focus-visible .media-card__copy::before { transform: translateX(3px); }
.learn-reader[open] { animation: learn-reader-in .42s cubic-bezier(.16,1,.3,1) both; }
.learn-reader::backdrop { animation: learn-backdrop-in .28s ease-out both; }
@keyframes learn-reader-in { from { opacity: 0; transform: translateY(20px) scale(.985); } }
@keyframes learn-backdrop-in { from { opacity: 0; } }

@media (max-width: 760px) {
  .learn-hero {
    min-height: 690px;
    padding: 126px 16px 16px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .learn-hero div { padding: 0; }
  .learn-hero p { margin-bottom: 18px; }
  .learn-hero h1 { font-size: clamp(82px, 29vw, 112px); }
  .learn-hero img { height: 410px; border-radius: 24px 24px 24px 0; }
  .learn-library { padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-reader[open], .learn-reader::backdrop { animation: none; }
}

/* Audit V07: the shared sticky Videos/Articles pill floated over the card grid while scrolling and
   covered card copy. On Learn it stays at the head of the library it controls. */
.learn-library .tab-list { position: relative; top: auto; }

/* Learning library and long-form reader: native search/select/video controls. */
.learn-library__filters{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0}
.learn-library__filters label{display:grid;gap:8px;flex:1 1 220px;color:var(--ink)}
.learn-library__filters input,.learn-library__filters select{min-height:44px;padding:10px 14px;border:1px solid #76647d;border-radius:14px;background:#fff;color:#29212f;font:inherit}
.learn-library .media-card[hidden]{display:none}
.learn-reader__copy a{display:block;margin-top:16px;color:#513571;text-decoration:underline}
.learn-reader__media:has(video){position:relative}
.learn-reader__media p{position:absolute;inset:20px 20px auto;padding:12px;background:#fff;color:#29212f;border-radius:12px}
.learn-reader__media p[hidden]{display:none}
.learn-reader__close{min-height:44px}
@media(max-width:760px){.learn-reader{overflow:auto}.learn-reader__media{min-height:220px;height:32dvh}.learn-reader__media video{object-fit:contain}.learn-library__filters{gap:12px}}

/* C3: the library is visible on first paint, with search before the card grid. */
.learn-page{--ink:#29282d;--ink-soft:#605b64;--royal:#29282d;background:#f8f6f2;color:var(--ink);font-family:PPNeueMontreal,PPNeue,Arial,sans-serif}
.learn-page .learn-main>section,.learn-page .learn-hero{box-sizing:border-box;background:#f8f6f2;color:var(--ink);scroll-margin-top:112px;padding-inline:max(24px,calc((100vw - 1200px)/2))}
.learn-page .learn-hero{display:block;min-height:0;padding-top:146px;padding-bottom:24px}
.learn-page .learn-hero>div{padding:0}.learn-page .learn-hero h1{font-size:clamp(36px,4.6vw,64px);line-height:1.08;letter-spacing:-.045em;font-weight:300}
.learn-page .learn-hero p{margin:0 0 16px}.learn-page .learn-hero .learn-hero__summary{max-width:60ch;margin:22px 0 0;font:400 18px/1.5 PPNeueMontreal,PPNeue,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.learn-page .learn-library{padding-top:0;padding-bottom:64px}.learn-page .learn-library__filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);margin:12px 0 24px;gap:20px}
.learn-page .learn-library__filters label{min-width:0;font-size:14px}.learn-page .learn-library__filters :is(input,select){box-sizing:border-box;min-width:0;width:100%;min-height:52px;padding:12px 16px;border-color:#dcd8d1;border-radius:12px;color:var(--ink);background:#fff}
.learn-page .learn-result-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.learn-page .media-tabs{box-sizing:border-box;width:100%;margin:0;padding:0;background:none;border-radius:0;opacity:1;transform:none}
.learn-page .learn-library .tab-list{position:static;width:fit-content;display:flex;margin:0 0 28px;padding:4px;border:1px solid #dcd8d1;background:#eeeae3;box-shadow:none;opacity:1;transform:none}
.learn-page .tab-list button{min-height:44px}.learn-page .tab-list button[aria-selected=true]{background:var(--ink);color:#fff}
.learn-page .media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.learn-page .media-grid[hidden]{display:none}
:is(.learn-page,.news-page) .media-card{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;background:#fff;color:var(--ink);border:1px solid #dcd8d1;border-radius:20px;text-decoration:none;transition:transform .2s ease}
:is(.learn-page,.news-page) .media-card::after,:is(.learn-page,.news-page) .media-card__copy::before,:is(.learn-page,.news-page) .media-card__copy::after{display:none}
:is(.learn-page,.news-page) .media-card :is(img,video){display:block;flex:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transform:none}
:is(.learn-page,.news-page) .media-card__copy{position:static;display:flex;flex:1;flex-direction:column;padding:22px;min-width:0}
:is(.learn-page,.news-page) .media-card__copy small{font:400 12px/1.4 PPNeueMontreal,PPNeue,Arial,sans-serif;color:var(--ink-soft);letter-spacing:.04em}
:is(.learn-page,.news-page) .media-card__copy h3{max-width:none;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.025em}
:is(.learn-page,.news-page) .media-card__summary{margin:12px 0 20px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
:is(.learn-page,.news-page) .media-card__time{margin-top:auto;font-size:13px;color:var(--ink-soft)}
:is(.learn-page,.news-page) .media-card:hover,:is(.learn-page,.news-page) .media-card:focus-visible{transform:translateY(-4px)}
:is(.learn-page,.news-page) .media-card:hover h3,:is(.learn-page,.news-page) .media-card:focus-visible h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.learn-page .learn-main .reveal{opacity:1;transform:none}.learn-page .section{padding-block:64px;border-top:1px solid #dcd8d1}
.learn-page .section-head h2{font-size:clamp(32px,4vw,54px);font-weight:300;line-height:1.1}.learn-page .section-head p{color:var(--ink-soft)}
.learn-page .feature-card{background:transparent;color:var(--ink);border:1px solid #dcd8d1}.learn-page .feature-card p{color:var(--ink-soft)}
.learn-page .learn-reader{background:#f8f6f2;color:var(--ink)}.learn-page .learn-reader__eyebrow{color:var(--ink-soft)}
.learn-page .learn-reader__media{min-height:0;background:#eeeae3}.learn-page .learn-reader__media img{object-fit:contain}
.learn-page .learn-reader__action{display:inline-flex;align-items:center;color:#fff;background:var(--ink);text-decoration:none}
.learn-page :focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:1000px){.learn-page .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.learn-page .learn-main>section,.learn-page .learn-hero{padding-inline:20px;scroll-margin-top:88px}.learn-page .learn-hero{padding-top:108px;padding-bottom:20px}.learn-page .learn-library__filters{grid-template-columns:1fr;gap:12px}.learn-page .media-grid{grid-template-columns:1fr}.learn-page .media-card__copy{padding:20px}}
@media(prefers-reduced-motion:reduce){.learn-page .media-card{transition:none}.learn-page .media-card:hover,.learn-page .media-card:focus-visible{transform:none}}
.learn-page .feature-card{min-height:0;padding:24px;border-radius:20px;box-shadow:none}.learn-page .feature-card small{color:var(--ink-soft)}
.learn-page .final-cta{min-height:0;padding-block:64px;border-top:1px solid #dcd8d1}.learn-page .final-cta h2{max-width:22ch;font-size:clamp(32px,4vw,54px);line-height:1.1;color:var(--ink)}
.learn-page .final-cta p{color:var(--ink-soft)}.learn-page .final-cta .primary-cta{background:var(--ink);color:#fff;text-decoration:none}

/* C3b: reference-parity sets body:not(.account-page); match its specificity so one paper colour shows everywhere. */
body.learn-page{background:#f8f6f2;color:#29282d}

/* C3b: shared library navigation, topic views and article metadata. */
:is(.learn-page,.news-page) .library-intro{max-width:68ch;margin:20px 0 0;font:400 17px/1.6 PPNeueMontreal,PPNeue,Arial,sans-serif;color:#605b64;letter-spacing:0;text-transform:none;display:block}
:is(.learn-page,.news-page) .library-intro::before{display:none}
:is(.learn-page,.news-page) .library-nav,:is(.learn-page,.news-page) .library-topics{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
:is(.learn-page,.news-page) .library-nav a,:is(.learn-page,.news-page) .library-topics a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border:1px solid #dcd8d1;border-radius:24px;color:#29282d;background:#fff;font-size:16px;line-height:1.5;text-decoration:none}
:is(.learn-page,.news-page) .library-nav a:hover,:is(.learn-page,.news-page) .library-topics a:hover{background:#eeeae3;text-decoration:none}
.learn-page .learn-hero h1{font-size:clamp(32.256px,calc(24.0315px + 2.10895vw),54.4px)}
.learn-page .library-topic-title,.learn-page .library-archive-title{font-size:24px;line-height:1.3;font-weight:400;margin:24px 0}
.learn-page .library-articles[hidden]{display:none}.learn-page .library-archive{margin-bottom:40px}
:is(.learn-page,.news-page) .media-card__date{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:#605b64}
:is(.learn-page,.news-page) .media-card__time{font-size:16px;line-height:1.5}
:is(.learn-page,.news-page) .media-card[hidden]{display:none}
.learn-page :is(.feature-card p,.learn-reader__copy p,.learn-reader__dek){font-size:16px;line-height:1.6}
.learn-page .learn-library__filters label{font-size:16px}
@media(max-width:760px){:is(.learn-page,.news-page) .library-nav,:is(.learn-page,.news-page) .library-topics{gap:8px}}
.learn-page .tab-list button{font-size:16px}

/* L11 (2026-10-09): an article card without a photo is a compact typographic card (category icon, title, short summary, read time and date), not a tall beige box holding one icon. Cards that carry a photo or a film keep the 16/10 frame above. */
body:is(.learn-page,.news-page) .media-card__copy:has(>.media-card__icon){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:12px;align-content:stretch;padding:20px 22px}
body:is(.learn-page,.news-page) .media-card__icon{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#eeeae3;color:#29282d}
body:is(.learn-page,.news-page) .media-card__icon svg{display:block;width:20px;height:20px}
body:is(.learn-page,.news-page) .media-card__copy:has(>.media-card__icon) small{grid-column:2;grid-row:1;align-self:center;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:is(.learn-page,.news-page) .media-card__copy:has(>.media-card__icon) h3{grid-column:1/-1;grid-row:2;margin:14px 0 0;font-size:22px;line-height:1.2}
body:is(.learn-page,.news-page) .media-card__copy:has(>.media-card__icon) .media-card__summary{grid-column:1/-1;grid-row:3;margin:8px 0 14px;font-size:16px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
body:is(.learn-page,.news-page) .media-card__meta{grid-column:1/-1;grid-row:4;align-self:end;display:flex;flex-wrap:wrap;gap:2px 8px;padding-top:12px;border-top:1px solid #eeeae3}
body:is(.learn-page,.news-page) .media-card__meta :is(.media-card__time,.media-card__date){display:inline;margin:0;font-size:14px;line-height:1.45;color:#605b64}
body:is(.learn-page,.news-page) .media-card__meta .media-card__time{order:1}
body:is(.learn-page,.news-page) .media-card__meta .media-card__date{order:2}
body:is(.learn-page,.news-page) .media-card__meta .media-card__date::before{content:"\00b7";margin-right:8px}
@media(max-width:760px){body:is(.learn-page,.news-page) .media-card__copy:has(>.media-card__icon){padding:18px 20px}}

/* Round 4b: Lane D usability fixes. */
body.learn-page .learn-hero .learn-hero__summary+.library-intro{margin-top:18px}

/* Round 4b: the Articles/Videos pills get side padding (the fit-content list squeezed them to their text). */
.learn-page .learn-library .tab-list button{width:auto;padding:0 22px}