/* Notes in, flashcards out. Only the example deck has interactive motion. */
.work-hero { padding: 39px 0 92px; overflow: clip; }
.hero-heading { text-align: center; }
.hero-heading h1 { font-size: clamp(4.2rem, 6.65vw, 6.4rem); line-height: 1.06; letter-spacing: -.065em; }
.hero-heading h1 span { color: var(--blue); white-space: nowrap; }
.hero-description { margin: 23px auto 0; max-width: 630px; font-size: 1.0625rem; line-height: 1.8; color: var(--muted); }
.hero-heading .app-button { margin-top: 26px; font-size: 1.0625rem; min-height: 60px; padding-inline: 28px; }
.hero-heading .app-button svg { width: 19px; height: 23px; }

.transformation { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 135px minmax(0, 1fr); align-items: center; max-width: 1080px; padding-top: 78px; isolation: isolate; scroll-margin-top: 40px; }
.transformation::before { content: ''; position: absolute; z-index: -1; inset: 20px -85px -30px 35%; background: radial-gradient(ellipse at 60% 50%, #e7edffb3, #f3f5ff55 48%, transparent 70%); pointer-events: none; }
.source-side, .result-side { min-width: 0; }
.source-side { padding-inline: 22px; }
.paper-pile { position: relative; isolation: isolate; transform: rotate(-6deg); max-width: 385px; margin-inline: auto; }
.loose-page { position: absolute; inset: 0; border: 1px solid #e9e6dd; border-radius: 7px; pointer-events: none; }
.loose-page-back { background: #f4f0e5; transform: rotate(12deg) translate(9px, -4px); box-shadow: 0 10px 25px #555b7510; }
.loose-page-middle { background: #fefcf4; transform: rotate(4deg) translate(-3px, 9px); }
.lecture-page { position: relative; min-height: 349px; padding: 24px 29px 19px; border-radius: 6px; border: 1px solid #eae7df; color: #565e78; background: #fffefa; box-shadow: 0 15px 30px #51516c0d; }
.paper-meta { display: flex; justify-content: space-between; gap: 15px; color: #7d8294; font-size: .5rem; font-weight: 600; letter-spacing: .1em; }
.lecture-page h3 { font-size: 1.5rem; margin-top: 15px; color: #414f78; letter-spacing: -.045em; text-wrap: initial; }
.scribble { font-size: .79rem; line-height: 1.6; text-wrap: initial; }
.note-atp { margin: 16px 0 0 7px; transform: rotate(-2deg); }
.note-mito { margin: 13px 0 0 1px; transform: rotate(1deg); }
.note-diagram { display: flex; align-items: center; gap: 16px; margin: 10px 0 8px 18px; color: #7985b2; }
.note-diagram svg { width: 111px; height: auto; flex-shrink: 0; transform: rotate(-8deg); }
.note-diagram span { font-family: var(--heading); font-size: .6875rem; line-height: 1.45; transform: rotate(6deg); }
.note-folds { margin-left: 24px; transform: rotate(-1deg); }
.margin-note { font-family: var(--heading); font-size: .6875rem; color: #6b79a7; text-align: right; transform: rotate(3deg); margin: 9px 9px 0 0; }
.paper-footer { display: flex; justify-content: space-between; margin-top: 19px; font-size: .5625rem; color: #8d91a2; }
.source-highlight { border-radius: 3px; padding: 2px 3px; margin-inline: -3px; background: transparent; transition: background-color .22s ease; }
.source-highlight.is-active { background: #faeab0b3; }
.transformation-label { margin-top: 43px; text-align: center; font-family: var(--heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.025em; color: var(--muted); }
.result-side > .transformation-label { color: var(--blue); }
.transformation-bridge { text-align: center; padding-bottom: 60px; color: #9aa7d3; }
.bridge-arrow { width: 94px; height: auto; margin: 0 auto 8px; transform: rotate(-7deg); }
.transformation-bridge span { display: block; font-family: var(--heading); font-size: .75rem; font-weight: 700; color: #6d7db8; }

.structured-deck { position: relative; isolation: isolate; width: 100%; max-width: 430px; margin-inline: auto; }
.deck-sheet { position: absolute; inset: 0; border-radius: 28px; pointer-events: none; }
.deck-sheet-back { transform: translate(12px, 14px) rotate(3deg); background: #d9e2ff; box-shadow: 0 15px 38px #7085c41a; }
.deck-sheet-middle { transform: translate(5px, 7px) rotate(1.5deg); background: #eaf0ff; border: 1px solid #f7f9ff; }
.flashcard { position: relative; border-radius: 28px; background: #fff; padding: 25px 29px 17px; box-shadow: 0 3px 4px #7384c40a, 0 12px 35px #6b7db316; border: 1px solid #f6f8ff; }
.deck-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 23px; }
.deck-subject { display: flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 600; color: var(--blue); }
.deck-chapter { font-size: .625rem; color: var(--muted); }
.flashcard-content { min-height: 237px; }
.card-label { font-size: .625rem; font-weight: 600; color: var(--muted); margin-bottom: 9px; }
.example-card h3 { font-size: 1.875rem; line-height: 1.14; letter-spacing: -.04em; text-wrap: initial; min-height: 70px; max-width: 315px; }
.answer-block { margin-top: 21px; padding: 16px 18px; background: #f0f3ff; border-radius: 16px; }
.answer-block > p:last-child { font-size: .8125rem; line-height: 1.65; color: #46588c; text-wrap: initial; }
.answer-block .card-label { color: var(--blue); margin-bottom: 6px; }
.deck-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #eef1f9; margin-top: 10px; padding-top: 12px; min-height: 55px; }
.deck-status { display: inline-flex; align-items: center; gap: 4px; color: #287763; font-size: .625rem; white-space: nowrap; }
.deck-controls { display: flex; align-items: center; gap: 5px; }
.deck-count { font-size: .625rem; margin-right: 9px; font-weight: 600; color: #465b94; font-variant-numeric: tabular-nums; }
.deck-count span:not(.deck-current) { color: var(--muted); }
.card-step { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 50%; background: #f0f3ff; color: #546dd1; transition: background .18s ease, transform .18s ease; }
.card-step:hover { background: #e2e9ff; transform: translateY(-1px); }
.card-step:active { transform: scale(.94); }
.example-caption { text-align: center; font-size: .75rem; color: var(--muted); margin: 30px 24px 0; }

.study-section { display: grid; grid-template-columns: 1fr 1fr; max-width: 1180px; align-items: center; gap: 80px; margin-top: 33px; margin-bottom: 77px; border-top: 1px solid var(--line); padding-top: 85px; padding-bottom: 26px; }
.study-copy { padding-left: 24px; }
.study-copy > .eyebrow { color: var(--blue); margin-bottom: 22px; }
.study-copy h2 { font-size: clamp(3rem, 4.3vw, 4rem); line-height: 1.07; letter-spacing: -.055em; }
.study-description { color: var(--muted); font-size: .9375rem; line-height: 1.85; margin-top: 26px; max-width: 390px; }
.study-benefits { display: grid; gap: 25px; margin-top: 31px; max-width: 350px; }
.study-benefits h3 { font-size: 1.1875rem; letter-spacing: -.025em; line-height: 1.35; }
.study-benefits p { font-size: .8125rem; line-height: 1.8; color: var(--muted); margin-top: 6px; }
.library-scene { position: relative; min-height: 575px; display: flex; flex-direction: column; justify-content: center; align-items: center; isolation: isolate; }
.library-orbit { position: absolute; width: 460px; height: 430px; top: 50%; left: 50%; transform: translate(-50%, -51%) rotate(-12deg); border-radius: 47% 53% 58% 42% / 51% 43% 57% 49%; background: #edf1ff; z-index: -1; }
.app-phone { width: 260px; padding: 6px; border-radius: 41px; background: #1a2040; border: 1px solid #555e7c; box-shadow: inset 0 0 0 2px #3b4156, 8px 17px 24px #2332621a; transform: rotate(5deg); }
.app-phone img { display: block; width: 100%; height: auto; border-radius: 34px; }
.library-caption { margin-top: 31px; font-family: var(--heading); color: var(--muted); font-size: .875rem; line-height: 1.5; text-align: center; }

@media (min-width: 1600px) {
  .work-hero { padding-top: 51px; }
  .transformation { padding-top: 94px; }
}
@media (max-width: 1150px) {
  .work-hero { padding-top: 36px; }
  .hero-heading h1 { font-size: 7vw; }
  .transformation { grid-template-columns: minmax(0, 1fr) 95px minmax(0, 1fr); padding-top: 69px; }
  .source-side { padding-inline: 12px; }
  .lecture-page { padding-inline: 22px; }
  .note-diagram { margin-left: 5px; gap: 9px; }
  .note-folds { margin-left: 5px; }
  .scribble { font-size: .6875rem; }
  .bridge-arrow { width: 78px; }
  .transformation-bridge span { font-size: .625rem; }
  .flashcard { padding: 23px 23px 16px; }
  .example-card h3 { font-size: 1.625rem; }
  .deck-heading { gap: 8px; }
  .deck-chapter { font-size: .5625rem; }
  .answer-block { padding-inline: 14px; }
  .answer-block > p:last-child { font-size: .75rem; }
  .deck-count { margin-right: 4px; }
  .study-section { gap: 48px; padding-top: 60px; }
  .study-copy { padding-left: 0; }
  .library-orbit { width: 370px; height: 390px; }
  .library-caption { right: -10px; font-size: .75rem; }
}
@media (max-width: 860px) {
  .hero-description { font-size: .9375rem; }
  .transformation { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
  .source-side { padding-inline: 7px; }
  .lecture-page { padding: 20px 17px; min-height: 346px; }
  .paper-meta { font-size: .4375rem; }
  .lecture-page h3 { font-size: 1.25rem; }
  .note-diagram svg { width: 90px; }
  .note-diagram span { font-size: .5625rem; }
  .scribble { font-size: .625rem; }
  .note-folds { margin-left: 0; }
  .margin-note { font-size: .5625rem; }
  .note-diagram { margin-block: 18px; }
  .bridge-arrow { width: 58px; }
  .transformation-bridge span { font-size: .5rem; }
  .flashcard { padding: 23px 20px 16px; }
  .deck-heading { flex-wrap: wrap; row-gap: 5px; padding-bottom: 18px; }
  .example-card h3 { font-size: 1.4375rem; min-height: 79px; }
  .flashcard-content { min-height: 243px; }
  .answer-block { padding: 12px; margin-top: 15px; }
  .answer-block > p:last-child { font-size: .6875rem; }
  .deck-status { font-size: .5rem; }
  .deck-count { display: none; }
  .deck-footer { gap: 4px; }
  .card-step { width: 40px; height: 40px; }
  .transformation-label { font-size: .875rem; margin-top: 38px; }
  .study-section { gap: 35px; }
  .study-copy h2 { font-size: 3rem; }
  .study-description { font-size: .875rem; }
  .library-scene { min-height: 530px; }
  .app-phone { width: 222px; border-radius: 36px; }
  .app-phone img { border-radius: 28px; }
  .library-orbit { width: 290px; height: 370px; }
  .library-caption { bottom: 0; }
}
@media (max-width: 640px) {
  .work-hero { padding-top: 27px; padding-bottom: 49px; }
  .hero-heading h1 { font-size: clamp(3.5rem, 13.3vw, 5rem); line-height: 1.025; }
  .hero-heading h1 span { display: block; }
  .hero-description { font-size: .9375rem; line-height: 1.8; max-width: 355px; padding-inline: 5px; margin-top: 23px; }
  .desktop-break { display: none; }
  .hero-heading .app-button { margin-top: 24px; font-size: 1rem; min-height: 58px; padding-inline: 26px; }
  .transformation { grid-template-columns: 1fr; max-width: 440px; width: calc(100% - 54px); padding-top: 42px; }
  .transformation::before { inset: 34% -24px -35px; background: radial-gradient(ellipse at 50% 66%, #e6edffb3, transparent 68%); }
  .source-side { padding-inline: 14px; }
  .paper-pile { max-width: 300px; transform: rotate(-5deg); }
  .lecture-page { min-height: 0; padding: 17px 23px 21px; }
  .paper-meta { font-size: .4375rem; }
  .lecture-page h3 { margin-top: 10px; font-size: 1.3125rem; }
  .scribble { font-size: .6875rem; }
  .note-atp { margin-top: 12px; }
  .note-mito { margin-top: 10px; }
  .note-diagram, .margin-note, .paper-footer { display: none; }
  .note-folds { margin: 9px 0 0 15px; }
  .source-side > .transformation-label { margin-top: 26px; font-size: .875rem; }
  .transformation-bridge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 21px; }
  .bridge-arrow { width: 47px; height: 45px; margin: 0; transform: rotate(88deg); }
  .transformation-bridge span { font-size: .6875rem; }
  .structured-deck { max-width: 355px; }
  .deck-sheet, .flashcard { border-radius: 25px; }
  .deck-sheet-back { transform: translate(8px, 11px) rotate(2deg); }
  .flashcard { padding: 23px 25px 15px; }
  .deck-heading { flex-wrap: nowrap; padding-bottom: 23px; }
  .deck-subject { font-size: .625rem; }
  .deck-chapter { font-size: .5625rem; }
  .example-card h3 { font-size: 1.625rem; min-height: 89px; }
  .flashcard-content { min-height: 238px; }
  .answer-block { margin-top: 16px; padding: 14px 16px; }
  .answer-block > p:last-child { font-size: .75rem; }
  .deck-status { font-size: .5625rem; }
  .deck-count { display: inline; font-size: .5625rem; margin-right: 5px; }
  .card-step { width: 44px; height: 44px; }
  .deck-footer { padding-top: 11px; margin-top: 9px; }
  .result-side > .transformation-label { margin-top: 28px; font-size: 1rem; }
  .example-caption { font-size: .6875rem; margin-top: 17px; }
  .study-section { grid-template-columns: 1fr; gap: 15px; margin-top: 13px; margin-bottom: 23px; padding-top: 42px; padding-bottom: 26px; }
  .study-copy { padding-inline: 7px; }
  .study-copy > .eyebrow { font-size: .6875rem; margin-bottom: 17px; }
  .study-copy h2 { font-size: clamp(2.9rem, 11.5vw, 3.5rem); }
  .study-description { font-size: .875rem; margin-top: 23px; max-width: 360px; }
  .study-benefits { gap: 23px; margin-top: 26px; }
  .study-benefits h3 { font-size: 1.125rem; }
  .study-benefits p { font-size: .8125rem; }
  .library-scene { min-height: 555px; margin-top: 10px; }
  .app-phone { width: 231px; }
  .library-orbit { width: 310px; height: 370px; }
  .library-caption { font-size: .8125rem; }
}
@media (max-width: 370px) {
  .hero-heading h1 { font-size: 12.9vw; }
  .hero-description { font-size: .875rem; }
  .transformation { width: calc(100% - 42px); }
  .source-side { padding-inline: 8px; }
  .lecture-page { padding-inline: 18px; }
  .flashcard { padding-inline: 20px; }
  .deck-status { font-size: .5rem; gap: 2px; }
  .deck-count { margin-right: 3px; }
  .deck-controls { gap: 3px; }
  .deck-count { display: none; }
  .card-step { width: 44px; height: 44px; }
  .library-orbit { width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .source-highlight, .card-step { transition: none; }
  .card-step:hover, .card-step:active { transform: none; }
}