/* Original page content, in the approved Feny/Duolingo visual language.
   base.css preserves the released B hero and shared controls. */
:root { --primary: #127caf; --surface: #fff; }
.page-width { width: min(1060px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.t-h1 { font-size: 46px; line-height: 1.16; letter-spacing: -.8px; font-weight: 900; color: var(--green); }
.t-h2 { font-size: 28px; line-height: 1.25; font-weight: 900; }
.t-h3 { font-size: 24px; line-height: 1.4; font-weight: 800; }
.t-body { font-size: 19px; line-height: 1.65; color: #707070; }
.muted { color: #707070; }
.button-outline { color: var(--blue); background: #fff; border-color: #e5e5e5; }
.button-outline:hover { background: #f5fbff; }
.button-primary { color: #fff; background: var(--green); border-color: var(--green); border-bottom-color: var(--darkgreen); }
.button-primary:hover { background: #458f00; }
.icon { display: inline-block; flex: 0 0 auto; width: 23px; height: 23px; background: currentColor; mask: var(--icon) center/contain no-repeat; -webkit-mask: var(--icon) center/contain no-repeat; }

/* Three things Feny does, with the original student illustration. */
.section-band { border-top: 2px solid #ededed; }
.learning-section { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 62px; padding-block: 88px; }
.learning-content h2 { max-width: 600px; margin-bottom: 35px; }
.learning-roles { display: grid; }
.learning-role { display: grid; grid-template-columns: 62px 1fr; column-gap: 20px; align-items: center; padding-block: 22px; }
.learning-role + .learning-role { border-top: 2px solid #f0f0f0; }
.ability-icon { grid-row: span 2; display: grid; place-items: center; width: 62px; height: 65px; border-radius: 18px; border-bottom: 5px solid #b9ddec; background: #dff4ff; color: #168dc5; transform: rotate(-5deg); }
.ability-icon .icon { width: 32px; height: 32px; }
.learning-role:nth-child(2) .ability-icon { background: #f1e5ff; color: #9966d7; border-color: #d6c1eb; transform: rotate(5deg); }
.learning-role:nth-child(3) .ability-icon { background: #e6f5d7; color: #65a62b; border-color: #cce5b2; }
.learning-role h3 { font-size: 27px; }
.learning-role .button { font-size: 14px; padding: 9px 16px; min-height: 44px; margin-top: 13px; justify-self: start; letter-spacing: .3px; }
.learning-role .button .icon { width: 18px; height: 18px; }
.role-actions { grid-column: 2; }
.learning-portrait { position: relative; align-self: center; isolation: isolate; }
.learning-portrait::before { content: ''; position: absolute; inset: 18% -2% 3%; background: #fff3c9; border-radius: 44% 56% 56% 44%; z-index: -1; transform: rotate(8deg); }
.learning-portrait img { width: 300px; height: auto; margin-inline: auto; mask-image: linear-gradient(#000 96%, transparent); }

/* Each before/after is an actual comparison from the original page. */
.learning-changes { padding-block: 84px 95px; }
.learning-changes h2 { color: var(--blue); text-align: center; margin-bottom: 45px; }
.changes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.learning-change { text-align: center; padding: 0 4px; --primary: #168ac1; }
.change-illustration { width: 168px; height: 145px; padding: 8px; color: #62a9c8; background: #e9f7ff; border-radius: 46% 54% 49% 51%; margin-bottom: 23px; }
.change-illustration g { stroke-width: 2.4; }
.learning-change:nth-child(2) { --primary: #9a68d5; }
.learning-change:nth-child(2) .change-illustration { color: #a887c9; background: #f2eaff; border-radius: 54% 46% 51% 49%; }
.learning-change:nth-child(3) { --primary: #61a82f; }
.learning-change:nth-child(3) .change-illustration { color: #7fb956; background: #eef8df; }
.change-heading { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 16px; }
.change-heading > span:first-child { font-size: 20px; font-weight: 700; color: #777; }
.change-heading .change-arrow { font-size: 24px; color: #b8b8b8; transform: rotate(90deg); line-height: 1.15; }
.change-heading > span:last-child { color: var(--primary); font-size: 29px; font-weight: 900; }
.change-copy p { font-size: 18px; max-width: 280px; margin: auto; }

/* The original two trust promises, without adding new marketing copy. */
.section-band:has(.trust-section) { background: #faf7ff; border-block: 2px solid #eee5f7; }
.trust-section { display: grid; grid-template-columns: 1.25fr .75fr; gap: 74px; align-items: center; padding-block: 80px; }
.trust-copy h2 { color: #9763cc; max-width: 590px; }
.trust-points { display: grid; gap: 30px; margin-top: 37px; }
.trust-point { padding-left: 25px; border-left: 5px solid #d8bdf0; }
.trust-point h3 { color: #5e4972; font-size: 24px; font-weight: 900; }
.trust-point p { margin-top: 9px; max-width: 480px; }
.trust-portrait { position: relative; isolation: isolate; }
.trust-portrait::before { content: ''; position: absolute; inset: 19% -7% 1%; background: #eadef9; border-radius: 50%; z-index: -1; }
.trust-portrait img { width: 265px; height: auto; margin: auto; mask-image: linear-gradient(#000 96%, transparent); }

/* Testimonials quoted verbatim from the original public page. */
.testimonials { padding-block: 88px 94px; }
.testimonial-heading h2 { text-align: center; margin-bottom: 40px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px; }
.testimonial { margin: 0; display: flex; flex-direction: column; padding: 29px 25px 26px; border: 2px solid #e5e5e5; border-bottom-width: 6px; border-radius: 23px; background: #fff; }
.testimonial blockquote { padding: 0; margin: 0 0 30px; font-size: 21px; line-height: 1.6; font-weight: 700; }
.testimonial figcaption { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.testimonial .t-title { font-size: 20px; font-weight: 900; color: var(--green); }
.testimonial .t-sm { font-size: 14px; line-height: 1.5; }

/* The current chapter catalog and the original book-upload invitation. */
.start-section { padding-block: 85px; }
.start-header h2 { text-align: center; }
.chapter-entry .classes { margin-top: 32px; }
.subject-cards { margin-top: 30px; }
.book-entry { margin: 62px auto 0; display: flex; align-items: center; justify-content: center; gap: 65px; padding: 25px 35px 0; background: #f1f9e7; border-radius: 28px; overflow: hidden; max-width: 850px; border: 2px solid #e0edcf; border-bottom-width: 5px; }
.book-copy { padding-bottom: 25px; }
.book-copy h3 { font-size: 34px; color: #4b8b20; margin-bottom: 24px; }
.book-copy .button { font-size: 16px; }
.book-portrait { flex: 0 0 auto; order: -1; }
.book-portrait img { width: 164px; height: auto; margin-bottom: -8px; }

/* Full original footer content, with the lighter character-led treatment. */
footer#footer { display: block; width: 100%; min-height: 0; padding: 0; background: #f5fbeE; border-top: 2px solid #e3edd6; color: #68775c; }
footer#footer > .page-width { display: block; margin-inline: auto; min-width: 0; }
.footer-invitation { display: flex; align-items: center; justify-content: center; gap: 85px; padding-top: 46px; border-bottom: 2px solid #dde9cf; }
.footer-invitation-copy { max-width: 500px; text-align: center; padding-bottom: 46px; }
.footer-invitation h2 { color: #4a920d; font-size: 49px; line-height: 1.15; font-weight: 900; letter-spacing: -.7px; }
.footer-invitation .button { margin-top: 27px; }
.footer-feny img { width: 190px; height: auto; }
.footer-directory { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 35px; padding-block: 49px; align-items: start; }
.footer-directory .brand { font-size: 29px; }
.footer-directory .brand img { width: 32px; height: 32px; }
.footer-directory .brand .t-h2 { font-size: 29px; margin-left: 0; }
.footer-directory nav { display: flex; flex-direction: column; gap: 0; }
.footer-directory h3 { color: #46553b; font-size: 18px; font-weight: 900; margin: 0 0 13px; }
.footer-directory nav a { font-size: 15px; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.footer-directory nav a:hover, .footer-bottom a:hover { color: #3b750b; text-decoration: underline; }
.footer-bottom { border-top: 2px solid #dde9cf; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-block: 20px; font-size: 13px; }
.footer-bottom > div { display: flex; gap: 24px; }
.footer-bottom a { min-height: 44px; display: flex; align-items: center; }

@media(max-width:1000px) {
  .learning-section, .trust-section { gap: 35px; }
  .t-h1 { font-size: 40px; }
  .learning-portrait img { width: 260px; }
  .trust-portrait img { width: 230px; }
  .changes-grid { gap: 24px; }
  .testimonial-grid { gap: 16px; }
  .testimonial { padding: 24px 19px; }
  .testimonial blockquote { font-size: 19px; }
  .footer-directory { grid-template-columns: repeat(3,1fr); }
  .footer-directory .brand { grid-column: 1/-1; }
}
@media(max-width:720px) {
  .page-width { width: calc(100% - 40px); }
  .t-h1 { font-size: 36px; line-height: 1.17; letter-spacing: -.6px; }
  .t-body { font-size: 18px; }
  .learning-section { grid-template-columns: 1fr; gap: 35px; padding-block: 58px; }
  .learning-content h2 { text-align: center; margin: 0 auto 25px; max-width: 380px; }
  .learning-role { grid-template-columns: 56px 1fr; gap: 0 17px; padding-block: 24px; }
  .ability-icon { width: 56px; height: 61px; }
  .learning-role h3 { font-size: 25px; }
  .learning-role .button { font-size: 13px; padding: 9px 13px; margin-top: 12px; }
  .learning-portrait { width: min(290px,90%); margin: auto; }
  .learning-portrait img { width: 240px; }
  .learning-changes { padding-block: 57px; }
  .learning-changes h2 { max-width: 390px; margin: 0 auto 38px; }
  .changes-grid { grid-template-columns: 1fr; gap: 32px; }
  .learning-change { display: grid; grid-template-columns: 115px 1fr; gap: 19px; align-items: center; padding: 0; text-align: left; }
  .change-illustration { width: 115px; height: 125px; margin: 0; }
  .change-heading { align-items: center; text-align: center; margin-bottom: 10px; }
  .change-heading > span:first-child { font-size: 17px; }
  .change-heading > span:last-child { font-size: 26px; }
  .change-heading .change-arrow { font-size: 21px; margin-left: 0; }
  .change-copy p { font-size: 16px; line-height: 1.55; max-width: none; }
  .trust-section { grid-template-columns: 1fr; gap: 40px; padding-block: 57px; }
  .trust-copy h2 { text-align: center; max-width: 390px; margin: auto; }
  .trust-points { margin-top: 29px; gap: 28px; }
  .trust-point { padding-left: 18px; }
  .trust-point h3 { font-size: 23px; }
  .trust-point p { font-size: 17px; }
  .trust-portrait { width: min(245px,80%); margin: auto; }
  .trust-portrait img { width: 210px; }
  .testimonials { padding-block: 58px; }
  .testimonial-heading h2 { margin-bottom: 29px; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 18px; }
  .testimonial { padding: 26px; }
  .testimonial blockquote { font-size: 21px; line-height: 1.5; margin-bottom: 22px; }
  .start-section { padding-block: 57px; }
  .book-entry { margin-top: 36px; gap: 10px; padding: 23px 19px 0; border-radius: 22px; }
  .book-copy { padding-bottom: 23px; }
  .book-copy h3 { font-size: 25px; line-height: 1.25; margin-bottom: 18px; }
  .book-copy .button { font-size: 13px; padding: 10px 12px; letter-spacing: .2px; min-height: 45px; }
  .book-copy .button .icon { width: 18px; height: 18px; }
  .book-portrait img { width: 105px; }
  .footer-invitation { gap: 9px; padding-top: 28px; }
  .footer-invitation-copy { padding-bottom: 30px; max-width: 62%; }
  .footer-invitation h2 { font-size: 31px; }
  .footer-invitation .button { font-size: 16px; padding-inline: 16px; margin-top: 21px; }
  .footer-invitation .button .icon { display: none; }
  .footer-feny { align-self: flex-end; }
  .footer-feny img { width: 124px; }
  .footer-directory { grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: 34px; gap: 28px 20px; }
  .footer-directory .brand { grid-column: 1/-1; }
  .footer-directory h3 { font-size: 18px; }
  .footer-directory nav a { font-size: 15px; min-height: 44px; }
  .footer-bottom { flex-direction: column; gap: 4px; padding-block: 19px; }
  .footer-bottom > div { gap: 24px; }
}
@media(max-width:370px) {
  .t-h1 { font-size: 32px; }
  .learning-role { column-gap: 13px; grid-template-columns: 47px 1fr; }
  .ability-icon { width: 47px; height: 54px; }
  .learning-role h3 { font-size: 22px; }
  .learning-role .button { font-size: 12px; padding-inline: 10px; }
  .learning-role .button .icon { display: none; }
  .learning-change { grid-template-columns: 86px 1fr; gap: 14px; }
  .change-illustration { width: 86px; height: 110px; padding: 2px; }
  .change-heading > span:last-child { font-size: 24px; }
  .book-entry { padding-inline: 13px; gap: 5px; }
  .book-copy .button { padding-inline: 9px; }
  .book-copy .button .icon { display: none; }
  .book-portrait img { width: 89px; }
  .footer-invitation h2 { font-size: 28px; }
  .footer-invitation .button { font-size: 14px; padding-inline: 12px; }
  .footer-feny img { width: 100px; }
}

/* Approved trust checklist replaces the descriptive paragraphs. */
.trust-checklist { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 7px; max-width: 470px; }
.trust-checklist li { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 13px 0; border-bottom: 2px solid #eadff3; color: #5e4972; font-size: 27px; font-weight: 900; line-height: 1.25; }
.trust-checklist li:last-child { border-bottom: 0; }
.trust-verdict { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; border-bottom: 3px solid; }
.trust-verdict.positive { color: #438a00; background: #e6f5d5; border-color: #c5dfa7; }
.trust-verdict.negative { color: #d8444c; background: #ffe8e9; border-color: #f3bec2; }
.trust-verdict svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .trust-checklist { margin-top: 26px; } .trust-checklist li { font-size: 25px; padding-block: 12px; } }
@media (max-width: 370px) { .trust-checklist li { font-size: 23px; } }

.subject-symbol > img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* Collapsed trust rows keep the checklist layout; explanations grow below. */
.trust-copy { align-self: start; }
.trust-checklist li { display: block; padding: 0; }
.trust-feature { width: 100%; }
.trust-feature summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 64px; padding: 13px 0; list-style: none; cursor: pointer; border-radius: 7px; }
.trust-feature summary::-webkit-details-marker { display: none; }
.trust-feature summary::marker { content: ''; }
.trust-feature summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.trust-feature summary:hover, .trust-feature[open] summary { color: #8553b1; }
.trust-explanation { margin: 0; padding: 0 0 17px; color: #706078; font-size: 18px; font-weight: 600; line-height: 1.5; }
.trust-feature[open] .trust-explanation { animation: trust-reveal 160ms ease-out; }
@keyframes trust-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:720px) { .trust-feature summary { padding-block: 12px; } .trust-explanation { font-size: 17px; } }
@media(prefers-reduced-motion:reduce) { .trust-feature[open] .trust-explanation { animation: none; } }

/* Matching desktop/mobile destinations, with an accessible disclosure menu. */
.site-header .nav { gap: 20px; }
.site-header .nav-links { gap: 24px; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 10px; border: 2px solid #e5e5e5; border-bottom-width: 4px; border-radius: 13px; color: #438a00; background: #fff; }
.menu-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.menu-toggle .menu-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-bars { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: block; }
.mobile-nav { display: none; }
@media(max-width:900px) {
  .site-header .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav:not([hidden]) { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 2px; padding: 12px max(20px,calc((100% - 1060px)/2)) 18px; background: #fff; border-bottom: 3px solid #e5e5e5; box-shadow: 0 12px 20px -18px #555; max-height: calc(100svh - 90px); overflow-y: auto; }
  .mobile-nav a { display: flex; align-items: center; min-height: 51px; padding: 10px 16px; border-radius: 12px; color: #555; font-size: 19px; font-weight: 800; }
  .mobile-nav a:hover, .mobile-nav a:focus-visible { color: #438a00; background: #f0f8e7; }
}
@media(max-width:720px) {
  .site-header .nav { gap: 10px; }
  .nav-actions { gap: 8px; }
  .menu-toggle { width: 44px; height: 44px; }
  .mobile-nav:not([hidden]) { max-height: calc(100svh - 75px); }
}
@media(max-width:370px) {
  .site-header .brand { font-size: 24px; gap: 7px; }
  .site-header .brand img { width: 24px; height: 24px; }
  .site-header .brand span { margin-left: -7px; }
  .site-header .sign-in { padding-inline: 13px; }
}

/* Visible disclosure affordances: raised rows, chevrons and hover feedback. */
.trust-checklist { gap: 12px; }
.trust-checklist li, .trust-checklist li:last-child { border: 2px solid #e6ddef; border-bottom: 4px solid #ddd0e9; border-radius: 16px; background: #fff; }
.trust-feature summary { padding: 14px 16px; gap: 12px; border-radius: 13px; }
.trust-row-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.trust-chevron { width: 21px; height: 21px; fill: none; stroke: #9d83b4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.trust-feature[open] .trust-chevron { transform: rotate(180deg); stroke: #8553b1; }
.trust-feature[open] summary { background: #f4ecfc; }
.trust-feature .trust-explanation { padding: 12px 16px 17px; }
@media(hover:hover) { .trust-feature summary:hover { background: #f4ecfc; } }
@media(max-width:720px) { .trust-feature summary { padding: 12px 14px; } .trust-checklist li { font-size: 24px; } .trust-row-actions { gap: 9px; } }
@media(max-width:370px) { .trust-feature summary { padding: 11px 12px; gap: 9px; } .trust-checklist li { font-size: 21px; } .trust-row-actions { gap: 6px; } .trust-chevron { width: 18px; height: 18px; } .trust-row-actions .trust-verdict { width: 32px; height: 32px; flex-basis: 32px; } }

/* A third subject tile balances the lower-left space around Feny. */
.hero-art .hero-magnet { left: 4%; top: 66%; padding: 5px; background: #ee83b0; border-color: #cc5b8b; color: #fff; transform: rotate(10deg); }
@media(max-width:720px) and (max-height:740px) { .hero-art .hero-magnet { top: 58%; } }
@media(max-width:720px) and (max-height:600px) { .hero-art .hero-magnet { top: 50%; } }