/* Ticketremoval design (AZ Ticket Removal DDS): navy and asphalt with an orange-to-gold accent, condensed uppercase headlines, an illustrative citation hero and a receipt-style price card. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700&family=Manrope:wght@400;500;600;700&display=swap');

body.design-ticketremoval {
    --navy: #08121f;
    --black: #0b1018;
    --slate: #172334;
    --steel: #263a50;
    --orange: #ff7628;
    --gold: #ffbe35;
    --white: #f6f5f2;
    --silver: #9daab8;
    --red: #d92f36;
    min-width: 320px;
    margin: 0;
    padding: 0;
    background: var(--black);
    color: var(--white);
    font: 400 16px/1.5 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.design-ticketremoval:not(.design-home) { padding-top: 84px; }
.design-ticketremoval:not(.design-home) #page { font-size: 14px; }
.design-ticketremoval #page { box-sizing: border-box; width: calc(100% - 32px); max-width: 1024px; margin: 40px auto 56px; border-top: 4px solid var(--orange); color: #333333; }
.design-ticketremoval.design-home #page { width: auto; max-width: none; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; }
.design-ticketremoval .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. */
.tr-footer .footer-admin .content { width: auto; }
.tr-footer ul#affiliate-links { display: block; margin: 0; padding: 0; border: 0; list-style: none; }
.tr-footer ul#affiliate-links li { display: block; padding: 0; font-weight: inherit; text-transform: none; }
.tr-footer ul#affiliate-links li:first-child { display: none; }
.tr-footer ul#affiliate-links li.admin-login { float: none; padding: 0; background: none; }
.tr-footer ul#affiliate-links li.admin-login a { color: #b1bbc4; font-size: 11px; line-height: 1.5; text-decoration: none; cursor: pointer; }
.tr-footer ul#affiliate-links li.admin-login a:hover { color: var(--gold); }

/* Reset as Tailwind's preflight did in his build, so main.css doesn't leak into the design's own markup */
.tr-header, .tr-header *, .tr-header *::before, .tr-header *::after,
.tr-home, .tr-home *, .tr-home *::before, .tr-home *::after,
.tr-footer, .tr-footer *, .tr-footer *::before, .tr-footer *::after { box-sizing: border-box; }
.tr-price-estimator .RadComboBox, .tr-price-estimator .RadComboBox * { box-sizing: content-box; }
.tr-header :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li),
.tr-home :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li):where(:not(.price-box *)),
.tr-footer :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li) { color: inherit; font: inherit; letter-spacing: inherit; list-style: none; margin: 0; padding: 0; text-shadow: none; text-transform: none; }
.tr-header :where(button), .tr-home :where(button), .tr-footer :where(button) { background: transparent; border: 0; border-radius: 0; color: inherit; font: inherit; }
.tr-header :where(img, svg, video), .tr-home :where(img, svg, video):where(:not(.price-box *)), .tr-footer :where(img, svg) { display: block; max-width: 100%; }
.tr-header :where(a), .tr-home :where(a), .tr-footer :where(a) { color: inherit; font: inherit; text-decoration: none; }
.tr-header :where(a):hover, .tr-home :where(a):hover, .tr-footer :where(a):hover { color: inherit; }

/* His base styles */
.tr-home { min-width: 320px; overflow: hidden; }
.tr-section-pad { padding: 120px max(5vw, 28px); }
.tr-home h1, .tr-home h2, .tr-home h3 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.tr-home h1 span, .tr-home h2 span { color: var(--orange); }

/* Header */
.tr-header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 84px; padding: 0 max(3.5vw, 22px); display: grid; grid-template-columns: 230px 1fr 260px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(8,18,31,.9); backdrop-filter: blur(18px); color: var(--white); font: 400 16px/1.5 'Manrope', sans-serif; }
.tr-brand { align-self: stretch; display: flex; align-items: center; width: 190px; }
.tr-brand img { width: 178px; height: 72px; object-fit: contain; }
.tr-nav-list { display: flex; justify-content: center; gap: clamp(20px, 2.5vw, 42px); }
.tr-nav-list a, .tr-nav-list a:hover { position: relative; display: block; color: #dce2e8; font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.tr-nav-list a::after { content: ''; position: absolute; height: 2px; left: 0; right: 100%; bottom: -13px; background: var(--orange); transition: right .25s ease; }
.tr-nav-list a:hover::after { right: 0; }
.tr-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.tr-nav-actions .tr-btn { white-space: nowrap; }
.tr-login-link, .tr-login-link:hover { color: var(--white); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tr-login-link:hover { color: var(--gold); }
.tr-mobile-actions, .tr-menu-button { display: none; }

/* Buttons */
.tr-btn, .tr-btn:hover { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: var(--white); border: 1px solid transparent; border-radius: 3px; font-size: 12px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.tr-btn:hover { transform: translateY(-2px); }
.tr-btn svg, .tr-text-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tr-btn-primary, .tr-btn-primary:hover { color: #11151b; background: linear-gradient(100deg, var(--gold), var(--orange)); box-shadow: 0 12px 30px rgba(255,118,40,.2); }
.tr-btn-primary:hover { background: linear-gradient(100deg, #ffd158, #ff8b49); }
.tr-btn-outline { border-color: rgba(255,255,255,.34); background: rgba(10,17,27,.35); }
.tr-btn-outline:hover { border-color: var(--orange); }
.tr-btn-outline svg { width: 19px; height: 19px; }
.tr-btn-compact, .tr-btn-compact:hover { min-height: 43px; padding: 0 16px; }
.tr-btn-compact svg { width: 15px; }

/* Hero */
.tr-hero { min-height: 780px; padding: 150px 4vw 55px; position: relative; display: grid; grid-template-columns: minmax(400px, .95fr) minmax(440px, 1.05fr) 190px; align-items: center; background: radial-gradient(circle at 61% 43%, rgba(255,118,40,.16), transparent 27%), linear-gradient(115deg, #07101b 0%, #0b1725 55%, #07101a 100%); isolation: isolate; }
.tr-hero-grid, .tr-final-grid { position: absolute; inset: 0; z-index: -1; opacity: .15; background-image: linear-gradient(rgba(157,170,184,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(157,170,184,.25) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(to right, #000, transparent 80%); mask-image: linear-gradient(to right, #000, transparent 80%); }
.tr-hero::before { content: ''; position: absolute; z-index: -1; width: 580px; height: 580px; right: 11%; top: 11%; border: 1px solid rgba(255,190,53,.15); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.012), 0 0 0 180px rgba(255,255,255,.009); }
.tr-hero-copy { position: relative; z-index: 4; max-width: 570px; }
.tr-eyebrow { margin: 0 0 18px; color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.tr-home h1 { margin: 0; font-size: clamp(76px, 7.25vw, 124px); line-height: .79; letter-spacing: -.045em; font-weight: 900; text-shadow: 0 16px 40px rgba(0,0,0,.35); }
.tr-home h1 span { background: linear-gradient(90deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-hero-lede { max-width: 510px; margin: 28px 0; color: #c4cdd5; font-size: 16px; line-height: 1.7; }
/* The two register buttons side by side; their padding is trimmed so both fit. Beside the
   citation the row may run 20px past the column, into the space before the tilted card. */
.tr-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-hero-actions .tr-btn { padding: 0 14px; }
@media (min-width: 901px) {
    .tr-hero-actions { margin-right: -20px; }
}
.tr-benefit-strip { margin-top: 35px; padding-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.13); }
.tr-benefit-strip div { padding-right: 18px; border-right: 1px solid rgba(255,255,255,.1); }
.tr-benefit-strip div:last-child { border: 0; padding-left: 18px; }
.tr-benefit-strip div:nth-child(2) { padding-left: 18px; }
.tr-benefit-strip strong { display: block; color: var(--gold); font-family: 'Barlow Condensed', sans-serif; font-size: 24px; line-height: 1; text-transform: uppercase; }
.tr-benefit-strip span { display: block; margin-top: 7px; color: var(--silver); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.tr-availability-note { display: block; margin-top: 9px; color: #627180; font-size: 9px; }
.tr-hero-rail { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; display: flex; justify-content: space-between; padding: 0 4vw; align-items: center; border-top: 1px solid rgba(255,255,255,.09); color: #657587; font-size: 8px; letter-spacing: .2em; }

/* Illustrative citation */
.tr-citation-scene { position: relative; z-index: 2; height: 570px; display: grid; place-items: center; perspective: 1100px; }
.tr-citation-glow { position: absolute; width: 70%; height: 72%; background: rgba(255,108,30,.3); filter: blur(70px); border-radius: 50%; animation: tr-glow 4s ease-in-out infinite alternate; }
.tr-citation-card { position: relative; width: min(390px, 78%); aspect-ratio: .69; overflow: hidden; padding: 30px 30px 23px; color: #111924; background: linear-gradient(150deg, #fffdf6 0%, #e5e3d9 68%, #c9c8bf 100%); border: 1px solid #fff; box-shadow: -25px 35px 70px rgba(0,0,0,.6), 7px 0 0 var(--orange); transform: rotateY(-8deg) rotateZ(8deg); animation: tr-ticket-float 5s ease-in-out infinite; }
.tr-citation-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 46%, transparent 54%); transform: translateX(-110%); animation: tr-sheen 5s ease-in-out infinite; }
.tr-ticket-notches { position: absolute; left: -8px; top: 0; bottom: 0; width: 15px; background: radial-gradient(circle at left, transparent 5px, #f8f6ee 6px) 0 0/15px 24px; }
.tr-citation-top { display: flex; justify-content: space-between; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.tr-status-dot { display: flex; align-items: center; gap: 6px; color: #4a5661; }
.tr-status-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 7px var(--orange); }
.tr-citation-state { margin-top: 25px; padding-bottom: 11px; display: flex; justify-content: space-between; align-items: end; border-bottom: 2px solid #172334; }
.tr-citation-state span { font-family: 'Barlow Condensed', sans-serif; font-size: 25px; font-weight: 800; letter-spacing: .2em; }
.tr-citation-state small { font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.tr-citation-title { margin: 23px 0 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 51px; line-height: .85; font-weight: 900; letter-spacing: -.02em; }
.tr-citation-data { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid #a8a79f; border-bottom: 1px solid #a8a79f; }
.tr-citation-data div { display: flex; flex-direction: column; gap: 4px; }
.tr-citation-data small { font-size: 6px; letter-spacing: .1em; }
.tr-citation-data strong { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; }
.tr-citation-lines { display: grid; gap: 7px; margin: 18px 0; }
.tr-citation-lines i { height: 1px; background: #a8aaa8; }
.tr-citation-lines i:nth-child(2) { width: 77%; }
.tr-citation-lines i:nth-child(3) { width: 88%; }
.tr-citation-lines i:nth-child(4) { width: 52%; }
.tr-citation-footer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 17px; height: 92px; }
.tr-barcode { background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 5px, #111 5px 6px, transparent 6px 9px, #111 9px 13px, transparent 13px 16px); }
.tr-citation-mark { position: relative; background: var(--orange); overflow: hidden; }
.tr-citation-mark::before, .tr-citation-mark::after, .tr-citation-mark span { content: ''; position: absolute; background: var(--gold); transform-origin: left center; width: 130%; height: 12px; left: 46%; top: 50%; }
.tr-citation-mark::before { transform: rotate(0); }
.tr-citation-mark::after { transform: rotate(60deg); }
.tr-citation-mark span { transform: rotate(120deg); }
.tr-citation-disclaimer { margin-top: 12px; text-align: center; font-size: 6px; letter-spacing: .17em; }
.tr-citation-chip { position: absolute; z-index: 3; right: -1%; bottom: 13%; min-width: 195px; padding: 13px 15px 13px 36px; background: rgba(13,25,38,.92); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 16px 30px rgba(0,0,0,.38); }
.tr-citation-chip .tr-pulse { position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,118,40,.12); }
.tr-citation-chip small, .tr-citation-chip strong { display: block; }
.tr-citation-chip small { color: var(--silver); font-size: 7px; letter-spacing: .15em; }
.tr-citation-chip strong { margin-top: 4px; color: var(--gold); font-size: 10px; }

/* Hero process */
.tr-hero-process { align-self: stretch; margin: 5px -4vw 0 12px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.11); }
.tr-process-row { min-height: 135px; padding: 28px 25px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.11); }
.tr-process-row:first-child { border-top: 1px solid rgba(255,255,255,.11); }
.tr-process-row > span { color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-size: 23px; font-weight: 800; }
.tr-process-row div { display: flex; flex-direction: column; gap: 5px; }
.tr-process-row small { color: #637386; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.tr-process-row strong { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; line-height: 1.1; text-transform: uppercase; }

/* Clear direction */
.tr-section-index { color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.tr-forward { position: relative; background: var(--white); color: var(--navy); }
.tr-forward-copy { margin-top: 45px; display: grid; grid-template-columns: 1.45fr .7fr; gap: 10%; align-items: end; }
.tr-home .tr-section-pad h2, .tr-final-cta h2 { margin: 0; font-size: clamp(58px, 7vw, 108px); font-weight: 800; letter-spacing: -.035em; line-height: .86; }
.tr-forward h2 span { -webkit-text-stroke: 1px #51606e; color: transparent; }
.tr-forward-copy p { color: #526171; font-size: 16px; line-height: 1.75; }
.tr-text-link, .tr-text-link:hover { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: var(--navy); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.tr-road-line { position: relative; height: 74px; margin-top: 72px; border-top: 1px solid #cbd0d3; overflow: hidden; }
.tr-road-line::before, .tr-road-line::after { content: ''; position: absolute; width: 60%; height: 1px; background: #263a50; top: 36px; }
.tr-road-line::before { left: 0; transform: rotate(3deg); }
.tr-road-line::after { right: 0; transform: rotate(-3deg); }
.tr-road-line span { position: absolute; z-index: 2; width: 18px; height: 18px; left: 50%; top: 27px; margin-left: -9px; border: 2px solid var(--orange); transform: rotate(45deg); background: var(--white); }

/* How it works */
.tr-workflow { position: relative; display: grid; grid-template-columns: .8fr 1.25fr; gap: 8%; background: #0a1420; }
.tr-workflow::before { content: ''; position: absolute; inset: 0; opacity: .25; background: linear-gradient(120deg, transparent 0 49.9%, rgba(255,255,255,.05) 50%, transparent 50.1%); }
.tr-workflow-heading { position: sticky; top: 135px; align-self: start; }
.tr-home .tr-workflow-heading h2 { font-size: clamp(62px, 6vw, 96px); }
.tr-workflow-heading > p:last-child { max-width: 420px; margin-top: 30px; color: var(--silver); line-height: 1.8; }
.tr-timeline { position: relative; }
.tr-timeline::before { content: ''; position: absolute; left: 109px; top: 70px; bottom: 80px; width: 1px; background: linear-gradient(var(--orange), rgba(255,118,40,.15)); }
.tr-timeline-step { min-height: 260px; display: grid; grid-template-columns: 80px 58px 1fr; gap: 0 28px; align-items: start; padding: 44px 0; border-top: 1px solid rgba(255,255,255,.12); }
.tr-timeline-step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.tr-timeline-number { color: transparent; -webkit-text-stroke: 1px #405064; font-family: 'Barlow Condensed', sans-serif; font-size: 62px; font-weight: 700; line-height: 1; }
.tr-timeline-node { position: relative; z-index: 2; width: 42px; height: 42px; margin-top: 8px; display: grid; place-items: center; background: var(--slate); border: 1px solid var(--orange); transform: rotate(45deg); }
.tr-timeline-node svg { width: 19px; fill: none; stroke: var(--gold); stroke-width: 1.7; transform: rotate(-45deg); }
.tr-timeline-content { max-width: 420px; }
.tr-timeline-content small { color: var(--orange); font-size: 8px; letter-spacing: .18em; }
.tr-home .tr-timeline-content h3 { margin: 8px 0 10px; font-size: 35px; line-height: 1; }
.tr-timeline-content p { color: var(--silver); line-height: 1.65; font-size: 14px; }
.tr-timeline-content a, .tr-timeline-content a:hover { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--gold); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.tr-timeline-content a svg { width: 14px; fill: none; stroke: currentColor; }
.tr-legal-note { grid-column: 2; color: #566576; font-size: 10px; }

/* Online classroom, with the promo video in the course screen */
.tr-classroom { display: grid; grid-template-columns: 1.08fr .9fr; gap: 8%; align-items: center; background: #e9e9e5; color: var(--navy); }
.tr-course-visual { padding: 10px; background: #0c1622; box-shadow: 0 35px 65px rgba(8,18,31,.28); transform: perspective(1000px) rotateY(4deg); }
.tr-screen-top { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid #253547; }
.tr-screen-top i { width: 6px; height: 6px; border-radius: 50%; background: #3b4a5a; }
.tr-screen-top i:first-child { background: var(--orange); }
.tr-screen-top span { margin-left: auto; color: #718093; font-size: 6px; letter-spacing: .15em; }
.promo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(#111d2b, #07101a); }
.tr-video-frame { position: relative; min-height: 350px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 62%, rgba(255,118,40,.3), transparent 26%), linear-gradient(#111d2b, #07101a); }
.tr-video-frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 48%, rgba(255,255,255,.04) 48.2%, transparent 48.4%); }
.tr-video-road { position: absolute; width: 150px; height: 420px; bottom: -230px; background: #1c2937; transform: perspective(300px) rotateX(55deg); border-left: 2px solid var(--orange); border-right: 2px solid var(--orange); }
.tr-video-road i { position: absolute; width: 3px; height: 50px; left: 50%; background: var(--gold); }
.tr-video-road i:last-child { top: 90px; }
.tr-video-play { position: relative; z-index: 2; width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid var(--orange); color: var(--white); background: rgba(8,18,31,.65); transform: rotate(45deg); }
.tr-video-play svg { width: 25px; fill: none; stroke: currentColor; transform: rotate(-45deg); }
.tr-video-label { position: absolute; left: 20px; bottom: 17px; color: #8190a1; font-size: 7px; letter-spacing: .13em; }
.tr-module-row { min-height: 76px; display: grid; grid-template-columns: 100px 1fr 120px; gap: 18px; align-items: center; padding: 0 18px; color: var(--white); }
.tr-module-row div:not(.tr-module-progress) { display: flex; flex-direction: column; gap: 5px; }
.tr-module-row small { color: #617184; font-size: 6px; letter-spacing: .14em; }
.tr-module-row strong { font-size: 10px; }
.tr-module-progress { height: 3px; background: #27384a; }
.tr-module-progress span { display: block; width: 28%; height: 100%; background: var(--orange); }
.tr-home .tr-classroom-copy h2 { font-size: clamp(65px, 6vw, 96px); }
.tr-classroom-copy > p:not(.tr-eyebrow) { margin: 25px 0; color: #566373; line-height: 1.7; }
.tr-check-list { padding: 0; margin: 30px 0; list-style: none; }
.tr-home .tr-check-list { margin: 30px 0; }
.tr-check-list li { padding: 15px 0; display: grid; grid-template-columns: 30px 1fr; gap: 15px; align-items: center; border-top: 1px solid #c9cccb; color: #5b6876; font-size: 12px; }
.tr-check-list li:last-child { border-bottom: 1px solid #c9cccb; }
.tr-check-list svg { width: 21px; fill: none; stroke: var(--orange); stroke-width: 1.7; }
.tr-check-list strong { color: var(--navy); }
.tr-btn-light, .tr-btn-light:hover { color: var(--navy); border-color: #78828c; background: transparent; }
.tr-btn-light:hover { border-color: var(--orange); }

/* Pricing, with the cost estimator on the receipt */
.tr-pricing { display: grid; grid-template-columns: .9fr 1fr; gap: 9%; align-items: center; background: #0d1723; }
.tr-home .tr-pricing-copy h2 { margin: 36px 0 28px; font-size: clamp(68px, 6vw, 100px); }
.tr-pricing-copy > p { max-width: 480px; color: var(--silver); line-height: 1.75; }
.tr-pricing-copy .tr-pricing-caveat { margin: 22px 0 32px; padding-left: 17px; border-left: 2px solid var(--orange); color: #748394; font-size: 11px; }
.tr-receipt-wrap { position: relative; display: grid; place-items: center; }
.tr-receipt-wrap::before { content: ''; position: absolute; inset: 10% 4%; border: 1px solid rgba(255,118,40,.2); transform: rotate(-4deg); }
.tr-receipt { --tr-bleed: 38px; position: relative; width: min(100%, 520px); padding: var(--tr-bleed); background: #172334; border: 1px solid #31445a; box-shadow: 25px 30px 60px rgba(0,0,0,.33); scroll-margin-top: 110px; }
.tr-receipt::before, .tr-receipt::after { content: ''; position: absolute; left: 0; right: 0; height: 7px; background: linear-gradient(135deg, #0d1723 5px, transparent 0) 0 0/10px 10px repeat-x; }
.tr-receipt::before { top: -1px; }
.tr-receipt::after { bottom: -1px; transform: rotate(180deg); }
.tr-receipt-head { display: flex; justify-content: space-between; align-items: start; }
.tr-receipt-head div { display: flex; flex-direction: column; gap: 6px; }
.tr-receipt-head small, .tr-receipt-head span { color: #728194; font-size: 7px; letter-spacing: .16em; }
.tr-receipt-head strong { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; }
.tr-receipt-head span { padding: 6px 8px; border: 1px solid #526276; }
.tr-receipt-code { margin: 28px 0; padding: 10px; text-align: center; border-top: 1px dashed #506073; border-bottom: 1px dashed #506073; color: var(--gold); font-size: 8px; letter-spacing: .2em; }
a.tr-receipt-register { display: flex; width: 100%; margin-top: 24px; }
.tr-receipt > p { margin-top: 14px; color: #758498; font-size: 10px; line-height: 1.6; text-align: center; }
.tr-receipt-barcode { height: 28px; margin-top: 20px; background: repeating-linear-gradient(90deg, #8793a0 0 1px, transparent 1px 4px, #8793a0 4px 7px, transparent 7px 10px); opacity: .6; }

.tr-price-estimator { color: var(--white); font: 400 12px/1.5 'Manrope', sans-serif; }
.tr-price-estimator .price-box-title { display: none; }
.tr-price-estimator table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.tr-price-estimator table[width] > tbody > tr > td { padding: 0; }
/* Each fee on one line, then the court picker, then the court's fee and the total */
.tr-price-estimator .tblCostEstimator, .tr-price-estimator .tblCostEstimator > tbody { display: block; width: 100%; }
.tr-price-estimator .tblCostEstimator > tbody { display: grid; grid-template-columns: minmax(max-content, 1fr) auto; }
.tr-price-estimator .tblCostEstimator tr { display: contents; }
.tr-price-estimator .tblCostEstimator th, .tr-price-estimator .tblCostEstimator td { display: flex; flex-direction: column; justify-content: center; padding: 13px 0; border: 0; border-bottom: 1px dotted #48596d; font-size: 12px; text-align: left; }
.tr-price-estimator .tblCostEstimator th { color: #aab5c0; font-weight: 400; }
.tr-price-estimator .tblCostEstimator td { align-items: flex-end; text-align: right; padding-left: 15px; color: var(--white); font-weight: 700; }
.tr-price-estimator table[width] td.tblCostEstimatorSelectCourt { padding: 20px 0 10px; border: 0; }
.tr-price-estimator .tblCostEstimatorSelectCourt span { color: var(--gold) !important; font-size: 15px; }
.tr-price-estimator .ceCourtPicker { margin: 0 0 4px; }
.tr-price-estimator .ceCourtPicker .RadComboBox table { background: #0d1723; }
.tr-price-estimator .ceCourtPicker .RadComboBox .rcbInput { color: var(--white); font-family: 'Manrope', sans-serif; font-size: 13px; }
.tr-price-estimator .ceCourtPicker .RadComboBox .rcbEmptyMessage { color: #8793a0; }
/* The total beside its label on the receipt's orange band, which runs to the card's edges.
   Each half carries its share of the gradient, meeting at the same colour. */
.tr-price-estimator .tblCostEstimator .amtDue { margin-top: 24px; padding-top: 20px; padding-bottom: 20px; border: 0; color: var(--navy); }
.tr-price-estimator .tblCostEstimator th.amtDue { margin-left: calc(-1 * var(--tr-bleed)); padding-left: var(--tr-bleed); background: linear-gradient(100deg, var(--orange), #ffb032); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tr-price-estimator .tblCostEstimator td.amtDue { margin-right: calc(-1 * var(--tr-bleed)); padding-right: var(--tr-bleed); background: linear-gradient(100deg, #ffb032, var(--gold)); font-family: 'Barlow Condensed', sans-serif; font-size: 27px; line-height: 1; }
/* 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 in the full gradient. */
.tr-price-estimator .ce-stacked .tblCostEstimator tr:has(+ tr > td br) > th.amtDue { margin-right: calc(-1 * var(--tr-bleed)); padding-right: var(--tr-bleed); background: linear-gradient(100deg, var(--orange), var(--gold)); }
.tr-price-estimator .ce-stacked .tblCostEstimator td.amtDue:has(br) { margin-left: calc(-1 * var(--tr-bleed)); padding-top: 8px; padding-left: var(--tr-bleed); background: linear-gradient(100deg, var(--orange), var(--gold)); }
/* The court picker (main.css) in his orange, with the buttons' corners */
body.design { --ce-accent: #ff7628; --ce-accent-text: #08121f; --ce-line: #526276; --ce-radius: 3px; }

/* Built for Arizona */
.tr-arizona { position: relative; min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--gold); color: var(--navy); overflow: hidden; }
.tr-arizona::before { content: 'AZ'; position: absolute; right: -3vw; bottom: -15vw; color: rgba(8,18,31,.06); font-family: 'Barlow Condensed', sans-serif; font-size: 45vw; font-weight: 900; line-height: 1; }
.tr-az-outline { height: 500px; position: relative; }
.tr-az-outline svg { width: 100%; height: 100%; overflow: visible; }
.tr-az-outline path { fill: rgba(8,18,31,.06); stroke: var(--navy); stroke-width: 2; }
.tr-az-outline .tr-az-road { fill: none; stroke: var(--orange); stroke-width: 17; }
.tr-az-outline .tr-az-road.tr-az-dashed { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 8 14; }
.tr-arizona-copy { position: relative; z-index: 2; max-width: 620px; }
.tr-arizona-copy .tr-eyebrow { color: #7b3717; }
.tr-home .tr-arizona h2 { font-size: clamp(72px, 7vw, 116px); }
.tr-home .tr-arizona h2 span { color: var(--navy); -webkit-text-stroke: 1px var(--navy); }
/* "Arizona drivers." only just fits the column, so it breaks where Zach's design shows it,
   except in the one-column layout, where it has room. */
.tr-arizona-copy > p:not(.tr-eyebrow) { max-width: 500px; margin-top: 30px; font-size: 16px; line-height: 1.75; }
.tr-az-meta { margin-top: 45px; padding-top: 20px; display: flex; gap: 28px; border-top: 1px solid rgba(8,18,31,.3); font-size: 8px; font-weight: 700; letter-spacing: .14em; }

/* FAQs */
.tr-faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; background: var(--white); color: var(--navy); }
.tr-home .tr-faq-intro h2 { margin: 38px 0 28px; font-size: clamp(62px, 5.5vw, 90px); }
.tr-home .tr-faq-intro h2 span { color: transparent; -webkit-text-stroke: 1px #4e5c69; }
.tr-faq-intro > p { color: #5a6876; line-height: 1.7; }
.tr-accordion { align-self: start; border-top: 1px solid #c9ced1; }
.tr-faq-item { border-bottom: 1px solid #c9ced1; }
.tr-faq-item summary { width: 100%; min-height: 76px; padding: 0; display: grid; grid-template-columns: 42px 1fr 22px; gap: 12px; align-items: center; color: var(--navy); text-align: left; list-style: none; cursor: pointer; }
.tr-faq-item summary::-webkit-details-marker { display: none; }
.tr-faq-item summary > span { color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; }
.tr-faq-item summary strong { font-size: 13px; }
.tr-faq-item summary i { position: relative; width: 16px; height: 16px; }
.tr-faq-item summary i::before, .tr-faq-item summary i::after { content: ''; position: absolute; top: 7px; left: 0; width: 16px; height: 1px; background: var(--navy); transition: transform .2s ease; }
.tr-faq-item summary i::after { transform: rotate(90deg); }
.tr-faq-item[open]:not(.faq-closing) summary i::after { transform: rotate(0); }
.tr-faq-item p { margin: 0 35px 0 54px; padding-bottom: 24px; color: #62707c; font-size: 12px; line-height: 1.7; }

/* Final call to action */
.tr-final-cta { position: relative; isolation: isolate; padding: 110px 6vw; min-height: 590px; overflow: hidden; background: radial-gradient(circle at 90% 50%, rgba(255,118,40,.22), transparent 33%), #08121f; }
.tr-final-cta::after { content: ''; position: absolute; z-index: -1; width: 480px; height: 480px; right: 2%; top: 5%; border: 1px solid rgba(255,190,53,.18); transform: rotate(45deg); }
.tr-home .tr-final-cta h2 { font-size: clamp(80px, 9vw, 145px); }
.tr-home .tr-final-cta h2 span { background: linear-gradient(90deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-final-cta > p:not(.tr-eyebrow) { color: var(--silver); }
.tr-final-actions { margin-top: 30px; display: flex; gap: 12px; }
.tr-giant-arrow { position: absolute; right: 8vw; top: 38%; color: var(--orange); }
.tr-giant-arrow svg { width: clamp(160px, 22vw, 350px); fill: none; stroke: currentColor; stroke-width: .55; }

/* Footer */
.tr-footer { padding: 70px 5vw 25px; background: #050b12; border-top: 1px solid #243142; color: var(--white); font: 400 16px/1.5 'Manrope', sans-serif; }
/* Zach's three columns (brand, links, contact) with the links column split 1 : 1.3 into
   Navigate and Resources. Both lists sit on this grid, so the home page's admin login can
   follow Resources directly, however long Navigate is. */
.tr-footer-main { display: grid; grid-template-areas: "brand . nav . res . contact" "brand . nav . admin . contact" "details details details details details details note"; grid-template-columns: 1fr 7% .52fr 30px .68fr 7% .7fr; grid-template-rows: auto 1fr auto; }
.tr-footer-brand { grid-area: brand; }
.tr-footer-brand img { width: 240px; height: 115px; object-fit: contain; }
.tr-footer-brand p { max-width: 260px; color: #738193; font-size: 11px; line-height: 1.7; }
.tr-footer-label { display: block; margin-bottom: 12px; color: var(--orange); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.tr-footer-links { display: contents; }
.tr-footer-nav { grid-area: nav; }
.tr-footer-resources { grid-area: res; }
.tr-footer-links div { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.tr-footer-links a, .tr-footer-links a:hover { color: #b1bbc4; font-size: 11px; line-height: 1.5; }
.tr-footer-links a:hover { color: var(--gold); }
/* FooterInfo's list holds only the home page's admin login, set as the last Resources link */
.tr-footer .footer-links { grid-area: admin; font-size: 11px; line-height: 1.5; }
.tr-footer .footer-links > li { margin-top: 13px; }
.tr-footer-contact { grid-area: contact; display: flex; flex-direction: column; gap: 13px; }
.tr-footer-phone { font-size: 0; }
.tr-footer-phone strong { display: block; margin-bottom: 13px; font-family: 'Barlow Condensed', sans-serif; font-size: 23px; font-weight: 700; line-height: 1.5; }
.tr-footer-phone span:last-child strong { margin-bottom: 0; }
.tr-footer-contact > span { color: #647284; font-size: 9px; line-height: 1.6; }
.tr-footer .footer-details, .tr-footer-note { margin-top: 55px; padding-top: 22px; border-top: 1px solid #1c2835; color: #566372; font-size: 8px; letter-spacing: .05em; line-height: 1.5; }
.tr-footer .footer-details { grid-area: details; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.tr-footer .footer-details a, .tr-footer .footer-details a:hover { color: inherit; }
.tr-footer .footer-details a:hover { color: var(--gold); }
.tr-footer-note { grid-area: note; text-align: right; }

@keyframes tr-ticket-float { 0%, 100% { transform: rotateY(-8deg) rotateZ(8deg) translateY(0); } 50% { transform: rotateY(-5deg) rotateZ(7deg) translateY(-10px); } }
@keyframes tr-sheen { 0%, 35% { transform: translateX(-110%); } 65%, 100% { transform: translateX(120%); } }
@keyframes tr-glow { to { opacity: .55; transform: scale(1.1); } }

/* Header: links tighten, then fold into the menu button once they no longer fit */
@media (max-width: 1240px) {
    .tr-header { grid-template-columns: 170px 1fr auto; gap: 24px; }
    .tr-brand { width: 170px; }
    .tr-brand img { width: 160px; height: 66px; }
    .tr-nav-list { gap: clamp(16px, 1.9vw, 30px); }
}

@media (max-width: 1180px) {
    .tr-hero { grid-template-columns: .95fr 1.05fr; padding-right: 4vw; }
    .tr-hero-process { grid-column: 1 / -1; margin: 30px 0 0; flex-direction: row; border-left: 0; border-top: 1px solid rgba(255,255,255,.11); }
    .tr-process-row { flex: 1; min-height: auto; border-right: 1px solid rgba(255,255,255,.11); }
    .tr-citation-chip { right: 0; }
}

@media (max-width: 1140px) {
    .tr-header { grid-template-columns: 1fr auto; }
    .tr-nav-actions { display: none; }
    .tr-menu-button { width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 7px; border: 1px solid #405063; background: transparent; cursor: pointer; }
    .tr-menu-button span { width: 19px; height: 1px; background: white; transition: transform .2s; }
    .tr-menu-open .tr-menu-button span:first-child { transform: translateY(4px) rotate(45deg); }
    .tr-menu-open .tr-menu-button span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .tr-nav-links { position: absolute; left: 0; right: 0; top: 100%; padding: 28px; display: none; flex-direction: column; gap: 24px; background: #08121f; border-bottom: 1px solid #344457; }
    .tr-menu-open .tr-nav-links { display: flex; }
    .tr-nav-list { flex-direction: column; gap: 24px; }
    .tr-nav-list a, .tr-nav-list a:hover { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; text-transform: uppercase; }
    .tr-nav-list a::after { display: none; }
    .tr-mobile-actions { padding-top: 20px; display: flex; align-items: center; gap: 20px; border-top: 1px solid #253447; font-size: 12px; }
}

@media (max-width: 900px) {
    body.design-ticketremoval:not(.design-home) { padding-top: 74px; }
    .tr-section-pad { padding: 90px 30px; }
    .tr-header { height: 74px; }
    .tr-hero { min-height: auto; padding: 135px 30px 45px; grid-template-columns: 1fr; }
    .tr-hero-copy { max-width: 650px; }
    .tr-home h1 { font-size: clamp(75px, 14vw, 112px); }
    .tr-citation-scene { margin-top: 25px; height: 580px; }
    .tr-citation-card { width: min(370px, 66%); }
    .tr-hero-process { grid-column: auto; }
    .tr-forward-copy, .tr-workflow, .tr-classroom, .tr-pricing, .tr-arizona, .tr-faq-section { grid-template-columns: 1fr; }
    .tr-forward-copy { gap: 35px; }
    .tr-workflow-heading { position: static; }
    .tr-timeline { margin-top: 50px; }
    .tr-legal-note { grid-column: 1; }
    .tr-classroom { gap: 65px; }
    .tr-pricing { gap: 65px; }
    .tr-az-outline { position: absolute; width: 48%; right: -8%; opacity: .35; }
    .tr-arizona { min-height: 620px; }
    .tr-arizona-copy { max-width: 650px; }
    .tr-az-break { display: none; }
    .tr-faq-section { gap: 60px; }
    .tr-footer-main { grid-template-areas: "brand . nav . res" "brand . nav . admin" "contact contact contact contact contact" "details details details details details" "note note note note note"; grid-template-columns: 1fr 7% .43fr 30px .57fr; grid-template-rows: auto 1fr auto; }
    .tr-footer-contact { margin-top: 24px; flex-direction: row; flex-wrap: wrap; align-items: baseline; }
    .tr-footer-contact .tr-footer-label { width: 100%; }
    .tr-footer-phone strong { display: inline; margin: 0 13px 0 0; }
    .tr-footer .footer-details { margin-top: 55px; }
    .tr-footer-note { margin-top: 0; padding-top: 10px; border: 0; text-align: left; }
}

@media (max-width: 600px) {
    .tr-section-pad { padding: 75px 20px; }
    .tr-header { padding: 0 20px; }
    .tr-brand img { width: 150px; }
    .tr-hero { padding-left: 20px; padding-right: 20px; }
    .tr-home h1 { font-size: clamp(67px, 21vw, 92px); }
    .tr-hero-lede { font-size: 14px; }
    .tr-hero-actions { display: grid; }
    .tr-benefit-strip { grid-template-columns: 1fr 1fr; row-gap: 18px; }
    .tr-benefit-strip div:nth-child(3) { padding-left: 0; }
    .tr-citation-scene { height: 500px; margin-left: -30px; margin-right: -30px; }
    .tr-citation-card { width: 300px; padding: 24px; }
    .tr-citation-title { font-size: 42px; }
    .tr-citation-chip { right: 4%; bottom: 5%; }
    .tr-hero-process { display: block; }
    .tr-process-row { min-height: 82px; padding: 18px 12px; grid-template-columns: 45px 1fr; border-right: 0; }
    .tr-home .tr-section-pad h2 { font-size: 58px; }
    .tr-timeline::before { left: 20px; }
    .tr-timeline-step { min-height: 230px; grid-template-columns: 42px 1fr; gap: 0 18px; }
    .tr-timeline-number { display: none; }
    .tr-timeline-node { grid-column: 1; width: 38px; height: 38px; }
    .tr-timeline-content { grid-column: 2; }
    .tr-course-visual { margin: 0 -12px; transform: none; }
    .tr-video-frame { min-height: 250px; }
    .tr-module-row { grid-template-columns: 70px 1fr; }
    .tr-module-row > div:last-child { display: none !important; }
    .tr-receipt { --tr-bleed: 25px; }
    .tr-az-meta { flex-wrap: wrap; }
    .tr-faq-item summary { grid-template-columns: 30px 1fr 18px; }
    .tr-faq-item p { margin-left: 42px; margin-right: 10px; }
    .tr-final-cta { padding: 85px 20px; min-height: 620px; }
    .tr-home .tr-final-cta h2 { font-size: 74px; }
    .tr-final-actions { display: grid; }
    .tr-giant-arrow { right: -40px; top: auto; bottom: 25px; opacity: .35; }
    .tr-footer-main { grid-template-areas: "brand" "nav" "res" "admin" "contact" "details" "note"; grid-template-columns: 1fr; }
    .tr-footer-nav { margin-top: 40px; }
    .tr-footer-resources { margin-top: 30px; }
    .tr-footer-contact { flex-direction: column; margin-top: 40px; }
    .tr-footer-phone strong { display: block; margin: 0 0 13px; }
}

@media (prefers-reduced-motion: reduce) {
    body.design-ticketremoval [class*="tr-"], body.design-ticketremoval [class*="tr-"]::before, body.design-ticketremoval [class*="tr-"]::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}