/* =========================================================
   TruePath Tokens (Palette)
========================================================= */
:root {
    /* Primary */
    --tp-academic-blue: #1F3A5F;
    --tp-slate-blue: #5B7A99;
    --tp-logo-gray: #7A7A7A;
    /* Secondary */
    --tp-teal: #3E6F6B;
    --tp-neutral: #F4F6F8;
    /* Accent (sparingly) */
    --tp-amber: #E3A72F;
    /* Preferred set used throughout */
    --tp-navy: #1E2F4D;
    --tp-bluegray: #5F728A;
    --tp-light: #F3F5F7;
    --tp-white: #fff;
    --tp-border: rgba(30, 47, 77, 0.12);
    --tp-border-2: rgba(30, 47, 77, 0.18);
    --tp-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    --tp-radius-lg: 18px;
    --tp-radius-md: 12px;
    --tp-radius-sm: 10px;
    --tp-tap: 44px;
    --tp-max-reading: 860px;
    --tp-max-app: 1200px;
}

/* =========================================================
   Base typography + hierarchy (per spec)
========================================================= */
.tp-body {
    font-family: "IBM Plex Sans","Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background: var(--tp-light);
    color: var(--tp-navy);
    line-height: 1.6;
}

h1 {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -0.3px;
}

h2 {
    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 900;
    letter-spacing: -0.2px;
}

h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
}

p, li {
    font-size: 16px;
}

a {
    color: var(--tp-teal);
}

a:hover, a:focus {
    color: rgba(62, 111, 107, 0.92);
}
@media (min-width: 992px) {
    p, li {
        font-size: 17px;
    }
    .tp-nav-right {
        margin-left: auto; 
        flex: 1 1 auto; 
        min-width: 0;
        display: flex; 
    }

    .tp-nav-right .tp-nav {
        margin-left: auto; 
    }
}

:focus-visible {
    outline: 3px solid rgba(227, 167, 47, 0.55);
    outline-offset: 2px;
    border-radius: 10px;
}

/* =========================================================
   Containers / content widths
========================================================= */
.tp-container {
    max-width: var(--tp-max-app);
}

.tp-reading {
    max-width: var(--tp-max-reading);
}

/* =========================================================
   Skip link
========================================================= */
.tp-skip-link {
    position: absolute;
    left: 12px;
    top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--tp-white);
    border: 1px solid var(--tp-border);
    color: var(--tp-navy);
    transform: translateY(-200%);
    z-index: 2000;
}

.tp-skip-link:focus {
    transform: translateY(0);
}

/* =========================================================
   Header (64–72px, sticky)
========================================================= */
.tp-header {
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tp-border);
}

.tp-navbar {
    min-height: 68px;
    padding: 8px 0;
}

.tp-header .tp-navbar {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.tp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin: 0;
}

.tp-brand__img {
    display: none;
    height: 44px;
    width: auto;
}

.tp-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tp-brand.tp-brand--img-ok .tp-brand__img {
    display: block;
}

.tp-brand.tp-brand--img-ok .tp-brand__text {
    display: none;
}

.tp-brand__name {
    font-weight: 950;
    font-size: 1.45rem;
    letter-spacing: -0.4px;
    color: var(--tp-navy);
}

.tp-brand__sub {
    margin-top: 2px;
    font-size: 0.78rem;
    letter-spacing: 3px;
    font-weight: 900;
    color: rgba(95, 114, 138, 0.95);
}

@media (max-width: 991.98px) {
    .tp-brand {
        margin: 0 auto;
    }
    .tp-footer .tp-brand {
        margin: 0 auto;
    }
}

.tp-link,
.tp-nav__link,
.tp-drawer__link,
.tp-drawer__meta-link {
    min-height: var(--tp-tap);
    display: inline-flex;
    align-items: center;
}

.tp-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px; 
}

.tp-header-actions .tp-link {
    color: rgba(30, 47, 77, 0.78);
    font-weight: 700;
    text-decoration: none;
    padding: 0 10px;
}

.tp-header-actions .tp-link:hover {
    text-decoration: underline;
    color: rgba(30, 47, 77, 0.95);
}

/* Desktop nav */
.tp-nav-right {
    margin-left: auto; 
}
.tp-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-nav__link {
    color: var(--tp-academic-blue) !important;
    font-weight: 630;
    padding: 10px 12px !important;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.15rem;
}

.tp-nav__link:hover {
    color: var(--tp-bluegray) !important;
    background: rgba(30, 47, 77, 0.04);
}

.tp-nav__link[aria-current="page"] {
    color: var(--tp-bluegray) !important;
    background: rgba(62, 111, 107, 0.10);
    border: 1px solid rgba(62, 111, 107, 0.22);
}

.tp-previewChooser__note {
    margin: -8px 0 22px;
}

.tp-previewChooser__upgrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    margin-bottom: 24px;
    padding: 1.2rem 1.35rem;
    border-color: rgba(43, 111, 107, .24);
    background: linear-gradient(115deg, rgba(229, 244, 242, .9), rgba(255, 255, 255, .96));
}

.tp-previewChooser__upgrade .tp-card__title {
    margin: 0;
    font-size: 1.12rem;
}

.tp-previewChooser__upgrade .tp-card__sub {
    max-width: 760px;
    margin: .3rem 0 0;
}

.tp-previewChooser__eyebrow {
    margin: 0 0 .28rem;
    color: var(--tp-primary, #28716d);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tp-previewChooser__upgradeAction {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tp-previewChooser__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tp-previewChooser__card {
    display: flex;
    min-height: 255px;
    flex-direction: column;
    padding: 1.35rem;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tp-previewChooser__card:hover {
    border-color: rgba(43, 111, 107, .42);
    box-shadow: 0 14px 30px rgba(29, 55, 86, .10);
    transform: translateY(-2px);
}

.tp-previewChooser__cardHeader {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tp-previewChooser__cardHeader .tp-card__title {
    margin: 0;
    font-size: clamp(1.22rem, 1.4vw, 1.48rem);
    line-height: 1.18;
}

.tp-previewChooser__icon {
    display: inline-grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--tp-border);
    border-radius: .9rem;
    background: #fff;
}

.tp-previewChooser__iconImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .22rem;
}

.tp-previewChooser__chessTile {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: inherit;
    color: #fff;
    background: linear-gradient(145deg, #1f4e62, #337f7b);
    box-shadow: 0 12px 28px rgba(30, 47, 77, .13);
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    font-size: 2.35rem;
    line-height: 1;
}

.tp-previewChooser__description {
    margin: 1rem 0 0;
    line-height: 1.48;
}

.tp-previewChooser__card form {
    margin-top: auto;
}

.tp-previewChooser__checkType {
    margin: 1.1rem 0 1.2rem;
    color: var(--tp-text-muted, #526273);
    font-size: .92rem;
    font-weight: 700;
}

.tp-previewChooser__action {
    width: 100%;
}

.tp-previewChooser__card--selected {
    border-color: var(--tp-primary, #2167c7);
    box-shadow: 0 0 0 3px rgba(33, 103, 199, .12);
}

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

@media (max-width: 575.98px) {
    .tp-previewChooser__upgrade {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-previewChooser__upgradeAction {
        width: 100%;
    }

    .tp-previewChooser__grid {
        grid-template-columns: 1fr;
    }
}

.tp-previewSnapshot {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    gap: 24px;
}

.tp-previewDiagnosticNextStep {
    width: 100%;
    max-width: 980px;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.tp-previewDiagnosticNextStep__card {
    display: grid;
    gap: 1.35rem;
    padding: clamp(1.5rem, 3vw, 2.35rem);
    border-color: rgba(43, 111, 107, .22);
    box-shadow: 0 14px 32px rgba(29, 55, 86, .10);
}

.tp-previewDiagnosticNextStep__card .tp-card__head {
    margin: 0;
}

.tp-previewDiagnosticNextStep__card .tp-card__title {
    margin: 0;
}

.tp-previewDiagnosticNextStep__card .tp-card__sub {
    max-width: 720px;
    margin: .55rem 0 0;
    line-height: 1.55;
}

.tp-previewDiagnosticNextStep__action {
    justify-self: start;
}

.tp-previewSnapshot .tp-shell__header {
    max-width: 800px;
    padding-block: .4rem;
}

.tp-previewSnapshot__eyebrow {
    margin: 0 0 .35rem;
    color: var(--tp-primary, #28716d);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tp-previewSnapshot .tp-card {
    padding: clamp(1.3rem, 3vw, 2rem);
}

.tp-previewSnapshot__completion {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    align-items: center;
    gap: 1.75rem;
    border-color: rgba(43, 111, 107, .24);
    background: linear-gradient(120deg, rgba(229, 244, 242, .88), rgba(255, 255, 255, .98));
}

.tp-previewSnapshot__completionIntro {
    display: flex;
    align-items: flex-start;
    gap: .95rem;
}

.tp-previewSnapshot__check {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--tp-primary, #28716d);
    box-shadow: 0 8px 16px rgba(43, 111, 107, .18);
    font-size: 1.4rem;
    font-weight: 900;
}

.tp-previewSnapshot__completion .tp-card__title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.tp-previewSnapshot__completion .tp-card__sub {
    margin-top: .45rem;
}

.tp-previewSnapshot__progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: .75rem;
}

.tp-previewSnapshot__progressItem {
    display: grid;
    gap: .22rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(30, 47, 77, .12);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .82);
}

.tp-previewSnapshot__progressItem span,
.tp-previewSnapshot__progressItem small {
    color: var(--tp-bluegray);
    line-height: 1.35;
}

.tp-previewSnapshot__progressItem strong {
    color: var(--tp-navy);
    font-size: 1.45rem;
    line-height: 1.1;
}

.tp-previewSnapshot__outcome {
    display: grid;
    gap: 1.35rem;
}

.tp-previewSnapshot__outcome .tp-card__head {
    margin: 0;
}

.tp-previewSnapshot__resultBar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .8rem;
}

.tp-previewSnapshot__resultBar > div {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(30, 47, 77, .12);
    border-radius: .9rem;
    background: var(--tp-surface-soft, #f7fafb);
}

.tp-previewSnapshot__resultBar span,
.tp-previewSnapshot__resultBar small {
    color: var(--tp-bluegray);
    line-height: 1.35;
}

.tp-previewSnapshot__resultBar strong {
    color: var(--tp-navy);
    font-size: 1.25rem;
    line-height: 1.2;
}

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

.tp-previewSnapshot__insight {
    padding: 1.1rem;
    border: 1px solid var(--tp-border);
    border-radius: .9rem;
}

.tp-previewSnapshot__insight--strength {
    background: rgba(229, 244, 242, .58);
}

.tp-previewSnapshot__insight--focus {
    background: rgba(255, 249, 232, .72);
}

.tp-previewSnapshot__insight--challenge {
    background: rgba(232, 240, 252, .72);
}

.tp-previewSnapshot__insight h3,
.tp-previewSnapshot__review h3,
.tp-previewSnapshot__reviewItem h4 {
    margin: 0;
    color: var(--tp-navy);
}

.tp-previewSnapshot__insight p {
    margin: .45rem 0 0;
    color: var(--tp-bluegray);
    line-height: 1.5;
}

.tp-previewSnapshot__insight ul {
    display: grid;
    gap: .62rem;
    margin: .65rem 0 0;
    padding: 0;
    list-style: none;
}

.tp-previewSnapshot__insight li {
    color: var(--tp-navy);
    line-height: 1.4;
}

.tp-previewSnapshot__insight li::before {
    content: "•";
    margin-right: .5rem;
    color: var(--tp-primary, #28716d);
}

.tp-previewSnapshot__insight li span {
    display: block;
    margin: .1rem 0 0 1rem;
    color: var(--tp-bluegray);
    font-size: .92rem;
}

.tp-previewSnapshot__review {
    display: grid;
    gap: .85rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--tp-border);
}

.tp-previewSnapshot__review .tp-card__head {
    margin: 0;
}

.tp-previewSnapshot__review .tp-card__head p {
    margin: .3rem 0 0;
    color: var(--tp-bluegray);
}

.tp-previewSnapshot__reviewList {
    display: grid;
    gap: .7rem;
}

.tp-previewSnapshot__reviewItem {
    padding: .9rem 1rem;
    border: 1px solid var(--tp-border);
    border-left: 4px solid #c7d2d9;
    border-radius: .75rem;
    background: #fff;
}

.tp-previewSnapshot__reviewItem.is-correct {
    border-left-color: var(--tp-primary, #28716d);
}

.tp-previewSnapshot__reviewItem.is-review {
    border-left-color: #c28c22;
}

.tp-previewSnapshot__reviewItem h4 {
    font-size: 1rem;
}

.tp-previewSnapshot__reviewItem p {
    margin: .3rem 0 0;
    color: var(--tp-bluegray);
    line-height: 1.45;
}

.tp-previewSnapshot__reviewItem .tp-previewSnapshot__reviewStatus {
    margin: 0 0 .2rem;
    color: var(--tp-primary, #28716d);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tp-previewSnapshot__reviewItem.is-review .tp-previewSnapshot__reviewStatus {
    color: #8b651c;
}

.tp-previewSnapshot__reviewPrompt {
    color: var(--tp-navy) !important;
}

.tp-previewSnapshot__next {
    display: grid;
    gap: 1.5rem;
}

.tp-previewSnapshot__next .tp-card__head {
    margin: 0;
}

.tp-previewSnapshot__steps {
    display: grid;
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-previewSnapshot__steps li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 0;
    border-top: 1px solid var(--tp-border);
}

.tp-previewSnapshot__steps li:first-child {
    border-top: 0;
    padding-top: 0;
}

.tp-previewSnapshot__stepNumber {
    display: inline-grid;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--tp-teal);
    background: rgba(62, 111, 107, .11);
    font-size: .9rem;
    font-weight: 900;
}

.tp-previewSnapshot__steps h3 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1rem;
}

.tp-previewSnapshot__steps p {
    margin: .2rem 0 0;
    color: var(--tp-bluegray);
    font-size: .98rem;
    line-height: 1.5;
}

.tp-previewSnapshot__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(43, 111, 107, .22);
    border-radius: 1rem;
    background: rgba(229, 244, 242, .55);
}

.tp-previewSnapshot__cta strong {
    color: var(--tp-navy);
}

.tp-previewSnapshot__cta p {
    margin: .18rem 0 0;
    color: var(--tp-bluegray);
}

.tp-previewSnapshot__cta .tp-progressPage__actions {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 767.98px) {
    .tp-previewSnapshot__completion {
        grid-template-columns: 1fr;
    }

    .tp-previewSnapshot__cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .tp-previewSnapshot__cta .tp-progressPage__actions {
        width: 100%;
    }

    .tp-previewSnapshot__cta .btn {
        flex: 1 1 100%;
    }

    .tp-previewSnapshot__insights {
        grid-template-columns: 1fr;
    }
}

.tp-header--authed .tp-parentbtn {
    gap: 7px;
    padding-inline: 12px;
    color: var(--tp-academic-blue);
    font-weight: 700;
}

.tp-header--authed .tp-parentbtn__label {
    white-space: nowrap;
}

/* Hamburger button */
.tp-toggler {
    width: var(--tp-tap);
    height: var(--tp-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tp-toggler .navbar-toggler-icon {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
}
/* =========================================================
   Buttons (Primary / Outline / Ghost / Icon)
========================================================= */
.tp-btn-primary {
    min-height: var(--tp-tap);
    border-radius: var(--tp-radius-sm);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, rgba(63,127,123,1) 0%, rgba(62,111,107,1) 100%);
    border: 1px solid rgba(30, 47, 77, 0.18);
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-btn-primary:hover {
    color: #fff;
    filter: brightness(0.97);
}

.tp-btn-outline {
    min-height: var(--tp-tap);
    border-radius: var(--tp-radius-sm);
    font-weight: 600;
    color: var(--tp-teal);
    border: 1px solid rgba(62,111,107,0.45);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-btn-outline:hover {
    background: rgba(62,111,107,0.08);
    color: var(--tp-teal);
}

.tp-ghost-btn {
    min-height: var(--tp-tap);
    border-radius: var(--tp-radius-sm);
    font-weight: 600;
    color: var(--tp-academic-blue);
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-ghost-btn:hover {
    background: rgba(255,255,255,0.95);
}

.tp-icon-btn {
    min-height: var(--tp-tap);
    min-width: var(--tp-tap);
    border-radius: 12px;
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-icon-btn:hover {
    background: rgba(255,255,255,0.95);
}

.tp-btn-primary,
.tp-btn-primary:link,
.tp-btn-primary:visited,
.tp-btn-primary:hover,
.tp-btn-primary:focus,
.tp-btn-primary:active {
    color: #fff !important;
}

.tp-fullAccessCta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 28px 0 0;
    padding: 22px 24px;
    border: 1px solid rgba(40, 116, 113, .28);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(230, 246, 244, .96), rgba(255, 255, 255, .96));
    box-shadow: 0 12px 28px rgba(32, 54, 92, .06);
}

.tp-fullAccessCta__copy {
    min-width: 0;
}

.tp-fullAccessCta__eyebrow {
    margin: 0 0 4px;
    color: #1f7776;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tp-fullAccessCta h2 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1.28rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.tp-fullAccessCta__copy > p:last-child {
    max-width: 690px;
    margin: 6px 0 0;
    color: #526985;
    line-height: 1.5;
}

.tp-fullAccessCta__button,
.tp-authedbar__upgrade {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .tp-fullAccessCta {
        display: grid;
        gap: 16px;
        padding: 20px;
    }

    .tp-fullAccessCta__button {
        width: 100%;
    }
}
/* =========================================================
   Drawer
========================================================= */
.tp-drawer {
    width: min(360px, 92vw);
}

.tp-drawer__title {
    font-weight: 950;
    color: var(--tp-navy);
}

.tp-drawer__sub {
    color: rgba(95,114,138,0.95);
    font-weight: 600;
    font-size: 0.95rem;
}

.tp-drawer__link {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(30, 47, 77, 0.86);
    font-weight: 800;
}

.tp-drawer__link:hover {
    background: rgba(30,47,77,0.04);
}

.tp-drawer__link[aria-current="page"] {
    color: var(--tp-bluegray);
    background: rgba(62,111,107,0.10);
}

.tp-drawer__sectionLabel {
    margin: 0 0 4px 12px;
    color: rgba(95,114,138,0.95);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tp-divider {
    border-color: rgba(30,47,77,0.12);
}

.tp-meta__label {
    font-weight: 900;
    color: rgba(30,47,77,0.90);
    margin-bottom: 6px;
}

.tp-drawer__meta-link {
    text-decoration: none;
    color: rgba(30,47,77,0.78);
    font-weight: 700;
    padding: 6px 0;
}

.tp-drawer__meta-link:hover {
    text-decoration: underline;
    color: rgba(30,47,77,0.95);
}

/* =========================================================
   Main spacing rhythm (8px scale, 24–48px sections)
========================================================= */
.tp-main {
    padding: 24px 0 0;
}

.tp-main .tp-reading {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Footer (calm, informational)
========================================================= */

.tp-footer {
    background: var(--tp-navy); 
    color: rgba(255,255,255,0.78);
}
.tp-footer__top {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.tp-footer__left {
    display: flex;
    flex-direction: column;
}
.tp-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.tp-footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.tp-footer .tp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin: 0;
}
.tp-footer .tp-brand__text {
    color: rgba(232, 239, 248, 0.85); 
}

.tp-footer .tp-brand__name {
    color: rgba(240, 246, 255, 0.95);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.tp-footer .tp-brand__sub {
    color: rgba(173, 195, 221, 0.9); 
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.78rem;
}
.tp-brand .tp-brand__text {
    display: none;
    flex-direction: column;
    line-height: 1;
}
.tp-footer .tp-brand__img {
    display: block;
    height: 28px;
    width: auto;
}

.tp-footer .tp-brand.tp-brand--img-ok .tp-brand__img {
    display: block;
}

.tp-footer .tp-brand.tp-brand--img-ok .tp-brand__text {
    display: none;
}

.tp-footer__social svg {
    display: block;
}

.tp-footer__heading {
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}

.tp-footer__text {
    color: rgba(255,255,255,0.72);
}

.tp-footer__meta {
    color: rgba(255,255,255,0.72);
    font-size: 0.95rem;
}

.tp-footer__links {
    margin: 0;
    padding: 0;
}

.tp-footer__link {
    text-decoration: none;
    color: rgba(255,255,255,0.75);
    min-height: 32px;
    font-size: 14px;
    font-weight: 400; 
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.tp-footer__link:hover {
    color: #fff;
    text-decoration: underline;
}
.tp-footer__socials {
    display: flex;
    gap: 14px;
}
.tp-footer__social {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.tp-footer__social:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.tp-footer__bar {
    border-top: 1px solid rgba(255,255,255,0.14);
}

.tp-footer__small {
    color: rgba(173, 195, 221, 0.85);
    font-size: 0.85rem;
    line-height: 1.4;
}

.tp-footer .tp-brand:hover .tp-brand__name {
    color: #ffffff;
}
@media (max-width: 767.98px) {
    .tp-footer__spacer {
        display: none !important;
    }

    .tp-footer__top {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .tp-footer__left,
    .tp-footer__right {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .tp-footer .tp-brand {
        justify-content: center;
        width: 100%;
    }

    .tp-footer__nav {
        width: 100%;
        justify-content: center;
        gap: 12px;
    }

    .tp-footer__socials {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Policy pages
========================================================= */

.policy-page {
    padding: 32px 0 56px;
}
.policy-page a {
    color: var(--tp-teal);
    text-decoration-color: rgba(62, 111, 107, 0.45);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.policy-page a:hover,
.policy-page a:focus {
    color: rgba(62, 111, 107, 0.92);
    text-decoration-color: rgba(62, 111, 107, 0.85);
}

.policy-page a:visited {
    color: rgba(91, 122, 153, 0.95);
    text-decoration-color: rgba(91, 122, 153, 0.55);
}
.policy-header {
    border-bottom: 1px solid var(--tp-border);
    padding-bottom: 20px;
}

.policy-title {
    margin-bottom: 4px;
}

.policy-meta {
    font-size: 13px;
    color: rgba(30,47,77,0.6);
}

.policy-intro {
    font-size: 17px;
    max-width: 760px;
}

.policy-callout {
    background: #fff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    padding: 16px 18px;
}

.policy-callout__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.policy-callout__list {
    margin: 0;
    padding-left: 18px;
}

.policy-toc a {
    font-weight: 600;
    text-decoration: none;
}

.policy-toc a:hover,
.policy-toc a:focus {
    text-decoration: underline;
}
.policy-toc__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.policy-toc__list {
    columns: 2;
    gap: 24px;
}

.policy-section {
    margin-top: 32px;
}

.policy-section h2 {
    margin-bottom: 12px;
}

.policy-section details {
    margin: 12px 0;
}

.policy-section summary {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(30,47,77,0.03);
    border: 1px solid var(--tp-border);
    list-style: none;
}

.policy-section summary::-webkit-details-marker {
    display: none;
}

.policy-section details[open] summary {
    background: rgba(62,111,107,0.06);
    border-color: rgba(62,111,107,0.20);
}

.policy-toc__list {
    columns: 2;
    gap: 24px;
}

@media (max-width: 991.98px) { 
    .policy-toc__list {
        columns: 1;
    }
}

/* =========================================================
   FAQ page (matches policy system + TruePath palette)
========================================================= */

.faq-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.faq-starting-point {
    border-color: rgba(62,111,107,0.30);
    background: linear-gradient(135deg, rgba(62,111,107,0.10), rgba(255,255,255,0.95));
}

.faq-starting-point__note {
    color: rgba(30,47,77,0.68);
    font-size: 0.92rem;
}

.faq-search__input {
    border-radius: var(--tp-radius-md);
    border: 1px solid var(--tp-border);
    padding: 12px 14px;
}

.faq-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.faq-chip {
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.8);
    color: rgba(30,47,77,0.78);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 600;
    min-height: 36px;
    line-height: 1;
}

.faq-chip:hover {
    background: rgba(255,255,255,0.95);
}

.faq-chip.is-active {
    border-color: rgba(62,111,107,0.35);
    background: rgba(62,111,107,0.08);
    color: rgba(30,47,77,0.95);
}

.faq-accordion .accordion-item {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
}

.faq-accordion .accordion-button {
    font-weight: 700;
    color: rgba(30,47,77,0.95);
    background: #fff;
    padding: 14px 16px;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: rgba(62,111,107,0.06);
    color: rgba(30,47,77,0.98);
}

.faq-accordion .accordion-body {
    padding: 14px 16px 16px;
}

.faq-answer {
    margin-bottom: 10px;
}

.faq-more summary {
    font-weight: 600;
}

.faq-related {
    margin-top: 14px;
    border-top: 1px solid var(--tp-border);
    padding-top: 12px;
    display: grid;
    gap: 6px;
}

.faq-related__label {
    font-size: 13px;
    color: rgba(30,47,77,0.6);
    font-weight: 700;
}

.faq-related__link {
    font-weight: 600;
}

.faq-support {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    background: rgba(255,255,255,0.85);
    padding: 14px 14px;
}

.faq-support__title {
    font-weight: 800;
    margin-bottom: 6px;
}

@media (min-width: 768px) {
    .faq-controls {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

/* =========================================================
   FAQ: header row + copy button
========================================================= */
.faq-header__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-header__row .faq-btn {
    flex: 1 1 auto;
    min-width: 0; 
}

.faq-copy {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(30, 47, 77, 0.14);
    background: rgba(255,255,255,0.8);
    color: rgba(30,47,77,0.75);
}

.faq-copy:hover,
.faq-copy:focus-visible {
    background: rgba(62,111,107,0.08);
    border-color: rgba(62,111,107,0.30);
    color: var(--tp-teal);
}

.faq-copy__icon svg {
    display: block;
    flex-shrink: 0;
}


/* =========================================================
   FAQ: highlight opened question (2s)
========================================================= */
.faq-item.is-highlight {
    outline: 2px solid rgba(62,111,107,0.55);
    outline-offset: 2px;
    border-radius: var(--tp-radius-md);
}

/* =========================================================
   Toast (TruePath style)
========================================================= */
.tp-toast {
    border: 1px solid rgba(62,111,107,0.28);
    background: rgba(255,255,255,0.95);
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-shadow);
}

.tp-toast__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(62,111,107,0.9);
    flex: 0 0 auto;
}

.tp-toast__title {
    font-weight: 800;
    color: rgba(30,47,77,0.95);
    line-height: 1.2;
}

.tp-toast__sub {
    font-size: 13px;
    color: rgba(30,47,77,0.65);
    line-height: 1.2;
}

/* =========================================================
   FAQ: No-JS (SSR) fallback
   If JS is disabled, show answers expanded for readability.
========================================================= */
.faq-page .accordion-collapse {
    display: block;
    height: auto;
    visibility: visible;
}

.faq-page .accordion-collapse.collapse {
    display: block;
}

html.js .faq-page .accordion-collapse.collapse {
    display: none;
}

html.js .faq-page .accordion-collapse.collapse.show {
    display: block;
}

.faq-page .accordion-button {
    cursor: default;
}

html.js .faq-page .accordion-button {
    cursor: pointer;
}
/* ===== Contact page ===== */
.contact-page .contact-card {
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.92);
}

.contact-meta {
    color: rgba(95,114,138,0.95);
    font-size: 0.98rem;
    line-height: 1.55;
}

.contact-list {
    padding-left: 1.2rem;
    margin: 0;
    color: rgba(255,255,255,0.0); 
}

.contact-list li {
    color: rgba(30,47,77,0.78);
}

.contact-form-card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    background: rgba(255,255,255,0.96);
    box-shadow: var(--tp-shadow);
}

.tp-form .form-label {
    font-weight: 800;
    color: rgba(30,47,77,0.92);
}

.tp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* FAQ suggestion hint */
.contact-hint {
    border: 1px solid rgba(62,111,107,0.22);
    background: rgba(62,111,107,0.06);
    border-radius: 14px;
    padding: 12px 14px;
}

.contact-hint__title {
    font-weight: 900;
    color: rgba(30,47,77,0.92);
    margin-bottom: 2px;
}

.contact-hint__text {
    color: rgba(30,47,77,0.78);
}

.policy-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.policy-next-step__copy {
    max-width: 720px;
}

.policy-next-step__actions,
.about-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.policy-next-step__actions {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .policy-next-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .policy-next-step__actions,
    .about-page__actions {
        width: 100%;
    }

    .policy-next-step__actions .btn,
    .about-page__actions .btn {
        flex: 1 1 220px;
    }
}

/* ===== About page ===== */
.about-page .about-section {
    margin-bottom: 48px;
}

.about-list {
    padding-left: 1.2rem;
    color: rgba(30,47,77,0.80);
}

.about-list li {
    margin-bottom: 8px;
}

/* Values tiles */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.value-tile {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    padding: 16px 18px;
}

.value-tile h3 {
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.value-tile p {
    margin: 0;
    color: rgba(30,47,77,0.78);
}

/* Founder section */
.founder-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: start;
}

.founder-photo {
    margin: 0;
}

.founder-photo__frame {
    position: relative;
    border-radius: var(--tp-radius-md);
    overflow: hidden;
    border: 1px solid var(--tp-border);
    background: var(--tp-light);
    box-shadow: 0 12px 24px rgba(2,6,23,0.08);
}

.founder-photo__frame img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
}

.founder-photo__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,47,77,0.00) 0%, rgba(30,47,77,0.06) 55%, rgba(62,111,107,0.10) 100%);
    pointer-events: none;
}

.founder-photo__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.00) 55%);
    pointer-events: none;
}

.founder-photo__caption {
margin-top: 8px;
font-size: 0.92rem;
}

.founder-story p {
    color: rgba(30,47,77,0.80);
    margin-bottom: 12px;
}

@media (max-width: 767.98px) {
    .founder-grid {
        grid-template-columns: 1fr;
    }

    .founder-photo {
        max-width: 220px;
        margin: 0 auto 8px;
        text-align: center;
    }

    .founder-story {
        text-align: left;
    }
}
/* ===== Error pages ===== */
.tp-error .policy-title {
    margin-bottom: 0;
}

.tp-error__card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    background: rgba(255,255,255,0.96);
    box-shadow: var(--tp-shadow);
}

.tp-error__label {
    font-weight: 900;
    color: rgba(30,47,77,0.92);
    margin-bottom: 8px;
}

.tp-error__list {
    margin: 0;
    padding-left: 1.2rem;
    color: rgba(30,47,77,0.78);
}

.tp-error__list li {
    margin-bottom: 6px;
}

.tp-error__meta-title {
    font-weight: 900;
    color: rgba(30,47,77,0.90);
    margin-bottom: 6px;
}

.tp-error__details summary {
    cursor: pointer;
    font-weight: 800;
    color: rgba(30,47,77,0.85);
}

.tp-error__details-body code {
    background: rgba(30,47,77,0.06);
    padding: 2px 6px;
    border-radius: 8px;
}

/* ===== Pricing page ===== */
/* ===== Plans grid ===== */
.pricing-grid {
    margin-top: 10px;
}

.pricing-card {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    background: rgba(255,255,255,0.96);
    box-shadow: var(--tp-shadow);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
}

.pricing-card--featured {
    border-color: rgba(62,111,107,0.34);
    background: linear-gradient(180deg, rgba(62,111,107,0.06) 0%, rgba(255,255,255,0.97) 55%);
}

/* ===== Header grid: forces perfect alignment ===== */
.pricing-card__hdr {
    display: grid;
    grid-template-rows: 44px /* title row (fixed) */
    34px /* subline row (fixed) */
    58px /* price row (fixed) */
    52px /* billed note row (fixed) */
    20px; /* save row (fixed, incl placeholder) */
    row-gap: 10px;
    margin-bottom: 14px;
}

/* ===== Title row ===== */
.pricing-card__titleRow {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; 
}


@media (min-width: 992px) {
    .pricing-card__titleRow {
        flex-wrap: nowrap;
    }
}

.pricing-card__title {
    margin: 0;
    line-height: 1; 
}

.pricing-card__sub {
    height: 34px;
    display: flex;
    align-items: center; 
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    background: rgba(227,167,47,0.16);
    border: 1px solid rgba(227,167,47,0.45);
    color: rgba(30,47,77,0.95);
    line-height: 1;
    white-space: nowrap;
}

.pricing-badge__icon {
    color: rgba(227,167,47,0.95);
    display: inline-flex;
}

/* ===== Price block (aligned row) ===== */
.pricing-price {
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    margin: 0;
}

.pricing-price__main {
    margin: 0;
    font-weight: 800;
    line-height: 1; 
}

.pricing-price__unit {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(95,114,138,0.95);
}

.pricing-price__note {
    height: 52px;
    line-height: 1;
    margin-top:5px;
    /*margin: 0;*/
    overflow: hidden;
}
/* ===== Save row (Annual only) ===== */
.tp-plans__save {
    height: 58px; 
    display: flex;
    align-items: flex-end; 
}

.tp-plans__save > * {
    width: 100%;
}

.tp-plans__save {
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(30,47,77,0.14);
    background: rgba(2, 6, 23, 0.03);
    font-weight: 800;
    line-height: 1.35;
    margin-top: 6px;
}

/* Placeholder uses same slot */
.tp-plans__save--placeholder {
    visibility: hidden;
    height: 58px;
    margin-top: 6px;
}
/* ===== Features list ===== */
.pricing-features {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(30,47,77,0.80);
}

.pricing-features li {
    margin-bottom: 8px;
}

.tp-plans__trial {
    font-weight: 900;
    color: rgba(30,47,77,0.92);
}

/* ===== Actions ===== */
.pricing-actions {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.pricing-fineprint {
    font-size: 0.92rem;
    color: rgba(95,114,138,0.95);
}

.pricing-card .tp-btn-outline {
    width: 100%;
}

.tp-plans {
}

/* Top decision strip */
.tp-plans__top {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: 16px;
    align-items: stretch;
}

.tp-plans__top-left {
    padding: 18px 18px;
    border: 1px solid rgba(2,6,23,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.78);
}

.tp-plans__top-right {
    display: flex;
}

.tp-plans__callout {
    width: 100%;
    height: 100%;
}

/* Typography */
.tp-plans__h {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--tp-navy);
    margin: 0 0 6px 0;
}

.tp-plans__p {
    margin: 0;
    color: rgba(95,114,138,0.95);
    line-height: 1.55;
    font-weight: 600;
}

.tp-plans__top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 12px;
}

.tp-plans__btn {
    white-space: nowrap;
}

.tp-plans__hint {
    color: rgba(95,114,138,0.9);
    font-weight: 600;
    font-size: 0.95rem;
}

.tp-plans__save {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(62,111,107,0.08);
    border: 1px solid rgba(62,111,107,0.18);
    color: rgba(30,47,77,0.92);
    font-weight: 700;
    line-height: 1.35;
}

.tp-plans__save-sub {
    font-weight: 650;
    margin-left: 6px;
}

/* Feature list tuning (less “featurey”, more clarifying) */
.tp-plans__features {
    padding-left: 1rem;
}

.tp-plans__features li {
    margin-bottom: 10px;
}

.tp-plans__trial {
    font-weight: 800;
    color: rgba(30,47,77,0.92);
}

/* How it works block */
.tp-plans__steps {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.tp-plans__step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(2,6,23,0.06);
    background: rgba(255,255,255,0.62);
}

.tp-plans__num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 950;
    color: rgba(30,47,77,0.95);
    background: rgba(227,167,47,0.12);
    border: 1px solid rgba(227,167,47,0.26);
}

.tp-plans__step-title {
    font-weight: 900;
    color: var(--tp-navy);
    margin-bottom: 2px;
}

.tp-plans__how-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-plans__nowrap {
    white-space: nowrap;
}

.tp-plans__lead {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 10px 0 0 0;
}

.tp-plans__lead-title {
    font-weight: 650;
    color: var(--tp-navy);
}

.tp-plans__lead-text {
    color: rgba(95,114,138,0.95);
    font-weight: 550;
    line-height: 1.5;
}

.tp-plans__promotions {
    margin: 24px 0 8px;
    padding: 22px;
    border: 1px solid #b9ddd5;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf8f5, #fffaf0);
}

.tp-plans__promotionsHead h2 {
    margin: 0;
    color: var(--tp-navy);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 850;
}

.tp-plans__eyebrow {
    margin: 0 0 5px;
    color: #1d7773;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tp-plans__promotionList {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.tp-plans__promotion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(35, 62, 97, .12);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
}

.tp-plans__promotion p {
    margin: 0;
    color: var(--tp-navy);
    font-weight: 760;
    line-height: 1.45;
}

.tp-plans__promotion small {
    display: block;
    margin-top: 4px;
    color: #61758c;
}

.tp-plans__promotionCode {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px dashed #5b9b94;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.tp-plans__promotionCode span {
    color: #52728a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tp-plans__promotionCode code {
    color: #186d68;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.tp-plans__subline {
    display: block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    line-height: 1.35;
    min-height: 1.35em; 
}

.tp-plans__how-head {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    align-items: start;

}

.tp-plans__how-head p {
    /*  white-space: nowrap; no use breaks hamburger*/ 
    overflow: hidden;
    text-overflow: ellipsis; 
 }
.tp-plans__preview {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.tp-plans__preview-title {
    font-weight: 950;
    color: var(--tp-navy);
    margin-bottom: 4px;
}

.tp-plans__preview-text {
    line-height: 1.5;
}

.tp-plans__preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin-top: 10px;
}

.tp-plans__hint {
    color: rgba(95,114,138,0.9);
    font-weight: 650;
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .tp-plans__how-head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .tp-plans__subline {
        white-space: normal; 
        min-height: auto;
    }

    .tp-plans__promotion {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-plans__promotionCode {
        min-width: 0;
    }
}

/* Responsive */
@media (max-width: 991.98px) {
    .tp-plans__top {
        grid-template-columns: 1fr;
    }

    .tp-plans__nowrap {
        white-space: normal;
    }
}


/* ===== Register page ===== */
/* Cards */
.tp-card {
    background: #fff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow);
}

.tp-label {
    font-weight: 700;
    color: rgba(30,47,77,0.92);
}

.tp-help {
    margin-top: 8px;
    color: rgba(30,47,77,0.68);
    font-size: 0.95rem;
}

.tp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-auth-alt__divider {
    position: relative;
    text-align: center;
    margin: 14px 0 12px;
    color: rgba(95,114,138,.85);
    font-weight: 650;
}


.tp-btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(2,6,23,.12);
    color: rgba(30,47,77,.95);
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 10px 18px rgba(2,6,23,.06);
    padding: 12px 14px;
}

.tp-btn-google:hover {
    background: rgba(248,250,252,1);
    border-color: rgba(2,6,23,.18);
    color: rgba(30,47,77,.95);
}

.tp-btn-google:active {
    transform: translateY(1px);
}
.tp-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .25rem;
    font-weight: 900;
    color: rgba(227,167,47,0.95); 
    line-height: 1;
}

.tp-input:required:focus {
    border-color: rgba(62,111,107,0.55);
    box-shadow: 0 0 0 .2rem rgba(62,111,107,0.12);
}
.tp-btn-google__icon {
    display: inline-flex;
}
.tp-input.form-control,
.tp-input.form-select {
    min-height: var(--tp-tap);
    height: var(--tp-tap);
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.2;
    border-radius: 14px;
    border-color: rgba(30,47,77,0.18);
}

.tp-aside__eyebrow {
    font-weight: 600;
    color: rgba(95,114,138,.95);
    font-size: 1.1rem;
}

.tp-aside__planRow {
    display: grid;
    gap: 6px;
}
.tp-aside__planName {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--tp-navy);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.tp-aside__badge {
    transform: translateY(-1px);
}


.tp-aside__planMeta {
    color: rgba(95,114,138,.95);
    font-weight: 650;
    line-height: 1.35;
}

.tp-next__trial {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(227,167,47,0.10);
    border: 1px solid rgba(227,167,47,0.28);
    color: rgba(30,47,77,0.92);
    line-height: 1.45;
}
.tp-next__change {
    display: inline-block;
    margin-top: 5px;
}

/* Divider */
.tp-next__divider {
    margin: 14px 0;
    opacity: 0.7;
}

.tp-next__fine {
    margin: 1px 0 0;
    padding-bottom: 2px;
    color: rgba(95,114,138,0.92);
    line-height: 0.4 !important;
    font-size: 0.85rem;
}
/* Steps header */
.tp-aside__subhead {
    font-weight: 700;
    color: rgba(95,114,138,.95);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.tp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.tp-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    align-items: start;
}

.tp-step__n {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--tp-navy);
    background: rgba(2,6,23,0.04);
    border: 1px solid rgba(2,6,23,0.06);
}

.tp-step__k {
    font-weight: 700;
    color: var(--tp-navy);
    letter-spacing: -0.01em;
}

.tp-step__v {
    margin-top: 2px;
    color: rgba(95,114,138,.95);
    line-height: 1.5;
    font-weight: 400;
}

/* Badge refinements to feel less "salesy" */
.tp-badge--best {
    background: rgba(227,167,47,0.12);
    border: 1px solid rgba(227,167,47,0.35);
    color: var(--tp-navy);
    font-weight: 750;
    font-size: .78rem;
    padding: 4px 10px;
    border-radius: 999px;
}


@media (max-width: 575.98px) {
    .tp-aside__planName {
        font-size: 1.15rem;
    }

    .tp-steps {
        gap: 12px;
    }

    .tp-aside__divider {
        margin: 16px 0;
    }
}
.tp-input.form-select {
    padding-right: 2.5rem;
}

.tp-field .form-label {
    margin: 0;
    line-height: 1.25;
    min-height: 2.5em;
}

.tp-link {
    color: rgba(62,111,107,1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tp-link:hover {
    color: rgba(62,111,107,0.9);
}



.tp-consent {
    display: flex;
    align-items: center; 
    gap: 12px;
}

.tp-consent__input {
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-1px); 
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid rgba(30,47,77,0.30);
}

.tp-consent__label {
    margin: 0;
    line-height: 1.55;
    color: rgba(30,47,77,0.86);
}


@media (max-width: 576px) {
    .tp-consent {
        align-items: center !important; 
    }

    .tp-consent > .tp-consent__input {
        margin-top: calc((1.6em - 18px) / 2) !important;
    }
}

.tp-aside {
    position: sticky;
    top: 92px;
    border-radius: 18px;
}


.tp-aside__panel {
    display: grid;
    gap: 2px;
}

@media (max-width: 991.98px) {
    .tp-aside {
        position: static;
    }
}

.tp-divider {
    border-color: rgba(30,47,77,0.12);
}


/* =========================================================
   TrialEnd (te-*) - isolated from Register tp-plan*
========================================================= */

.te-banner {
    border: 1px solid rgba(62,111,107,0.22);
    background: rgba(62,111,107,0.06);
    border-radius: var(--tp-radius-md);
    padding: 12px 14px;
}

.te-banner__title {
    font-weight: 900;
    color: var(--tp-navy);
}

.te-banner__sub {
    color: rgba(95,114,138,0.95);
    font-weight: 600;
    margin-top: 2px;
}

.te-planlist {
    display: grid;
    gap: 14px;
}

.te-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    background: rgba(255,255,255,0.85);
}

.te-plan--best {
    border-color: rgba(62,111,107,0.40);
    box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}

.te-plan__main {
    min-width: 0;
}

.te-plan__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 950;
    color: var(--tp-navy);
    font-size: 1.35rem;
    line-height: 1.15;
}

.te-plan__meta {
    margin-top: 6px;
    color: rgba(95,114,138,0.95);
    font-weight: 650;
    line-height: 1.35;
}

.te-plan__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.te-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
}

.te-badge--best {
    background: rgba(227,167,47,0.16);
    border: 1px solid rgba(227,167,47,0.45);
    color: rgba(30,47,77,0.95);
}

@media (max-width: 991.98px) {
    .te-plan {
        grid-template-columns: 1fr;
    }

    .te-plan__cta {
        justify-content: stretch;
    }
}

/* Validation */

.tp-inputwrap {
    position: relative;
    width: 100%;
}

.tp-input--withicon {
    padding-right: 44px; /* room for eye */
}

.tp-inputicon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(17,24,39,.7);
}

.tp-inputicon:hover {
    background: rgba(0,0,0,.07);
}

.tp-inputicon:focus-visible {
    outline: 2px solid rgba(0,0,0,.14);
    outline-offset: 2px;
}
/* rules panel */

.tp-rules__title {
    font-weight: 600;
    margin-bottom: .5rem;
}

.tp-rules__list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: .35rem;
}

.tp-rule {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #6b7280;
}

.tp-dot::before {
    content: "•";
}

.tp-rule--ok {
    color: #1b8f3a;
}

    .tp-rule--ok .tp-dot::before {
        content: "✓";
    }

/* strength */


.tp-help-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: baseline;
}
.tp-pw-status {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .75rem;
    margin-top: .55rem;
}

.tp-pw-status__right {
    text-align: right;
    white-space: nowrap;
}

.tp-field-error-inline {
    color: rgba(227,167,47,0.95);
    font-weight: 500;
}
.tp-strength {
    font-weight: 600;
    white-space: nowrap;
}

.tp-muted {
    color: #6b7280;
}

.tp-rules {
    margin-top: .6rem;
    padding: .75rem .85rem;
    border-radius: 14px;
    background: rgba(0,0,0,.03);
}

.tp-rules__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
}

@media (max-width: 420px) {
    .tp-rules__grid {
        grid-template-columns: 1fr;
    }
}


.tp-strength--danger {
    color: rgba(227,167,47,0.95);
}

.tp-strength--warn {
    color: #b26a00;
}

.tp-strength--good {
    color: #1b8f3a;
}

/* animation */
.tp-fade-enter-active, .tp-fade-leave-active {
    transition: opacity .18s ease, transform .18s ease;
}

.tp-fade-enter-from, .tp-fade-leave-to {
    opacity: 0;
    transform: translateY(-2px);
}

/* errors */
.tp-field-error {
    margin-top: .45rem;
    font-size: .95rem;
    line-height: 1.25;
    color: rgba(227,167,47,0.95);
}
.tp-password-wrapper {
    position: relative;
}

.tp-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    opacity: .6;
    color: rgba(17,24,39,.7);
}

    .tp-password-toggle:hover {
        opacity: 1;
        background: rgba(0,0,0,.04);
    }

    .tp-password-toggle:focus-visible {
        outline: 2px solid rgba(0,0,0,.14);
        outline-offset: 2px;
    }

.tp-pwmeta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .75rem;
    margin-top: .6rem;
}

.tp-rules {
    margin-top: .55rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: rgba(0,0,0,.03);
}

.tp-rules__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .9rem;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.tp-rules.tp-rules--static {
    position: relative; /* important if your tp-rules is absolute elsewhere */
    width: 100%;
    max-width: 100%;
    margin-top: .75rem;
}
.tp-rule {
    display: flex;
    align-items: center;
    gap: .55rem;
    line-height: 1.25;
}

.tp-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(17,24,39,.35);
}

.tp-rule--ok .tp-dot {
    background: #16a34a;
}
/* green */
.tp-rule--todo {
    color: rgba(17,24,39,.65);
}

.tp-tone {
    font-weight: 600;
    white-space: nowrap;
}

.tp-tone--bad {
    color: rgba(227,167,47,0.95);
}
/* red */
.tp-tone--warn {
    color: #b45309;
}
/* amber */
.tp-tone--good {
    color: #15803d;
}
/* green */
.tp-tone--great {
    color: #0f766e;
}
/* teal */

.tp-fade-enter-active, .tp-fade-leave-active {
    transition: opacity .12s ease;
}

.tp-fade-enter-from, .tp-fade-leave-to {
    opacity: 0;
}
/*Verify email*/
.tp-verify-card {
    max-width: 520px;
    margin: 0 auto;
}

.tp-verify-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

.tp-verify-icon--success {
    background: #e8f5ec;
    color: #1f7a3f;
}

.tp-verify-icon--error {
    background: #fdecea;
    color: #b42318;
}

.tp-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid var(--tp-primary, #1f5eff);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*Verify email sent*/
.tp-verify-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

.tp-verify-icon--info {
    background: #eef4ff;
    color: #1f5eff;
}

.tp-errlist {
    margin: 0;
    padding-left: 1.1rem;
}

.tp-errlist li {
    margin: .15rem 0;
}
.tp-pwrules .tp-req {
    margin: .15rem 0;
}

.tp-req--ok {
    opacity: 1;
}

.tp-req--bad {
    opacity: .7;
}

/*Auth header*/
.tp-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.4;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
}

.tp-pill--ok {
    background: rgba(25,135,84,.10);
    border-color: rgba(25,135,84,.20);
}

.tp-pill--warn {
    background: rgba(255,193,7,.15);
    border-color: rgba(255,193,7,.25);
}

.tp-pill--muted {
    background: rgba(108,117,125,.12);
    border-color: rgba(108,117,125,.20);
}
/*Students*/
.tp-btn--control {
    height: calc(1.5em + .75rem + 2px); /* Bootstrap .form-control height */
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    white-space: nowrap;
}

/* Policy / status callout */
.policy-callout {
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
}

.policy-callout__title {
    font-size: 0.95rem;
    font-weight: 700;
}

.policy-callout--info {
    background: rgba(13,110,253,.08);
    border-color: rgba(13,110,253,.18);
}

.policy-callout--ok {
    background: rgba(25,135,84,.10);
    border-color: rgba(25,135,84,.20);
}

.policy-callout--warn {
    background: rgba(255,193,7,.16);
    border-color: rgba(255,193,7,.26);
}

.policy-callout--danger {
    background: rgba(220,53,69,.10);
    border-color: rgba(220,53,69,.22);
}

.tp-check {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.tp-check__input {
    margin-top: .2rem;
}

.tp-check__label {
    line-height: 1.35;
}

/* =========================================================
   AUTHED HEADER — MOBILE FIXES (DROP-IN REPLACEMENT)
   Paste at VERY BOTTOM of app-shell.css
========================================================= */

/* 0) Fix "double logo" from global .tp-brand--img-ok behavior */
.tp-header--authed .tp-brand__img {
    display: none !important;
}

.tp-header--authed .tp-brand.tp-brand--img-ok .tp-brand__text {
    display: none !important;
}

.tp-header--authed .tp-brand.tp-brand--img-ok .tp-brand__img--desktop {
    display: block !important;
}

.tp-header--authed .tp-brand.tp-brand--img-ok .tp-brand__img--mobile {
    display: none !important;
}

@media (max-width:576px) {
    .tp-header--authed .tp-brand.tp-brand--img-ok .tp-brand__img--desktop {
        display: none !important;
    }

    .tp-header--authed .tp-brand.tp-brand--img-ok .tp-brand__img--mobile {
        display: block !important;
    }
}

/* 1) Desktop layout stays intact */
.tp-header--authed .tp-authedbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    width: 100%;
    min-width: 0;
}

.tp-header--authed .tp-authedbar__left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.tp-header--authed .tp-authedbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
}

/* Burger icon: you are not using .navbar so define the icon explicitly */
.tp-header--authed .navbar-toggler {
    border: 0;
    box-shadow: none;
    padding: .5rem;
}

    .tp-header--authed .navbar-toggler:focus {
        box-shadow: none;
    }

.tp-header--authed .navbar-toggler-icon {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.90)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Hide burger on lg+ */
@media (min-width:992px) {
    .tp-header--authed .tp-authedbar__burger {
        display: none !important;
    }
}

/* IMPORTANT: do NOT clip dropdowns/offcanvas in header */
.tp-header--authed,
.tp-header--authed .tp-navbar,
.tp-header--authed .tp-container,
.tp-header--authed .tp-authedbar,
.tp-header--authed .tp-authedbar__left,
.tp-header--authed .tp-authedbar__right {
    overflow: visible !important;
}

    /* Student shrink rules (works with your Vue markup) */
    .tp-header--authed .tp-studentslot {
        min-width: 0;
        max-width: 260px;
    }

        .tp-header--authed .tp-studentslot .dropdown,
        .tp-header--authed .tp-studentslot .tp-studentbtn {
            min-width: 0;
            max-width: 100%;
        }

    .tp-header--authed .tp-studentbtn__label {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 2) OFFCANVAS: force full-height panel + visible body content */
    .tp-header--authed .tp-drawer.offcanvas {
        /* if ANY global rule changed these, we force them back */
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        max-height: 100vh !important;
    }

    .tp-header--authed .tp-drawer .offcanvas-header {
        flex: 0 0 auto !important;
        background: #fff !important;
    }

    .tp-header--authed .tp-drawer .offcanvas-body,
    .tp-header--authed .tp-drawer__body {
        /* THIS is what makes the menu show */
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        background: #fff !important;
        padding: 16px !important;
    }

/* 3) MOBILE (<768): hard 3-slot grid, tighter so student cannot overlap logo */
@media (max-width: 767.98px) {

    /* ensure burger visible (some global might hide it) */
    .tp-header--authed .tp-authedbar__burger,
    .tp-header--authed .navbar-toggler.tp-toggler,
    .tp-header--authed .navbar-toggler {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .tp-header--authed .tp-authedbar {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 152px !important; /* tighter actions */
        align-items: center;
        gap: 8px;
        min-height: 64px;
    }

    .tp-header--authed .tp-authedbar__left {
        display: contents !important;
    }

    .tp-header--authed .tp-authedbar__burger {
        grid-column: 1;
        justify-self: start;
    }

    .tp-header--authed .tp-authedbar__brand {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: 132px; /* protect logo */
        overflow: hidden; /* ok to clip logo only */
    }

    .tp-header--authed .tp-authedbar__right {
        grid-column: 3;
        justify-self: end;
        margin-left: 0 !important;
        min-width: 0;
        max-width: 152px;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* hard cap student control */
    .tp-header--authed .tp-studentslot {
        width: 96px !important;
        max-width: 96px !important;
        min-width: 0 !important;
    }

        .tp-header--authed .tp-studentslot .dropdown,
        .tp-header--authed .tp-studentslot .tp-studentbtn {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

    /* Dropdowns: keep inside viewport */
    .tp-header--authed .dropdown-menu {
        max-width: calc(100vw - 16px) !important;
        overflow-x: hidden;
    }

    .tp-header--authed .dropdown-menu-end {
        right: 8px !important;
        left: auto !important;
    }

    /* Override inline min-widths (student menu has style="min-width:260px") */
    .tp-header--authed .tp-studentmenu {
        min-width: min(260px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .tp-header--authed .tp-parentmenu {
        min-width: min(240px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* Extra-tight phones */
@media (max-width: 380px) {
    .tp-header--authed .tp-authedbar {
        grid-template-columns: 44px minmax(0, 1fr) 144px !important;
    }

    .tp-header--authed .tp-studentslot {
        width: 88px !important;
        max-width: 88px !important;
    }
}
/* --- Mobile logo crop fix (safe, mobile-only) --- */
@media (max-width: 767.98px) {

    /* Give the center cell a bit more room */
    .tp-header--authed .tp-authedbar {
        grid-template-columns: 44px minmax(0, 1fr) 144px !important; /* was 152px */
    }

    /* Allow logo a bit wider so SVG doesn’t get clipped */
    .tp-header--authed .tp-authedbar__brand {
        max-width: 160px !important; /* was 132px */
    }

    /* Ensure the image can shrink without clipping vertically */
    .tp-header--authed .tp-brand__img {
        height: 34px !important; /* slightly smaller = less chance of crop */
        width: auto !important;
    }

    /* Optional: reduce top/bottom padding if your header is tight */
    .tp-header--authed .tp-navbar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Extra-tight phones: still allow a bit more logo room */
@media (max-width: 380px) {
    .tp-header--authed .tp-authedbar__brand {
        max-width: 150px !important;
    }

    .tp-header--authed .tp-brand__img {
        height: 32px !important;
    }
}
@media (max-width: 767.98px) {
    .policy-page {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===================================
   Authenticated App Mode
   =================================== */

.tp-body.tp-authed {
    background: var(--tp-light); /* subtle app background */
}

/* App content container */
.tp-authed .tp-shell {
    max-width: var(--tp-max-app);
    margin-inline: auto;
    padding: 32px 24px 48px;
}

/* Reduce top hero spacing inside app */
.tp-authed h1,
.tp-authed .tp-h1 {
    margin-top: 0;
}

/* Optional: slightly calmer shadow for app cards */
.tp-authed .tp-card,
.tp-authed .tp-programCard {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
/*Auth page wrapper*/
.tp-page {
    width: 100%;
    max-width: var(--tp-max-app);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* nicer padding on small screens */
@media (max-width: 576px) {
    .tp-page {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* ===========================
   Programs Hub (scoped)
   =========================== */
.tp-programsHub {
    padding-top: 18px;
    padding-bottom: 28px;
}

.tp-programsHub .tp-shell__header {
    margin-bottom: 14px;
}

.tp-programGrid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tp-programsHub .tp-programGrid {
    margin-top: 6px;
    gap: 18px;
}
@media (max-width: 991.98px) {
    .tp-programGrid {
        grid-template-columns: 1fr;
    }
}
.tp-programsHub .tp-pageTitle {
    font-size: 1.6rem;
    font-weight: 650; /* softer than bold */
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}

.tp-programsHub .tp-pageSubtitle {
    font-size: 1rem;
    color: var(--tp-bluegray);
}
/* Card layout with pinned actions */
.tp-programCard {
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 260px; /* helps both cards align even if bullets differ slightly */
}
.tp-programsHub .tp-programCard {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 26px rgba(16, 24, 40, 0.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Header area */
.tp-programCard__head {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr); /* consistent icon column */
    gap: 16px;
    align-items: center;
}

/* Fixed icon frame = alignment magic */
.tp-programCard__iconFrame {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    border: 1px solid var(--tp-border);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden; /* keeps rounded corners clean */
}

/* The image fits inside without cropping */
.tp-programCard__iconImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Text alignment */
.tp-programCard__title {
    margin: 0;
    font-weight: 900;
    color: var(--tp-navy);
    font-size: 1.35rem;
    letter-spacing: -0.2px;
}

.tp-programCard__subtitle {
    margin: 6px 0 0;
    color: rgba(35, 52, 74, 0.85);
    line-height: 1.35;
}

/* Bullets */
.tp-programCard__bullets {
    margin: 14px 0 0;
    padding-left: 18px;
    color: rgba(35, 52, 74, 0.85);
}

.tp-programCard__bullets li {
    margin: 6px 0;
}

/* Actions pinned to bottom */
.tp-programCard__actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
}

/* Mobile tightening */
@media (max-width: 576px) {
    .tp-programCard__head {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    .tp-programCard__iconFrame {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    .tp-programCard {
        padding: 16px;
    }
}

.tp-programsHub__trust {
    max-width: 920px;
    margin: 14px auto 0;
    color: rgba(40, 55, 78, 0.75);
}

.tp-programsHub .tp-programsHub__trust {
    margin: 12px 0 18px;
}

.tp-trustLine {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-trustDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.65);
}

/* Small callouts (if you don't already have these classes) */
.tp-callout {
    max-width: 920px;
    margin: 14px auto 0;
    border-radius: 16px;
    border: 1px solid var(--tp-border);
    background: rgba(255,255,255,0.85);
    padding: 14px 16px;
}

.tp-programsHub .tp-callout {
    margin: 12px 0 18px;
}

.tp-callout__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 800;
    color: var(--tp-navy);
}

.tp-contextBadge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(47, 111, 105, .28);
    border-radius: 999px;
    background: rgba(47, 111, 105, .08);
    color: #2f6f69;
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.2;
}

.tp-gradeSwitch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.tp-gradeSwitch__label {
    color: rgba(40, 55, 78, 0.78);
    font-size: .86rem;
    font-weight: 800;
}

.tp-gradeSwitch__select {
    width: auto;
    min-width: 155px;
    min-height: 40px;
    border-color: rgba(47, 111, 105, .28);
    border-radius: 14px;
    background-color: rgba(47, 111, 105, .08);
    color: #2f6f69;
    font-weight: 900;
}

.tp-gradeSwitch__select--wide {
    min-width: 245px;
}

.tp-gradeSwitch__select:focus {
    border-color: rgba(47, 111, 105, .55);
    box-shadow: 0 0 0 .2rem rgba(47, 111, 105, .16);
}

@media (max-width: 575.98px) {
    .tp-gradeSwitch {
        width: 100%;
        margin-left: 0;
    }

    .tp-gradeSwitch__select {
        width: 100%;
    }
}

.tp-coachPanel {
    display: block;
}

.tp-coachPanel__summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

.tp-coachPanel__summary::-webkit-details-marker {
    display: none;
}

.tp-coachPanel__summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(47, 111, 105, .28);
    border-radius: 999px;
    background: rgba(47, 111, 105, .08);
    color: #2f6f69;
    font-weight: 900;
    flex: 0 0 32px;
}

.tp-coachPanel[open] .tp-coachPanel__summary::after {
    content: "-";
}

.tp-coachPanel__body {
    animation: tpCoachPanelIn .16s ease-out;
}

@keyframes tpCoachPanelIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .tp-coachPanel__summary {
        gap: 10px;
    }
}

.tp-callout__text {
    margin-top: 4px;
    color: rgba(40, 55, 78, 0.85);
}

.tp-callout__actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-callout--warn {
    border-color: rgba(245, 158, 11, 0.35);
}

.tp-callout--ok {
    border-color: rgba(34, 197, 94, 0.25);
}

.tp-strong {
    font-weight: 800;
}
.tp-programsHub .tp-programCard:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
    border-color: rgba(0,0,0,0.12);
}

/* Tighten title/subtitle so top area feels more “designed” */
.tp-programsHub .tp-programCard__title {
    margin: 0;
    line-height: 1.1;
}

.tp-programsHub .tp-programCard__subtitle {
    margin-top: 6px;
    max-width: 44ch;
}

/* Bullet typography: slightly smaller + calmer */
.tp-programsHub .tp-programCard__bullets {
    margin-top: 14px;
    color: rgba(35, 52, 74, 0.86);
}

.tp-programsHub .tp-programCard__bullets li {
    margin: 8px 0;
}

/* Actions feel anchored and consistent */
.tp-programsHub .tp-programCard__actions {
    margin-top: auto;
    padding-top: 14px;
}

/* Trust line spacing */
.tp-programsHub .tp-programsHub__trust {
    margin-top: 18px;
}

/* Mobile: give a bit more breathing room */
@media (max-width: 576px) {
    .tp-programsHub .tp-programCard {
        padding: 16px;
    }
}

/* A short, repeatable routine keeps the programs hub student-first. */
.tp-learningFlow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.tp-learningFlow__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
}

.tp-learningFlow__number {
    display: inline-grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: rgba(62,111,107,0.12);
    color: var(--tp-teal);
    font-size: 0.85rem;
    font-weight: 900;
}

.tp-learningFlow__step strong,
.tp-learningFlow__step span:not(.tp-learningFlow__number) {
    display: block;
}

.tp-learningFlow__step strong {
    color: var(--tp-navy);
    font-size: 0.95rem;
}

.tp-learningFlow__step span:not(.tp-learningFlow__number) {
    margin-top: 2px;
    color: rgba(40,55,78,0.78);
    font-size: 0.84rem;
    line-height: 1.4;
}

/* Cross-program progress is a launcher, not a duplicate study-library area. */
.tp-progressHub__note {
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(62,111,107,0.20);
    border-radius: 14px;
    background: rgba(62,111,107,0.07);
    color: rgba(30,47,77,0.88);
}

.tp-progressHub__sectionHead {
    margin-bottom: 14px;
}

.tp-progressHub__sectionHead h2 {
    margin: 0 0 2px;
    font-size: 1.2rem;
}

.tp-progressHub__sectionHead p {
    margin: 0;
    color: var(--tp-bluegray);
    font-size: 0.95rem;
}

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

.tp-progressHub__card {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    padding: 18px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 8px 26px rgba(16,24,40,0.05);
    color: var(--tp-navy);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tp-progressHub__card:hover {
    transform: translateY(-1px);
    border-color: rgba(62,111,107,0.35);
    box-shadow: 0 12px 30px rgba(16,24,40,0.08);
    color: var(--tp-navy);
}

.tp-progressHub__cardTitle {
    font-weight: 800;
    line-height: 1.25;
}

.tp-progressHub__cardDescription {
    margin-top: 6px;
    color: rgba(40,55,78,0.78);
    font-size: 0.92rem;
    line-height: 1.45;
}

.tp-progressHub__cardAction {
    margin-top: auto;
    padding-top: 16px;
    color: var(--tp-teal);
    font-size: 0.9rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .tp-learningFlow,
    .tp-progressHub__grid {
        grid-template-columns: 1fr;
    }

    .tp-header--authed .tp-studentslot {
        width: 88px !important;
        max-width: 88px !important;
    }

    .tp-header--authed .tp-parentbtn {
        width: var(--tp-tap);
        min-width: var(--tp-tap);
        padding-inline: 0;
    }
}
/* ===========================
   MENTAL MATH PRACTICE PAGE
   =========================== */

.tp-practicePage {
    display: grid;
    gap: 24px;
}

.tp-practicePage__header {
    width: 100%;
    max-width: none;
    display: grid;
    gap: 12px;
}

    .tp-practicePage__header .tp-pageTitle {
        max-width: 980px;
    }

.tp-practicePage__intro {
    margin: 0;
    width: 100%;
    max-width: 1200px;
}

.tp-practicePage__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tp-backLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2f6f69;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

    .tp-backLink span {
        font-size: 1.45rem;
        line-height: .8;
        transform: translateY(-1px);
    }

    .tp-backLink:hover,
    .tp-backLink:focus {
        color: var(--tp-navy);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

.tp-practicePage__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .tp-practicePage__meta span {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 6px 10px;
        border: 1px solid rgba(47, 111, 105, .28);
        border-radius: 999px;
        background: rgba(47, 111, 105, .08);
        color: #244f4b;
        font-size: .9rem;
        font-weight: 800;
        line-height: 1.2;
    }

.tp-practicePage__student {
    width: 100%;
    max-width: none;
}

.tp-practicePage__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: start;
}

.tp-practicePage__main,
.tp-practicePage__side,
.tp-practicePage__stats {
    min-width: 0;
}

.tp-practicePage__stats {
    margin-top: 2px;
}

.tp-contestIntro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.tp-contestIntro__copy {
    display: grid;
    gap: 10px;
    max-width: 980px;
}

    .tp-contestIntro__copy p {
        margin: 0;
        color: var(--tp-bluegray);
        line-height: 1.6;
    }

.tp-contestIntro__actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.tp-contestStats {
    display: grid;
    gap: 20px;
}

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

.tp-contestStats .tp-summaryTile {
    gap: 16px;
    min-height: 148px;
}

.tp-contestStats .tp-practiceStats__list {
    display: grid;
    gap: 14px;
}

.tp-contestStats__row {
    grid-template-columns: 140px 170px 150px 150px;
    gap: 22px;
    min-height: 82px;
    padding: 20px 24px;
}

.tp-contestLevel {
    display: grid;
    gap: 6px;
    max-width: 360px;
}

.tp-socialStudiesMiniContestFilters {
    width: 100%;
    max-width: 760px;
}

.tp-socialStudiesMiniContestFilters__grid {
    grid-template-columns: minmax(240px, 320px) minmax(320px, 1fr);
}

.tp-socialStudiesMiniContestFilters__domain,
.tp-socialStudiesMiniContestFilters__domain .form-select {
    min-width: 0;
    width: 100%;
}

/* Shared card rhythm for this page */
.tp-practicePage .tp-card,
.tp-practicePage .tp-card--soft {
    padding: 24px;
    border-radius: 22px;
}

.tp-card__head {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.tp-card__title {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.1;
}

.tp-card__sub {
    margin: 0;
    color: var(--tp-bluegray);
    font-size: 1rem;
    line-height: 1.55;
}

/* Strategy card */
.tp-strategyCard {
    position: sticky;
    top: 104px;
}

.tp-accordion {
    display: grid;
    gap: 10px;
}

.tp-accitem {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-md);
    background: rgba(255,255,255,.62);
    overflow: hidden;
}

.tp-accitem__summary {
    cursor: pointer;
    list-style: none;
    padding: 13px 16px;
    color: var(--tp-navy);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .tp-accitem__summary::-webkit-details-marker {
        display: none;
    }

    .tp-accitem__summary::before {
        content: "▸";
        font-size: 1rem;
        line-height: 1;
        opacity: .85;
        transform: translateY(-1px);
        flex: 0 0 auto;
    }

.tp-accitem[open] .tp-accitem__summary::before {
    content: "▾";
}

.tp-accitem__title {
    font-size: clamp(1.02rem, 1.2vw, 1.16rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--tp-navy);
    overflow-wrap: anywhere;
}

.tp-accitem__body {
    padding: 0 16px 16px 42px;
    color: var(--tp-bluegray);
    font-size: .96rem;
    line-height: 1.55;
}

.tp-accitem__intro {
    margin: 0 0 10px;
    color: var(--tp-bluegray);
    line-height: 1.55;
}
.tp-miniNote {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(31, 58, 95, 0.05);
    color: var(--tp-navy);
    line-height: 1.55;
    font-size: .94rem;
}

.tp-example {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}

.tp-example--compact {
    background: rgba(248, 250, 252, .9);
}

.tp-example__problem {
    color: var(--tp-navy);
    margin-bottom: 8px;
    font-size: .96rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tp-example__steps {
    margin: 0 0 10px 0;
    padding-left: 20px;
}

    .tp-example__steps li + li {
        margin-top: 8px;
    }

.tp-stepLabel {
    display: inline;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tp-navy);
}
.tp-stepExpr {
    display: block;
    margin-top: 4px;
    color: var(--tp-navy);
    font-weight: 400;
    line-height: 1.65;
}

.tp-example__answer {
    color: var(--tp-bluegray);
    font-size: .96rem;
}

.tp-strategyMore {
    margin-top: 10px;
}

    .tp-strategyMore summary {
        cursor: pointer;
        color: #2f6f69;
        font-weight: 800;
        line-height: 1.35;
    }

    .tp-strategyMore p {
        margin: 8px 0 0;
        color: var(--tp-bluegray);
        line-height: 1.6;
    }

    .tp-strategyMore .tp-example {
        margin-top: 10px;
}

.tp-strategyCard__more {
    margin-top: 14px;
}

@media (max-width: 991.98px) {
    .tp-strategyCard {
        position: static;
    }
}
/* Recent practice section should feel as important as practice */
.tp-practiceStats .tp-card__title,
.tp-practiceStats__head .tp-card__title,
.tp-practiceStats__head .tp-h2 {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.1;
    margin: 0;
}

.tp-practiceStats__head {
    display: grid;
    gap: 6px;
    margin-bottom: 6px;
}

.tp-statRow {
    display: grid;
    grid-template-columns: 120px 150px 130px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
}

.tp-statRow__date {
    font-weight: 700;
    color: var(--tp-navy);
}

.tp-statRow__score,
.tp-statRow__time {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.tp-barTrack {
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--tp-border);
    background: rgba(243,245,247,.92);
    overflow: hidden;
}

.tp-barFill {
    height: 100%;
    background: rgba(31, 58, 95, .55);
}

/* Mobile / tablet */
@media (max-width: 991.98px) {
    .tp-practicePage__grid {
        grid-template-columns: 1fr;
    }

    .tp-strategyCard {
        position: static;
    }
}

@media (max-width: 768px) {
    .tp-practicePage .tp-card,
    .tp-practicePage .tp-card--soft {
        padding: 18px;
    }

    .tp-practicePage__topline {
        align-items: flex-start;
    }

    .tp-practicePage__meta {
        width: 100%;
    }

        .tp-practicePage__meta span {
            max-width: 100%;
        }

    .tp-accitem__body {
        padding-left: 16px;
    }

    .tp-statRow {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tp-contestIntro {
        display: grid;
    }

    .tp-contestIntro__actions,
    .tp-contestIntro__actions .btn {
        width: 100%;
    }

    .tp-contestStats .tp-practiceStats__summaryGrid {
        grid-template-columns: 1fr;
    }
}

.tp-strategyPage {
    display: grid;
    gap: 22px;
}

.tp-strategyPage__actions {
    margin-top: 8px;
}

.tp-strategyPage__list {
    display: grid;
    gap: 18px;
}

.tp-strategyPage__item {
    padding: 24px;
    scroll-margin-top: 110px;
}

.tp-strategyPage__examples {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.tp-strategyLibrary {
    display: grid;
    gap: 22px;
}

.tp-strategyLibrary__filters {
    display: grid;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 18px;
}

.tp-strategyLibrary__filterGrid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.tp-strategyLibrary__filterActions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tp-strategyLibrary__count {
    color: var(--tp-bluegray);
    font-weight: 700;
}

.tp-strategyLibrary__levels {
    display: grid;
    gap: 26px;
}

.tp-strategyLibrary__level {
    display: grid;
    gap: 14px;
}

.tp-strategyLibrary__levelHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tp-border);
}

.tp-strategyLibrary__levelHead h2 {
    margin: 0;
    color: var(--tp-navy);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.15;
}

.tp-strategyLibrary__levelHead span {
    color: var(--tp-bluegray);
    font-weight: 700;
}

.tp-strategyLibrary__skills {
    display: grid;
    gap: 16px;
}

.tp-strategyLibrary__skill {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.05);
    scroll-margin-top: 110px;
}

.tp-strategyLibrary__skillHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.tp-strategyLibrary__skillHead h3 {
    margin: 2px 0 0;
    color: var(--tp-navy);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.2;
}

.tp-strategyLibrary__intro {
    margin: 8px 0 0;
    color: var(--tp-bluegray);
    line-height: 1.55;
}

.tp-strategyLibrary__intro > :first-child,
.tp-accitem__intro > :first-child {
    margin-top: 0;
}

.tp-strategyLibrary__intro > :last-child,
.tp-accitem__intro > :last-child {
    margin-bottom: 0;
}

.tp-strategyLibrary__intro p,
.tp-accitem__intro p {
    margin: 0 0 8px;
}

.tp-strategyLibrary__intro strong,
.tp-accitem__intro strong {
    color: inherit;
}

.tp-strategyLibrary__eyebrow {
    color: #2f6f69;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tp-strategyLibrary__skillActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tp-strategyLibrary__strategyList {
    display: grid;
    gap: 10px;
}

.tp-strategyLibrary__strategy {
    background: rgba(248,250,252,.8);
}

.tp-strategyLibrary__examples {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.tp-strategyLibrary__empty {
    padding: 24px;
}

/* Phase II Study Library */
.tp-phaseTwoStudyLibrary {
    width: 100%;
    min-width: 0;
    gap: 28px;
}

.tp-phaseTwoStudyLibrary > * {
    min-width: 0;
    max-width: 100%;
}

.tp-phaseTwoStudyLibrary .tp-shell__header {
    display: grid;
    gap: 12px;
    margin-bottom: 0;
}

.tp-phaseTwoStudyLibrary .tp-pageTitle,
.tp-phaseTwoStudyLibrary .tp-pageSubtitle {
    margin: 0;
    overflow-wrap: anywhere;
}

.tp-phaseTwoStudyLibrary .tp-pageSubtitle {
    max-width: 780px;
}

.tp-phaseTwoStudyLibrary__filters {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 26px 28px;
    border-radius: 22px;
    box-sizing: border-box;
}

.tp-phaseTwoStudyLibrary__field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.tp-phaseTwoStudyLibrary__field .form-select {
    width: 100%;
    min-width: 0;
}

.tp-phaseTwoStudyLibrary__filterAction {
    display: flex;
    min-width: 0;
}

.tp-phaseTwoStudyLibrary__guides {
    display: grid;
    min-width: 0;
    gap: 24px;
}

.tp-phaseTwoStudyLibrary__guide {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 30px;
    border-radius: 22px;
    box-sizing: border-box;
    overflow: hidden;
}

.tp-phaseTwoStudyLibrary__guideHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: 14px;
    margin-bottom: 22px;
}

.tp-phaseTwoStudyLibrary__guideHead .tp-card__title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-phaseTwoStudyLibrary__guideHead .tp-pill {
    flex: 0 0 auto;
}

.tp-phaseTwoStudyLibrary__guideContent {
    display: grid;
    min-width: 0;
    gap: 24px;
}

.tp-phaseTwoStudyLibrary__guideContent p,
.tp-phaseTwoStudyLibrary__guideContent li {
    overflow-wrap: anywhere;
}

.tp-phaseTwoStudyLibrary__guideContent p {
    margin: 0;
    line-height: 1.65;
}

.tp-phaseTwoStudyLibrary__introduction {
    color: var(--tp-bluegray);
    font-size: 1.05rem;
}

.tp-phaseTwoStudyLibrary__section {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.tp-phaseTwoStudyLibrary__section .h5 {
    margin: 0;
    color: var(--tp-navy);
}

.tp-phaseTwoStudyLibrary__section ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.4rem;
}

.tp-phaseTwoStudyLibrary__examples {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.tp-phaseTwoStudyLibrary__example {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 18px 20px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(248, 250, 252, .76);
}

.tp-phaseTwoStudyLibrary__example .tp-mathProblemText {
    color: var(--tp-navy);
    font-weight: 800;
}

.tp-phaseTwoStudyLibrary__note {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
    padding: 18px 20px;
}

.tp-phaseTwoStudyLibrary__note p {
    margin: 0;
}

/* Phase II contest: retain the airy card rhythm used by the practice pages. */
.tp-phaseTwoContest .tp-card {
    padding: 28px;
    border-radius: 22px;
}

.tp-phaseTwoContest .tp-card__head {
    margin-bottom: 20px;
}

.tp-phaseTwoContest .tp-contestStats {
    gap: 24px;
}

.tp-phaseTwoContest__emptyState {
    min-height: 92px;
    display: flex;
    align-items: center;
}

.tp-phaseTwoTestRun {
    overflow: visible;
}

.tp-phaseTwoContestTimer {
    position: sticky;
    top: 88px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .10);
}

.tp-phaseTwoContestTimer__details {
    display: grid;
    gap: 2px;
    color: var(--tp-navy);
}

.tp-phaseTwoContestTimer__value {
    color: var(--tp-navy);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-phaseTwoContestRun__format {
    line-height: 1.65;
}

.tp-phaseTwoContestRun__resultGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.tp-phaseTwoDiagnostic__start,
.tp-phaseTwoDiagnostic__result {
    padding: 28px;
}

.tp-phaseTwoDiagnostic__questions {
    display: grid;
    gap: 20px;
}

.tp-phaseTwoDiagnostic__question {
    margin: 0;
    padding: 28px;
}

.tp-phaseTwoDiagnostic__gradeResults {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.tp-phaseTwoDiagnostic__gradeResult {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: var(--tp-surface);
    color: var(--tp-navy);
}

.tp-phaseTwoDiagnostic__gradeResult strong {
    font-size: 1.45rem;
}

@media (max-width: 768px) {
    .tp-phaseTwoStudyLibrary {
        gap: 22px;
    }

    .tp-phaseTwoStudyLibrary__filters {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
    }

    .tp-phaseTwoStudyLibrary__filterAction,
    .tp-phaseTwoStudyLibrary__filterAction .btn {
        width: 100%;
    }

    .tp-phaseTwoStudyLibrary__guide {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .tp-phaseTwoStudyLibrary__guideHead {
        display: grid;
        gap: 10px;
        margin-bottom: 18px;
    }

    .tp-phaseTwoStudyLibrary__guideHead .tp-pill {
        width: fit-content;
    }

    .tp-phaseTwoStudyLibrary__guideContent {
        gap: 20px;
    }

    .tp-phaseTwoStudyLibrary__example,
    .tp-phaseTwoStudyLibrary__note {
        padding: 16px;
    }

    .tp-phaseTwoContest .tp-card {
        padding: 20px;
        border-radius: 18px;
    }

    .tp-phaseTwoContest .tp-card__head {
        margin-bottom: 16px;
    }

    .tp-phaseTwoDiagnostic__start,
    .tp-phaseTwoDiagnostic__result,
    .tp-phaseTwoDiagnostic__question {
        padding: 20px;
    }

    .tp-phaseTwoContestTimer {
        top: 8px;
        align-items: stretch;
        flex-wrap: wrap;
        padding: 14px;
    }

    .tp-phaseTwoContestTimer__value {
        margin-left: auto;
    }
}

@media (max-width: 420px) {
    .tp-phaseTwoStudyLibrary__guide {
        padding: 18px 16px;
    }
}

.tp-mathStudyLibrary__filterGrid {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}

.tp-mathStudyLibrary__themeHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 14px;
}

.tp-mathStudyLibrary__themeHead h4 {
    margin: 2px 0 6px;
    color: var(--tp-navy);
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    line-height: 1.2;
}

.tp-mathStudyLibrary__themeHead p {
    margin: 0;
    color: var(--tp-bluegray);
    line-height: 1.55;
}

.tp-mathStudyLibrary__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.tp-mathStudyLibrary__formula {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

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

.tp-mathStudyLibrary__difficulty {
    width: fit-content;
    min-width: 112px;
    justify-content: center;
    margin-bottom: 8px;
}

.tp-socialStudiesStudyLibrary {
    gap: 24px;
}

.tp-socialStudiesStudyLibrary .tp-shell__header {
    margin-bottom: 4px;
}

.tp-socialStudiesStudyLibrary .tp-progressFilters {
    margin-bottom: 0;
}

.tp-socialStudiesStudyLibrary__grades {
    gap: 22px;
}

.tp-socialStudiesStudyLibrary__grade {
    padding: 28px 30px 30px;
}

.tp-socialStudiesStudyLibrary__grade > .tp-card__head {
    margin-bottom: 22px;
}

.tp-socialStudiesStudyLibrary__grade .tp-mathStudyLibrary__branch {
    display: grid;
    gap: 14px;
}

.tp-socialStudiesStudyLibrary__grade .tp-mathStudyLibrary__branch + .tp-mathStudyLibrary__branch {
    margin-top: 28px;
}

.tp-socialStudiesStudyLibrary__theme summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 18px;
    line-height: 1.35;
}

.tp-socialStudiesStudyLibrary__themeTitle {
    color: var(--tp-navy);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tp-socialStudiesStudyLibrary__theme summary small {
    color: var(--tp-bluegray);
    font-size: .9rem;
}

.tp-socialStudiesStudyLibrary__theme .tp-accitem__body {
    display: grid;
    gap: 16px;
    padding: 18px 22px 22px 52px;
}

.tp-socialStudiesStudyLibrary__theme .tp-accitem__body > p {
    margin: 0;
}

.tp-socialStudiesStudyLibrary__theme .tp-accitem__intro {
    margin: 0;
}

.tp-socialStudiesStudyLibrary__theme .tp-miniNote,
.tp-socialStudiesStudyLibrary__theme .tp-scienceStudyExampleGrid {
    margin-top: 0;
}

.tp-relatedStudy {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.tp-relatedStudy > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-mathLearningPage > .tp-card,
.tp-mathLearningPage > section.tp-card,
.tp-mathLearningPage > form.tp-card,
.tp-mathLearningPage > div.tp-card {
    padding: 28px;
    border-radius: 22px;
}

.tp-mathLearningPage > .tp-card > :first-child,
.tp-mathLearningPage > section.tp-card > :first-child,
.tp-mathLearningPage > form.tp-card > :first-child,
.tp-mathLearningPage > div.tp-card > :first-child {
    margin-top: 0;
}

.tp-mathLearningPage > .tp-card > :last-child,
.tp-mathLearningPage > section.tp-card > :last-child,
.tp-mathLearningPage > form.tp-card > :last-child,
.tp-mathLearningPage > div.tp-card > :last-child {
    margin-bottom: 0;
}

.tp-mathLearningTools {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.tp-mathLearningPage > .tp-scienceLearningTools,
.tp-scienceLearningTools {
    padding: 0;
}

.tp-scienceLearningTools__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    list-style: none;
}

.tp-scienceLearningTools__summary::-webkit-details-marker {
    display: none;
}

.tp-scienceLearningTools__summary h2,
.tp-scienceLearningTools__summary p {
    margin: 0;
}

.tp-scienceLearningTools__summary p {
    margin-top: 4px;
}

.tp-scienceLearningTools__chevron {
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--tp-teal);
    border-bottom: 3px solid var(--tp-teal);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.tp-scienceLearningTools[open] .tp-scienceLearningTools__chevron {
    transform: rotate(225deg);
}

.tp-scienceLearningTools .tp-mathLearningTools__grid {
    padding: 0 24px 24px;
}

.tp-mathLearningTools__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.tp-mathLearningTools__grid a {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    color: var(--tp-navy);
    text-decoration: none;
    background: rgba(255,255,255,.86);
}

.tp-mathLearningTools__grid a:hover,
.tp-mathLearningTools__grid a:focus {
    border-color: rgba(47,111,105,.45);
    background: rgba(232,244,242,.75);
}

.tp-mathLearningTools__grid span,
.tp-learningItem p,
.tp-masteryTile p {
    color: var(--tp-bluegray);
}

.tp-learningList {
    display: grid;
    gap: 12px;
}

.tp-learningItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.9);
}

.tp-learningItem h3 {
    margin: 0 0 4px;
    color: var(--tp-navy);
    font-size: 1.05rem;
}

.tp-learningItem p {
    margin: 0;
}

.tp-learningItem__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tp-mathCoachHero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 24px;
    align-items: center;
}

.tp-mathCoachHero .tp-strategyLibrary__eyebrow {
    margin-bottom: 8px;
}

.tp-mathCoachHero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    color: var(--tp-bluegray);
    font-weight: 800;
}

.tp-progressSummaryGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.tp-progressSummaryCard {
    display: grid;
    gap: 8px;
    min-height: 112px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.05);
}

.tp-progressSummaryCard span,
.tp-progressSummaryCard small {
    color: var(--tp-bluegray);
    line-height: 1.35;
}

.tp-progressSummaryCard strong {
    color: var(--tp-navy);
    font-size: 1.65rem;
    line-height: 1.1;
}

.tp-masteryGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.tp-masteryTile {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-left: 5px solid var(--tp-border);
}

.tp-masteryTile h3 {
    margin: 8px 0 4px;
    color: var(--tp-navy);
    font-size: 1.05rem;
}

.tp-masteryTile__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--tp-bluegray);
    font-weight: 800;
}

.tp-masteryTile--strong {
    border-left-color: #2f6f69;
}

.tp-masteryTile--improving,
.tp-masteryTile--warming {
    border-left-color: #dba62b;
}

.tp-masteryTile--review {
    border-left-color: #b45353;
}

.tp-mathDiagnosticForm {
    display: grid;
    gap: 18px;
}

.tp-mathDiagnosticQuestion {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: rgba(248,250,252,.72);
}

.tp-mathDiagnosticQuestion__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-mathDiagnosticQuestion__head h3 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1.12rem;
}

.tp-hintLadder {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.tp-hintLadder__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--tp-bluegray);
}

@media (max-width: 768px) {
    .tp-strategyLibrary__filters {
        padding: 18px;
    }

    .tp-mathLearningPage > .tp-card,
    .tp-mathLearningPage > section.tp-card,
    .tp-mathLearningPage > form.tp-card,
    .tp-mathLearningPage > div.tp-card {
        padding: 22px;
    }

    .tp-mathLearningPage > .tp-scienceLearningTools {
        padding: 0;
    }

    .tp-scienceLearningTools__summary {
        padding: 18px;
    }

    .tp-scienceLearningTools .tp-mathLearningTools__grid {
        grid-template-columns: 1fr;
        padding: 0 18px 18px;
    }

    .tp-strategyLibrary__filterGrid,
    .tp-strategyLibrary__skillHead,
    .tp-mathStudyLibrary__themeHead {
        grid-template-columns: 1fr;
    }

    .tp-strategyLibrary__skill {
        padding: 16px;
    }

    .tp-strategyLibrary__skillActions {
        justify-content: flex-start;
    }

    .tp-strategyLibrary__skillActions .btn,
    .tp-strategyLibrary__filterActions .btn {
        width: 100%;
    }

    .tp-learningItem,
    .tp-mathCoachHero {
        grid-template-columns: 1fr;
    }

    .tp-learningItem__actions,
    .tp-mathCoachHero__stats {
        justify-content: flex-start;
    }
}

/* ===========================
   MENTAL MATH PROGRESS PAGE
   mobile responsiveness
   =========================== */

.tp-progressPage {
    display: grid;
    gap: 28px;
    width: 100%;
    min-width: 0;
}

    .tp-progressPage .tp-shell__header {
        display: grid;
        gap: 10px;
    }

    .tp-progressPage .tp-pageTitle {
        margin: 0;
        line-height: 1.05;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .tp-progressPage .tp-pageSubtitle {
        margin: 0;
        max-width: 100%;
    }

.tp-progressPage__studentNote {
    margin-top: 4px;
    color: var(--tp-bluegray);
}

.tp-progressPage__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tp-progressFilters,
.tp-progressChart,
.tp-skillBreakdown,
.tp-recentAttempts {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tp-progressFilters {
    display: grid;
    gap: 18px;
    padding: 22px 24px;
}

.tp-progressFilters__actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.tp-progressSummary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.tp-summaryTile {
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    padding: 24px;
    display: grid;
    gap: 12px;
    min-height: 126px;
    align-content: start;
    min-width: 0;
}

.tp-summaryTile__label {
    color: var(--tp-bluegray);
    font-size: 0.98rem;
    line-height: 1.35;
}

.tp-summaryTile__value {
    color: var(--tp-navy);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.tp-progressChart,
.tp-skillBreakdown,
.tp-recentAttempts {
    padding: 24px;
}

.tp-card__head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.tp-skillBreakdown__list {
    display: grid;
    gap: 12px;
}

.tp-skillRow {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(110px, .65fr)) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    min-width: 0;
}

.tp-skillRow__title {
    font-weight: 800;
    color: var(--tp-navy);
}

.tp-skillRow__meta {
    color: var(--tp-bluegray);
    margin-top: 4px;
}

.tp-skillRow__stat {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tp-skillRow__action {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-self: end;
    justify-content: flex-end;
}

.tp-skillRow__action .btn {
        min-width: 104px;
    }

/* Phase II Reading learning surfaces */
.tp-readingLearningPage {
    gap: 28px;
}

.tp-readingLearningPage > .tp-card,
.tp-readingLearningPage > section.tp-card,
.tp-readingLearningPage > form.tp-card,
.tp-readingLearningPage > article.tp-card {
    padding: 28px;
    border-radius: 22px;
}

.tp-readingLearningPage > .tp-card > :first-child,
.tp-readingLearningPage > section.tp-card > :first-child,
.tp-readingLearningPage > form.tp-card > :first-child,
.tp-readingLearningPage > article.tp-card > :first-child {
    margin-top: 0;
}

.tp-readingLearningPage > .tp-card > :last-child,
.tp-readingLearningPage > section.tp-card > :last-child,
.tp-readingLearningPage > form.tp-card > :last-child,
.tp-readingLearningPage > article.tp-card > :last-child {
    margin-bottom: 0;
}

.tp-readingStudyLibrary__filters {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 0;
}

.tp-readingStudyLibrary__field,
.tp-readingCoach__field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.tp-readingCoach__field {
    width: min(100%, 220px);
}

.tp-readingStudyLibrary__filterAction {
    display: flex;
}

.tp-readingStudyLibrary__guide {
    display: grid;
    gap: 26px;
}

.tp-readingStudyLibrary__guideHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tp-border);
}

.tp-readingStudyLibrary__guideHead .tp-card__title {
    margin: 6px 0 8px;
}

.tp-readingStudyLibrary__guideHead .tp-card__sub {
    max-width: 68ch;
    margin: 0;
}

.tp-readingStudyLibrary__section {
    display: grid;
    gap: 12px;
}

.tp-readingStudyLibrary__section .h5 {
    margin: 0;
    color: var(--tp-navy);
}

.tp-readingStudyLibrary__steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.5rem;
}

.tp-readingStudyLibrary__steps li {
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(248,250,252,.78);
    line-height: 1.55;
}

.tp-readingStudyLibrary__trap {
    margin: 0;
}

.tp-readingStudyLibrary__forms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-readingStudyLibrary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 2px;
}

.tp-readingCoachHero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 24px;
    align-items: center;
}

.tp-readingCoachHero .tp-card__title {
    margin: 6px 0 8px;
}

.tp-readingCoachHero .tp-card__sub {
    max-width: 64ch;
    margin: 0;
}

.tp-readingCoachHero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: var(--tp-bluegray);
    font-weight: 700;
}

.tp-readingCoachHero__stats span {
    padding: 8px 10px;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
}

.tp-readingCoachHero__stats strong {
    color: var(--tp-navy);
}

.tp-readingCoachHero__watch {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-left: 4px solid #e3a72f;
    border-radius: 12px;
    background: rgba(255,248,231,.72);
    color: var(--tp-bluegray);
}

.tp-readingCoachHero__watch strong {
    color: var(--tp-navy);
}

.tp-readingCoachHero .tp-progressPage__actions {
    grid-column: 1 / -1;
}

.tp-readingMistakeList {
    display: grid;
    gap: 18px;
}

.tp-readingContestRules__form {
    display: grid;
    gap: 18px;
    max-width: 34rem;
}

.tp-readingMistake {
    display: grid;
    gap: 20px;
    padding: 32px;
    border-radius: 22px;
}

.tp-readingMistake__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tp-readingMistake__head .tp-card__title {
    margin: 6px 0 0;
}

.tp-readingMistake__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    color: var(--tp-bluegray);
    font-size: .9rem;
    font-weight: 700;
}

.tp-readingMistake__meta span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(238,243,248,.86);
}

.tp-readingMistake__question,
.tp-readingMistake__answers > div,
.tp-readingMistake__repair > div {
    display: grid;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(248,250,252,.76);
}

.tp-readingMistake__question p,
.tp-readingMistake__answers p,
.tp-readingMistake__repair p {
    margin: 0;
    line-height: 1.55;
}

.tp-readingMistake__label {
    color: var(--tp-bluegray);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

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

.tp-readingMistake__answers > div:first-child {
    border-color: rgba(180,83,83,.35);
    background: rgba(255,244,244,.72);
}

.tp-readingMistake__answers > div:last-child {
    border-color: rgba(47,111,105,.32);
    background: rgba(238,250,245,.72);
}

.tp-readingMistake__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-readingEmptyState {
    min-height: 138px;
    align-content: center;
}

@media (max-width: 768px) {
    .tp-readingLearningPage > .tp-card,
    .tp-readingLearningPage > section.tp-card,
    .tp-readingLearningPage > form.tp-card,
    .tp-readingLearningPage > article.tp-card {
        padding: 22px;
    }

    .tp-readingMistake {
        padding: 24px;
    }

    .tp-readingStudyLibrary__filters,
    .tp-readingCoachHero,
    .tp-readingMistake__answers,
    .tp-readingMistake__repair {
        grid-template-columns: 1fr;
    }

    .tp-readingStudyLibrary__guideHead,
    .tp-readingMistake__head {
        display: grid;
    }

    .tp-readingStudyLibrary__filterAction .btn,
    .tp-readingMistake__actions .btn {
        width: 100%;
    }

    .tp-readingCoachHero__stats,
    .tp-readingMistake__meta {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .tp-readingLearningPage > .tp-card,
    .tp-readingLearningPage > section.tp-card,
    .tp-readingLearningPage > form.tp-card,
    .tp-readingLearningPage > article.tp-card {
        padding: 18px;
    }

    .tp-readingMistake {
        padding: 20px;
    }
}

.tp-attemptTableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    width: 100%;
}

.tp-attemptTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

    .tp-attemptTable th,
    .tp-attemptTable td {
        padding: 16px 18px;
        border-bottom: 1px solid var(--tp-border);
        text-align: left;
        vertical-align: middle;
    }

    .tp-attemptTable th {
        font-weight: 800;
        color: var(--tp-navy);
        background: rgba(243,245,247,.92);
        white-space: nowrap;
    }

    .tp-attemptTable tbody tr:last-child td {
        border-bottom: 0;
    }

.tp-spellingProgress__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.tp-spellingProgress__readiness,
.tp-spellingProgress__consistency,
.tp-spellingProgress__checklist,
.tp-spellingProgress__patterns,
.tp-spellingProgress__review {
    padding: 24px;
    min-width: 0;
}

.tp-spellingProgress__readinessTop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--tp-navy);
    margin-bottom: 10px;
}

    .tp-spellingProgress__readinessTop strong {
        font-size: 1.2rem;
    }

    .tp-spellingProgress__readinessTop span {
        font-size: 1.5rem;
        font-weight: 900;
    }

.tp-spellingProgress__readinessTrack {
    height: 12px;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    background: rgba(243,245,247,.92);
    overflow: hidden;
}

.tp-spellingProgress__readinessFill {
    height: 100%;
    border-radius: 999px;
    background: #2f6f69;
}

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

    .tp-spellingProgress__miniStats > div {
        display: grid;
        gap: 4px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid var(--tp-border);
        border-radius: 12px;
        background: rgba(255,255,255,.82);
    }

    .tp-spellingProgress__miniStats strong {
        color: var(--tp-navy);
        font-size: 1.35rem;
        line-height: 1.1;
    }

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

.tp-spellingProgress__checklistItem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(227, 167, 47, .34);
    border-radius: 14px;
    background: rgba(227, 167, 47, .08);
}

.tp-spellingProgress__checklistItem.is-ready {
    border-color: rgba(47, 111, 105, .32);
    background: rgba(47, 111, 105, .08);
}

.tp-spellingProgress__checklistMark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    border-radius: 999px;
    background: rgba(138, 90, 0, .12);
    color: #8a5a00;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
}

.tp-spellingProgress__checklistItem.is-ready .tp-spellingProgress__checklistMark {
    background: rgba(47, 111, 105, .14);
    color: #2f6f69;
}

.tp-spellingProgress__checklistItem > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tp-spellingProgress__checklistItem strong {
    color: var(--tp-navy);
    line-height: 1.25;
}

.tp-spellingProgress__checklistItem span:not(.tp-spellingProgress__checklistMark) {
    color: var(--tp-bluegray);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tp-spellingProgress__checklistItem em {
    justify-self: end;
    color: var(--tp-navy);
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.tp-spellingProgress__patternList,
.tp-spellingProgress__reviewList {
    display: grid;
    gap: 10px;
}

.tp-spellingProgress__patternRow,
.tp-spellingProgress__reviewRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(255,255,255,.86);
}

    .tp-spellingProgress__patternRow > div,
    .tp-spellingProgress__reviewRow > div:first-child {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .tp-spellingProgress__patternRow strong,
    .tp-spellingProgress__reviewRow strong {
        color: var(--tp-navy);
    }

    .tp-spellingProgress__patternRow span,
    .tp-spellingProgress__reviewRow span,
    .tp-spellingProgress__reviewRow small {
        color: var(--tp-bluegray);
        overflow-wrap: anywhere;
    }

.tp-spellingProgress__reviewAction {
    display: grid;
    gap: 8px;
    justify-items: end;
    flex: 0 0 auto;
}

/* Practice page stats header */
.tp-practicePage__statsTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tp-practicePage__statsIntro {
    display: grid;
    gap: 4px;
}

.tp-practicePage__statsActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tp-summaryTile__value--stack {
    display: grid;
    gap: 8px;
    align-content: start;
}

.tp-summaryTile__mainValue {
    display: block;
}

.tp-summaryTile__note {
    display: block;
    color: var(--tp-bluegray);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
}

.tp-coachActionTile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tp-summaryTile__action {
    margin-top: auto;
}

.tp-summaryTile__action .btn {
    width: 100%;
    min-height: 44px;
}

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

    .tp-spellingProgress__grid {
        grid-template-columns: 1fr;
    }

    .tp-spellingProgress__checklistList {
        grid-template-columns: 1fr;
    }

    .tp-spellingProgress__patternRow,
    .tp-spellingProgress__reviewRow {
        align-items: stretch;
        flex-direction: column;
    }

    .tp-spellingProgress__reviewAction {
        justify-items: stretch;
    }

    .tp-skillRow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tp-skillRow__action {
        justify-self: stretch;
        justify-content: flex-start;
    }

        .tp-skillRow__action .btn {
            width: 100%;
        }
}

/* Mobile */
@media (max-width: 767.98px) {
    .tp-progressPage {
        gap: 20px;
    }

        .tp-progressPage .tp-pageTitle {
            font-size: clamp(2rem, 10vw, 2.6rem);
            line-height: 1.02;
            letter-spacing: -0.02em;
        }

        .tp-progressPage .tp-pageSubtitle {
            font-size: 1rem;
            line-height: 1.5;
        }

    .tp-progressPage__studentNote {
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .tp-progressFilters,
    .tp-progressChart,
    .tp-skillBreakdown,
    .tp-recentAttempts {
        padding: 18px;
        border-radius: 18px;
    }

    .tp-progressFilters__actions {
        margin-top: 14px;
    }

        .tp-progressFilters__actions .btn {
            min-width: 0;
        }

    .tp-progressSummary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tp-summaryTile {
        padding: 18px;
        min-height: auto;
        gap: 10px;
    }

    .tp-spellingProgress__readiness,
    .tp-spellingProgress__consistency,
    .tp-spellingProgress__checklist,
    .tp-spellingProgress__patterns,
    .tp-spellingProgress__review {
        padding: 18px;
    }

    .tp-spellingProgress__miniStats {
        grid-template-columns: 1fr;
    }

    .tp-summaryTile__label {
        font-size: 0.95rem;
    }

    .tp-summaryTile__value {
        font-size: 1.45rem;
    }

    .tp-card__head {
        gap: 6px;
        margin-bottom: 14px;
    }

    .tp-skillRow {
        padding: 16px;
    }

    .tp-attemptTable th,
    .tp-attemptTable td {
        padding: 14px 14px;
    }
}

/* Very narrow phones */
@media (max-width: 420px) {
    .tp-progressPage .tp-pageTitle {
        font-size: clamp(1.8rem, 9vw, 2.3rem);
    }

    .tp-progressFilters,
    .tp-progressChart,
    .tp-skillBreakdown,
    .tp-recentAttempts {
        padding: 16px;
    }

    .tp-summaryTile {
        padding: 16px;
    }
}

/*MentalMath example*/

.me-fraction {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.me-fraction .top {
    display: block;
    border-bottom: 2px solid #000;
    padding: 0 4px;
}

.me-fraction .bottom {
    display: block;
    font-size: 0.9em;
}
.me-expr {
    display: inline-flex;
    align-items: center; /* KEY: aligns parentheses with fractions */
    gap: 0.28em;
}

.paren {
    display: inline-block;
    font-size: 2em; /* stretch vertically */
    line-height: 1;
    margin: 0 2px;
}
.tp-fracInline {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.tp-fracInline__top {
    display: block;
    border-bottom: 2px solid #000;
    padding: 0 4px;
}

.tp-fracInline__bar {
    width: 100%;
    border-top: 1px solid currentColor;
    margin: 1px 0;
}

.tp-fracInline__bot {
    display: block;
    font-size: 0.9em;
}

/* Operators */
.tp-op {
    margin: 0 6px;
    font-weight: 500;
}

/* ===========================
   MATHEMATICS PRACTICE
   =========================== */

.tp-mathThemeSelectorPage {
    display: grid;
    gap: 22px;
}

.tp-mathThemeSelectorPage__areas {
    display: grid;
    gap: 18px;
}

.tp-mathThemeArea {
    padding: 24px;
}

.tp-mathThemeArea__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.tp-mathThemeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
}

.tp-mathThemeCard {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tp-mathThemeCard:hover,
.tp-mathThemeCard:focus-visible {
    border-color: rgba(47, 111, 105, .48);
    box-shadow: 0 14px 30px rgba(31, 58, 95, .11);
    color: inherit;
    transform: translateY(-1px);
}

.tp-mathThemeCard__head {
    display: grid;
    gap: 8px;
}

.tp-mathThemeCard h3 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1.15rem;
    line-height: 1.25;
}

.tp-mathThemeCard p {
    margin: 0;
    color: var(--tp-bluegray);
    line-height: 1.55;
}

.tp-mathThemeCard__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-mathSelectorCard {
    padding: 24px;
}

.tp-mathSelector {
    display: grid;
    gap: 12px;
}

.tp-mathSelector__searchRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.tp-mathSelector__search,
.tp-mathSelector__clear {
    min-height: 48px;
}

.tp-mathSelector__summary {
    display: grid;
    gap: 12px;
}

.tp-mathSelector__selected {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--tp-bluegray);
    font-size: .95rem;
    line-height: 1.35;
}

.tp-mathSelector__selected span {
    font-weight: 700;
}

.tp-mathSelector__selected strong {
    color: var(--tp-navy);
}

.tp-mathSelector__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-mathSelector__actions--bottom {
    padding-top: 4px;
}

.tp-mathSelector__categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-mathSelector__category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--tp-navy);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
}

.tp-mathSelector__category small {
    color: var(--tp-bluegray);
    font-size: .78rem;
    font-weight: 800;
}

.tp-mathSelector__category:hover,
.tp-mathSelector__category:focus {
    border-color: rgba(47, 111, 105, .45);
    background: rgba(247, 251, 250, .96);
    outline: none;
}

.tp-mathSelector__category.is-selected {
    border-color: rgba(47, 111, 105, .72);
    background: rgba(47, 111, 105, .11);
    color: #244f4b;
}

.tp-mathSelector__list {
    display: grid;
    gap: 7px;
    padding: 4px 0;
}

.tp-mathSelector__option {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px 10px 18px;
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    color: var(--tp-navy);
    text-align: left;
    line-height: 1.3;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.tp-mathSelector__option:hover,
.tp-mathSelector__option:focus {
    border-color: rgba(47, 111, 105, .45);
    background: rgba(247, 251, 250, .96);
    box-shadow: 0 0 0 3px rgba(47, 111, 105, .1);
    outline: none;
}

.tp-mathSelector__option.is-selected {
    border-color: rgba(47, 111, 105, .72);
    background: rgba(47, 111, 105, .09);
    box-shadow: inset 4px 0 0 #2f6f69;
}

.tp-mathSelector__optionTitle {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tp-socialStudiesSelectorPage .tp-mathSelector__option {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 18px;
}

.tp-socialStudiesSelectorPage .tp-mathSelector__option .tp-help {
    min-width: 0;
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 639.98px) {
    .tp-socialStudiesSelectorPage .tp-mathSelector__option {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

.tp-mathSelector__empty {
    padding: 14px;
    border: 1px dashed var(--tp-border);
    border-radius: 12px;
    color: var(--tp-bluegray);
    background: rgba(255, 255, 255, .6);
}

.tp-mathPracticePage {
    display: grid;
    gap: 22px;
}

.tp-mathFilters {
    padding: 22px 24px;
}

.tp-mathFilters__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
    gap: 16px;
    align-items: end;
}

.tp-mathPracticeProblem {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.tp-card__head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.tp-mathDifficultyControl {
    display: flex;
    justify-content: flex-end;
}

.tp-mathDifficultySwitch {
    display: grid;
    gap: 6px;
    min-width: 160px;
}

.tp-mathDifficultySwitch .form-label {
    margin: 0;
    color: rgba(40, 55, 78, .76);
    font-size: .86rem;
    font-weight: 800;
}

.tp-mathProblemForm {
    display: grid;
    gap: 18px;
}

.tp-mathProblemText {
    padding: 18px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(248, 250, 252, .78);
    color: var(--tp-navy);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.7;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.tp-mathProblemText .tp-mathTable {
    width: 100%;
    min-width: 560px;
    margin: 16px 0 0;
    border: 1px solid rgba(31, 58, 95, .16);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, .94);
    color: var(--tp-navy);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.tp-mathProblemText .tp-mathTable th,
.tp-mathProblemText .tp-mathTable td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(31, 58, 95, .12);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tp-mathProblemText .tp-mathTable th {
    width: 28%;
    border-right: 1px solid rgba(31, 58, 95, .12);
    background: rgba(47, 111, 105, .11);
    text-align: left;
    font-weight: 900;
    white-space: normal;
}

.tp-mathProblemText .tp-mathTable tr:last-child th,
.tp-mathProblemText .tp-mathTable tr:last-child td {
    border-bottom: 0;
}

.tp-mathProblemText .tp-mathTable td {
    font-variant-numeric: tabular-nums;
}

.tp-cubeNetSet {
    display: flex;
    gap: 20px;
    align-items: end;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.tp-cubeNetFigure {
    margin: 0;
    display: inline-flex;
}

.tp-cubeNetDiagram {
    max-width: 100%;
    height: auto;
}

.tp-geometryFigure {
    display: flex;
    justify-content: center;
    margin: 14px 0 0;
}

.tp-midpointSquareDiagram {
    max-width: 100%;
    height: auto;
}

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

.tp-mathChoice {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: var(--tp-navy);
    cursor: pointer;
}

.tp-mathChoice input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.tp-mathChoice__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(31, 58, 95, .08);
    color: var(--tp-navy);
    font-weight: 900;
}

.tp-mathChoice__value {
    min-width: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
}

.tp-mathChoice:has(input:checked) {
    border-color: rgba(47, 111, 105, .48);
    background: rgba(47, 111, 105, .08);
}

.tp-mathChoice.is-correct {
    border-color: rgba(31, 122, 69, .5);
    background: rgba(46, 204, 113, .12);
}

.tp-mathChoice.is-wrong {
    border-color: rgba(138, 90, 0, .45);
    background: rgba(227, 167, 47, .12);
}

.tp-scienceChoices {
    grid-template-columns: 1fr;
}

.tp-scienceChoices .tp-mathChoice {
    align-items: flex-start;
}

.tp-socialStudiesChoices {
    margin-top: 20px;
}

.tp-scienceDiagnosticChoices {
    display: grid;
    gap: 12px;
}

.tp-scienceDiagnosticChoices .tp-mathChoice {
    align-items: flex-start;
}

.tp-scienceStimulusImage {
    margin: 18px 0 0;
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    overflow: hidden;
}

.tp-scienceStimulusImage img {
    display: block;
    width: 100%;
    height: auto;
}

.tp-scienceTextDiagram {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    color: var(--tp-navy);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 14px 0 0;
    overflow-x: auto;
    padding: 14px 16px;
    white-space: pre;
}

.tp-scienceEquationStack {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.tp-scienceEquation {
    display: block;
    width: 100%;
    border: 1px solid rgba(31, 58, 95, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    color: var(--tp-navy);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    text-align: center;
}

.tp-scienceDataTableWrap {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    margin-top: 14px;
    overflow-x: auto;
    padding: 6px;
}

.tp-scienceDataTable {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--tp-navy);
    font-size: .95rem;
    line-height: 1.45;
    min-width: 560px;
    width: 100%;
}

.tp-scienceDataTable th,
.tp-scienceDataTable td {
    border-bottom: 1px solid rgba(31, 58, 95, .12);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.tp-scienceDataTable th {
    background: rgba(47, 111, 105, .11);
    color: var(--tp-navy);
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.tp-scienceDataTable tbody tr:last-child td {
    border-bottom: 0;
}

.tp-scienceDataTable td {
    white-space: pre-wrap;
}

.tp-mathExplanation {
    margin: 0;
    color: var(--tp-bluegray);
    line-height: 1.6;
}

.tp-mathProblemActions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.tp-mathStudyCard {
    padding: 24px;
}

.tp-mathStudyContent {
    display: grid;
    gap: 10px;
    color: var(--tp-bluegray);
    line-height: 1.65;
}

.tp-mathExamples {
    padding: 24px;
}

.tp-mathExamples__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.tp-mathExample {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
}

.tp-mathExample__head {
    display: grid;
    gap: 8px;
    align-content: start;
}

.tp-mathExample__difficulty {
    width: 104px;
    min-width: 104px;
    justify-content: center;
    padding: .1rem .42rem;
    font-size: .76rem;
    line-height: 1.35;
    white-space: nowrap;
}

.tp-mathExample__problem {
    color: var(--tp-navy);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.55;
}

.tp-mathResult {
    margin: 0;
}

.tp-mathContestPage {
    display: grid;
    gap: 22px;
}

.tp-mathContest {
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 22px;
}

.tp-mathContest [hidden] {
    display: none !important;
}

.tp-mathContestTimer {
    display: grid;
    gap: 18px;
}

.tp-mathContestTimer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.tp-mathContestTimer__ready,
.tp-mathContestTimer__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-mathContestTimer__pill {
    min-height: 54px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(31, 58, 95, .06);
    color: var(--tp-navy);
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(2, 6, 23, .08);
}

.tp-mathContestTimer__pill strong {
    margin-left: 8px;
    font-size: 1.55rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.tp-mathContestTimer__stickyStatus {
    position: sticky;
    top: 88px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid rgba(31, 58, 95, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .10);
    backdrop-filter: blur(12px);
}

.tp-mathContestTimer__stickyTimer,
.tp-mathContestTimer__stickyAnswered,
.tp-mathContestTimer__stickyScore {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--tp-navy);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.tp-mathContestTimer__stickyTimer strong {
    font-size: 1.45rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.tp-mathContestTimer__stickyAnswered,
.tp-mathContestTimer__stickyScore {
    color: var(--tp-bluegray);
    font-size: .95rem;
}

.tp-mathContestTimer__stickyDivider {
    width: 1px;
    height: 26px;
    background: var(--tp-border);
}

.tp-mathContestTimer__stickyStop {
    margin-left: auto;
}

.tp-mathContestTimer__note {
    min-height: 24px;
    color: var(--tp-bluegray);
    line-height: 1.55;
}

.tp-mathContestTimer__progress {
    display: grid;
    gap: 8px;
}

.tp-mathContestTimer__progressTop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tp-mathContestTimer__progressLabel {
    font-weight: 700;
    color: var(--tp-navy);
}

.tp-mathContestTimer__progressCount {
    color: var(--tp-bluegray);
    font-size: .95rem;
}

.tp-mathContestTimer__progressTrack {
    height: 10px;
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    background: rgba(243, 245, 247, .92);
    overflow: hidden;
}

.tp-mathContestTimer__progressFill {
    height: 100%;
    border-radius: 999px;
    background: rgba(31, 58, 95, .55);
    transition: width .18s ease;
}

.tp-mathContestTimer__rules {
    color: var(--tp-bluegray);
    font-size: .95rem;
    line-height: 1.45;
}

.tp-mathContestSummary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.tp-mathContestQuestions {
    display: grid;
    gap: 16px;
}

.tp-mathContestQuestion {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.tp-mathContestQuestion.is-correct {
    border-color: rgba(25, 135, 84, .28);
}

.tp-mathContestQuestion.is-wrong {
    border-color: rgba(185, 74, 72, .32);
}

.tp-mathContestQuestion.is-skipped {
    border-color: rgba(108, 117, 125, .26);
}

.tp-mathContestQuestion__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.tp-mathContestQuestion__head h2 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1.18rem;
}

.tp-mathContestQuestion__head p {
    margin: 3px 0 0;
    color: var(--tp-bluegray);
}

.tp-mathContestQuestion__difficulty {
    width: 104px;
    min-width: 104px;
    justify-content: center;
    white-space: nowrap;
}

.tp-mathContestQuestion__result {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--tp-bluegray);
}

.tp-mathContestQuestion__result strong {
    color: var(--tp-navy);
}

.tp-mathContestBottomActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media (max-width: 991.98px) {
    .tp-socialStudiesStudyLibrary__grade {
        padding: 22px 18px;
    }

    .tp-socialStudiesStudyLibrary__theme summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .tp-socialStudiesStudyLibrary__theme .tp-accitem__body {
        padding: 16px 16px 18px;
    }

    .tp-mathContest {
        padding: 16px;
    }

    .tp-mathFilters__grid,
    .tp-mathChoices {
        grid-template-columns: 1fr;
    }

    .tp-card__head--split {
        grid-template-columns: 1fr;
    }

    .tp-mathDifficultyControl,
    .tp-mathDifficultySwitch {
        width: 100%;
    }

    .tp-mathFilters__grid .btn,
    .tp-mathProblemActions .btn {
        width: 100%;
    }

    .tp-mathSelector__searchRow,
    .tp-mathSelector__actions {
        grid-template-columns: 1fr;
        display: grid;
        width: 100%;
    }

    .tp-mathSelector__clear,
    .tp-mathSelector__actions .btn {
        width: 100%;
    }

    .tp-mathSelector__category {
        flex: 1 1 auto;
        justify-content: center;
    }

    .tp-mathProblemText {
        font-size: 1.08rem;
    }

    .tp-mathContestSummary {
        grid-template-columns: 1fr;
    }

    .tp-mathContestTimer__top {
        flex-direction: column;
        align-items: stretch;
    }

    .tp-mathContestTimer__pill {
        width: 100%;
        justify-content: center;
    }

    .tp-mathContestTimer__actions,
    .tp-mathContestTimer__actions .btn,
    .tp-mathContestTimer__stickyStop {
        width: 100%;
    }

    .tp-mathContestTimer__stickyStatus {
        top: 76px;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .tp-mathContestTimer__stickyTimer strong {
        font-size: 1.26rem;
    }

    .tp-mathContestTimer__stickyAnswered,
    .tp-mathContestTimer__stickyScore {
        font-size: .88rem;
    }

    .tp-mathContestTimer__stickyDivider {
        display: none;
    }
}

@media (max-width: 479.98px) {
    .tp-mathContest {
        padding: 14px;
    }

    .tp-mathContestTimer__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .tp-mathContestTimer__stickyStatus {
        top: 70px;
    }
}

/* ===========================
   SPELLING BEE PRACTICE PAGE
   =========================== */

.tp-spellingPracticePage {
    display: grid;
    gap: 22px;
}

.tp-spellingPracticeFilters {
    padding: 22px 24px;
    border-radius: 18px;
}

.tp-spellingPracticeFilters__grid {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 260px);
    gap: 16px;
    align-items: end;
}

.tp-spellingPracticeFilters__actions {
    display: none;
}

.tp-spellingCoach {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.tp-spellingCoach__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.tp-spellingCoach__step {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
}

.tp-spellingCoach__step.is-recommended {
    border-color: rgba(47, 111, 105, .34);
    background: rgba(47, 111, 105, .07);
}

.tp-spellingCoach__number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(31, 58, 95, .08);
    color: var(--tp-navy);
    font-weight: 900;
}

.tp-spellingCoach__copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.tp-spellingCoach__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #2f6f69;
    font-size: .86rem;
    font-weight: 900;
    text-transform: uppercase;
}

    .tp-spellingCoach__label span {
        border: 1px solid rgba(47, 111, 105, .28);
        border-radius: 999px;
        padding: 3px 7px;
        background: rgba(255,255,255,.72);
        color: var(--tp-navy);
        font-size: .72rem;
        text-transform: none;
    }

.tp-spellingCoach__copy h3 {
    margin: 0;
    color: var(--tp-navy);
    font-size: 1.12rem;
    line-height: 1.2;
}

.tp-spellingCoach__copy p {
    margin: 0;
    color: var(--tp-bluegray);
    line-height: 1.45;
}

.tp-spellingCoach__copy strong {
    color: var(--tp-navy);
    overflow-wrap: anywhere;
}

.tp-spellingLessons {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.tp-spellingLessons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.tp-spellingLessons__card {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
}

.tp-spellingLessons__card.is-active {
    border-color: rgba(47, 111, 105, .42);
    background: rgba(47, 111, 105, .08);
}

.tp-spellingLessons__label {
    display: block;
    margin-bottom: 8px;
    color: #2f6f69;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.tp-spellingLessons__card h3 {
    margin: 0 0 8px;
    color: var(--tp-navy);
    font-size: 1.12rem;
    line-height: 1.2;
}

.tp-spellingLessons__card p {
    margin: 0;
    color: var(--tp-bluegray);
    line-height: 1.45;
}

.tp-spellingLessons__examples {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.tp-spellingLessons__examples span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(31, 58, 95, .1);
    border-radius: 999px;
    background: rgba(31, 58, 95, .05);
    color: var(--tp-navy);
    font-size: .86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tp-spellingLessons__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tp-spellingLessons__foot strong {
    color: var(--tp-navy);
}

.tp-spellingPracticeRecent {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 18px;
}

.tp-spellingPracticeRecent__list {
    display: grid;
    gap: 10px;
}

.tp-spellingPracticeRecent__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
    gap: 14px;
    align-items: center;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    background: rgba(255,255,255,.82);
}

.tp-spellingPracticeRecent__main,
.tp-spellingPracticeRecent__details {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.tp-spellingPracticeRecent__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.tp-spellingPracticeRecent__status--link {
    border-color: rgba(138, 90, 0, .22);
    background: rgba(227, 167, 47, .12);
    text-decoration: none;
}

.tp-spellingPracticeRecent__status--link:hover,
.tp-spellingPracticeRecent__status--link:focus {
    border-color: rgba(138, 90, 0, .42);
    background: rgba(227, 167, 47, .2);
    color: #6f4800 !important;
}

.tp-spellingPracticeRecent__item strong {
    color: var(--tp-navy);
    overflow-wrap: anywhere;
}

.tp-spellingPracticeRecent__item span {
    color: var(--tp-bluegray);
    overflow-wrap: anywhere;
}

.tp-spellingDiagnosticPage {
    display: grid;
    gap: 22px;
}

.tp-spellingDiagnosticPrompt,
.tp-spellingDiagnosticClues {
    min-width: 0;
}

.tp-spellingDiagnosticPrompt {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

    .tp-spellingDiagnosticPrompt strong {
        color: var(--tp-navy);
        font-size: 1.18rem;
        line-height: 1.25;
    }

    .tp-spellingDiagnosticPrompt span {
        color: var(--tp-bluegray);
        font-weight: 800;
        line-height: 1.35;
    }

.tp-spellingDiagnosticClues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

    .tp-spellingDiagnosticClues > div {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 13px 14px;
        border: 1px solid var(--tp-border);
        border-radius: 14px;
        background: rgba(255,255,255,.78);
    }

    .tp-spellingDiagnosticClues span {
        color: #2f6f69;
        font-size: .82rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .tp-spellingDiagnosticClues strong {
        color: var(--tp-navy);
        font-size: 1rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

.is-correctText {
    color: #1f7a45 !important;
}

.is-reviewText {
    color: #8a5a00 !important;
}

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

@media (max-width: 767.98px) {
    .tp-spellingPracticeFilters,
    .tp-spellingCoach,
    .tp-spellingLessons {
        padding: 18px;
    }

    .tp-spellingPracticeFilters__grid,
    .tp-spellingCoach__steps,
    .tp-spellingLessons__grid,
    .tp-spellingPracticeRecent__item {
        grid-template-columns: 1fr;
    }

    .tp-spellingPracticeFilters__actions,
    .tp-spellingPracticeFilters__actions .btn {
        width: 100%;
    }

    .tp-spellingPracticeRecent {
        padding: 18px;
    }

    .tp-spellingPracticeRecent__main,
    .tp-spellingPracticeRecent__details {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .tp-spellingDiagnosticClues {
        grid-template-columns: 1fr;
    }
}

.tp-scienceStudyVisual {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 14px;
    background: rgba(248, 250, 252, .86);
    margin: 14px 0;
    overflow: hidden;
}

.tp-scienceStudyIndexCard__body {
    padding: 16px;
}

.tp-scienceStudyIndexCard .tp-mathStudyLibrary__themeHead {
    margin-bottom: 0;
}

.tp-scienceStudyVisual svg {
    display: block;
    height: auto;
    width: 100%;
}

.tp-scienceStudyVisual .panel {
    fill: rgba(255, 255, 255, .72);
    stroke: rgba(31, 58, 95, .08);
}

.tp-scienceStudyVisual text {
    fill: var(--tp-navy);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    text-anchor: middle;
}

.tp-scienceStudyVisual .cellBody,
.tp-scienceStudyVisual .node,
.tp-scienceStudyVisual .block {
    fill: rgba(47, 111, 105, .16);
    stroke: rgba(47, 111, 105, .42);
    stroke-width: 2;
}

.tp-scienceStudyVisual .nucleus,
.tp-scienceStudyVisual .atomCore,
.tp-scienceStudyVisual .earth {
    fill: rgba(31, 58, 95, .22);
    stroke: rgba(31, 58, 95, .45);
    stroke-width: 2;
}

.tp-scienceStudyVisual .organelle,
.tp-scienceStudyVisual .point,
.tp-scienceStudyVisual .electron,
.tp-scienceStudyVisual .moon {
    fill: rgba(227, 167, 47, .78);
    stroke: rgba(138, 90, 0, .35);
    stroke-width: 2;
}

.tp-scienceStudyVisual .membraneLine,
.tp-scienceStudyVisual .strand,
.tp-scienceStudyVisual .dataLine {
    fill: none;
    stroke: rgba(47, 111, 105, .72);
    stroke-linecap: round;
    stroke-width: 6;
}

.tp-scienceStudyVisual .rungs line,
.tp-scienceStudyVisual .axis,
.tp-scienceStudyVisual .orbit {
    fill: none;
    stroke: rgba(31, 58, 95, .42);
    stroke-linecap: round;
    stroke-width: 3;
}

.tp-scienceStudyVisual .orbitTilt {
    transform: rotate(65deg);
    transform-box: fill-box;
    transform-origin: center;
}

.tp-scienceStudyVisual .sun {
    fill: rgba(227, 167, 47, .82);
    stroke: rgba(138, 90, 0, .36);
    stroke-width: 2;
}

.tp-scienceStudyVisual .lightArrow,
.tp-scienceStudyVisual .forceArrow,
.tp-scienceStudyVisual .foodArrow {
    fill: none;
    stroke: rgba(47, 111, 105, .78);
    stroke-linecap: round;
    stroke-width: 8;
}

.tp-scienceStudyVisual .forceArrow--left {
    stroke: rgba(200, 59, 54, .74);
}

.tp-scienceStudyImageGrid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 14px 0;
}

.tp-scienceStudyImageCard {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(248, 250, 252, .9);
    box-shadow: 0 10px 24px rgba(31, 58, 95, .08);
    display: grid;
    gap: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

.tp-scienceStudyImageCard img {
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .72);
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.tp-scienceStudyImageCard figcaption {
    color: var(--tp-navy);
    display: grid;
    gap: 4px;
    line-height: 1.4;
    padding: 12px 13px 13px;
}

.tp-scienceStudyImageCard strong {
    font-size: .96rem;
    font-weight: 900;
}

.tp-scienceStudyImageCard span {
    color: var(--tp-muted);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.tp-scienceStudyExampleGrid {
    display: grid;
    gap: 14px;
    margin: 14px 0;
}

.tp-scienceStudyExample {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(248, 250, 252, .9);
    display: grid;
    gap: 12px;
    padding: 14px;
}

.tp-scienceStudyExample h5 {
    color: var(--tp-navy);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

.tp-scienceStudyExample p {
    color: var(--tp-navy);
    line-height: 1.45;
    margin: 0;
}

.tp-scienceStudyExample__image {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .76);
    margin: 0;
    overflow: hidden;
}

.tp-scienceStudyExample__image img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.tp-scienceStudyExample__equations {
    display: grid;
    gap: 8px;
}

.tp-scienceStudyExample__equations div {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: var(--tp-navy);
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace;
    font-weight: 800;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    text-align: center;
}

.tp-scienceStudyExample__flow {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    display: grid;
    gap: 8px;
    padding: 12px;
}

.tp-scienceStudyExample__flowLink {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.tp-scienceStudyExample__flowLink span {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: var(--tp-navy);
    font-weight: 900;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px 10px;
    text-align: center;
}

.tp-scienceStudyExample__flowLink b {
    color: var(--tp-teal);
    font-size: 1.2rem;
    line-height: 1;
}

.tp-scienceStudyExample__graph {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    overflow: hidden;
}

.tp-scienceStudyExample__graph svg {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

.tp-scienceStudyExample__graph .panel {
    fill: rgba(248, 250, 252, .92);
    stroke: rgba(31, 58, 95, .08);
}

.tp-scienceStudyExample__graph .axis {
    stroke: rgba(31, 58, 95, .48);
    stroke-linecap: round;
    stroke-width: 3;
}

.tp-scienceStudyExample__graph .tick {
    stroke: rgba(31, 58, 95, .44);
    stroke-linecap: round;
    stroke-width: 2;
}

.tp-scienceStudyExample__graph .dataLine {
    fill: none;
    stroke: rgba(47, 111, 105, .72);
    stroke-linecap: round;
    stroke-width: 6;
}

.tp-scienceStudyExample__graph .bar {
    fill: rgba(240, 207, 130, .88);
    stroke: rgba(171, 130, 57, .62);
    stroke-width: 2;
}

.tp-scienceStudyExample__graph .point {
    fill: rgba(200, 59, 54, .88);
    stroke: #fff;
    stroke-width: 3;
}

.tp-scienceStudyExample__graph .pointConnector {
    stroke: rgba(31, 58, 95, .38);
    stroke-linecap: round;
    stroke-width: 2;
}

.tp-scienceStudyExample__graph text {
    fill: var(--tp-navy);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
}

.tp-scienceStudyExample__graph .pointLabel,
.tp-scienceStudyExample__graph .barLabel,
.tp-scienceStudyExample__graph .tickLabel {
    font-size: 12px;
}

.tp-scienceStudyExample__graph .rotated {
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
}

.tp-scienceStudyExample__tableWrap {
    border: 1px solid rgba(31, 58, 95, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    overflow-x: auto;
    padding: 6px;
}

.tp-scienceStudyExample__table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--tp-navy);
    font-size: .95rem;
    line-height: 1.45;
    min-width: 560px;
    width: 100%;
}

.tp-scienceStudyExample__table th,
.tp-scienceStudyExample__table td {
    border-bottom: 1px solid rgba(31, 58, 95, .12);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.tp-scienceStudyExample__table th {
    background: rgba(47, 111, 105, .12);
    color: var(--tp-navy);
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.tp-scienceStudyExample__table th:first-child {
    border-top-left-radius: 6px;
}

.tp-scienceStudyExample__table th:last-child {
    border-top-right-radius: 6px;
}

.tp-scienceStudyExample__table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .58);
}

.tp-scienceStudyExample__table tbody tr:nth-child(odd) td {
    background: rgba(248, 250, 252, .7);
}

.tp-scienceStudyExample__table tbody tr:last-child td {
    border-bottom: 0;
}

.tp-scienceStudyExample__table tbody td:first-child {
    color: var(--tp-navy);
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .tp-scienceStudyImageGrid {
        grid-template-columns: 1fr;
    }

    .tp-scienceStudyExample {
        padding: 12px;
    }

    .tp-scienceStudyExample__flowLink {
        grid-template-columns: 1fr;
    }

    .tp-scienceStudyExample__flowLink b {
        justify-self: center;
        transform: rotate(90deg);
    }

    .tp-scienceStudyExample__table {
        font-size: .9rem;
        min-width: 500px;
    }

    .tp-scienceStudyExample__table th,
    .tp-scienceStudyExample__table td {
        padding: 9px 10px;
    }
}

/* Chess Puzzles */
.tp-chessProgram {
    display: grid;
    gap: 28px;
}

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

.tp-chessProgram__titleRow > div {
    min-width: 0;
}

.tp-chessProgram__hero,
.tp-chessHubTile,
.tp-chessProgram__skillVisual {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #1f4e62, #337f7b);
    box-shadow: 0 12px 28px rgba(30, 47, 77, .13);
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
}

.tp-chessProgram__hero {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    border-radius: 22px;
    font-size: 4.8rem;
    line-height: 1;
}

.tp-chessHubTile {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    font-size: 3.45rem;
    line-height: 1;
}

.tp-chessProgram__student {
    max-width: none;
    margin: 0;
    padding: 22px 24px;
}

.tp-chessProgram__routine,
.tp-chessProgram__skills {
    margin: 0;
}

.tp-chessProgram__routine {
    padding: 28px 30px 30px;
    border-radius: 22px;
}

.tp-chessProgram__routine > .tp-card__head,
.tp-chessProgram__skills > .tp-card__head {
    margin-bottom: 22px;
}

.tp-chessProgram__routineSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: chess-step;
}

.tp-chessProgram__routineSteps li {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 120px;
    padding: 18px 15px 15px 48px;
    border: 1px solid rgba(30, 47, 77, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: var(--tp-navy);
    counter-increment: chess-step;
}

.tp-chessProgram__routineSteps li::before {
    content: counter(chess-step);
    position: absolute;
    top: 15px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: #28716d;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
}

.tp-chessProgram__routineSteps strong {
    font-size: 1rem;
}

.tp-chessProgram__routineSteps span {
    color: #56677d;
    font-size: .9rem;
    line-height: 1.4;
}

.tp-chessProgram__skills {
    display: grid;
    gap: 24px;
}

.tp-chessProgram__skill {
    min-height: 100%;
}

.tp-chessProgram__skillVisual {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border: 1px solid rgba(30, 47, 77, .10);
    border-radius: 20px;
    font-size: 2.6rem;
    line-height: 1;
}

.tp-chessProgram__tip {
    margin: 16px 0 0;
    color: #40516a;
    font-size: .93rem;
    line-height: 1.48;
}

.tp-chessStudyLibrary {
    display: grid;
    gap: 28px;
}

.tp-chessStudyLibrary .tp-shell__header,
.tp-chessStudyLibrary__format,
.tp-chessStudyLibrary__filters {
    margin: 0;
}

.tp-chessStudyLibrary__filters,
.tp-chessStudyLibrary__format {
    padding: 28px 30px;
    border-radius: 22px;
}

.tp-chessStudyLibrary__topics {
    display: grid;
    gap: 22px;
}

.tp-chessStudyLibrary__topics > .tp-card__head {
    margin: 0 2px;
}

.tp-chessStudyLibrary__topic {
    min-height: 100%;
}

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

@media (max-width: 575.98px) {
    .tp-chessProgram__titleRow {
        align-items: flex-start;
    }

    .tp-chessProgram__hero {
        width: 76px;
        height: 76px;
        border-radius: 16px;
        font-size: 3.3rem;
    }

    .tp-chessProgram__routineSteps {
        grid-template-columns: 1fr;
    }

    .tp-chessProgram__student,
    .tp-chessProgram__routine,
    .tp-chessStudyLibrary__filters,
    .tp-chessStudyLibrary__format {
        padding: 20px;
        border-radius: 18px;
    }

    .tp-chessProgram__skillVisual {
        width: 64px;
        height: 64px;
        border-radius: 17px;
        font-size: 2.25rem;
    }
}

/* Maps, Graphs, Charts & Data Literacy */
.tp-mapsDataProgram {
    display: grid;
    gap: 28px;
}

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

.tp-mapsDataProgram__titleRow > div {
    min-width: 0;
}

.tp-mapsDataProgram__hero {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(30, 47, 77, .13);
}

.tp-mapsDataProgram__routine {
    margin: 0;
}

.tp-mapsDataProgram__student {
    max-width: none;
    margin: 0;
    padding: 22px 24px;
}

.tp-mapsDataProgram__routine,
.tp-mapsDataProgram__skillDomain {
    padding: 28px 30px 30px;
    border-radius: 22px;
}

.tp-mapsDataProgram__routine > .tp-card__head,
.tp-mapsDataProgram__skillDomain > .tp-card__head {
    margin-bottom: 22px;
}

.tp-mapsDataProgram__routineSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: maps-data-step;
}

.tp-mapsDataProgram__routineSteps li {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 120px;
    padding: 18px 15px 15px 48px;
    border: 1px solid rgba(30, 47, 77, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: var(--tp-navy);
    counter-increment: maps-data-step;
}

.tp-mapsDataProgram__routineSteps li::before {
    content: counter(maps-data-step);
    position: absolute;
    top: 15px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: var(--tp-teal);
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
}

.tp-mapsDataProgram__routineSteps strong {
    font-size: 1rem;
}

.tp-mapsDataProgram__routineSteps span {
    color: #56677d;
    font-size: .9rem;
    line-height: 1.4;
}

.tp-mapsDataProgram__skills {
    display: grid;
    gap: 24px;
}

.tp-mapsDataProgram__skills > .tp-card__head {
    margin: 0 2px;
}

.tp-mapsDataProgram__skillDomain {
    margin: 0;
}

.tp-mapsDataProgram__skillDomain .tp-programGrid {
    gap: 20px;
}

.tp-mapsDataProgram__skill {
    padding: 24px;
    min-height: 100%;
}

.tp-mapsDataProgram__skillVisual {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(30, 47, 77, .10);
    border-radius: 20px;
    background: #edf7f8;
    box-shadow: 0 8px 18px rgba(30, 47, 77, .08);
}

.tp-mapsDataProgram__skillVisual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-mapsDataStudyLibrary {
    gap: 28px;
}

.tp-mapsDataStudyLibrary .tp-shell__header {
    margin-bottom: 0;
}

.tp-mapsDataStudyLibrary__filters {
    margin: 0;
    padding: 28px 30px;
}

.tp-mapsDataStudyLibrary__grade {
    display: grid;
    gap: 18px;
    margin: 0;
}

.tp-mapsDataStudyLibrary__grade > .tp-card__head {
    margin: 0 2px;
}

.tp-mapsDataStudyLibrary__domain {
    margin: 0;
    padding: 28px 30px 30px;
    border-radius: 22px;
}

.tp-mapsDataStudyLibrary__domain > .tp-card__head {
    margin-bottom: 20px;
}

.tp-mapsDataStudyLibrary__domain .tp-programGrid {
    gap: 20px;
}

.tp-mapsDataStudyLibrary__concept {
    min-height: 0;
    padding: 24px;
}

.tp-mapsDataStudyLibrary__example {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding: 18px;
}

.tp-mapsDataStudyLibrary__exampleHead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

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

@media (max-width: 575.98px) {
    .tp-mapsDataProgram__titleRow {
        align-items: flex-start;
    }

    .tp-mapsDataProgram__hero {
        width: 76px;
        height: 76px;
        border-radius: 16px;
    }

    .tp-mapsDataProgram__routineSteps {
        grid-template-columns: 1fr;
    }

    .tp-mapsDataProgram__student,
    .tp-mapsDataProgram__routine,
    .tp-mapsDataProgram__skillDomain,
    .tp-mapsDataStudyLibrary__filters,
    .tp-mapsDataStudyLibrary__domain {
        padding: 20px;
        border-radius: 18px;
    }

    .tp-mapsDataProgram__skill,
    .tp-mapsDataStudyLibrary__concept {
        padding: 20px;
    }

    .tp-mapsDataProgram__skillVisual {
        width: 64px;
        height: 64px;
        border-radius: 17px;
    }

    .tp-mapsDataStudyLibrary__example {
        padding: 16px;
    }

}