/* Uhoh design (Uh-Oh Defensive Driving School): bright blue and sunny yellow, Sora headlines, the blue-car mascot on a winding road, dark fee card. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

body.design-uhoh {
    --blue: #087dd1;
    --blue-deep: #0562aa;
    --blue-pale: #eaf6ff;
    --yellow: #ffc928;
    --yellow-soft: #fff3bb;
    --red: #f23b2e;
    --charcoal: #20252b;
    --ink: #16202a;
    --muted: #64748b;
    --line: #dce7ef;
    --off-white: #f8fafc;
    --white: #fff;
    --shadow: 0 24px 70px rgba(31, 65, 88, 0.13);
    /* The court picker (main.css) in the primary button's blue */
    --ce-accent: #087dd1;
    --ce-accent-text: #fff;
    --ce-line: #dce7ef;
    --ce-radius: 14px;
    min-width: 320px;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #20252b;
    font: 400 16px/1.5 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.design-uhoh:not(.design-home) { background: #f8fafc; }
.design-uhoh:not(.design-home) #page { font-size: 14px; }
.design-uhoh #page { box-sizing: border-box; width: calc(100% - 32px); max-width: 1024px; margin: 40px auto 56px; background: #fff; border: 1px solid #dce7ef; border-radius: 28px; box-shadow: 0 24px 70px rgba(31, 65, 88, 0.13); color: #333333; }
.design-uhoh.design-home #page { width: auto; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; }
.design-uhoh .BEF_Container { box-sizing: border-box; max-width: 100%; }
/* The home page's admin login ends the footer links (FooterInfo's liAdminLogin) and looks like one of them. */
.uh-footer .footer-admin .content { width: auto; }
.uh-footer ul#affiliate-links { display: block; margin: 0; padding: 0; border: 0; list-style: none; }
.uh-footer ul#affiliate-links li { display: block; padding: 0; font-weight: inherit; text-transform: none; }
.uh-footer ul#affiliate-links li:first-child { display: none; }
.uh-footer ul#affiliate-links li.admin-login { float: none; padding: 0; background: none; }
.uh-footer ul#affiliate-links li.admin-login a { color: #aeb9c3; font-size: 0.75rem; line-height: 1.5; cursor: pointer; text-decoration: none; }
.uh-footer ul#affiliate-links li.admin-login a:hover { color: var(--white); }

/* Tailwind-preflight-style reset for the design's own markup (not #page content or the cost estimator) */
:where(.uh-header, .uh-home, .uh-footer) :where(*:not(.price-box, .price-box *)), :where(.uh-header, .uh-home, .uh-footer) :where(*:not(.price-box, .price-box *))::before, :where(.uh-header, .uh-home, .uh-footer) :where(*:not(.price-box, .price-box *))::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
:where(.price-box, .price-box *) { box-sizing: content-box; }
:where(.uh-header, .uh-home, .uh-footer) p { margin: 0; color: inherit; font: inherit; }
:where(.uh-header, .uh-home, .uh-footer) :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; text-shadow: none; }
:where(.uh-home, .uh-footer) :is(h1, h2, h3) { font-family: 'Sora', sans-serif; letter-spacing: -0.045em; }
:where(.uh-header, .uh-home, .uh-footer) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.uh-header, .uh-home, .uh-footer) a, :where(.uh-header, .uh-home, .uh-footer) a:hover { color: inherit; text-decoration: inherit; }
:where(.uh-header, .uh-home, .uh-footer) :is(img, svg, video) { display: block; max-width: 100%; }
:where(.uh-header, .uh-home, .uh-footer) button { font: inherit; color: inherit; background: none; border-radius: 0; }
:where(.uh-header, .uh-home, .uh-footer) small { font-size: 80%; }

/* Shared */
.uh-home { overflow-x: clip; }
.uh-icon { flex: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.uh-eyebrow, .uh-kicker { align-items: center; color: var(--blue); display: flex; font-size: 0.72rem; font-weight: 800; gap: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; }
.uh-kicker-yellow { color: var(--yellow); }
.uh-button { align-items: center; border: 1.5px solid transparent; border-radius: 999px; display: inline-flex; font-size: 0.88rem; font-weight: 800; gap: 0.7rem; justify-content: center; padding: 1rem 1.3rem; white-space: nowrap; transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease; }
.uh-button:hover { transform: translateY(-2px); }
.uh-button-primary, .uh-button-primary:hover { background: var(--blue); box-shadow: 0 12px 28px rgba(8, 125, 209, 0.22); color: var(--white); }
.uh-button-primary:hover { background: var(--blue-deep); box-shadow: 0 16px 32px rgba(8, 125, 209, 0.28); }
.uh-button-secondary { background: var(--white); border-color: var(--line); color: var(--charcoal); }
.uh-button-secondary:hover { border-color: var(--blue); color: var(--blue); }
.uh-button-dark, .uh-button-dark:hover { background: var(--charcoal); color: var(--white); }
.uh-inline-link, .uh-inline-link:hover { align-items: center; color: var(--blue); display: flex; font-size: 0.78rem; font-weight: 800; gap: 0.5rem; margin-top: 1.3rem; }
.uh-inline-link .uh-icon:last-child { margin-left: auto; }
.uh-section { margin: 0 auto; max-width: 1200px; padding: 7rem 2rem; }
.uh-section-heading { margin: 0 auto 3.8rem; max-width: 820px; text-align: center; }
.uh-section-heading .uh-kicker { justify-content: center; }
.uh-home .uh-section-heading h2, .uh-home .uh-how-heading h2, .uh-home .uh-pricing-intro h2, .uh-home .uh-faq-intro h2, .uh-home .uh-final-copy h2, .uh-home .uh-promo-copy h2 { color: var(--charcoal); font-size: clamp(2.35rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.08; margin: 0.9rem 0 1rem; }
.uh-section-heading > p:last-child, .uh-pricing-intro > p:last-child, .uh-faq-intro > p, .uh-promo-copy > p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.7; }

/* Header */
.uh-top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.uh-header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(220, 231, 239, 0.8); position: sticky; top: 0; z-index: 50; transition: box-shadow 180ms ease; backdrop-filter: blur(16px); color: var(--charcoal); font: 400 16px/1.5 'Inter', sans-serif; }
.uh-header-scrolled { box-shadow: 0 8px 28px rgba(22, 32, 42, 0.08); }
.uh-nav-wrap { align-items: center; display: flex; height: 88px; justify-content: space-between; margin: 0 auto; max-width: 1260px; padding: 0 2rem; transition: height 180ms ease; }
.uh-header-scrolled .uh-nav-wrap { height: 72px; }
.uh-brand { align-items: center; display: flex; flex: none; height: 64px; width: 148px; }
.uh-brand img { height: 100%; object-fit: contain; width: 100%; }
.uh-nav { margin-left: auto; margin-right: 2.25rem; }
.uh-nav-list { align-items: center; display: flex; gap: 2rem; }
.uh-nav-list a, .uh-login-link { color: #45515d; display: block; font-size: 0.88rem; font-weight: 600; white-space: nowrap; transition: color 150ms ease; }
.uh-nav-list a:hover, .uh-login-link:hover { color: var(--blue); }
.uh-nav-actions { align-items: center; display: flex; flex: none; gap: 1.5rem; }
.uh-nav-cta, .uh-nav-cta:hover { align-items: center; background: var(--yellow); border: 1px solid #ebba1f; border-radius: 999px; color: var(--charcoal); display: flex; font-size: 0.86rem; font-weight: 800; gap: 0.5rem; padding: 0.78rem 1.2rem; white-space: nowrap; transition: transform 160ms ease, box-shadow 160ms ease; }
.uh-nav-cta:hover { box-shadow: 0 8px 22px rgba(255, 201, 40, 0.32); transform: translateY(-2px); }
.uh-menu-button { align-items: center; background: var(--charcoal); border: 0; border-radius: 50%; color: var(--white); cursor: pointer; display: none; flex: none; height: 44px; justify-content: center; width: 44px; }
.uh-icon-close, .uh-menu-open .uh-icon-menu { display: none; }
.uh-menu-open .uh-icon-close { display: block; }
.uh-mobile-login, .uh-mobile-register { display: none; }

/* Hero */
.uh-hero { background: radial-gradient(circle at 81% 27%, rgba(255, 201, 40, 0.22), transparent 24%), linear-gradient(180deg, #fff 0%, #f6fbff 100%); min-height: 700px; overflow: hidden; padding-top: 3.4rem; position: relative; }
.uh-hero-grid { display: grid; grid-template-columns: 0.96fr 1.04fr; margin: 0 auto; max-width: 1260px; padding: 0 2rem; position: relative; z-index: 2; }
/* His bottom padding less the Spanish line, so the hero keeps his height */
.uh-hero-copy { padding: 2.5rem 0 8.7rem; position: relative; z-index: 3; }
.uh-eyebrow span { background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px var(--yellow-soft); height: 8px; width: 8px; }
.uh-home .uh-hero h1 { color: var(--charcoal); font-size: clamp(3.2rem, 5.25vw, 5.35rem); font-weight: 800; line-height: 0.98; margin: 1.5rem 0 0.7rem; max-width: 680px; }
.uh-hero-uh-oh { color: var(--red); display: inline-block; position: relative; }
.uh-hero-uh-oh::after { background: var(--yellow); border-radius: 5px; bottom: -7px; content: ''; height: 8px; left: 3px; position: absolute; transform: rotate(-2deg); width: 94%; z-index: -1; }
.uh-home .uh-hero h2 { color: var(--blue); font-size: clamp(1.45rem, 2.4vw, 2.15rem); font-weight: 700; margin: 0 0 1.35rem; }
.uh-hero-copy > p { color: #58697a; font-size: 1.04rem; line-height: 1.75; max-width: 585px; }
.uh-hero-buttons, .uh-final-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
/* Side by side while they stay 16px clear of the mascot art, stacked where the column is narrower */
.uh-hero-buttons { max-width: calc(100% - 16px); }
/* The Spanish registration as a line under the two buttons, in his inline-link style */
.uh-inline-link.uh-hero-spanish { display: inline-flex; margin-top: 1.15rem; }
.uh-hero-spanish .uh-icon:last-child { margin-left: 0; }
.uh-trust-row { display: flex; flex-wrap: wrap; gap: 0.85rem 1.2rem; margin-top: 1.5rem; }
.uh-trust-item { align-items: center; color: #51606d; display: flex; font-size: 0.75rem; font-weight: 700; gap: 0.4rem; }
.uh-trust-item > span { align-items: center; background: var(--yellow-soft); border-radius: 50%; color: #8b6a00; display: flex; height: 21px; justify-content: center; width: 21px; }
.uh-hero-art { align-self: stretch; min-height: 575px; position: relative; }
.uh-sun-orbit { background: var(--yellow); border-radius: 50%; height: 410px; opacity: 0.94; position: absolute; right: 0.5rem; top: 0.7rem; width: 410px; }
.uh-sun-orbit::before, .uh-sun-orbit::after { border: 1px dashed rgba(32, 37, 43, 0.24); border-radius: 50%; content: ''; inset: -27px; position: absolute; }
.uh-sun-orbit::after { inset: -56px; }
.uh-mascot-frame { height: 470px; left: 0; position: absolute; top: 0.5rem; width: 100%; z-index: 2; }
.uh-mascot-frame img, .design-uhoh #page .uh-mascot-frame img { height: 100%; mix-blend-mode: multiply; object-fit: contain; width: 100%; }
.uh-warning-sign { filter: drop-shadow(0 12px 13px rgba(32, 37, 43, 0.2)); position: absolute; right: -0.5rem; top: 2.8rem; transform: rotate(7deg); width: 70px; z-index: 5; }
.uh-warning-sign rect { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 4; }
.uh-warning-sign path { fill: none; stroke: var(--charcoal); stroke-linecap: round; stroke-width: 6; }
.uh-mascot-note { align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 18px; bottom: 5.6rem; box-shadow: var(--shadow); display: flex; gap: 0.65rem; left: 2rem; padding: 0.75rem 1rem; position: absolute; transform: rotate(-3deg); z-index: 7; }
.uh-mascot-note span { color: var(--blue); font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 800; }
.uh-mascot-note small { color: var(--muted); font-size: 0.68rem; font-weight: 700; max-width: 48px; }
.uh-motion-line { background: var(--red); border-radius: 8px; height: 5px; position: absolute; width: 28px; }
.uh-motion-line-one { right: 1rem; top: 10rem; transform: rotate(-21deg); }
.uh-motion-line-two { background: var(--blue); right: -0.7rem; top: 11.3rem; transform: rotate(4deg); width: 18px; }
.uh-hero-road { bottom: -2px; height: 230px; left: 0; position: absolute; width: 100%; z-index: 1; }
.uh-hero-road svg { height: 100%; width: 100%; }
.uh-hero-road .uh-road-shadow { fill: rgba(8, 125, 209, 0.12); }
.uh-hero-road .uh-road { fill: var(--charcoal); }
.uh-hero-road .uh-road-line { fill: none; stroke: var(--white); stroke-dasharray: 28 27; stroke-width: 5; }

/* Promo video (its own band after the hero) */
.uh-section.uh-promo-section { padding-bottom: 0; }
.uh-promo-grid { align-items: center; display: grid; gap: 4rem; grid-template-columns: 0.78fr 1.22fr; }
.uh-promo-copy .uh-kicker { margin: 0; }
.uh-promo-frame { background: var(--charcoal); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.uh-promo-frame .promo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--charcoal); }

/* Benefits */
.uh-benefit-grid { align-items: stretch; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.uh-benefit { background: var(--off-white); border: 1px solid transparent; border-radius: 22px; min-height: 295px; overflow: hidden; padding: 1.9rem; position: relative; transition: border 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.uh-benefit:nth-child(2) { background: var(--blue); color: var(--white); transform: translateY(1.5rem); }
.uh-benefit:hover { border-color: var(--line); box-shadow: 0 18px 50px rgba(31, 65, 88, 0.11); transform: translateY(-5px); }
.uh-benefit:nth-child(2):hover { transform: translateY(1rem); }
.uh-benefit-top { align-items: flex-start; display: flex; justify-content: space-between; }
.uh-benefit-icon { align-items: center; background: var(--yellow); border-radius: 14px; color: var(--charcoal); display: flex; height: 52px; justify-content: center; transform: rotate(-4deg); width: 52px; }
.uh-benefit-number { color: #cbd7df; font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 800; }
.uh-benefit:nth-child(2) .uh-benefit-number { color: rgba(255, 255, 255, 0.45); }
.uh-home .uh-benefit h3 { font-size: 1.35rem; margin: 2.5rem 0 0.8rem; }
.uh-benefit p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0; }
.uh-benefit:nth-child(2) p { color: rgba(255, 255, 255, 0.78); }

/* How it works */
.uh-how-section { background: var(--blue); color: var(--white); overflow: hidden; position: relative; }
.uh-how-section::after { border: 65px solid rgba(255, 255, 255, 0.06); border-radius: 50%; content: ''; height: 380px; position: absolute; right: -140px; top: -160px; width: 380px; }
.uh-how-heading { align-items: end; display: flex; justify-content: space-between; position: relative; z-index: 2; }
.uh-home .uh-how-heading h2 { color: var(--white); margin-bottom: 0; }
.uh-steps { display: grid; gap: 4rem; grid-template-columns: repeat(3, 1fr); margin-top: 5rem; position: relative; z-index: 2; }
.uh-step-route { height: 100px; left: 6%; overflow: visible; position: absolute; top: -1rem; width: 85%; }
.uh-step-route path { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-dasharray: 8 12; stroke-width: 3; }
.uh-step { position: relative; }
.uh-step:nth-of-type(3) { margin-top: 2.2rem; }
.uh-step-dot { align-items: center; background: var(--yellow); border: 7px solid rgba(255, 255, 255, 0.17); background-clip: padding-box; border-radius: 50%; color: var(--charcoal); display: flex; height: 78px; justify-content: center; margin-bottom: 2.3rem; position: relative; width: 78px; z-index: 2; }
.uh-step-dot span { font-family: 'Sora', sans-serif; font-weight: 800; }
.uh-step > p { color: var(--yellow); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 0.5rem; text-transform: uppercase; }
.uh-home .uh-step h3 { font-size: 1.35rem; margin: 0 0 0.7rem; }
.uh-step > span { color: rgba(255, 255, 255, 0.76); font-size: 0.88rem; line-height: 1.7; }
.uh-eligibility-note { border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.66); font-size: 0.72rem; line-height: 1.6; margin: 4rem 0 0; padding-top: 1.2rem; position: relative; z-index: 2; }

/* Pricing and the cost estimator */
.uh-section.uh-pricing-section { padding-bottom: 6rem; }
.uh-pricing-intro { max-width: 710px; }
.uh-pricing-layout { align-items: stretch; display: grid; gap: 1.5rem; grid-template-columns: 1.08fr 0.92fr; margin-top: 3rem; }
.uh-price-card { background: var(--charcoal); border-radius: 28px; color: var(--white); overflow: hidden; padding: 2.25rem; position: relative; }
.uh-price-card::after { background: var(--blue); border-radius: 50%; content: ''; filter: blur(1px); height: 250px; opacity: 0.25; position: absolute; right: -90px; top: -110px; width: 250px; }
.uh-price-card > * { position: relative; z-index: 1; }
.uh-price-card-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.uh-price-card-top > span:first-child { color: #aeb9c3; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.uh-price-pill { background: var(--yellow); border-radius: 999px; color: var(--charcoal); font-size: 0.65rem; font-weight: 800; padding: 0.45rem 0.7rem; text-transform: uppercase; }
.uh-price-card .price-box { color: var(--white); font: 400 0.82rem/1.5 'Inter', sans-serif; }
.uh-price-card .price-box-title { display: none; }
.uh-price-card .price-box table { border-collapse: collapse; border-spacing: 0; }
.uh-price-card .price-box table[width] > tbody > tr > td { padding: 0; }
.uh-price-card .price-box table[width] td.tblCostEstimatorSelectCourt { padding: 0 0 0.7rem; border: 0; }
.uh-price-card .tblCostEstimatorSelectCourt span { color: var(--yellow) !important; font-size: 0.72rem; font-weight: 800 !important; letter-spacing: 0.16em; text-transform: uppercase; }
.uh-price-card .ceCourtPicker { margin: 0 0 1.4rem; }
.uh-price-card .RadComboBox, .uh-price-card .RadComboBox .rcbInput { font-family: 'Inter', sans-serif; }
/* Each fee on one line between his two rules, the amounts on the right, then the total in large type */
.uh-price-card .tblCostEstimator, .uh-price-card .tblCostEstimator > tbody { display: block; width: 100%; }
.uh-price-card .tblCostEstimator > tbody { display: grid; grid-template-columns: minmax(max-content, 1fr) auto; }
.uh-price-card .tblCostEstimator tr { display: contents; }
.uh-price-card .tblCostEstimator th, .uh-price-card .tblCostEstimator td { display: flex; flex-direction: column; justify-content: center; padding: 0.42rem 0; border: 0; color: #aeb9c3; font: 400 0.82rem/1.5 'Inter', sans-serif; text-align: left; }
.uh-price-card .tblCostEstimator td { align-items: flex-end; padding-left: 20px; color: var(--white); font-weight: 700; text-align: right; }
.uh-price-card .tblCostEstimator:first-of-type > tbody { padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.uh-price-card .tblCostEstimator .amtDue { margin-top: 0.9rem; padding: 1rem 0 0.2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.uh-price-card .tblCostEstimator th.amtDue { color: #aeb9c3; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.uh-price-card .tblCostEstimator td.amtDue { padding-left: 20px; color: var(--white); font: 800 2.2rem/1.1 'Sora', sans-serif; letter-spacing: -0.05em; }
.uh-price-card .tblCostEstimator td.amtDue .cePending span { font-family: 'Inter', sans-serif; letter-spacing: 0; }
/* When a changing court fee's totals don't fit beside their label, they take the row under it
   (ce-stacked, main.css) with no rule between them and the label. */
.uh-price-card .ce-stacked .tblCostEstimator td.amtDue:has(br) { padding-top: 0.3rem; border-top: 0; font-size: 1.4rem; }
.uh-price-card .tblCostEstimator td.amtDue:has(br) { font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.02em; }
.uh-price-card > .uh-button { margin-top: 1.6rem; width: 100%; }
.uh-price-card > small { color: #788692; display: block; font-size: 0.65rem; margin-top: 0.75rem; text-align: center; }
.uh-course-info { background: var(--off-white); border: 1px solid var(--line); border-radius: 28px; padding: 2.25rem; }
.uh-course-info-heading { align-items: center; display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.uh-course-info-heading > span { align-items: center; background: var(--blue); border-radius: 14px; color: var(--white); display: flex; flex: none; height: 52px; justify-content: center; width: 52px; }
.uh-course-info-heading .uh-kicker { font-size: 0.64rem; margin-bottom: 0.3rem; }
.uh-home .uh-course-info h3 { font-size: 1.45rem; margin: 0; }
.uh-course-fact { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: 75px 1fr 1fr; padding: 1.1rem 0; }
.uh-course-fact > span { color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.uh-course-fact strong { font-size: 0.9rem; }
.uh-course-fact small { color: var(--muted); font-size: 0.7rem; }
.uh-course-note { align-items: flex-start; background: var(--yellow-soft); border-radius: 14px; color: #695513; display: flex; gap: 0.7rem; margin-top: 0.5rem; padding: 0.9rem; }
.uh-course-note p { font-size: 0.7rem; line-height: 1.5; margin: 0; }
.uh-verification-note { color: #94a3b8; font-size: 0.66rem; margin: 1rem 0 0; }

/* FAQs */
.uh-faq-section { background: var(--off-white); }
.uh-faq-layout { display: grid; gap: 5rem; grid-template-columns: 0.78fr 1.22fr; }
.uh-faq-intro { align-self: start; position: sticky; top: 120px; }
.uh-faq-links { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.uh-faq-links a, .uh-faq-links a:hover { align-items: center; color: var(--blue); display: flex; font-size: 0.8rem; font-weight: 800; gap: 0.5rem; }
.uh-accordion details { border-bottom: 1px solid #ccdbe5; }
.uh-accordion details:first-child { border-top: 1px solid #ccdbe5; }
.uh-accordion summary { align-items: center; cursor: pointer; display: flex; font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; justify-content: space-between; list-style: none; padding: 1.5rem 0; }
.uh-accordion summary::-webkit-details-marker { display: none; }
.uh-accordion summary i { border: 2px solid var(--blue); border-radius: 50%; flex: none; height: 28px; position: relative; width: 28px; }
.uh-accordion summary i::before, .uh-accordion summary i::after { background: var(--blue); content: ''; height: 2px; left: 7px; position: absolute; top: 11px; transition: transform 180ms ease; width: 10px; }
.uh-accordion summary i::after { transform: rotate(90deg); }
.uh-accordion details[open]:not(.faq-closing) summary i::after { transform: rotate(0); }
.uh-accordion details > p { color: var(--muted); font-size: 0.86rem; line-height: 1.7; margin: -0.5rem 3.5rem 1.6rem 0; }
.uh-accordion details > p a, .uh-accordion details > p a:hover { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Final call to action */
.uh-final-wrap { background: var(--off-white); padding: 1.5rem 2rem 6rem; }
.uh-final-cta { background: var(--charcoal); border-radius: 32px; color: var(--white); display: grid; grid-template-columns: 1.1fr 0.9fr; margin: 0 auto; max-width: 1200px; min-height: 430px; overflow: hidden; padding: 4.5rem; position: relative; }
.uh-final-copy { position: relative; z-index: 4; }
.uh-home .uh-final-copy h2 { color: var(--white); max-width: 650px; }
.uh-final-copy h2 span { color: var(--yellow); white-space: nowrap; }
.uh-final-copy > p { color: #aeb9c3; line-height: 1.7; max-width: 510px; }
.uh-final-mascot { bottom: 1.5rem; height: 340px; position: absolute; right: 1rem; width: 510px; z-index: 3; }
.uh-final-mascot img, .design-uhoh #page .uh-final-mascot img { height: 100%; object-fit: contain; mix-blend-mode: screen; opacity: 0.9; width: 100%; }
.uh-final-road { bottom: 0; height: 100%; position: absolute; right: 0; width: 54%; z-index: 1; }
.uh-final-road svg { height: 100%; width: 100%; }
.uh-final-road path:first-child { fill: var(--blue); opacity: 0.28; }
.uh-final-road path:last-child { fill: none; stroke: var(--white); stroke-dasharray: 18 20; stroke-width: 4; }

/* Footer */
/* His brand block and three link columns. The columns sit on this grid, so the home page's admin
   login can follow Resources directly, and his tagline shares the bottom row with the school details. */
.uh-footer { background: #15191e; color: var(--white); padding: 4rem max(2rem, calc((100vw - 1200px) / 2)); font: 400 16px/1.5 'Inter', sans-serif; }
.uh-footer-main { display: grid; grid-template-areas: "brand touch res stu" "brand touch admin stu" "bottom bottom bottom bottom"; grid-template-columns: 2fr repeat(3, 1fr); column-gap: 3rem; }
.uh-footer-brand { align-items: center; display: flex; gap: 1rem; grid-area: brand; }
.uh-footer-brand img { border-radius: 12px; flex: none; height: 78px; object-fit: contain; width: 118px; }
.uh-footer-brand strong, .uh-footer-brand span { display: block; }
.uh-footer-brand strong { font-family: 'Sora', sans-serif; font-size: 0.92rem; max-width: 190px; }
.uh-footer-brand span { color: #8895a0; font-size: 0.7rem; margin-top: 0.4rem; }
.uh-footer-column { display: flex; flex-direction: column; gap: 0.7rem; }
.uh-footer-touch { grid-area: touch; }
.uh-footer-resources { grid-area: res; }
.uh-footer-students { grid-area: stu; }
.uh-footer-column > p { color: var(--yellow); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 0.35rem; text-transform: uppercase; }
.uh-footer-column a, .uh-footer-column a:hover { color: #aeb9c3; font-size: 0.75rem; line-height: 1.5; }
.uh-footer-column a:hover { color: var(--white); }
.uh-footer-phone { font-size: 0; }
.uh-footer-phone span { color: #aeb9c3; display: block; font-size: 0.75rem; line-height: 1.5; }
.uh-footer-phone span + span { margin-top: 0.7rem; }
.uh-footer-phone strong { font-weight: inherit; }
/* FooterInfo's list holds only the home page's admin login, set as the last Resources link */
.uh-footer .footer-links { grid-area: admin; margin: 0; padding: 0; list-style: none; }
.uh-footer .footer-links li { margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.5; }
.uh-footer .footer-details { grid-area: bottom; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; margin: 3.5rem 0 0; padding: 1.4rem 330px 0 0; border-top: 1px solid #30363c; color: #73808b; font: 400 0.66rem/1.5 'Inter', sans-serif; }
.uh-footer .footer-details a, .uh-footer .footer-details a:hover { color: inherit; text-decoration: none; }
.uh-footer .footer-details a:hover { color: var(--white); }
.uh-footer-tagline { grid-area: bottom; justify-self: end; align-self: start; margin-top: 3.5rem; padding-top: 1.4rem; color: #73808b; font-size: 0.66rem; line-height: 1.5; }

/* Header: tighter links below 1180px, the menu button once the links no longer fit */
@media (max-width: 1180px) {
    .uh-nav { margin-right: 1.5rem; }
    .uh-nav-list { gap: 1.5rem; }
}
@media (max-width: 1119px) {
    .uh-menu-button { display: flex; margin-left: 1.5rem; }
    .uh-nav-actions { margin-left: auto; }
    .uh-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0.75rem 1.25rem 1.25rem; background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
    .uh-menu-open .uh-nav { display: block; }
    .uh-nav-list { display: block; }
    .uh-nav-list a, .uh-mobile-login { border-bottom: 1px solid var(--line); color: var(--charcoal); font-size: 1rem; font-weight: 700; padding: 0.9rem 0.25rem; white-space: normal; }
}

/* Responsive page */
@media (max-width: 1180px) {
    .uh-hero-buttons { gap: 0.6rem; }
    .uh-hero-buttons .uh-button { padding-inline: 1rem; }
}
@media (max-width: 1100px) {
    .uh-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
    .uh-mascot-frame { left: 0; }
    .uh-sun-orbit { right: -5rem; }
    .uh-final-mascot { opacity: 0.55; right: 0; width: 460px; }
}
@media (max-width: 900px) {
    .uh-nav-actions { display: none; }
    .uh-menu-button { margin-left: auto; }
    .uh-mobile-login { display: block; }
    .uh-mobile-register, .uh-mobile-register:hover { background: var(--yellow); border-radius: 999px; color: var(--charcoal); display: block; font-size: 1rem; font-weight: 700; margin-top: 1rem; padding: 0.9rem 0.25rem; text-align: center; }
    .uh-nav-wrap, .uh-header-scrolled .uh-nav-wrap { height: 72px; padding: 0 1.25rem; }
    .uh-brand { height: 58px; width: 130px; }
    /* His heights plus the Spanish line, so the mascot keeps its place above the road */
    .uh-hero { min-height: 990px; padding-top: 1rem; }
    .uh-hero-grid { grid-template-columns: 1fr; padding: 0 1.5rem; }
    .uh-hero-copy { padding: 3rem 0 0; }
    .uh-hero-copy > p { max-width: 690px; }
    .uh-hero-buttons { max-width: none; }
    .uh-hero-art { min-height: 420px; }
    /* One column: the "100% online" note moves from over the mascot to just under it, on the road */
    .uh-mascot-note { bottom: auto; left: 50%; top: calc(1rem + 360px + 0.5rem); transform: translateX(-50%) rotate(-3deg); }
    .uh-sun-orbit { height: 330px; right: 5%; top: 1rem; width: 330px; }
    .uh-mascot-frame { height: 360px; left: 50%; top: 1rem; transform: translateX(-50%); width: 540px; }
    .uh-warning-sign { right: 10%; }
    .uh-promo-grid { gap: 2.5rem; grid-template-columns: 1fr; }
    .uh-benefit-grid { grid-template-columns: 1fr; }
    .uh-benefit, .uh-benefit:nth-child(2) { min-height: 0; transform: none; }
    .uh-benefit:hover, .uh-benefit:nth-child(2):hover { transform: translateY(-3px); }
    .uh-steps { gap: 1.5rem; }
    .uh-step-route { display: none; }
    .uh-pricing-layout { grid-template-columns: 1fr; }
    .uh-faq-layout { gap: 3rem; grid-template-columns: 1fr; }
    .uh-faq-intro { position: static; }
    .uh-final-cta { grid-template-columns: 1fr; padding: 3.5rem; }
    .uh-final-copy { max-width: 72%; }
    .uh-final-break { display: none; }
    .uh-footer-main { grid-template-areas: "brand brand brand" "touch res stu" "touch admin stu" "bottom bottom bottom"; grid-template-columns: repeat(3, 1fr); }
    .uh-footer-brand { margin-bottom: 3rem; }
}
@media (max-width: 640px) {
    .uh-hero { min-height: 910px; }
    .uh-hero-copy { padding-top: 2rem; }
    .uh-home .uh-hero h1 { font-size: clamp(3rem, 14vw, 4.1rem); }
    .uh-home .uh-hero h2 { font-size: 1.35rem; }
    .uh-hero-copy > p { font-size: 0.92rem; }
    .uh-hero-buttons, .uh-hero-buttons .uh-button { width: 100%; }
    .uh-trust-row { gap: 0.55rem; }
    .uh-trust-item { width: 100%; }
    .uh-mascot-frame { height: 275px; top: 1rem; width: 410px; }
    .uh-sun-orbit { height: 250px; right: 5%; width: 250px; }
    /* Room under the mascot for the note */
    .uh-hero-art { min-height: 378px; }
    .uh-mascot-note { top: calc(1rem + 275px + 0.5rem); }
    .uh-warning-sign { right: 2%; top: 1rem; width: 55px; }
    .uh-hero-road { height: 120px; }
    .uh-section { padding: 5rem 1.25rem; }
    .uh-section-heading { margin-bottom: 2.5rem; text-align: left; }
    .uh-section-heading .uh-kicker { justify-content: flex-start; }
    .uh-home .uh-section-heading h2, .uh-home .uh-how-heading h2, .uh-home .uh-pricing-intro h2, .uh-home .uh-faq-intro h2, .uh-home .uh-final-copy h2, .uh-home .uh-promo-copy h2 { font-size: 2.25rem; }
    .uh-promo-frame { border-radius: 22px; }
    .uh-benefit { padding: 1.5rem; }
    .uh-home .uh-benefit h3 { margin-top: 1.8rem; }
    .uh-how-heading { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
    .uh-steps { grid-template-columns: 1fr; margin-top: 3rem; }
    .uh-step, .uh-step:nth-of-type(3) { margin: 0; padding-left: 5.2rem; min-height: 105px; }
    .uh-step-dot { height: 62px; left: 0; margin: 0; position: absolute; top: 0; width: 62px; }
    .uh-price-card, .uh-course-info { border-radius: 22px; padding: 1.5rem; }
    /* The fee labels wrap where a label and its amount don't fit side by side. */
    .uh-price-card .tblCostEstimator > tbody { grid-template-columns: minmax(0, 1fr) auto; }
    .uh-course-fact { gap: 0.3rem; grid-template-columns: 65px 1fr; }
    .uh-course-fact small { grid-column: 2; }
    .uh-faq-layout { gap: 2rem; }
    .uh-accordion summary { font-size: 0.9rem; gap: 1rem; }
    .uh-final-wrap { padding: 1rem 1rem 4rem; }
    .uh-final-cta { min-height: 610px; padding: 2.2rem 1.5rem; }
    .uh-final-copy { max-width: none; }
    .uh-final-buttons, .uh-final-buttons .uh-button { width: 100%; }
    .uh-final-mascot { bottom: 1rem; height: 235px; left: 50%; right: auto; transform: translateX(-50%); width: 350px; }
    .uh-final-road { height: 56%; width: 100%; }
    .uh-footer { padding: 3.5rem 1.5rem 2rem; }
    .uh-footer-main { grid-template-areas: "brand brand" "touch res" "touch admin" "stu stu" "bottom bottom" "tag tag"; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
    .uh-footer-brand { margin-bottom: 2rem; }
    .uh-footer-students { margin-top: 2rem; }
    .uh-footer .footer-details { flex-direction: column; gap: 0.6rem; padding-right: 0; }
    .uh-footer-tagline { grid-area: tag; justify-self: start; margin-top: 0.6rem; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .uh-header, .uh-nav-wrap, .uh-nav-cta, .uh-button, .uh-benefit, .uh-accordion summary i::before, .uh-accordion summary i::after { transition: none; }
}