/* ==========================================================================
   StudentAid.pk — marketing site design system
   --------------------------------------------------------------------------
   Self-contained on purpose. styles.css is a PREBUILT Tailwind bundle with no
   build step in this repo, so any class it was not compiled with silently does
   nothing. Everything the marketing pages need lives here instead, using the
   Guardian Flow palette so the site and the product read as one thing.
   ========================================================================== */

:root {
  --bg:              #FFF6E9;
  --surface:         #FFFFFF;
  --surface-tint:    #FFFDF8;
  --primary:         #00282D;
  --primary-c:       #003F47;
  --on-surface:      #101D23;
  --on-variant:      #40484A;
  --border:          #E7DECB;
  --inverse:         #253239;
  --inverse-soft:    #D7E5ED;
  --outline:         #70787A;
  --outline-v:       #C0C8CA;
  --accent:          #845316;
  --accent-soft:     #FFDCBC;
  --mint:            #9BF5C5;
  --shadow-sm: 0 1px 2px rgba(0,40,45,.06), 0 2px 8px rgba(0,40,45,.04);
  --shadow-md: 0 8px 24px rgba(0,40,45,.08);
  --shadow-lg: 0 24px 60px rgba(0,40,45,.14);
  --r-sm: .6rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2rem;
  --gutter: 1.5rem;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--on-surface);
  font-family: 'Public Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Sora', system-ui, sans-serif; color: var(--primary); margin: 0 0 .6rem; line-height: 1.18; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: 1.22rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--on-variant); }
a  { color: var(--primary-c); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin: .3rem 0; color: var(--on-variant); }
strong { color: var(--on-surface); font-weight: 700; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- layout ------------------------------------------------------ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 60rem; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sec-tint { background: var(--surface-tint); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-dark { background: var(--primary); }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark p, .sec-dark li { color: var(--inverse-soft); }
.sec-white { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.sec-head { max-width: 46rem; margin-bottom: 2.5rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { font-size: 1.06rem; }

.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr .85fr; }

/* ---------- nav --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--primary-c); text-decoration: none; letter-spacing: -.01em; }
/* Height-constrained with width:auto so the mark keeps its aspect ratio no matter
   what the intrinsic PNG size is. alt="" — the wordmark beside it already names
   the brand, so announcing it twice is noise for a screen reader. */
.brand img { height: 28px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { color: var(--on-variant); text-decoration: none; font-size: .93rem; font-weight: 600; }
.nav-links a:hover { color: var(--primary); }
/* `.nav-links a` (0,1,1) outranks `.btn-primary` (0,1,0), so without this the
   nav's Book-a-demo button rendered dark grey text on the dark teal fill. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.nav-links a.btn-ghost, .nav-links a.btn-light { color: var(--primary-c); }
.nav-links a.current { color: var(--primary); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--accent-soft); }
.nav-toggle { display: none; background: none; border: 0; color: var(--primary); cursor: pointer; padding: .4rem; }
.mobile-menu { display: none; border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .9rem var(--gutter); border-bottom: 1px solid var(--border); color: var(--primary); text-decoration: none; font-weight: 600; }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: var(--r-sm); font-weight: 700; font-size: .97rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary-c); color: #fff; box-shadow: var(--shadow-sm); }
.btn-ghost { border-color: var(--primary-c); color: var(--primary-c); background: transparent; }
.btn-light { background: #fff; color: var(--primary-c); }
.btn-sm { padding: .55rem 1rem; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- pills / badges ---------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem;
  border-radius: 999px; background: var(--accent-soft); color: #5a3608;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.pill.ghost { background: transparent; border: 1px solid var(--border); color: var(--on-variant); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.sec-dark .eyebrow { color: var(--mint); }

/* ---------- cards ------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--primary-c); display: grid; place-items: center; margin-bottom: 1rem; }
.card.dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.card.dark h3 { color: #fff; } .card.dark p, .card.dark li { color: var(--inverse-soft); }
.card.dark .ico { background: rgba(255,255,255,.1); color: var(--mint); }
.card-link { text-decoration: none; display: block; transition: border-color .15s ease, transform .15s ease; }
.card-link:hover { border-color: var(--primary-c); transform: translateY(-2px); }

/* ---------- feature list ------------------------------------------------ */
.flist { list-style: none; padding: 0; margin: 0; }
.flist li { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 .8rem; }
.flist .material-symbols-outlined { font-size: 20px; color: var(--primary-c); background: var(--accent-soft); border-radius: 50%; padding: 3px; flex: 0 0 auto; }
.sec-dark .flist .material-symbols-outlined { background: rgba(155,245,197,.18); color: var(--mint); }

/* ---------- media ------------------------------------------------------- */
.shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.tall { aspect-ratio: 4/5; }
.shot.wide { aspect-ratio: 16/10; }
.shot.square { aspect-ratio: 1/1; }
.shot-cap { padding: .8rem 1rem; border-top: 1px solid var(--border); font-size: .84rem; color: var(--on-variant); background: var(--surface); }

/* Real product screenshots. .browser frames desktop portal captures, .device
   frames phone captures — both so a screenshot reads as the product rather
   than as a stray image dropped on the page. */
.browser { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #F3EEE4; border-bottom: 1px solid var(--border); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9CDB8; }
.browser-bar span { margin-left: 10px; font-size: .72rem; color: var(--outline); letter-spacing: .02em; }
.browser img { width: 100%; display: block; }

.device { width: 258px; max-width: 100%; margin: 0 auto; padding: 7px; background: #fff; border: 1px solid var(--border); border-radius: 2.1rem; box-shadow: var(--shadow-lg); }
.device img { width: 100%; display: block; border-radius: 1.65rem; }
.device-row { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.device-cap { text-align: center; font-size: .82rem; color: var(--on-variant); margin-top: .7rem; max-width: 258px; }
.sec-dark .device-cap { color: var(--inverse-soft); }

.phone { width: 270px; max-width: 100%; margin: 0 auto; border-radius: 2.4rem; background: #fff; border: 1px solid var(--border); padding: .7rem; box-shadow: var(--shadow-lg); }
.phone-in { border-radius: 1.9rem; overflow: hidden; background: var(--primary); aspect-ratio: 9/19; display: flex; flex-direction: column; }
.phone-bar { padding: .9rem 1rem .5rem; color: #fff; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 700; }
.phone-body { flex: 1; background: var(--bg); margin: .4rem; border-radius: 1.5rem; overflow: hidden; position: relative; }
.phone-body img { width: 100%; height: 100%; object-fit: cover; }
.phone-float {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; background: rgba(255,255,255,.96);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .7rem;
  display: flex; gap: .6rem; align-items: center; box-shadow: var(--shadow-sm);
}
.phone-float .av { width: 32px; height: 32px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; flex: 0 0 auto; }
.phone-float b { display: block; font-size: .8rem; color: var(--primary); }
.phone-float small { font-size: .7rem; color: var(--on-variant); }

/* ---------- stats ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.2rem; text-align: center; }
.stat b { display: block; font-family: 'Sora', sans-serif; font-size: 1.8rem; color: var(--primary-c); line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--on-variant); }

/* ---------- steps ------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 1.2rem; }
.step { position: relative; padding-left: 3.4rem; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--primary-c); color: #fff; display: grid; place-items: center;
  font-family: 'Sora', sans-serif; font-weight: 700;
}
.sec-dark .step::before { background: var(--mint); color: var(--primary); }

/* ---------- table ------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 34rem; }
th, td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
th { background: var(--surface-tint); color: var(--primary); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }

/* ---------- callout / faq ----------------------------------------------- */
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary-c); border-radius: var(--r-sm); padding: 1.1rem 1.3rem; }
.callout.warn { border-left-color: var(--accent); background: var(--surface-tint); }
.callout p:last-child { margin-bottom: 0; }

details.faq { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1rem 1.2rem; margin-bottom: .7rem; }
details.faq summary { cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--accent); }
details.faq[open] summary::after { content: '−'; }
details.faq p { margin: .8rem 0 0; }

/* ---------- hero -------------------------------------------------------- */
.hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero h1 span { color: var(--primary-c); text-decoration: underline; text-decoration-color: var(--accent-soft); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.hero .lede { font-size: clamp(1.02rem, 2vw, 1.15rem); max-width: 34rem; }

/* ---------- footer ------------------------------------------------------ */
.footer { background: var(--inverse); color: var(--inverse-soft); padding: 4rem 0 2rem; }
.footer h3, .footer h4 { color: #fff; }
/* The light wordmark on the dark footer panel. Capped in height and given a
   little breathing room so it sits where the old <h3> did. */
.footer-mark { height: 26px; width: auto; display: block; margin-bottom: .9rem; }
.footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; color: var(--outline-v); margin-bottom: .9rem; }
.footer a { color: var(--inverse-soft); text-decoration: none; display: block; margin-bottom: .55rem; }
.footer a:hover { color: var(--accent-soft); }
.footer p { color: var(--inverse-soft); }
.footer .tag { color: var(--mint); font-weight: 700; }
.footer-bot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--outline); text-align: center; color: var(--outline-v); font-size: .86rem; }

/* ---------- forms ------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; color: var(--on-surface); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: #fff; font: inherit; font-size: .96rem; color: var(--on-surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-c); box-shadow: 0 0 0 3px rgba(0,63,71,.1); }
.form-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.6rem); }
/* The demo form is a LIGHT card sitting inside a .sec-dark section, so the
   `.sec-dark p` colour would render its helper text light-on-light. Re-assert
   dark text for anything inside the card. Same specificity as `.sec-dark p`,
   and declared later, so it wins. */
.form-card p, .form-card li, .form-card label, .form-card h2, .form-card h3 { color: var(--on-variant); }
.form-card h2, .form-card h3, .form-card label { color: var(--on-surface); }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 940px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split, .split.wide-left { grid-template-columns: 1fr; }
  .split .media-first { order: -1; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .g2, .g3 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}