.tp-freeSample {
    min-height: 72vh;
    padding: 54px 0 78px;
    background:
        radial-gradient(circle at 95% 5%, rgba(87, 172, 162, .17), transparent 25rem),
        linear-gradient(180deg, #f6f9fb 0%, #eef4f5 100%);
    color: var(--tp-navy, #20365c);
}

.tp-freeSample__hero,
.tp-freeSample__lessonHero {
    max-width: 810px;
    margin: 0 auto;
    text-align: center;
}

.tp-freeSample__eyebrow,
.tp-freeSample__programKicker,
.tp-freeSample__questionTop p {
    margin: 0;
    color: #227673;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tp-freeSample__hero h1,
.tp-freeSample__lessonHero h1 {
    margin: 10px 0 0;
    color: var(--tp-navy, #20365c);
    font-size: clamp(2.15rem, 4.8vw, 3.55rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.07;
}

.tp-freeSample__hero > p:last-child,
.tp-freeSample__lessonHero > p:last-child {
    max-width: 720px;
    margin: 18px auto 0;
    color: #536b88;
    font-size: 1.08rem;
    line-height: 1.6;
}

.tp-freeSample__programGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.tp-freeSample__program {
    display: flex;
    min-height: 236px;
    flex-direction: column;
    padding: 25px;
    border: 1px solid rgba(35, 62, 97, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 11px 26px rgba(32, 54, 92, .06);
    color: var(--tp-navy, #20365c);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.tp-freeSample__program:hover {
    transform: translateY(-3px);
    border-color: rgba(33, 111, 107, .45);
    box-shadow: 0 16px 30px rgba(32, 54, 92, .12);
    color: var(--tp-navy, #20365c);
}

.tp-freeSample__program:focus-visible,
.tp-freeSample__gradePicker a:focus-visible,
.tp-freeSample__back:focus-visible,
.tp-freeSample__diagnosticLink:focus-visible {
    outline: 3px solid rgba(34, 118, 115, .5);
    outline-offset: 3px;
}

.tp-freeSample__program h2 {
    margin: 10px 0 0;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.tp-freeSample__program > p {
    margin: 10px 0 0;
    color: #5a708a;
    font-size: .94rem;
    line-height: 1.5;
}

.tp-freeSample__programAction {
    margin-top: auto;
    padding-top: 18px;
    color: #216d6a;
    font-weight: 800;
}

.tp-freeSample__reassurance {
    display: flex;
    max-width: 860px;
    gap: 12px;
    align-items: flex-start;
    margin: 30px auto 0;
    padding: 17px 21px;
    border: 1px solid #c9e1de;
    border-radius: 16px;
    background: rgba(237, 248, 246, .9);
    color: #345b70;
}

.tp-freeSample__reassurance > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #287c77;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.tp-freeSample__reassurance p {
    margin: 0;
    line-height: 1.5;
}

.tp-freeSample__back {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #216d6a;
    font-weight: 750;
    text-decoration: none;
}

.tp-freeSample__lessonHero {
    margin-top: 30px;
}

.tp-freeSample__gradePicker {
    display: flex;
    max-width: 880px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 34px auto 0;
}

.tp-freeSample__gradePicker > span {
    margin-right: 4px;
    color: #5c7089;
    font-size: .92rem;
    font-weight: 650;
}

.tp-freeSample__gradePicker a {
    padding: 8px 13px;
    border: 1px solid rgba(35, 62, 97, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #32526d;
    font-size: .9rem;
    font-weight: 750;
    text-decoration: none;
}

.tp-freeSample__gradePicker a:hover,
.tp-freeSample__gradePicker a.is-active {
    border-color: #287a76;
    background: #287a76;
    color: #fff;
}

.tp-freeSample__questions {
    display: grid;
    max-width: 880px;
    gap: 18px;
    margin: 26px auto 0;
}

.tp-freeSample__question {
    padding: 27px;
    border: 1px solid rgba(35, 62, 97, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(32, 54, 92, .05);
}

.tp-freeSample__questionTop {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

.tp-freeSample__questionTop > span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #e8f4f2;
    color: #287570;
    font-size: .75rem;
    font-weight: 750;
}

.tp-freeSample__question h2 {
    margin: 15px 0 0;
    color: var(--tp-navy, #20365c);
    font-size: clamp(1.18rem, 2.5vw, 1.45rem);
    font-weight: 820;
    letter-spacing: -.02em;
}

.tp-freeSample__question fieldset {
    min-width: 0;
    margin: 17px 0 0;
}

.tp-freeSample__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tp-freeSample__choices label {
    display: flex;
    min-height: 48px;
    gap: 10px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid rgba(35, 62, 97, .17);
    border-radius: 11px;
    color: #36536d;
    cursor: pointer;
    font-weight: 650;
}

.tp-freeSample__choices label:has(input:checked) {
    border-color: #287a76;
    background: #edf8f6;
    color: #1d625f;
}

.tp-freeSample__choices input {
    accent-color: #287a76;
}

.tp-freeSample__check {
    margin-top: 16px;
}

.tp-freeSample__feedback {
    min-height: 1.45em;
    margin: 10px 0 0;
    font-size: .93rem;
    font-weight: 650;
}

.tp-freeSample__feedback--prompt { color: #8b681a; }
.tp-freeSample__feedback--correct { color: #237467; }
.tp-freeSample__feedback--retry { color: #955244; }

.tp-freeSample__help {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    color: #526f8b;
    font-size: .9rem;
    font-weight: 650;
}

.tp-freeSample__help .btn,
.tp-freeSample__answerRecovery .btn-link {
    padding: 0;
    color: #216d6a;
    font-size: inherit;
    font-weight: 800;
    text-decoration: underline;
}

.tp-freeSample__answerRecovery,
.tp-freeSample__questionStrategy {
    margin-top: 15px;
    padding: 17px;
    border: 1px solid #e5cf94;
    border-radius: 14px;
    background: #fff9e9;
}

.tp-freeSample__answerRecovery strong,
.tp-freeSample__questionStrategy h3 {
    color: #704f13;
    font-size: 1rem;
    font-weight: 850;
}

.tp-freeSample__answerRecovery p,
.tp-freeSample__questionStrategy p {
    margin: 7px 0 0;
    color: #735e32;
    line-height: 1.5;
}

.tp-freeSample__answerRecovery > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 13px;
}

.tp-freeSample__questionStrategy h3 { margin: 0; }

.tp-freeSample__next { margin-top: 18px; }

.tp-freeSample__strategy {
    margin-top: 16px;
    border-top: 1px solid rgba(35, 62, 97, .12);
}

.tp-freeSample__strategy summary {
    padding-top: 15px;
    color: #216d6a;
    cursor: pointer;
    font-weight: 850;
}

.tp-freeSample__strategy > div {
    margin-top: 14px;
    padding: 19px;
    border-radius: 14px;
    background: #edf7f5;
}

.tp-freeSample__strategy h3 {
    margin: 0;
    color: #214d60;
    font-size: 1.07rem;
    font-weight: 850;
}

.tp-freeSample__strategy p,
.tp-freeSample__strategy ol {
    margin: 8px 0 0;
    color: #426478;
    line-height: 1.5;
}

.tp-freeSample__strategy ol {
    padding-left: 1.25rem;
}

.tp-freeSample__strategy li + li {
    margin-top: 5px;
}

.tp-freeSample__lockedStrategy {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 15px 17px;
    border: 1px solid #c8e2df;
    border-radius: 14px;
    background: #f1f8f7;
}

.tp-freeSample__lockedStrategy strong,
.tp-freeSample__lockedStrategy span {
    display: block;
}

.tp-freeSample__lockedStrategy strong {
    color: #244f63;
    font-size: .94rem;
}

.tp-freeSample__lockedStrategy span {
    margin-top: 3px;
    color: #5b7088;
    font-size: .86rem;
    line-height: 1.4;
}

.tp-freeSample__lockedStrategy .btn {
    flex: 0 0 auto;
    text-align: center;
}

.tp-freeSample__additionalPrograms {
    max-width: 1080px;
    margin: 52px auto 0;
    padding: 34px;
    border: 1px solid rgba(35, 62, 97, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .7);
}

.tp-freeSample__additionalProgramsHead {
    max-width: 680px;
}

.tp-freeSample__additionalProgramsHead h2 {
    margin: 8px 0 0;
    color: var(--tp-navy, #20365c);
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.tp-freeSample__additionalProgramsHead > p:last-child {
    margin: 9px 0 0;
    color: #5a708a;
    line-height: 1.5;
}

.tp-freeSample__additionalProgramsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.tp-freeSample__additionalProgram {
    position: relative;
    min-height: 138px;
    padding: 19px;
    overflow: hidden;
    border: 1px solid rgba(35, 62, 97, .12);
    border-radius: 16px;
    background: #f8fafb;
}

.tp-freeSample__additionalProgram::after {
    position: absolute;
    inset: 0;
    background: rgba(247, 250, 251, .2);
    content: "";
    pointer-events: none;
}

.tp-freeSample__additionalProgram > span {
    display: block;
    color: #287a76;
    font-size: 1rem;
}

.tp-freeSample__additionalProgram h3 {
    margin: 10px 0 0;
    color: #38536b;
    font-size: 1rem;
    font-weight: 830;
    letter-spacing: -.015em;
}

.tp-freeSample__additionalProgram p {
    margin: 7px 0 0;
    color: #718197;
    font-size: .87rem;
    line-height: 1.42;
}

.tp-freeSample__nextStep {
    display: flex;
    max-width: 880px;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
    margin: 30px auto 0;
    padding: 28px 30px;
    border: 1px solid #c8e2df;
    border-radius: 20px;
    background: linear-gradient(120deg, #eff9f7 0%, #fbfdfd 100%);
}

.tp-freeSample__completion {
    max-width: 880px;
    margin: 30px auto 0;
    padding: 28px 30px;
    border: 1px solid #9bcfc7;
    border-radius: 20px;
    background: linear-gradient(120deg, #e8f7f3 0%, #fbfdf8 100%);
}

.tp-freeSample__completion h2 {
    margin: 7px 0 0;
    color: var(--tp-navy, #20365c);
    font-size: 1.7rem;
    font-weight: 850;
}

.tp-freeSample__completion > p:last-child {
    margin: 8px 0 0;
    color: #4e6c87;
    line-height: 1.5;
}

.tp-freeSample__nextStep h2 {
    max-width: 580px;
    margin: 7px 0 0;
    color: var(--tp-navy, #20365c);
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.tp-freeSample__nextStep p:not(.tp-freeSample__eyebrow) {
    max-width: 620px;
    margin: 9px 0 0;
    color: #557089;
    line-height: 1.5;
}

.tp-freeSample__nextActions {
    display: flex;
    min-width: 162px;
    flex-direction: column;
    gap: 11px;
    align-items: center;
}

.tp-freeSample__diagnosticLink {
    color: #216d6a;
    font-size: .87rem;
    font-weight: 750;
}

@media (max-width: 991.98px) {
    .tp-freeSample__programGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-freeSample__additionalProgramsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .tp-freeSample { padding: 38px 0 56px; }
    .tp-freeSample__hero, .tp-freeSample__lessonHero { text-align: left; }
    .tp-freeSample__hero > p:last-child, .tp-freeSample__lessonHero > p:last-child { margin-left: 0; }
    .tp-freeSample__gradePicker { justify-content: flex-start; }
    .tp-freeSample__nextStep { align-items: stretch; flex-direction: column; }
    .tp-freeSample__nextActions { align-items: flex-start; }
    .tp-freeSample__additionalPrograms { padding: 24px; }
    .tp-freeSample__lockedStrategy { align-items: stretch; flex-direction: column; }
    .tp-freeSample__questions { margin-top: 20px; }
    .tp-freeSample__question { min-height: 430px; }
    .tp-freeSample__check { width: 100%; }
    .tp-freeSample__next { width: 100%; }
    .tp-freeSample__completion { padding: 24px 21px; }
}

@media (max-width: 575.98px) {
    .tp-freeSample__programGrid, .tp-freeSample__choices, .tp-freeSample__additionalProgramsGrid { grid-template-columns: 1fr; }
    .tp-freeSample__program, .tp-freeSample__question, .tp-freeSample__nextStep, .tp-freeSample__additionalPrograms { padding: 21px; }
    .tp-freeSample__questionTop { align-items: flex-start; flex-direction: column; }
    .tp-freeSample__help { align-items: flex-start; flex-direction: column; gap: 2px; }
    .tp-freeSample__answerRecovery > div { align-items: stretch; flex-direction: column; }
    .tp-freeSample__answerRecovery > div .btn { width: 100%; }
}
