/* ============================================================
   ARQELIVA — Design System v2.0 (Revision 2)
   Premium Academic Technology — high density, compact rhythm
   ============================================================ */

:root {
  --navy: #0B1739;
  --navy-deep: #060F26;
  --indigo: #2563EB;        /* Royal blue — accent (reference-corrected) */
  --indigo-deep: #1D4ED8;
  --indigo-soft: #EFF4FF;
  --green: #18A873;
  --green-soft: #E6F6F0;
  --bg: #F7F9FC;
  --white: #FFFFFF;
  --ink: #111827;
  --muted: #667085;
  --line: #E4E7EC;
  --line-soft: #EEF1F5;

  --sans: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 56px; --sp-11: 64px; --sp-12: 80px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(16,24,40,.05);
  --sh-md: 0 4px 12px rgba(16,24,40,.08);
  --sh-lg: 0 12px 32px rgba(16,24,40,.12);
  --sh-indigo: 0 8px 24px rgba(79,93,245,.28);

  --container: 1200px;
  --header-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg);
  line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
.lead { font-size: 1.02rem; color: var(--muted); line-height: 1.6; }
.eyebrow { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); margin-bottom: 10px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: .92rem;
  padding: 12px 24px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .2s ease; white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid rgba(79,93,245,.4); outline-offset: 2px; }
.btn-primary { background: var(--indigo); color: #fff; box-shadow: var(--sh-indigo); }
.btn-primary:hover { background: var(--indigo-deep); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--indigo); color: var(--indigo); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--indigo-soft); color: var(--indigo); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---- Cards ---- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-sm); }
.card-hover { transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-full); }
.badge-green { background: var(--green-soft); color: #0E7A52; }
.badge-indigo { background: var(--indigo-soft); color: var(--indigo); }
.badge-amber { background: #FEF3E2; color: #B45309; }
.badge-gray { background: #F2F4F7; color: var(--muted); }

/* ---- Progress ---- */
.progress { height: 7px; background: var(--line-soft); border-radius: var(--r-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--indigo); border-radius: var(--r-full); }
.progress.green > span { background: var(--green); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-name { font-weight: 700; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* ---- Hero ---- */
.hero { padding: 28px 0 24px; }
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; }
.hero h1 { margin-bottom: 12px; }
.hero .lead { margin-bottom: 20px; max-width: 440px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Dashboard preview (hero visual) — product screenshot look ---- */
.dash-wrap { position: relative; }
.dash-preview {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 20px; overflow: visible;
}
.dash-preview .dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.dash-preview .dash-title { font-weight: 700; font-size: 1rem; }
.dash-body { display: flex; gap: 0; }
.dash-sidebar { width: 48px; flex-shrink: 0; background: #111a3f; border-radius: var(--r-md) 0 0 var(--r-md); padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dash-side-item { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: rgba(255,255,255,.55); }
.dash-side-item.active { color: #fff; background: rgba(79,93,245,.35); }
.dash-main { flex: 1; padding: 0 0 0 16px; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.metric { background: var(--bg); border-radius: var(--r-md); padding: 12px; }
.metric .m-num { font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.metric .m-lbl { font-size: .68rem; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.dash-section-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; align-items: center; gap: 10px; font-size: .84rem; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.task .t-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task .t-dot.indigo { background: var(--indigo); }
.task .t-dot.amber { background: #F59E0B; }
.task .t-dot.gray { background: #C4CBD6; }
.float-card {
  position: absolute; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 10px 14px;
  display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600; z-index: 2;
}
.float-card .fc-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float-card .fc-icon.green { background: var(--green-soft); color: var(--green); }
.float-card .fc-icon.indigo { background: var(--indigo-soft); color: var(--indigo); }

/* ---- Trust bar ---- */
.trust-bar { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 12px 0; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 500; color: var(--muted); padding: 0 20px; border-right: 1px solid var(--line); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: none; }
.trust-item svg { width: 18px; height: 18px; color: var(--indigo); flex-shrink: 0; }

/* ---- Sections (compact) ---- */
.section { padding: 28px 0; }
.section-head { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 8px; }
.section-head .lead { max-width: 520px; }

/* ---- Split layout (heading left, content right) ---- */
.split { display: grid; grid-template-columns: 0.8fr 1.5fr; gap: 28px; align-items: start; }
.split-head { position: sticky; top: 88px; }
.split-head h2 { margin-bottom: 8px; }
.split-head .lead { max-width: 340px; }

/* ---- Grids ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---- University cards ---- */
.uni-card { display: flex; flex-direction: column; gap: 12px; }
.uni-card .uni-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.uni-logo { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--indigo-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--indigo); font-size: 1rem; }
.uni-name { font-weight: 700; font-size: 1rem; }
.uni-loc { font-size: .78rem; color: var(--muted); }
.match-score { text-align: center; }
.match-score .ms-num { font-weight: 700; font-size: 1.3rem; color: var(--green); }
.match-score .ms-lbl { font-size: .64rem; color: var(--muted); }
.uni-meta { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }
.uni-meta .row { display: flex; justify-content: space-between; gap: 12px; }
.uni-meta .row .k { color: var(--muted); }
.uni-meta .row .v { font-weight: 600; text-align: right; }

/* ---- Scholarship cards ---- */
.sch-card { display: flex; flex-direction: column; gap: 10px; }
.sch-card .sch-amount { font-size: 1.3rem; font-weight: 700; color: var(--green); }

/* ---- Timeline (How It Works) ---- */
.timeline { display: flex; align-items: flex-start; position: relative; }
.timeline::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 0; border-top: 2px dashed var(--line); }
.tl-step { flex: 1; text-align: center; position: relative; padding: 0 8px; }
.tl-circle { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-soft); border: 2px solid var(--indigo); color: var(--indigo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; margin: 0 auto 12px; z-index: 1; }
.tl-num { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .68rem; z-index: 2; }
.tl-step h4 { font-size: .92rem; margin-bottom: 4px; }
.tl-step p { font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ---- Feature grid (AI capabilities) — 4 cols × 2 rows ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feature { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--white); transition: box-shadow .2s, transform .2s; }
.feature:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.feature .f-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--indigo-soft); color: var(--indigo); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.feature h4 { font-size: .85rem; margin-bottom: 2px; }
.feature p { font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* ---- Pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 16px; }
.price-card .btn { margin-top: auto; }
.price-card.featured { border: 2px solid var(--indigo); box-shadow: var(--sh-lg); padding-top: 36px; }
.price-card .price { font-size: 1.6rem; font-weight: 700; margin: 4px 0; }
.price-card .price span { font-size: .8rem; font-weight: 500; color: var(--muted); }
.price-card .plan-sub { font-size: .76rem; color: var(--muted); margin-bottom: 10px; }
.price-card ul { list-style: none; margin: 0 0 14px; flex: 1; }
.price-card li { font-size: .76rem; padding: 3px 0; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.price-card li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; }
.badge-featured { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--indigo); color: #fff; white-space: nowrap; z-index: 10; display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.4; }

/* ---- Link arrow (replaces dead href=#) ---- */
.link-arrow { color: var(--indigo); font-weight: 600; font-size: .9rem; text-decoration: none; transition: gap .2s; display: inline-flex; align-items: center; gap: 4px; }
.link-arrow:hover { gap: 8px; }
.link-arrow.green { color: var(--green); }

/* ---- Final CTA ---- */
.final-cta { background: var(--navy); color: #fff; text-align: center; padding: 40px 0; }
.final-cta h2 { color: #fff; margin-bottom: 8px; }
.final-cta .sub { color: rgba(255,255,255,.75); margin-bottom: 18px; font-size: 1rem; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); padding: 40px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,.6); text-decoration: none; display: block; margin-bottom: 8px; font-size: .84rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; justify-content: space-between; font-size: .78rem; color: rgba(255,255,255,.45); flex-wrap: wrap; gap: 10px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split-head { position: static; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }

  /* NAV COLLAPSE BELONGS HERE, NOT AT 768px.
     Measured live at 834px: the full link bar (How It Works / Universities / Scholarships / Pricing / For
     Universities) plus the language button, Log in and the CTA needed 1043px, pushing the document 209px wide
     on a 834px tablet. The hamburger was only enabled below 768px, so every tablet in portrait overflowed.
     Collapsing at 1024px is the standard behaviour and removes the overflow at its only remaining source. */
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.nav-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 14px; }
  .mobile-lang { display: block; }
  .lang-btn { display: none !important; }
}
.mobile-lang { display: none; }
@media (max-width: 768px) {
  /* Measured at 360px: with 24px of container padding on both sides the header had 312px of usable width but
     needed 115px (brand) + 204px (menu button + CTA) + 12px gap = 331px, leaving a 3px overflow. Reducing the
     side padding on small screens gives the header room without shrinking the primary CTA any further. */
  .container { padding-left: 16px; padding-right: 16px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.nav-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 14px; }
  .mobile-lang { display: block; }
  .mobile-lang a { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
  /* Measured at 360px: brand 115px + nav-cta 331px could not fit in 312px of usable width, and nav-cta has
     flex-shrink:0, so the header pushed the whole document 130px wide. The language switch is already present
     in the mobile menu above (.mobile-lang), so the duplicate in the bar is hidden here.
     !important is required because the element carries an inline `display:inline-flex`, which would otherwise
     win over this rule — that inline style was the reason the first attempt did not work. */
  .lang-btn { display: none !important; }
  .nav-cta .btn-primary { padding: 9px 14px; font-size: .8rem; }
  .nav { gap: 12px; }
  .nav-cta { gap: 8px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .timeline { flex-direction: column; gap: 20px; align-items: stretch; }
  .timeline::before { display: none; }
  .section { padding: 40px 0; }
  .dash-wrap { overflow: hidden; }
  .float-card { display: none; }
  .trust-item { border-right: none; padding: 6px 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: .82rem; }
  .nav { gap: 10px; }
}

/* Marks illustrative/example data so it can never be mistaken for the visitor's own results. */
.demo-note{font-size:.76rem;color:var(--muted);background:rgba(99,102,241,.06);border-left:3px solid var(--indigo);padding:8px 12px;border-radius:6px;margin-bottom:14px;line-height:1.45;}

/* ---- touch targets ---- */
/* Measured on the live homepage: 21 nav links rendered 93x17 and 3 .link-arrow CTAs 137x22 / 185x22 — all
   below the 24px minimum interactive size. The visible type size is unchanged; the interactive box is given a
   minimum height and vertical padding so the target is comfortably tappable. */
.nav-links a { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 2px; }
.link-arrow { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; }
.brand { min-height: 24px; }

/* ---- pricing detail ---- */
/* The pricing page states real quantities and limits, so the cards need a little structure: an amount line, a
   scope line, a feature list, and a permanently visible limitations note. This is information-first rather
   than decorative — the limitations must not be hideable. */
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--indigo); box-shadow: var(--sh-lg); }
.price-amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 2px; }
.price-period { font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-apps { font-size: .84rem; font-weight: 600; color: var(--indigo); margin-bottom: 14px; }
.price-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.price-list li { font-size: .86rem; color: var(--muted); line-height: 1.45; padding-left: 18px; position: relative; }
.price-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.btn-block { display: block; text-align: center; width: 100%; }
.price-limits { font-size: .74rem; color: var(--muted); margin-top: 12px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }
.cmp-wrap { overflow-x: auto; margin: 16px 0 8px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 720px; }
.cmp-table caption { text-align: left; color: var(--muted); font-size: .84rem; padding-bottom: 10px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font-weight: 700; color: var(--ink); }
.cmp-price { font-weight: 500; color: var(--muted); font-size: .8rem; }
.cmp-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.plain-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plain-list li { font-size: .88rem; color: var(--muted); line-height: 1.55; padding-left: 18px; position: relative; }
.plain-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--line); }
.notice { background: rgba(99,102,241,.06); border-left: 3px solid var(--indigo); padding: 14px 18px; border-radius: 8px; font-size: .86rem; line-height: 1.6; color: var(--muted); }
.cta-band { text-align: center; padding: 44px 0 8px; }

/* ---- execution pipeline (design-director pass) ---- */
/* The hero is information-first: the fold states what the product DOES and shows the nine real stages, rather
   than a large decorative illustration. Density comes from the stage list, not from padding. */
.hero { padding: 26px 0 18px; }
.hero-top { margin-bottom: 26px; }
.hero-copy { max-width: 780px; }
.hero-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); margin-bottom: 10px; }
.hero h1 { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.06; margin-bottom: 14px; }
.hero-em { color: var(--indigo); }
.hero .lead { max-width: 660px; margin-bottom: 20px; }
.hero-foot { margin-top: 14px; font-size: .82rem; color: var(--muted); }
.hero-count { font-weight: 700; color: var(--ink); }

.pipeline { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); padding: 20px 22px 22px; }
.pipeline-head { margin-bottom: 16px; }
.pipeline-head h2 { font-size: 1.05rem; margin-bottom: 4px; }
.pipeline-head p { font-size: .84rem; color: var(--muted); }
.pipe-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pipe-step { background: var(--white); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pipe-num { font-size: .68rem; font-weight: 800; color: var(--indigo); letter-spacing: .08em; }
.pipe-name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.pipe-desc { font-size: .76rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .pipe-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pipe-list { grid-template-columns: 1fr; } }

/* The Arqeliva column is highlighted so a visitor can find their own position at a glance. */
.cmp-us { background: rgba(99,102,241,.05); }
.cmp-table td { line-height: 1.5; }

/* ---- payment page states ---- */
/* The payment page no longer collects card data, so the redirect notice and the return states carry the whole
   interaction. Each state must be visibly distinct: a student who has paid and a student who was cancelled need
   very different reassurance, and the "confirming" state must never look like a failure. */
.pay-redirect { text-align: center; padding: 22px 18px; background: var(--bg); border-radius: var(--r-md); margin-bottom: 16px; }
.pay-state { padding: 14px 16px; background: var(--bg); border-radius: var(--r-md); font-size: .86rem; line-height: 1.6; margin-bottom: 14px; }
.pay-state a { color: var(--indigo); font-weight: 600; }

/* The student's plan is shown from the server, so it can never disagree with what was actually paid for. */
.plan-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--white); font-size: .8rem; }
.plan-chip-label { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.plan-chip-name { font-weight: 700; color: var(--ink); }

/* ---- app-page touch targets ---- */
/* Measured on the live app pages at 1440: 1-9 controls per page fell below the 24px minimum. These are the
   classes involved (source links, sidebar items, table actions), so the interactive box is enlarged without
   touching the type size or the layout. */
.plain-list a, .cmp-table a, .side-nav a, .side-foot, .table a, td a, .meta a, .card a.inline {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 0;
}
.table td .btn, td .btn-sm, .actions .btn-sm { min-height: 24px; }
.side-nav li a { padding: 6px 0; }

/* ---- universal inline-link target size ----
   Measured on the live app pages: bare links such as "View all" (49x21), "Log in" (40x16), "Reset" (37x16) and
   "Create account" (100x16) fell below the 24px minimum because they are plain inline anchors with no padding.
   Rather than taggingevery one individually, every anchor inside a paragraph, header, card or table cell is given
   the minimum interactive height. Type size is unchanged; only the tappable box grows. */
p a, .card a, .page-head a, .card-head a, .card-body a, .row a, .meta a,
.header-actions a, .form-foot a, .auth-foot a, .link, .link-inline {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 0;
}
/* Anything explicitly marked block keeps its layout but still needs the height. */
a.block-link { display: block; min-height: 24px; padding: 3px 0; }

/* ---- measured remaining small targets ----
   Ancestry-checked on the live pages: "View all" in .panel-head (49x21), and "Log in" / "Reset" / "Create
   account" in .auth-alt (40x16, 37x16, 100x16). These containers were not covered by the earlier rules, so the
   target is raised here by class rather than by tag. */
.panel-head a, .auth-alt a, .auth-alt a.btn, .auth-card .auth-alt a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 4px 0;
}
/* .auth-alt lays its children out inline; keep the flow but stop the anchor collapsing to line-height. */
.auth-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; }

/* ---- scholarship grid at tablet ----
   MEASURED at 834px (tablet portrait): the scholarship grid kept three columns, so with the 240px app sidebar
   the available content was 594px and the columns resolved to 185 / 193 / 233px — uneven because the cards'
   intrinsic minimum width differs (a longer "Merit Based" badge forces one wider). The third card then extended
   82px past the sidebar and the page scrolled horizontally.
   Two fixes: the grid drops to two columns below 1024px (so cards are wide enough for their content), and every
   grid child is allowed to shrink with min-width:0 rather than being pinned to its intrinsic minimum. */
@media (max-width: 1024px) {
  .sch-grid, .grid-3.sch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card.sch-card { min-width: 0; }
  .card.sch-card .badge { white-space: normal; }
  .app-main .grid-3, .app-content .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sch-grid, .grid-3.sch-grid, .app-main .grid-3, .app-content .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
}
/* min-width:0 on grid children stops a wide child (a badge, a long word) from forcing its column wider than the
   track — the same class of defect fixed on the ReturnToKin hero. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .sch-grid > * { min-width: 0; }

/* ---- scholarship card: financial distinctions ---- */
/* These classes are SEMANTIC, not decorative. An unknown amount must look different from a known one, a
   per-month stipend must look different from a one-off sum, and an unverified award must not look actionable. */
.sch-amount { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; color: var(--ink); }
.sch-basis { font-size: .76rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sch-amount-unknown { font-size: .88rem !important; font-weight: 600; color: #b45309; line-height: 1.45; }
.sch-benefit { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 6px 0 4px; }
.sch-meta { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.sch-eligibility { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sch-source { font-size: .72rem; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.sch-source a { color: var(--indigo); font-weight: 600; }
.sch-not-actionable { font-size: .74rem; color: #b45309; background: rgba(245,158,11,.1); border-radius: 6px; padding: 8px 10px; margin-top: 12px; text-align: center; }