@font-face { font-family: Study Manrope; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/manrope-400.ttf") format("truetype"); }
@font-face { font-family: Study Manrope; font-weight: 600; font-style: normal; font-display: swap; src: url("./fonts/manrope-600.ttf") format("truetype"); }
@font-face { font-family: Study Manrope; font-weight: 700; font-style: normal; font-display: swap; src: url("./fonts/manrope-700.ttf") format("truetype"); }
@font-face { font-family: Study Fraunces; font-weight: 500; font-style: normal; font-display: swap; src: url("./fonts/fraunces-500.ttf") format("truetype"); }

/* Loaded only by the public sample player, not the homepage. */
.try-hero h1 { font-family: "Study Fraunces", Georgia, serif; font-weight: 500; }
.player, .lesson-pick { font-family: "Study Manrope", system-ui, sans-serif; --violet: #6042c8; --line: #d9d2df; --ink: #24212b; }
.page-card { background: none; border: none; border-radius: 0; padding: 24px 0; box-shadow: none; }
.page-body { font-size: 1.0625rem; line-height: 1.75; }
.player-top { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.progress { height: 3px; }
.progress > span { background: var(--violet); }
.player-nav { border-top: 1px solid var(--line); padding-top: 20px; flex-wrap: wrap; }
.player .btn, .lesson-pick button { border-radius: 8px; box-shadow: none; }
.lesson-pick button:hover { transform: none; }
.page-body.callout { border-left: 3px solid var(--violet); border-radius: 0; }