/* Continuous Learning: editorial layouts for the four acquisition pages.
   Actual watercolor artwork supplies the visual texture; reading stays quiet. */
.cl-details {
  --maxw: 1392px;
  --pad: clamp(24px, 5vw, 76px);
  --detail-navy: #0C2233;
  --detail-wash: #EDF1F3;
}
.cl-details :is(.p-top, .cq-hero)::before { display: none; }
.cl-details :is(.p-path-grid, .cq-hero-grid) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.cl-details .p-path-grid { padding-block: 45px 66px; }
.cl-details .cq-hero { padding-block: 45px 66px; }
.cl-details :is(.p-title, .cq-hero h1) {
  max-width: 18ch;
  font-size: clamp(42px, 4.3vw, 64px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.cl-details :is(.p-title, .cq-hero h1) em { color: var(--detail-navy); }
.cl-details .p-breadcrumb { font-size: 11px; margin-bottom: 25px; }
.cl-details :is(.p-kicker, .cq-hero .h-eyebrow) { letter-spacing: .14em; }
.cl-details .p-dek { font-size: 18px; line-height: 1.7; }
.cl-details :is(.ct-hero-intro, .cm-intro) { margin-top: 16px; }
.cl-details .p-path-meta-row {
  gap: 9px 18px;
  margin-block: 24px;
  font-size: 12px;
}
.cl-details .c-availability { max-width: 50ch; margin-top: 20px; }

/* Images are paintings on the page, without simulated cards or floating glass. */
.cl-details .cl-editorial-figure {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: center;
}
.cl-details .cl-editorial-figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
.cl-details .cl-editorial-figure figcaption {
  position: static;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-style: normal;
}
.cl-details .cl-caption-label {
  display: block;
  margin: 0 0 10px;
  color: var(--ink-soft);
  font: 500 10px/1.6 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cl-details .cl-editorial-figure figcaption > p {
  margin: 0;
  color: var(--detail-navy);
  font: 430 clamp(23px, 2vw, 29px)/1.35 var(--font-display);
}
.cl-details :is(.p-section.narrow, .cq-intro, .cq-case, .p-sample-in) {
  max-width: 878px;
}
.cl-details .p-section.narrow { padding-block: 66px; }
.cl-details :is(.p-section h2, .ct-outcomes > h2, .cm-routine > h2,
  .cq-section-head > h2, .cq-case > h2, .cq-before h2, .ct-access h2) {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.16;
  letter-spacing: -.025em;
}
.cl-details :is(.p-section, .cq-intro, .cq-case, .p-sample-in) > p:not(.h-eyebrow) {
  line-height: 1.85;
}
.cl-details :is(.ct-outcomes, .cm-routine) { padding-block: 24px 76px; }
.cl-details :is(.ct-number, .cm-step, .cq-number) { color: var(--detail-navy); }
.cl-details :is(.ct-outcome-grid, .cm-steps) { gap: 36px; margin-top: 38px; }
.cl-details :is(.ct-outcome-grid article, .cm-steps > li, .cq-question-list > li) {
  border-top-color: #C8D3DD;
  padding-top: 25px;
}
.cl-details :is(.ct-outcome-grid h3, .cm-steps h3, .cq-question-list h3) {
  font-size: 28px;
  line-height: 1.2;
}
.cl-details :is(.p-sample, .ct-access, .cq-before, .cq-social-learning) {
  background: var(--detail-wash);
  border-color: var(--hairline);
}
.cl-details .p-sample-in { padding-block: 64px; }
.cl-details :is(.ct-excerpt, .cm-question, .cq-takeaway) { border-left-color: #205BB6; }
.cl-details .ct-sequence .p-days { margin-top: 32px; }
.cl-details .p-day { padding-block: 27px; }
.cl-details .p-day .idx { color: var(--detail-navy); }
.cl-details .ct-access { padding-block: 64px; }
.cl-details .x-faq { padding-block: 56px; }
.cl-details .c-related { padding-block: 56px 76px; }
.cl-details .c-related > p:not(.h-eyebrow) { max-width: 72ch; margin-bottom: 28px; }
.cl-details .c-path-card { border-radius: 8px; box-shadow: none; }
.cl-details .c-path-card > img { aspect-ratio: 3 / 2; }
.cl-details .c-closing { background: var(--detail-wash); padding-block: 68px; }

/* The guide has an article rhythm, distinct from its compact social entrance. */
.cl-details .cq-intro { padding-block: 12px 62px; }
.cl-details .cq-questions { padding-block: 64px; background: var(--surface); }
.cl-details .cq-question-list { gap: 36px; }
.cl-details .cq-question-list > li blockquote { border-left-color: #205BB6; }
.cl-details .cq-case { padding-block: 72px; }
.cl-details .cq-dialogue {
  margin-block: 32px;
  padding: 6px 28px;
  border-radius: 4px;
  border-color: var(--hairline);
  background: var(--surface);
}
.cl-details .cq-turn-you dd { color: var(--detail-navy); }
.cl-details .cq-before { padding-block: 58px; }
.cl-details .cq-learning { padding-block: 76px; }
.cl-details .cq-path { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.cl-details .cq-path-art {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.cl-details .cq-path-side-note {
  max-width: 44ch;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.cl-details .cq-path-heading { color: var(--detail-navy); }
.cl-details .cq-compact-footer { background: var(--surface); }
.cl-details .cq-social-hero .cq-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
}
.cl-details .cq-social-hero h1 { max-width: 18ch; font-size: clamp(42px, 4.4vw, 62px); }
.cl-details .cq-social-question {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.cl-details .cq-social-question > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.cl-details .cq-social-question-copy {
  margin-top: 18px;
  padding: 22px 0 0;
  border-top: 1px solid var(--hairline);
}
.cl-details .cq-social-question blockquote { color: var(--detail-navy); }
.cl-details .cq-social-explainer { padding-block: 8px 58px; }
.cl-details .cq-social-learning { padding-block: 58px; }
.cl-details .cq-sticky { background: var(--surface); box-shadow: 0 -3px 18px rgb(12 34 51 / .05); }

@media (max-width: 1100px) {
  .cl-details :is(.p-path-grid, .cq-hero-grid, .cq-social-hero .cq-hero-grid) { gap: 36px; }
  .cl-details :is(.p-title, .cq-hero h1) { font-size: 48px; }
  .cl-details :is(.ct-outcome-grid, .cm-steps, .cq-question-list) { gap: 26px; }
}
@media (max-width: 860px) {
  .cl-details { --pad: 24px; }
  .cl-details :is(.p-path-grid, .cq-hero-grid, .cq-social-hero .cq-hero-grid, .cq-path) {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .cl-details .p-path-grid { padding: 30px var(--pad) 44px; }
  .cl-details .cq-hero { padding-block: 30px 44px; }
  .cl-details :is(.p-title, .cq-hero h1) { font-size: 48px; max-width: 22ch; }
  .cl-details .cl-editorial-figure { max-width: 660px; margin-inline: auto; }
  .cl-details .cl-editorial-figure figcaption { margin-top: 14px; padding-top: 18px; }
  .cl-details :is(.p-section.narrow, .cq-case, .p-sample-in) { padding-block: 52px; }
  .cl-details :is(.ct-outcomes, .cm-routine) { padding-block: 10px 54px; }
  .cl-details .cq-learning { padding-block: 54px; }
  .cl-details .cq-path-art { max-width: 600px; }
  .cl-details .cq-question-list { gap: 28px; }
  .cl-details .cq-social-hero h1 { max-width: 20ch; }
  .cl-details .cq-social-question { max-width: 660px; width: 100%; margin-inline: auto; }
  .cl-details .cq-social-hero .cq-hero-grid { gap: 28px; }
  .cl-details .cq-social-learning .cq-path { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .cl-details :is(.p-title, .cq-hero h1) { font-size: clamp(36px, 9.8vw, 46px); max-width: 20ch; }
  .cl-details .p-breadcrumb { margin-bottom: 21px; }
  .cl-details .p-dek { font-size: 16px; line-height: 1.75; }
  .cl-details :is(.p-path-grid, .cq-hero-grid) { gap: 30px; }
  .cl-details .cl-editorial-figure figcaption > p { font-size: 24px; }
  .cl-details .cl-caption-label { font-size: 9px; }
  .cl-details :is(.p-section.narrow, .cq-case, .p-sample-in) { padding-block: 44px; }
  .cl-details :is(.ct-outcomes, .cm-routine) { padding-bottom: 44px; }
  .cl-details :is(.ct-outcome-grid, .cm-steps) { gap: 26px; margin-top: 28px; }
  .cl-details .cq-intro { padding-block: 0 40px; }
  .cl-details .cq-questions { padding-block: 44px; }
  .cl-details .cq-dialogue { padding-inline: 20px; }
  .cl-details .cq-question-list blockquote { font-size: 24px; }
  .cl-details :is(.ct-access, .cq-before, .cq-learning, .cq-social-learning) { padding-block: 44px; }
  .cl-details .cq-path-side-note { margin-top: 16px; padding-top: 16px; }
  .cl-details .cq-social-question-copy { padding-top: 20px; }
  .cl-details .cq-social-question blockquote { font-size: 27px; }
  .cl-details .cq-social-explainer { padding-bottom: 40px; }
  .cl-details .cq-social-hero h1 { max-width: 18ch; }
  .cl-details .x-faq { padding-block: 44px; }
  .cl-details .c-related { padding-block: 40px 48px; }
  .cl-details .c-closing { padding-block: 48px; background-image: none; }
}
@media (max-width: 360px) {
  .cl-details { --pad: 20px; }
  .cl-details .p-path-grid { padding-inline: 20px; }
  .cl-details :is(.p-section.narrow, .p-sample-in, .x-faq) { padding-inline: 20px; }
  .cl-details :is(.p-title, .cq-hero h1) { font-size: 36px; }
  .cl-details .cq-question-list blockquote { font-size: 23px; }
  .cl-details .cq-social-question blockquote { font-size: 25px; }
}