/* Public campus pages share the existing DM Sans typography and control tokens. */
.campus-page { --campus-navy: var(--primary); --campus-accent: #9dceff; --campus-muted: #526b90; background: #f8fbff; color: var(--campus-navy); }
/* Match marketplace typography while retaining the landing-page heading sizes. */
.campus-page[data-section="alltow"] { font-family: var(--font-sans); }
.campus-page[data-section="alltow"] :is(h1, h2, h3, h4) { font-weight: var(--weight-semibold); letter-spacing: -.025em; line-height: 1.25; }
.campus-page[data-section="alltow"] :is(.campus-cta, .step-number, .eyebrow) { font-weight: var(--weight-semibold); }
.campus-page[data-section="alltow"] .campus-logo.brand-wordmark { color: white; font-size: 2rem; letter-spacing: -.045em; }
.campus-page :focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.campus-header :is(a, button):focus-visible { outline-color: white; }
.campus-profile { padding: 0; overflow: hidden; flex-shrink: 0; }
.campus-profile .avatar { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; }
.campus-profile .avatar img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; object-fit: cover; border-radius: inherit; }
.campus-header { background: var(--campus-navy); color: white; border-bottom: 1px solid #ffffff12; }
.campus-nav { max-width: 1480px; margin: auto; min-height: 88px; padding: 0 40px; display: flex; align-items: center; gap: 64px; }
.campus-logo { font-size: 36px; font-weight: 900; letter-spacing: -1.8px; line-height: 1; }
.campus-links { display: flex; align-self: stretch; gap: 40px; }
.campus-links a { position: relative; display: flex; align-items: center; font-size: 18px; font-weight: 500; }
.campus-links a:hover { color: var(--campus-accent); }
.campus-links [aria-current]::after { content: ''; position: absolute; height: 4px; background: var(--campus-accent); border-radius: 4px; bottom: 0; left: -12px; right: -12px; }
.campus-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.campus-actions:has(.guest-actions:not([hidden])) { gap: 12px; }
.campus-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color 180ms ease; }
.campus-icon:hover { background: #ffffff16; }
.campus-icon svg { width: 31px; height: 31px; }
.campus-profile svg { width: 44px; height: 44px; }
.campus-search { width: 190px; height: 46px; border: 1px solid #9dceff20; background: #9dceff10; border-radius: 30px; display: flex; align-items: center; }
.campus-search button { background: none; color: white; border: 0; cursor: pointer; padding: 10px 12px; display: flex; }
.campus-search svg { width: 23px; height: 23px; }
.campus-search input { padding: 0 10px 0 0; width: 100%; min-width: 0; min-height: 0; height: 100%; border: 0; background: transparent; color: white; box-shadow: none; }
.campus-search input:is(:focus, :hover) { background: transparent; color: white; box-shadow: none; outline: none; }
.campus-search:focus-within { box-shadow: var(--focus-ring); }
.campus-search:hover { background: var(--nav-control); box-shadow: var(--shadow-hover); }
.campus-search:focus-within:hover { box-shadow: var(--focus-ring), var(--shadow-hover); }
.campus-hero { position: relative; isolation: isolate; background: var(--primary); color: white; overflow: hidden; }
.campus-hero::before { content: ''; z-index: -1; position: absolute; width: 630px; height: 310px; right: 7%; top: 12px; border-right: 64px solid #2458a02e; border-top: 32px solid #2458a01c; border-radius: 45% 65% 50% 50%; transform: rotate(18deg) skewX(-25deg); }
.campus-page[data-page="home"] .campus-logo { color: white; letter-spacing: -.045em; }
.campus-page[data-page="home"] { background: var(--primary); }
.home-hero { min-height: calc(100svh - 80px); padding: 72px max(40px, 5vw) 52px; }
.home-hero::before { right: 3%; top: 25px; width: 390px; height: 320px; border-top-width: 18px; border-right-width: 58px; transform: rotate(20deg) skewX(-30deg); }
.home-hero .service-card:focus-visible { outline-color: var(--campus-accent); }
.home-introduction { text-align: center; }
.home-introduction h1 { margin: 0; font-size: clamp(42px, 4.7vw, 64px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.home-introduction p { font-size: clamp(18px, 1.8vw, 24px); margin: 28px 0 40px; color: #f0f5ff; }
.service-grid { max-width: 1480px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.service-card { display: grid; grid-template-columns: 41% minmax(0, 1fr); align-items: center; gap: 24px; padding: 40px 32px; min-height: 345px; background: linear-gradient(115deg, #f4faff, #e6f3ff); border-radius: 28px; box-shadow: 0 8px 24px #03173012; color: var(--campus-navy); cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 35px #00000024; }
.service-art { width: 100%; height: auto; }
.service-copy { display: flex; flex-direction: column; align-self: stretch; justify-content: center; }
.service-card:first-child .service-copy { align-self: end; }
.service-card:first-child .service-copy p { max-width: 20ch; }
.service-copy h2 { margin: 0 0 12px; font-size: clamp(32px, 3.1vw, 44px); font-weight: 800; letter-spacing: -.035em; }
.service-copy p { margin: 0 0 22px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.35; color: var(--campus-muted); }
.service-cta { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: auto; background: var(--campus-navy); color: white; padding: 15px 22px; border-radius: 18px; font-size: 22px; font-weight: 600; transition: background-color 180ms ease; }
.arrow { display: inline-block; transition: transform 180ms ease; }
.service-card:hover .service-cta { background: var(--primary-dark); }
.service-card:hover .arrow, .campus-cta:hover .arrow { transform: translateX(4px); }
.tow-hero-inner { max-width: 1440px; margin: auto; padding: 60px 40px 40px; display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 28px; }
.eyebrow { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: .14em; color: #badbff; }
.tow-hero h1 { font-size: clamp(38px, 4.2vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 20px; }
.tow-description { max-width: 640px; font-size: clamp(19px, 1.65vw, 24px); line-height: 1.45; color: #bad3f0; margin: 0 0 26px; }
.tow-actions { display: flex; gap: 20px; }
.campus-cta { border-radius: 17px; padding: 14px 24px; min-height: 58px; flex: 1; text-align: center; display: flex; gap: 16px; justify-content: center; align-items: center; background: white; color: var(--campus-navy); font-size: 21px; font-weight: 750; border: 2px solid white; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.campus-cta.secondary { color: white; background: transparent; border-color: var(--campus-accent); }
.campus-cta:hover { transform: translateY(-2px); background: #e4f2ff; }
.campus-cta.secondary:hover { background: #ffffff12; }
.tow-art { width: 100%; height: auto; }
.how-section { max-width: 1440px; margin: auto; padding: 30px 40px 56px; }
.how-section > h2 { text-align: center; font-size: 40px; font-weight: 800; margin: 0 0 4px; }
.how-subtitle { text-align: center; font-size: 20px; color: var(--campus-muted); margin: 0 0 25px; }
.how-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.how-card { position: relative; border: 1px solid #cfe4fc; border-radius: 18px; padding: 22px 23px 25px; background: linear-gradient(130deg, #fff, #f4faff); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.how-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px #00000014; border-color: #9dceff; }
.how-card:not(:last-child)::after { content: ''; width: 26px; height: 2px; background: #829bbd; position: absolute; left: calc(100% + 7px); top: 63px; }
.step-icon { width: 68px; height: 68px; background: #d8ecff; display: grid; place-items: center; border-radius: 50%; margin: 0 0 14px; }
.step-icon svg { width: 36px; height: 36px; }
.step-text { display: grid; grid-template-columns: 30px 1fr; gap: 8px; }
.step-number { font-weight: 800; color: #174b86; font-size: 18px; }
.how-card h3 { font-size: 19px; font-weight: 750; margin: 0 0 6px; letter-spacing: -.035em; }
.how-card p { font-size: 16px; line-height: 1.4; color: var(--campus-muted); margin: 0; }
.tow-form-shell { max-width: 620px; margin: 48px auto; padding: 0 24px; }
.tow-form-shell h1 { font-size: 36px; font-weight: 800; margin: 24px 0 12px; }
.tow-form-shell > p { color: var(--campus-muted); }
.tow-form { display: grid; gap: 20px; margin-top: 28px; }
.split-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.split-field legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.plate-groups { display: grid; grid-template-columns: 4fr 3fr; gap: 18px; }
.plate-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.plate-group legend { font-size: 13px; color: var(--campus-muted); }
.plate-boxes { display: grid; gap: 6px; }
.plate-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plate-letters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tow-form .plate-boxes input { min-width: 0; padding: 8px 2px; text-align: center; font-size: 24px; }
.split-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split-inputs label { min-width: 0; }
.split-inputs label > span { font-size: 13px; color: var(--campus-muted); }
.split-inputs input { min-width: 0; text-align: center; }
.student-id-inputs { grid-template-columns: minmax(0, 2fr) auto minmax(0, 5fr); align-items: end; }
.student-id-inputs input[readonly] { background-color: #e9edf2; color: #647184; }
.permanent-dash { display: grid; place-items: center; height: 50px; font-size: 24px; }
.tow-form label { display: grid; gap: 8px; font-weight: 600; }
.tow-form input, .tow-form select, .tow-form textarea { width: 100%; }
.tow-form .consent { display: flex; align-items: flex-start; font-weight: 400; }
.tow-form .consent input { width: 18px; height: 18px; min-height: 0; padding: 0; flex-shrink: 0; margin: 5px 0 0; accent-color: var(--primary); box-shadow: none; }
.tow-form .consent input:focus:not(:focus-visible) { outline: none; }
.tow-form .required-mark { color: #c62828; font-weight: 700; }
body[data-page="alltow-register"] .tow-form .primary-button:disabled { background: #69778c; color: #fff; opacity: 1; cursor: not-allowed; }
.tow-form :is(input:not([type="checkbox"]), select, textarea):focus { outline: none; border-color: var(--border); box-shadow: var(--focus-ring); }
.tow-form .primary-button { min-height: 52px; }
.form-feedback:empty { display: none; }
.form-feedback { padding: 16px; background: #e1f0fb; border-radius: 12px; }
.form-feedback[data-error] { color: #9a2424; background: #fff0f0; }
@media (min-width: 1600px) { .home-hero { padding-top: 76px; } .service-card { min-height: 360px; } }
@media (max-width: 1100px) { .campus-nav { gap: 36px; } .campus-actions { gap: 16px; } .campus-search { width: 140px; } .service-card { padding: 28px 22px; grid-template-columns: 38% 1fr; } .how-grid { gap: 24px; } .how-card { padding: 20px 16px; } .how-card:not(:last-child)::after { width: 12px; left: calc(100% + 6px); } }
@media (max-width: 880px) { .campus-nav { padding: 0 24px; gap: 28px; } .campus-logo { font-size: 30px; } .campus-links { gap: 24px; } .campus-search { width: 45px; } .campus-search:focus-within { width: 120px; } .campus-search input { padding: 0; } .home-hero { padding: 48px 24px; } .service-grid { grid-template-columns: 1fr; max-width: 680px; } .service-card { grid-template-columns: 42% 1fr; min-height: 300px; padding: 30px; } .service-copy h2 { font-size: 40px; } .service-copy p { font-size: 21px; } .tow-hero-inner { padding: 40px 24px; gap: 16px; } .tow-actions { gap: 12px; } .campus-cta { font-size: 18px; padding: 12px; } .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .how-card::after { display: none; } .how-section { padding: 32px 24px; } }
@media (max-width: 620px) { .campus-nav { min-height: 110px; padding: 16px 20px 0; gap: 0; flex-wrap: wrap; justify-content: space-between; } .campus-logo { font-size: 29px; } .campus-actions { gap: 10px; } .campus-icon, .campus-search { width: 36px; height: 36px; } .campus-search button { padding: 6px; } .campus-profile svg { width: 36px; height: 36px; } .campus-search:focus-within { width: 80px; } .campus-links { order: 3; width: 100%; height: 43px; justify-content: center; gap: 42px; } .campus-links a { font-size: 16px; } .home-hero { padding: 38px 20px; } .home-introduction h1 { font-size: clamp(34px, 8.5vw, 42px); } .home-introduction p { font-size: 18px; margin: 20px 0 30px; } .service-grid { gap: 24px; } .service-card { padding: 24px; gap: 14px; grid-template-columns: 1fr; text-align: center; } .service-art { width: 190px; height: 155px; object-fit: contain; margin: auto; } .service-copy h2 { font-size: 36px; } .service-copy p { font-size: 19px; margin-bottom: 20px; } .service-cta { font-size: 19px; } .tow-hero-inner { grid-template-columns: 1fr; padding: 36px 24px 16px; } .tow-hero h1 { font-size: clamp(36px, 8.6vw, 48px); } .tow-art { max-width: 480px; margin: 8px auto 0; } .tow-actions { gap: 14px; } .how-section > h2 { font-size: 32px; } .how-subtitle { font-size: 18px; } .how-grid { grid-template-columns: 1fr; gap: 18px; } .how-card { padding: 24px; } .how-card h3 { font-size: 21px; } .how-card p { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .campus-page *, .campus-page *::before, .campus-page *::after { transition: none !important; } .service-card:hover, .campus-cta:hover, .how-card:hover, .campus-page .arrow { transform: none !important; } }

@media (max-width: 620px) { .service-card:first-child .service-copy p { max-width: none; } }