/* Traffic101 design (Traffic 101): dotted cream and navy desert palette, Fraunces headlines, illustrated red-rock art, receipt-style fee card. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,700;9..144,800;9..144,900&display=swap');

body.design-traffic101 {
    --cream: #f7f1e4;
    --sand: #eadcc5;
    --navy: #0a203d;
    --red: #d92532;
    --orange: #ff8618;
    --yellow: #ffc928;
    --burnt: #b94b1c;
    --white: #fffcf5;
    --content: 1360px;
    --section: clamp(54px, 5vw, 76px);
    /* The court picker (main.css) in the outline button's navy */
    --ce-accent: #0a203d;
    --ce-accent-text: #fffcf5;
    --ce-line: #0a203d;
    --ce-border-width: 2px;
    --ce-radius: 3px;
    min-width: 320px;
    margin: 0;
    padding: 0;
    color: #0a203d;
    background: #f7f1e4 radial-gradient(rgba(10, 32, 61, .05) .65px, transparent .65px);
    background-size: 7px 7px;
    font: 400 16px/1.5 'DM Sans', sans-serif;
    font-synthesis: none;
}
.design-traffic101:not(.design-home) #page { font-size: 14px; }
.design-traffic101 #page { box-sizing: border-box; width: calc(100% - 32px); max-width: 1024px; margin: 40px auto 56px; background: #fffcf5; border: 1px solid rgba(10, 32, 61, .25); border-top: 4px solid #d92532; box-shadow: 12px 12px 0 #eadcc5; color: #333333; }
.design-traffic101.design-home #page { width: auto; max-width: none; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; color: inherit; }
.design-traffic101 .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. */
.t1-footer .footer-admin .content { width: auto; }
.t1-footer ul#affiliate-links { display: block; margin: 0; padding: 0; border: 0; list-style: none; }
.t1-footer ul#affiliate-links li { display: block; padding: 0; font-weight: inherit; text-transform: none; }
.t1-footer ul#affiliate-links li:first-child { display: none; }
.t1-footer ul#affiliate-links li.admin-login { float: none; padding: 0; background: none; }
.t1-footer ul#affiliate-links li.admin-login a { color: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.t1-footer ul#affiliate-links li.admin-login a:hover { color: var(--yellow); }

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

/* Shared */
.t1-home { overflow: clip; }
.t1-btn, .t1-btn:hover { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--yellow); border-radius: 3px; background: var(--yellow); color: var(--navy); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .035em; transition: transform .2s ease, box-shadow .2s ease; }
.t1-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--navy); }
.t1-btn svg, .t1-text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.t1-btn-small, .t1-btn-small:hover { min-height: 42px; padding: 0 17px; font-size: 11px; }
.t1-btn-outline, .t1-btn-outline:hover { background: transparent; border-color: var(--navy); }
.t1-btn-light, .t1-btn-light:hover { background: transparent; color: var(--white); border-color: var(--white); }
.t1-btn-light:hover { box-shadow: 4px 4px 0 var(--yellow); }
.t1-btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.t1-text-link, .t1-text-link:hover { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800; text-transform: uppercase; font-size: 12px; border-bottom: 2px solid currentColor; padding-bottom: 5px; }
.t1-eyebrow { margin: 0 0 16px; color: var(--red); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.t1-eyebrow.t1-eyebrow-light { color: var(--yellow); }
:where(.t1-home) :is(h1, h2) { margin: 0; font-family: 'Fraunces', serif; text-transform: uppercase; font-weight: 900; letter-spacing: -.035em; }
:where(.t1-home) h1 { max-width: 600px; font-size: clamp(46px, 3.5vw, 50px); line-height: .98; }
.t1-home h1 span, .t1-home h1 em { display: block; white-space: nowrap; }
.t1-home h1 em, .t1-home h2 em { color: var(--red); font-style: normal; }
.t1-home h1 em { margin-top: 7px; }
:where(.t1-home) h2 { max-width: 760px; font-size: clamp(46px, 5vw, 72px); line-height: 1.02; }
.t1-section-pad { padding: var(--section) max(24px, calc((100vw - var(--content)) / 2)); scroll-margin-top: 76px; }
.t1-lead { max-width: 620px; margin: 25px 0; font-size: 17px; line-height: 1.65; }

/* Header */
.t1-header { height: 76px; padding: 0 max(24px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 26px; position: sticky; top: 0; z-index: 50; background: rgba(247, 241, 228, .97); border-bottom: 1px solid rgba(10, 32, 61, .18); backdrop-filter: blur(12px); color: var(--navy); font: 400 16px/1.5 'DM Sans', sans-serif; }
.t1-brand { display: block; width: 220px; }
.t1-brand img { width: 100%; height: auto; }
.t1-nav-list { display: flex; justify-content: center; gap: clamp(14px, 2vw, 28px); font-size: 12px; font-weight: 700; }
.t1-nav-list a { display: block; padding: 12px 0; position: relative; white-space: nowrap; }
.t1-nav-list a::after { content: ''; height: 2px; background: var(--red); position: absolute; left: 0; right: 100%; bottom: 5px; transition: right .2s ease; }
.t1-nav-list a:hover::after { right: 0; }
.t1-nav-list .t1-nav-register, .t1-nav-list .t1-nav-login { display: none; }
.t1-login-link { display: block; padding: 12px 0; position: relative; white-space: nowrap; }
.t1-login-link::after { content: ''; height: 2px; background: var(--red); position: absolute; left: 0; right: 100%; bottom: 5px; transition: right .2s ease; }
.t1-login-link:hover::after { right: 0; }
.t1-nav-actions { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 700; }
.t1-menu-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.t1-menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: var(--navy); }

/* Hero */
.t1-hero { width: min(var(--content), calc(100% - 32px)); margin: auto; padding: 36px 0 28px; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 22px; }
.t1-hero-copy { min-width: 0; position: relative; z-index: 2; }
/* The two register buttons side by side, padding trimmed so both fit. The artwork is scaled
   into the last 20px or so of the column, so the row stops short of it. */
.t1-hero .t1-btn-row { max-width: calc(100% - 24px); gap: 10px; }
.t1-hero .t1-btn-row .t1-btn { padding-inline: 14px; }
.t1-hero-deck { max-width: 520px; margin: 24px 0 26px; font-size: 17px; line-height: 1.55; }
.t1-benefit-strip { display: flex; flex-wrap: wrap; gap: 15px 24px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(10, 32, 61, .24); }
.t1-benefit-strip li { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.t1-benefit-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid var(--red); color: var(--red); border-radius: 50%; font-weight: 900; }
.t1-hero-art { min-width: 0; transform: scale(1.055); transform-origin: right center; }
.t1-concept-crop { background-repeat: no-repeat; background-position: center; background-size: cover; }
.t1-concept-hero { width: 100%; aspect-ratio: 494 / 383; background-image: url(img/traffic-hero-art.jpg); }
.t1-concept-course { width: 100%; aspect-ratio: 500 / 248; background-image: url(img/traffic-course-art.jpg); }

/* Experience */
.t1-experience { display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: clamp(34px, 5vw, 72px); background: var(--white); border-top: 1px solid rgba(10, 32, 61, .14); }
.t1-experience.t1-section-pad { padding-block: 48px; }
.t1-experience h2 { font-size: clamp(40px, 3.5vw, 48px); }
.t1-experience-art { min-width: 0; }
.t1-feature-lines { margin: 28px 0; border-top: 1px solid var(--navy); }
.t1-feature-lines > div { padding: 17px 0; border-bottom: 1px solid rgba(10, 32, 61, .26); display: grid; grid-template-columns: 58px 1fr; align-items: center; }
.t1-feature-lines strong { color: var(--red); font-family: 'Fraunces', serif; font-size: 30px; }
.t1-feature-lines p, .t1-feature-lines span { display: block; margin: 0; }
.t1-feature-lines b { text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.t1-feature-lines span { color: rgba(10, 32, 61, .7); font-size: 13px; margin-top: 4px; }

/* Promo video (in place of the laptop course illustration) */
.t1-experience-art .promo-video { border: 2px solid var(--navy); background: var(--navy); box-shadow: 12px 12px 0 var(--sand); }
.promo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0a203d; }

/* How it works */
.t1-journey { background: var(--navy); color: var(--white); position: relative; }
.t1-journey-inner { max-width: var(--content); min-height: 445px; margin: auto; position: relative; }
.t1-journey .t1-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.t1-journey .t1-section-heading h2 { max-width: 920px; }
.t1-journey .t1-section-heading h2 em { color: var(--yellow); }
.t1-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 2; padding-bottom: 150px; }
.t1-stop { min-width: 0; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px; border: 1px solid rgba(255, 252, 245, .25); background: rgba(10, 32, 61, .88); }
.t1-stop-number { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--white); font-family: 'Fraunces', serif; font-size: 20px; font-weight: 900; box-shadow: 0 0 0 5px var(--navy), 0 0 0 7px var(--yellow); }
.t1-stop-label { margin: 0 0 4px !important; color: var(--yellow); font-size: 10px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.t1-stop h3 { margin: 0 0 7px; font-family: 'Fraunces', serif; font-size: 24px; line-height: 1.1; text-transform: uppercase; }
.t1-stop p { margin: 0; color: rgba(255, 252, 245, .75); font-size: 13px; line-height: 1.55; }
.t1-journey-landscape { width: 100%; height: 285px; position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }

/* Course details */
.t1-details-band { display: block; background: var(--cream); }
.t1-course-stats { background: var(--navy); color: var(--white); display: block; border-top: 1px solid rgba(255, 255, 255, .13); }
.t1-course-stats h2 em { color: var(--yellow); }
.t1-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 252, 245, .3); }
.t1-stats-grid > div { padding: 20px 14px; border-right: 1px solid rgba(255, 252, 245, .25); min-height: 145px; }
.t1-stats-grid strong { display: block; color: var(--yellow); font-family: 'Fraunces', serif; font-size: clamp(36px, 3vw, 44px); line-height: 1; white-space: nowrap; }
.t1-stats-grid h3 { text-transform: uppercase; margin: 10px 0 5px; font-size: 13px; letter-spacing: .1em; }
.t1-stats-grid p { margin: 0; color: rgba(255, 252, 245, .7); font-size: 13px; }
.t1-desert-ribbon { display: block; overflow: hidden; }
.t1-desert-ribbon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.t1-stats-intro { display: grid; grid-template-columns: .72fr 1.28fr; column-gap: 42px; align-items: end; }
.t1-stats-intro .t1-eyebrow { grid-column: 1; }
.t1-stats-intro h2 { grid-column: 1; }
.t1-stats-ribbon { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 230px; background: var(--navy); }

/* Pricing and the cost estimator */
.t1-pricing { display: grid; grid-template-columns: .78fr 1.22fr; gap: 30px; align-items: center; background: var(--cream); }
.t1-pricing-copy .t1-lead { margin: 25px 0 28px; }
.t1-pricing .t1-lead { font-size: 14px; line-height: 1.55; }
.t1-pricing .t1-btn { width: 100%; padding-inline: 14px; }
.t1-receipt { position: relative; padding: 40px clamp(25px, 4vw, 52px) 35px; background: var(--white); border: 1px solid rgba(10, 32, 61, .25); box-shadow: 12px 12px 0 var(--sand); scroll-margin-top: 100px; }
.t1-receipt::before, .t1-receipt::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; background: radial-gradient(circle at 5px 9px, transparent 5px, var(--white) 5.5px); background-size: 20px 9px; }
.t1-receipt::before { top: -9px; transform: rotate(180deg); }
.t1-receipt::after { bottom: -9px; }
.t1-receipt-top { display: flex; justify-content: space-between; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.t1-receipt-title { font-family: 'Fraunces', serif; font-size: 27px; font-weight: 900; text-align: center; border-block: 2px solid var(--navy); padding: 21px 0; }
.t1-receipt .price-box-title { display: none; }
.t1-receipt .price-box { color: var(--navy); font: 400 14px/1.5 'DM Sans', sans-serif; }
.t1-receipt .price-box table[width] { border-collapse: collapse; border-spacing: 0; }
.t1-receipt .price-box table[width] > tbody > tr > td { padding: 0; }
/* Each fee on its own receipt line, then the court picker, then the court's fee and the total in the yellow bar */
.t1-receipt .tblCostEstimator, .t1-receipt .tblCostEstimator > tbody { display: block; width: 100%; }
.t1-receipt .tblCostEstimator > tbody { display: grid; grid-template-columns: minmax(max-content, 1fr) auto; }
.t1-receipt .tblCostEstimator tr { display: contents; }
.t1-receipt .tblCostEstimator th, .t1-receipt .tblCostEstimator td { display: flex; flex-direction: column; justify-content: center; padding: 13px 0; border: 0; border-bottom: 2px dotted rgba(10, 32, 61, .3); color: var(--navy); font-size: 14px; line-height: 1.5; }
.t1-receipt .tblCostEstimator th { font-weight: 400; text-align: left; }
.t1-receipt .tblCostEstimator td { align-items: flex-end; text-align: right; padding-left: 20px; font-weight: 800; }
.t1-receipt .price-box table[width] td.tblCostEstimatorSelectCourt { padding: 20px 0 10px; border: 0; }
.t1-receipt .tblCostEstimatorSelectCourt span { color: var(--red) !important; font-size: 11px; font-weight: 800 !important; letter-spacing: .13em; text-transform: uppercase; }
.t1-receipt .ceCourtPicker { margin: 0 0 4px; }
.t1-receipt .RadComboBox, .t1-receipt .RadComboBox .rcbInput { font-family: 'DM Sans', sans-serif; }
.t1-receipt .tblCostEstimator .amtDue { margin-top: 10px; border: 0; background: var(--yellow); font-size: 18px; font-weight: 800; }
.t1-receipt .tblCostEstimator th.amtDue { margin-left: -10px; padding: 18px 0 18px 10px; }
.t1-receipt .tblCostEstimator td.amtDue { margin-right: -10px; padding: 18px 10px 18px 20px; }
/* When a changing court fee's totals don't fit beside their label, they take the row under it
   (ce-stacked, main.css), so the label and the totals each span the band. */
.t1-receipt .ce-stacked .tblCostEstimator tr:has(+ tr > td br) > th.amtDue { margin-right: -10px; padding-right: 10px; }
.t1-receipt .ce-stacked .tblCostEstimator td.amtDue:has(br) { margin-left: -10px; padding-top: 6px; padding-left: 10px; }
.t1-receipt .t1-btn { margin-top: 26px; }
.t1-receipt-note { max-width: 72%; margin: 14px 0 0; font-size: 11px; line-height: 1.5; }
/* Beside the note, below the register button */
.t1-receipt-sun { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); right: 30px; bottom: 20px; }

/* Before you go */
.t1-info-band { display: block; background: var(--white); border-top: 1px solid rgba(10, 32, 61, .16); }
.t1-before { background: var(--white); display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 30px; padding-bottom: 0 !important; overflow: hidden; }
.t1-before h2 { font-size: clamp(44px, 4.5vw, 66px); }
.t1-before h2 em { color: var(--red); }
.t1-before-list { border-top: 2px solid var(--navy); }
.t1-before-list p { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 15px 0; margin: 0; border-bottom: 1px solid rgba(10, 32, 61, .35); line-height: 1.45; font-size: 14px; }
.t1-before-list p span { font-family: 'Fraunces', serif; color: var(--red); font-weight: 900; }
.t1-before-list .t1-text-link, .t1-before-list .t1-text-link:hover { margin-top: 26px; color: var(--navy); }
.t1-requirements-ribbon { grid-column: 1 / -1; width: 100%; margin-top: 28px; border-top: 1px solid rgba(10, 32, 61, .16); }
.t1-requirements-ribbon { height: 270px; position: relative; isolation: isolate; background: linear-gradient(90deg, #f2c74c 0%, #f7e4bd 42%, #fffcf5 100%); }
.t1-requirements-ribbon img { width: auto; max-width: 48%; object-fit: contain; object-position: left center; position: relative; z-index: 1; }
.t1-requirements-ribbon::after { content: 'ARIZONA  \2022  DOCUMENTS  \2022  DATES  \2022  ELIGIBILITY'; width: 52%; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); color: var(--navy); font-family: 'Fraunces', serif; font-size: clamp(28px, 3.3vw, 52px); font-weight: 900; line-height: .98; letter-spacing: .02em; text-align: right; opacity: .16; }

/* FAQs */
.t1-faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 28px; border-top: 1px solid rgba(10, 32, 61, .16); padding-bottom: 0 !important; overflow: hidden; }
.t1-details-band h2 { font-size: clamp(40px, 3.7vw, 58px); }
.t1-info-band h2 { font-size: clamp(38px, 3.4vw, 52px); }
.t1-accordion { border-top: 2px solid var(--navy); }
.t1-faq-item { border-bottom: 1px solid rgba(10, 32, 61, .35); }
.t1-faq-item summary { width: 100%; min-height: 50px; display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 10px; color: var(--navy); text-align: left; cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; }
.t1-faq-item summary::-webkit-details-marker { display: none; }
.t1-faq-item summary span { color: var(--red); font-family: 'Fraunces', serif; }
.t1-faq-item summary i { width: 16px; height: 16px; position: relative; }
.t1-faq-item summary i::before, .t1-faq-item summary i::after { content: ''; position: absolute; background: var(--navy); top: 7px; width: 16px; height: 2px; transition: transform .25s ease; }
.t1-faq-item summary i::after { transform: rotate(90deg); }
.t1-faq-item[open]:not(.faq-closing) summary i::after { transform: rotate(0); }
.t1-faq-answer p { margin: 0 36px 14px 50px; line-height: 1.5; color: rgba(10, 32, 61, .75); font-size: 12px; }

/* Final call to action */
.t1-final-cta { min-height: 500px; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--navy); }
.t1-concept-sunset { position: absolute; inset: 0 0 0 auto; width: 72%; height: 100%; background-image: url(img/traffic-sunset-art.jpg); background-position: center; background-size: cover; }
.t1-final-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 32, 61, .96) 0%, rgba(10, 32, 61, .76) 37%, rgba(10, 32, 61, .08) 76%); }
.t1-final-copy { width: min(var(--content), calc(100% - 48px)); margin: auto; position: relative; z-index: 2; color: var(--white); }
.t1-final-copy h2 { max-width: 700px; font-size: clamp(54px, 6vw, 86px); }
.t1-final-copy p:not(.t1-eyebrow) { font-size: 18px; margin: 25px 0; }

/* Footer */
/* Zach's four columns (brand, Explore, Resources, phones). The link columns sit on this grid, so
   the home page's admin login can follow Resources directly. */
.t1-footer { background: var(--navy); color: var(--white); padding: 62px max(24px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-areas: "brand explore res contact" "brand explore admin contact" "details details details details"; grid-template-columns: 1.35fr .8fr 1fr .8fr; grid-template-rows: auto 1fr auto; gap: 0 48px; border-top: 1px solid rgba(255, 255, 255, .2); font: 400 16px/1.5 'DM Sans', sans-serif; }
.t1-footer-brand { grid-area: brand; align-self: start; padding: 14px; background: var(--cream); max-width: 300px; }
.t1-footer-brand img { width: 100%; }
.t1-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
.t1-footer-explore { grid-area: explore; }
.t1-footer-resources { grid-area: res; }
.t1-footer-col > p, .t1-footer-contact > p:first-child { color: var(--yellow); text-transform: uppercase; font-weight: 800; letter-spacing: .15em; font-size: 10px; margin: 0 0 7px; }
/* FooterInfo's list holds only the home page's admin login, set as the last Resources link */
.t1-footer .footer-links { grid-area: admin; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.t1-footer .footer-links li { margin: 10px 0 0; padding: 0; list-style: none; }
.t1-footer-col a { color: inherit; font-size: 12px; text-decoration: none; }
.t1-footer-col a:hover { color: var(--yellow); }
.t1-footer-contact { grid-area: contact; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.t1-phone { font-size: 0; }
.t1-phone span { display: block; margin-bottom: 10px; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 800; line-height: 1.5; }
.t1-phone strong { font-weight: inherit; }
.t1-footer .footer-details { grid-area: details; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 48px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .5); font: 400 11px/1.5 'DM Sans', sans-serif; }
.t1-footer .footer-details a, .t1-footer .footer-details a:hover { color: inherit; text-decoration: none; }
.t1-footer .footer-details a:hover { color: var(--yellow); }

/* Header: the menu button once the six links and the button no longer fit */
@media (max-width: 1080px) {
    .t1-header { grid-template-columns: 210px 1fr auto; }
    .t1-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); padding: 22px; border-bottom: 1px solid var(--navy); }
    .t1-menu-open .t1-nav { display: block; }
    .t1-nav-list { flex-direction: column; align-items: center; gap: 0; }
    .t1-menu-toggle { display: block; justify-self: end; grid-column: 2; grid-row: 1; }
    .t1-nav-actions { grid-column: 3; grid-row: 1; }
    .t1-hero { grid-template-columns: 1fr 1fr; gap: 28px; }
    .t1-before { grid-template-columns: .8fr 1.2fr; }
    .t1-before-list { grid-column: auto; }
    .t1-footer { grid-template-areas: "brand contact" "explore res" "explore admin" "details details"; grid-template-columns: 1fr 1fr; }
    .t1-footer-col { margin-top: 48px; }
}

/* Responsive page */
@media (max-width: 800px) {
    .t1-header { height: 74px; grid-template-columns: 1fr auto; padding-inline: 20px; }
    .t1-brand { width: 185px; }
    .t1-nav-actions { display: none; }
    .t1-nav-list .t1-nav-login { display: block; }
    .t1-nav-list .t1-nav-register { display: block; margin-top: 12px; }
    .t1-nav-list .t1-nav-register a { display: inline-flex; padding: 0 17px; }
    .t1-nav-list .t1-nav-register a::after { display: none; }
    .t1-section-pad { scroll-margin-top: 74px; }
    .t1-hero { width: min(100% - 40px, 640px); min-height: auto; max-height: none; padding: 60px 0 50px; grid-template-columns: 1fr; }
    :where(.t1-home) h1 { font-size: clamp(44px, 7vw, 56px); }
    .t1-hero-art { margin-top: 8px; }
    .t1-experience { grid-template-columns: 1fr; }
    .t1-experience h2 { font-size: clamp(38px, 7vw, 46px); }
    .t1-journey .t1-section-heading { display: block; }
    .t1-journey-inner { min-height: auto; }
    .t1-roadmap { grid-template-columns: 1fr; gap: 5px; }
    .t1-stop { grid-template-columns: 56px 1fr; }
    .t1-journey-landscape { margin-top: 28px; min-height: 220px; }
    .t1-details-band, .t1-info-band { grid-template-columns: 1fr; }
    .t1-course-stats { grid-template-columns: 1fr; gap: 35px; }
    .t1-stats-intro { display: block; }
    .t1-stats-ribbon { height: 220px; margin-top: 24px; }
    .t1-requirements-ribbon { height: 210px; }
    .t1-requirements-ribbon::after { width: 54%; right: 4%; font-size: clamp(22px, 5vw, 36px); }
    .t1-pricing { grid-template-columns: 1fr; }
    .t1-before { grid-template-columns: 1fr; }
    .t1-before-list { grid-column: auto; }
    .t1-faq-section { grid-template-columns: 1fr; }
    .t1-concept-sunset { width: 100%; opacity: .78; }
    .t1-final-cta::after { background: linear-gradient(90deg, rgba(10, 32, 61, .96), rgba(10, 32, 61, .68)); }
}
@media (max-width: 540px) {
    body.design-traffic101 { --section: 70px; }
    .t1-section-pad { padding-inline: 20px; }
    :where(.t1-home) h1 { font-size: 30px; }
    :where(.t1-home) h2 { font-size: clamp(34px, 11vw, 56px); }
    .t1-hero-deck, .t1-lead { font-size: 15px; }
    .t1-btn-row .t1-btn { width: 100%; }
    .t1-benefit-strip { flex-direction: column; }
    .t1-feature-lines > div { grid-template-columns: 50px 1fr; }
    .t1-stats-grid { grid-template-columns: 1fr 1fr; }
    .t1-stats-grid > div { min-height: 135px; border-left: 0; padding-inline: 12px; }
    .t1-stats-ribbon, .t1-requirements-ribbon { height: 170px; }
    .t1-requirements-ribbon::after { width: 48%; font-size: 19px; }
    .t1-receipt { box-shadow: 8px 8px 0 var(--sand); }
    /* The fee labels wrap where a label and its amount don't fit side by side. */
    .t1-receipt .tblCostEstimator > tbody { grid-template-columns: minmax(0, 1fr) auto; }
    .t1-before-list p { grid-template-columns: 34px 1fr; font-size: 13px; }
    .t1-faq-item summary { grid-template-columns: 32px 1fr 20px; }
    .t1-faq-answer p { margin-left: 42px; margin-right: 4px; }
    .t1-final-cta { min-height: 500px; }
    .t1-footer { grid-template-areas: "brand" "explore" "res" "admin" "contact" "details"; grid-template-columns: 1fr; }
    .t1-footer-col { margin-top: 36px; }
    .t1-footer-contact { margin-top: 36px; }
    .t1-footer-brand { max-width: 270px; }
}

/* The smallest phones: a changing court fee's before and after lines are a little smaller, so each stays on one line. */
@media (max-width: 358px) {
    .t1-receipt .tblCostEstimator td:not(.amtDue):has(br) { font-size: 13px; }
}
@media (max-width: 339px) {
    .t1-receipt .tblCostEstimator td:not(.amtDue):has(br) { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .t1-btn, .t1-nav-list a::after, .t1-login-link::after, .t1-faq-item summary i::before, .t1-faq-item summary i::after { transition: none; }
    .t1-btn:hover { transform: none; }
}