/* Learning: four illustrated steps, following the supplied reference. */
.learning { position: relative; overflow: hidden; padding-block: 1.5rem 1.125rem; }
.learning-inner { position: relative; }
.learning-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .85fr); gap: 2.375rem; align-items: end; margin-bottom: 2.375rem; padding-right: 9.375rem; }
.learning-heading .eyebrow { margin-bottom: 1.25rem; }
.learning-heading h2 { font-size: clamp(2.75rem, 4.8vw, 4.125rem); line-height: 1.02; letter-spacing: -.045em; }
.learning-subtitle { max-width: 39.375rem; margin-top: 0.4375rem; color: var(--rose); font: italic 500 clamp(1.6875rem, 2.65vw, 2.375rem)/1.12 var(--font-display); letter-spacing: -.025em; }
.learning-intro { max-width: 21.875rem; padding-bottom: 0.1875rem; color: var(--muted, #827779); font-size: 0.8125rem; line-height: 1.65; }
.learning-decoration { position: absolute; top: -0.75rem; right: -6.875rem; width: 16.5625rem; height: 13.125rem; pointer-events: none; }
.learning-decoration > img { position: absolute; width: 13.125rem; right: -1.4375rem; bottom: -0.625rem; transform: rotate(1deg); }
.learning-handnote { position: absolute; top: 0.25rem; left: -0.25rem; z-index: 1; color: var(--rose); font: italic 500 1.3125rem/1.04 var(--font-display); text-align: center; transform: rotate(-10deg); }
.learning-note-arrow { position: absolute; width: 4.125rem; top: 4.0625rem; left: 4.4375rem; z-index: 2; color: var(--rose); stroke: currentColor; stroke-width: 1.3; }
.learning-spark { position: absolute; color: var(--rose); stroke: currentColor; stroke-width: 1.5; }
.learning-spark--large { width: 1.5rem; height: 2.75rem; top: -0.1875rem; right: 4.8125rem; }
.learning-spark--small { width: 0.8125rem; height: 1.75rem; bottom: 0.3125rem; left: 5.625rem; }
.learning-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8125rem; }
.learning-path { position: absolute; left: 1.875rem; width: calc(100% - 1.875rem); height: 3.75rem; top: 8.3125rem; pointer-events: none; stroke: #dba5b5; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.learning-step { position: relative; min-width: 0; }
.learning-visual { position: relative; height: 9.375rem; margin-bottom: 0.25rem; border-radius: 0.6875rem; background: #f3e4e3; }
.learning-visual--lesson { display: flex; align-items: center; isolation: isolate; }
.learning-player { position: absolute; left: 0.5625rem; top: 1.375rem; width: 59%; height: 7rem; padding: 0.9375rem 0.625rem; border-radius: 0.25rem; background: linear-gradient(135deg, #4f2136, #742c4a 55%, #3f1a2c); color: #fff4f3; box-shadow: 0 0.375rem 0.5rem #5d2f3b24; transform: rotate(-6deg); }
.learning-player-title { display: block; font: 500 0.75rem/1.13 var(--font-display); letter-spacing: -.01em; }
.learning-player-play { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: 0.8125rem auto 0; border-radius: 50%; background: #ffffff22; color: #fbe6eb; }
.learning-player-play svg { width: 0.9375rem; height: 1.0625rem; }
.learning-player-timeline { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.4375rem; height: 0.125rem; background: #ffffff30; }
.learning-player-timeline i { display: block; width: 38%; height: 100%; background: #e9c1cd; }
.learning-player-time { position: absolute; bottom: 0.75rem; right: 0.5rem; font: 0.25rem/1 var(--font-body); opacity: .7; }
.learning-lesson-plan { position: absolute; right: 0; top: 0.9375rem; width: 37%; height: 7.4375rem; padding: 0.625rem 0.5rem; border-radius: 0.25rem; background: #fffaf7; color: #77585d; box-shadow: 0 0.1875rem 0.625rem #5b32451a; transform: rotate(3deg); }
.learning-lesson-plan strong { display: block; margin-bottom: 0.5625rem; color: #64414d; font-size: 0.375rem; font-weight: 600; }
.learning-lesson-plan span { display: flex; gap: 0.375rem; padding: 0.25rem 0; border-bottom: 0.0625rem solid #ecdede; font-size: 0.3125rem; line-height: 1.25; }
.learning-lesson-plan b { color: var(--rose); font-size: 0.3125rem; font-weight: 500; }
.learning-lesson-plan span:last-child { border: 0; }
.learning-margin-stroke { position: absolute; left: -2.3125rem; top: 2.375rem; width: 1.5625rem; height: 2.625rem; stroke: var(--rose); stroke-width: 1.6; }
.learning-visual--meaning { margin-inline: 0.125rem; }
.learning-open-book { position: absolute; left: 1%; bottom: -0.8125rem; width: 100%; max-width: none; height: 9.625rem; object-fit: contain; filter: drop-shadow(0 0.375rem 0.25rem #69314712); }
.learning-sticky { position: absolute; z-index: 1; display: block; background: #f9dce1; color: #a45d76; text-align: center; font: italic 500 0.875rem/1.02 var(--font-display); box-shadow: 0 0.1875rem 0.3125rem #753f4e14; }
.learning-sticky--top { top: -0.5rem; left: 35%; padding: 0.5625rem 0.5rem 0.5rem; transform: rotate(1deg); }
.learning-sticky--right { top: 2.25rem; right: 0.25rem; padding: 0.625rem 0.4375rem; transform: rotate(-2deg); }
.learning-sticky--bottom { bottom: -0.1875rem; right: 0.5rem; padding: 0.5rem 0.625rem; transform: rotate(4deg); }
.learning-book-arrow { position: absolute; top: 0.0625rem; right: 1.4375rem; width: 4.75rem; stroke: var(--rose); stroke-width: 1.3; }
.learning-visual--practice { display: grid; place-items: start center; padding-top: 0.6875rem; }
.learning-editor { width: 85%; height: 9.1875rem; border-radius: 0.4375rem; padding: 0.6875rem 0.75rem 0.5rem; background: #fffdfa; color: #6e5b60; box-shadow: 0 0.3125rem 0.5625rem #54213c13; }
.learning-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.3125rem; margin-bottom: 0.375rem; font-size: 0.4375rem; line-height: 1.3; }
.learning-editor-head strong { color: #5b3446; font-size: 0.4375rem; font-weight: 700; }
.learning-editor-head > span { color: #a59698; font-size: 0.375rem; }
.learning-editor-tag { display: table; margin-bottom: 0.3125rem; padding: 0.125rem 0.375rem; border-radius: 0.5625rem; background: #f7e7e9; color: #795261; font-size: 0.375rem; line-height: 1.2; }
.learning-editor > p { max-width: 9.5rem; margin-bottom: 0.375rem; font-size: 0.4375rem; line-height: 1.35; }
.learning-editor-field { padding: 0.3125rem; height: 2.5rem; border: 0.0625rem solid #eee0dd; border-radius: 0.25rem; color: #c3b4b6; font-size: 0.375rem; }
.learning-editor-field > span { display: block; position: relative; margin-top: 0.5rem; color: #9d858e; }
.learning-editor-field small { position: absolute; right: 0; font-size: 0.3125rem; }
.learning-editor-submit { display: table; margin: 0.3125rem 0 0 auto; padding: 0.3125rem 0.625rem; border-radius: 3.125rem; background: var(--wine); color: #fff8f7; font-size: 0.3125rem; line-height: 1.3; }
.learning-visual--practice .learning-margin-stroke { left: -1.125rem; top: 3.6875rem; }
.learning-visual--feedback { margin-right: 1.375rem; }
.learning-feedback-paper { position: absolute; top: 0.625rem; left: 1.0625rem; right: 0.9375rem; min-height: 8.5625rem; padding: 0.625rem 0.625rem 0.5625rem; border-radius: 0.3125rem; background: #fffdfa; transform: rotate(-5deg); box-shadow: 0 0.25rem 0.625rem #5b324512; }
.learning-feedback-paper > strong { display: block; margin-bottom: 0.4375rem; color: #5e3647; font-size: 0.375rem; font-weight: 700; line-height: 1.3; }
.learning-comment { position: relative; margin-top: 0.3125rem; padding: 0.375rem 0.3125rem 0.375rem 0.8125rem; border-radius: 0.1875rem; color: #76656b; font-size: 0.3125rem; line-height: 1.35; }
.learning-comment::before { content: ""; position: absolute; top: 0.5rem; left: 0.3125rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; }
.learning-comment--green { background: #eff3ea; }
.learning-comment--green::before { background: #8fb485; }
.learning-comment--pink { background: #fbecee; }
.learning-comment--pink::before { background: #d27892; }
.learning-comment--yellow { background: #fff4de; }
.learning-comment--yellow::before { background: #e8bc50; }
.learning-score { position: absolute; top: 1.4375rem; right: -1.9375rem; display: grid; place-items: center; width: 3.5625rem; height: 3.5625rem; border: 0.0625rem solid #deb6c2; border-radius: 50%; background: #fcf8f3; color: #9e4669; font: 500 1.375rem/1 var(--font-body); letter-spacing: -.05em; font-variant-numeric: lining-nums tabular-nums; }
.learning-feedback-note { position: absolute; top: 5.9375rem; right: -3.25rem; color: var(--rose); font: italic 500 1.125rem/.98 var(--font-display); text-align: center; transform: rotate(-7deg); }
.learning-step-number { position: relative; isolation: isolate; display: grid; place-items: center; width: 2.625rem; height: 2.625rem; margin: 0.1875rem 0 0.125rem -0.4375rem; border: 0.0625rem solid #eee0de; border-radius: 50%; background: var(--paper); color: var(--rose); font: italic 600 1rem/1 var(--font-display); }
.learning-step-number::before { content: ""; position: absolute; inset: 0.375rem; border-radius: 50%; background: #f3e4e4; z-index: -1; }
.learning-step > h3 { margin: 0 0 0.5625rem; color: var(--wine-deep); font: 500 1.5rem/1.05 var(--font-display); letter-spacing: -.025em; }
.learning-step > p { max-width: 16.5625rem; color: var(--muted, #827779); font-size: 0.8125rem; line-height: 1.38; }
.learning-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 1.625rem -1.625rem 0; padding: 1.25rem 1.5625rem 1.125rem; border-radius: 0.9375rem; background: #f7e9e9; }
.learning-benefit { display: flex; gap: 0.8125rem; min-width: 0; padding: 0 1.4375rem; border-left: 0.0625rem solid #ead3d6; }
.learning-benefit:first-child { padding-left: 0.4375rem; border-left: 0; }
.learning-benefit:last-child { padding-right: 0; }
.learning-benefit-icon { display: grid; place-items: center; width: 2.6875rem; height: 2.6875rem; flex: 0 0 2.6875rem; border-radius: 50%; color: #ad5275; background: #f0d2d8; }
.learning-benefit-icon svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.learning-benefit h3 { margin: 0.0625rem 0 0.3125rem; color: var(--wine-deep); font: 600 1.125rem/1 var(--font-display); letter-spacing: -.02em; }
.learning-benefit p { color: var(--muted, #827779); font-size: 0.625rem; line-height: 1.35; }

@media (min-width: 901px) {
    .learning-heading { padding-right: 10.625rem; }
    .learning-visual { height: 10.375rem; }
    .learning-player { height: 7.75rem; padding-top: 1.0625rem; }
    .learning-player-title { font-size: 0.875rem; }
    .learning-lesson-plan { height: 8.1875rem; padding-top: 0.75rem; }
    .learning-lesson-plan strong { font-size: 0.4375rem; }
    .learning-lesson-plan span, .learning-lesson-plan b { font-size: 0.375rem; }
    .learning-open-book { height: 11.25rem; }
    .learning-path { top: 9.3125rem; }
    .learning-editor { height: 10.0625rem; }
    .learning-editor > p { font-size: 0.5rem; max-width: 11.5625rem; }
    .learning-editor-field { height: 2.8125rem; }
    .learning-editor-submit { padding-block: 0.375rem; font-size: 0.375rem; }
    .learning-feedback-paper { min-height: 9.4375rem; }
    .learning-comment { padding-block: 0.4375rem; font-size: 0.375rem; }
}
@media (max-width: 900px) {
    .learning-heading { padding-right: 5.3125rem; gap: 1.75rem; grid-template-columns: 1.2fr 1fr; }
    .learning-heading h2 { font-size: 3.3125rem; }
    .learning-subtitle { font-size: 1.9375rem; }
    .learning-decoration { top: -0.4375rem; right: -7.8125rem; transform: scale(.86); transform-origin: right top; }
    .learning-handnote { left: 0.3125rem; }
    .learning-steps { gap: 1.25rem; }
    .learning-visual { height: 8.4375rem; }
    .learning-player { top: 1.25rem; height: 6.1875rem; }
    .learning-player-title { font-size: 0.625rem; }
    .learning-player-play { width: 1.5rem; height: 1.5rem; margin-top: 0.5625rem; }
    .learning-lesson-plan { height: 6.6875rem; padding: 0.5625rem 0.3125rem; }
    .learning-lesson-plan span { padding-block: 0.1875rem; }
    .learning-open-book { height: 9.0625rem; }
    .learning-sticky { font-size: 0.75rem; }
    .learning-sticky--top { left: 31%; }
    .learning-sticky--right { right: -0.1875rem; }
    .learning-sticky--bottom { right: 0; }
    .learning-editor { width: 90%; height: 8.5rem; padding: 0.625rem 0.5625rem 0.4375rem; }
    .learning-editor-field { height: 2.125rem; }
    .learning-editor-submit { padding-inline: 0.4375rem; }
    .learning-feedback-paper { left: 0.625rem; right: 0; min-height: 7.75rem; padding: 0.5rem 0.4375rem; }
    .learning-feedback-paper > strong { font-size: 0.3125rem; }
    .learning-comment { padding-block: 0.3125rem; font-size: 0.28125rem; }
    .learning-score { width: 2.8125rem; height: 2.8125rem; top: 1.375rem; right: -1.9375rem; font-size: 1.5rem; }
    .learning-feedback-note { right: -2.6875rem; top: 5.1875rem; font-size: 1rem; }
    .learning-path { top: 7.5625rem; }
    .learning-step > h3 { font-size: 1.3125rem; }
    .learning-step > p { font-size: 0.75rem; }
    .learning-benefits { margin-inline: -0.625rem; padding: 1.125rem 0.9375rem; }
    .learning-benefit { gap: 0.5625rem; padding-inline: 0.75rem; }
    .learning-benefit-icon { width: 2.1875rem; height: 2.1875rem; flex-basis: 2.1875rem; }
    .learning-benefit-icon svg { width: 1.4375rem; height: 1.4375rem; }
    .learning-benefit h3 { font-size: 1.0625rem; }
}
@media (max-width: 800px) {
    .learning-heading { grid-template-columns: 1fr; gap: 1.375rem; padding-right: 6.875rem; margin-bottom: 1.875rem; }
    .learning-heading h2 { font-size: clamp(2.6875rem, 6.8vw, 3.4375rem); }
    .learning-intro { max-width: 29.375rem; font-size: 0.8125rem; }
    .learning-decoration { right: -5.9375rem; top: 3.25rem; transform: scale(.85); }
    .learning-handnote { display: none; }
    .learning-note-arrow { display: none; }
    .learning-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; row-gap: 2.25rem; }
    .learning-path { display: none; }
    .learning-visual { height: 10.3125rem; }
    .learning-player { left: 0.6875rem; top: 1.4375rem; height: 7.875rem; }
    .learning-player-title { font-size: 0.875rem; }
    .learning-player-play { width: 1.875rem; height: 1.875rem; margin-top: 0.9375rem; }
    .learning-lesson-plan { top: 1.0625rem; height: 8.3125rem; padding: 0.75rem 0.5rem; }
    .learning-lesson-plan strong { font-size: 0.4375rem; }
    .learning-lesson-plan span, .learning-lesson-plan b { font-size: 0.375rem; padding-block: 0.3125rem; }
    .learning-open-book { height: 11.25rem; }
    .learning-sticky { font-size: 0.9375rem; }
    .learning-sticky--top { left: 36%; }
    .learning-sticky--right { right: 0.3125rem; }
    .learning-sticky--bottom { right: 0.375rem; }
    .learning-book-arrow { right: 1.4375rem; }
    .learning-editor { width: 85%; height: 10rem; padding: 0.75rem; }
    .learning-editor-head strong { font-size: 0.5rem; }
    .learning-editor > p { font-size: 0.5rem; max-width: 10.625rem; }
    .learning-editor-field { height: 2.6875rem; font-size: 0.4375rem; }
    .learning-editor-submit { font-size: 0.375rem; padding: 0.375rem 0.625rem; }
    .learning-feedback-paper { left: 0.9375rem; right: 0.9375rem; min-height: 9.4375rem; padding: 0.6875rem 0.625rem; }
    .learning-feedback-paper > strong { font-size: 0.4375rem; }
    .learning-comment { font-size: 0.375rem; padding-block: 0.375rem; }
    .learning-score { right: -1.875rem; width: 3.375rem; height: 3.375rem; font-size: 1.75rem; }
    .learning-feedback-note { top: 6.375rem; right: -1.8125rem; font-size: 1.0625rem; }
    .learning-margin-stroke { display: none; }
    .learning-step > h3 { font-size: 1.6875rem; }
    .learning-step > p { max-width: 100%; font-size: 0.8125rem; line-height: 1.5; }
    .learning-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem 0; margin-inline: 0; margin-top: 2rem; padding: 1.4375rem 1.125rem; }
    .learning-benefit { padding-inline: 1.0625rem; }
    .learning-benefit:nth-child(3) { border-left: 0; padding-left: 0.4375rem; }
    .learning-benefit-icon { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
    .learning-benefit h3 { font-size: 1.3125rem; }
    .learning-benefit p { font-size: 0.6875rem; }
}
@media (max-width: 480px) {
    .learning-heading { padding-right: 0; margin-bottom: 1.8125rem; }
    .learning-heading .eyebrow { margin-bottom: 1rem; }
    .learning-heading h2 { max-width: 21.875rem; font-size: 2.75rem; }
    .learning-subtitle { max-width: 20.625rem; margin-top: 0.625rem; font-size: 1.8125rem; }
    .learning-intro { font-size: 0.8125rem; line-height: 1.65; }
    .learning-decoration { display: none; }
    .learning-steps { grid-template-columns: 1fr; gap: 1.8125rem; }
    .learning-visual { height: 11.875rem; margin-inline: 0.375rem; }
    .learning-player { top: 1.625rem; left: 0.75rem; height: 9.0625rem; padding: 1.25rem 0.9375rem; }
    .learning-player-title { font-size: 1.0625rem; }
    .learning-player-play { width: 2.1875rem; height: 2.1875rem; margin-top: 1.0625rem; }
    .learning-player-time { font-size: 0.3125rem; }
    .learning-lesson-plan { top: 1.1875rem; height: 9.6875rem; padding: 0.875rem 0.6875rem; }
    .learning-lesson-plan strong { font-size: 0.5rem; }
    .learning-lesson-plan span, .learning-lesson-plan b { font-size: 0.4375rem; }
    .learning-open-book { height: 12.875rem; bottom: -0.875rem; }
    .learning-sticky { font-size: 1.0625rem; }
    .learning-sticky--top { top: -0.5rem; left: 36%; padding: 0.75rem 0.625rem; }
    .learning-sticky--right { top: 3.25rem; right: 0.625rem; padding: 0.75rem 0.625rem; }
    .learning-sticky--bottom { right: 0.9375rem; bottom: 0; padding: 0.5625rem 0.75rem; }
    .learning-book-arrow { width: 5.3125rem; right: 2.6875rem; top: 0.25rem; }
    .learning-visual--practice { padding-top: 0.9375rem; }
    .learning-editor { width: 82%; height: 11.25rem; padding: 0.875rem 1rem 0.625rem; }
    .learning-editor-head { margin-bottom: 0.5rem; }
    .learning-editor-head strong { font-size: 0.5625rem; }
    .learning-editor-head > span { font-size: 0.4375rem; }
    .learning-editor-tag { font-size: 0.4375rem; margin-bottom: 0.375rem; }
    .learning-editor > p { max-width: 13.125rem; font-size: 0.5625rem; margin-bottom: 0.5rem; }
    .learning-editor-field { height: 3.0625rem; padding: 0.4375rem; font-size: 0.5rem; }
    .learning-editor-field small { font-size: 0.375rem; }
    .learning-editor-submit { font-size: 0.4375rem; padding-block: 0.375rem; }
    .learning-visual--feedback { margin-right: 1.375rem; }
    .learning-feedback-paper { top: 0.9375rem; left: 1.1875rem; right: 1.1875rem; min-height: 10.5625rem; padding: 0.75rem 0.75rem 0.625rem; }
    .learning-feedback-paper > strong { font-size: 0.5rem; }
    .learning-comment { padding-block: 0.5rem; font-size: 0.4375rem; }
    .learning-comment::before { top: 0.625rem; }
    .learning-score { top: 1.5625rem; right: -1.375rem; width: 3.4375rem; height: 3.4375rem; }
    .learning-feedback-note { right: -1.25rem; top: 6.9375rem; font-size: 1.125rem; }
    .learning-step-number { width: 2.6875rem; height: 2.6875rem; margin-top: 0.5rem; }
    .learning-step > h3 { margin-top: 0.3125rem; font-size: 1.8125rem; }
    .learning-step > p { font-size: 0.875rem; line-height: 1.55; }
    .learning-benefits { grid-template-columns: 1fr; gap: 1.125rem; padding: 1.375rem 1.25rem; }
    .learning-benefit, .learning-benefit:first-child, .learning-benefit:nth-child(3), .learning-benefit:last-child { gap: 0.9375rem; padding: 0 0 1.125rem; border-left: 0; border-bottom: 0.0625rem solid #ead3d6; }
    .learning-benefit:last-child { padding-bottom: 0; border: 0; }
    .learning-benefit-icon { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
    .learning-benefit h3 { margin-bottom: 0.3125rem; font-size: 1.4375rem; }
    .learning-benefit p { font-size: 0.75rem; line-height: 1.5; }
}
@media (max-width: 350px) {
    .learning-heading h2 { font-size: 2.4375rem; }
    .learning-subtitle { font-size: 1.625rem; }
    .learning-player-title { font-size: 0.875rem; }
    .learning-lesson-plan { padding-inline: 0.5rem; }
    .learning-lesson-plan span, .learning-lesson-plan b { font-size: 0.375rem; }
    .learning-comment { font-size: 0.375rem; }
}