/* Student Expenses — shared site styles.
   Most layout and colour lives inline on each page (as in the original design).
   This file holds page basics, the navigation, and the rules inline styles can't express:
   hover states, responsive changes, the FAQ, forms and blog posts. */

:root {
  --se-purple: #3A0C8F;
  --se-ink: #17112B;
  --se-link: #5B2EC4;
  --se-muted: #5B5670;
  --se-line: #E4E0EE;
  --se-soft: #F5F3FA;
  --se-tint: #F1EDFA;
  --se-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--se-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--se-ink);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--se-link); text-decoration: none; }
a:hover { color: var(--se-purple); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #8B6FE0; outline-offset: 2px; }
[id] { scroll-margin-top: 120px; }

.se-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--se-ink); color: #fff; font-weight: 700;
}
.se-skip:focus { top: 12px; color: #fff; }

/* ---------- Header ---------- */
/* Sticky: the whole header (dark "Website areas" bar and white main bar) stays at the top, hiding while you scroll down. */
.se-header { position: sticky; top: 0; z-index: 50; transition: transform .25s ease, visibility 0s linear 0s; }
/* Slide well clear (so no border or shadow peeks in at the top), then hide it completely. */
.se-header.is-hidden { transform: translateY(calc(-100% - 32px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.se-header.is-hidden .se-navbar { box-shadow: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .se-header { transition: none; } }
.se-topbar { background: var(--se-ink); color: #CFC8E3; }
.se-topbar-in {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px);
  height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 24px;
  font-size: 13px; font-weight: 500;
}
.se-topbar-label { color: #9F96BE; }
.se-topbar a { color: #CFC8E3; }
.se-topbar a:hover { color: #FFFFFF; text-decoration: none; }
.se-topbar a[aria-current] { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.se-topbar a.se-topbar-cta { color: #FFFFFF; font-weight: 700; }

.se-nav {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px);
  height: 72px; display: flex; align-items: center; gap: 20px;
}
.se-navbar { background: #FFFFFF; border-bottom: 1px solid var(--se-line); }
.se-brand { display: flex; align-items: center; gap: 10px; color: var(--se-ink); flex: 0 0 auto; }
.se-brand:hover { color: var(--se-ink); text-decoration: none; }
.se-brand img { width: 38px; height: 38px; }
.se-brand span { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.se-nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 1 1 auto; min-width: 0; }
.se-nav-links a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 8px;
  font-size: 15px; font-weight: 600; white-space: nowrap; color: #37304D;
}
.se-nav-links a:hover { color: var(--se-purple); background: var(--se-tint); text-decoration: none; }
.se-nav-links a[aria-current="page"] { color: var(--se-purple); background: var(--se-tint); }
.se-nav-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 8px;
  background: var(--se-purple); color: #FFFFFF; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.se-nav-cta:hover { background: #2A0868; color: #FFFFFF; text-decoration: none; }
.se-menu-btn {
  display: none; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #C9C3DA; border-radius: 8px;
  background: #FFFFFF; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.se-mobile-menu {
  border-bottom: 1px solid var(--se-line); padding: 4px 16px 20px; display: flex; flex-direction: column; background: #FFFFFF;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.se-mobile-menu a {
  display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 700; color: var(--se-ink);
  border-bottom: 1px solid var(--se-line);
}
.se-mobile-menu a.se-mobile-sub { min-height: 48px; font-size: 16px; font-weight: 600; border-bottom: 0; }
.se-mobile-menu a[aria-current="page"] { color: var(--se-purple); }
.se-mobile-label {
  margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--se-muted);
}

@media (max-width: 899px) {
  .se-topbar, .se-nav-links { display: none; }
  .se-nav { gap: 12px; }
  .se-nav-cta { margin-left: auto; padding: 0 14px; }
  .se-menu-btn { display: flex; }
}
@media (max-width: 440px) {
  .se-nav { gap: 8px; }
  .se-brand { gap: 8px; }
  .se-brand img { width: 32px; height: 32px; }
  .se-brand span { font-size: 16px; }
  .se-nav-cta { padding: 0 12px; font-size: 14px; }
}
@media (min-width: 900px) {
  .se-mobile-menu { display: none !important; }
}

/* ---------- From the design: hover states ---------- */
.se-card { transition: border-color .15s ease, box-shadow .15s ease; }
.se-card:hover { border-color: #B9AEDB; box-shadow: 0 14px 28px -22px rgba(23,17,43,.5); }
.se-photo {
  background-image: linear-gradient(90deg, rgba(23,17,43,.88) 0%, rgba(23,17,43,.55) 55%, rgba(23,17,43,.15) 100%), url(/assets/img/students.jpg);
  background-size: cover; background-position: center 30%;
}
@media (max-width: 700px) {
  .se-photo { background-image: linear-gradient(rgba(23,17,43,.78), rgba(23,17,43,.78)), url(/assets/img/students.jpg); }
}
.se-hero a { color: #FFFFFF; }
.se-hero a:hover { color: #E6DEFA; }
.su-tile { transition: transform .15s ease, box-shadow .15s ease; }
.su-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -20px rgba(23,17,43,.55); text-decoration: none; }
.su-tile:hover .su-go { color: var(--se-purple); }
.se-f a { color: #CFC8E3; text-decoration: none; }
.se-f a:hover { color: #FFFFFF; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .su-tile, .se-card { transition: none; }
  .su-tile:hover { transform: none; }
}

/* ---------- FAQ ---------- */
.se-faq { border-bottom: 1px solid var(--se-line); }
.se-faq:last-child { border-bottom: 0; }
.se-faq summary {
  list-style: none; min-height: 60px; padding: 14px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer;
}
.se-faq summary::-webkit-details-marker { display: none; }
.se-faq summary h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--se-ink); }
.se-faq summary svg { flex: 0 0 auto; }
.se-faq[open] .se-faq-v { display: none; }
.se-faq summary:hover h3 { color: var(--se-purple); }
.se-faq p { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 24px; color: var(--se-muted); max-width: 680px; }

/* ---------- Forms ---------- */
.se-in {
  height: 48px; padding: 0 14px; border: 1px solid #9C96AE; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--se-ink); background: #FFFFFF; width: 100%; min-width: 0;
}
.se-in:focus { outline: 2px solid var(--se-purple); outline-offset: 1px; }
textarea.se-in { height: auto; padding: 12px 14px; resize: vertical; }
.se-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.se-form-error { margin: 0; font-size: 15px; font-weight: 600; color: #B42318; }
button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* ---------- Blog ---------- */
.se-chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: #FFFFFF; color: var(--se-ink); border: 1px solid #8A84A0;
}
.se-chip:hover { border-color: var(--se-ink); }
.se-chip[aria-pressed="true"] { background: var(--se-ink); color: #FFFFFF; border-color: var(--se-ink); }

.se-prose { font-size: 18px; line-height: 1.7; color: #2A2440; }
.se-prose > :first-child { margin-top: 0; }
.se-prose h2 { margin: 1.8em 0 .5em; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--se-ink); }
.se-prose h3 { margin: 1.6em 0 .4em; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--se-ink); }
.se-prose p, .se-prose ul, .se-prose ol { margin: 0 0 1.1em; }
.se-prose li { margin: 0 0 .4em; }
.se-prose a { text-decoration: underline; text-underline-offset: 3px; }
.se-prose img { display: block; margin: 1.6em 0; border-radius: 14px; border: 1px solid var(--se-line); }
.se-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--se-purple);
  font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--se-ink);
}
.se-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.se-prose th, .se-prose td { padding: 10px 12px; border-bottom: 1px solid var(--se-line); text-align: left; vertical-align: top; }
.se-prose th { font-weight: 700; color: var(--se-ink); background: var(--se-soft); }

/* ---------- Video pop-up (site.js) ---------- */
.se-video {
  width: min(960px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px;
  background: var(--se-ink); color: #FFFFFF; overflow: hidden;
}
.se-video::backdrop { background: rgba(23,17,43,.78); }
.se-video-bar { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; }
.se-video-title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.se-video-close {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1);
  color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.se-video-close:hover { background: rgba(255,255,255,.2); }
.se-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.se-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.se-video-foot { margin: 0; padding: 10px 20px 14px; font-size: 14px; }
.se-video-foot a { color: #CFC8E3; }
.se-video-foot a:hover { color: #FFFFFF; }

/* ---------- Home: "Three ways to add a line" switcher (works without JavaScript) ---------- */
.se-ways-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.se-ways-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.se-ways-tabs label { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; border: 1px solid #DCD3F5; color: #3A0C8F; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.se-ways-tabs label:hover { background: #F1EDFA; }
#way-type:checked ~ .se-ways-tabs label[for="way-type"],
#way-scan:checked ~ .se-ways-tabs label[for="way-scan"],
#way-miles:checked ~ .se-ways-tabs label[for="way-miles"] { background: #3A0C8F; border-color: #3A0C8F; color: #FFFFFF; }
#way-type:focus-visible ~ .se-ways-tabs label[for="way-type"],
#way-scan:focus-visible ~ .se-ways-tabs label[for="way-scan"],
#way-miles:focus-visible ~ .se-ways-tabs label[for="way-miles"] { outline: 3px solid #8F6BE8; outline-offset: 2px; }
.se-way { display: none; flex-wrap: wrap; align-items: stretch; gap: 24px 48px; }
#way-type:checked ~ .se-way-type, #way-scan:checked ~ .se-way-scan, #way-miles:checked ~ .se-way-miles { display: flex; }
.se-way-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; color: #5B5670; font-size: 16px; line-height: 25px; }
.se-way-text h4 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 800; color: #17112B; }
.se-way-text p { margin: 0; }
.se-way-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.se-way-steps li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E4E0EE; }
.se-way-steps li span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: #3A0C8F; color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.se-way-phone { flex: 0 1 380px; min-width: 0; margin: 0 auto; position: relative; display: flex; justify-content: center; height: 400px; overflow: hidden; border-radius: 18px; background: #E9E2FA; padding: 28px 24px 0; }
.se-way-phone img { width: 100%; max-width: 230px; height: auto; align-self: flex-start; border: 7px solid #17112B; border-bottom: 0; border-radius: 28px 28px 0 0; display: block; }
/* Two screens: the second fades in over the first, and the matching step lights up. */
.se-fade img + img { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); animation: se-fade-in 7s ease-in-out infinite; }
.se-way:hover .se-fade img, .se-way:hover .se-way-steps li { animation-play-state: paused; }
@keyframes se-fade-in { 0%, 46% { opacity: 0; } 51%, 94% { opacity: 1; } 100% { opacity: 0; } }
.se-way:has(.se-fade) .se-way-steps li:nth-child(1) { animation: se-step-a 7s ease-in-out infinite; }
.se-way:has(.se-fade) .se-way-steps li:nth-child(2) { animation: se-step-b 7s ease-in-out infinite; }
@keyframes se-step-a { 0%, 46%, 100% { border-color: #3A0C8F; box-shadow: 0 0 0 1px #3A0C8F; } 51%, 94% { border-color: #E4E0EE; box-shadow: none; } }
@keyframes se-step-b { 0%, 46%, 100% { border-color: #E4E0EE; box-shadow: none; } 51%, 94% { border-color: #3A0C8F; box-shadow: 0 0 0 1px #3A0C8F; } }
@media (prefers-reduced-motion: reduce) {
  /* No fade: show both screens side by side instead. */
  .se-fade { gap: 12px; }
  .se-fade img { max-width: 170px; }
  .se-fade img + img { position: static; transform: none; width: 100%; animation: none; }
  .se-way .se-way-steps li { animation: none !important; }
}
@media (max-width: 440px) {
  .se-ways-tabs { gap: 6px; flex-wrap: nowrap; }
  .se-ways-tabs label { height: 40px; padding: 0 10px; font-size: 14px; gap: 5px; }
  .se-ways-long { display: none; }
  .se-way-phone { height: 360px; padding: 22px 16px 0; }
  .se-fade img + img { top: 22px; width: calc(100% - 32px); }
}

/* ---------- Blog post page: purple accents ---------- */
.se-post h2 { color: var(--se-purple); padding-top: .9em; border-top: 1px solid var(--se-line); }
.se-post > h2:first-child, .se-post > img + h2 { border-top: 0; padding-top: 0; }
.se-post li::marker { color: var(--se-purple); }
.se-post blockquote {
  padding: 20px 24px; border-left: 4px solid var(--se-purple); border-radius: 0 14px 14px 0; background: var(--se-tint);
}
.se-post blockquote + p { margin-top: -.6em; font-size: 15px; font-weight: 700; color: var(--se-purple); }
.se-post strong { color: var(--se-ink); }

/* Once the main bar is stuck (site.js adds .is-stuck), tint it and add a soft shadow so it stands off the page. */
.se-navbar { transition: background-color .2s ease, box-shadow .2s ease; }
.se-header.is-stuck .se-navbar { background: rgba(245,243,250,.94); border-bottom-color: #DCD3F5; box-shadow: 0 8px 24px -14px rgba(23,17,43,.35); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }