/* Trust design (AZ Best DDS): navy and gold, utility bar with phones and license, price box beside the hero, proof points. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;800&display=swap');

body.design {
    background: #F5F6F8;
    color: #1E2A36;
    font: normal 16px/1.5 'Libre Franklin', Arial, sans-serif;
    padding: 0;
}
.design #page { box-sizing: border-box; width: calc(100% - 32px); max-width: 1024px; margin: 32px auto; border: 1px solid #DDE1E6; border-radius: 8px; }
.design-home #page { width: auto; max-width: none; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; }
.design .BEF_Container { box-sizing: border-box; max-width: 100%; }
/* The admin login is the last of the footer links, in the footer's text colour. It sits at the right end of the row. */
.design-home .footer-links .footer-admin { margin-left: auto; }
.design-home .footer-admin .content { width: auto; }
.design-home #affiliate-links { display: flex; border-top: 0; list-style: none; margin: 0; padding: 0; }
.design-home #affiliate-links li:first-child { display: none; }
.design-home ul#affiliate-links li.admin-login { float: none; }
.design-home ul#affiliate-links li.admin-login a { color: inherit; cursor: pointer; }

.tr-wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* Header */
.tr-topbar { background: #22313F; color: #ffffff; font-size: 14px; }
.tr-topbar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-top: 8px; padding-bottom: 8px; }
.tr-topbar strong { color: #E3C567; }
.tr-header { background: #ffffff; border-bottom: 1px solid #DDE1E6; }
.tr-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; }
.tr-brand, .tr-brand:hover { font: 800 24px/1.2 'Libre Franklin', Arial, sans-serif; color: #22313F; text-decoration: none; }
.tr-brand-sub { font-weight: 600; color: #5A6672; }
.tr-nav { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; padding: 0; }
.tr-nav li { margin: 0; }
.tr-nav a { color: #1E2A36; font-weight: 600; font-size: 15px; text-decoration: none; }
.tr-nav a:hover { color: #22313F; text-decoration: underline; }
.tr-menu-toggle { display: none; }
.tr-nav a.tr-nav-register { padding: 9px 18px; border-radius: 6px; background: #22313F; color: #ffffff; text-decoration: none; }

/* Hero */
.tr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 40px; }
.tr-hero-text { flex: 1 1 480px; }
.tr-hero h1 { font-family: 'Libre Franklin', Arial, sans-serif; font-weight: 800; font-size: 48px; line-height: 1.1; color: #22313F; margin: 0 0 18px; text-shadow: none; }
p.tr-lead { font: normal 19px/1.55 'Libre Franklin', Arial, sans-serif; color: #3E4A56; margin: 0 0 24px; }
.tr-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.tr-btn { display: inline-block; padding: 15px 28px; border-radius: 6px; font-weight: 600; font-size: 17px; text-decoration: none; }
.tr-btn-main { background: #22313F; color: #ffffff !important; }
.tr-btn-outline { border: 2px solid #22313F; color: #22313F !important; }
.tr-btn:hover { opacity: .9; }
.tr-price { box-sizing: border-box; flex: 1 1 360px; background: #ffffff; border: 1px solid #DDE1E6; border-top: 5px solid #C9A227; border-radius: 8px; padding: 24px 28px; }
.price-box-title { font-family: 'Libre Franklin', Arial, sans-serif; font-weight: 800; font-size: 21px; text-transform: none; color: #1E2A36; margin: 0 0 12px; }
/* The cost estimator's court picker (main.css) uses the design's colour and corners. */
body.design { --ce-accent: #22313F; --ce-radius: 6px; }

/* Promo video */
.tr-video { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; padding: 28px; margin-bottom: 32px; background: #ffffff; border: 1px solid #DDE1E6; border-radius: 8px; }
.tr-video .promo-video { flex: 1 1 480px; max-width: 560px; }
.promo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #101216; }
.tr-video-text { flex: 1 1 280px; }
.tr-video-text h2 { font-family: 'Libre Franklin', Arial, sans-serif; font-weight: 800; font-size: 32px; line-height: 1.15; text-transform: none; color: #22313F; margin: 0 0 12px; }
.tr-video-text p { font: normal 18px/1.55 'Libre Franklin', Arial, sans-serif; color: #3E4A56; margin: 0; }

/* Proof points */
.tr-proof { display: flex; flex-wrap: wrap; background: #ffffff; border: 1px solid #DDE1E6; border-radius: 8px; margin-bottom: 40px; }
.tr-proof-item { box-sizing: border-box; flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-right: 1px solid #DDE1E6; font-weight: 800; font-size: 16px; }
.tr-proof-item:last-child { border-right: 0; }

/* Footer */
.tr-footer { background: #22313F; color: #ffffff; padding: 22px 0; font-size: 14px; }
.tr-footer a { color: #ffffff; }
.tr-footer .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0 0 8px; }
.tr-footer .footer-details { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0; font: inherit; color: inherit; }

/* Narrow screens: the menu folds behind a menu button. */
@media (max-width: 949px) {
    .tr-brand { flex: 1 1 0; }
    .tr-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid #22313F; border-radius: 6px; background: transparent; color: #22313F; cursor: pointer; }
    .tr-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; }
    .tr-menu-open .tr-nav { display: flex; }
    .tr-nav li { padding: 10px 0; border-top: 1px solid #DDE1E6; }
}

/* The video spans its card once its text drops below it. The four proof points go two by two, then
   one per row, with dividers only between them. */
@media (max-width: 949px) {
    .tr-video .promo-video { max-width: none; }
}
@media (max-width: 961px) {
    .tr-proof-item { flex-basis: 50%; }
    .tr-proof-item:nth-child(2n) { border-right: 0; }
    .tr-proof-item:nth-child(-n+2) { border-bottom: 1px solid #DDE1E6; }
}
@media (max-width: 521px) {
    .tr-proof-item { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #DDE1E6; }
    .tr-proof-item:last-child { border-bottom: 0; }
}

/* Phones: the headline is scaled down so it fits in a few lines. */
@media (max-width: 599px) {
    .tr-hero h1 { font-size: 38px; }
}

/* BBB seal: the links row, a hairline, then a bar with the school details on the left and the seal on the right. On phones the seal ends the footer. */
.tr-footer > .tr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.tr-footer > .tr-wrap > * { grid-column: 1 / -1; }
.tr-footer > .tr-wrap > .footer-links { margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.tr-footer > .tr-wrap > .footer-details { grid-column: 1; justify-content: flex-start; gap: 6px 28px; margin-top: 16px; }
.tr-footer > .tr-wrap > .bbb-seal { grid-column: 2; margin-top: 16px; }
@media (max-width: 760px) {
    .tr-footer > .tr-wrap { display: block; }
    .tr-footer > .tr-wrap > .footer-details { margin-top: 14px; }
    .tr-footer > .tr-wrap > .bbb-seal { display: block; width: max-content; max-width: 100%; margin-top: 18px; }
}