.fp-home { background: var(--fp-paper); color: var(--fp-ink); font-family: var(--fp-sans); }
body:has(.fp-home) { background: var(--fp-paper); }
.main-content:has(.fp-home) { padding-bottom: 0; }
.fp-home h1, .fp-home h2, .fp-home h3, .fp-home p { margin: 0; }
.fp-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.fp-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--fp-brass); }
.fp-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 60px; padding-block: 66px 62px; }
.fp-hero h1 { font-family: var(--fp-heading); font-weight: 900; font-size: clamp(44px, 4.2vw, 60px); line-height: 1.15; letter-spacing: -1.8px; margin-top: 25px; }
.fp-hero h1 em { color: #087b72; font-style: normal; font-weight: 900; text-decoration: underline; text-decoration-color: #f5ca55; text-decoration-thickness: 6px; text-underline-offset: 8px; }
.fp-hero-copy > p { margin-top: 25px; max-width: 450px; font-size: 14px; line-height: 1.9; color: var(--fp-muted); }
.fp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 30px; }
.fp-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 56px; padding: 16px 24px; background: var(--fp-ink); color: #fff; border: 2px solid var(--fp-ink); border-radius: 6px; font: 600 15px/1.5 var(--fp-sans); text-decoration: none; transition: background .2s; }
.fp-button:hover { background: #2c5147; color: #fff; }
.fp-button-secondary { background: #ead9b3; border-color: #b79552; color: var(--fp-ink); }
.fp-button-secondary:hover { background: #ddc695; border-color: #8b6a31; color: var(--fp-ink); }
.fp-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--fp-ink); font-size: 12px; font-weight: 500; text-decoration: none; border-bottom: 1px solid #a4ada0; }
.fp-text-link:hover { color: #7d6543; border-color: #7d6543; }
.fp-hero-note { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--fp-muted); font-size: 10px; }
.fp-hero-note i { color: var(--fp-brass); }
.fp-search-strip { border-block: 1px solid var(--fp-line); }
.fp-search-inner { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 55px; padding-block: 27px; }
.fp-search-title { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.fp-search-hint { font-size: 11px; color: var(--fp-muted); }
.fp-search { display: flex; align-items: center; gap: 12px; padding: 5px 5px 5px 19px; border: 1px solid #bec6b9; background: #fffef9; }
.fp-search > i { font-size: 13px; color: var(--fp-muted); }
.fp-search input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--fp-ink); font: 12px var(--fp-sans); padding: 12px 0; }
.fp-search button { border: 0; background: var(--fp-ink); color: #fff; min-width: 44px; height: 44px; }
.fp-section { padding-block: 76px; }
.fp-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 34px; }
.fp-section h2, .fp-practice h2, .fp-closing h2 { font: 800 37px/1.25 var(--fp-heading); letter-spacing: -1px; margin-top: 16px; }
.fp-section-head > p { max-width: 330px; color: var(--fp-muted); font-size: 12px; line-height: 1.85; }
.fp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fp-path { min-height: 270px; padding: 29px; border: 1px solid #d5d8cc; background: #efeee5; color: var(--fp-ink); text-decoration: none; display: flex; flex-direction: column; transition: background .2s, border-color .2s; }
.fp-path:nth-child(2) { background: #e7ece5; }
.fp-path.fp-path-featured { background: #1b423b; border-color: #1b423b; color: #f6f0e3; }
.fp-path:hover { color: var(--fp-ink); border-color: #879784; background: #e4e8dc; }
.fp-path.fp-path-featured:hover { color: #fff; background: #285249; }
.fp-path-top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; }
.fp-path-top i { font-size: 23px; color: #7b845d; }
.fp-path-featured .fp-path-top i { color: #cdb985; }
.fp-path h3 { font: 800 28px var(--fp-heading); letter-spacing: -.5px; margin: 27px 0 12px; }
.fp-path p { font-size: 12px; line-height: 1.8; color: #5f6a5c; }
.fp-path-featured p { color: #c0cec2; }
.fp-path-bottom { margin-top: auto; padding-top: 25px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; }
.fp-class-directory { margin-top: 35px; border-top: 1px solid var(--fp-line); }
.fp-class-directory > summary { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; font-size: 12px; cursor: pointer; list-style: none; }
.fp-class-directory > summary::-webkit-details-marker { display: none; }
.fp-class-directory[open] > summary i { transform: rotate(180deg); }
.fp-class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 15px; }
.fp-class-entry { padding: 20px; background: #fffef9; border: 1px solid var(--fp-line); }
.fp-class-entry > a { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 44px; color: var(--fp-ink); text-decoration: none; font-size: 13px; }
.fp-class-entry small { display: block; color: var(--fp-muted); font-size: 10px; margin-top: 8px; }
.fp-class-entry h3 { font: 800 20px var(--fp-heading); }
.fp-notify label { display: block; font-size: 10px; margin: 12px 0 5px; }
.fp-notify-row { display: flex; }
.fp-notify input { width: 100%; min-width: 0; border: 1px solid #bbc5b8; padding: 10px; font-size: 11px; border-radius: 0; }
.fp-notify button { padding: 10px; background: var(--fp-ink); color: white; border: 0; font-size: 10px; min-height: 44px; }
.fp-empty { font-size: 13px; color: var(--fp-muted); padding: 24px 0; grid-column: 1 / -1; }
.fp-practice { background: #e9ede5; border-block: 1px solid #dce2d6; padding-block: 65px; }
.fp-practice-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.fp-practice p { color: var(--fp-muted); font-size: 13px; line-height: 1.9; margin: 20px 0 26px; max-width: 420px; }
.fp-practice-steps { display: flex; flex-direction: column; }
.fp-step { padding: 23px 0; display: flex; gap: 26px; border-bottom: 1px solid #cbd2c4; }
.fp-step:first-child { border-top: 1px solid #cbd2c4; }
.fp-step > span { font: 800 25px var(--fp-heading); color: #8b7951; }
.fp-step h3 { font-size: 13px; font-weight: 500; margin: 3px 0 7px; }
.fp-step p { font-size: 11px; margin: 0; line-height: 1.8; }
.fp-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.fp-resource { padding-top: 23px; border-top: 1px solid #b7c0ae; color: var(--fp-ink); text-decoration: none; }
.fp-resource > span { font-size: 9px; color: #786a4a; letter-spacing: 1.5px; text-transform: uppercase; }
.fp-resource h3 { font: 800 25px var(--fp-heading); margin: 17px 0 12px; }
.fp-resource p { font-size: 12px; line-height: 1.8; color: var(--fp-muted); max-width: 310px; }
.fp-resource b { display: flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 13px; font-size: 11px; font-weight: 500; }
.fp-resource:hover { color: #7d6543; border-color: #7d6543; }
.fp-closing { border-top: 1px solid var(--fp-line); padding-block: 45px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.fp-closing h2 { margin: 0; font-size: 32px; }
.fp-closing p { font-size: 12px; color: var(--fp-muted); margin-top: 12px; }
.fp-install { position: fixed; bottom: 20px; right: 20px; z-index: 1040; width: min(400px, calc(100% - 40px)); padding: 22px; background: #fffef9; border: 1px solid #bec6b9; box-shadow: 0 8px 28px #163b3620; }
.fp-install p { font-size: 12px; margin: 8px 0 18px; }
.fp-install-close { float: right; width: 44px; height: 44px; margin: -10px; border: 0; background: transparent; color: var(--fp-ink); }
@media (max-width: 1199px) {
    .fp-hero { gap: 35px; }
    .fp-practice-inner { gap: 55px; }
}
@media (max-width: 991px) {
    .fp-hero { padding-block: 45px; gap: 30px; }
    .fp-hero h1 { font-size: 46px; letter-spacing: -2px; }
    .fp-search-inner { gap: 30px; }
    .fp-path { padding: 22px; }
    .fp-path h3 { font-size: 24px; }
    .fp-section h2, .fp-practice h2 { font-size: 34px; }
    .fp-class-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .fp-hero { grid-template-columns: 1fr; padding-block: 36px 32px; gap: 35px; }
    .fp-hero h1 { font-size: clamp(35px, 8.5vw, 50px); line-height: 1.14; max-width: 540px; }
    .fp-hero-copy > p { font-size: 13px; margin-top: 22px; }
    .fp-hero-actions { gap: 22px; margin-top: 25px; }
    .fp-hero-note { margin-top: 22px; }
    .fp-search-inner { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
    .fp-section { padding-block: 48px; }
    .fp-section-head { flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 25px; }
    .fp-paths, .fp-resources, .fp-practice-inner { grid-template-columns: 1fr; }
    .fp-path { min-height: 230px; padding: 25px; }
    .fp-path h3 { font-size: 28px; margin-top: 20px; }
    .fp-path-bottom { padding-top: 20px; }
    .fp-practice { padding-block: 45px; }
    .fp-practice-inner { gap: 35px; }
    .fp-class-grid { grid-template-columns: 1fr; }
    .fp-resources { gap: 28px; }
    .fp-closing { flex-direction: column; align-items: flex-start; padding-block: 35px 45px; }
}
@media (max-width: 380px) {
    .fp-hero-actions { gap: 14px; }
    .fp-button { padding-inline: 18px; gap: 20px; }
}

/* Student-facing labels and actions stay readable at every screen size. */
.fp-eyebrow { font-size: 11px; letter-spacing: 1.4px; font-weight: 600; }
.fp-hero-copy > p { font-size: 16px; line-height: 1.8; }
.fp-hero-actions { gap: 14px; }
.fp-hero-note { font-size: 13px; }
.fp-search-title { font-size: 17px; font-weight: 600; }
.fp-search-hint { font-size: 14px; }
.fp-search input { font-size: 16px; }
.fp-search button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; padding: 12px 18px; min-height: 50px; height: auto; border-radius: 4px; font-size: 14px; font-weight: 600; }
.fp-search:focus-within { outline: 2px solid var(--fp-ink); outline-offset: 3px; }
.fp-section-head > p, .fp-path p, .fp-practice p, .fp-resource p, .fp-closing p { font-size: 15px; line-height: 1.8; }
.fp-path-top { font-size: 11px; letter-spacing: 1px; }
.fp-path-bottom { min-height: 50px; margin-top: 24px; padding: 12px 16px; gap: 14px; background: var(--fp-ink); color: white; border-radius: 5px; font-size: 14px; font-weight: 600; }
.fp-path-featured .fp-path-bottom { background: #ead9b3; color: var(--fp-ink); }
.fp-path { min-height: 310px; }
.fp-path p { flex-grow: 1; }
.fp-class-directory > summary { font-size: 16px; font-weight: 600; }
.fp-class-entry > a { font-size: 15px; font-weight: 600; }
.fp-class-entry small, .fp-notify label { font-size: 13px; font-weight: 400; }
.fp-notify input { font-size: 16px; }
.fp-notify button { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.fp-practice .fp-quiz-note { font-size: 13px; margin: 14px 0 0; }
.fp-step h3 { font-size: 16px; font-weight: 600; }
.fp-step p { font-size: 14px; }
.fp-resource > span { font-size: 11px; letter-spacing: 1px; }
.fp-resource b { display: inline-flex; padding: 10px 16px; min-height: 48px; border: 1px solid #8a9c88; border-radius: 5px; background: #e7ece2; font-size: 14px; font-weight: 600; }
@media (max-width: 767px) {
    .fp-hero-actions .fp-button { flex: 1 1 200px; }
    .fp-path { min-height: 280px; }
    .fp-search { padding-left: 12px; gap: 8px; }
    .fp-search > i { display: none; }
    .fp-search button { padding-inline: 12px; gap: 8px; }
}

/* A warm, approachable learning space for Primary and JHS pupils. */
.fp-eyebrow { text-transform: none; letter-spacing: .2px; font-size: 13px; font-weight: 600; }
.fp-eyebrow::before { width: 12px; height: 12px; border-radius: 4px; background: #f3c853; transform: rotate(-10deg); flex-shrink: 0; }
.fp-hero { gap: 44px; padding-block: 52px; }
.fp-button { background: #087b72; border-color: #087b72; border-radius: 12px; box-shadow: 0 3px 0 #075c56; }
.fp-button:hover { background: #06665f; border-color: #06665f; }
.fp-button-secondary { background: #ffdc76; border-color: #ffdc76; color: #244840; box-shadow: 0 3px 0 #d5ae42; }
.fp-button-secondary:hover { background: #f7ce5f; border-color: #f7ce5f; color: #244840; }
.fp-learning-art { min-width: 0; position: relative; padding-bottom: 16px; }
.fp-learning-art img { display: block; width: 100%; height: auto; }
.fp-art-message { display: flex; justify-content: center; align-items: center; gap: 10px; color: #36635b; font: 800 17px var(--fp-heading); text-align: center; }
.fp-art-message i { color: #946b0a; }
.fp-search-strip { background: #edf8f3; border-color: #d4e8df; }
.fp-search { border-radius: 14px; border-color: #b0ccc0; background: white; }
.fp-search button { background: #087b72; border-radius: 10px; }
.fp-path { border-radius: 22px; border: 1px solid #bfdfce; background: #e4f5ea; padding: 28px; }
.fp-path:nth-child(2) { background: #eee9fa; border-color: #d5c9ec; }
.fp-path.fp-path-featured { background: #fff0bf; border-color: #ead48d; color: var(--fp-ink); }
.fp-path:hover { background: #d5eedf; border-color: #73aa8d; }
.fp-path:nth-child(2):hover { background: #e5ddf5; border-color: #a797ca; }
.fp-path.fp-path-featured:hover { background: #ffe9a5; border-color: #c2a54d; color: var(--fp-ink); }
.fp-path-top { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.fp-path-top i { width: 48px; height: 48px; border-radius: 15px; background: white; color: #207c56; display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); }
.fp-path:nth-child(2) .fp-path-top i { color: #7553a2; transform: rotate(6deg); }
.fp-path-featured .fp-path-top i { color: #876406; }
.fp-path h3 { margin-top: 22px; }
.fp-path p, .fp-path-featured p { color: #4c615c; }
.fp-path-bottom, .fp-path-featured .fp-path-bottom { background: #087b72; color: white; border-radius: 11px; }
.fp-class-directory > summary { border-radius: 10px; }
.fp-class-entry { border-radius: 14px; }
.fp-notify input { border-radius: 8px 0 0 8px; }
.fp-notify button { border-radius: 0 8px 8px 0; }
.fp-practice { background: #f2eef9; border-color: #e2d9f0; }
.fp-step { border-color: #d5cbe4; align-items: flex-start; gap: 20px; }
.fp-step:first-child { border-color: #d5cbe4; }
.fp-step > span { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffdc76; color: #594718; font-size: 18px; }
.fp-step:nth-child(2) > span { background: #cdece0; color: #265d4b; }
.fp-step:nth-child(3) > span { background: #e0d5f4; color: #634685; }
.fp-resource { border-top: 3px solid #8ecdb1; }
.fp-resource:nth-child(2) { border-top-color: #b7a1db; }
.fp-resource:nth-child(3) { border-top-color: #edc75c; }
.fp-resource > span { color: #52666a; text-transform: none; letter-spacing: 0; font-size: 13px; }
.fp-resource b { border-radius: 10px; background: #e2f2e9; border-color: #a6cbb7; color: #1d5544; }
.fp-resource:hover { color: #087b72; }
.fp-closing h2 { max-width: 620px; }
.fp-install { border-radius: 18px; }
@media (max-width: 991px) {
    .fp-hero { gap: 24px; }
    .fp-path { padding: 22px; }
}
@media (max-width: 767px) {
    .fp-hero { padding-block: 35px; gap: 20px; }
    .fp-hero h1 { letter-spacing: -1px; }
    .fp-hero h1 em { text-decoration-thickness: 4px; text-underline-offset: 6px; }
    .fp-art-message { font-size: 15px; padding-inline: 8px; }
    .fp-section h2, .fp-practice h2 { font-size: 31px; }
}